/*
 * Hero "rozdarty papier" — warstwowa wersja slajdu aktualnosci.
 *
 * Zastepuje slajd-plakat z prototypu. Zamiast plaskiej grafiki 4:5
 * slajd sklada sie z trzech warstw:
 *   1. kremowy panel z rozdartymi krawedziami (maska SVG),
 *   2. tresc wpisu (kategoria, tytul, lead, CTA) — zywy HTML,
 *   3. wycieta sylwetka z plakatu (przezroczysty PNG).
 *
 * Ladowane PO styles.css prototypu, wiec nadpisuje reguly .slide.
 * url() w tym pliku rozwiazuje sie wzgledem samego arkusza, wiec
 * znacznik <base> na stronie go nie dotyczy.
 */

.hero__main {
  /* --leaf siedzi w palecie globalnej; hero nie ma juz wlasnego odcienia. */
  --paper: #efece4; --ink: #14181a;
  /* sylwetka ma wychodzic poza rame slajdu, prototyp domyslnie przycina */
  overflow: visible;
}

/* ---------- panel ---------- */

/*
 * Zostawiamy pozycjonowanie i przenikanie z prototypu (.slide robi to na
 * opacity/visibility) — nadpisujemy tylko uklad z flex na blokowy,
 * bo warstwy pozycjonujemy bezwzglednie.
 */
.slide--torn { display: block; }

.slide--torn .torn {
  position: absolute;
  left: 0; right: 0;
  top: var(--paper-top);
  bottom: auto;
  transform: none;
  height: var(--paper-h);
  background: var(--paper);
  /* maska nadaje gornej i dolnej krawedzi nierowny, rwany ksztalt */
  -webkit-mask-image: url("../assets/torn.svg");
          mask-image: url("../assets/torn.svg");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Ziarno papieru — delikatny szum, zeby plaszczyzna nie byla martwa. */
.slide--torn .torn::after {
  content: "";
  position: absolute; inset: 0;
  opacity: .5;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23g)' opacity='.11'/></svg>");
}

/* ---------- tresc ---------- */

