/* ==========================================================================
   Hero (2026-09-27, decyzja właściciela): zdjęcie w tle na całą szerokość, przyciemnione
   od dołu; na nim wyśrodkowane dwuwierszowe hasło, fraza SEO (H1), dwa przyciski i rząd
   zaufania. Tekst siedzi w dolnej części kadru, twarz fizjoterapeuty (lewa góra zdjęcia)
   zostaje odsłonięta.
   Sekcja ma .is-dark (aliasy kolorów z tokens.css) i data-nav-theme="dark".
   Ruch:
   - wejście tekstu przy ładowaniu (CSS, całość < 1,2 s), zdjęcie (LCP) bez wygaszania,
   - zdjęcie zostaje lekko w tyle przy przewijaniu (js/hero.js, tylko transform).
   prefers-reduced-motion: stan końcowy bez ruchu.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  display: flex;
  align-items: flex-end;
  /* cały pierwszy ekran, ale bez przesady na bardzo wysokich monitorach */
  min-height: clamp(640px, 100svh, 940px);
  padding-top: calc(var(--nav-h) + 48px);
  padding-bottom: clamp(40px, 6vw, 72px);
  background: #16120f;             /* pod zdjęciem, zanim się wczyta */
  text-align: center;
}

/* ---- Zdjęcie + przyciemnienie ---- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  will-change: transform;
  transform: translate3d(0, var(--hero-par, 0px), 0);
}
.hero__photo { display: block; width: 100%; height: 100%; }
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* twarz jest w lewej górnej części pliku: tniemy od dołu (buty) */
  object-position: 40% 18%;
}
/* Ciepła czerń (zgodna z tonem zdjęcia, nie granat). Tekst stoi przy dolnej krawędzi,
   więc przyciemnienie liczymy w pikselach OD DOŁU (a nie w % wysokości): pod tekstem
   (ok. 450 px) zawsze mocne, wyżej szybko słabnie, twarz u góry kadru zostaje jasna.
   Plus lekka, równa warstwa na całości (zdjęcie nie „krzyczy” jasną ścianą). */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg,
      rgba(22, 18, 16, 0.90) 0px,
      rgba(22, 18, 16, 0.86) 260px,
      rgba(22, 18, 16, 0.76) 420px,
      rgba(22, 18, 16, 0.50) 540px,
      rgba(22, 18, 16, 0.18) 660px,
      rgba(22, 18, 16, 0) 780px),
    linear-gradient(rgba(22, 18, 16, 0.14), rgba(22, 18, 16, 0.14));
}

/* ---- Tekst ---- */
/* bez position: na telefonie .hero__media (w środku) pozycjonuje się względem całej sekcji */
.hero__inner { position: static; }
.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 960px;
  margin-inline: auto;
}
.hero__title { margin: 0; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.25); }
.hero__line { display: block; }
.hero__line--soft { color: rgba(255, 255, 255, 0.84); }   /* Dialog: pierwszy wiersz jaśniejszy */
.hero__line--strong { color: #fff; }

/* Podtytuł: hasło gabinetu, krój nagłówkowy w mniejszym stopniu, kremowy */
.hero__sub {
  max-width: 22em;
  margin-top: clamp(14px, 2vw, 22px);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 32px);
}
/* Przyciski jak dotąd (właściciel: „przyciski super”): pomarańczowy + biała pigułka.
   Ciemny kontekst zamieniłby „ghost” na obrys, więc zostaje jawnie biały. */
.hero .btn--ghost {
  background: var(--color-snow);
  color: var(--color-midnight-ink);
  border-color: transparent;
  box-shadow: none;
}
.hero .btn--ghost:hover { background: #f0f0f0; }

/* ---- Rząd zaufania ---- */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}
.hero__trust-cell { position: relative; display: flex; }
/* cienka pionowa kreska między danymi (właściciel lubił ją w pasku zaufania na teście) */
.hero__trust-cell + .hero__trust-cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 28px;
  margin-top: -14px;
  background: var(--line-strong);
}
.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 clamp(16px, 2vw, 24px);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  border-radius: var(--radius-small);
}
.hero__trust-value {
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  white-space: nowrap;
}
.hero__star { margin-right: 4px; font-size: 0.8em; vertical-align: 0.08em; }
.hero__trust-label {
  font-size: 12.5px;
  line-height: 1.35;
  letter-spacing: var(--tracking-small);
  color: var(--ink-2);
}
.hero__pin { flex: none; color: var(--ink-2); }
.hero__trust-item--addr { gap: 8px; }
.hero__trust-item--addr .hero__trust-value { font-size: 15px; letter-spacing: var(--tracking-small); }
a.hero__trust-item .hero__trust-value { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--dur-fast) ease; }
a.hero__trust-item:hover .hero__trust-value { text-decoration-color: var(--line-strong); }
a.hero__trust-item:hover .hero__trust-label,
a.hero__trust-item:hover .hero__pin { color: var(--ink); }

