@charset "UTF-8";
/* ==========================================================================
   FK SLOVAN DUSLO ŠAĽA — dizajnový systém
   --------------------------------------------------------------------------
   Jeden súbor, jedna požiadavka na server. Poradie sekcií:

     01  Tokeny (farby, typografia, rozostupy, tiene)
     02  Reset a základná typografia
     03  Layout (container, sekcie, mriežky)
     04  Utility
     05  Tlačidlá, odznaky, pilulky
     06  Hlavička a navigácia
     07  Hero
     08  Zápasové komponenty
     09  Tabuľka a štatistiky
     10  Novinky a články
     11  Tím a hráči
     12  Galéria a lightbox
     13  Partneri
     14  CTA pásy a obsahové bloky
     15  Formuláre a kontakt
     16  Pätička
     17  Pomocné stavy (prázdne dáta, chyby)
     18  Animácie a pohyb

   Farby vychádzajú výhradne z klubového znaku (#0F4985). Odtiene nad a pod
   ním sú odvodené — identita zostáva, mení sa len disciplína jej použitia.
   ========================================================================== */

/*
  Písma sa načítavajú cez <link> v hlavičke dokumentu, nie tu cez @import.
  @import by prehliadač spustil až po stiahnutí a spracovaní tohto súboru,
  čím by vznikol zbytočný ďalší krok pred vykreslením textu.
*/

/* ==========================================================================
   01  TOKENY
   ========================================================================== */

:root {
  /* --- Klubová modrá: #0F4985 je presná farba zo znaku --- */
  --c-brand-950: #04101f;
  --c-brand-900: #061b31;
  --c-brand-850: #082542;
  --c-brand-800: #0a2c50;
  --c-brand-700: #0d3b6b;
  --c-brand-600: #0f4985; /* ZNAK KLUBU — nemeniť */
  --c-brand-500: #1560ae;
  --c-brand-400: #2e86de;
  --c-brand-300: #6fb4ee; /* zodpovedá alternatívnemu svetlomodrému dresu */
  --c-brand-200: #a8d3f5;
  --c-brand-100: #dcebfa;
  --c-brand-50: #f1f7fd;

  /* --- Neutrály --- */
  --c-ink-900: #0b1220;
  --c-ink-800: #16202f;
  --c-ink-700: #2a3546;
  --c-ink-600: #414d60;
  --c-ink-500: #5a6779;
  --c-ink-400: #8a94a3;
  --c-ink-300: #b6bec9;
  --c-ink-200: #dfe4eb;
  --c-ink-100: #eef1f5;
  --c-ink-50: #f7f9fc;
  --c-white: #ffffff;

  /* --- Funkčné (výsledky, stavy) — nie sú súčasťou brandu --- */
  /* Tmavšia zeleň, než je pre výhru zvykom: pôvodná #17945C dávala na
     svetlozelenom štítku kontrast len 3,42:1, čo pre malé písmo nestačí.
     Táto má 4,9:1 a s bielym textom na plnej ploche 5,4:1. */
  --c-win: #0e7a48;
  --c-win-soft: #e4f5ec;
  --c-draw: #7c8798;
  --c-draw-soft: #eef1f5;
  --c-loss: #c5372f;
  --c-loss-soft: #fceceb;
  --c-live: #e0342a;

  /* --- Sémantické priradenia --- */
  --bg: var(--c-white);
  --bg-alt: var(--c-ink-50);
  --bg-brand: var(--c-brand-900);
  --surface: var(--c-white);
  --border: var(--c-ink-200);
  --border-strong: var(--c-ink-300);
  --text: var(--c-ink-900);
  --text-muted: var(--c-ink-500);
  --text-inverse: var(--c-white);
  --text-inverse-muted: rgba(255, 255, 255, 0.68);
  --link: var(--c-brand-600);

  /* --- Typografia --- */
  --font-display: "Fira Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display-1: clamp(2.75rem, 1.4rem + 6vw, 6rem);
  --fs-display-2: clamp(2.25rem, 1.3rem + 4.2vw, 4.25rem);
  --fs-h1: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
  --fs-h2: clamp(1.625rem, 1.1rem + 2.2vw, 2.625rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --fs-h4: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-2xs: 0.75rem;
  /* Spodná hranica veľkosti písma. Nič na webe nesmie byť menšie ako 11 px —
     pod touto hranicou sa text na mobile prakticky nedá prečítať. */
  --fs-3xs: 0.6875rem;

  --tracking-eyebrow: 0.16em;
  --tracking-display: -0.015em;

  /* --- Rozostupy (4 px základ) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --container: 1280px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

  /* --- Zaoblenie --- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* --- Tiene: jemné, viacvrstvové --- */
  --sh-xs: 0 1px 2px rgba(11, 18, 32, 0.06);
  --sh-sm: 0 1px 2px rgba(11, 18, 32, 0.06), 0 2px 6px rgba(11, 18, 32, 0.05);
  --sh-md: 0 2px 4px rgba(11, 18, 32, 0.05), 0 8px 20px rgba(11, 18, 32, 0.08);
  --sh-lg: 0 4px 8px rgba(11, 18, 32, 0.05), 0 18px 40px rgba(11, 18, 32, 0.12);
  --sh-brand: 0 10px 30px rgba(15, 73, 133, 0.28);

  /*
    DVA STUPNE HĹBKY PRE KARTY
    --------------------------
    Karty (novinky, hráči, partneri, albumy, riadky zápasov) predtým ležali
    na stránke úplne naplocho — mali len vlas tieňa. Vedľa zápasovej karty
    v hlavičke, ktorá má vrstvený tieň, to vyzeralo, akoby patrili na iný web.

    Preto rovnaká stavba ako tam, len jemnejšia, lebo podklad je svetlý:
      1. tesný tieň = dotyk s podkladom,
      2. stredný a široký = vzdialenosť od pozadia,
      3. tmavý vlas po spodnej hrane = hrúbka karty.

    `--sh-raised` je pokoj, `--sh-float` je pri prejdení myšou. Používať len
    tieto dva, nie ďalšie jednorazové hodnoty — inak sa hĺbka zase rozíde.
  */
  --sh-raised:
    0 1px 2px rgba(11, 18, 32, 0.07),
    0 4px 10px rgba(11, 18, 32, 0.055),
    0 12px 26px rgba(11, 18, 32, 0.06),
    inset 0 -1px 0 rgba(11, 18, 32, 0.05);
  --sh-float:
    0 2px 4px rgba(11, 18, 32, 0.07),
    0 10px 20px rgba(11, 18, 32, 0.085),
    0 26px 52px rgba(11, 18, 32, 0.13),
    inset 0 -1px 0 rgba(11, 18, 32, 0.05);

  /* --- Pohyb --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 460ms;

  /*
    Výška prilepenej hlavičky. Ide do odsadenia kotiev — inak by nadpis,
    na ktorý odkaz smeruje, skončil schovaný pod ňou.

    Predtým tu bola aj `--topbar-h` pre horný pásik. Pásik je zrušený,
    hlavička má jediný riadok, takže stačí jedna hodnota.
  */
  --header-h: 68px;
  /* Celá výška hlavičky aj s odsadením okolo plávajúceho panela. Počíta sa
     z `--header-h`, takže sa mení spolu s ňou (68 px mobil / 84 px desktop).
     Používajú ju hero sekcie, ktoré sa o túto hodnotu vysúvajú pod hlavičku. */
  --header-total: calc(var(--header-h) + var(--sp-3) * 2);
  --z-header: 100;
  --z-drawer: 120;
  --z-lightbox: 200;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 84px;
  }
}

/* ==========================================================================
   02  RESET A ZÁKLADNÁ TYPOGRAFIA
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Hodnotu ešte spresní main.js podľa skutočne odmeranej výšky hlavičky. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/*
  Zámerne tu NIE JE `overflow-x: hidden`. Skrylo by pretekanie namiesto toho,
  aby sme ho opravili — a obsah by sa potichu orezal. Kontrolu pretekania
  robí skript 06 System/(C) qa_layout.mjs pri každej zmene.
*/

body.is-locked {
  overflow: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.08;
}
h4 {
  font-size: var(--fs-h4);
  line-height: 1.15;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

ul,
ol {
  padding-left: 1.25rem;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 3px solid var(--c-brand-400);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--c-brand-600);
  color: var(--c-white);
}

/* Čísla v tabuľkách, skóre a štatistikách musia byť rovnako široké.
   Trieda `.tnum` tu bola a bola odstránená (30. 8. 2026) — nikde sa
   nepoužívala, `table` a `.score` nižšie stačia. */
table,
.score,
.countdown,
.standings {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 1000;
  padding: 0.7rem 1.2rem;
  background: var(--c-brand-600);
  color: var(--c-white);
  font-weight: 700;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform var(--t-base) var(--ease-out);
  text-decoration: none;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ==========================================================================
   03  LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.section--alt {
  background: var(--bg-alt);
}

.section--brand {
  background: var(--bg-brand);
  color: var(--text-inverse);
}

.section--brand h2,
.section--brand h3 {
  color: var(--text-inverse);
}

/*
  Výnimka: komponenty, ktoré majú vlastný svetlý podklad (karty hráčov,
  novinky, panely). Pravidlo vyššie by im zbielilo nadpis a v bielej karte
  by zostal biely text na bielom — text by úplne zmizol. Prišlo sa na to
  vtedy, keď sekcia A-tím na domovskej stránke dostala tmavé pozadie.
*/
.section--brand :is(.card, .player-card, .person, .age-card, .match-row, .partner-tile) :is(h2, h3, h4) {
  color: var(--text);
}

.section--brand :is(.card, .player-card, .person, .age-card, .match-row) {
  color: var(--text);
}

/* Jemná diagonálna textúra pre tmavé sekcie — hĺbka bez šumu */
.section--brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
      circle at 12% 0%,
      rgba(46, 134, 222, 0.22),
      transparent 55%
    ),
    radial-gradient(circle at 90% 100%, rgba(15, 73, 133, 0.6), transparent 60%);
  pointer-events: none;
}

.section--brand > * {
  position: relative;
}

/* --- Hlavička sekcie: eyebrow + nadpis + odkaz --- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-7);
}

.section-head__text {
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-brand-500);
  margin-bottom: var(--sp-3);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}

.section--brand .eyebrow {
  color: var(--c-brand-300);
}

.section-head p {
  color: var(--text-muted);
  font-size: var(--fs-lead);
  margin-top: var(--sp-3);
}

.section--brand .section-head p {
  color: var(--text-inverse-muted);
}

/* --- Mriežky --- */

