/* ===========================================================================
   Cafardini — Section styling (Phase 1, static)
   =========================================================================== */

/* ---- 2 · HERO -------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--bg-dark); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: grayscale(.28) contrast(1.02); }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background: var(--scrim-dark); }
.hero__scrim::after { content:""; position: absolute; inset: 0; background: var(--scrim-side); }
.hero__inner { position: relative; z-index: 2; width: 100%; color: var(--on-dark); padding-bottom: clamp(56px, 9vh, 128px); padding-top: calc(var(--header-h) + 24px); }
.hero__eyebrow { margin-bottom: 1.6rem; }
.hero h1 { max-width: 15ch; }
.hero__sub { margin-top: 1.8rem; max-width: 46ch; color: var(--on-dark-soft); font-weight: 300; font-size: clamp(1rem,1.4vw,1.2rem); }
.hero__cue {
  position: absolute; z-index: 2; left: var(--gutter); bottom: 26px;
  display: none; align-items: center; gap: .8rem;
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-soft);
}
@media (min-width: 720px) { .hero__cue { display: flex; } }
.hero__cue i { width: 1px; height: 40px; background: currentColor; display: block; }
/* keep hero placeholder badge clear of the fixed header */
.hero .ph-badge { top: auto; bottom: 26px; right: var(--gutter); }
@media (max-width: 720px){ .hero .ph-badge { bottom: 16px; right: 16px; } }

/* ---- 3 · SCENE (full-width still) ------------------------------------ */
.scene { position: relative; }
.scene__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-dark); }
@media (max-width: 720px){ .scene__media { aspect-ratio: 3/4; } }
.scene__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) contrast(1.02); }
.scene__cap {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: clamp(28px,5vw,72px) var(--gutter);
  background: linear-gradient(180deg, rgba(20,17,14,0), rgba(20,17,14,.72));
  color: var(--on-dark);
}
.scene__cap .display { max-width: 20ch; }
.scene__cap p { margin-top: 1rem; max-width: 44ch; color: var(--on-dark-soft); font-weight: 300; }

/* ---- 4 · CRAFT slide (asymmetric text + image) ----------------------- */
.craft__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px){ .craft__grid { grid-template-columns: 1.05fr .95fr; } }
.craft__media { position: relative; aspect-ratio: 4/5; overflow: hidden; border: 1px solid var(--hairline); }
.craft__media img { width: 100%; height: 100%; object-fit: cover; }
.craft__body { max-width: 52ch; }
.partners { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--hairline); }
.partners__label { margin-bottom: 1rem; }
.partners__list { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; font-family: var(--font-display); font-size: clamp(1.15rem,2vw,1.6rem); color: var(--text); }
.partners__list li { position: relative; }
.partners__list li + li::before { content:"·"; position: absolute; left: -.95rem; color: var(--text-muted); }

