/* sections/course_hero.php — hero podstrony kursu.
   Tło w tincie przedmiotu + rozjaśnienie w rogu (analogicznie do warm-glow/
   blue-glow z hero strony głównej, ale w kolorze przedmiotu zamiast marki). */
.course_hero {
  background-color: var(--subj-tint);
  background-image: radial-gradient(70% 60% at 82% 0%, #fff 0%, rgba(255, 255, 255, 0) 70%);
  padding: 16px 0 28px;
}
@media (min-width: 1024px) {
  .course_hero { padding: 64px 0 72px; }
}

/* Wiersz zaufania — dwie grupy (ocena / kursanci) trzymane w jednej linii,
   celowo bez zawijania: obie skrócone tak, by zawsze się zmieściły od 360px. */
.chero-trust { margin-bottom: 14px; flex-wrap: nowrap; }
.chero-google-ic { width: 16px; height: 16px; flex: none; }

/* Etykieta-pigułka nad H1 — .badge + .subj-badge (baza design systemu, patrz
   DESIGN-SYSTEM.md → Badge'e), tylko odstęp dopisany lokalnie. */
.chero-kicker { margin-bottom: 10px; }

/* Nagłówek tej strony jest zdaniem-obietnicą, nie krótkim tytułem — świadomie
   mniejszy niż domyślne .text-display-hero, zawijany naturalnie. Zdanie w
   pełnym stopniu display zajmowało na 360px sześć linii i spychało CTA poniżej
   pierwszego ekranu; krótszy stopień z mocniejszym trackingiem czyta się
   pewniej i mieści obietnicę w czterech linijkach. */
.chero-title {
  margin: 0;
  font-family: var(--ds-font-display); font-weight: var(--ds-weight-semi);
  font-size: 26px; line-height: 1.22; letter-spacing: -0.028em;
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .chero-title { font-size: 34px; line-height: 1.18; }
}

.chero-lead { margin: 10px 0 0; color: var(--ds-color-ink-secondary); }
.chero-cta { margin-top: 16px; }
.chero-proofs { margin: 14px 0 0; gap: 6px; }
.chero-proofs li { gap: 10px; }
.chero-proofs li { justify-content: center; }
@media (min-width: 1024px) { .chero-proofs li { justify-content: flex-start; } }

/* Miniatura kursu — grafika gotowa, pełna szerokość kolumny, pod CTA na
   mobile. `aspect-ratio` dopasowany do realnego formatu grafiki kursowej
   (1600×1000), żeby object-fit:cover nic z niej nie ucinał. `aspect-ratio`
   rezerwuje też miejsce z góry, żeby wczytanie obrazu nie przesunęło layoutu
   (CLS). */
.chero-thumb {
  position: relative;
  aspect-ratio: 1600 / 1000;
  border-radius: var(--ds-radius-xl);
  overflow: hidden;
  box-shadow: var(--ds-shadow-lg);
}
/* Od 1024px miniatura celowo mniejsza niż kolumna (~-20%) i wycentrowana —
   puste miejsce po obu stronach zamiast rozciągania obrazu na cały width
   kolumny. */
@media (min-width: 1024px) {
  .chero-thumb { width: 80%; margin-inline: auto; }
}
.chero-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Prawy dolny róg — grafiki kursowe od zespołu marketingu mają zwykle własne
   logo/wstążkę w obu górnych rogach, więc tam badgeby na nie nachodził.
   Półprzezroczyste tło + blur zamiast pełnego wypełnienia .badge-solar, żeby
   czytało się jako nakładka, nie jako drugi, konkurencyjny prostokąt (patrz
   DESIGN-SYSTEM.md → card-course, ten sam zabieg na miniaturze 16:10). */
.chero-thumb-badge {
  position: absolute; right: 12px; bottom: 12px; z-index: 1;
  background-color: rgba(255, 246, 223, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}