/* =========================================================================
   HUMAN DESIGN: strojenie podstrony /human-design.
   Wspólne klocki: podstrona-plyty.css i oferta-plyty.css (hero z rysunkiem,
   nagłówki, kroki, FAQ, żółte zaproszenie). Bodygraf: klasy renderera
   kalkulatora (hd-bodygraph.js), kolory z tokenów płyty, na nocy jak ciemny
   motyw kalkulatora, na beżu jak jasny.
   ========================================================================= */

/* --- BODYGRAF — tokeny i klasy jak w kalkulatorze ----------------------- */

.page-hd .plate-noc {
  --hd-design: #ff6f61;
  --hd-personality: var(--krem);
  --hd-c-yellow: #ffd24d;
  --hd-c-green: #b7c66f;
  --hd-c-blue: #9fb7c4;
  --hd-c-orange: #e9915c;
  --hd-silhouette: #33431f;
  --hd-tube: #1c2610;
  --hd-center: var(--noc);
  --hd-center-stroke: #a89e84;
}

.page-hd .plate-bez {
  --hd-design: #c0161c;
  --hd-personality: var(--coffee);
  --hd-c-yellow: #ffd24d;
  --hd-c-green: #b7c66f;
  --hd-c-blue: #9fb7c4;
  --hd-c-orange: #e9915c;
  --hd-silhouette: #e0d3c1;
  --hd-tube: #f6efe4;
  --hd-center: #f6efe4;
  --hd-center-stroke: #7d6e5b;
}

.page-hd .hd-bodygraph { display: block; width: 100%; height: auto; }
.page-hd .hd-silhouette { fill: var(--hd-silhouette); }
.page-hd .hd-tubes path { fill: none; stroke: var(--hd-tube); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.page-hd .hd-active path { fill: none; stroke-width: 5; stroke-linejoin: round; }
.page-hd .hd-active .is-design { stroke: var(--hd-design); }
.page-hd .hd-active .is-personality { stroke: var(--hd-personality); }
.page-hd .hd-active .is-split { stroke-width: 2.5; }
.page-hd .hd-center { fill: var(--hd-center); stroke: var(--hd-center-stroke); stroke-width: 1.5; }
.page-hd .hd-center.is-defined { stroke: none; }
.page-hd .hd-center--head.is-defined,
.page-hd .hd-center--g.is-defined { fill: var(--hd-c-yellow); }
.page-hd .hd-center--ajna.is-defined,
.page-hd .hd-center--spleen.is-defined { fill: var(--hd-c-green); }
.page-hd .hd-center--throat.is-defined { fill: var(--hd-c-blue); }
.page-hd .hd-center--heart.is-defined,
.page-hd .hd-center--solarplexus.is-defined,
.page-hd .hd-center--sacral.is-defined,
.page-hd .hd-center--root.is-defined { fill: var(--hd-c-orange); }

/* --- 1 HERO — tekst po lewej, sylwetka bodygrafu po prawej -------------- */

.page-hd .hero::before {
  content: none;
}

.propozycja-d.page-hd .hd-hero h1 {
  max-width: 13ch;
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  line-height: 1.02;
}

.propozycja-d.page-hd .hd-hero-lead {
  display: grid;
  gap: 14px;
  max-width: 36rem;
}

.propozycja-d.page-hd .hd-hero-lead .hero-lead {
  margin: 0;
}

/* pierwsze zdanie leadu to teza, reszta ją rozwija */
.propozycja-d.page-hd .hd-hero-lead .hero-lead:first-child {
  color: var(--pl-ink);
  font-size: clamp(1.14rem, 1.5vw, 1.3rem);
  font-weight: 500;
}

.propozycja-d.page-hd .hd-hero .hero-actions {
  margin-top: 34px;
}

/* bodygraf ma proporcje 440 × 840: wąski i wysoki, więc trzymamy szerokość */
.propozycja-d.page-hd .hd-visual {
  max-width: clamp(220px, 21vw, 300px);
}

/* --- 2 CZYM JEST — cegła, nagłówek po lewej, tekst po prawej ------------ */

.propozycja-d.page-hd .hd-what .offer-head {
  margin-bottom: 0;
}

.propozycja-d.page-hd .hd-what .offer-lead {
  color: var(--pl-ink);
}

.propozycja-d.page-hd .hd-note {
  max-width: 24em;
  margin-top: 28px;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 500;
  line-height: 1.35;
}

/* --- 3 CO ZOBACZYSZ — cztery obszary 2 × 2 na hairline ------------------ */

.propozycja-d.page-hd .hd-see-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 72px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.propozycja-d.page-hd .hd-see-grid li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 30px 0;
  border-top: 1px solid var(--pl-rule);
}

