/* Drobiazgi wspólne dla obu światów — wszystko, czego nie było w statycznych makietach. */

/* komunikat błędu wysyłki formularza */
.form__blad{
  margin:0 0 1rem; padding:.7rem .9rem; font-size:.92rem; line-height:1.5;
  border-left:2px solid var(--danger,#a33a2a); background:rgba(163,58,42,.07);
}

/* pułapka na boty — niewidoczna, ale nie display:none (część botów to omija) */
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}

/* pole „do korekty” w panelu jest w adminie; na froncie notatka nigdy się nie pokazuje */
.ln-notatka-robocza{display:none!important}

/* domyślne galerie Gutenberga w układzie makiety */
.wp-block-gallery.has-nested-images{gap:var(--s2,1rem)}
.wp-block-gallery.has-nested-images figure.wp-block-image img{border-radius:10px}

/* skip link */
.ln-skip{position:absolute; left:-9999px; top:0; z-index:200; padding:.7rem 1rem; background:#fff; color:#111}
.ln-skip:focus{left:0}

/* paginacja archiwów */
.ln-strony{display:flex; gap:.6rem; justify-content:center; margin-top:var(--s5,3rem)}
.ln-strony .page-numbers{
  font-family:var(--font-cta,system-ui); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.5rem .8rem; text-decoration:none; border:1px solid var(--line,rgba(0,0,0,.15)); color:inherit;
}
.ln-strony .page-numbers.current{background:currentColor}
.ln-strony .page-numbers.current{color:inherit; opacity:.55}

/* ——— przejście ślubna → kobieca (sekcja spoza makiety, w jej języku wizualnym) ——— */
.swiat-most{
  display:grid; grid-template-columns:1fr minmax(0,340px); gap:clamp(24px,5vw,64px);
  align-items:center; border-top:1px solid var(--line); padding-block:var(--s6);
}
.swiat-most__tresc h2{margin:var(--s2) 0 var(--s2); font-size:clamp(1.7rem,3.2vw,2.4rem)}
.swiat-most__tresc p{max-width:52ch; color:var(--ink-soft); margin-bottom:var(--s3)}
.swiat-most__fig{margin:0; overflow:hidden; border-radius:var(--r,2px)}
.swiat-most__fig img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  object-position:var(--pos,50% 50%); filter:grayscale(.15);
  transition:transform 1.1s cubic-bezier(.22,1,.3,1), filter .6s ease;
}
.swiat-most:hover .swiat-most__fig img{transform:scale(1.03); filter:none}
@media (max-width:760px){
  .swiat-most{grid-template-columns:1fr}
  .swiat-most__fig{max-width:280px}
}

