/* -------------------------------------------------------------------------
   WARIANT 2 — warstwa ładowana WYŁĄCZNIE na /home-motywy-v2,
   po propozycja-d.css i home-ring.css. Strona główna (/) i /home-motywy
   zostają bez zmian.

   Różnice wobec /home-motywy:
   - hero bez listy ikon z podpisami i bez hairline pod przyciskami,
     większy H1, dyskretna wskazówka „przewiń” na dole; hero wypełnia
     ekran tak, żeby druga płyta nie zaglądała do pierwszego widoku,
   - zdjęcia bez plam podkładowych; motywy z koszuli kotwiczą się do
     zdjęcia albo tytułu (nie do krawędzi ekranu); kadry to
     miękkie asymetryczne formy przeniesione z jagodaszerel.pl: blob jej
     hero (60% 40% 55% 45% / 55% 45%) i miękki kwadrat jej „o mnie"
     (50% 30% / 30% 50%), naprzemiennie, w lekkich wariacjach,
   - łuk eliptyczny na całą szerokość tylko na 2. sekcji (Wyzwania)
     i na CTA; reszta styków płyt jest prosta,
   - równy oddech pionowy w każdej sekcji (góra = dół),
   - Wyzwania: większy odstęp między końcem tekstu a hairline w kolumnie,
   - Jak to działa: numery 01–03 w skali numerów z sekcji Wyzwań.
   ------------------------------------------------------------------------- */

.propozycja-d.home-v2 {
  /* bez plamy pod kadrem nie ma czego odsuwać */
  --photo-offset: 0px;
  /* JEDEN rytm: widoczna góra = widoczny dół. Baza D dubluje szew na górze
     (`padding-top: space + seam`), a następna płyta zjada dół. Tu góra jest
     czystym --v2-space, szew wraca na dół. Łuk na Wyzwaniach i CTA liczy
     się do ramy, nie do extra paddingu. */
  --v2-space: clamp(96px, 11vw, 168px);
  --space-section: var(--v2-space);
  --space-section-end: var(--v2-space);
}

/* nadpisuje `.plate + .home-section { padding-top: space + seam }` z D */
.propozycja-d.home-v2 .home-section,
.propozycja-d.home-v2 main > .plate + .home-section {
  padding-top: var(--v2-space);
  padding-bottom: calc(var(--v2-space) + var(--seam));
}

/* ostatniej płyty (końcowe CTA) nic nie zachodzi, więc dół bez
   rekompensaty szwu — czysty rytm --v2-space */
.propozycja-d.home-v2 main > .plate:last-child,
.propozycja-d.home-v2 main > .plate + .home-section:last-child {
  padding-bottom: var(--v2-space);
}

/* --- HERO ---------------------------------------------------------------- */

/* Następna płyta nachodzi o --seam, więc hero rośnie o tyle samo:
   jej zaokrąglona góra zaczyna się dokładnie na dole pierwszego ekranu
   i nic nie zagląda do widoku przed scrollem. */
.propozycja-d.home-v2 .hero {
  min-height: calc(100svh - var(--nav-h) + var(--seam));
  /* równy oddech: dolne --seam zakrywa następna płyta, więc widoczny dół
     ma tyle co góra dopiero po dodaniu szwu do paddingu */
  padding-top: var(--space-hero-top);
  padding-bottom: calc(var(--space-hero-top) + var(--seam));
  /* kolumna tekstu wyśrodkowana względem kadru, nie przyklejona do góry */
  align-items: center;
}

/* bez wiersza ikon hero ma mniej mebli, więc H1 może być większy */
.propozycja-d.home-v2 .hero h1 {
  font-size: clamp(2.5rem, 4.7vw, 4rem);
  line-height: 1.06;
}

/* wskazówka scrolla: napis + szewron w kółku. Stoi NAD szwem (dolne --seam
   hero zakrywa następna płyta, więc niżej byłaby niewidoczna) i ma pełny
   tusz płyty zamiast wygaszonego, żeby była czytelna od razu. */