.grid {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 640px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* `.grid--4` tu bolo a bolo odstránené (30. 8. 2026) — štvorstĺpcová
   mriežka sa nikde nepoužívala. */
@media (min-width: 960px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--sidebar {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--sp-8);
    align-items: start;
  }
  .grid--sidebar-left {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

/* ==========================================================================
   04  UTILITY
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  line-height: 1.6;
}

.muted {
  color: var(--text-muted);
}

.stack > * + * {
  margin-top: var(--sp-4);
}

.stack-lg > * + * {
  margin-top: var(--sp-6);
}

/* `.text-center`, `.divider` a `.full-bleed-media` tu boli a boli odstránené
   (30. 8. 2026) — na žiadnej z 61 stránok sa nepoužívali. */

/* ==========================================================================
   05  TLAČIDLÁ, ODZNAKY, PILULKY
   ========================================================================== */

.btn {
  --btn-bg: var(--c-brand-600);
  --btn-fg: var(--c-white);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  min-height: 48px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}

/* Svetelný prejazd pri hoveri — energia bez rušenia */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 80%
  );
  transform: translateX(-120%);
  transition: transform var(--t-slow) var(--ease-out);
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translateX(120%);
}

.btn:hover {
  background: var(--c-brand-500);
  box-shadow: var(--sh-brand);
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* `.btn__icon` tu bolo a bolo odstránené (30. 8. 2026) — nikde sa
   nepoužívalo. Ikony v tlačidlách rieši pravidlo `.btn svg` nižšie, ktoré
   platí pre všetky, nie len pre tie s doplnenou triedou. */

/*
  Ikona v tlačidle má pevnú veľkosť.

  Bez tohto pravidla sa roztiahla: `.btn` je flex kontajner a ikony sa
  vykresľujú ako `<svg>` bez atribútov width/height, takže si vzali toľko
  miesta, koľko im flex dal. Na širokom tlačidle to nebolo vidieť, ale na
  mobile — kde sa text v tlačidle zalomí na tri riadky — narástla šípka
  na výšku všetkých troch riadkov a zabrala polovicu tlačidla.

  Najlepšie to bolo vidieť na prepínaní albumov („Liga – Nové Zámky (2)").
  `flex: none` navyše bráni tomu, aby sa ikona pri dlhom texte stlačila.
*/
.btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-brand-600);
  --btn-border: var(--c-brand-600);
}

.btn--ghost:hover {
  background: var(--c-brand-600);
  color: var(--c-white);
}

.btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--c-white);
  --btn-border: rgba(255, 255, 255, 0.45);
}

.btn--on-dark:hover {
  background: var(--c-white);
  color: var(--c-brand-900);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.btn--light {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-brand-900);
}

.btn--light:hover {
  background: var(--c-brand-50);
  color: var(--c-brand-900);
}

.btn--sm {
  padding: 0.6rem 1.1rem;
  min-height: 44px;
  font-size: var(--fs-2xs);
}

.btn--lg {
  padding: 1.05rem 2.1rem;
  min-height: 56px;
  font-size: var(--fs-body);
}

.btn--block {
  width: 100%;
}

/* --- Textový odkaz so šípkou --- */

.link-arrow {
  display: inline-flex;
  align-items: center;
  /* Samostatný odkaz je aj dotykový cieľ — 44 px na výšku podľa WCAG 2.5.8 */
  min-height: 44px;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-brand-600);
  white-space: nowrap;
}

.link-arrow svg {
  width: 1.05em;
  height: 1.05em;
  transition: transform var(--t-base) var(--ease-out);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

.section--brand .link-arrow {
  color: var(--c-brand-300);
}

/* --- Odznaky --- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-xs);
  background: var(--c-brand-100);
  color: var(--c-brand-700);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}

.badge--solid {
  background: var(--c-brand-600);
  color: var(--c-white);
}

.badge--outline {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--text-muted);
}

/* `.badge--on-dark` a `.badge--live` tu boli a boli odstránené (30. 8. 2026).
   Odznak „live" pochádzal z návrhu, kde web ukazoval prebiehajúce zápasy —
   ten sa nerobí, web zámerne neuvádza výsledky ani priebeh (vysvetlené
   v blocks.mjs pri sekcii Zápasy). S ním odišla aj animácia `pulse`. */

/* --- Prepínacie pilulky (filtre) --- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.15rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--c-white);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--t-base) var(--ease-out);
}

.pill:hover {
  border-color: var(--c-brand-400);
  color: var(--c-brand-600);
}

.pill[aria-selected="true"],
.pill.is-active {
  background: var(--c-brand-600);
  border-color: var(--c-brand-600);
  color: var(--c-white);
}

/* ==========================================================================
   06  HLAVIČKA A NAVIGÁCIA
   ========================================================================== */

/*
  HLAVIČKA AKO PLÁVAJÚCI SKLENENÝ PANEL

  Predtým to bol pás cez celú šírku v plnej modrej. Teraz je samotná hlavička
  priehľadná a modrý je až vnútorný panel `.navbar` — zaoblený, priesvitný,
  s rozostrením toho, čo je pod ním.

  Prečo to funguje: hlavička je `sticky`, takže pri rolovaní pod ňou
  prechádza obsah stránky a `backdrop-filter` ho rozostruje. Sklo tak nie je
  len ozdoba, naozaj ukazuje rozmazaný obsah pod sebou.

  Hlavička nemá ŽIADNE pozadie. Modrý pás okolo panela tu chvíľu bol, aby na
  vrchu stránky nevznikol svetlý pruh — ale pri odrolovaní z neho ostala tmavá
  lišta cez celú šírku a panel v nej vyzeral ako nalepený. Preto je preč.

  Aby na vrchu stránky nezostalo prázdno, hero sa vysunie pod hlavičku
  (záporný `margin-top` nižšie) — panel tak pri načítaní leží na fotke
  a pri rolovaní na obsahu stránky.

  Tieň sa presunul z hlavičky na panel — pás už netreba oddeľovať linkou,
  panel sa oddeľuje sám tým, že „letí" nad obsahom.
*/
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: transparent;
  color: var(--c-white);
  padding-block: var(--sp-3);
}

/* Vzhľad panela je nižšie, hneď pri jeho rozložení (.navbar). */

/*
  Horný pásik (.topbar) tu bol a bol odstránený spolu s markupom
  v src/partials/header.html — niesol iba súťaž a sezónu, ktoré stoja
  o kus nižšie v karte zápasu. Hlavička je teraz jednoriadková.

  Sociálne siete z neho prežili v .nav-social nižšie.
*/

.social-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.social-row a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.72);
  transition: background-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.social-row a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-white);
  transform: translateY(-2px);
}

.social-row svg {
  width: 17px;
  height: 17px;
}

/*
  V mobilnom menu sú ikony väčšie. Sedemnásťpixelový glyf v 44 px ploche
  vyzeral ako bodka — v hlavičke to bolo v poriadku, lebo tam išlo o drobný
  doplnok, ale v menu je to jediné miesto, kde sa siete dajú nájsť.

  Dotyková plocha aj tak nikdy neklesne pod 44 px, mení sa len veľkosť značky.
  Vyššia špecifickosť (.drawer .social-row) prebije pravidlo vyššie bez ohľadu
  na poradie v súbore.
*/
.drawer .social-row a {
  width: 48px;
  height: 48px;
}

.drawer .social-row svg {
  width: 26px;
  height: 26px;
}

/* --- Hlavný riadok navigácie --- */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);

  /* Sklenený panel. Zámerne v tom istom pravidle ako rozloženie: keď boli
     vzhľad a rozloženie v dvoch pravidlách vzdialených 70 riadkov, stačilo
     doplniť `background` do toho spodného a sklo ticho zmizlo. */
  border-radius: var(--r-lg);
  padding-inline: var(--sp-4);
  /*
    Krytie 0.9, nie 0.72. Pri nižšej hodnote presvitalo svetlé pozadie
    článkov natoľko, že panel zošedivel a z klubovej modrej ostala bridlica.
    Deväťdesiat percent udrží modrú na svetlom aj tmavom podklade a rozostrenie
    je aj tak vidieť — na fotke v hlavičke aj na obsahu, ktorý pod panelom
    preteká pri rolovaní.
  */
  /*
    `background-color` a `background-image` sú tu ZVLÁŠŤ, nie v skratke
    `background`. Skratka totiž nastaví farbu na `transparent` a ostane len
    prechod — a prechod nie je farba, takže kontrolór kontrastu (aj čítačky)
    vidí prvok ako bez pozadia a počíta biely text na bielej stránke.
    Farba drží modrú, prechod robí lesk.
  */
  background-color: rgba(15, 45, 86, 0.9);
  background-image: linear-gradient(
    180deg,
    rgba(38, 80, 134, 0.5) 0%,
    rgba(6, 25, 48, 0.25) 100%
  );
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 28px rgba(2, 10, 20, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}

/* Po odrolovaní panel „vystúpi" vyššie — hlbší tieň a jasnejší okraj. */
.site-header.is-stuck .navbar {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 16px 40px rgba(2, 10, 20, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Prehliadač bez `backdrop-filter` dostane nepriehľadný panel — inak by bol
   text na priesvitnom podklade zle čitateľný. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar {
    background: linear-gradient(180deg, var(--c-brand-800) 0%, var(--c-brand-900) 100%);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  flex: none;
  padding-block: 0.4rem;
}

.brand img {
  width: 44px;
  height: 44px;
  background: var(--c-white);
  border-radius: 50%;
  padding: 3px;
  flex: none;
  transition: transform var(--t-base) var(--ease-out);
}

@media (min-width: 1024px) {
  .brand img {
    width: 56px;
    height: 56px;
  }
}

.brand:hover img {
  transform: scale(1.05) rotate(-3deg);
}

/* Názov klubu je v hlavičke vidieť aj na mobile. Predtým sa skrýval pod
   480 px, takže na bežnom telefóne (390 px) ostal v hlavičke len znak
   a návštevník sa meno klubu dozvedel až po otvorení menu.

   Aby sa vedľa znaku a tlačidla menu zmestil, je na úzkych displejoch
   menší a v prípade potreby sa zalomí — preto `min-width: 0`. */
.brand__text {
  display: block;
  line-height: 1.05;
  min-width: 0;
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-white);
}

@media (min-width: 1024px) {
  .brand__name {
    font-size: 1.5rem;
  }
}

.brand__tag {
  display: block;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-brand-300);
  margin-top: 2px;
}

