/* =========================================================================
   PODSTRONY NA PŁYTACH — kontakt, PCT-A, DISC.

   Warstwa ładowana PO arkuszach strony głównej (propozycja-chrome, home,
   propozycja-d, home-v2, home-v2-b, site-footer, site-header-mobile),
   więc płyty, typografia, przyciski, wiersze oferty, FAQ i CTA są te same
   co na /home-motywy-v2-b-3. Tu tylko to, czego home nie ma: krótsze hero,
   łuk drugiej płyty, FAQ na beżu, motyw jako statyczny <img>.
   Klocki ofert PCT-A i DISC (kafel ceny, kroki, plaster, koło): oferta-plyty.css.

   Rytm jak na home: noc (hero) → cegła albo beż → noc i beż naprzemiennie
   → żółta płyta zaproszenia → stopka lux (wariant under).
   ========================================================================= */

/* Przyciski jak na home: pierścień na głównym, bez podnoszenia (home-ring.css).
   @import musi stać przed pierwszą regułą arkusza. */
/* home-ring.css ładowany <link>em tuż przed tym arkuszem (zamiast @import, ten sam porządek kaskady) */

/* --- HERO — płyta nocna pod stałym paskiem, bez pełnego ekranu ---------- */

.propozycja-d.sub-page .hero {
  min-height: 0;
  padding-top: clamp(56px, 6.4vw, 104px);
  /* dół zakrywa następna płyta (--seam), widoczny oddech = góra */
  padding-bottom: calc(clamp(64px, 7vw, 112px) + var(--seam));
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.56fr);
  column-gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

.propozycja-d.sub-page .hero h1 {
  margin-bottom: 26px;
  font-size: clamp(2.4rem, 4.4vw, 3.7rem);
  line-height: 1.06;
}

.propozycja-d.sub-page .hero-lead {
  max-width: 36rem;
}

/* podpis pod kadrem hero jak na home, bez offsetu plamy */
.propozycja-d.sub-page .hero-photo > figcaption {
  margin-top: 18px;
}

/* --- STYKI — łuk na drugiej płycie (jak Wyzwania) i na zaproszeniu ------- */

.propozycja-d.sub-page main > .plate + .sub-arc {
  border-top-left-radius: 50% var(--seam);
  border-top-right-radius: 50% var(--seam);
}

/* --- MOTYWY — statyczne SVG z koszuli, 1–2 na stronę ------------------- */

.propozycja-d.sub-page .sub-motif {
  position: absolute;
  z-index: 3;
  display: block;
  margin: 0;
  line-height: 0;
  pointer-events: none;
  user-select: none;
}

.propozycja-d.sub-page .sub-motif img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(var(--motif-r, 0deg)) scaleX(var(--motif-fx, 1));
  transform-origin: 50% 50%;
}

.propozycja-d.sub-page .hero-photo,
.propozycja-d.sub-page .cta-photo,
.propozycja-d.sub-page .cta-band {
  position: relative;
}

.propozycja-d.sub-page .hero-photo .photo-frame,
.propozycja-d.sub-page .cta-photo .photo-frame {
  z-index: 1;
}

/* oliwkowy kwiat przy prawym dolnym rogu kadru hero (jak hero-olive-b) */
.propozycja-d.sub-page .sub-motif--hero {
  right: -17%;
  bottom: 7%;
  width: 38%;
  --motif-r: -75deg;
}

/* liść bananowca wchodzi na kadr w zaproszeniu (jak cta-banana-b) */
.propozycja-d.sub-page .sub-motif--cta {
  left: -13%;
  bottom: -4%;
  width: 30%;
  --motif-r: -32deg;
}

/* --- FAQ — ta sama lista co na home, wyśrodkowana, bez pełnego ekranu --- */

.propozycja-d.sub-page .sub-faq .faq-frame {
  width: min(42rem, 100%);
  margin-inline: auto;
}

.propozycja-d.sub-page .sub-faq .section-intro {
  max-width: none;
  margin-bottom: clamp(32px, 3.6vw, 52px);
  text-align: center;
}

.propozycja-d.sub-page .sub-faq .section-lead {
  max-width: 30rem;
  margin-inline: auto;
}

.propozycja-d.sub-page .sub-faq .faq-list {
  max-width: none;
}

/* home-v2-b maluje FAQ pod noc; na beżu hairline i akcent z tokenów płyty */
.propozycja-d.sub-page .plate-bez .faq-item,
.propozycja-d.sub-page .plate-bez .faq-item:last-child {
  border-color: var(--pl-rule);
}

.propozycja-d.sub-page .plate-bez .faq-item summary::after,
.propozycja-d.sub-page .plate-bez .faq-item[open] summary {
  color: var(--pl-accent);
}

/* --- ZAPROSZENIE — żółta płyta jak na home ------------------------------ */

@media (min-width: 981px) {
  .propozycja-d.sub-page .cta-band h2 {
    font-size: clamp(2.3rem, 3.9vw, 3.3rem);
  }
}

/* =========================================================================
   RESPONSYWNOŚĆ
   ========================================================================= */

@media (max-width: 980px) {
  .propozycja-d.sub-page .hero {
    --sub-hero-pad: clamp(28px, 6vw, 48px);
    grid-template-columns: 1fr;
    padding-top: var(--sub-hero-pad);
    padding-bottom: calc(var(--sub-hero-pad) + 12px + var(--seam));
  }

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

  .propozycja-d.sub-page .hero-photo {
    order: 5;
    width: min(100%, 460px);
    margin-top: clamp(36px, 8vw, 52px);
  }

  .propozycja-d.sub-page .sub-motif--hero {
    right: -9%;
    width: 32%;
  }

  .propozycja-d.sub-page .sub-motif--cta {
    left: auto;
    right: -10%;
    bottom: 8%;
    width: 30%;
    --motif-r: -32deg;
  }

  /* kadr zaproszenia nad tekstem, ale nie na cały ekran telefonu */
  .propozycja-d.sub-page .cta-photo {
    width: min(100%, 420px);
  }
}

@media (max-width: 680px) {
  .propozycja-d.sub-page .sub-motif--hero {
    right: -7%;
    bottom: 10%;
    width: 34%;
  }
}