.propozycja-d.home-v2 .scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--seam) + clamp(14px, 2.4vh, 28px));
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  color: var(--pl-ink);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
}

.propozycja-d.home-v2 .scroll-cue span {
  color: var(--pl-ink-2);
}

.propozycja-d.home-v2 .scroll-cue svg {
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid var(--pl-rule);
  border-radius: 50%;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}

.propozycja-d.home-v2 .scroll-cue:hover,
.propozycja-d.home-v2 .scroll-cue:focus-visible {
  color: var(--pl-accent);
}

.propozycja-d.home-v2 .scroll-cue:hover svg,
.propozycja-d.home-v2 .scroll-cue:focus-visible svg {
  border-color: var(--pl-accent);
}

/* kółko stoi, nurkuje sam szewron */
html.has-motion .propozycja-d.home-v2 .scroll-cue svg path {
  animation: v2-cue-dip 2.6s ease-in-out infinite;
}

@keyframes v2-cue-dip {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }
}

/* na węższych ekranach hero i tak jest wyższe niż viewport,
   więc wskazówka by wisiała w połowie strony — chowamy ją */
@media (max-width: 980px) {
  .propozycja-d.home-v2 .scroll-cue {
    display: none;
  }

  /* mniej powietrza między nawigacją a tytułem i ciaśniejsza typografia:
     po CTA na pierwszym ekranie telefonu ma wystawać kawałek kadru */
  .propozycja-d.home-v2 .hero {
    --v2-hero-pad: clamp(24px, 5vw, 40px);
    min-height: 0;
    padding-top: var(--v2-hero-pad);
    /* dolne --seam zakrywa „Wyzwania”, więc widoczny dół = góra */
    padding-bottom: calc(var(--v2-hero-pad) + var(--seam));
  }

  .propozycja-d.home-v2 .hero h1 {
    margin-bottom: 20px;
    font-size: clamp(2rem, 6.6vw, 2.7rem);
    line-height: 1.08;
  }

  /* na mobile najpierw cały tekst z przyciskami, dopiero pod nimi
     zdjęcie (baza wstawia kadr między H1 a lead — tu wraca na koniec) */
  .propozycja-d.home-v2 .hero-lead {
    order: 3;
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 1rem;
    line-height: 1.58;
  }

  .propozycja-d.home-v2 .hero-actions {
    order: 4;
  }

  .propozycja-d.home-v2 .hero-photo {
    order: 5;
    margin-top: clamp(30px, 7vw, 44px);
  }
}

/* --- ZDJĘCIA — miękkie podłużne kadry, bez plam i motywów ---------------- */

/* koniec z kolorową plamą przesuniętą za kadrem */
.propozycja-d.home-v2 .photo-frame::before {
  content: none;
}

/* Rodzina kadrów wprost z jagodaszerel.pl: dwie formy z jej strony,
   naprzemiennie i w lekkich wariacjach, żeby kadry nie były identyczne.
   Hero u niej: blob `60% 40% 55% 45% / 55% 45%` na pionie ~3:4,
   „o mnie": miękki kwadrat `50% 30% / 30% 50%`. Zwykłe border-radius
   + overflow:hidden + object-fit:cover, bez clip-path — tak jak u niej. */
/* hero: miękki kwadrat jak w „Punkt zwrotny", lustrzana wariacja —
   koniec z jajowatym blobem */
.propozycja-d.home-v2 .hero-photo {
  --photo-shape: 30% 50% 30% 50% / 50% 30% 50% 30%;
}

/* lustrzana wariacja bloba hero */
.propozycja-d.home-v2 .audience-photo {
  --photo-shape: 42% 58% 46% 54% / 47% 53% 45% 55%;
}

/* miękki kwadrat jak jej „o mnie" */
.propozycja-d.home-v2 .about-photo {
  --photo-shape: 50% 30% 50% 30% / 30% 50% 30% 50%;
}