.propozycja-d.page-hd .hd-see-grid .mini-mark {
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.propozycja-d.page-hd .hd-see-grid h3 {
  margin: 6px 0 10px;
  color: var(--pl-ink);
  font-size: clamp(1.14rem, 1.5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.25;
}

.propozycja-d.page-hd .hd-see-grid p {
  margin: 0;
  color: var(--pl-ink-2);
}

/* --- 4 ODCZYT — kroki jak na DISC, pod nimi fakty ----------------------- */

.propozycja-d.page-hd .hd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: clamp(44px, 5vw, 64px) 0 0;
  padding: 24px 0 0;
  list-style: none;
  border-top: 1px solid var(--pl-rule);
  color: var(--pl-ink);
  font-size: 1.06rem;
  font-weight: 600;
}

.propozycja-d.page-hd .hd-facts li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.propozycja-d.page-hd .hd-facts svg {
  width: 22px;
  height: 22px;
  color: var(--pl-accent);
}

/* --- 5 MOJA HISTORIA — kadr i długi tekst jak „O mnie” na home ---------- */

/* Kadr i tekst wyśrodkowane względem siebie. Home trzyma kadr sticky przy
   długim „O mnie”; tu tekst jest niewiele wyższy od kadru, więc sticky tylko
   spychał zdjęcie w dół płyty (zależnie od przewinięcia) i rozjeżdżał parę. */
.propozycja-d.page-hd .hd-story {
  align-items: center;
}

.propozycja-d.page-hd .hd-story .about-photo {
  position: relative;
  top: auto;
  align-self: center;
}

.propozycja-d.page-hd .hd-story .about-copy {
  align-self: center;
}

.propozycja-d.page-hd .hd-story .about-copy > p:last-child {
  margin-bottom: 0;
}

.propozycja-d.page-hd .hd-story .about-copy h2 {
  margin-bottom: 26px;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.1;
}

.propozycja-d.page-hd .hd-story .about-copy strong {
  color: var(--pl-ink);
  font-weight: 700;
}

.propozycja-d.page-hd .hd-story-close {
  margin-top: 6px;
  color: var(--pl-accent) !important;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.propozycja-d.page-hd .hd-story .photo-frame {
  z-index: 1;
}

/* --- 6 DLA KOGO — cztery zdania jedną listą, jeden stopień -------------
   Wcześniej dwa pogrubione „Nie musisz…” i dwa blade akapity: nierówne.
   Teraz każda linia to ten sam krem (kontrast ~15:1 na nocy), ten sam
   znaczek jak w liście „Kalkulator” i hairline między wierszami. */

.propozycja-d.page-hd .hd-whom .offer-head {
  margin-bottom: 0;
}

.propozycja-d.page-hd .hd-whom-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.propozycja-d.page-hd .hd-whom-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  color: var(--pl-ink);
  font-size: clamp(1.1rem, 1.35vw, 1.24rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

.propozycja-d.page-hd .hd-whom-list li:first-child {
  padding-top: 4px;
}

.propozycja-d.page-hd .hd-whom-list li:last-child {
  padding-bottom: 0;
}

.propozycja-d.page-hd .hd-whom-list li + li {
  border-top: 1px solid var(--pl-rule);
}

/* znaczek na wysokości pierwszej linii tekstu */
.propozycja-d.page-hd .hd-whom-list .hd-check {
  margin-top: calc((1.45em - 34px) / 2);
}

/* „Czym jest” i „Dla kogo”: nagłówek ma ~13 znaków szerokości, więc kolumna
   tekstu staje tuż za nim, a nie przy prawej krawędzi płyty. */
.propozycja-d.page-hd :is(.hd-what, .hd-whom) .offer-uses-layout {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 5vw, 80px);
}

.propozycja-d.page-hd :is(.hd-what-body, .hd-whom-list) {
  max-width: 38rem;
}

/* --- 7 TWÓJ WYKRES — lista trzech danych, obok przykładowy bodygraf ----- */

/* Zwarta para pośrodku płyty: tekst i bodygraf obok siebie, zamiast tekstu
   przy lewej i wykresu przy prawej krawędzi kontenera 1180 px. */
.propozycja-d.page-hd .hd-chart-layout {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(220px, 280px);
  justify-content: center;
  gap: 48px clamp(56px, 8vw, 128px);
  align-items: center;
  max-width: 1040px;
  margin-inline: auto;
}

.propozycja-d.page-hd .hd-chart-copy h2 {
  margin: 0 0 22px;
  max-width: 16ch;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.1;
}

.propozycja-d.page-hd .hd-checklist {
  display: grid;
  gap: 12px;
  margin: 6px 0 24px;
  padding: 0;
  list-style: none;
}

.propozycja-d.page-hd .hd-checklist li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--pl-ink);
  font-size: 1.14rem;
  font-weight: 600;
}