/* ---- 5 · SUIT 3D placeholder ----------------------------------------- */
.suit { background: var(--bg-dark); color: var(--on-dark); }
.suit__stage {
  position: relative; margin-inline: auto; max-width: 560px; aspect-ratio: 3/4;
  border: 1px solid var(--hairline-dark); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 12%, var(--c-ink-2), var(--c-ink));
}
.suit__stage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(.2); }
.suit__floor { position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(180deg, rgba(20,17,14,0), rgba(20,17,14,.6)); z-index: 1; }
.suit__rotor {
  position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .7em 1.2em; border: 1px solid var(--a-ivory-40); border-radius: var(--radius-pill);
  background: rgba(20,17,14,.4); backdrop-filter: blur(6px);
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--a-ivory-88);
  pointer-events: none;
}
.suit__stage.is-interactive .suit__rotor { opacity: .9; }
.suit__stage.is-dragging .suit__rotor { opacity: 0; transition: opacity var(--dur) var(--ease); }
.suit__rotor svg { width: 15px; height: 15px; opacity: .8; }
/* 3D left · caption right */
.suit__layout { display: grid; grid-template-columns: 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
@media (min-width: 900px) { .suit__layout { grid-template-columns: .92fr 1.08fr; } }
.suit__layout .suit__stage { margin: 0; width: 100%; max-width: 460px; }
@media (max-width: 899px) { .suit__layout .suit__stage { margin-inline: auto; } }
.suit__head { max-width: 46ch; }
.suit__head .sec-head { align-items: flex-start; }
.suit__body { margin-top: 1.2rem; color: var(--on-dark-soft); font-weight: 300; }

/* ---- 6 · PERSONALIZACJA stats ---------------------------------------- */
.stats { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--hairline); border-block: 1px solid var(--hairline); margin-top: clamp(2.4rem,5vw,4rem); }
@media (min-width: 760px){ .stats { grid-template-columns: repeat(3,1fr); } }
.stat { background: var(--bg); padding: clamp(2rem,4vw,3.2rem) clamp(1.4rem,3vw,2.4rem); }
.stat__num { font-family: var(--font-display); font-weight: 400; line-height: 1; font-size: clamp(3rem,6vw,5rem); letter-spacing: -.02em; }
.stat__label { margin-top: .9rem; font-size: .84rem; color: var(--text-soft); font-weight: 300; }

/* ---- 7 · ŚLUB band --------------------------------------------------- */
.band { position: relative; min-height: 62svh; display: flex; align-items: center; overflow: hidden; background: var(--bg-dark); color: var(--on-dark); }
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(.4) contrast(1.02); }
.band__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,17,14,.74), rgba(20,17,14,.2) 70%, rgba(20,17,14,0)); }
.band__inner { position: relative; z-index: 2; max-width: 46ch; }
.band__inner p { margin-top: 1.2rem; color: var(--on-dark-soft); font-weight: 300; }
.band__inner .btn { margin-top: 2rem; }

/* ---- 8 · DORADCY (advisors) ------------------------------------------ */
.advisors__grid { display: grid; gap: clamp(1rem,2.4vw,2rem); grid-template-columns: repeat(2,1fr); margin-top: clamp(2.4rem,5vw,3.6rem); }
@media (min-width: 860px){ .advisors__grid { grid-template-columns: repeat(4,1fr); } }
.advisor { position: relative; }
.advisor__media { aspect-ratio: 3/4; overflow: hidden; background: var(--bg-alt); border: 1px solid var(--hairline); }
.advisor__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5); transition: filter var(--dur) var(--ease); }
.advisor:hover .advisor__media img { filter: grayscale(0); }
.advisor__name { margin-top: 1rem; font-family: var(--font-display); font-size: 1.4rem; }
.advisor__role { font-size: .68rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); margin-top: .2rem; }
.advisor__quote { margin-top: .5rem; font-family: var(--font-display); font-style: italic; font-size: 1.02rem; line-height: 1.35; color: var(--text-soft); }

/* ---- 9 · PRASA ------------------------------------------------------- */
.press { text-align: center; }
.press__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.8rem,3.4vw,3.4rem); margin-top: 2.6rem; max-width: 980px; margin-inline: auto; }
.press__row img { height: clamp(18px,2.4vw,26px); width: auto; opacity: .55; filter: grayscale(1); transition: opacity var(--dur) var(--ease); }
.press__row img:hover { opacity: .85; }

/* ---- 10 · UMÓW SPOTKANIE (booking) ----------------------------------- */
.booking__grid { display: grid; gap: clamp(2rem,5vw,5rem); grid-template-columns: 1fr; align-items: start; margin-top: clamp(2.4rem,5vw,3.6rem); }
@media (min-width: 940px){ .booking__grid { grid-template-columns: .9fr 1.1fr; } }
.locations { display: grid; gap: .2rem; align-content: start; }
.loc { padding: 1.05rem 0; border-top: 1px solid var(--hairline-dark); }
.loc:first-child { border-top: 0; padding-top: 0; }
.loc__city { font-family: var(--font-display); font-size: 1.45rem; }
.loc__row { margin-top: .3rem; font-size: .86rem; color: var(--on-dark-soft); font-weight: 300; }
.loc__row a:hover { color: var(--on-dark); }