/* lustrzana wariacja miękkiego kwadratu; kadr pełny 2:3 zamiast ciasnego 1:1,
   żeby było widać więcej Adama (tors i dłonie, nie sam portret) */
.propozycja-d.home-v2 .cta-photo {
  --photo-shape: 32% 52% 34% 50% / 50% 32% 52% 34%;
  --photo-ratio: 1100 / 1644;
}

/* --- STYKI PŁYT — proste krawędzie poza Wyzwaniami i CTA ----------------- */

.propozycja-d.home-v2 main > .plate + .plate {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ten sam łuk co na D: elipsa na całą szerokość, wysokość --seam */
.propozycja-d.home-v2 main > .plate + .empathy,
.propozycja-d.home-v2 main > .plate + .cta-band-wrap {
  border-top-left-radius: 50% var(--seam);
  border-top-right-radius: 50% var(--seam);
}

/* --- SZLIF przeniesiony z propozycja-d-motywy.css (bez motywów) ---------- */

.propozycja-d.home-v2 .section-intro {
  max-width: 36rem;
  margin-bottom: clamp(28px, 3.2vw, 52px);
}

/* mechanizm: kroki zawsze w pełnej nieprzezroczystości; aktywność
   sygnalizuje kolor tuszu i akcent na indeksie, nie wygaszanie tekstu */
.propozycja-d.home-v2 .mechanism.has-motion .mechanism-step {
  opacity: 1 !important;
}

.propozycja-d.home-v2 .mechanism.has-motion .mechanism-step:not(.is-active) {
  color: var(--pl-ink-2);
}

.propozycja-d.home-v2 .mechanism.has-motion .mechanism-step.is-active {
  color: var(--pl-ink);
}

.propozycja-d.home-v2 .mechanism.has-motion .mechanism-step.is-active .card-index {
  color: var(--pl-accent);
}

/* --- WYZWANIA — oddech między tekstem a hairline w kolumnie -------------- */

/* margin-top: auto na .card-press dociska hairline do dołu kolumny, więc
   w najdłuższej kolumnie tekst kończył się tuż przy linii. Stały margines
   pod akapitem daje minimum oddechu wszędzie, auto dalej wyrównuje resztę. */
.propozycja-d.home-v2 .empathy-card h3 + p {
  margin-bottom: 28px;
}

.propozycja-d.home-v2 .empathy-card .card-press {
  padding-top: 22px;
}

/* --- JAK TO DZIAŁA — numery jak w Wyzwaniach ----------------------------- */

.propozycja-d.home-v2 .mechanism-step .card-index {
  margin: 0 0 16px;
  font-size: 1.85rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1;
}

.propozycja-d.home-v2 .mechanism-step {
  padding: 34px 12px 38px 0;
}

@media (prefers-reduced-motion: reduce) {
  html.has-motion .propozycja-d.home-v2 .scroll-cue svg path {
    animation: none;
  }
}

/* --- MOTYWY — kotwice od home-v2-placements.json (viewport 1470×871) -----
   Układacz zapisał x/y/w jako % płyty. Tu przeliczone na offset od
   zdjęcia albo tytułu, żeby przy 1280 i 1920 SVG jechały z treścią,
   a nie przyklejały się do krawędzi ekranu. Desktop ≥981. Mobile osobno. */

.propozycja-d.home-v2 .motif-host {
  overflow: visible;
}

.propozycja-d.home-v2 .hero-copy,
.propozycja-d.home-v2 .hero-photo,
.propozycja-d.home-v2 .section-intro,
.propozycja-d.home-v2 .cta-band,
.propozycja-d.home-v2 .cta-photo {
  position: relative;
}

.propozycja-d.home-v2 .placed-motif {
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  line-height: 0;
  pointer-events: none;
  user-select: none;
}

.propozycja-d.home-v2 .placed-motif img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
}

.propozycja-d.home-v2 .placed-motif--over {
  z-index: 2;
}