/* ——— minimum dla bloków rdzenia (arkusz wp-block-library jest wyłączony) ——— */
.wp-block-image{margin:0 0 var(--s3,1.5rem)}
.wp-block-image img{max-width:100%; height:auto; display:block}
.wp-block-image figcaption{font-size:.85rem; color:var(--ink-soft,#666); margin-top:.5rem}
.wp-block-gallery{display:flex; flex-wrap:wrap; gap:var(--s2,1rem); margin:0 0 var(--s3,1.5rem)}
.wp-block-gallery.has-nested-images figure.wp-block-image{flex:1 1 220px; margin:0}
.wp-block-columns{display:flex; flex-wrap:wrap; gap:var(--s3,1.5rem)}
.wp-block-column{flex:1 1 320px; min-width:0}
.wp-block-buttons{display:flex; flex-wrap:wrap; gap:var(--s2,1rem)}
.wp-block-separator{border:0; border-top:1px solid var(--line,rgba(0,0,0,.15)); margin:var(--s4,2.5rem) 0}
.wp-block-quote{border-left:2px solid var(--line,rgba(0,0,0,.15)); padding-left:var(--s3,1.5rem); margin:var(--s3,1.5rem) 0}
.aligncenter{margin-inline:auto}
.alignwide{max-width:min(100%,1100px); margin-inline:auto}
.alignfull{max-width:none}
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ——— hero świata kobiecego: „zapalanie” zostaje na zdjęciu, tekst nie czeka ———
   W makiecie klasa .is-dark przygaszała także nagłówek, więc LCP czekał na pobranie
   kadru (3,3 s na mobile). Kadr zapala się tak samo, a napis wjeżdża własną animacją
   od razu po pierwszym malowaniu. */
.swiat-kobiecy .hero.is-dark .hero__body{opacity:1; transform:none}
.swiat-kobiecy .hero__body{animation:ln-hero-wejscie .8s cubic-bezier(.22,1,.3,1) backwards}
@keyframes ln-hero-wejscie{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .swiat-kobiecy .hero__body{animation:none}
}

/* Na wąskim ekranie dwa CTA hero mieszczą się w jednym wierszu tylko na styk —
   przy kroju zastępczym łamią się na dwa i cała kolumna napisu podskakuje (CLS).
   Ustawiamy je w kolumnie: wysokość jest stała niezależnie od kroju, a cele
   dotknięcia są większe. */
@media (max-width:520px){
  .swiat-kobiecy .hero__ctas{flex-direction:column; align-items:flex-start; gap:var(--s2)}
}

/* Atrybuty width/height obrazków WordPressa są podpowiedzią prezentacyjną i wygrywają
   z `aspect-ratio` zapisanym w makietach (karuzela historii kadrowała się wtedy 3:2
   tylko w teorii). `:where()` ma zerową swoistość, więc reguły makiet — np. `height:100%`
   w `.just` czy `.hero__slide` — nadal biorą górę. */
:where(img[width][height]){height:auto}

/* ——— Strefa klienta: kafelki galerii ——— */
.sk{padding-block:var(--s5,3rem)}
.sk__siatka{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(18px,2.4vw,32px)}
.sk__kafel{display:block; text-decoration:none; color:inherit}
.sk__fig{position:relative; display:block; overflow:hidden; border-radius:10px; background:var(--paper-2,#e3e3e0)}
.sk__fig img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  filter:grayscale(.45) brightness(.82); transition:filter .6s ease, transform 1.1s cubic-bezier(.22,1,.3,1)}
.sk__kafel:hover .sk__fig img{filter:none; transform:scale(1.03)}
.sk__kafel.is-otwarta .sk__fig img{filter:none}
.sk__stan{position:absolute; right:10px; top:10px; width:30px; height:30px; display:grid; place-items:center;
  border-radius:50%; background:rgba(20,20,19,.6); backdrop-filter:blur(3px)}
.sk__stan svg{width:15px; height:15px; fill:none; stroke:#fff; stroke-width:1.6}
.sk__opis{display:block; padding:.75rem .1rem 0}
.sk__opis b{display:block; font-family:var(--font-title,serif); font-weight:400; font-size:1.12rem; line-height:1.25}
.sk__opis small{display:block; margin-top:.25rem; font-family:var(--font-cta,var(--font-body,sans-serif));
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft,#6b6c69)}
.sk__pusto,.sk__stopka{color:var(--ink-soft,#6b6c69); max-width:60ch}
.sk__stopka{margin-top:var(--s4,2.5rem); font-size:.93rem}
.swiat-kobiecy .sk__fig{border-radius:10px}

/* ——— Znak marki w nagłówku: kaligrafia + podpis ———
   Ten sam układ w obu światach: nazwisko pisanką, pod spodem świat wersalikami. */
.nav__mark{display:inline-flex; flex-direction:column; gap:.1rem; line-height:1; text-decoration:none}
.nav__mark b{
  font-family:"Pinyon Script","Pinyon Script zastępcza",cursive;
  font-weight:400; font-size:clamp(1.55rem,2.4vw,2rem); letter-spacing:.01em;
  text-transform:none; line-height:1.05; padding-right:.08em;
}
.nav__mark small{
  font-family:var(--font-cta,var(--font-body,sans-serif));
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; opacity:.82; white-space:nowrap;
}
/* świat ślubny: nad hero biało, po przyklejeniu nawigacji atramentowo */
.swiat-slubny .nav__mark{color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.45)}
.swiat-slubny .nav.is-stuck .nav__mark{color:var(--ink); text-shadow:none}
@media (max-width:640px){
  .nav__mark b{font-size:1.4rem}
  .nav__mark small{font-size:.55rem; letter-spacing:.24em}
}

/* ═══ Galeria klienta: baner + większe kadry + czytelny tryb edycji ═══ */

.gk-baner{position:relative; background:var(--paper-2,#e3e3e0); overflow:hidden}
.gk-baner--foto{min-height:clamp(280px,42vh,460px); display:flex; align-items:flex-end}
.gk-baner--foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:var(--pos,50% 45%)}
.gk-baner__scrim{position:absolute; inset:0;
  background:linear-gradient(transparent 30%,rgba(18,19,18,.35) 60%,rgba(18,19,18,.82))}
.gk-baner__tresc{position:relative; z-index:2; padding-block:var(--s5,3rem) var(--s4,2.5rem)}
.gk-baner--foto .gk-baner__tresc{color:#fff}
.gk-baner--foto .gk-baner__tresc .label{color:rgba(255,255,255,.85)}
.gk-baner__tresc h1{margin:var(--s2,1rem) 0 .4rem; font-size:clamp(2rem,4.4vw,3.4rem)}
.gk-baner__meta{font-family:var(--font-cta,sans-serif); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; opacity:.85}

/* siatka: kadry na tyle duże, żeby dało się je ocenić */
.cgrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important}
@media (max-width:900px){.cgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}}
@media (max-width:560px){.cgrid{grid-template-columns:repeat(2,1fr)!important}}
.cphoto{border-radius:8px}

/* w trybie edycji przyciski są widoczne od razu — nie tylko po najechaniu,
   bo na telefonie i tablecie najechać się nie da */
body.editing .cphoto .cact{opacity:1; transform:none; pointer-events:auto}
body.editing .cphoto .cact button{font-size:.68rem; padding:.55em .8em}
.cact button svg{width:15px; height:15px}

/* pasek trybu: jaśniejszy i mniej „ciężki” dla klienta */
.editbar.is-editing{background:var(--paper-2,#e3e3e0); border-bottom:1px solid var(--line)}
.editbar.is-editing .editbar__txt h2{color:var(--ink)}
.editbar.is-editing .editbar__txt p{color:var(--ink-soft)}
.editbar__in{padding-block:var(--s3,1.5rem)}

/* strona Strefy klienta: jedno zdjęcie na cały ekran, panel logowania, kroki na przezroczystym pasie u dołu */
.lock--strefa{min-height:100svh; padding:120px var(--gutter) 0; grid-template-rows:1fr auto; align-items:center; justify-items:center}
.lock--strefa .lock__bg img{object-position:50% 40%}
.lock--strefa .lock__bg::after{background:linear-gradient(rgba(18,17,16,.28) 0%,rgba(18,17,16,.5) 55%,rgba(18,17,16,.72) 100%)}
.lock--strefa .lock__card{margin-block:var(--s4,2.5rem)}
.lock__kroki{position:relative; z-index:2; width:calc(100% + 2 * var(--gutter)); margin-inline:calc(-1 * var(--gutter)); background:rgba(255,255,255,.10); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,.16); color:#fff}
.lock__kroki-wrap{padding-block:clamp(1.6rem,3vw,2.6rem)}
.lock__kroki-lista{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,3rem)}
.lock__krok-n{display:block; font-family:var(--font-title,serif); font-style:italic; font-size:1.35rem; color:var(--accent,#d9a58a); line-height:1; margin-bottom:.55rem}
.lock__krok h3{font-size:1.12rem; margin:0 0 .35rem; color:#fff}
.lock__krok p{font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.78); margin:0}
.lock__zaproszenie{margin:clamp(1rem,2vw,1.6rem) 0 0; font-size:.86rem; color:rgba(255,255,255,.78)}
.lock__zaproszenie a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45); margin-left:.35em}
.lock__zaproszenie a:hover{border-bottom-color:#fff}
@media (max-width:820px){.lock--strefa{padding-top:96px} .lock__kroki-lista{grid-template-columns:1fr; gap:1.1rem}}
.gate{max-width:560px}.gate__hint{margin-top:var(--s3,1.5rem); color:var(--ink-soft,#6b6c69); font-size:.9rem}
.lock__hint a{color:inherit}

/* wyróżnienie słowa w tekście (panel: przycisk „akcent”) */
.akcent{color:var(--accent,var(--copper,#a9603a))}

/* baner zgody na ciasteczka analityczne (pokazuje się tylko przy włączonym GA4) */
.ln-zgoda{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9000;width:min(680px,calc(100vw - 24px));
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 18px;border-radius:12px;
  background:#16130f;color:#f3ece4;box-shadow:0 24px 60px -24px rgba(0,0,0,.65);font-size:.9rem;line-height:1.5}
.ln-zgoda[hidden]{display:none}
.ln-zgoda__tekst{flex:1 1 320px;margin:0}
.ln-zgoda__tekst a{color:#e0b394;text-decoration:underline;text-underline-offset:3px}
.ln-zgoda__akcje{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap}
.ln-zgoda button{min-height:42px;padding:0 16px;border-radius:8px;border:1px solid rgba(243,236,228,.28);
  background:transparent;color:inherit;font:inherit;font-size:.86rem;cursor:pointer;transition:background .15s,border-color .15s}
.ln-zgoda button:hover{border-color:rgba(243,236,228,.6)}
.ln-zgoda button.tak{background:#c98a63;border-color:#c98a63;color:#1a1410;font-weight:600}
.ln-zgoda button.tak:hover{background:#d79a73}
.ln-zgoda button:focus-visible{outline:2px solid #e0b394;outline-offset:2px}
@media (max-width:520px){.ln-zgoda{bottom:8px;padding:14px}.ln-zgoda__akcje{width:100%}.ln-zgoda__akcje button{flex:1}}