/* home_hero — sections/home_hero.php
   Hero strony głównej: ciemna płyta w gradiencie marki, treść wyśrodkowana,
   grafika prowadzących przyklejona do dolnej krawędzi płyty.
   Mobile-first. Projekt z handoffu ma jeden próg (1024px); tu są dwa — 768px
   dowozi desktopowe proporcje na tablet, gdzie sam projekt się rozpada
   (patrz komentarz przy tym media query). */

.hh {
  /* Odstęp od nagłówka — Header jest sticky i ma własne tło, więc styk 0px
     czytałby się jak jeden ciągły blok z płytą. Tło strony (białe) przenika
     bez zmian, płyta nie ma już własnego pasa koloru nad sobą. */
  padding-top: var(--ds-space-3);
}

.hh-slab {
  position: relative;
  isolation: isolate;
  overflow: hidden;                       /* przycina grafikę wychodzącą poza padding */
  margin-inline: var(--ds-space-3);
  border-radius: var(--ds-radius-xxl);
  padding: var(--ds-space-6) var(--ds-space-5) var(--ds-space-8);
  text-align: center;
  color: var(--ds-color-on-primary);
}

/* Gradient płyty — ODWRÓCONY `{gradients.brand-deep}`: jaśniejszy błękit u góry,
   granat na dole (wymóg projektu: grafika prowadzących ma się „osadzić" na
   ciemniejszym dole, a nie rozpłynąć na jasnym). CSS nie umie odwrócić stopni
   w zmiennej, więc zamiast przepisywać hexy z ręki malujemy token na warstwie
   obróconej o 180° — dzięki temu jest tu ZERO własnych kolorów i zmiana tokenu
   w design-system.css nadal dociera tutaj.
   Konsekwencja kontrastowa: najjaśniejszy punkt (#4C6BFF) leży teraz pod
   nagłówkiem, nie pod grafiką. Dlatego CAŁY tekst tej płyty jest biały —
   patrz komentarze przy .hh-lead i .hh-accent. */
.hh-slab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  transform: rotate(180deg);
  background-image: var(--ds-gradient-brand-deep);
}

/* Ziarno. Duża płaszczyzna gradientu pasmuje się na 8-bitowych panelach
   telefonów — szum rozbija pasy taniej niż dithering w obrazie.
   Statyczny data-URI: zero zapytań sieciowych, zero JS. */
.hh-slab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Pigułka oceny Google ────────────────────────────────────────────────
   Biel przy .96 krycia (za projektem) — płyta ledwie prześwieca, więc pigułka
   siada na gradiencie zamiast się od niego odkleić. Kontrast trzyma z zapasem:
   etykieta 13px w `{colors.ink-secondary}` daje na tym tle Lc 92 przy progu 90,
   liczba w `{colors.ink}` — Lc 101 przy progu 83 (14px w wadze 600). */
.hh-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin: 0;
  padding: 6px var(--ds-space-3) 6px 9px;
  border-radius: var(--ds-radius-full);
  background-color: rgba(255, 255, 255, 0.96);
}
.hh-rating-logo { width: 15px; height: 15px; flex: none; }
.hh-rating-score {
  font-family: var(--ds-font-display);
  font-weight: var(--ds-weight-semi);
  font-size: var(--ds-text-body-sm);
  letter-spacing: -0.02em;
  color: var(--ds-color-ink);
}
.hh-rating-label {
  font-size: var(--ds-text-caption);
  line-height: 1.2;
  color: var(--ds-color-ink-secondary);
}

/* Pasek pięciu gwiazdek jako JEDNO tło powtarzane w poziomie, zamiast pięciu
   elementów w DOM (atom .stars z design-system.css to wariant „pięć SVG" —
   tutaj pasek jest czystą ozdobą przy liczbie, więc tańsza wersja wygrywa).
   Hex w data-URI jest nieunikniony: url() nie czyta custom properties.
   Kolor = `{colors.cta-solar}` #FFC42E — przy zmianie tokenu podmień też tu. */
.hh-stars {
  display: block;
  flex: none;
  width: 72px;
  height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16'%3E%3Cpath fill='%23FFC42E' d='M8 1.2l2 4.1 4.5.65-3.25 3.17.77 4.48L8 11.5l-4.02 2.1.77-4.48L1.5 5.95 6 5.3z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 14.4px 13px;
}

/* ── Nagłówek ────────────────────────────────────────────────────────────
   24px zamiast systemowego `display-hero` (29px): H1 jest tu pełnym zdaniem-
   obietnicą i przy 29px zajmuje na 360px cztery linijki, spychając kafel
   gwarancji i linię zaufania poza pierwszy kadr. Świadome zejście ze stopnia
   pod budżet pierwszego ekranu — dokładnie ten sam zabieg co w .chero-title
   (course_hero.css). Na desktopie stopień wraca do systemowych 46px. */
.hh-title {
  margin: var(--ds-space-4) 0 0;
  font-family: var(--ds-font-display);
  font-weight: var(--ds-weight-semi);
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ds-color-on-primary);
  text-wrap: balance;
}