.propozycja-d.home-v2 .placed-motif--under-copy {
  z-index: 0;
}

.propozycja-d.home-v2 .motif-host .photo-frame {
  position: relative;
  z-index: 1;
}

.propozycja-d.home-v2 .hero-copy {
  z-index: 3;
}

.propozycja-d.home-v2 .hero-photo {
  z-index: 1;
}

.propozycja-d.home-v2 .hero-copy > :not(.placed-motif) {
  position: relative;
  z-index: 1;
}

.propozycja-d.home-v2 .cta-band > :not(.placed-motif) {
  position: relative;
  z-index: 1;
}

@media (min-width: 981px) {
  .propozycja-d.home-v2 .placed-motif {
    display: block;
  }

  /* lewy gutter: przy tytule, ale nie wyjeżdża poza płytę na węższym desktopie */
  .propozycja-d.home-v2 .placed-motif--gutter {
    left: max(calc(8px - var(--gutter)), var(--motif-x));
    top: var(--motif-y);
    width: var(--motif-w);
    z-index: 2;
  }

  .propozycja-d.home-v2 .placed-motif--hero-banana {
    --motif-x: -114px;
    --motif-y: 26px;
    --motif-w: 8vw;
  }

  .propozycja-d.home-v2 .placed-motif--hero-olive {
    left: 56.4%;
    top: 37.5%;
    width: 76.1%;
  }

  .propozycja-d.home-v2 .placed-motif--hero-olive img {
    transform: rotate(5deg);
  }

  .propozycja-d.home-v2 .placed-motif--wyzwania-brick {
    --motif-x: -139px;
    --motif-y: -8px;
    --motif-w: 10.4vw;
  }

  .propozycja-d.home-v2 .placed-motif--wyzwania-brick img {
    transform: rotate(-23deg);
  }

  .propozycja-d.home-v2 .placed-motif--dla-kogo-frond {
    --motif-x: -119px;
    --motif-y: 18px;
    --motif-w: 8.3vw;
  }

  .propozycja-d.home-v2 .placed-motif--dla-kogo-frond img {
    transform: rotate(-28deg);
  }

  .propozycja-d.home-v2 .placed-motif--o-mnie-ananas {
    left: -52.3%;
    top: 39.8%;
    width: 111.9%;
  }

  .propozycja-d.home-v2 .placed-motif--o-mnie-ananas img {
    transform: rotate(-15deg);
  }

  .propozycja-d.home-v2 .placed-motif--mechanism-banana {
    --motif-x: -122px;
    --motif-y: -49px;
    --motif-w: 8vw;
  }

  .propozycja-d.home-v2 .placed-motif--mechanism-banana img {
    transform: rotate(-15deg);
  }

  .propozycja-d.home-v2 .placed-motif--oferta-frond {
    --motif-x: -117px;
    --motif-y: 22px;
    --motif-w: 8vw;
  }

  .propozycja-d.home-v2 .placed-motif--oferta-frond img {
    transform: rotate(316deg);
  }

  .propozycja-d.home-v2 .placed-motif--opinie-brick {
    --motif-x: -114px;
    --motif-y: 14px;
    --motif-w: 8.4vw;
  }

  .propozycja-d.home-v2 .placed-motif--opinie-brick img {
    transform: rotate(-25deg);
  }

  .propozycja-d.home-v2 .placed-motif--pytania-banana {
    --motif-x: -116px;
    --motif-y: -4px;
    --motif-w: 8vw;
  }

  .propozycja-d.home-v2 .placed-motif--cta-ananas {
    --motif-x: -111px;
    --motif-y: -44px;
    --motif-w: 8vw;
  }

  .propozycja-d.home-v2 .placed-motif--cta-ananas img {
    transform: rotate(1deg);
  }

  .propozycja-d.home-v2 .placed-motif--cta-frond {
    left: 55.8%;
    top: 53.5%;
    width: 65.1%;
  }
}