.form { display: flex; flex-direction: column; gap: 1.3rem; align-items: stretch; }
.form__row { display: grid; gap: 1.3rem; grid-template-columns: 1fr; }
@media (min-width: 620px){ .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field label { font-size: .64rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--on-dark-soft); }
.field input, .field select {
  background: transparent; border: 0; border-bottom: 1px solid var(--a-ivory-40);
  color: var(--on-dark); padding: .7em 0; font-size: 1rem; font-weight: 300;
  transition: border-color var(--dur) var(--ease);
}
.field input::placeholder { color: var(--a-ivory-40); }
.field input:focus, .field select:focus { outline: 0; border-bottom-color: var(--c-ivory); }
.field select:invalid { color: var(--a-ivory-40); }
.field select option { color: var(--c-ink); }
.form__submit { align-self: flex-start; margin-top: .4rem; }

/* ---- 11 · BLOG (dziennik) -------------------------------------------- */
.journal__grid { display: grid; gap: clamp(1.4rem,3vw,2.4rem); grid-template-columns: 1fr; margin-top: clamp(2.4rem,5vw,3.6rem); }
@media (min-width: 760px){ .journal__grid { grid-template-columns: repeat(3,1fr); } }
.post__media { aspect-ratio: 3/2; overflow: hidden; border: 1px solid var(--hairline); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.post:hover .post__media img { transform: scale(1.04); }
.post__meta { margin-top: 1rem; font-size: .64rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); }
.post__title { margin-top: .6rem; font-family: var(--font-display); font-size: 1.55rem; line-height: 1.12; }

/* ---- 12 · INSTAGRAM strip -------------------------------------------- */
.insta__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.insta__row { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 2rem; }
@media (min-width: 620px){ .insta__row { grid-template-columns: repeat(4,1fr); } }
.insta__cell { aspect-ratio: 1; overflow: hidden; }
.insta__cell img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3); transition: transform 1.2s var(--ease), filter var(--dur) var(--ease); }
.insta__cell:hover img { transform: scale(1.05); filter: grayscale(0); }

/* ---- 4b · CO SZYJEMY (categories) ------------------------------------ */
.cats__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: clamp(2.2rem,4vw,3.2rem); }
@media (min-width: 720px){ .cats__grid { grid-template-columns: repeat(3,1fr); } }
.cat { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--bg-dark); display: flex; align-items: flex-end; }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: contrast(1.02) saturate(1.03); transition: transform 1.2s var(--ease); }
.cat:hover img { transform: scale(1.05); }
/* subjects that sit on the right of a wide frame — keep them in view */
.cat--right img { object-position: 82% 22%; }
.cat__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,17,14,0) 42%, rgba(20,17,14,.72)); }
.cat__label { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.3rem; color: var(--on-dark); font-family: var(--font-display); font-size: clamp(1.4rem,2.2vw,2rem); }
.cat__label::after { content: "→"; font-family: var(--font-sans); font-size: .95rem; opacity: .7; transition: transform var(--dur) var(--ease); }
.cat:hover .cat__label::after { transform: translateX(6px); }
.cat--text { background: var(--bg-alt); align-items: center; justify-content: center; }
.cat--text .cat__label { color: var(--text); justify-content: center; gap: .8rem; }
.cat--text .cat__label::after { opacity: .5; }

