/*
 * Strona glowna FantasyBasket.
 *
 * Tokeny sa te same co w apce (`web/src/index.css`) i pochodza z serwisu ligi - zasada
 * z DESIGN.md: **kolory ich, ksztalt nasz**. Czerwien i neutrale sa zmierzone na
 * 1lm.pzkosz.pl, a promienie, typografia i uklad sa nasze.
 *
 * Czemu zwykly HTML, a nie kolejny projekt Vite: to jedna strona bez stanu. React
 * doniosloby tu 200 kB paczki po to, zeby narysowac tekst, ktory sie nie zmienia -
 * a landing ma sie otworzyc na telefonie w polu, gdzie zasieg konczy sie na 3G.
 *
 * Tryb JASNY bez wyjatkow, tak jak w apce.
 */

:root {
  --brand: #e81e04;
  --brand-ciemny: #c41803;
  --brand-tekst: #c41803;
  --brand-mglisty: #fde9e6;

  --tlo: #f0f0f0;
  --powierzchnia: #ffffff;
  --powierzchnia-2: #f0f0f0;
  --obwodka: #e0e0e0;

  --tekst: #212529;
  --tekst-cichy: #666666;
  --na-brandzie: #ffffff;

  --r-przycisk: 999px;
  --r-karta: 28px;
  --r-karta-wewn: 20px;

  --o-xs: 4px;
  --o-s: 8px;
  --o-m: 12px;
  --o-l: 16px;
  --o-xl: 24px;
  --o-2xl: 32px;
  --o-3xl: 40px;

  --cien-karty: 0 2px 8px rgba(0, 0, 0, 0.06);
  --cien-uniesiony: 0 12px 32px rgba(0, 0, 0, 0.1);

  --font-tekst: 'Figtree', system-ui, -apple-system, sans-serif;
  --font-liczby: 'Space Grotesk', ui-monospace, monospace;

  --szerokosc: 1120px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

p {
  margin: 0;
}

a {
  color: var(--brand-tekst);
  text-decoration: none;
}

/* ----------------------------------------------------------------------------------- */
/* Pasek gorny                                                                          */
/* ----------------------------------------------------------------------------------- */

.pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-l);
  max-width: var(--szerokosc);
  margin: 0 auto;
  padding: var(--o-l) var(--o-xl);
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: var(--o-s);
  color: var(--tekst);
}

.sygnet {
  width: 34px;
  height: 34px;
  color: var(--brand);
  flex-shrink: 0;
}

.nazwa {
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -0.02em;
}
.nazwa-akcent {
  color: var(--brand-tekst);
}

.nawigacja {
  display: flex;
  align-items: center;
  gap: var(--o-xl);
}
.nawigacja a {
  color: var(--tekst-cichy);
  font-weight: 600;
}
.nawigacja a:hover {
  color: var(--tekst);
}
.nawigacja .przycisk {
  color: var(--na-brandzie);
}

/* ----------------------------------------------------------------------------------- */
/* Przyciski - pigulki, tak jak w apce                                                  */
/* ----------------------------------------------------------------------------------- */

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--o-s);
  min-height: 52px;
  padding: 0 var(--o-2xl);
  border: 2px solid var(--brand);
  border-radius: var(--r-przycisk);
  background: var(--brand);
  color: var(--na-brandzie);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  transition: background-color 120ms ease, transform 120ms ease;
}
.przycisk:hover {
  background: var(--brand-ciemny);
  border-color: var(--brand-ciemny);
}
.przycisk:active {
  transform: scale(0.985);
}

.przycisk.wtorny {
  background: transparent;
  color: var(--brand-tekst);
}
.przycisk.wtorny:hover {
  background: var(--brand-mglisty);
  border-color: var(--brand);
  color: var(--brand-tekst);
}

.przycisk.maly {
  min-height: 42px;
  padding: 0 var(--o-l);
  font-size: 15px;
}

/* ----------------------------------------------------------------------------------- */
/* Hero                                                                                 */
/* ----------------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--o-3xl);
  align-items: center;
  max-width: var(--szerokosc);
  margin: 0 auto;
  padding: var(--o-3xl) var(--o-xl) var(--o-2xl);
}

.nadtytul {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-tekst);
  margin-bottom: var(--o-l);
}

.hero h1 {
  font-size: clamp(40px, 7vw, 68px);
  font-weight: 900;
}
.hero h1 .akcent {
  color: var(--brand-tekst);
}

.lead {
  margin-top: var(--o-xl);
  font-size: 19px;
  color: var(--tekst-cichy);
  max-width: 46ch;
}

.akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-m);
  margin-top: var(--o-2xl);
}
.akcje.srodek {
  justify-content: center;
  margin-top: var(--o-2xl);
}

.drobne {
  font-size: 14px;
  color: var(--tekst-cichy);
  margin-top: var(--o-l);
}
.bez-marginesu {
  margin-top: 0;
}

/* Kafelek po prawej - dwie karty z apki, zeby od razu bylo widac, o czym mowa. */
.hero-karta {
  display: grid;
  gap: var(--o-l);
}