/* Wyróżnienie „+90%" — jedyne w tym nagłówku. Kolor to `{colors.on-deep-accent}`
   #FFF2D2, a nie pełny `{colors.cta-solar}`: żółty jako TEKST na tej płycie daje
   Lc 44 przy progu 60 dla 24px (DESIGN-SYSTEM.md → „Kontrast → Ciemne płyty":
   „pełny cta-solar jako tekst na płycie wypada całkowicie"). #FFF2D2 daje Lc 67
   w najjaśniejszym punkcie gradientu i jest wariantem przewidzianym przez system
   dokładnie na ten przypadek — słoneczny akcent w nagłówku od 21px.
   Pełny żółty zostaje tam, gdzie nie jest literą: ikona tarczy i CTA. */
.hh-accent {
  font-style: normal;
  color: var(--ds-color-on-deep-accent);
}

/* Lead w bieli, nie w przygaszonym błękicie z projektu. Na tym gradiencie
   `{colors.on-primary-mute}` daje przy 16px Lc 64 przy progu 75, a projektowy
   #B9CDFF spada do Lc 44–51 — to nie jest odstępstwo do „opłacenia", tylko
   nieczytelny tekst na ścieżce zakupu. DESIGN-SYSTEM.md → „Ciemne płyty":
   biel jest domyślnym i w praktyce jedynym kolorem tekstu na tej płycie.
   W bieli lead trzyma Lc 82 przy progu 75. */
.hh-lead {
  margin: var(--ds-space-3) 0 0;
  color: var(--ds-color-on-primary);
}

.hh-actions {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-5);
}

/* Jedyne mocne CTA w kadrze (CLAUDE.md, reguła 2). Wygląd w całości z atomu
   .btn-solar.btn-lg — tutaj tylko szerokość i wyższa podłoga dotyku niż
   systemowe 52px, bo etykieta jest długa i na 360px łamie się na dwie linijki. */
.hh-cta {
  width: 100%;
  min-height: 58px;
}

/* Kafel gwarancji — zdejmuje ryzyko zaraz pod przyciskiem. Półprzezroczysty
   welon + pierścień 1px zamiast pełnego wypełnienia: ma czytać się jak nakładka
   na płycie, nie jak druga, konkurencyjna karta.
   Welon jest CIEMNY (atrament przy 18%), nie biały jak w projekcie. Biały
   rozjaśniał tło do #3671E3 i biel spadała tam do Lc 77 przy progu 85 dla 14px,
   a „Wynik +80% albo zwrot pieniędzy" to twierdzenie handlowe na ścieżce
   zakupu — tam odstępstwo od progu jest zabronione (CLAUDE.md, reguła 11,
   warunek 2). Ciemny welon daje Lc 86 i nie rusza ani kształtu, ani pozycji,
   ani pierścienia kafla: zamiast unieść się mlecznie, wgłębia się, a krawędź
   nadal łapie światło. To ten sam język, co `--ds-inset-hi` w design systemie. */
.hh-guarantee {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin: 0;
  padding: 11px var(--ds-space-4);
  border-radius: var(--ds-radius-md);
  background-color: rgba(19, 26, 43, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  text-align: left;
}
.hh-guarantee svg {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: var(--ds-color-cta-solar);   /* ikona, nie litera — żywy żółty tu wolno */
}
/* Jedna linijka: „Wynik +80%" (600) + „albo zwrot pieniędzy" (400) w jednym
   ciągu, rozdzielone spacją ze źródła HTML — stąd inline, nie block. Skrócona
   z „Gwarancja wyniku +80%" tak, żeby cały tekst zmieścił się w jednej
   linijce nawet na 360px, przy systemowych 14px (`--ds-text-body-sm`) —
   sprawdzone w przeglądarce: 229px tekstu w 296px dostępnej szerokości kafla. */
.hh-guarantee-text {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-body-sm);
  line-height: 1.3;
  white-space: nowrap;
}
.hh-guarantee b {
  font-weight: var(--ds-weight-semi);
}
/* Druga część też w bieli — hierarchię niesie waga (400 wobec 600), nie kolor.
   Na płycie z odwróconym gradientem kolor po prostu nie jest tu dostępnym
   narzędziem (DESIGN-SYSTEM.md → „Ciemne płyty"). */
.hh-guarantee-text > span {
  font-weight: var(--ds-weight-regular);
}

/* Linia zaufania — `body-sm` (14px), nie `caption` (13px) mimo roli metadanej.
   Ta linijka mówi o warunkach płatności, więc stoi na ścieżce zakupu i nie wolno
   jej rozliczać z odstępstwem (CLAUDE.md, reguła 11, warunek 2). Biel wypada tu
   na Lc 89: przy 13px próg wynosi 90 (niedobór), przy 14px 85 — para przechodzi
   z zapasem 4 punktów. Projekt zakładał 12,5px, czyli poniżej podłogi treści. */
.hh-trust {
  margin: var(--ds-space-3) 0 0;
  font-size: var(--ds-text-body-sm);
  color: var(--ds-color-on-primary);
}