.slide--torn .torn__inner {
  position: absolute;
  /*
   * Tresc trzymamy W GRANICACH PAPIERU: dluzszy tytul rozpychal blok
   * wysrodkowany wzgledem slajdu i plakietka z kategoria wjezdzala
   * na haslo nad sliderem.
   */
  left: 6%;
  top: var(--paper-top);
  height: var(--paper-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  transform: none;
  width: 42%;
  overflow: hidden;
  z-index: 4;   /* nad sylwetka — tekst nigdy nie moze byc przykryty */
}

.slide--torn .torn__badge {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 14px;
  margin-bottom: 22px;
}

.slide--torn .torn__title {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  /*
   * .88 scinalo ogonek w „DĘBICA”, gdy nazwa klubu stala w PIERWSZYM wierszu
   * (mecz u siebie) — akcent kolejnego wiersza wchodzil na ogonek poprzedniego.
   * Polskie wersaliki potrzebuja miejsca i na ogonki, i na akcenty.
   */
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  /*
   * Skala liczona od SZEROKOSCI KOLUMNY HERO (cqw), nie od okna — na
   * laptopie kolumna jest wezsza niz sugeruje vw i tytul sie rozpychal.
   * Limit wierszy pilnuje, by najdluzszy tytul nie wypchnal plakietki
   * z papieru na haslo nad sliderem.
   */
  font-size: clamp(34px, 6.4cqw, 92px);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.slide--torn .torn__title .is-leaf { color: var(--leaf); }

.slide--torn .torn__sub {
  margin: 18px 0 0;
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
  font-size: clamp(13px, 1.6cqw, 22px);
  max-width: 22em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.slide--torn .torn__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 28px; padding: 13px 26px;
  background: var(--leaf); color: #fff;
  font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease;
}

.slide--torn .torn__cta:hover { background: #155e33; }

/* ---------- sylwetka ---------- */

/*
 * Scena sylwetki. Rozciaga sie od gornej krawedzi zdjecia do DOLNEJ
 * KRAWEDZI PAPIERU i jest przycieta ta sama tekstura rozdarcia — dzieki
 * temu nogi chowaja sie pod papierem zamiast z niego wystawac, a glowa
 * nadal wychodzi ponad gorna krawedz. Sam z-index by tego nie zalatwil:
 * element jest albo nad papierem, albo pod nim, nigdy jedno i drugie.
 */
.slide--torn .torn__stage {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--paper-top) - var(--cut-rise, 0px));
  bottom: calc(100% - var(--paper-top) - var(--paper-h));
  z-index: 3;
  pointer-events: none;

  /*
   * Dwie warstwy maski:
   *  - pelna plaszczyzna wszedzie POZA dolnym pasem (glowa zostaje widoczna),
   *  - tekstura rozdarcia w dolnym pasie, w tym samym rozmiarze i pozycji
   *    co maska papieru, wiec strzepiona krawedz pokrywa sie co do piksela.
   */
  --torn-band: 70px;
  -webkit-mask-image: linear-gradient(#000, #000), url("../assets/torn.svg");
          mask-image: linear-gradient(#000, #000), url("../assets/torn.svg");
  -webkit-mask-size: 100% calc(100% - var(--torn-band)), 100% var(--paper-h);
          mask-size: 100% calc(100% - var(--torn-band)), 100% var(--paper-h);
  -webkit-mask-position: left top, left bottom;
          mask-position: left top, left bottom;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-over;
          mask-composite: add;
}

.slide--torn .torn__cut {
  position: absolute;
  left: 46%;
  right: 2%;
  margin-inline: auto;   /* mniejsze grafiki same siadaja na srodku pasa */
  width: auto;
  height: auto;
  bottom: 0;             /* stoi na dolnej krawedzi papieru */

  /* --cut-max = polowa natywnej szerokosci (patrz getimagesize w hero.php) */
  max-width: min(52%, var(--cut-max, 600px));
  max-height: 100%;

  filter: drop-shadow(-14px 16px 26px rgba(0,0,0,.34));
  pointer-events: none;
}

/* ---------- warianty ---------- */

/* Wpisy bez wycietej sylwetki (czysta grafika) — tekst dostaje wiecej miejsca. */
.slide--torn.has-no-cut .torn__inner { width: 68%; }

@media (max-width: 900px) {
  /*
   * Sylwetka zostaje OSTRA.
   *
   * Prototyp gasil ja na telefonie do 22% krycia i robil z niej mgliste
   * tlo pod tekstem. Zdjecie zawodnika to glowna tresc slajdu, wiec
   * pokazujemy je w pelni, a tekst przesuwamy w lewo i podkladamy pod
   * niego papier — dzieki temu jest z przodu i nic go nie zamazuje.
   */
  .slide--torn .torn__inner { width: 58%; left: 7%; }

  /*
   * Sylwetka w pelnym kryciu, przy prawej krawedzi papieru. Tekst konczy
   * sie zanim zacznie sie zdjecie, wiec nie potrzebuje pod soba zadnej
   * przeslony — a to wlasnie przeslona robila wrazenie mgly.
   */
  .slide--torn .torn__cut { opacity: 1; left: 42%; right: 0; max-width: 58%; }
}


/* ---------- haslo "Najstarsi bialo-zieloni w Polsce" ---------- */

/*
 * W prototypie haslo siedzi w 200-pikselowej kolumnie siatki i lamie sie
 * do jej szerokosci. Wyciagamy je z ukladu: kotwiczymy do prawej krawedzi
 * kolumny (czyli tuz przy papierze), pozwalamy rosnac w lewo poza nia
 * i powiekszamy, zeby proporcje zgadzaly sie z projektem.
 */
.hero__tagcol { position: relative; overflow: visible; }

.hero__tagcol .hero__tag {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%) rotate(-7deg);
  transform-origin: right center;
  width: max-content;
  max-width: 340px;
  font-size: clamp(34px, 3.1vw, 56px);
  line-height: 1.06;
  text-align: right;
}


/* ---------- uklad zalezny od kadru ---------- */

/*
 * Proporcja pliku mowi, co jest na zdjeciu, a rozne kadry znosza rozne
 * powiekszenie. Wartosc ustawia PHP w atrybucie data-cut.
 */

/* Portret pionowy — duza twarz, znosi najwieksza skale. */
.slide--torn[data-cut="tall"] .torn__stage {
  --cut-rise: 11%;   /* portret pionowy wychodzi najwyzej, na haslo */
}

/* Popiersie — stan posredni. */
.slide--torn[data-cut="bust"] .torn__stage {
  --cut-rise: 7%;
}

/*
 * Kadr poziomy (grupa w pelnej postaci). Twarze sa male, wiec powiekszanie
 * tylko uwypukla miekkosc. Trzymamy grupe mniejsza i w calosci na papierze,
 * bez przebijania dolnej krawedzi.
 */
.slide--torn[data-cut="wide"] .torn__stage {
  /* grupa nie wychodzi ponad papier — kadr poziomy lepiej wyglada w calosci na nim */
  --cut-rise: 0px;
}

/* ---------- haslo nad sliderem ---------- */

/*
 * Haslo przenosimy z lewej kolumny nad slider, dzieki czemu kolumna
 * slidera zaczyna sie przy tym samym marginesie, co karty "Nastepny mecz"
 * koncza po prawej. Siatka traci pierwsza kolumne (200px), a haslo jest
 * pozycjonowane bezwzglednie wewnatrz .hero__main, wiec rowna sie
 * dokladnie z lewa krawedzia papieru.
 */
.hero__inner { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); }

.hero__main .hero__tagcol {
  position: absolute;
  left: 0;
  top: 0;          /* rowna sie z gora kart po prawej (ten sam wiersz siatki) */
  bottom: auto;
  display: block;
  /* nizej niz sylwetka (z-index 3) — wysoki kadr ma na nie nachodzic */
  z-index: 2;
}

/*
 * Haslo ma wypelniac niemal cala szerokosc kolumny slidera. Skalujemy je
 * jednostka kontenerowa (cqw = 1% szerokosci .hero__main), a nie vw —
 * kolumna kart meczowych ma staly zakres szerokosci, wiec przy vw haslo
 * rozjezdzaloby sie z papierem na roznych ekranach.
 */
.hero__main {
  container-type: inline-size;

  /*
   * Geometria hero w jednym miejscu. Papier i sylwetka licza sie od TEJ SAMEJ
   * gornej krawedzi, wiec przesuniecie slidera to zmiana jednej wartosci —
   * wczesniej byly kotwiczone niezaleznie i rozjezdzaly sie wzgledem siebie.
   */
  /*
   * WSZYSTKO W PIKSELACH, celowo. Wczesniej --paper-top bylo w cqw,
   * a --paper-h w vh, wiec kompozycja inaczej ukladala sie na kazdym
   * ekranie i trudno bylo cokolwiek przewidziec. Stala wysokosc
   * oznacza, ze hero wyglada tak samo wszedzie; pod mniejsze ekrany
   * sa osobne wartosci nizej.
   */
  --paper-top: 92px;
  --paper-h:   520px;
}

.hero__main .hero__tag {
  position: static;
  margin-top: 34px;   /* haslo ciupke nizej — zeby nie siedzialo pod herbem/rokiem */
  transform: rotate(-2deg);
  transform-origin: left bottom;
  text-align: left;
  width: max-content;
  max-width: none;
  font-size: 9cqw;
  line-height: 1;
  /* Bez nowrap: na waskich ekranach haslo zlamie sie na dwie linie,
     zamiast wyjsc poza kolumne i nalozyc sie na karty meczowe. */
  max-width: 100%;
}


/*
 * Prawa kolumna ma te sama, z gory znana wysokosc co slider. Bez tego
 * dopasowywalaby sie do tresci i hero wygladalo inaczej przy kazdej
 * liczbie ostatnich wynikow. Lista wynikow przewija sie w srodku.
 */
/*
 * Wysokosc z tresci, nie narzucona. Wczesniej rownala sie sliderowi,
 * przez co trzecia karta wychodzila poza kadr.
 */
.hero__aside {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(var(--paper-top) + var(--paper-h));
}

.hero__aside .next-match { flex: 0 0 auto; }

.hero__aside .results {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hero__aside .results .mcard__head { flex: 0 0 auto; }

.hero__aside .results > *:not(.mcard__head) {
  overflow-y: auto;
  min-height: 0;
}

@media (max-width: 1040px) {
  /* uklad pionowy — stala wysokosc obcielaby karty */
  .hero__aside { height: auto; display: block; }
}


/* ---------- nawigacja slidera: pod wpisem, po lewej ---------- */

.hero__main .hero__nav {
  position: absolute;
  /* PONIZEJ papieru, na ciemnym tle — nie zabiera miejsca wpisowi */
  /* rowno z lewa krawedzia papieru — nawigacja jest poza nim, wiec
     wciecie tekstu (6%) by ja przesunelo w prawo bez powodu */
  left: 0;
  top: calc(var(--paper-top) + var(--paper-h) + 16px);
  bottom: auto;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero__main .hero__nav .slider__arrows {
  position: static;
  inset: auto;
  padding: 0;
  display: flex;
  gap: 8px;
}

.hero__main .hero__nav .slider__arrow {
  position: static;
  transform: none;
  /* kwadratowe, bialy wypelnienie i obrys jak w buttonach, sama strzalka zielona */
  width: 36px; height: 36px;
  border-radius: 3px;
  background: #fff;
  border: 1.5px solid #fff;
  color: var(--leaf);
}

.hero__main .hero__nav .slider__arrow:hover {
  background: #fff;
  border-color: var(--leaf);
}

.hero__main .hero__nav .slider__dots {
  position: static;
  inset: auto;
  /* prototyp centruje kropki przez translateX(-50%) — w pasku to je nasuwa na strzalki */
  transform: none;
  display: flex;
  gap: 7px;
}

/*
 * Kropka wyglada na 7px, ale UCHWYT ma 24x24px — ponizej tego trafienie
 * palcem na telefonie jest loteria (WCAG 2.5.8). Sam przycisk jest
 * przezroczystym polem, widoczna kropke maluje pseudoelement.
 */
.hero__main .hero__nav .dot {
  width: 24px; height: 24px; padding: 0;
  border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}

.hero__main .hero__nav .dot::before {
  content: "";
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  transition: width .2s ease, background .2s ease, border-radius .2s ease;
}

.hero__main .hero__nav .dot.is-active::before {
  width: 22px; border-radius: 4px;
  /* biala, nie zielona — na ciemnozielonym tle zielen znika */
  background: #fff;
}


/* ---------- wysokosc hero z tresci, nie z okna ---------- */

/*
 * Prototyp trzymal .hero na min-height:100vh, a nawigacja byla pozycjonowana
 * bezwzglednie — nie wnosila wiec wysokosci i pod nia zostawal pas pustki
 * (kilkadziesiat px albo kilkaset, zaleznie od okna). Teraz:
 *   - .slides ma konkretna wysokosc (papier + odstep nad nim),
 *   - nawigacja wraca do normalnego przeplywu pod nia,
 *   - sekcja konczy sie 10px pod nawigacja.
 */
.hero { min-height: auto; }

.hero__inner { padding-bottom: 10px; }

.hero__main {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hero .slides {
  position: relative;
  inset: auto;
  height: calc(var(--paper-top) + var(--paper-h));
}

.hero__main .hero__nav {
  position: static;
  margin: 16px 0 0;
  top: auto;
}


/* ---------- stala wysokosc hero ---------- */

/*
 * Hero ma z gory znana wysokosc, a nie taka, jaka wyjdzie z tresci
 * czy z okna. Tlo wypelnia cala te wysokosc, wiec nawigacja slidera
 * lezy po prostu na nim, a pod nia zostaje jeszcze pas tla.
 */
/*
 * Stala wysokosc jest teraz DOLNA GRANICA, nie sztywna wartoscia.
 * Kolumna boczna ma trzy karty i przy nizszych ekranach byla wyzsza
 * od hero — nadmiar po prostu znikal pod krawedzia sekcji.
 */
.hero {
  height: auto;
  min-height: 780px;
}

.hero__inner {
  height: 100%;
  padding-bottom: 0;
}

/* Haslo skaluje sie teraz do stalej szerokosci kolumny, wiec cqw dalej
   ma sens — zmienia sie tylko przy zmianie szerokosci okna. */

/*
 * Prog na WYSOKOSC okna, nie tylko szerokosc. Na laptopie 1440x760
 * hero o stalej wysokosci 780px nie miescilo sie w ekranie i nawigacja
 * ladowala pod krawiedzia. Kompozycja zostaje ta sama, tylko mniejsza.
 */
/*
 * Tylko dolna granica — sztywne 'height' powodowalo, ze hero nie roslo
 * za kolumna boczna i trzecia karta konczyla sie pod krawedzia sekcji.
 */
@media (max-height: 820px) {
  .hero { height: auto; min-height: 660px; }
  .hero__main { --paper-top: 74px; --paper-h: 410px; }
}

@media (max-width: 1200px) {
  .hero { height: auto; min-height: 700px; }
  .hero__main { --paper-top: 78px; --paper-h: 430px; }
}

/*
 * Prototyp zwija siatke hero do jednej kolumny przy 1040px. Moja regula
 * dwukolumnowa byla globalna i to nadpisywala, przez co na telefonie
 * karty meczowe stercza obok papieru i strona przewijala sie w bok.
 * Od tego progu wracamy do ukladu pionowego i do wysokosci z tresci —
 * stala wysokosc obcielaby wtedy karty.
 */
@media (max-width: 1040px) {
  .hero__inner {
    grid-template-columns: 1fr;
    height: auto;
    padding-bottom: 24px;
  }

  .hero { height: auto; min-height: 0; }

  .hero__main { --paper-top: 64px; --paper-h: 380px; }

  /* haslo nad sliderem robi sie za duze, gdy kolumna zajmuje cala szerokosc */
  .hero__main .hero__tag { font-size: 7cqw; }
}

@media (max-width: 720px) {
  .hero__main { --paper-top: 52px; --paper-h: 330px; }
  .slide--torn .torn__inner { width: 82%; left: 7%; }
}

/* ---------- prawa kolumna: biale obrysy i data w naglowku ---------- */

/* Prototyp mial ledwie widoczne obrysy rgba(255,255,255,.12). */
.hero__aside .mcard { border-color: #fff; }

.hero__aside .mcard__head,
.hero__aside .res__row,
.hero__aside .results > *:not(.mcard__head) > * { border-color: rgba(255,255,255,.55); }

/* Naglowek karty: etykieta po lewej, termin po prawej. */
.hero__aside .nm__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* Data byla wysrodkowana pod herbami — teraz jest w naglowku, wiec
   zdejmujemy srodkowanie i zmniejszamy, zeby zmiescila sie w wierszu. */
.hero__aside .nm__top .nm__when {
  text-align: right;
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.hero__aside .nm__venue { margin-top: 10px; }

/* ---------- tasma sponsorow w rzedzie z nawigacja ---------- */

.hero__main .hero__nav { flex-wrap: nowrap; }

.hero-tasma {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;              /* bez tego flex nie pozwoli oknu sie zwezic */
  margin-left: 18px;
  height: 36px;
  /*
   * BIALE tlo, nie przyciemnione.
   *
   * Logotypy sponsorow sa projektowane pod jasne podloze i czesc z nich
   * jest ciemna albo ma ciemny kontur — na przyciemnionym tle po prostu
   * znikaly. Pasek dziala teraz jak telewizyjna belka sponsorska:
   * jasny prostokat, na ktorym kazde logo wyglada tak, jak zaprojektowano.
   */
  background: #fff;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 3px;
  overflow: hidden;
}

/* Plakietka ligi stoi — jak w telewizyjnym pasku sponsorskim. */
.hero-tasma__liga {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 100%;
  padding: 0 12px;
  /* na bialej belce plakietka musi byc ciemna, inaczej znikala razem z logami */
  background: var(--green-darker);
  border-right: 1px solid rgba(20, 24, 26, .12);
  font-family: var(--font-display);
  font-size: var(--fs-etykieta); letter-spacing: .1em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
}
/* Lockup zastapil plaski napis — potrzebuje wysokosci prawie calej belki. */
.hero-tasma__liga img { height: 30px; width: auto; display: block; }

.hero-tasma__okno { flex: 1 1 auto; min-width: 0; overflow: hidden; height: 100%; }

/*
 * Przesuwamy o 50% szerokosci taśmy — tyle zajmuje pierwszy komplet
 * logotypow, wiec drugi wchodzi dokladnie na jego miejsce.
 * Czas trwania rosnie z liczba sponsorow, zeby tempo bylo stale.
 */
.hero-tasma__jazda {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  height: 100%;
  padding-left: 34px;
  /* Dystans i czas ustawia redesign/js/ui.js po zmierzeniu kompletu. */
  animation: heroTasma 30s linear infinite;
}

@keyframes heroTasma {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--przesun, 50%))); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-tasma__jazda { animation: none; }
}

.ht { flex: 0 0 auto; display: block; }

/*
 * Wysokosc = baza razy `--ht-s`. Mnoznik liczy PHP z proporcji pliku
 * (wisloka_skala_logo w redesign/sponsorzy.php) i wstawia go w znacznik
 * kafelka; kwadratowy lockup rosnie, dlugi napis maleje, wiec logotypy
 * zajmuja podobne pole zamiast rozniac sie dziesieciokrotnie.
 *
 * Bez zmiennej zostaje sama baza — logotyp, ktorego nie dalo sie
 * zmierzyc, wyglada dokladnie jak przed ta zmiana.
 *
 * `max-width` jest juz tylko bezpiecznikiem przed nietypowym plikiem.
 * Wczesniej przycinal np. Painpol i psul obiecana rowna wysokosc, dlatego
 * ma zapas nad najszerszym logotypem w komplecie.
 */
.ht img {
  height: calc(25px * var(--ht-s, 1));
  width: auto; max-width: 185px;
  object-fit: contain; display: block;
}

@media (max-width: 1040px) {
  /* Regula z czasow, gdy pas siedzial w hero — w ukladzie pionowym nie bylo
     dla niego miejsca. Pas PRZYKLEJONY do dolu okna ma byc widoczny takze
     na telefonie, wiec wyjmujemy go spod tej reguly. */
  .hero-tasma:not(.hero-tasma--przyklejona) { display: none; }
}


/* ---------- nizsze ekrany: mniej gestosci zamiast obcinania ---------- */

/*
 * Na 13-calowym laptopie (ok. 1280-1440 x 700-820) trzy karty w kolumnie
 * nie miescily sie obok slidera. Zamiast je przycinac, skracamy tabele
 * i liste wynikow — informacja zostaje, znika tylko nadmiar.
 */
@media (min-width: 1041px) and (max-height: 860px) {
  .hero { min-height: 0; }
  .hero__main { --paper-top: 74px; --paper-h: 430px; }

  .hero__aside .mcard { padding-top: 12px; padding-bottom: 12px; }
  .hero__aside .mtab tr:nth-child(n+5) { display: none; }

  /*
   * Karta meczow pokazuje KOMPLET pieciu pozycji — po scaleniu wynikow
   * z terminarzem to wlasnie one sa trescia karty. Wczesniej chowalismy
   * tu nadmiarowe wiersze, ale wtedy karty byly dwie i kolumna nie
   * miescila sie obok slidera; teraz miejsca starcza.
   */

  .slide--torn .torn__title { -webkit-line-clamp: 3; line-clamp: 3; }
}

@media (min-width: 1041px) and (max-height: 760px) {
  .hero__main { --paper-top: 64px; --paper-h: 380px; }
  .hero__aside .mtab tr:nth-child(n+4) { display: none; }
}

/* ---------- animacja „recznego pisania" hasla przy wejsciu na strone ----------
 * Haslo „Najstarsi bialo-zieloni w Polsce" odslania sie od lewej do prawej,
 * jakby ktos pisal je odrecznie. Efekt clip-path (niezalezny od rotate(-2deg)).
 */
@keyframes hero-handwrite {
  /* Ujemne insety u gory/dolu/lewej = zapas na wydluzenia i „wyrzuty" pisma
     odrecznego (inaczej clip obcinal koncowke „...lsce" i gorne petle liter).
     Odslania sie tylko prawa krawedz: 100% -> -12% (pelny napis + zapas). */
  from { clip-path: inset(-25% 100% -25% -6%); }
  to   { clip-path: inset(-25% -12% -25% -6%); }
}
.hero__main .hero__tag {
  animation: hero-handwrite 1.7s cubic-bezier(.66, 0, .3, 1) .25s both;
}
@media (prefers-reduced-motion: reduce) {
  .hero__main .hero__tag { animation: none; clip-path: none; }
}

/* ---------- nawigacja slidera na telefonie ---------- */

/*
 * Na telefonie strzalki i kropki staly ciasno obok siebie po lewej.
 * Rozkladamy je na calą szerokosc: strzalka wstecz przy lewej krawedzi,
 * dalej przy prawej, kropki posrodku — palec ma wtedy naturalny zasieg
 * z obu stron ekranu.
 */
@media (max-width: 1040px) {
  .hero__main .hero__nav {
    left: 0;
    right: 0;
    justify-content: space-between;
    gap: 10px;
  }

  /* strzalki przestaja byc para — kazda idzie na swoja krawedz */
  .hero__main .hero__nav .slider__arrows {
    display: contents;
  }

  .hero__main .hero__nav .slider__arrow:first-child { order: 1; }
  .hero__main .hero__nav .slider__dots { order: 2; }
  .hero__main .hero__nav .slider__arrow:last-child { order: 3; }
}

/*
 * Tasma staje w miejscu, gdy kursor jest nad nia.
 *
 * Bez tego trafienie w konkretne logo bylo loteria — cel ucieka spod
 * kursora. Zatrzymujemy przy najechaniu na CALA tasme, nie na pojedynczy
 * kafelek: inaczej ruch wznawialby sie w przerwach miedzy logotypami.
 * :focus-within obsluguje te sama sytuacje przy nawigacji klawiatura.
 */
.hero-tasma:hover .hero-tasma__jazda,
.hero-tasma:focus-within .hero-tasma__jazda {
  animation-play-state: paused;
}



/*
 * Gorny odstep hero.
 *
 * Prototyp odsuwal zawartosc o wysokosc naglowka plus 40 px
 * (calc(var(--hh) + 40px)), bo naglowek jest przezroczysty i lezy NA hero.
 * W redesignie kartka ma juz wlasna kotwice — --paper-top — wiec te dwa
 * odstepy sie sumowaly i miedzy menu a papierem robila sie dziura
 * (116 px + 92 px = 208 px do gornej krawedzi kartki).
 */
/* Tylko strona glowna: hero jest tam jedynym miejscem z ta sekcja, ale
   klasa body pilnuje, zeby regula nie wyciekla na inne szablony. */
body.home .hero__inner,
body.front-page .hero__inner { padding-top: 110px; }

/*
 * Na telefonie odstepu nie ma wcale.
 *
 * Robil pas pustej zieleni miedzy herbem a kartka. Odkad slajdy sa
 * pelnoekranowymi zdjeciami, naglowek ma po prostu leżeć NA zdjeciu —
 * herb wystaje poza pasek i wchodzi na kadr, i tak ma byc.
 */
@media (max-width: 760px) {
  body.home .hero__inner,
  body.front-page .hero__inner { padding-top: 0; }
}