/* ---- Phase 2 · scroll-scrub cinematic pins --------------------------- */
.cine { position: relative; }
.cine--hero    { height: 340vh; position: relative; z-index: 1; }   /* taller = slower/calmer hero scrub */
.cine--scene   { height: 260vh; position: relative; z-index: 2; margin-top: -180svh; } /* starts covering the hero well before its video ends */
.cine--wedding { height: 190vh; }
.cine__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--bg-dark); }
.cine__media { position: absolute; inset: 0; z-index: 0; will-change: transform; transform: scale(1.06); }
/* hero-only dim: the hero darkens as the scene block slides over it (goupspace) */
.cine__cover { position: absolute; inset: 0; z-index: 6; background: var(--bg-dark); opacity: 0; pointer-events: none; }
/* grainy dissolve on the leading edge of the sliding block (opacity driven by JS) */
.cine__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background-image: url('../img/grain.svg'); background-size: 200px 200px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 34%, transparent 60%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 34%, transparent 60%);
  mix-blend-mode: overlay;
}
.cine__poster, .cine__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine__video { z-index: 1; opacity: 0; transition: opacity .6s var(--ease); }
.cine__video.is-live { opacity: 1; }
.cine--hero .cine__poster, .cine--hero .cine__video { filter: grayscale(.26) contrast(1.02); object-position: 50% 35%; }
.cine--scene .cine__poster, .cine--scene .cine__video { filter: grayscale(.28) contrast(1.02); }
.cine--wedding .cine__poster, .cine--wedding .cine__video { filter: grayscale(.4) contrast(1.02); object-position: 50% 28%; }
.cine__scrim { position: absolute; inset: 0; z-index: 2; }
.cine__scrim--bottom { background: linear-gradient(180deg, rgba(20,17,14,0) 40%, rgba(20,17,14,.78)); }
.cine__copy { position: relative; z-index: 3; }
/* cross-fading captions (text change on scroll) */
.cine__cap { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.cine__cap.is-on { opacity: 1; transform: none; pointer-events: auto; }
.cine__copy--bottom { position: absolute; inset: auto 0 0 0; padding: clamp(28px,5vw,72px) 0; }
.cine__copy--bottom .cine__cap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(28px,5vw,72px); color: var(--on-dark); }
.cine__copy--bottom .cine__cap .display { max-width: 20ch; }
.cine__copy--bottom .cine__cap p:last-child { margin-top: 1rem; max-width: 44ch; color: var(--on-dark-soft); font-weight: 300; }

/* suit 360 — auto-plays once, then pointer-drag turntable */
.suit__stage .cine-video, .suit__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.suit__stage .cine-video { z-index: 1; opacity: 1; filter: grayscale(.15); }
.suit__stage.is-interactive { cursor: grab; touch-action: pan-y; }
.suit__stage.is-dragging { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .cine__video, .suit__stage .cine-video { display: none; } }

/* ---- Footer ---------------------------------------------------------- */
.footer { background: var(--bg-dark); color: var(--on-dark); padding-block: clamp(56px,8vw,96px); }
.footer__top { display: grid; gap: clamp(2rem,5vw,4rem); grid-template-columns: 1fr; }
@media (min-width: 820px){ .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer__brand { font-family: var(--font-display); font-weight: 500; font-size: 2rem; letter-spacing: .16em; text-transform: uppercase; }
.footer__brand + p { margin-top: 1rem; color: var(--on-dark-soft); font-weight: 300; max-width: 30ch; }
.footer__col h4 { font-size: .64rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 1.1rem; font-weight: 400; }
.footer__col li + li { margin-top: .7rem; }
.footer__col a { color: var(--on-dark-soft); font-size: .92rem; font-weight: 300; transition: color var(--dur) var(--ease); }
.footer__col a:hover { color: var(--on-dark); }
.news { display: flex; gap: .6rem; margin-top: 1.1rem; border-bottom: 1px solid var(--a-ivory-40); }
.news input { flex: 1; background: transparent; border: 0; color: var(--on-dark); padding: .6em 0; font-weight: 300; }
.news input::placeholder { color: var(--a-ivory-40); }
.news button { font-size: .68rem; letter-spacing: var(--track-label); text-transform: uppercase; padding: .6em 0 .6em 1em; }
.news__consent { margin-top: 1.1rem; }
.news__consent .check__label { font-size: .74rem; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: clamp(2.6rem,5vw,4rem); padding-top: 1.6rem; border-top: 1px solid var(--hairline-dark); }
.footer__bottom p { font-size: .74rem; color: var(--on-dark-soft); font-weight: 300; }