/* Grafika prowadzących — element LCP. Wychodzi poza padding płyty i siada na
   jej dolnej krawędzi; przycina ją overflow + promień płyty. Ujemne marginesy
   MUSZĄ odpowiadać paddingowi .hh-slab, inaczej pod grafiką zostaje pasek tła. */
.hh-photo { display: contents; }
.hh-photo img {
  display: block;
  width: calc(100% + 2 * var(--ds-space-5));
  height: auto;                          /* atrybut height="643" jest tylko rezerwacją proporcji (CLS) */
  max-width: none;
  margin: var(--ds-space-2) calc(-1 * var(--ds-space-5)) calc(-1 * var(--ds-space-8));
}

/* ── Tablet (768–1023px) ─────────────────────────────────────────────────
   Projekt z handoffu ma tylko jeden próg (1024px) i w tym zakresie się rozpada:
   nagłówek 24px ginie na płycie szerokiej na ~950px, CTA rozciągnięte na całą
   jej szerokość czyta się jak pasek, a lead ma ponad 110 znaków w linii.
   Ten próg nie zmienia projektu — tylko dowozi jego desktopowe proporcje niżej,
   zanim wejdzie układ dwukolumnowy. 768px to `md` Bootstrapa (CLAUDE.md → Klasy
   CSS: breakpointy bierzemy z Bootstrapa). */
@media (min-width: 768px) {
  .hh-slab { padding: var(--ds-space-8) var(--ds-space-8) var(--ds-space-10); }

  /* 34px zamiast 24px: płyta jest tu ponad dwa razy szersza niż na 360px,
     a stopień z telefonu zostawia nagłówek bez roli prowadzącej wzrok.
     Wartość spoza skali, bo systemowe stopnie przełączają się dopiero na
     1024px — ten sam zabieg co w .chero-title (course_hero.css). */
  .hh-title { font-size: 34px; max-width: 620px; margin-inline: auto; }
  .hh-lead { max-width: 58ch; margin-inline: auto; }

  /* CTA wraca do szerokości własnej etykiety, gwarancja staje obok. Przy
     wąskim kadrze `wrap` sam zrzuca kafel pod przycisk — bez drugiego progu. */
  .hh-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
  .hh-cta { width: auto; min-height: 54px; }

  /* Od 768px linia zaufania rośnie o kolejny stopień, do 15px. Płyta jest tu
     niska i szeroka, więc ta linijka wypada dopiero w połowie gradientu, gdzie
     biel spada do Lc 82 — przy 14px próg wynosi 85 (niedobór), przy 15px 80
     i para wraca z zapasem. Wartość spoza skali, bo `body` przełącza się na
     1024px na 16px, a 16px konkurowałoby z leadem (17px) o tę samą rolę. */
  .hh-trust { font-size: 15px; }

  .hh-photo img {
    width: calc(100% + 2 * var(--ds-space-8));
    margin: var(--ds-space-3) calc(-1 * var(--ds-space-8)) calc(-1 * var(--ds-space-10));
  }
}

/* ── Desktop ─────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .hh { padding-top: var(--ds-space-8); }

  .hh-slab {
    max-width: 1320px;
    margin-inline: auto;
    /* Górny padding zmniejszony na życzenie (był --ds-space-10/40px) — reszta
       (boki, dół) zostaje, bo dół wyznacza też zasięg ujemnych marginesów
       grafiki prowadzących (patrz .hh-photo img niżej). */
    padding: var(--ds-space-8) var(--ds-space-12) var(--ds-space-12);
  }

  .hh-rating { gap: 10px; padding: var(--ds-space-2) var(--ds-space-4) var(--ds-space-2) var(--ds-space-3); }
  .hh-rating-logo { width: 18px; height: 18px; }
  .hh-rating-score { font-size: var(--ds-text-body-lg); }
  .hh-rating-label { font-size: var(--ds-text-caption); }
  .hh-stars { width: 90px; height: 16px; background-size: 18px 16px; }

  .hh-title {
    margin: var(--ds-space-5) auto 0;
    /* Systemowy stopień hero (`--ds-text-display-hero` = 46px od 1024px).
       Zapisany zmienną, nie liczbą — na desktopie nie ma powodu do odstępstwa. */
    font-size: var(--ds-text-display-hero);
    max-width: 780px;
  }
  .hh-lead { margin: 14px auto 0; max-width: 58ch; }

  /* Rząd CTA + gwarancja wchodzi już na progu 768px — tu zostaje sam odstęp. */
  .hh-actions { margin-top: var(--ds-space-6); }
  .hh-guarantee { gap: 9px; padding: 11px var(--ds-space-4); }

  .hh-trust { margin-top: var(--ds-space-4); }

  .hh-photo img {
    width: calc(100% + 2 * var(--ds-space-12));
    /* Górny margines ścięty (był --ds-space-5/20px) — na życzenie podnosi
       grafikę prowadzących lekko w górę płyty, bliżej linii zaufania. */
    margin: var(--ds-space-2) calc(-1 * var(--ds-space-12)) calc(-1 * var(--ds-space-12));
  }
}