/* Úzke telefóny: menší názov a menší znak, nech sa všetko zmestí do jedného
   riadku vedľa tlačidla menu. Podtitul „FK SLOVAN DUSLO" má riedke
   rozpálenie písmen a na 390 px by tlačil názov do zalomenia — preto sa
   tu zúži. */
@media (max-width: 479px) {
  .brand {
    gap: 0.55rem;
    min-width: 0;
  }

  .brand img {
    width: 38px;
    height: 38px;
  }

  .brand__name {
    font-size: 1.02rem;
  }

  .brand__tag {
    letter-spacing: 0.1em;
  }
}

/* --- Desktop menu --- */

.nav {
  display: none;
}

/*
  Vodorovné menu sa zapína až od 1280 px, nie od 1100 px.

  Deväť položiek, znak s názvom klubu a tlačidlo Vstupenky potrebujú okolo
  1200 px vnútornej šírky. Pri 1100 px mal panel len 1009 px, takže tlačidlo
  vytŕčalo mimo neho o 82 px. Pod 1280 px je preto hamburger — v ňom sa všetko
  zmestí bez tlačenia.

  Ak by do menu pribudla ďalšia položka, bod zlomu bude treba zdvihnúť znova,
  alebo položku presunúť do podmenu.
*/
@media (min-width: 1280px) {
  .nav {
    display: block;
    margin-inline-start: auto;
  }
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color var(--t-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.3rem;
  height: 2px;
  background: var(--c-brand-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}

/* Deviata položka v menu (Fanshop) presiahla na notebooku šírku okna
   o 62 px. Namiesto posúvania štyroch bodov zlomu, na ktorých visí výmena
   menu za hamburger, sa v tomto pásme len stiahnu odsadenia — pri deviatich
   položkách to ušetrí dosť a na širokom monitore ostáva menu vzdušné.

   MUSÍ byť až za `.nav__link::after` vyššie: médiové pravidlo nezvyšuje
   špecifickosť, takže keby stálo pred ním, základné `left/right: 0.85rem`
   by ho prebilo a podčiarknutie by nesedelo s odsadením.

   Ak by do menu pribudla desiata položka, toto už nestačí a bude treba
   buď zvýšiť bod zlomu, alebo položku presunúť do podmenu. */
/* Bez hornej hranice: pri 1440 px a viac sa odsadenie vracalo na 0.85rem
   a tlačidlo znova vytŕčalo z panela o 15 px. Kontajner sa totiž zastaví
   na ~1184 px a širšie okno mu už nepomôže. */
@media (min-width: 1280px) {
  .nav__link {
    padding-inline: 0.55rem;
    letter-spacing: 0.05em;
  }

  .nav__link::after {
    left: 0.55rem;
    right: 0.55rem;
  }
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--c-white);
}

.nav__link:hover::after,
.nav__item:focus-within > .nav__link::after {
  transform: scaleX(1);
}

.nav__link[aria-current="page"] {
  color: var(--c-white);
}

.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--c-white);
}

.nav__chevron {
  width: 12px;
  height: 12px;
  opacity: 0.7;
  transition: transform var(--t-base) var(--ease-out);
}

.nav__item:hover .nav__chevron,
.nav__item:focus-within .nav__chevron {
  transform: rotate(180deg);
}

/* --- Rozbaľovacie podmenu --- */

.nav__sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 232px;
  padding: 0.5rem;
  margin: 0;
  list-style: none;
  background: var(--c-white);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    visibility 0s linear var(--t-base);
}

.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out), visibility 0s linear 0s;
}

.nav__sub a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-sm);
  color: var(--c-ink-700);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out), padding-left var(--t-fast) var(--ease-out);
}

.nav__sub a:hover {
  background: var(--c-brand-50);
  color: var(--c-brand-600);
  padding-left: 1.1rem;
}

/* `.nav__sub-head` tu bolo a bolo odstránené (30. 8. 2026) — podmenu
   nemá nadpisy, položky idú rovno za sebou. */

/* --- Akcie vpravo --- */

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

.nav-actions .btn {
  display: none;
}

@media (min-width: 640px) {
  .nav-actions .btn {
    display: inline-flex;
  }
}

/*
  `.nav-social` tu bolo a bolo odstránené spolu s markupom v partials/header.html
  (28. 8. 2026). Nieslo aj zvislú deliacu čiaru pred tlačidlom Vstupenky —
  preto je preč aj tá. Sociálne siete zostali v mobilnom menu a v pätičke.
*/

/* --- Hamburger --- */

.nav-toggle {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.1);
  color: var(--c-white);
  transition: background-color var(--t-fast) var(--ease-out);
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
}

@media (min-width: 1280px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle__box {
  display: block;
  width: 20px;
  height: 14px;
  position: relative;
}

.nav-toggle__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease-out),
    opacity var(--t-fast) var(--ease-out), top var(--t-base) var(--ease-out);
}

.nav-toggle__box span:nth-child(1) {
  top: 0;
}
.nav-toggle__box span:nth-child(2) {
  top: 6px;
}
.nav-toggle__box span:nth-child(3) {
  top: 12px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* --- Mobilná zásuvka --- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--c-brand-900);
  color: var(--c-white);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5%);
  /*
    `visibility` je diskrétna vlastnosť — ak sa uvedie ako bežný prechod,
    prepne sa až v polovici animácie. Prvok by teda ešte 120 ms zostal
    skrytý a fokus by sa naň nedal presunúť. Preto ju prepíname skokovo:
    pri otváraní okamžite, pri zatváraní až po dobehnutí zmiznutia.
  */
  transition: opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    visibility 0s linear var(--t-base);
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out), visibility 0s linear 0s;
}

@media (min-width: 1280px) {
  .drawer {
    display: none;
  }
}

/* V zásuvke je vždy dosť miesta — názov klubu vedľa znaku sa neskrýva */
.drawer .brand__text {
  display: block;
}

/*
  Horný riadok zásuvky dostáva rovnaký sklenený panel ako hlavička. Predtým
  to bol plochý pruh s linkou pod sebou, takže po otvorení menu sa hlavička
  „vrátila" do starého vzhľadu — zaoblený panel zmizol a nahradil ho pás.

  Hodnoty sú zámerne tie isté ako pri `.navbar`; keď sa bude ladiť vzhľad
  panela, musia sa zmeniť na oboch miestach.
*/
.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
  margin-top: var(--sp-3);
  padding-inline: var(--sp-4);
  border-radius: var(--r-lg);
  background-color: rgba(15, 45, 86, 0.9);
  background-image: linear-gradient(
    180deg,
    rgba(38, 80, 134, 0.5) 0%,
    rgba(6, 25, 48, 0.25) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 28px rgba(2, 10, 20, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.drawer__body {
  padding-block: var(--sp-5) var(--sp-8);
  flex: 1;
}

.drawer__nav {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
}

.drawer__nav > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: left;
}

.drawer__link[aria-current="page"] {
  color: var(--c-brand-300);
}

.drawer__link .nav__chevron {
  width: 18px;
  height: 18px;
}

.drawer__link[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

.drawer__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--sp-4);
  display: grid;
  gap: 0.15rem;
}

.drawer__sub[hidden] {
  display: none;
}

.drawer__sub a {
  display: block;
  padding: 0.6rem 0 0.6rem 1rem;
  border-left: 2px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
}

.drawer__sub a:hover {
  color: var(--c-white);
  border-color: var(--c-brand-300);
}

.drawer__actions {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.drawer__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
  color: var(--text-inverse-muted);
}

.drawer__footer a {
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   07  HERO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--c-brand-950);
  color: var(--c-white);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/*
  V hlavičke sa strieda päť fotiek. Ležia na sebe a prelínajú sa cez
  priehľadnosť — nie posunom, ten by pri fotke cez celú šírku pôsobil
  nepokojne a na slabšom telefóne by sa trhal. Priehľadnosť aj mierne
  priblíženie zvláda prehliadač na grafickej karte.

  `pointer-events: none` — pod hlavičkou je odkaz na program aj vstupenky
  a neviditeľná vrstva navrchu by ich prekryla.
*/
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s var(--ease-out);
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/*
  MOBIL — fotka je pás na vrchu, nie pozadie celej hlavičky.
  (Desktop zostáva bez zmeny, celý tento blok platí len do 559 px.)

  PREČO TO BOLO ŠKAREDÉ
  Hlavička nemá pevnú výšku — na telefóne je vysoká podľa obsahu, cca 1180 px.
  Fotka sa v nej ale vykresľovala len 219 px vysoká a pod ňou zostávala
  prázdna tmavá plocha s ostrou hranou uprostred odseku.

  Príčina: medzi `.hero__slide` a `<img>` je `<picture>`, ktoré je inline
  prvok s automatickou výškou. `height: 100%` na obrázku sa tak nemalo
  o čo oprieť a obrázok si vzal svoj prirodzený pomer 16:9 (390 × 219).
  Na desktope to nebolo vidieť, lebo hlavička je zhruba tiež 16:9.

  Roztiahnuť fotku na celých 1180 px by nepomohlo: zdroj má 1024 px na šírku
  a musel by sa zväčšiť na dvojnásobok, takže by bol rozmazaný a videli by sme
  z neho len úzky výrez. Preto dostane pevný pás 300 px — v tej výške sa fotka
  zmenšuje, nie zväčšuje, takže je ostrá — a text začína až pod ním.
*/
@media (max-width: 559px) {
  /*
    HLAVA HRÁČA POD PANELOM (opravené 2026-08-30)

    Fotka sa na mobile zvisle neorezávala vôbec — vidno bolo 0–100 % zdroja.
    Hráčova hlava je v zdroji 7 % od vrchu, čiže na 390 px širokom telefóne
    asi 30 px pod hornou hranou pásu. A tam presne sedí panel s navigáciou,
    ktorý ju prekryl. Nebola to teda chyba orezu, ale prekrytia.

    Zväčšením fotky sa to nedá vyriešiť: pri `object-fit: cover` zostáva
    hlava stále na tých istých 7 % výšky, takže sa pod panel schová znova.
    Nad hlavou v zdroji nič nie je, čím by sa dala posunúť nižšie.

    Preto tá fotka začína až POD panelom. Panel na nej vtedy neleží, ale
    hlavu vidno — to je cena, ktorú za ňu platíme.

    A prečo len tá jedna: posunúť takto všetkých päť sa skúšalo a bolo to
    horšie. Hráči na hero-02 a hero-03 sú v zábere nižšie, takže sa zviezli
    za nadpis. Voľné miesto medzi panelom a nadpisom má asi 70 px a každá
    fotka doň musí trafiť sama — preto `--hero-posun` v site.js.
  */
  .hero__media {
    bottom: auto;
    height: calc(300px + var(--header-total));
  }

  .hero__slide {
    /* 0 = fotka od vrchu (panel leží na nej), 1 = až pod panelom. */
    top: calc(var(--hero-posun, 0) * var(--header-total));

    /* Posunutá fotka by inak začínala ostrým rezom cez celú šírku, preto
       sa prvých 20 px rozplynie do klubovej tmavomodrej — fotka sa
       „vynorí", rovnako ako sa dole rozplýva späť. Pri posune 0 vyjde
       vzdialenosť nula, teda žiadne rozplynutie: fotka tam ide pod panel
       a rozplývať sa nemá čo. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--hero-posun, 0) * 20px));
    mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--hero-posun, 0) * 20px));
  }

  /* Toto je tá oprava: bez nej sa `height: 100%` nižšie nemá o čo oprieť. */
  .hero__slide picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Rám je nižší než pomer fotky, takže sa oreže po stranách, nie zhora.
     Zvislá zložka je preto bezvýznamná — hráč je vodorovne blízko stredu. */
  .hero__media img {
    object-position: center;
  }

  /* Spodná hrana pásu sa rozplynie do klubovej farby, aby neostal ostrý rez.
     Nadpis zámerne zostáva NA fotke — pás je dosť vysoký na to, aby sa pod
     ním fotka stihla rozplynúť, a text tak nepôsobí odtrhnuto od obrázka. */
  .hero__media::after {
    background: linear-gradient(
      180deg,
      rgba(4, 16, 31, 0.34) 0%,
      rgba(4, 16, 31, 0.42) 52%,
      rgba(4, 16, 31, 0.9) 86%,
      var(--c-brand-950) 100%
    );
  }
}

/*
  Zámerne tu NIE JE pomalé priblíženie fotky (efekt „Ken Burns"). Vyzeralo
  dobre, ale zväčšená fotka presahuje šírku okna a kontrola rozloženia ju
  hlásila ako pretekanie na každej šírke obrazovky. Orezanie cez
  `overflow: hidden` na `.hero` síce zabráni posúvaniu stránky, ale prvok
  je naozaj širší než okno a kontrola to — správne — nevie odlíšiť od
  skutočnej chyby. Radšej nemať ozdobu než mať natrvalo červenú kontrolu,
  ktorú všetci naučia ignorovať.
*/

/*
  Kto si vypol animácie, nechce ani prelínanie: fotka sa prepne skokom.
  Striedanie samo o sebe zostáva — nie je to ozdoba, sú to ďalšie fotky klubu.
*/
@media (prefers-reduced-motion: reduce) {
  .hero__slide {
    transition: none;
  }
}

/* Dvojitý prekryv: zvislý pre čitateľnosť textu, vodorovný pre hĺbku */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      180deg,
      rgba(4, 16, 31, 0.86) 0%,
      rgba(4, 16, 31, 0.62) 38%,
      rgba(4, 16, 31, 0.78) 76%,
      rgba(4, 16, 31, 0.96) 100%
    ),
    linear-gradient(90deg, rgba(6, 27, 49, 0.9) 0%, rgba(6, 27, 49, 0.1) 62%);
}