.propozycja-d.page-hd .hd-check {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--pl-btn-bg);
  color: var(--pl-btn-ink);
}

.propozycja-d.page-hd .hd-check svg {
  width: 18px;
  height: 18px;
}

.propozycja-d.page-hd .hd-chart-copy .button {
  margin-top: 14px;
}

.propozycja-d.page-hd .hd-chart-visual {
  justify-self: center;
  width: 100%;
  max-width: 280px;
  margin: 0;
}

.propozycja-d.page-hd .hd-chart-visual figcaption {
  margin-top: 16px;
  color: var(--pl-ink-2);
  font-size: 0.84rem;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

/* --- 8 FAQ — lista z home na nocy --------------------------------------- */

.propozycja-d.page-hd .hd-faq .section-intro h2 {
  font-size: clamp(2.2rem, 4vw, 3.3rem);
}

/* --- 9 ZAPROSZENIE — dwa działania i zdanie Adama ----------------------- */

.propozycja-d.page-hd .hd-close h2 {
  max-width: 18ch;
}

.propozycja-d.page-hd .hd-close-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

.propozycja-d.page-hd .hd-close-actions .button {
  margin: 0;
}

.propozycja-d.page-hd .hd-close-quote {
  max-width: 34rem;
  margin: clamp(40px, 5vw, 56px) auto 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--pl-rule);
}

.propozycja-d.page-hd .hd-close-quote p {
  margin: 0;
  color: var(--pl-ink);
  font-size: clamp(1.14rem, 1.6vw, 1.3rem);
  font-style: italic;
  line-height: 1.5;
}

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

@media (max-width: 980px) {
  .propozycja-d.page-hd .hd-visual {
    width: min(58vw, 240px);
    max-width: none;
  }

  .propozycja-d.page-hd .hd-see-grid {
    grid-template-columns: 1fr;
  }

  .propozycja-d.page-hd .hd-see-grid li:last-child {
    border-bottom: 1px solid var(--pl-rule);
  }

  .propozycja-d.page-hd .hd-what .offer-head,
  .propozycja-d.page-hd .hd-whom .offer-head {
    margin-bottom: 8px;
  }

  .propozycja-d.page-hd .hd-chart-layout,
  .propozycja-d.page-hd :is(.hd-what, .hd-whom) .offer-uses-layout {
    grid-template-columns: 1fr;
  }

  .propozycja-d.page-hd .hd-chart-layout {
    justify-content: stretch;
  }

  .propozycja-d.page-hd .hd-chart-visual {
    max-width: 220px;
  }

  .propozycja-d.page-hd .hd-story .about-photo {
    width: min(100%, 420px);
  }
}

@media (max-width: 680px) {
  .propozycja-d.page-hd .hd-see-grid li {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
  }

  .propozycja-d.page-hd .hd-see-grid .mini-mark {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .propozycja-d.page-hd .hd-close-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
}