/* ---- Wejście przy ładowaniu (CSS, bez JS; kończy się widoczne) ----
   0 / 80 / 180 / 270 / 360 ms + 620 ms = 980 ms. Zdjęcie (LCP) bez wygaszania. */
@keyframes hero-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}
.hero__line,
.hero__sub,
.hero__cta,
.hero__trust {
  animation: hero-rise 620ms var(--ease-out) both;
}
.hero__line--strong { animation-delay: 80ms; }
.hero__sub { animation-delay: 180ms; }
.hero__cta { animation-delay: 270ms; }
.hero__trust { animation-delay: 360ms; }

/* ---- Komputer (od 1024 px): tekst po lewej, zdjęcie po prawej W RAMCE ----
   Decyzja właściciela 27.09: na komputerze bez przejścia zdjęcia w tło, zdjęcie zamknięte
   w ramce (jak rama produktu w Dialogu: półprzezroczysta rama 8 px + zdjęcie 24 px).
   Wysokość ramki dopasowana do ekranu, żeby hero mieściło się w pierwszym widoku. */
@media (min-width: 1024px) {
  .hero {
    align-items: center;
    padding-top: calc(var(--nav-h) + 32px);
    padding-bottom: clamp(40px, 5vw, 64px);
    text-align: left;
  }
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(40px, 5vw, 80px);
  }
  .hero__text { align-items: flex-start; max-width: 620px; margin-inline: 0; }
  .hero__title { font-size: clamp(48px, 5vw, 70px); }
  .hero__cta { justify-content: flex-start; }
  .hero__trust { justify-content: flex-start; }
  /* pierwsza dana równo z krawędzią tekstu */
  .hero__trust-cell:first-child .hero__trust-item { padding-left: 0; }

  .hero__media {
    position: relative;
    inset: auto;
    z-index: auto;
    height: min(700px, calc(100svh - var(--nav-h) - 110px));
    min-height: 460px;
    aspect-ratio: 3 / 4;
    padding: 8px;
    border-radius: var(--radius-overlays);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: none;
    will-change: auto;
  }
  .hero__photo {
    overflow: hidden;
    border-radius: var(--radius-cards);
    background: #2a221d;
  }
  .hero__photo img { object-position: 50% 12%; }
  .hero__scrim { display: none; }
}
/* Wąski komputer: adres nie mieści się w jednym rzędzie z ocenami, więc idzie do osobnego
   wiersza, bez pionowej kreski (wisiałaby samotnie przy lewej krawędzi). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__trust-cell--addr { flex-basis: 100%; }
  .hero__trust-cell--addr::before { display: none; }
  .hero__trust-cell--addr .hero__trust-item { padding-left: 0; }
}

/* ---- Tablet w pionie / duży telefon ---- */
@media (max-width: 1023px) {
  /* pod paskiem nawigacji (52 px na telefonie, 56 px od 768 px) */
  .hero__media { top: 52px; }
  .hero__photo img { object-position: 50% 0%; }
}
@media (min-width: 768px) and (max-width: 1023px) { .hero__media { top: 56px; } }
@media (max-width: 767px) {
  .hero { min-height: max(100svh, 640px); }
}