.hero__inner {
  position: relative;
  display: grid;
  gap: var(--sp-8);
  padding-block: clamp(3.5rem, 2rem + 8vw, 7.5rem) clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

/*
  Bez min-width:0 sa grid položka nezmenší pod svoju min-content šírku —
  dlhé tlačidlá alebo názvy tímov by na mobile vytlačili obsah zo stránky.
*/
.hero__inner > * {
  min-width: 0;
}

@media (min-width: 1100px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    align-items: center;
    gap: var(--sp-9);
  }
}

.hero__content {
  width: 100%;
  max-width: 30rem;
}

/*
  .hero__eyebrow a .hero__actions tu boli a boli odstranene spolu s markupom
  v src/pages/index.html — odznak so sutazou aj obe tlacidla duplikovali
  kartu zapasu vedla nich. Podrobne v komentari v index.html.
*/

.hero__title {
  font-size: var(--fs-display-1);
  /* 0.9 bolo prilis tesne: dlzen nad Ý a makcen nad Š z dalsieho riadka
     zasahovali do riadka nad sebou. Slovensky nadpis vo verzalkach potrebuje
     viac miesta nad pismenami nez anglicky. */
  line-height: 0.95;
  color: var(--c-white);
  margin-bottom: var(--sp-5);
}

.hero__title span {
  display: block;
  color: var(--c-brand-300);
}

.hero__text {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.78);
  max-width: 46ch;
  margin-bottom: var(--sp-6);
}

/* Mobil: odsek sedí nižšie, tesne nad deliacou linkou.

   Priestor sa presúva zhora nadol — nad textom sa pridá, pod ním ubudne.
   Text tak nezačína v mieste, kde sa fotka rozplýva do klubovej farby
   (tam bol zle čitateľný), a zároveň nepláva osamotene v prázdnej ploche
   nad faktami.

   Medzeru pod textom tvorí jeho `margin-bottom` PLUS `margin-top` mriežky
   faktov, ktorej horný okraj je tá linka — preto sa upravujú obidve.
   (Zámerne až za pravidlom vyššie — rozhoduje poradie v súbore.) */
@media (max-width: 559px) {
  .hero__text {
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-3);
  }

  .hero__stats {
    margin-top: var(--sp-4);
  }
}


/*
  Od 480 px vyššie sa text tlačidla nikdy neláme — dvojriadkové tlačidlo
  vyzerá ako chyba. Na úzkom mobile lámanie povolíme, inak by pretieklo.
  Kontrolu pretekania robí 06 System/(C) qa_layout.mjs.
*/
@media (min-width: 480px) {
  .btn {
    white-space: nowrap;
  }
}

/* --- Štatistický pás pod hero --- */

.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Pozn.: tretí údaj (MLÁDEŽNÍCKE TÍMY) začína na telefóne nový riadok.
   Nevadí to — údaje v hero sú zarovnané doľava, takže začína presne pod
   „ZALOŽENÝ" a stĺpec drží. Roztiahnutie na celú šírku by tu nič nezmenilo,
   na rozdiel od karty zápasu, ktorá je centrovaná. */

.hero__stat dt {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.2rem;
}

.hero__stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-white);
}

/* --- Page hero (podstránky) --- */

.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--c-brand-900);
  color: var(--c-white);
  overflow: hidden;
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 5rem);
}

/* --------------------------------------------------------------------------
   Hero sekcie pod plávajúcou hlavičkou
   --------------------------------------------------------------------------
   Hlavička nemá pozadie, takže by nad hero zostal svetlý pruh v šírke celej
   stránky. Hero sa preto o výšku hlavičky vysunie nahor (záporný `margin-top`)
   a o tú istú hodnotu si zväčší horné odsadenie, aby text neskončil pod
   panelom. Výsledok: fotka siaha až na vrch stránky a sklo má čo rozostrovať.

   Platí len pre stránky s hero. Články (`_clanok.html`) žiadne nemajú a tam
   hlavička normálne zaberá miesto v toku — preto sa nikde nič neprekrýva.

   MUSÍ byť až za základnými pravidlami `.hero__inner` a `.page-hero` vyššie:
   médiové ani neskoršie pravidlá nezvyšujú špecifickosť, rozhoduje poradie.
   -------------------------------------------------------------------------- */

.hero,
.page-hero {
  margin-top: calc(-1 * var(--header-total));
}

.hero__inner {
  padding-top: calc(clamp(3.5rem, 2rem + 8vw, 7.5rem) + var(--header-total));
}

.page-hero {
  padding-top: calc(clamp(2.75rem, 1.5rem + 5vw, 5rem) + var(--header-total));
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(6, 27, 49, 0.96) 12%,
    rgba(6, 27, 49, 0.55) 100%
  );
}

.page-hero h1 {
  font-size: var(--fs-h1);
  color: var(--c-white);
  max-width: 22ch;
}

.page-hero p {
  margin-top: var(--sp-4);
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--fs-lead);
}

/* --- Omrvinky --- */

.breadcrumb {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.55);
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--c-white);
  text-decoration: underline;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.4rem;
  color: rgba(255, 255, 255, 0.3);
}

.breadcrumb [aria-current="page"] {
  color: var(--c-brand-300);
}

/* ==========================================================================
   08  ZÁPASOVÉ KOMPONENTY
   ========================================================================== */

/* --- Veľká karta najbližšieho zápasu (v hero) --- */