.karta-mecz {
  background: var(--powierzchnia);
  border: 1.5px solid var(--obwodka);
  border-radius: var(--r-karta);
  box-shadow: var(--cien-uniesiony);
  padding: var(--o-xl);
  display: grid;
  gap: var(--o-m);
}
.karta-mecz.drugi {
  transform: rotate(-1.2deg);
}

.etykieta {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--tekst-cichy);
}

.mecz-druzyny {
  display: flex;
  align-items: center;
  gap: var(--o-m);
  font-weight: 800;
  font-size: 18px;
}
.kontra {
  color: var(--tekst-cichy);
  font-weight: 600;
}

.mecz-typ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-m);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--o-m);
  border-radius: 999px;
  background: var(--brand-mglisty);
  color: var(--brand-tekst);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.liczba {
  font-family: var(--font-liczby);
  font-weight: 700;
  font-size: 26px;
  color: var(--brand-tekst);
}

.pozycje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-s);
}
.pozycje span {
  min-width: 46px;
  text-align: center;
  padding: 6px var(--o-s);
  border-radius: 999px;
  background: var(--powierzchnia-2);
  font-size: 12px;
  font-weight: 800;
}
.pozycje .flex {
  background: var(--brand-mglisty);
  color: var(--brand-tekst);
}

/* ----------------------------------------------------------------------------------- */
/* Sekcje                                                                               */
/* ----------------------------------------------------------------------------------- */

.sekcja {
  max-width: var(--szerokosc);
  margin: 0 auto;
  padding: var(--o-3xl) var(--o-xl);
}

.sekcja h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  margin-bottom: var(--o-2xl);
}

/* Zdanie pod naglowkiem sekcji. Podnosi sie pod h2, bo naglowek ma wlasny duzy dol. */
.podtytul-sekcji {
  max-width: 60ch;
  margin: calc(-1 * var(--o-l)) 0 var(--o-2xl);
  color: var(--tekst-cichy);
}

.siatka-dwie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--o-xl);
}

.karta {
  background: var(--powierzchnia);
  border: 1.5px solid var(--obwodka);
  border-radius: var(--r-karta);
  box-shadow: var(--cien-karty);
  padding: var(--o-2xl);
  display: grid;
  gap: var(--o-m);
  align-content: start;
}

.karta h3 {
  font-size: 27px;
  font-weight: 900;
}

.karta p {
  color: var(--tekst-cichy);
}

/*
 * Pasek statystyk w karcie.
 *
 * Wczesniej byly to trzy szare WIERSZE: liczba po lewej, zdanie po prawej. Czytalo sie
 * to jak lista ustawien, a nie jak liczby - i zjadalo pol karty, bo kazdy wiersz mial
 * wlasne tlo i wlasny padding. Teraz to jeden pasek z trzema kolumnami, rozdzielony
 * kreskami: liczba stoi NAD podpisem, wiec oko lapie same liczby jednym rzutem.
 *
 * Ten sam uklad co szyld na ekranie startowym apki (MIEJSCE | TYPOW | CELNOSC) - kto
 * wejdzie ze strony do apki, widzi ten sam wzor, a nie dwa rozne pomysly na to samo.
 */
.statystyki {
  list-style: none;
  margin: var(--o-l) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--powierzchnia-2);
  border: 1.5px solid var(--obwodka);
  border-radius: var(--r-karta-wewn);
  overflow: hidden;
}
.statystyki li {
  display: grid;
  gap: var(--o-xs);
  align-content: start;
  padding: var(--o-l) var(--o-m);
  text-align: center;
  border-left: 1.5px solid var(--obwodka);
}
.statystyki li:first-child {
  border-left: 0;
}
.statystyki strong {
  font-family: var(--font-liczby);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 30px);
  line-height: 1;
  color: var(--brand-tekst);
}
.statystyki span {
  color: var(--tekst-cichy);
  font-size: 13px;
  line-height: 1.35;
}

/* Ponizej ~380 px trzy kolumny robia z podpisow slupki po jednym slowie. */
@media (max-width: 380px) {
  .statystyki {
    grid-template-columns: 1fr;
  }
  .statystyki li {
    border-left: 0;
    border-top: 1.5px solid var(--obwodka);
  }
  .statystyki li:first-child {
    border-top: 0;
  }
}

/* Kroki */
.kroki {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--o-xl);
}
.kroki li {
  display: flex;
  gap: var(--o-l);
  align-items: flex-start;
}
.numer {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: var(--na-brandzie);
  font-family: var(--font-liczby);
  font-weight: 700;
  font-size: 20px;
}
.kroki h3 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: var(--o-xs);
}
.kroki p {
  color: var(--tekst-cichy);
  font-size: 15px;
}