/* --- MOTYWY — mobile ≤980. Te same kotwice, mniejsza skala.
   Lewy gutter z desktopu (duże ujemne left) wyjeżdża poza ekran.
   Tu liść siada przy brwi albo w rogu kadru. Przy zdjęciu zostaje
   motyw kadru; banan w hero i ananas w CTA chowamy, bo na telefonie
   dwa motywy w jednym klastrze wchodzą sobie w drogę. */

@media (max-width: 980px) {
  .propozycja-d.home-v2 .placed-motif {
    display: block;
  }

  /* hero-copy jest display:contents, więc banan nie ma hosta.
     Sekcja ze zdjęciem trzyma motyw przy kadrze. */
  .propozycja-d.home-v2 .placed-motif--hero-banana,
  .propozycja-d.home-v2 .placed-motif--cta-ananas {
    display: none;
  }

  /* stacked, nie sticky: containing block dla ananasa. Nie ruszać
     sticky na desktopie. */
  .propozycja-d.home-v2 .about-photo {
    position: relative;
  }

  .propozycja-d.home-v2 .section-intro > :not(.placed-motif) {
    position: relative;
    z-index: 1;
  }

  /* przy brwi, w paddingu sekcji, peek w gutterze bez overflow */
  .propozycja-d.home-v2 .placed-motif--gutter {
    left: max(-8px, calc(8px - var(--gutter)));
    top: -40px;
    width: clamp(42px, 12vw, 56px);
    z-index: 0;
  }

  .propozycja-d.home-v2 .placed-motif--wyzwania-brick {
    top: -36px;
  }

  .propozycja-d.home-v2 .placed-motif--wyzwania-brick img {
    transform: rotate(-23deg);
  }

  .propozycja-d.home-v2 .placed-motif--dla-kogo-frond {
    top: -32px;
  }

  .propozycja-d.home-v2 .placed-motif--dla-kogo-frond img {
    transform: rotate(-28deg);
  }

  .propozycja-d.home-v2 .placed-motif--mechanism-banana {
    top: -48px;
  }

  .propozycja-d.home-v2 .placed-motif--mechanism-banana img {
    transform: rotate(-15deg);
  }

  .propozycja-d.home-v2 .placed-motif--oferta-frond {
    top: -30px;
  }

  .propozycja-d.home-v2 .placed-motif--oferta-frond img {
    transform: rotate(316deg);
  }

  .propozycja-d.home-v2 .placed-motif--opinie-brick {
    top: -34px;
  }

  .propozycja-d.home-v2 .placed-motif--opinie-brick img {
    transform: rotate(-25deg);
  }

  .propozycja-d.home-v2 .placed-motif--pytania-banana {
    top: -38px;
  }

  /* kadry: róg, nie twarz. Cap w px, bo % pełnej szerokości na 680
     robi z motywu plakat. Peek max parę pikseli w gutter. */
  .propozycja-d.home-v2 .placed-motif--hero-olive {
    left: auto;
    right: -4px;
    top: auto;
    /* nad szwem Wyzwań, w ogrodzie obok ramienia, nie na twarzy */
    bottom: 14%;
    width: clamp(84px, 26vw, 112px);
  }

  .propozycja-d.home-v2 .placed-motif--hero-olive img {
    transform: rotate(5deg);
  }

  .propozycja-d.home-v2 .placed-motif--o-mnie-ananas {
    left: max(-8px, calc(8px - var(--gutter)));
    top: auto;
    /* rotacja -15 wystaje pod kadr, na brwi „Punkt zwrotny” */
    bottom: 16%;
    width: clamp(88px, 26vw, 116px);
  }

  .propozycja-d.home-v2 .placed-motif--o-mnie-ananas img {
    transform: rotate(-15deg);
  }

  .propozycja-d.home-v2 .placed-motif--cta-frond {
    left: auto;
    right: -4px;
    top: auto;
    bottom: 12%;
    width: clamp(88px, 27vw, 116px);
  }
}