/*
  Karta leží na fotografii, ktorej jas nevieme ovplyvniť. Preto nie je
  „sklenená" v zmysle priesvitná, ale tmavá s rozostrením — text má vždy
  kontrast aspoň 4.5:1 bez ohľadu na to, čo je pod ňou.
*/
/*
  PRIESTOROVÉ VYZNENIE KARTY
  --------------------------
  Karta má pôsobiť, že leží NAD fotkou, nie že je do nej nalepená. Robia
  to tri veci, ktoré spolu čítame ako hĺbku:

    1. dva tiene namiesto jedného — tesný tmavý (kontakt s podkladom)
       a veľký mäkký (vzdialenosť od pozadia),
    2. svetlá linka po hornej hrane a tmavá po spodnej — tak sa na skutočnom
       predmete odrazí svetlo zhora,
    3. jemný spád vo výplni, aby plocha nebola úplne plochá.

  Naklonenie za myšou pridáva JavaScript (modul 12 v main.js). Bez neho
  karta vyzerá presne takto — nič sa nerozbije.

  VRÁTENIE DO PÔVODNÉHO STAVU: zmaž tento blok aj `.fixture-card--tilt`
  nižšie a vráť pôvodné hodnoty:
      background: rgba(5, 20, 38, 0.82);
      box-shadow: 0 24px 60px rgba(2, 10, 20, 0.55);
  a v main.js vypni initFixtureTilt().
*/
.fixture-card {
  position: relative;
  background:
    linear-gradient(160deg, rgba(23, 58, 102, 0.55) 0%, rgba(5, 20, 38, 0) 42%),
    rgba(5, 20, 38, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(2, 10, 20, 0.5),
    0 10px 22px rgba(2, 10, 20, 0.42),
    0 34px 70px rgba(2, 10, 20, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/*
  Naklonenie. `perspective` musí byť na karte, nie na rodičovi — hero má
  vlastný `isolation` a stohovacie kontexty by transformáciu zdeformovali.
  Uhly dopĺňa JavaScript cez premenné --rx a --ry; kým to neurobí, sú nuly
  a karta stojí rovno.
*/
.fixture-card--tilt {
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  will-change: transform;
}

.fixture-card--tilt.is-tilting {
  /* Počas pohybu myši reaguje karta okamžite, inak by „plávala" za kurzorom */
  transition: box-shadow 0.5s var(--ease-out);
  box-shadow:
    0 2px 4px rgba(2, 10, 20, 0.5),
    0 14px 28px rgba(2, 10, 20, 0.45),
    0 46px 90px rgba(2, 10, 20, 0.66),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* Bez pohybu: žiadne naklonenie, len statická hĺbka z tieňov vyššie. */
@media (prefers-reduced-motion: reduce) {
  .fixture-card--tilt {
    transform: none;
    transition: none;
  }
}

.fixture-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0.85rem 1.25rem;
  background: rgba(15, 73, 133, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fixture-card__comp {
  color: var(--c-brand-300);
}

.fixture-card__body {
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.fixture-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
}

.fixture-team {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
  min-width: 0;
}

.fixture-team__crest {
  width: clamp(56px, 12vw, 76px);
  height: clamp(56px, 12vw, 76px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-white);
  padding: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.fixture-team__crest img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Zástupný znak, keď logo súpera nemáme */
.fixture-team__crest--placeholder {
  background: var(--c-white);
  color: var(--c-brand-700);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.fixture-team__name {
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 2.4vw, 1.15rem);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--c-white);
  overflow-wrap: anywhere;
}

.fixture-team__label {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.fixture-vs {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  padding-inline: 0.25rem;
}

.fixture-card__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.fixture-card__meta div {
  min-width: 0;
}

/* Na telefóne sa do riadku zmestia len dva údaje, takže tretí (ŠTADIÓN)
   ostával sám v ľavom stĺpci a riadok pôsobil nakrivo. Pevné dva stĺpce
   a posledný nepárny údaj cez celú šírku — vycentruje sa na os karty
   rovnako ako všetko ostatné nad ním.

   Pravidlo je zámerne viazané na `:last-child:nth-child(odd)`: pri párnom
   počte údajov sa neuplatní a mriežka ostane dvojstĺpcová. */
@media (max-width: 559px) {
  .fixture-card__meta {
    grid-template-columns: repeat(2, 1fr);
  }

  .fixture-card__meta > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.fixture-card__meta dt {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.25rem;
}

.fixture-card__meta dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-white);
  overflow-wrap: anywhere;
}

/* --- Odpočet --- */

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.countdown__unit {
  padding: 0.6rem 0.25rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.countdown__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 4vw, 1.875rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-white);
}

.countdown__label {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Tlačidlá pod sebou — v úzkej karte sa dva vedľa seba lámu do dvoch riadkov */
.fixture-card__cta {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

/* --- Riadok zápasu (zoznam zápasov / výsledkov) --- */

.match-list {
  display: grid;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.match-row {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--c-brand-600);
  border-radius: var(--r-md);
  box-shadow: var(--sh-raised);
  transition: box-shadow var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}

.match-row:hover {
  box-shadow: var(--sh-float);
  transform: translateY(-2px);
}

/*
  Posledný stĺpec má PEVNÚ šírku, nie `auto`.

  S `auto` si ho každý riadok vymeral podľa svojho obsahu: „Štadión Šaľa"
  je širšie než „Vonku", takže sa o ten rozdiel posunul aj stredný stĺpec
  a čas výkopu skákal medzi dvomi polohami podľa toho, či sa hrá doma alebo
  vonku. Pevná šírka drží mriežku vo všetkých riadkoch rovnakú a časy sedia
  pod sebou v jednej línii.
*/
@media (min-width: 760px) {
  .match-row {
    grid-template-columns: 160px minmax(0, 1fr) 8.5rem;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
  }
}

.match-row__when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

@media (min-width: 760px) {
  .match-row__when {
    display: block;
  }

  /* Dátum a súťaž patria na samostatné riadky, inak sa zlejú do jednej vety */
  .match-row__date,
  .match-row__comp {
    display: block;
  }

  .match-row__comp {
    margin-top: 0.15rem;
  }
}

.match-row__date {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.1;
}

.match-row__comp {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.match-row__teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
}

.match-row__team {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  font-weight: 600;
  font-size: var(--fs-sm);
}

.match-row__team:last-child {
  flex-direction: row-reverse;
  text-align: right;
}

.match-row__team img,
.match-row__team .crest-fallback {
  width: 30px;
  height: 30px;
  flex: none;
  object-fit: contain;
}

.crest-fallback {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-ink-100);
  color: var(--c-ink-500);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
}

.match-row__team--home strong,
.match-row__team--away strong {
  font-weight: 800;
  color: var(--c-brand-600);
}

.score {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--c-ink-900);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

/*
  Stĺpec so skóre. Pri zápase rozhodnutom pokutovými kopmi je pod tabuľkou
  so skóre ešte riadok s rozstrelom — bez neho vyzerá pohárový zápas ako
  remíza, hoci sa v ňom postupovalo alebo vypadávalo.

  Rozstrel je zámerne menší a nie v tmavej tabuľke: hlavný je stav zo
  zápasu, rozstrel je vysvetlenie, prečo remíza neplatí.
*/
.score-cell {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
}

.score-pen {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.score--pending {
  background: var(--c-ink-100);
  color: var(--c-ink-500);
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.match-row__end {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: space-between;
}

@media (min-width: 760px) {
  .match-row__end {
    justify-content: flex-end;
  }
}

.match-row__venue {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   MOBIL — zápas sa skladá pod seba, nie vedľa seba
   --------------------------------------------------------------------------
   Na desktope má riadok tri stĺpce: domáci, čas, hostia. Na telefóne sa do
   nich nezmestia názvy klubov — „FK Slovan Duslo Šaľa" sa lámalo na štyri
   riadky, „FK DAC 1904 Dunajská Streda B" tiež, a riadok narástol na vyše
   200 px roztrhaného textu. Znak pritom ostal zvislo v strede toho zlomu,
   takže pôsobil, že pláva.

   Riešenie: pod 760 px sú tímy pod sebou, každý na jednom riadku so znakom
   vľavo, a čas výkopu stojí vpravo cez oba riadky. Názvy sa tak nelámu vôbec
   a riadok je nižší než predtým.

   Blok je až za základnými pravidlami vyššie — médiová otázka nezvyšuje
   špecifickosť, rozhoduje poradie v súbore.
   -------------------------------------------------------------------------- */

@media (max-width: 759px) {
  .match-row__teams {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-2) var(--sp-3);
  }

  /* Domáci hore, hostia pod nimi; čas vpravo cez obidva riadky. */
  .match-row__team--home {
    grid-column: 1;
    grid-row: 1;
  }

  .match-row__team--away {
    grid-column: 1;
    grid-row: 2;
  }

  .match-row__teams .score {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
  }

  /* Hostia majú na desktope znak vpravo a text doprava. Tu čítajú obidva
     tímy rovnako zľava, inak by sa riadky nezarovnali pod seba. */
  .match-row__team:last-child {
    flex-direction: row;
    text-align: left;
  }
}

/*
  Zoznam zápasov s plagátom vedľa. `:has()` — keď plagát chýba, blok sa
  nevykreslí a zoznam ostane cez celú šírku bez prázdneho stĺpca.
*/
.matches-with-poster {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 960px) {
  .matches-with-poster:has(.match-poster) {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }
}

/* --- Plagát k zápasu (grafika zo sociálnych sietí) --- */

.match-poster {
  margin: 0;
  display: grid;
  gap: var(--sp-4);
}

.match-poster__thumb {
  display: block;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-ink-100);
  box-shadow: var(--sh-sm);
  cursor: zoom-in;
  transition: transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}

.match-poster__thumb:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
}

.match-poster__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.match-poster figcaption {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.match-poster figcaption p {
  margin: 0;
}

/* ==========================================================================
   09  TABUĽKA A ŠTATISTIKY
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

.table-wrap:focus-visible {
  outline-offset: 0;
}

.standings {
  min-width: 640px;
  font-size: var(--fs-sm);
}

.standings caption {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.standings thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.75rem 0.5rem;
  background: var(--c-brand-900);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

.standings thead th:first-child {
  padding-left: var(--sp-5);
  text-align: center;
  width: 52px;
}

.standings thead th:nth-child(2) {
  text-align: left;
  min-width: 220px;
}

.standings tbody td {
  padding: 0.7rem 0.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text);
  white-space: nowrap;
}

.standings tbody td:first-child {
  padding-left: var(--sp-5);
  font-weight: 700;
  color: var(--text-muted);
  width: 52px;
}

.standings tbody th {
  padding: 0.7rem 0.5rem;
  border-top: 1px solid var(--border);
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

.standings__club {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.standings__club img,
.standings__club .crest-fallback {
  width: 26px;
  height: 26px;
  flex: none;
}

.standings tbody tr:hover {
  background: var(--c-brand-50);
}

.standings .is-club {
  background: var(--c-brand-100);
  box-shadow: inset 3px 0 0 var(--c-brand-600);
}

.standings .is-club:hover {
  background: var(--c-brand-100);
}

.standings .is-club th {
  font-weight: 800;
  color: var(--c-brand-700);
}

.standings td.is-points {
  font-weight: 800;
  color: var(--c-brand-700);
  padding-right: var(--sp-5);
}

.standings__zone {
  display: inline-block;
  width: 4px;
  height: 22px;
  border-radius: 2px;
  vertical-align: middle;
}

.table-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.table-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.table-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--c-brand-600);
}

.table-scroll-hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

@media (min-width: 760px) {
  .table-scroll-hint {
    display: none;
  }
}

/* Štatistické dlaždice (`.stat-tiles`, `.stat-tile` a ich časti) tu boli
   a boli odstránené (30. 8. 2026) — na webe sa nepoužívali. Fakty o klube
   v hero sekcii majú vlastné štýly (`.hero__stats`). */

/* ==========================================================================
   10  NOVINKY A ČLÁNKY
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-raised);
  transition: transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-float);
  border-color: var(--c-brand-200);
}

.card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--c-ink-100);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}

.card:hover .card__media img {
  transform: scale(1.05);
}

/* Článok, ktorý zatiaľ nemá fotku. Znak na klubovom prechode drží pomer
   3:2 aj výšku karty v mriežke — bez toho by riadok kariet poskakoval.
   Znak sa zámerne nezväčšuje pri hoveri, nie je to fotka. */
.card__media-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--c-brand-700), var(--c-brand-900));
}

.card__media-placeholder img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  opacity: 0.55;
}

.card:hover .card__media-placeholder img {
  transform: none;
}

/* --- Fotogaléria v článku ------------------------------------------------
   Dlaždice sú veľké — na šírke obsahu (820 px) vyjdú dve v rade. Pomer 3:2
   je rovnaký ako pri úvodnom obrázku, takže stránka drží jeden rytmus.

   Fotky z jedného príspevku bývajú raz na výšku, raz na šírku; zjednotí ich
   `object-fit: cover`. Súbor sa pritom neoreže — v lightboxe sa otvorí celý. */
.article-gallery {
  margin-top: var(--sp-8);
}

.article-gallery__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-4);
}