/* ---- Telefon ---- */
@media (max-width: 560px) {
  .hero { padding-bottom: 32px; }
  .hero__sub { font-size: 22px; }
  /* dwie dane obok siebie, adres pod spodem za poziomą kreską */
  .hero__trust {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    row-gap: 8px;
    width: 100%;
  }
  .hero__trust-item { padding-inline: 14px; }
  .hero__trust-value { font-size: 18px; }
  .hero__trust-cell--addr {
    grid-column: 1 / -1;
    justify-content: center;
    padding-top: 8px;
  }
  .hero__trust-cell + .hero__trust-cell--addr::before {
    top: 0; left: 50%;
    width: min(240px, 70%); height: 1px;
    margin: 0;
    transform: translateX(-50%);
  }
}

@media (max-width: 480px) {
  .hero__cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; }
  .hero__cta .btn { width: 100%; }
  .hero__photo img { object-position: 50% 0%; }
}

/* ---- Reduced motion: bez wejścia, bez paralaksy ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__line, .hero__sub, .hero__cta, .hero__trust { animation: none; }
  .hero__media { transform: none; will-change: auto; }
}

/* Tytuł: na telefonie „Fizjoterapeuta” / „Konin” w dwóch wierszach, od 560 px w jednym */
@media (min-width: 560px) { .hero__title .hero__line { display: inline; } }

/* Podtytuł łamie się tylko między zdaniami („Robimy / USG” wyglądało przypadkowo) */
.hero__sub span { white-space: nowrap; }

/* ---- Podstrona Fala (29.09): portret z głowicą (kadr 3:4, głowa tuż pod górną krawędzią).
   Rozciągnięty na całą wysokość ekranu telefonu byłby za duży (napis wchodził na usta), więc
   na telefonie (do 767 px) zdjęcie ma swoje proporcje 3:4 u góry sceny, a dół płynnie przechodzi
   w tło sekcji. Przyciemnienie liczone od dołu ZDJĘCIA, nie sekcji: twarz zostaje jasna. Tablet
   w pionie zostaje przy zdjęciu na całą scenę (3:4 z limitem wysokości zwężało kadr). ---- */
@media (max-width: 767px) {
  /* 29.09 (właściciel: „zobacz, jakie to długie”): na wysokim ekranie hero nie rozciąga się do 100svh,
     tylko wysokość wynika ze zdjęcia i tekstu: tekst zaczyna się na ok. 58 % wysokości zdjęcia 3:4
     (szerokość × 4/3), więc nie ma pustej czerni między zdjęciem a nagłówkiem. */
  .hero--fala, .hero--pw, .hero--fit {
    min-height: 0;
    padding-top: calc(52px + 133.333vw * 0.58);
  }
  .hero--fala .hero__media, .hero--pw .hero__media, .hero--fit .hero__media {
    bottom: auto;
    aspect-ratio: 3 / 4;
    max-height: calc(100% - 52px);
  }
  .hero--fala .hero__scrim, .hero--pw .hero__scrim, .hero--fit .hero__scrim {
    background:
      linear-gradient(0deg,
        rgba(22, 18, 16, 1) 0%,
        rgba(22, 18, 16, 0.86) 20%,
        rgba(22, 18, 16, 0.5) 38%,
        rgba(22, 18, 16, 0.12) 54%,
        rgba(22, 18, 16, 0) 64%),
      linear-gradient(rgba(22, 18, 16, 0.08), rgba(22, 18, 16, 0.08));
  }
}

/* 1.10 (właściciel: „na podstronie fizjoterapia hero ma dobrą wysokość, a na głównej jest bardzo rozciągnięte”):
   główna dostaje .hero--fit, czyli ten sam układ telefonu co podstrony (wysokość z kadru 3:4 i tekstu, nie 100svh). */

/* ---- Podstrona Pierwsza wizyta (1.10): ten sam układ co fala (zdjęcie 3:4 u góry na telefonie), dłuższy H1,
   więc mniejszy stopień; zdjęcie: Marcin i Agnieszka (kogo spotkasz). ---- */
.hero--pw .hero__title { font-size: clamp(40px, 4.6vw, 60px); }
@media (max-width: 559px) { .hero--pw .hero__title { font-size: 40px; } }
.hero--pw .hero__photo img { object-position: 50% 30%; }

/* 1.10: najmniejsze telefony: zdania podtytułu mogą się łamać (inaczej wychodzą poza ekran przy 320 px) */
@media (max-width: 359px) { .hero__sub span { white-space: normal; } }