/* ----------------------------------------------------------------------------------- */
/* Partnerzy - przewijalny tor. Sekcja pokazuje sie dopiero, gdy sa logotypy.            */
/* ----------------------------------------------------------------------------------- */

.partnerzy-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-l);
}
/* Naglowek sekcji ma wlasny duzy dol; tutaj odstep daje juz siatka toru. */
.partnerzy-naglowek h2 {
  margin-bottom: var(--o-xl);
}

/* `display: flex` bije atrybut `hidden` z arkusza przegladarki - bez tej linii strzalki
   wisialyby przy jednym partnerze, mimo ze JS je "chowa". */
.partnerzy-strzalki[hidden] {
  display: none;
}
.partnerzy-strzalki {
  display: flex;
  gap: var(--o-s);
  /* Wyrownanie do linii pisma naglowka, ktory ma wlasny margines dolny. */
  margin-bottom: var(--o-xl);
}
.strzalka {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--obwodka);
  border-radius: var(--r-przycisk);
  background: var(--powierzchnia);
  color: var(--tekst);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.strzalka svg {
  width: 20px;
  height: 20px;
}
.strzalka:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand-tekst);
}
/* Koniec toru gasi strzalke, zamiast ja chowac - znikajacy przycisk przesuwalby drugi. */
.strzalka:disabled {
  color: var(--tekst-cichy);
  opacity: 0.4;
  cursor: default;
}

/*
  Tor stoi przy LEWEJ, tak jak naglowek i wszystkie inne sekcje strony - przy jednym
  partnerze wysrodkowany kafelek pod naglowkiem z lewej wygladal jak zgubiony.
  `width: fit-content` z `max-width: 100%` zostaje: dopoki logotypy sie mieszcza, tor
  jest dokladnie tak szeroki jak one, a gdy urosnie - bierze cala szerokosc i przewija.
*/
.partnerzy-tor {
  display: flex;
  align-items: stretch;
  gap: var(--o-l);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Cien karty wychodzi poza obrys - bez zapasu przycinalby go pojemnik z overflow. */
  padding: var(--o-s) 2px;
}
.partnerzy-tor::-webkit-scrollbar {
  display: none;
}
.partnerzy-tor:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: var(--r-karta-wewn);
}

/*
  Cieniowanie krawedzi mowi, ze lista idzie DALEJ w te strone - wiec gasi sie tylko ta
  strona, po ktorej cos jeszcze zostalo. Staly cien po obu stronach przygaszalby pierwszy
  logotyp partnera juz przy wejsciu na strone, zanim ktokolwiek cokolwiek przewinie.
  Klasy ustawia `partnerzy.js`.
*/
.partnerzy-tor.ma-przewijanie {
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 24px,
    #000 calc(100% - 24px),
    transparent 100%
  );
}
.partnerzy-tor.ma-przewijanie.przy-lewej {
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
.partnerzy-tor.ma-przewijanie.przy-prawej {
  mask-image: linear-gradient(to right, transparent 0, #000 24px);
}
/* Tor mieszczacy sie o wlos - obie krawedzie sa koncem, wiec nie ma czego gasic. */
.partnerzy-tor.ma-przewijanie.przy-lewej.przy-prawej {
  mask-image: none;
}

.partner {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  width: 200px;
  height: 108px;
  padding: var(--o-l);
  background: var(--powierzchnia);
  border: 1.5px solid var(--obwodka);
  border-radius: var(--r-karta-wewn);
  box-shadow: var(--cien-karty);
}
a.partner {
  transition: border-color 0.15s ease, transform 0.15s ease;
}
a.partner:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.partner img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .partnerzy-tor {
    scroll-behavior: auto;
  }
  a.partner:hover {
    transform: none;
  }
}

/* ----------------------------------------------------------------------------------- */
/* Stopka                                                                               */
/* ----------------------------------------------------------------------------------- */

.stopka {
  border-top: 1.5px solid var(--obwodka);
  margin-top: var(--o-2xl);
}
.stopka-tresc {
  display: grid;
  gap: var(--o-xs);
}
.stopka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-l);
  max-width: var(--szerokosc);
  margin: var(--o-2xl) auto 0;
  padding: var(--o-xl);
}
.stopka .drobne {
  margin-top: 0;
}

/* ----------------------------------------------------------------------------------- */
/* Telefon. Projektujemy OD TELEFONU - kibic otwiera to jedna reka.                      */
/* ----------------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: var(--o-xl);
  }
  .hero-karta {
    order: -1;
  }
  .karta-mecz.drugi {
    transform: none;
  }
  .nawigacja a:not(.przycisk) {
    display: none;
  }
  .lead {
    font-size: 17px;
  }
  .akcje .przycisk {
    flex: 1 1 100%;
  }
}