.article-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-gallery__item {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--c-ink-100);
  box-shadow: var(--sh-raised);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.article-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease-out);
}

.article-gallery__item:hover,
.article-gallery__item:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--sh-float);
}

.article-gallery__item:hover img {
  transform: scale(1.04);
}

/* To isté v malom zozname článkov (bočný panel). */
.news-mini__placeholder {
  display: grid;
  place-items: center;
  width: 84px;
  height: 60px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, var(--c-brand-700), var(--c-brand-900));
}

.news-mini__placeholder img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: 0.55;
}

.card__tag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 1;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-3);
  padding: var(--sp-5);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.card__meta time {
  color: var(--c-brand-600);
}

.card__title {
  font-size: var(--fs-h4);
  line-height: 1.12;
}

.card__title a {
  color: var(--text);
  text-decoration: none;
  background-image: linear-gradient(var(--c-brand-600), var(--c-brand-600));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}

.card:hover .card__title a,
.card__title a:hover {
  color: var(--c-brand-600);
  background-size: 100% 2px;
}

/* Celá karta je klikateľná, ale odkaz zostáva sémanticky v nadpise */
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.card {
  position: relative;
}

.card__excerpt {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  flex: 1;
}

.card__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
}

/* --- Hlavná (feature) karta --- */

.card--feature {
  border-radius: var(--r-xl);
}

@media (min-width: 860px) {
  .card--feature {
    flex-direction: row;
    align-items: stretch;
  }
  .card--feature .card__media {
    flex: 0 0 55%;
    aspect-ratio: auto;
  }
  .card--feature .card__body {
    padding: clamp(1.5rem, 3vw, 2.75rem);
    justify-content: center;
  }
  .card--feature .card__title {
    font-size: var(--fs-h2);
  }
  .card--feature .card__excerpt {
    font-size: var(--fs-body);
    flex: none;
  }
}

/* --- Kompaktný riadok noviniek (bočný panel) --- */

.news-mini {
  display: grid;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-mini li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
}

.news-mini img {
  width: 84px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.news-mini h3 {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}

.news-mini a {
  color: var(--text);
  text-decoration: none;
}

.news-mini a:hover {
  color: var(--c-brand-600);
}

.news-mini time {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* --- Telo článku --- */

.article-header {
  margin-bottom: var(--sp-6);
}

.article-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.article-figure {
  margin: 0 0 var(--sp-6);
}

.article-figure img {
  width: 100%;
  border-radius: var(--r-lg);
}

.article-figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--c-ink-700);
}

.prose > * + * {
  margin-top: var(--sp-4);
}

.prose h2 {
  font-size: var(--fs-h3);
  color: var(--text);
  margin-top: var(--sp-7);
}

.prose h3 {
  font-size: var(--fs-h4);
  color: var(--text);
  margin-top: var(--sp-6);
}

.prose ul,
.prose ol {
  padding-left: 1.35rem;
}

.prose li + li {
  margin-top: 0.4rem;
}

.prose strong {
  color: var(--text);
  font-weight: 700;
}

/*
  Dôležité: :not(.btn) — inak by toto pravidlo prebilo farbu textu tlačidla
  (obe majú rovnakú špecificitu, ale toto je v súbore nižšie) a tlačidlo
  vnútri článku by malo modrý text na modrom pozadí.
*/
.prose a:not(.btn):not(.link-arrow) {
  color: var(--c-brand-600);
  font-weight: 500;
}

.prose blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--c-brand-600);
  background: var(--c-brand-50);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-lead);
  color: var(--c-brand-800);
}

.prose blockquote p + p {
  margin-top: var(--sp-3);
}

/* --- Zdieľanie --- */

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.share__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.share > a,
.share > button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all var(--t-fast) var(--ease-out);
}

.share > a:hover,
.share > button:hover {
  background: var(--c-brand-600);
  border-color: var(--c-brand-600);
  color: var(--c-white);
}

.share svg {
  width: 18px;
  height: 18px;
}

.share > button.is-done {
  background: var(--c-win);
  border-color: var(--c-win);
  color: var(--c-white);
}

/* --- Predchádzajúci / nasledujúci článok --- */

.post-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* Stránkovanie (`.pagination`) tu bolo a bolo odstránené (30. 8. 2026).
   Novinky sa na jednu stránku zmestia všetky a albumy majú prepínanie
   predchádzajúci/nasledujúci, takže stránkovať nie je čo. */

/* ==========================================================================
   11  TÍM A HRÁČI
   ========================================================================== */

.squad-group + .squad-group {
  margin-top: var(--sp-8);
}

.squad-group__title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-h3);
  color: var(--text);
}

.squad-group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.squad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-4);
}

/*
  Mriežka pre jedného alebo dvoch ľudí — tréner mládežníckej kategórie.

  Šírka stĺpca zostáva rovnaká ako pri hráčoch, mení sa len šírka mriežky.
  Bez obmedzenia by karta trénera na mobile zabrala celú šírku obrazovky
  (a bola by dvakrát väčšia než karta hráča), na širokej obrazovke naopak
  ostala ako úzky prúžok v mriežke pre 23 ľudí. Takto vyzerá rovnako ako
  ostatné karty a dvaja tréneri (U9) sa vedľa seba stále zmestia.
*/
.squad-grid--few {
  max-width: 460px;
}

.player-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-raised);
  transition: transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}

.player-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-float);
}

.player-card__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, var(--c-brand-700), var(--c-brand-900));
  overflow: hidden;
}

/*
  Karta hráča s odkazom na profil na Futbalnete.

  Odkaz je v HTML len na mene — pre čítačku obrazovky je to jeden zrozumiteľný
  cieľ. Klikateľnou plochou je pritom celá karta: `::after` sa roztiahne cez
  ňu. Preto musí byť karta `position: relative`, inak by sa vrstva roztiahla
  cez celú stránku.
*/
.player-card--link .player-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.player-card--link {
  cursor: pointer;
}

.player-card__name a {
  color: inherit;
  text-decoration: none;
}

.player-card--link:hover .player-card__name {
  color: var(--c-brand-600);
}

.player-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--t-slow) var(--ease-out);
}

.player-card:hover .player-card__photo img {
  transform: scale(1.04);
}

/* Silueta, keď fotku hráča nemáme */
.player-card__silhouette {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.22);
}

.player-card__silhouette svg {
  width: 58%;
  height: auto;
}

/* Štítok novej posily */
.player-card__badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-xs);
  /* brand-600, nie brand-400: svetlejšia modrá dávala s bielym textom
     kontrast len 3,76:1, čo pre takto malé písmo nestačí (treba 4,5:1). */
  background: var(--c-brand-600);
  color: var(--c-white);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Označenie kapitána v rohu fotky */
.player-card__captain {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  background: var(--c-white);
  color: var(--c-brand-700);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.player-card__number {
  position: absolute;
  right: 0.5rem;
  bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.player-card__body {
  padding: var(--sp-4);
  border-top: 3px solid var(--c-brand-600);
}

.player-card__pos {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brand-500);
}

.player-card__name {
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text);
}

.player-card__name small {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/*
  Telefón na karte (tréner mládeže). Číslo je na mobile aktívny odkaz, preto
  má vlastný riadok a dosť veľkú plochu na prst — nie je to len údaj, je to
  to, čo z tejto karty rodič použije.
*/
.player-card__contact {
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.player-card__contact a {
  color: var(--c-brand-600);
  text-decoration: none;
}

.player-card__contact a:hover {
  text-decoration: underline;
}

/*
  Spoločná fotka mládežníckej kategórie. Je to široký záber celého tímu,
  takže dostáva plnú šírku obsahu — na rozdiel od portrétov, ktoré sú
  v úzkych kartách.
*/
.team-photo {
  margin: 0 0 var(--sp-6);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-raised);
  background: var(--surface);
  border: 1px solid var(--border);
}

.team-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.team-photo figcaption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brand-600);
  border-top: 3px solid var(--c-brand-600);
}

/* --- Realizačný tím / vedenie --- */

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-4);
}

.person {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-raised);
  transition: box-shadow var(--t-base) var(--ease-out);
}

.person:hover {
  box-shadow: var(--sh-float);
}

.person__avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--c-brand-100);
  color: var(--c-brand-600);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  overflow: hidden;
}

.person__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person__role {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-brand-500);
}

.person__name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--text);
}

/* `.person__contact` tu bolo a bolo odstránené (30. 8. 2026) — karty ľudí
   uvádzajú meno a funkciu, kontakt na jednotlivcov na webe nie je. */

/* --- Prehľad mládežníckych kategórií --- */

.age-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}

.age-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--sh-raised);
  transition: transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}

.age-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--c-brand-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}

.age-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-float);
  border-color: var(--c-brand-200);
}

.age-card:hover::before {
  transform: scaleX(1);
}

.age-card__code {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-brand-600);
}

.age-card__label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/*
  Meno trénera. Oddelené linkou, aby sa nezlialo s názvom kategórie —
  sú to dve rôzne veci a rodič hľadá práve to druhé.
*/
.age-card__coach {
  display: block;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
}

/* --- Fanshop -------------------------------------------------------------
   Kým klub nedodá fotky, je na mieste obrázka klubový znak na firemnom
   prechode — rovnaké riešenie ako pri článku bez fotky, takže mriežka drží
   tvar a nepôsobí ako chýbajúci súbor. */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
}

.shop-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--sh-raised);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.shop-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-float);
}

.shop-card__media {
  aspect-ratio: 1 / 1;
  background: var(--c-ink-100);
}

.shop-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-card__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--c-brand-700), var(--c-brand-900));
}

.shop-card__placeholder img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  opacity: 0.55;
}

.shop-card__body {
  padding: var(--sp-4);
}

.shop-card__name {
  font-size: var(--fs-base);
  margin: 0;
}

