/* Dietlo — KOMPONENT: naglowek sekcji (eyebrow -> h2 -> zielona kreska)
   z wariantami A / B / NUM / E (rules.md: warianty rotuja, zeby uklad
   badge + naglowek + kreska nie powtorzyl sie dwa razy pod rzad).

   Jedyny wlasciciel .dietlo-section-head. Wyodrebnione i splaszczone
   z base-pages.css (V1 + V2 kreska + V5 warianty + V5.1 korekty),
   wynik obliczony z kaskady — zero zmiany wizualnej.

   Selektory obejmuja tez .dietlo-split h2/p: to ta sama rola
   typograficzna naglowka sekcyjnego, dzielona od V1 — rozdzielenie
   zmienialoby kaskade dla .dietlo-split.

   Mobilny rozmiar h2 (31px przy max-width: 520px) zostal w
   base-pages.css, bo dzieli regule z .dietlo-products-head. */

.dietlo-section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.dietlo-section-head h2,
.dietlo-split h2 {
  margin: 0 0 14px;
  font-family: var(--dietlo-font-display);
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: var(--dietlo-line-display);
  font-weight: 700;
  letter-spacing: var(--dietlo-letter-display);
}

.dietlo-section-head p,
.dietlo-split p {
  margin: 0;
  color: var(--dietlo-muted);
  font-size: clamp(17px, 1.8vw, 18px);
  line-height: var(--dietlo-line-body);
}

.dietlo-section-head .dietlo-eyebrow {
  margin-bottom: 18px;
}

/* Pochylona zielona kreska pod h2 — DNA hero przeniesione na sekcje (V2) */

.dietlo-section-head h2 {
  position: relative;
}

.dietlo-section-head h2::after {
  content: "";
  display: block;
  width: 92px;
  height: 0;
  border-bottom: 4px solid rgba(85, 185, 71, 0.92);
  border-radius: var(--dietlo-radius-pill);
  transform: rotate(-2deg);
  margin: 20px auto 0;
}

/* ── Warianty (V5, anty-monotonia) ───────────────────────────────── */

/* A: maly badge + duzy heading, bez kreski (Sciezki).
   Rozmiar h2 splaszczony z korekta V5.1: naglowek zawsze w jednej linii. */
.dietlo-section-head--a h2::after {
  display: none;
}

.dietlo-section-head--a h2 {
  font-size: clamp(24px, 7.2vw, 58px);
  white-space: nowrap;
}

.dietlo-section-head--a .dietlo-eyebrow {
  font-size: 11px; /* poza skala --dietlo-text-* — udokumentowany dlug */
  min-height: 26px;
}

/* Wariant A opiera `white-space: nowrap` na wlasnym clamp: przy 7.2vw
   naglowek zajmuje ~0.85 szerokosci ekranu, a kontener daje ~0.91 - wiec
   jedna linia sie miesci az do 320px.

   base-pages.css laduje sie PO tym pliku i przy <=520px narzuca wszystkim
   `.dietlo-section-head h2` rozmiar 31px. Ta sama specyficznosc (0,1,1),
   wiec wygrywa kolejnoscia i zrywa te zaleznosc: 31px daje 365px tekstu
   przy 343px dostepnych na 375px ekranu. Nagloek wychodzil poza kontener,
   a `text-align: center` rozkladal nadmiar symetrycznie - stad wrazenie
   rozjechanego centrowania.

   Podwojna klasa (0,2,1) przywraca clamp wariantu niezaleznie od kolejnosci
   plikow. Nie ruszamy reguly w base-pages.css, bo dzieli ja
   `.dietlo-products-head`, ktory nie ma nowrap i 31px mu sluzy. */
@media (max-width: 520px) {
  .dietlo-section-head.dietlo-section-head--a h2 {
    font-size: clamp(24px, 7.2vw, 58px);
  }
}

/* B: heading po lewej, opis po prawej, bez badge i kreski */
/* grid-equal-height: off - heading and supporting copy intentionally use opposite baselines */
.dietlo-section-head--b {
  max-width: none;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 16px 56px;
  align-items: end;
}

.dietlo-section-head--b h2::after {
  display: none;
}

.dietlo-section-head--b .dietlo-eyebrow {
  display: none;
}

.dietlo-section-head--b p {
  margin-bottom: 8px;
  max-width: 46ch;
}

/* Legacy max-width — do inwersji przy migracji mobile-first (rules.md) */
@media (max-width: 680px) {
  /* grid-equal-height: off - mobile heading text keeps its natural top alignment */
  .dietlo-section-head--b {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }
}

/* C/NUM: duzy numer sekcji obok headingu (Problem = 01) */
.dietlo-section-head--num {
  position: relative;
  max-width: 860px;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
  padding-left: clamp(92px, 12vw, 170px);
}

.dietlo-section-head--num::before {
  content: attr(data-num);
  position: absolute;
  left: 0;
  top: -10px;
  font-family: var(--dietlo-font-display);
  font-size: clamp(72px, 10vw, 124px);
  font-weight: 700;
  line-height: 0.9;
  color: rgba(112, 34, 215, 0.13);
  pointer-events: none;
}

.dietlo-section-head--num h2::after {
  display: none;
}

.dietlo-section-head--num .dietlo-eyebrow {
  display: none;
}

.dietlo-section-head--num p {
  max-width: 56ch;
}

/* Legacy max-width — do inwersji przy migracji mobile-first (rules.md) */
@media (max-width: 520px) {
  .dietlo-section-head--num {
    padding-left: 74px;
  }
}

/* E: heading nachodzacy na siatke punktow (Materialy).
   background-image splaszczony z korekta V5.1 (gestsza, mocniejsza siatka). */
.dietlo-section-head--e {
  position: relative;
}

.dietlo-section-head--e::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(26px);
  width: 168px;
  height: 104px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"><circle cx="3" cy="3" r="1.9" fill="%237022d7" opacity="0.24"/></svg>');
  pointer-events: none;
}

.dietlo-section-head--e h2 {
  position: relative;
  z-index: 1;
}

.dietlo-section-head--e h2::after {
  display: none;
}

/* Klasyczne naglowki: kreska RYSUJE SIE przy odkryciu (reveal odwracalny) */
.dietlo-motion-ready .dietlo-section-head.dietlo-reveal h2::after {
  transform: scaleX(0) rotate(-2deg);
  transform-origin: left center;
  transition: transform 900ms var(--dietlo-ease-premium) 500ms;
}

.dietlo-motion-ready .dietlo-section-head.dietlo-reveal.is-revealed h2::after {
  transform: scaleX(1) rotate(-2deg);
}

/* Reduced motion: kreska widoczna od razu (wymog rules.md) */
@media (prefers-reduced-motion: reduce) {
  .dietlo-motion-ready .dietlo-section-head.dietlo-reveal h2::after {
    transform: scaleX(1) rotate(-2deg);
    transition: none;
  }
}