.shop-card__note {
  margin: 0.25rem 0 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.shop-card__price {
  margin: 0.5rem 0 0;
  font-weight: 700;
  color: var(--c-brand-700);
}

.shop-card {
  text-decoration: none;
  color: inherit;
}

/* `.shop-card__perk` a `.product__perk` tu boli a boli odstránené spolu
   so zľavou 20 % (29. 8. 2026) — klub potvrdil, že už neplatí. */

.shop-card__more {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-brand-700);
}


.shop-card__more svg {
  width: 1em;
  height: 1em;
  transition: transform var(--t-fast) var(--ease-out);
}

.shop-card:hover .shop-card__more svg {
  transform: translateX(3px);
}

/* --- Stránka produktu ---------------------------------------------------- */

.product {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 900px) {
  .product {
    grid-template-columns: 420px minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

.product__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-ink-100);
}

.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--c-brand-700), var(--c-brand-900));
}

.product__placeholder img {
  width: 8rem;
  height: 8rem;
  object-fit: contain;
  opacity: 0.55;
}

.product__name {
  margin: 0;
}

.product__note {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.product__price {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--c-brand-700);
}

.product__stock {
  margin: 0.25rem 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* --- Pruh nad ukážkovým obsahom ------------------------------------------
   Zámerne nápadný. Stránky B-tímu a produktov sú postavené dopredu s výplňou
   a tento pruh je jediné, čo bráni tomu, aby si ich niekto pomýlil so
   skutočnosťou. Keď prídu skutočné údaje, zmizne sám (`isDemo` v dátach). */
.demo-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 2px dashed #b45309;
  border-radius: var(--r-md);
  background: #fffbeb;
  color: #7c2d12;
}

.demo-notice strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Celá karta kategórie je odkaz na jej stránku s programom zápasov.
   Odkaz je celý blok, nie len text — na dotyk sa tak trafí kdekoľvek. */
.age-card--link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.age-card--link:hover,
.age-card--link:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--sh-float);
}

/* Názov súťaže — tichší než meno trénera, ale rodič ho na karte hľadá.
   Kategórie bez zápasov (U13B, U8) tento riadok nedostanú. */
.age-card__league {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--fs-2xs);
  line-height: 1.35;
  color: var(--muted);
}

.age-card__more {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-brand-700);
}

.age-card__more svg {
  width: 1em;
  height: 1em;
  transition: transform var(--t-fast) var(--ease-out);
}

.age-card--link:hover .age-card__more svg {
  transform: translateX(3px);
}

/* ==========================================================================
   12  GALÉRIA A LIGHTBOX
   ========================================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
}

@media (min-width: 760px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

.gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-ink-100);
  cursor: zoom-in;
}

/*
  SKELETON — kým sa načíta fotka zo Zoneramy

  Fotky v galérii nie sú na našom serveri, ťahajú sa zo Zoneramy. Album má
  aj 127 fotiek a pri pomalšom pripojení sa mriežka zapĺňala nerovnomerne —
  raz dlaždica, raz diera. Preto má každá dlaždica svetlý podklad s jemným
  prebehnutím a fotka sa do nej zjaví až keď je naozaj načítaná.

  Triedu `is-loaded` pridáva JavaScript (modul 13 v main.js). Bez neho
  ostane fotka viditeľná — pravidlo nižšie ju skryje len vtedy, keď je
  skript naozaj spustený (trieda `js-on` na <html>). Inak by pri vypnutom
  JavaScripte zostala galéria navždy prázdna.
*/
.gallery-item {
  background-image: linear-gradient(
    100deg,
    var(--c-ink-100) 30%,
    rgba(255, 255, 255, 0.75) 50%,
    var(--c-ink-100) 70%
  );
  background-size: 220% 100%;
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}

.gallery-item.is-loaded {
  background-image: none;
  animation: none;
}

@keyframes skeleton-sweep {
  0% { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}

.js-on .gallery-item img {
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}

.js-on .gallery-item.is-loaded img {
  opacity: 1;
}

/* Bez pohybu: podklad zostane, ale neprebieha — blikanie je pri citlivosti
   na pohyb to najnepríjemnejšie. */
@media (prefers-reduced-motion: reduce) {
  .gallery-item {
    animation: none;
    background-image: none;
  }
}

/* --------------------------------------------------------------------------
   Ukazovateľ načítavania stránky
   --------------------------------------------------------------------------
   Tenký pásik na vrchu okna pri prechode na inú stránku. Prvok vyrába
   JavaScript (modul 14), preto tu nie je nič, čo by bez neho zostalo visieť.

   Leží nad hlavičkou, ale pod lightboxom — pri otvorenej fotke by prekážal.
   -------------------------------------------------------------------------- */

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  z-index: calc(var(--z-header) + 1);
  background: linear-gradient(90deg, var(--c-brand-500), var(--c-brand-300));
  box-shadow: 0 0 10px rgba(111, 180, 238, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: width 0.15s linear, opacity 0.2s var(--ease-out);
}

.progress-bar.is-active {
  opacity: 1;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 45%,
    rgba(4, 16, 31, 0.55) 100%
  );
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-item:hover::after,
.gallery-item:focus-visible::after {
  opacity: 1;
}

/*
  Prvá dlaždica je dvakrát väčšia — rozbije jednotvárnu mriežku.
  Počet stĺpcov je tu pevne 4 (nie auto-fill): prvá dlaždica zaberie 2×2
  a zvyšné štyri presne doplnia blok do obdĺžnika bez dier.
*/
@media (min-width: 760px) {
  .gallery-grid--feature {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery-grid--feature .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  /*
    minmax(0, 1fr), nie 1fr — implicitné minimum `auto` by riadok roztiahlo
    na výšku fotografie a snímka na výšku by pretiekla cez ovládacie prvky.
  */
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(4, 16, 31, 0.96);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  /* to isté ako pri .drawer — visibility musí preskočiť, nie interpolovať */
  transition: opacity var(--t-base) var(--ease-out),
    visibility 0s linear var(--t-base);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-base) var(--ease-out), visibility 0s linear 0s;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-sm);
}

.lightbox__stage {
  padding-inline: var(--gutter);
  min-height: 0;
  overflow: hidden;
}

/*
  Fotografia vyplní celú plochu a `object-fit: contain` ju doň vloží celú,
  nech je na výšku alebo na šírku. Spoľahlivejšie než max-height: 100 %,
  ktoré sa v mriežke nie vždy vyhodnotí podľa očakávania.
*/
.lightbox__stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-sm);
}

/*
  Kým sa dosťahuje veľká fotka, na scéne je roztiahnutá miniatúra z mriežky.
  Jemné stmavenie a pulz hovoria „ešte sa načítava" – bez toho by mäkký obraz
  vyzeral ako chyba, nie ako medzikrok. Po dotiahnutí trieda zmizne a fotka
  sa preostrí.
*/
.lightbox.is-loading .lightbox__stage img {
  filter: brightness(0.85);
  animation: lightbox-pulse 1.2s var(--ease-out) infinite;
}

@keyframes lightbox-pulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox.is-loading .lightbox__stage img {
    animation: none;
    opacity: 0.8;
  }
}

.lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter) var(--sp-6);
}

.lightbox button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--c-white);
  transition: background-color var(--t-fast) var(--ease-out);
}

.lightbox button:hover {
  background: rgba(255, 255, 255, 0.22);
}

.lightbox button svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   13  PARTNERI
   ========================================================================== */

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-3);
}

@media (min-width: 760px) {
  .partner-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
}

.partner-tile {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  box-shadow: var(--sh-raised);
  transition: transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}

.partner-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-float);
  border-color: var(--c-brand-200);
}

/* Priestor pre logo. Pevná výška drží dlaždice v riadku rovnaké. */
.partner-tile__logo {
  display: grid;
  place-items: center;
  min-height: 64px;
}

.partner-tile img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  object-fit: contain;
  /*
    Logá sú v odtieňoch sivej a rozsvietia sa až pri prejdení myšou. Rôznorodé
    firemné farby by inak na stránke prekričali klubovú modrú a zo zoznamu
    partnerov by bola zmes, v ktorej sa nedá nič nájsť.
  */
  filter: grayscale(1) contrast(1.15);
  /* 0.88, nie menej: pri svetlejších logách (napr. Glortex) bolo pri nižšej
     hodnote logo takmer neviditeľné. */
  opacity: 0.88;
  transition: filter var(--t-base) var(--ease-out),
    opacity var(--t-base) var(--ease-out);
}

.partner-tile:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/*
  Dlaždica s tmavým podkladom pre partnerov, ktorí majú logo len v bielej
  verzii. Bez toho by bolo logo na svetlej dlaždici neviditeľné.
*/
.partner-tile--dark {
  background: var(--c-brand-900);
  border-color: var(--c-brand-900);
}

.partner-tile--dark img {
  filter: none;
  opacity: 0.92;
}

.partner-tile--dark:hover img {
  opacity: 1;
}

.partner-tile--dark .partner-tile__label {
  color: rgba(255, 255, 255, 0.72);
}

a.partner-tile--dark:hover .partner-tile__label {
  color: var(--c-white);
}

/* Náhrada loga: názov vysadený klubovým písmom */
.partner-tile__mark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-brand-600);
  overflow-wrap: break-word;
}

/* Názov pod logom */
.partner-tile__label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--text-muted);
  overflow-wrap: break-word;
}

/* Keď logo chýba, názov je už v dlaždici veľký — nedvojíme ho */
.partner-tile--nologo .partner-tile__label {
  display: none;
}

a.partner-tile:hover .partner-tile__label {
  color: var(--c-brand-600);
}

/* Úrovne partnerstva: generálni najväčší, reklamní najmenší */
.partner-grid--general {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.partner-grid--general .partner-tile__mark {
  font-size: 1.625rem;
}

.partner-grid--main {
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}

.partner-grid--advertising {
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
}

.partner-grid--advertising .partner-tile__mark {
  font-size: 1rem;
}

.partner-tier + .partner-tier {
  margin-top: var(--sp-8);
}

.partner-tier__title {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h4);
  color: var(--text);
}

.partner-tier__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.partner-tile--empty {
  border-style: dashed;
  border-color: var(--border-strong);
  background: var(--c-ink-50);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
}

.section--brand .partner-tile {
  background: rgba(255, 255, 255, 0.95);
  border-color: transparent;
}

/* ==========================================================================
   14  CTA PÁSY A OBSAHOVÉ BLOKY
   ========================================================================== */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-brand-800);
  color: var(--c-white);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

.cta-band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cta-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(6, 27, 49, 0.95) 20%,
    rgba(15, 73, 133, 0.82) 100%
  );
}

.cta-band__inner {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}

@media (min-width: 860px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-8);
  }
}

.cta-band h2 {
  color: var(--c-white);
  max-width: 20ch;
}

.cta-band p {
  margin-top: var(--sp-3);
  max-width: 54ch;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-lead);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* --- Info panel (bočný) --- */

.panel {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-raised);
}

.panel--brand {
  background: var(--c-brand-900);
  border-color: transparent;
  color: var(--c-white);
}

.panel--brand h3,
.panel--brand .panel__title {
  color: var(--c-white);
}

.panel--brand p {
  color: var(--text-inverse-muted);
}

.panel__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-h4);
}

.panel--brand .panel__title {
  border-color: rgba(255, 255, 255, 0.16);
}

.panel + .panel {
  margin-top: var(--sp-5);
}

/* --- Zoznam faktov --- */

.facts {
  display: grid;
  gap: 0;
  margin: 0;
}

.facts > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--border);
}

.facts > div:last-child {
  border-bottom: 0;
}

.facts dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

/*
  MOBIL — popis a hodnota pod sebou.

  Riadok je inak flex s hodnotou odsadenou doprava. Kým sa oboje zmestí
  vedľa seba, je to v poriadku; keď je hodnota dlhšia (napr. úradné hodiny
  „Pondelok, streda a piatok · 16:30 – 18:30"), zalomí sa pod popis a ostane
  odsadená doprava — popis potom visí sám nad dvomi riadkami zarovnanými
  na opačnú stranu a riadok vyzerá rozbito.

  Zalomenie sa v CSS zistiť nedá, preto sa pod 560 px skladá každý riadok
  pod seba a zarovnáva doľava. Je to o niečo vyššie, ale konzistentné —
  všetky riadky vyzerajú rovnako namiesto toho, aby jeden vyskakoval.
*/
@media (max-width: 559px) {
  .facts > div {
    display: grid;
    gap: 0.15rem;
    justify-items: start;
  }

  .facts dd {
    text-align: left;
  }
}

.panel--brand .facts > div {
  border-color: rgba(255, 255, 255, 0.14);
}

.panel--brand .facts dt {
  color: rgba(255, 255, 255, 0.6);
}

.panel--brand .facts dd {
  color: var(--c-white);
}

/* --- Časová os (história) --- */

.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--sp-6);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--c-brand-600),
    var(--c-brand-200)
  );
}

.timeline li {
  position: relative;
  padding-bottom: var(--sp-6);
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-6) + 2px);
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-white);
  border: 3px solid var(--c-brand-600);
}

.timeline__year {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--c-brand-600);
  line-height: 1;
  margin-bottom: 0.35rem;
}

/* --- Akordeón (FAQ) --- */

.accordion {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}

.accordion__item + .accordion__item {
  border-top: 1px solid var(--border);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  /*
    Tlacidlo je v <h3>, takze by zdedilo nadpisove pismo. Tu to ale nesadne:
    nadpisove pismo je uzke a velmi tucne, co funguje na kratke VERZALKY, nie
    na cele vety pisane malymi pismenami. Otazky su vety — patria do textoveho
    pisma. Nadpis sekcie nad akordeonom nadpisove pismo pouziva dalej.
  */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0;
  transition: background-color var(--t-fast) var(--ease-out);
}

.accordion__trigger:hover {
  background: var(--c-brand-50);
}

.accordion__trigger svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--c-brand-600);
  transition: transform var(--t-base) var(--ease-out);
}

.accordion__trigger[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

.accordion__panel {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--text-muted);
}

.accordion__panel[hidden] {
  display: none;
}

/* ==========================================================================
   15  KONTAKT
   ========================================================================== */

.contact-list {
  display: grid;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list li {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.contact-list__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--c-brand-100);
  color: var(--c-brand-600);
}

.contact-list__icon svg {
  width: 20px;
  height: 20px;
}

.contact-list dt {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-list dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  /* break-word (nie anywhere) — zalomí prednostne na <wbr> za zavináčom,
     nie uprostred názvu domény */
  overflow-wrap: break-word;
}

.contact-list a {
  color: var(--text);
  text-decoration: none;
}

.contact-list a:hover {
  color: var(--c-brand-600);
  text-decoration: underline;
}

/* --- Vložená mapa s polohou štadióna --- */

.map-embed {
  margin: 0;
}

/*
  Pôvodný kód z Google Maps má pevných 600 × 450 px. Na mobile by taká mapa
  pretiekla von z obrazovky, preto sa šírka riadi kontajnerom a výšku určuje
  pomer strán. Na úzkych displejoch je mapa vyššia (4:3), lebo pri 16:9 by
  z nej ostal len úzky pásik.
*/
.map-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  /*
    Strop na výšku. Na stránke Kontakt je mapa cez celú šírku obsahu,
    takže by pri pomere 16:10 vyšla vyše 800 px vysoká a zabrala by celú
    obrazovku. V užšom stĺpci na stránke Štadión sa strop neprejaví.
  */
  max-height: 440px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--c-ink-100);
}

@media (min-width: 640px) {
  .map-embed iframe {
    aspect-ratio: 16 / 10;
  }
}

.map-embed figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.map-embed figcaption a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--c-brand-600);
  font-weight: 600;
  text-decoration: none;
}

.map-embed figcaption a:hover {
  text-decoration: underline;
}

.map-embed figcaption svg {
  width: 15px;
  height: 15px;
}

/* ==========================================================================
   16  PÄTIČKA
   ========================================================================== */

.site-footer {
  background: var(--c-brand-950);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-sm);
}

.footer-top {
  padding-block: var(--sp-9) var(--sp-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid {
  display: grid;
  gap: var(--sp-7);
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: var(--sp-8);
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  text-decoration: none;
}

.footer-brand img {
  width: 56px;
  height: 56px;
  background: var(--c-white);
  border-radius: 50%;
  padding: 4px;
  flex: none;
}

.footer-brand span {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-white);
  line-height: 1.05;
}

.footer-brand small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-brand-300);
  margin-top: 3px;
}

.footer-col h2 {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--c-white);
  margin-bottom: var(--sp-4);
  font-family: var(--font-body);
  font-weight: 800;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out),
    padding-left var(--t-fast) var(--ease-out);
}

.footer-col a:hover {
  color: var(--c-white);
  padding-left: 4px;
}

.footer-contact {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
}

.footer-contact li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.footer-contact svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 4px;
  color: var(--c-brand-300);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--c-white);
  text-decoration: underline;
}

/* --- Späť hore --- */

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-brand-600);
  color: var(--c-white);
  box-shadow: var(--sh-brand);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    visibility 0s linear var(--t-base),
    background-color var(--t-fast) var(--ease-out);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out), visibility 0s linear 0s,
    background-color var(--t-fast) var(--ease-out);
}

.to-top:hover {
  background: var(--c-brand-500);
}

.to-top svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   17  POMOCNÉ STAVY
   ========================================================================== */

/*
  .data-slot — miesto, kam patria reálne klubové dáta.
  Použi vždy, keď komponent existuje, ale obsah zatiaľ nemáme.
  Je zámerne viditeľný, aby sa nedopatrením nedostal do ostrej prevádzky.
*/
.data-slot {
  display: grid;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: repeating-linear-gradient(
    -45deg,
    var(--c-ink-50),
    var(--c-ink-50) 12px,
    var(--c-white) 12px,
    var(--c-white) 24px
  );
  text-align: center;
  color: var(--text-muted);
}

.data-slot__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-ink-600);
}

.data-slot p {
  font-size: var(--fs-sm);
  max-width: 56ch;
  margin-inline: auto;
}

.data-slot code {
  padding: 0.15rem 0.4rem;
  border-radius: var(--r-xs);
  background: var(--c-brand-100);
  color: var(--c-brand-700);
  font-size: 0.8125em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.section--brand .data-slot {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-inverse-muted);
}

.section--brand .data-slot__title {
  color: var(--c-white);
}

.section--brand .data-slot code {
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-brand-200);
}

/*
  Obrysové tlačidlo má na tmavom podklade tmavomodrý text — nečitateľné.
  V tmavých sekciách a paneloch ho preto automaticky preklopíme na biele.
*/
.section--brand .btn--ghost,
.panel--brand .btn--ghost,
.cta-band .btn--ghost {
  --btn-fg: var(--c-white);
  --btn-border: rgba(255, 255, 255, 0.45);
}

.section--brand .btn--ghost:hover,
.panel--brand .btn--ghost:hover,
.cta-band .btn--ghost:hover {
  background: var(--c-white);
  color: var(--c-brand-900);
}

.section--brand .link-arrow:hover,
.panel--brand .link-arrow:hover {
  color: var(--c-white);
}

/* --- Prázdny stav v rámci karty --- */

.empty-note {
  padding: var(--sp-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--c-ink-50);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

/* --- 404 --- */

.error-page {
  display: grid;
  place-items: center;
  min-height: 62svh;
  text-align: center;
  padding-block: var(--sp-9);
}

/*
  Číslo 404 stojí nad nadpisom, nie za ním. Pôvodne sa prekrývali záporným
  okrajom — na mobile však nadpis číslice prakticky prečiarkol, pretože
  výška riadku nadpisu nerastie rovnako ako číslo. Prekryv sa preto
  nepoužíva vôbec: takto vyzerá stránka rovnako zámerne pri každej šírke.
*/
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 16vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--c-brand-100);
  margin-bottom: var(--sp-2);
}

/* ==========================================================================
   18  ANIMÁCIE A POHYB
   ========================================================================== */

/* `@keyframes pulse` tu bolo a bolo odstránené (30. 8. 2026) spolu
   s odznakom `.badge--live`, ktorý ho ako jediný používal.
   Pozor: `lightbox-pulse` nižšie je iná animácia a používa sa. */

/*
  Odhalenie pri scrollovaní. Trieda .reveal sa pridáva iba cez JS
  (v .js-on), takže bez JS je obsah normálne viditeľný.
*/
.js-on .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  will-change: opacity, transform;
}

.js-on .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* `.reveal--delay-1` až `-3` tu boli a boli odstránené (30. 8. 2026).
   Mali postupne oneskoriť vynáranie prvkov v jednom rade, ale nikde sa
   nepoužili — prvky sa odhaľujú naraz, ako do okna vojdú. */

/* Rešpektuj systémové nastavenie: žiadny pohyb navyše */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js-on .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   TLAČ
   ========================================================================== */

@media print {
  .site-header,
  .site-footer,
  .to-top,
  .cta-band,
  .drawer,
  .lightbox {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .card,
  .panel,
  .table-wrap {
    border: 1px solid #999;
    box-shadow: none;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}