/* =============================================
   FBK Kobra Tatran Hostinné — Hlavní styly
   ============================================= */

/* ── Písmo Barlow Condensed (SIL OFL, fonts/OFL.txt) ──
   Hostované přímo na webu místo Google Fonts: prohlížeč se nemusí
   připojovat ke Googlu (GDPR — IP adresa návštěvníka by odešla
   ještě před souhlasem) a text se vykreslí rychleji. Česká písmena
   jsou v sadě latin-ext, stáhne se jen když je na stránce potřeba. */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Variables ── */
/* Inter — písmo běžného textu (variabilní, jeden soubor na všechny řezy).
   Barlow Condensed zůstává jen pro nadpisy, menu, tlačítka a čísla. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --primary:      #0B50E2;
  --primary-dark: #001C5E;
  --white:        #ffffff;
  /* Texty jsou světlé, ať jsou na tmavém pozadí dobře čitelné.
     Dřívější šedá #8a8a8a splývala s tmavě modrou plochou. */
  --text:         #F2F4F8;
  --text-muted:   #B4BCCC;
  --bg:           #0A0E1A;
  /* Plochy i linky jsou tónované do modra, aby ladily s pozadím --bg.
     Neutrální šedá (#141414 / #2a2a2a) na tmavě modré působila špinavě. */
  --bg-light:     #16213A;   /* zvýraznění plochy (hover) */
  --border:       #1E2940;   /* dělicí linky */
  --card-shadow:  0 4px 24px rgba(0, 0, 0, 0.6);
  --radius:       0;
  --transition:   0.2s ease;

  /* Písmo webu. Proměnná zůstává, ať jde případná výměna udělat na jednom
     místě místo ve dvaceti pravidlech. */
  --font-display: 'Barlow Condensed', sans-serif;
  /* Běžný text — nekondenzovaný, ať se dobře čte i na mobilu. */
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --card-bg:      #111A2E;   /* karta s obsahem */
  --card-accent:  2px solid var(--primary);   /* horní linka karty */
  --cta:          #FAB94A;
  --primary-deep: #001C5E;
  --primary-hover:#5B8FF5;

  /* Mezera mezi dlaždicemi článků na úvodní stránce.
     Používá se zároveň jako gap i jako odsazení od okrajů,
     aby byly mezery všude stejné. */
  --tile-gap:     4px;
}

/* ── Reset & Base ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Nadpisy: Barlow Condensed, tučně, VELKÝMI písmeny — sportovní charakter. */
h1, h2, h3, h4, h5, h6,
.section-title, .contact-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Section titles ── */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--text);
  margin-bottom: 28px;
  position: relative;
  padding-bottom: 12px;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 52px; height: 4px;
  background: var(--primary);
  border-radius: 0;
}

/* =========================================
   TOPBAR (social strip above header)
   ========================================= */

.site-header-wrap {
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: visible;
  transition: top 0.28s ease;
}

/* Po odrolování dolů (js/main.js přidá .is-compact) tmavá lišta se sítěmi
   vyjede nad okraj okna a zůstane jen modrý pruh s menu. Posouvá se `top`,
   ne `transform` — transform by rozbil celoobrazovkové mobilní menu
   (position: fixed uvnitř by se vztahovalo k liště, ne k oknu). */
.site-header-wrap.is-compact { top: -36px; }

.topbar {
  background: var(--primary-deep);
  height: 36px;
}

.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 0;
  margin-right: -10px;   /* ikona lícuje s okrajem, i když je plocha kolem ní větší */
}

.social-link {
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;            /* klikací plocha — na mobilu se do 17px ikony špatně trefuje */
  height: 36px;
  line-height: 1;
  transition: color var(--transition);
}
.social-link:hover { color: var(--cta); }
.social-link svg { width: 17px; height: 17px; display: block; }

/* =========================================
   HEADER & NAVIGATION
   ========================================= */

/* Pozor: cílíme jen na hlavičku webu.
   Holý selektor `header` by obarvil i <header> uvnitř článku. */
.site-header-wrap > header {
  background: var(--primary);
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 16px rgba(11, 80, 226, 0.35);
  overflow: visible;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 36px;
  height: 72px;
}

/* Logo */
/* Šířka loga je pevná, aby se menu vedle něj při zmenšení neposouvalo. */
.logo { flex: 0 0 90px; }
.logo a {
  display: flex;
  align-items: flex-start;
}
.logo img {
  height: 88px;
  width: auto;
  margin-top: -26px;
  position: relative;
  z-index: 10;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  transition: height 0.28s ease, margin-top 0.28s ease;
}
/* Kompaktní lišta: logo se vejde celé do modrého pruhu (72 px) */
.site-header-wrap.is-compact .logo img {
  height: 58px;
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .site-header-wrap,
  .logo img,
  .nav-list,
  .nav-list.open,
  body::after { transition: none; }
}

/* Nav list */
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link, .nav-trigger {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
  padding: 8px 14px;
  border-radius: var(--radius);
  transition: background var(--transition);
  cursor: pointer;
  display: block;
  white-space: nowrap;
  user-select: none;
}

/* Žlutá linka vyjede zespodu — stejný akcent jako u štítku kategorie */
.nav-link::after, .nav-trigger::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 3px;
  background: var(--cta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}
.nav-link:hover, .nav-trigger:hover,
.has-dropdown:hover > .nav-trigger,
.has-dropdown:hover > .nav-link {
  background: rgba(255, 255, 255, 0.15);
}
.nav-link:hover::after,
.nav-trigger:hover::before,
.has-dropdown:hover > .nav-trigger::before,
.has-dropdown:hover > .nav-link::after {
  transform: scaleX(1);
}

/* ── Dropdown arrow on nav triggers ── */
.has-dropdown > .nav-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.has-dropdown > .nav-trigger::after {
  content: '›';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform: rotate(0deg);
  opacity: 0.55;
  flex-shrink: 0;
}
.has-dropdown:hover > .nav-trigger::after,
.has-dropdown.mobile-open > .nav-trigger::after {
  transform: rotate(90deg);
  opacity: 1;
  color: var(--cta);
}

/* ── Dropdown ── */
.has-dropdown { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--card-bg);
  min-width: 195px;
  border-radius: 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 2000;
  border-top: 3px solid var(--cta);
  overflow: visible;
}

.has-dropdown:hover > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  position: relative;
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  color: var(--text);
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cta);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.18s ease;
}
.dropdown-item:hover {
  background: rgba(11, 80, 226, 0.12);
  color: var(--primary-hover);
  padding-left: 24px;
}
.dropdown-item:hover::before { transform: scaleY(1); }

/* Rozbalovací menu zůstává v Barlow Condensed (jako dřív) — Inter je
   jen pro běžný text, menu ho dědilo z body. */
.dropdown, .submenu { font-family: var(--font-display); }

/* ── Multi-level (Mládež) ── */
.has-submenu {
  position: relative;
}

.has-submenu > .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.has-submenu > .dropdown-item::after {
  content: '›';
  font-size: 16px;
  opacity: 0.5;
  transition: opacity var(--transition);
}
.has-submenu:hover > .dropdown-item::after { opacity: 1; }

.submenu {
  position: absolute;
  top: -3px;
  left: 100%;
  background: var(--card-bg);
  min-width: 190px;
  border-radius: 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 2001;
  border-top: 3px solid var(--cta);
}

.has-submenu:hover > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* ── Ovládání klávesnicí ──
   Nadpisy rozbalovacích nabídek jsou tlačítka (dají se vybrat Tabem).
   Nabídka se otevře najetím myší i tím, že se do ní dostane fokus;
   Escape ji zavře (třída is-dismissed z js/main.js). */
button.nav-trigger,
button.dropdown-item {
  margin: 0;
  background: none;
  border: 0;
  font-family: var(--font-display);
  text-align: left;
  cursor: pointer;
}
button.dropdown-item { width: 100%; border-bottom: 1px solid var(--border); }
.has-dropdown:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.has-dropdown:focus-within > .nav-trigger { background: rgba(255, 255, 255, 0.15); }
.has-dropdown:focus-within > .nav-trigger::after { transform: rotate(90deg); opacity: 1; color: var(--cta); }
.has-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.has-dropdown.is-dismissed > .dropdown,
.has-submenu.is-dismissed > .submenu { opacity: 0; visibility: hidden; }

/* ── CF logo in header ── */
.cf-logo-link {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}
.cf-logo-link img {
  height: 38px;
  width: auto;
  max-width: 120px;
  display: block;
  pointer-events: none;
}

/* Hamburger (mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  min-width: 44px;        /* doporučená velikost dotykové plochy */
  min-height: 44px;
  margin-right: -9px;     /* čárky zůstanou zarovnané s okrajem obsahu */
}
.hamburger { position: relative; z-index: 2; }
.hamburger span {
  display: block;
  width: 26px; height: 2px;
  background: var(--white);
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* =========================================
   MAIN CONTENT
   ========================================= */

main { padding: 0; flex: 1; }

/* ── Articles Section — full-viewport gallery ── */
.articles-section {
  height: calc(100vh - 36px - 72px); /* topbar + header */
  overflow: hidden;
  /* Černé pozadí prosvítá mezerami mezi dlaždicemi a tvoří jejich rámeček.
     Dřív tudy prosvítalo --bg (#0A0E1A), které působilo šedomodře. */
  background: #000;
  padding: var(--tile-gap);
}

.articles-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: var(--tile-gap);
  align-items: stretch;
  height: 100%;
}

.articles-secondary {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--tile-gap);
}

/* ── Overlay Article Cards ── */
/* Vyšší specificita je tu záměr: .article-card je v souboru níž a se
   stejnou specificitou by přebila border i box-shadow zpátky na šedý
   rámeček. Překryvné dlaždice žádný rámeček mít nemají. */
.article-card.article-card--overlay {
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow: none;
  background: #000;
}

.article-overlay-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.article-img-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.article-img-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.article-img-bg .article-img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.article-card--overlay:hover .article-img-bg img,
.article-card--overlay:hover .article-img-bg .article-img-placeholder {
  transform: scale(1.05);
}

.article-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.85) 25%,
    rgba(0, 0, 0, 0.55) 50%,
    rgba(0, 0, 0, 0.25) 75%,
    rgba(0, 0, 0, 0.10) 100%
  );
}

/* Štítek kategorie — průhledný, sedí přímo nad nadpisem dlaždice.
   Dřív byl modrý se zlatým proužkem v rohu fotky, daleko od nadpisu,
   a s modrou hlavičkou splýval. */
.article-category-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 3px 9px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.article-main .article-category-badge { font-size: 12px; padding: 4px 11px; }

.article-overlay-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article-overlay-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  margin: 0;
}
/* Velikost textu kopíruje poměr dlaždic. Mřížka je 1.65fr : 1fr, takže
   hlavní dlaždice je o 65 % širší — nadpis proto 1.75rem ku 1.1rem
   (poměr 1,59). Dřív byly texty skoro stejné a hierarchie se ztrácela. */
.article-main .article-overlay-title  { font-size: 1.75rem; }
.article-small .article-overlay-title { font-size: 1.1rem; }

/* Perex na kartě — dva řádky, zbytek se ořízne */
.article-overlay-perex {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Perex neškáluje plným poměrem — běžný text má čitelnostní strop,
   proto odmocnina z poměru (≈1,28). */
.article-main  .article-overlay-perex { font-size: 15px; -webkit-line-clamp: 3; }
.article-small .article-overlay-perex { font-size: 12.5px; -webkit-line-clamp: 2; }

/* Datum, odkaz i vnitřní odsazení byly u obou dlaždic shodné, takže hlavní
   dlaždice působila jako zvětšená malá. Škálují teď taky. */
.article-main .article-overlay-date { font-size: 14px; }
.article-main .read-more-overlay    { font-size: 15px; }
.article-main .article-overlay      { padding: 28px; }

/* Na nízkých oknech by perex vytlačil titulek — radši ho schovat */
/* Jen na desktopu, kde mřížka drží výšku 100vh a perex by vytlačil titulek.
   Na mobilu se karty skládají pod sebe a místo mají. */
@media (max-height: 620px) and (min-width: 769px) {
  .article-small .article-overlay-perex { display: none; }
}

.article-overlay-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.article-overlay-date {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.read-more-overlay {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: gap var(--transition);
}
.article-card--overlay:hover .read-more-overlay { gap: 9px; }

/* ── Article Card (base) ── */
.article-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
  border: 0;
  border-top: var(--card-accent);
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.13);
}
.article-card.article-card--overlay:hover {
  transform: none;
  box-shadow: none;
}

.article-img-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0B50E2 0%, #001C5E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-img-placeholder svg { opacity: 0.2; }

/* Small article */
.article-small {
  display: flex;
  flex-direction: column;
}

/* ── Náborová výzva (render_recruit_cta) ──
   Poskládaná z prvků, které web už používá: nadpis sekce s modrou linkou,
   karta jako u kontaktního formuláře a obrysové tlačítko „Další články“. */
.recruit-cta {
  padding: 56px 0;
  border-top: 1px solid var(--border);
}
.recruit-cta__box {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
  flex-wrap: wrap;
  background: var(--card-bg);
  border: 0;
  border-top: var(--card-accent);
  padding: 28px 32px 32px;
}
.recruit-cta__text { flex: 1 1 380px; min-width: 0; max-width: 640px; }
.recruit-cta .section-title { margin-bottom: 20px; }
.recruit-cta__text p { color: var(--text-muted); line-height: 1.8; }
.recruit-cta__actions {
  display: flex;
  align-items: center;
  gap: 16px 28px;
  flex-wrap: wrap;
}
.recruit-cta .btn-more { white-space: nowrap; }
.recruit-cta__link {
  color: var(--primary-hover);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.recruit-cta__link:hover { border-bottom-color: currentColor; }
@media (max-width: 768px) {
  .recruit-cta { padding: 40px 0; }
  .recruit-cta__box { flex-direction: column; align-items: flex-start; padding: 22px 20px 24px; }
  .recruit-cta__text { flex: none; }
}

/* ── More Articles Button ── */
.more-articles-wrap {
  text-align: center;
  padding: 52px 24px;
}

.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  /* Sytá --primary má na tmavém pozadí kontrast jen 2,99:1 (norma chce 4,5:1).
     Světlejší odstín dává 6,14:1 a zůstává ve stejné modré rodině.
     Rámeček může být sytý — u plochy se kontrast neposuzuje jako u textu. */
  color: var(--primary-hover);
  border: 2px solid var(--primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 32px;
  border-radius: 0;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn-more:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}

/* =========================================
   PARTNERS SECTION
   ========================================= */

.partners-section {
  background: var(--bg);
  padding: 52px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Nadpis bez výjimky — stejně jako nadpisy sekcí jinde na webu,
   tedy vlevo a s pruhem u levého okraje. */
.partners-section .section-title {
  margin-bottom: 32px;
}

/* Loga stojí staticky vlevo a přetečou do dalšího řádku.
   Dřív to byl posouvající se pás (.partners-ticker + js/ticker.js). */
/* Odstup mezi logy musí být větší než nejužší logo, jinak se řada čte
   jako jeden slepený blok. Nejmenší logo (znak města) je 71 px široké,
   proto 72 px. Loga zůstávají zarovnaná vlevo jako zbytek webu. */
.partners-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 32px 72px;
}

.partners-row__logo {
  display: flex;
  align-items: center;
}

/* Loga jsou v plné barvě — žádné ztmavení ani odbarvení.
   Hover je proto jen jemné nadzvednutí, které funguje u loga
   jakékoliv barvy, na rozdíl od rozjasnění.

   Pevná výška + strop na šířku: všechna tři loga se do 240 px vejdou
   (nejširší je Pepperl+Fuchs, 390×140 → při 84 px na výšku 234 px),
   takže strop se neuplatní a loga vycházejí stejně vysoká. */
.partners-row__logo img {
  height: 84px;
  max-width: 240px;
  width: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
}
.partners-row__logo:hover img,
.partners-row__logo:focus-visible img {
  transform: translateY(-4px);
}

/* Komu vadí pohyb, ten dostane statické logo. */
@media (prefers-reduced-motion: reduce) {
  .partners-row__logo img { transition: none; }
  .partners-row__logo:hover img,
  .partners-row__logo:focus-visible img { transform: none; }
}

/* Rozpis tréninků — dny jako sloupce vedle sebe (záhlaví s bílým
   názvem a modrou linkou), pod nimi karty jednotlivých tréninků.
   Sloupců je tolik, kolik je tréninkových dnů (--days nastaví PHP), každý
   nejvýš 220 px — pět dnů se vejde do jedné řady a tým s jedním
   tréninkem nedostane jeden roztažený sloupec přes celou šířku.
   Karta je vysoká jen podle obsahu — dřív se všechny dny natahovaly
   podle nejdelšího a pátek padal sám na další řádek. */
.hall-schedule {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--days, 5), minmax(0, 220px));
  gap: 24px 10px;
  align-items: start;
}
.hall-day__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--white);
  padding: 0 2px 8px;
  border-bottom: var(--card-accent);
  margin-bottom: 8px;
}
.hall-day__slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hall-slot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card-bg);
  padding: 10px 14px 12px;
}
.hall-slot__time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--primary-hover);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hall-slot__cat {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.hall-slot__cat:hover { color: var(--text); }

/* Tablet a úzký obsah vedle rozcestníku: nejvýš tři dny v řadě */
@media (max-width: 1023px) {
  .hall-schedule { grid-template-columns: repeat(min(var(--days, 3), 3), minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .partners-section { padding: 36px 0; }
  /* Na telefonu mřížka dvou sloupců: každé logo má stejně velkou dlaždici,
     takže řada působí uspořádaně bez ohledu na tvar log. Lichý poslední
     partner se roztáhne přes celou šířku, ať nezůstane díra. */
  .partners-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .partners-row__logo {
    justify-content: center;
    height: 104px;
    padding: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .partners-row__logo:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .partners-row__logo picture { display: contents; }
  .partners-row__logo img {
    height: auto;
    max-height: 64px;
    max-width: 100%;
  }
  .partners-row__logo:hover img,
  .partners-row__logo:focus-visible img { transform: none; }
  /* Na telefonu dva dny vedle sebe — vejde se čas i název týmu */
  .hall-schedule { grid-template-columns: repeat(min(var(--days, 2), 2), minmax(0, 1fr)); gap: 20px 8px; }
  .hall-slot { padding: 9px 12px 10px; }
}

/* =========================================
   FOOTER
   ========================================= */

/* Jen patička webu — ne <footer> uvnitř článku. */
.site-footer {
  background: var(--primary);
  color: var(--white);
  padding: 44px 0 28px;
}

/* Tři sloupce; na užším okně se složí pod sebe. */
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px 48px;
  padding-bottom: 28px;
}
.footer-col-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
  opacity: 0.7;
}
.footer-col address { font-style: normal; }
.footer-col p,
.footer-nav li {
  font-size: 14px;
  line-height: 1.9;
  opacity: 0.9;
}
.footer-nav { list-style: none; margin: 0; padding: 0; }

.footer-col a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.footer-col a:hover { border-bottom-color: currentColor; }
/* Odkaz na cizí web — malá šipka šikmo vzhůru za textem */
.ext-link { display: inline-flex; align-items: center; gap: 4px; }
.ext-link .ext-icon { flex-shrink: 0; opacity: 0.7; transition: transform var(--transition), opacity var(--transition); }
.ext-link:hover .ext-icon { opacity: 1; transform: translate(1px, -1px); }

/* Spodní proužek — copyright vlevo, právní odkazy vpravo. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 13px;
}
.footer-bottom a,
.footer-bottom .footer-linklike {
  color: var(--white);
  opacity: 0.8;
  transition: opacity var(--transition);
}
.footer-bottom a:hover,
.footer-bottom .footer-linklike:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 768px) {
  .footer-cols { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

.footer-copy {
  margin-bottom: 4px;
}
.footer-copy span {
  opacity: 0.65;
  margin-right: 6px;
}

/* =========================================
   ARTICLES LISTING (clanky.html)
   ========================================= */

/* =========================================
   ARTICLE SHARE BAR
   ========================================= */
.article-share {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  margin: 36px 0 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.article-share-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  flex-shrink: 0;
}
.article-share-btns {
  display: flex;
  gap: 8px;
  align-items: center;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-light);
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.share-btn[hidden]              { display: none; }
.share-btn:hover                { transform: translateY(-3px); }
.share-btn--copy:hover          { background: var(--primary); color: #fff; border-color: var(--primary); }
.share-btn--mail:hover          { background: #555;     color: #fff; border-color: #555; }
.share-btn--facebook:hover      { background: #1877F2;  color: #fff; border-color: #1877F2; }
.share-btn--whatsapp:hover      { background: #25D366;  color: #fff; border-color: #25D366; }
.share-btn--messenger:hover     { background: #0084FF;  color: #fff; border-color: #0084FF; }
.share-btn--x:hover             { background: #000;     color: #fff; border-color: #000; }
.share-copied-toast {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  white-space: nowrap;
}
.share-copied-toast.visible { opacity: 1; }

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .cf-logo-link { display: none; }

  .header-inner {
    justify-content: space-between;
    gap: 0;
  }

  /* ── Hlavička na telefonu: jen logo a hamburger ──
     Tmavá lišta se sítěmi se neukazuje (odkazy jsou v patičce) a hlavička
     je rovnou v kompaktní podobě, jakou má na počítači po odrolování.
     Při rolování se tak už nic nemění a nic neposkakuje. */
  .topbar { display: none; }
  .site-header-wrap.is-compact { top: 0; }
  .logo img,
  .site-header-wrap.is-compact .logo img { height: 58px; margin-top: 0; }

  /* ── Menu vyjíždí zpoza hlavičky ──
     Hlavička na telefonu netvoří vlastní vrstvu (z-index: auto), takže
     menu se záporným z-indexem leží pod jejím modrým pruhem, ale pořád
     nad stránkou (celá .site-header-wrap má z-index 1000). Při otevření
     se menu vysune dolů zpod pruhu, logo a hamburger zůstávají na místě. */
  .site-header-wrap > header { z-index: auto; }
  .nav-list {
    position: fixed;
    top: 72px; left: 0; right: 0;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    background: var(--primary);
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 12px;
    gap: 0;
    z-index: -1;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.32s;
  }
  .nav-list.open {
    transform: none;
    visibility: visible;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
  }
  /* Stránka pod otevřeným menu ztmavne; klepnutí na ni menu zavře (js/main.js) */
  body::after {
    content: '';
    position: fixed;
    inset: 72px 0 0 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  body.menu-open::after { opacity: 1; pointer-events: auto; }


  /* ── Top-level nav items ── */
  .nav-list > li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav-list > li:last-child { border-bottom: none; }
  button.nav-trigger { width: 100%; }   /* tlačítko se samo neroztáhne jako span */
  .nav-link, .nav-trigger {
    width: 100%;
    border-radius: 0;
    padding: 17px 24px;
    font-size: 16px;
    letter-spacing: 0.5px;
    white-space: normal;
  }
  /* Ve vysunutém menu dává smysl svislý pruh vlevo,
     ne linka pod textem jako na desktopu. */
  .nav-link::after, .nav-trigger::before {
    left: 0; right: auto; top: 0; bottom: 0;
    width: 3px; height: auto;
    transform: scaleY(0);
    transform-origin: center top;
    transition: transform 0.2s ease;
  }
  .nav-link:hover::after,
  .nav-trigger:hover::before,
  .has-dropdown:hover > .nav-trigger::before,
  .has-dropdown:hover > .nav-link::after,
  .has-dropdown.mobile-open > .nav-trigger::before {
    transform: scaleY(1);
  }

  .nav-link:hover, .nav-trigger:hover,
  .has-dropdown:hover > .nav-trigger,
  .has-dropdown:hover > .nav-link {
    background: rgba(255, 255, 255, 0.08);
  }
  .has-dropdown.mobile-open > .nav-trigger,
  .has-dropdown.mobile-open > .nav-link {
    background: rgba(0, 0, 0, 0.15);
  }

  /* ── Dropdown (first level sub-items) ── */
  .dropdown {
    position: static;
    box-shadow: none;
    border-radius: 0;
    border-top: none;
    border-left: none;
    background: rgba(0, 0, 0, 0.2);
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    margin-left: 0;
  }
  .has-dropdown.mobile-open > .dropdown { display: block; }
  .dropdown-item {
    padding: 13px 20px 13px 44px;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    white-space: normal;
  }
  .dropdown-item:last-child { border-bottom: none; }
  .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: white;
    padding-left: 44px;
  }

  /* ── Sub-submenu (Mládež → kategorie → položky) ── */
  .has-submenu > .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    font-style: italic;
    font-size: 14px;
    padding: 13px 20px 13px 44px;
    cursor: pointer;
  }
  .has-submenu > .dropdown-item::after {
    content: '›';
    font-size: 16px;
    font-style: normal;
    opacity: 0.5;
    transition: transform 0.2s, opacity 0.2s;
    flex-shrink: 0;
  }
  .has-submenu.mobile-open > .dropdown-item::after {
    transform: rotate(90deg);
    opacity: 1;
  }
  .submenu {
    position: static;
    border-radius: 0;
    box-shadow: none;
    border-top: none;
    border-left: none;
    background: rgba(0, 0, 0, 0.18);
    display: none;
    margin-left: 0;
    opacity: 1; visibility: visible; transform: none;
  }
  .has-submenu.mobile-open > .submenu { display: block; }
  .submenu .dropdown-item {
    padding: 11px 20px 11px 60px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
  }
  .submenu .dropdown-item:hover {
    padding-left: 60px;
    color: rgba(255, 255, 255, 0.95);
  }

  /* Na telefonu se z dlaždicové mozaiky stanou tři karty pod sebou,
     nejnovější nahoře. Mezera 12 px místo desktopových 3 px — na malé
     obrazovce by se karty jinak slily v jeden blok. */
  .articles-section {
    --tile-gap: 12px;          /* na malé obrazovce ať karty dýchají */
    height: auto;
    padding: var(--tile-gap);
  }
  .articles-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(260px, auto);
    height: auto;
  }
  .articles-secondary {
    grid-template-rows: none;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(260px, auto);
    min-height: 0;
  }
  .article-card--overlay.article-main,
  .article-card--overlay.article-small { min-height: 260px; }

  /* Karty jsou teď stejně široké, takže i text může mít stejnou velikost */
  .article-small .article-overlay-title { font-size: 1.3rem; }
  .article-main  .article-overlay-title { font-size: 1.4rem; }
  .article-small .article-overlay-perex,
  .article-main  .article-overlay-perex {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }
  .article-overlay { padding: 16px; }
  /* Stejná specificita jako desktopové pravidlo, jinak by se neuplatnilo. */
  .article-main .article-overlay      { padding: 16px; }
  .article-main .article-overlay-date { font-size: 13px; }
  .article-main .read-more-overlay    { font-size: 14px; }

  /* Prázdná zástupná dlaždice nemá na mobilu co dělat */
  .article-card--placeholder { display: none; }
}

/* =========================================
   CONTACT PAGE
   ========================================= */

/* Jen svislé odsazení. Zkrácený zápis "padding: 48px 0 80px" by přebil
   i boční 24 px z .container (obě třídy jsou na stejném prvku) a obsah
   by začínal o 24 px vlevo od nadpisů a drobečkové navigace.
   Horních 48 px je sjednocených napříč sekcí Klub. */
.contact-page-wrap {
  padding-top: 48px;
  padding-bottom: 80px;
}

/* Person card */
.contact-person-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--card-bg);
  border: 0;
  border-top: var(--card-accent);
  /* Web je jinak hranatý (--radius: 0), zaoblení 12px tu vybočovalo. */
  border-radius: 0;
  padding: 18px 20px;
  /* Půlka šířky — mřížka pod ní má gap 40px, takže sloupec je
     (100% - 40px) / 2. Karta tak lícuje s formulářem pod sebou. */
  max-width: calc(50% - 20px);
  margin-bottom: 40px;
}
/* Iniciály vedle jména a funkce; kontakty pak začínají u levého okraje
   karty, ne odsazené pod jménem. */
.contact-person-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact-person-avatar {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--primary);
  color: #000;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-person-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text);
  margin-bottom: 2px;
}
.contact-person-role {
  font-size: 13px;
  color: var(--primary-hover);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.contact-person-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.contact-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--transition);
}
.contact-detail-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.6;
}
a.contact-detail-link:hover { color: var(--primary); }

/* 2-column grid */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  /* Obě karty se roztáhnou na stejnou výšku, aby spodní hrany lícovaly. */
  align-items: stretch;
}

/* Mapa má stejnou kartu jako formulář — rámeček, pozadí i odsazení. */
.contact-map-wrap {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 0;
  border-top: var(--card-accent);
  padding: 20px 22px;
}
.contact-map {
  flex: 1;
  height: auto;
  min-height: 300px;
}
/* Formulář v rámečku. Přes celou šířku stránky působil roztaženě a pole
   byla nepříjemně dlouhá; box mu dá hranici a drží ho u levého kraje.
   Na stránce Kontakty je sloupec mřížky užší než strop, takže se neuplatní. */
.contact-form-wrap {
  background: var(--card-bg);
  border: 0;
  border-top: var(--card-accent);
  padding: 20px 22px;
  max-width: 560px;
}

.contact-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 20px;
}

/* Form */
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.cform-group { display: flex; flex-direction: column; gap: 6px; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform-label { font-size: 14px; font-weight: 500; color: #b8c0d0; }
.cform-req { color: var(--cta); }
/* Past na roboty v kontaktním formuláři — mimo obrazovku, ne display:none
   (některé roboty skryté pole přeskočí, schované mimo obraz vyplní). */
.cform-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Pole jsou hranatá jako zbytek webu. Aktivní pole dostane modrý
   rámeček a proužek vlevo. */
.cform-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid #5F6F95;   /* 3,5:1 ke kartě, 3,9:1 k poli — norma pro ovládací prvky chce 3:1 */
  border-radius: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  padding: 10px 14px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cform-input:hover { border-color: #7383A8; }
.cform-input:focus { border-color: var(--primary-hover); box-shadow: inset 3px 0 0 var(--primary-hover); }
.cform-textarea { resize: vertical; min-height: 130px; }
.cform-msg {
  font-size: 13px;
  border-radius: 0;
  padding: 8px 12px;
  display: none;
}
.cform-msg.show { display: block; }
.cform-msg--error {
  color: #fca5a5;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.3);
}
.cform-msg--success {
  color: #6ee7b7;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.3);
}
.cform-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: #ffffff;
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 22px;
  cursor: pointer;
  transition: background var(--transition), gap var(--transition);
}
.cform-submit:hover { background: #1D5FF0; gap: 12px; }
.cform-submit:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
.cform-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* Map */
.contact-map {
  border-radius: 0;
  overflow: hidden;
  /* Rámeček má karta kolem; mapa jen jemnou linku, ať se neslévá s pozadím. */
  border: 1px solid var(--border);
  background: var(--bg);
}
/* Mapa až po kliknutí (render_map v inc/components.php) */
.map-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(11, 80, 226, 0.18), transparent 65%),
    var(--bg);
}
.map-consent.is-loaded { display: block; background: var(--bg); }
.map-consent.is-loaded iframe { display: block; width: 100%; height: 100%; min-height: inherit; border: 0; }
.map-consent__inner { padding: 24px; max-width: 320px; }
.map-consent__pin { width: 34px; height: 34px; color: var(--cta); margin: 0 auto 8px; display: block; }
.map-consent__addr { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text); margin-bottom: 14px; }
.map-consent__btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  padding: 10px 22px;
  background: var(--primary);
  color: var(--white);
  border: 1px solid var(--primary);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.map-consent__btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.map-consent__note { font-size: 12.5px; color: var(--text-muted); margin: 12px 0 8px; line-height: 1.5; }
.map-consent__link { font-size: 13px; color: var(--primary-hover); }
.map-consent__link:hover { text-decoration: underline; }

.contact-map-address {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  /* Sedí mezi nadpisem a mapou, odstup proto dolů. */
  margin: -8px 0 12px;
}

/* ── Hala: kontakt vedle mapy ──
   Levý sloupec byl krátký a vedle 380px vysoké mapy "plaval" v prázdnu.
   Oba sloupce teď mají stejnou stavbu (nadpis + blok) a stejnou výšku,
   takže nadpisy i spodní hrany lícují. */
.contact-grid--hall { align-items: stretch; }

.hall-col { display: flex; flex-direction: column; }

.hall-contact-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Obsahu je míň než mapy vedle. Vycentrovaný svisle působí líp,
     než když se tlačítko odsune dolů a uprostřed zůstane díra. */
  justify-content: center;
  background: var(--card-bg);
  border: 0;
  border-top: var(--card-accent);
  padding: 26px 28px;
}
.hall-contact-card .contact-detail-list { margin-bottom: 0; }
.hall-card-link { margin-top: 24px; align-self: flex-start; }

.contact-grid--hall .contact-map { flex: 1; height: auto; min-height: 360px; }

@media (max-width: 900px) {
  .contact-grid--hall .contact-map { min-height: 300px; }
  /* Na jednom sloupci zabere karta plnou šířku. */
  .contact-person-card { max-width: none; margin-bottom: 28px; }
  .hall-contact-card { padding: 20px 22px; }
}

/* Responsive */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cform-row { grid-template-columns: 1fr; }
  .contact-person-card { padding: 16px; }
  .contact-person-details { flex-direction: column; gap: 8px; }
  .contact-page-wrap { padding-left: 8px; padding-right: 8px; }
}

/* =========================================
   SSR PŘEPIS — nové komponenty
   (server-side render, čisté URL, SEO)
   ========================================= */

/* Přístupnost */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--primary);
  color: var(--white);
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary-hover);
  outline-offset: 2px;
}

/* Užší sloupec pro čtení — kotvený VLEVO, ne vycentrovaný.
   Kontejner si drží plnou šířku, takže levá hrana lícuje se zbytkem webu;
   omezí se jen obsah, a tím pravý konec. Dřív se zužoval celý box a ten se
   znovu vycentroval, takže obsah uskočil o 200 px oproti nadpisu stránky. */
.container--narrow > * { max-width: 820px; }

/* Vycentrovaný sloupec — vědomá výjimka pro chybovou stránku. */
.container--center { max-width: 800px; }

/* Drobečková navigace */
.breadcrumbs {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.breadcrumbs li { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.breadcrumbs li + li::before { content: "/"; opacity: 0.4; }
.breadcrumbs a { color: var(--text-muted); transition: color var(--transition); }
.breadcrumbs a:hover { color: var(--primary-hover); }
.breadcrumbs [aria-current="page"] { color: var(--text); font-weight: 500; }

/* Hlavička podstránky */
.page-header {
  padding: 44px 0 28px;
  border-bottom: 1px solid var(--border);
}
.page-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.5px;
}
.page-lead {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 62ch;
}

.team-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.team-chip {
  display: inline-block;
  padding: 9px 18px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.4px;
  transition: all var(--transition);
}
.team-chip:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.team-chip--sm { padding: 5px 12px; font-size: 13px; }

/* Homepage — o klubu */
.home-about { padding: 56px 0; border-top: 1px solid var(--border); }
.home-about p { max-width: 68ch; margin-bottom: 14px; color: var(--text-muted); line-height: 1.8; }

.home-about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 22px;
}
.home-about-links a {
  color: var(--primary-hover);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.home-about-links a:hover { border-bottom-color: currentColor; }

/* Sekce na stránkách týmů */
.team-section { padding: 40px 0; border-bottom: 1px solid var(--border); }
.team-section:last-child { border-bottom: 0; }
/* Ročníky v úvodu stránky týmu */
.team-section .team-intro__age {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 14px;
}
/* Globální reset nuluje okraje všemu, takže bez tohohle se odstavce
   slévaly do jednoho bloku textu. */
/* Odstavce se drží čitelné šířky a lícují s levým krajem kontejneru,
   stejně jako nadpisy stránek nebo loga partnerů. */
.team-section p { color: var(--text-muted); line-height: 1.8; max-width: 68ch; margin-bottom: 18px; }
.team-section p:last-child { margin-bottom: 0; }

.team-section-note { margin-top: 16px; font-size: 14px; }

/* Odběr tréninků do kalendáře */
.cal-sub {
  margin-top: 28px;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
}
.cal-sub__head { display: flex; gap: 14px; align-items: flex-start; }
.cal-sub__icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 80, 226, 0.18);
  color: var(--primary-hover);
}
.cal-sub__icon svg { width: 22px; height: 22px; }
.cal-sub__title { font-size: 1.15rem; font-weight: 700; color: var(--white); margin: 0 0 4px; }
.cal-sub__text { font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 0; }
.cal-sub__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cal-sub__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.cal-sub__btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.cal-sub__btn--ghost { background: transparent; border-color: var(--border); color: var(--text); }
.cal-sub__btn--ghost:hover { background: var(--bg-light); border-color: var(--text-muted); color: #fff; }
.cal-sub__btn:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
.cal-sub__note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 600px) {
  .cal-sub { padding: 16px; }
  .cal-sub__btns { display: grid; grid-template-columns: 1fr 1fr; }
}
.team-section-note a { color: var(--primary-hover); }

/* Tabulky (tréninky, soupiska) */
.table-wrap {
  background: var(--card-bg);
  border: 0;
  border-top: var(--card-accent);
  overflow-x: auto;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table thead th {
  padding: 13px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.data-table tbody th,
.data-table tbody td {
  padding: 13px 16px;
  text-align: left;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.data-table td { color: var(--text-muted); }
.data-table a { color: var(--primary-hover); }
.roster-table .col-number {
  width: 68px;
  font-weight: 700;
  color: var(--primary-hover);
  font-variant-numeric: tabular-nums;
}
.roster-table .col-year { width: 90px; font-variant-numeric: tabular-nums; }

/* Trenéři */
.coach-grid,
.coach-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  list-style: none;
}
.coach-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* Kompaktní řádek — u týmu, soupisky a tréninků */
.coach-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--card-bg);
  border: 0;
  border-top: var(--card-accent);
}

/* Vystředěná karta — přehled trenérů (/klub/treneri/).
   Mřížka karty roztáhne na stejnou výšku, uvnitř se vše centruje
   a jméno i role sedí na stejné lince napříč kartami. */
.coach-card {
  display: grid;
  grid-template-rows: auto 1fr;   /* fotka + zbytek → karty mají stejnou výšku */
  justify-items: center;
  text-align: center;
  gap: 14px;
  padding: 26px 20px 22px;
  background: var(--card-bg);
  border: 0;
  border-top: var(--card-accent);
  transition: background var(--transition), border-top-color var(--transition);
}
.coach-card:hover { background: var(--bg-light); border-top-color: var(--cta); }
.coach-card .coach-photo { width: 76px; height: 76px; }
.coach-card .coach-photo--initials { font-size: 24px; }
.coach-card .coach-meta {
  align-items: center;
  justify-content: center;       /* svislé vystředění ve zbylém prostoru */
  text-align: center;
  gap: 7px;
  width: 100%;
}
.coach-card .coach-name { font-size: 17px; }
.coach-card .coach-role { font-size: 13.5px; }
.coach-card .coach-cats { justify-content: center; margin-top: 2px; }
.coach-photo {
  width: 56px; height: 56px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--border);
}
.coach-photo img { width: 100%; height: 100%; object-fit: cover; }
.coach-photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
}
.coach-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.coach-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.coach-name { font-weight: 600; font-size: 16px; }
.coach-role { color: var(--text-muted); font-size: 13px; }
.coach-phone { color: var(--primary-hover); font-size: 14px; }

/* Partneři — výpis */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  list-style: none;
  padding: 40px 0;
}
.partner-card {
  display: flex;
  background: var(--card-bg);
  border: 0;
  border-top: var(--card-accent);
  transition: background var(--transition), border-top-color var(--transition);
}
.partner-card:hover { background: var(--bg-light); border-top-color: var(--cta); }

/* Dva řádky: logo dostane veškerý zbylý prostor a centruje se v něm,
   název sedí dole — díky tomu jsou názvy na stejné lince i u log
   různých proporcí. */
.partner-link {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 20px 20px;
  text-align: center;
}
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 84px;
}
.partner-logo picture { display: contents; }
.partner-logo img {
  max-height: 72px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.partner-name {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Výpis článků */
/* Horních 48 px sjednoceno se zbytkem sekce Klub. */
.articles-list-section { padding: 48px 0 40px; }
.article-img-fallback { background: linear-gradient(135deg, var(--primary), var(--primary-deep)); }
.article-card--placeholder { background: var(--bg-light); }

/* Prázdný stav */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px 20px;
  background: var(--card-bg);
  border: 0;
  border-top: var(--card-accent);
  color: var(--text-muted);
}
.empty-state svg { color: var(--border); }

/* Historie */
.history-section { padding: 48px 0 80px; }
.history-founded {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 30px;
  background: var(--card-bg);
  border-left: 4px solid var(--primary);
  margin-bottom: 44px;
}
.history-year {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--primary-hover);
  line-height: 1;
  flex-shrink: 0;
}
.history-founded-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.history-founded-sub { color: var(--text-muted); font-size: 0.95rem; }
.history-timeline { list-style: none; display: flex; flex-direction: column; gap: 26px; }
.history-timeline li {
  position: relative;
  padding-left: 28px;
  line-height: 1.85;
  color: var(--text-muted);
}
.history-timeline li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary);
}
.history-date { font-weight: 700; color: var(--primary-hover); margin-right: 6px; }
.history-timeline strong { color: var(--text); }
.history-thanks {
  margin-top: 44px;
  padding: 26px 30px;
  background: var(--card-bg);
  border-left: 4px solid var(--border);
  color: var(--text-muted);
  line-height: 1.8;
  font-style: italic;
}
.history-thanks strong { color: var(--text); font-style: normal; }

/* Kontakty — seznam údajů */
.contact-detail-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 28px;
  font-style: normal;
}
address, .contact-person-details { font-style: normal; }

/* 404 */
.error-section { padding: 80px 0 100px; text-align: center; }
.error-code {
  font-size: 5rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 8px;
}
.error-section h1 { font-size: 1.9rem; font-weight: 700; margin-bottom: 12px; }
.error-section .team-chips { justify-content: center; }

/* Reakce na vypnuté animace */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 768px) {
  .history-founded { flex-direction: column; align-items: flex-start; gap: 12px; }
  .history-year { font-size: 2.6rem; }
  /* Karty trenérů se vejdou dvě vedle sebe. Kompaktní řádky
     (.coach-list) zůstávají pod sebou — mají fotku vedle textu
     a ve dvou sloupcích by se nedaly přečíst. */
  .coach-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .coach-list { grid-template-columns: 1fr; }
  .page-header { padding: 32px 0 22px; }
  .data-table { font-size: 14px; }
  .data-table thead th, .data-table tbody th, .data-table tbody td { padding: 11px 12px; }
}

/* =========================================
   VÝPIS ČLÁNKŮ — kompaktní řádky
   ========================================= */

.articles-count {
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.4px;
  margin-bottom: 18px;
}

.articles-rows {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.article-row { background: var(--bg); }

.article-row__link {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 18px 14px 14px;
  background: var(--card-bg);
  transition: background var(--transition);
}
.article-row__link:hover { background: var(--bg-light); }

.article-row__media {
  position: relative;
  display: block;
  width: 132px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-light);
}
.article-row__media img,
.article-row__media picture {
  width: 100%;
  height: 100%;
  display: block;
}
.article-row__media img { object-fit: cover; transition: transform var(--transition); }
.article-row__link:hover .article-row__media img { transform: scale(1.04); }
.article-row__fallback {
  display: block;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
}

.article-row__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.article-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.article-row__cat {
  color: var(--primary-hover);
  font-weight: 600;
}
.article-row__cat::after { content: "·"; margin-left: 8px; opacity: 0.5; }

.article-row__title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}
.article-row__link:hover .article-row__title { color: var(--primary-hover); }

.article-row__perex {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-row__arrow {
  color: var(--text-muted);
  display: flex;
  transition: transform var(--transition), color var(--transition);
}
.article-row__link:hover .article-row__arrow {
  color: var(--primary-hover);
  transform: translateX(3px);
}

/* ── Stránkování ── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.pagination__step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  background: var(--bg-light);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: all var(--transition);
}
.pagination__step:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
}
.pagination__step--off {
  opacity: 0.35;
  pointer-events: none;
}

.pagination__pages {
  display: flex;
  align-items: center;
  gap: 5px;
  list-style: none;
}

.pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  transition: all var(--transition);
}
.pagination__page:hover { border-color: var(--primary); color: var(--text); }
.pagination__page--current {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.pagination__gap { color: var(--text-muted); padding: 0 2px; }

/* Patička — přihlášení pro trenéry */

/* =========================================
   DETAIL ČLÁNKU
   ========================================= */

/* Detail článku: text i fotka na jedné čitelné šířce, zarovnané vlevo. */
/* Článek stojí na počítači uprostřed stránky (zbytek webu je zarovnaný
   vlevo — tohle je jediná vědomá výjimka). Text uvnitř zůstává vlevo. */
.container.container--article > * { max-width: 760px; margin-left: auto; margin-right: auto; }

.article-detail { padding: 48px 0 24px; }

.article-detail-header { margin-bottom: 32px; }

.article-detail-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.article-detail-kicker a {
  color: var(--primary-hover);
  font-weight: 600;
  transition: color var(--transition);
}
.article-detail-kicker a:hover { text-decoration: underline; }
.article-detail-sep { opacity: 0.45; }

.article-detail-header h1 {
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.3px;
  margin-bottom: 18px;
}

/* Upoutávka (perex) se od textu liší barvou: světle modrá v barvách
   klubu, text článku pod ní je bílý. Písmo zůstává stejně silné. */
.article-detail-perex {
  font-size: 1.16rem;
  line-height: 1.7;
  font-weight: 400;
  color: #A8C2FF;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Fotka — přesah přes šířku textu, aby článek dýchal */
.article-detail-image {
  margin: 0 0 34px;
  width: 100%;
}

.article-zoom {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--bg-light);
  cursor: zoom-in;
  overflow: hidden;
  line-height: 0;
}
.article-zoom img,
.article-zoom picture { display: block; width: 100%; height: auto; }
.article-zoom img { transition: transform 0.35s ease; }
.article-zoom:hover img { transform: scale(1.02); }

.article-zoom__hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  opacity: 0;
  transition: opacity var(--transition);
  backdrop-filter: blur(2px);
}
.article-zoom__hint svg { width: 17px; height: 17px; }
.article-zoom:hover .article-zoom__hint,
.article-zoom:focus-visible .article-zoom__hint { opacity: 1; }

.article-detail-body p {
  margin-bottom: 20px;
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--text);
}
.article-detail-body strong { color: var(--white); font-weight: 700; }

.article-detail-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--transition), gap var(--transition);
}
.article-back:hover { color: var(--primary-hover); gap: 11px; }

/* Navazující sekce pod hlavním obsahem — oddělená čárou a s odstupem,
   aby nadpis nelepil na předchozí blok. */
.related-articles,
.related-links { padding: 44px 0 60px; border-top: 1px solid var(--border); }

/* Tlačítko pod výpisem aktualit (přehled kategorie) jinak lepí na poslední
   řádek seznamu. Týká se jen /tym.php — v detailu článku tahle sekce
   tlačítko nemá. */
.related-articles .btn-more { margin-top: 28px; }

/* ── Lightbox ── */

/* z-index musí být nad vším ostatním — hlavička má 1000,
   mobilní menu 2001, admin overlay 9000. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, 0.94);
  opacity: 0;
  transition: opacity 0.22s ease;
  cursor: zoom-out;
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

/* Obrázek zavírá taky — proto zoom-out i nad ním */
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-out;
  transform: scale(0.98);
  transition: transform 0.22s ease;
}
.lightbox.is-open .lightbox__img { transform: scale(1); }

.lightbox__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.18); }
.lightbox__close svg { width: 19px; height: 19px; }

body.has-lightbox { overflow: hidden; }

/* Listování ve zvětšení (víc fotek) */
.lightbox__nav {
  position: absolute;
  top: 50%;
  width: 52px; height: 52px;
  margin-top: -26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  z-index: 2;
  transition: background var(--transition), opacity var(--transition);
}
.lightbox__nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); }
.lightbox__nav:disabled { opacity: 0.25; cursor: default; }
.lightbox__nav svg { width: 24px; height: 24px; }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }
.lightbox__counter {
  position: absolute;
  top: 26px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* U galerie se klikem na fotku nezavírá — zavírá křížek nebo pozadí */
.lightbox:has(.lightbox__nav) { cursor: default; }
.lightbox:has(.lightbox__nav) .lightbox__img { cursor: default; }

/* =========================================
   GALERIE U ČLÁNKU (slideshow)
   ========================================= */

.gallery { margin: 0 0 34px; }
.gallery__viewport { position: relative; }
.gallery__track {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  background: #000;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.gallery__zoom {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  background: #000;
  cursor: zoom-in;
}
.gallery__zoom picture { display: contents; }
.gallery__zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* celá fotka i na výšku — žádné ořezávání hlav */
}
.gallery__nav {
  position: absolute;
  top: 50%;
  width: 46px; height: 46px;
  margin-top: -23px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition);
}
.gallery__nav:hover:not(:disabled) { background: var(--primary); }
.gallery__nav:disabled { opacity: 0; pointer-events: none; }
.gallery__nav svg { width: 22px; height: 22px; }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__counter {
  position: absolute;
  right: 12px; bottom: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.gallery__thumb {
  flex: 0 0 auto;
  width: 84px;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 2px solid transparent;
  background: var(--card-bg);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity var(--transition), border-color var(--transition);
}
.gallery__thumb picture { display: contents; }
.gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 0.9; }
.gallery__thumb.is-active { opacity: 1; border-color: var(--cta); }
.gallery__thumb:focus-visible,
.gallery__nav:focus-visible,
.gallery__zoom:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

@media (max-width: 700px) {
  .article-row__link {
    grid-template-columns: 96px 1fr;
    gap: 13px;
    padding: 12px;
  }
  .article-row__media { width: 96px; }
  .article-row__arrow { display: none; }
  .article-row__title { font-size: 0.98rem; }
  .article-row__perex { -webkit-line-clamp: 2; font-size: 13px; }

  .pagination { justify-content: center; }
  .pagination__step { flex: 1 1 auto; justify-content: center; }
  .pagination__pages { order: -1; width: 100%; justify-content: center; margin-bottom: 4px; }

  .article-detail { padding: 32px 0 16px; }
  .article-detail-perex { font-size: 1.06rem; }
  .lightbox { padding: 16px; }
  .lightbox__close { top: 10px; right: 10px; }
  /* Na telefonu se listuje prstem — šipky jen malé u spodního okraje */
  .lightbox__nav { top: auto; bottom: 18px; margin-top: 0; width: 46px; height: 46px; }
  .lightbox__nav--prev { left: calc(50% - 60px); }
  .lightbox__nav--next { right: calc(50% - 60px); }
  .lightbox__counter { top: 18px; }
  .gallery { margin-bottom: 24px; }
  .gallery__nav { display: none; }       /* na dotyk stačí přejet prstem */
  .gallery__thumb { width: 64px; }
}

/* =========================================
   COOKIE KARTIČKA
   ========================================= */

/* Nenápadná karta v pravém dolním rohu — nepřekrývá obsah,
   nezastavuje čtení. Žádný barevný akcent, jen jemný rámeček. */
.cookie-bar {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9500;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.cookie-bar.is-visible { opacity: 1; transform: translateY(0); }
.cookie-bar[hidden]    { display: none; }

.cookie-bar__inner {
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cookie-bar__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.cookie-bar__text p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.cookie-bar__text a {
  color: var(--primary-hover);
  white-space: nowrap;
}
.cookie-bar__text a:hover { text-decoration: underline; }

/* Odmítnout a Přijmout mají stejný vzhled i šířku — ÚOOÚ vyžaduje,
   aby odmítnutí nebylo méně nápadné než souhlas. Nastavení je pod nimi. */
.cookie-bar__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cookie-bar__more { grid-column: 1 / -1; }
.cookie-bar__link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--primary-hover);
  cursor: pointer;
  white-space: nowrap;
}
.cookie-bar__link:hover { text-decoration: underline; }

.cookie-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 10px 14px;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--white);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.cookie-btn:hover { background: #1D5FF0; border-color: #1D5FF0; }
.cookie-btn--ghost {
  background: transparent;
  border-color: #5F6F95;
  color: var(--text);
}
.cookie-btn--ghost:hover { background: var(--bg-light); border-color: #7383A8; }

/* ── Okno s nastavením cookies ── */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cookie-modal[hidden] { display: none; }
.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 14, 0.72);
}
.cookie-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 40px);
  background: var(--card-bg);
  border-top: var(--card-accent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  outline: none;
}
body.has-cookie-modal { overflow: hidden; }

.cookie-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.cookie-modal__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
}
.cookie-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.cookie-modal__close:hover { background: var(--bg-light); border-color: #5F6F95; }

.cookie-modal__body {
  padding: 20px 24px;
  overflow-y: auto;
  display: grid;
  gap: 10px;
}
.cookie-modal__body > p { font-size: 15px; line-height: 1.7; color: var(--text-muted); margin-bottom: 6px; }
.cookie-modal__body strong { color: var(--text); }
.cookie-modal__body a { color: var(--primary-hover); }
.cookie-modal__body a:hover { text-decoration: underline; }

/* Kategorie — řádek s názvem (rozbalí podrobnosti) a přepínačem */
.cookie-cat { background: var(--bg-light); }
.cookie-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 0 0;
}
.cookie-cat__toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  text-align: left;
  cursor: pointer;
}
.cookie-cat__toggle::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.cookie-cat__toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.cookie-cat__always {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.cookie-cat__body { padding: 0 16px 16px 34px; }
.cookie-cat__body p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin-bottom: 10px; }

.cookie-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.cookie-list li {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 12px;
  align-items: baseline;
  font-size: 13.5px;
  color: var(--text-muted);
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.cookie-list code { color: var(--text); font-size: 13px; }
.cookie-list em { font-style: normal; white-space: nowrap; }
.cookie-note { font-size: 13px !important; }

/* Přepínač */
.cookie-switch { position: relative; display: inline-flex; cursor: pointer; flex-shrink: 0; }
.cookie-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cookie-switch__track {
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: #3A4766;
  border: 1px solid #5F6F95;
  position: relative;
  transition: background var(--transition), border-color var(--transition);
}
.cookie-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  transition: transform var(--transition);
}
.cookie-switch input:checked + .cookie-switch__track { background: var(--primary); border-color: var(--primary-hover); }
.cookie-switch input:checked + .cookie-switch__track::after { transform: translateX(20px); }
.cookie-switch input:focus-visible + .cookie-switch__track { outline: 2px solid var(--primary-hover); outline-offset: 2px; }

.cookie-modal__foot {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
}
.cookie-modal__foot [data-cookie-save] { justify-self: end; }

/* Odkazy v patičce */
.footer-links {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  opacity: 0.75;
}
.footer-links a,
.footer-linklike {
  color: inherit;
  font-family: var(--font-display);
  font-size: 13px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.footer-links a:hover,
.footer-linklike:hover { text-decoration: underline; }

@media (max-width: 520px) {
  .cookie-bar {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
  .cookie-modal { padding: 0; align-items: flex-end; }
  .cookie-modal__dialog { max-height: 92vh; }
  .cookie-modal__head, .cookie-modal__body { padding-left: 16px; padding-right: 16px; }
  .cookie-modal__foot { padding: 12px 16px 16px; }
  .cookie-modal__foot { grid-template-columns: 1fr 1fr; }
  .cookie-modal__foot [data-cookie-save] { grid-column: 1 / -1; justify-self: stretch; }
  .cookie-cat__body { padding-left: 16px; }
  .cookie-list li { grid-template-columns: 1fr auto; }
  .cookie-list li span { grid-column: 1 / -1; grid-row: 2; }
}

/* =========================================
   MOBIL — sjednocení odsazení a velikostí
   ========================================= */

/* Sekce si na telefonu držely desktopové odsazení 40–80 px, takže obsah
   plaval v prázdnu a scrollovalo se přes prázdná místa. Tady se rytmus
   stahuje na hodnoty, které dávají na malé obrazovce smysl. */
@media (max-width: 768px) {

  /* ── Nadpisy sekcí ── */
  .section-title {
    font-size: 1.4rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
  }

  /* ── Vertikální rytmus sekcí ── */
  .team-section          { padding: 28px 0; }
  .articles-list-section { padding: 28px 0 24px; }
  .home-about            { padding: 34px 0; }
  .history-section       { padding: 28px 0 48px; }
  .more-articles-wrap    { padding: 28px 20px; }
  .related-articles,
  .related-links         { padding: 30px 0 40px; }
  .related-articles .btn-more { margin-top: 20px; }
  .article-detail-footer { margin-top: 28px; padding-top: 20px; }
  .partners-grid         { padding: 24px 0; gap: 12px; }
  .empty-state           { padding: 36px 18px; }
  .site-footer           { padding: 30px 0; }

  /* ── Odkazy pod textem ── */
  .home-about-links { gap: 14px; margin-top: 18px; }
  .team-chips       { gap: 8px; margin-top: 18px; }

  /* ── Drobečková navigace ──
     Dlouhý název článku ji jinak roztáhne přes okraj displeje. */
  .breadcrumbs { font-size: 12px; padding: 10px 0; }
  .breadcrumbs ol { gap: 6px; }
  .breadcrumbs li { min-width: 0; }
  .breadcrumbs [aria-current="page"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* ── Soupiska ──
     Pevné šířky sloupců (68 a 90 px) ukrajovaly z místa pro jméno
     a tabulka se rozjížděla do vodorovného posunu. */
  .roster-table .col-number { width: 48px; }
  .roster-table .col-year   { width: 62px; }
  .data-table thead th {
    font-size: 11px;
    letter-spacing: 0.4px;
  }

  /* ── Detail článku ── */
  .article-detail-image  { margin-bottom: 24px; }
  .article-detail-header { margin-bottom: 24px; }
  .article-detail-body p { font-size: 1.05rem; line-height: 1.8; margin-bottom: 16px; }

  /* ── Sdílení ──
     Šest kulatých tlačítek se na úzkém displeji nevejde vedle popisku,
     tak popisek dostane vlastní řádek a tlačítka se můžou zalomit. */
  .article-share {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 0;
    margin: 26px 0 24px;
  }
  .article-share-btns { flex-wrap: wrap; gap: 10px; }
  .share-btn { width: 44px; height: 44px; }   /* 44 px = pohodlný cíl pro prst */

  /* ── Partneři ── */
  .partner-link { padding: 18px 14px; gap: 12px; }
  .partner-logo { min-height: 68px; }

  /* ── Trenéři ── */
  /* Menší karta, ať se dvě vejdou vedle sebe i na úzkém displeji */
  .coach-card { padding: 16px 10px 14px; gap: 10px; }
  .coach-card .coach-photo { width: 56px; height: 56px; }
  .coach-card .coach-photo--initials { font-size: 18px; }
  .coach-card .coach-meta { gap: 5px; }
  .coach-card .coach-name { font-size: 14px; line-height: 1.25; }
  .coach-card .coach-role { font-size: 12px; }
  .coach-card .coach-phone { font-size: 12.5px; }
  .coach-card .coach-cats { gap: 4px; margin-top: 4px; }
  .coach-card .team-chip--sm {
    padding: 3px 8px;
    font-size: 11px;
    letter-spacing: 0.2px;
  }

  /* ── 404 ── */
  .error-section  { padding: 48px 0 60px; }
  .error-code     { font-size: 3.2rem; }
  .error-section h1 { font-size: 1.5rem; }
}

/* Nejužší telefony — ubrat i z postranního odsazení, jinak zbývá
   na obsah zbytečně málo místa. */
@media (max-width: 420px) {
  .container { padding: 0 16px; }
  .section-title { font-size: 1.3rem; }
  .page-lead { font-size: 0.98rem; }
  .roster-table .col-number { width: 42px; }
  .roster-table .col-year   { width: 56px; }
  .data-table { font-size: 13px; }
  .data-table thead th,
  .data-table tbody th,
  .data-table tbody td { padding: 10px 8px; }
  .history-founded { padding: 20px 18px; }
  .history-thanks  { padding: 20px 18px; }

  /* Dva sloupce udržíme i tady, jen se ještě zmenší */
  .coach-grid { gap: 8px; }
  .coach-card { padding: 14px 8px 12px; }
  .coach-card .coach-photo { width: 50px; height: 50px; }
  .coach-card .coach-photo--initials { font-size: 16px; }
  .coach-card .coach-name { font-size: 13px; }
  .coach-card .coach-role { font-size: 11.5px; }
}

/* ── Nábor (/nabor/) ──
   Většina vzhledu je převzatá: plakát používá .article-zoom z detailu článku
   (včetně lightboxu), formulář .contact-form z kontaktů. Tady zbývá jen
   vertikální rytmus stránky. */
/* Totéž co u .contact-page-wrap — jen svisle, ať zůstane boční odsazení. */
.nabor-page { padding-top: 44px; padding-bottom: 72px; }


.nabor-section { padding-top: 40px; border-top: 1px solid var(--border); }
.nabor-section:first-of-type { padding-top: 0; border-top: 0; }
.nabor-section + .nabor-section { margin-top: 44px; }
.nabor-section p {
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 68ch;
  margin-bottom: 18px;
}
.nabor-section p strong { color: var(--text); }

/* Časté dotazy — karty. Otevřená se zesvětlí a dostane zlatý proužek.
   <details> funguje bez JavaScriptu a čtečky ho znají. */
.faq { display: grid; gap: 6px; max-width: 760px; }
.faq__item {
  background: var(--card-bg);
  border-left: 3px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.faq__item:hover { border-left-color: var(--primary); }
.faq__item[open] { background: var(--bg-light); border-left-color: var(--cta); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
}
.faq__q::-webkit-details-marker { display: none; }
/* Šipka dolů / nahoru, kreslená rámečkem — bez ikony navíc. */
.faq__q::after {
  content: '';
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform var(--transition), border-color var(--transition), margin var(--transition);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); margin-top: 5px; border-color: var(--cta); }
.faq__q:hover { color: var(--white); }
.faq__q:focus-visible { outline: 2px solid var(--cta); outline-offset: -2px; }
.faq__a { padding: 0 20px 18px; }
.nabor-section .faq__a p { margin-bottom: 10px; }
.nabor-section .faq__a p:last-child { margin-bottom: 0; }
.nabor-section .team-section-note a { color: var(--primary-hover); }

.nabor-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 24px 0 32px;
  font-style: normal;
}

@media (max-width: 768px) {
  .nabor-page    { padding-top: 28px; padding-bottom: 48px; }
  .nabor-section { padding-top: 28px; }
  .nabor-section + .nabor-section { margin-top: 28px; }
  .nabor-contact { flex-direction: column; gap: 12px; }
}

/* Vlastní rámeček a pozadí, ať je vidět na první pohled. */
.club-nav {
  background: var(--card-bg);
  border: 0;
  border-top: var(--card-accent);
  padding: 6px;
}
.club-nav__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.club-nav__list { list-style: none; margin: 0; padding: 0; }

.club-nav__link {
  display: block;
  padding: 11px 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.club-nav__link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

/* Aktuální stránka plnou modrou — nejvýraznější prvek rozcestníku. */
.club-nav__link.is-active {
  background: var(--primary);
  color: var(--white);
}
.club-nav__link.is-active:hover { background: var(--primary); }
/* Zápasy a tabulka vedou na Český florbal — šipka za textem */
.club-nav__link.ext-link { display: flex; align-items: center; gap: 6px; }



/* =========================================
   ROZVRŽENÍ VEŘEJNÉ ČÁSTI — obsah v jednom sloupci uprostřed
   =========================================
   Drobečková navigace, hlavička stránky i obsah stojí v jednom sloupci
   (max. 1000 px) vycentrovaném na stránce. Text zůstává zarovnaný vlevo
   a vede přes celou šířku sloupce. Sloupec není vizuálně oddělený — pozadí
   je všude stejné a mezi částmi nejsou dělicí čáry.
   Rozcestník sekce (Klub / stránky týmu) stojí vlevo mimo sloupec, nahoře
   v úrovni drobečkové navigace; zobrazuje se jen na širokých obrazovkách.
   Úvodní mozaika článků na hlavní stránce zůstává přes celou šířku.

     telefon (< 768 px)   sloupec přes celou šířku
     tablet / notebook    okraj 24 px po stranách, max. 1000 px
     ≥ 1280 px            vlevo i vpravo místo na rozcestník (symetricky,
                          aby sloupec zůstal přesně uprostřed)              */
:root {
  --box-max: 1000px;
  --box-out: 0px;        /* volné místo vedle sloupce (každá strana) */
  --box-pad: 24px;       /* vnitřní odsazení textu */
  --nav-w:   210px;      /* šířka rozcestníku */
  --nav-gap: 28px;       /* mezera rozcestník ↔ text */
  --box:     min(var(--box-max), 100% - 2 * var(--box-out));
  --box-l:   calc((100% - var(--box)) / 2);   /* levá hrana sloupce */
}
@media (min-width: 768px)  { :root { --box-out: 24px; --box-pad: 32px; } }
@media (min-width: 1280px) { :root { --box-out: calc(var(--nav-w) + var(--nav-gap) - var(--box-pad) + 24px); --box-pad: 40px; } }
@media (max-width: 420px)  { :root { --box-pad: 16px; } }

/* Kontejnery obsahu: stejná šířka, uprostřed */
.breadcrumbs > .container,
.page-header > .container,
main .container,
.partners-section > .container {
  width: var(--box);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--box-pad);
  padding-right: var(--box-pad);
}

/* Dělicí čáry mezi částmi stránky — jen v šířce textu sloupce, ne přes
   celou stránku. U sekcí, které jsou přes celou šířku (drobečky, hlavička,
   navazující bloky), se čára kreslí pozadím o šířce sloupce; sekce uvnitř
   kontejneru (.team-section, .nabor-section …) mají běžný border. */
:root {
  --rule: linear-gradient(var(--border), var(--border));
  --rule-w: calc(var(--box) - 2 * var(--box-pad));
}
.breadcrumbs, .page-header { border-bottom: 0; background: var(--rule) center bottom / var(--rule-w) 1px no-repeat; }
.home-about, .recruit-cta, .related-articles, .related-links, .partners-section {
  border-top: 0;
  border-bottom: 0;
  background: var(--rule) center top / var(--rule-w) 1px no-repeat;
}

/* Text přes celou šířku sloupce (dřív se lámal v polovině) */
.page-lead, .home-about p, .team-section p, .nabor-section p,
.faq, .recruit-cta__text, .container--narrow > * { max-width: none; }
.container.container--article > * { max-width: none; margin-left: 0; margin-right: 0; }

/* Chybová stránka zůstává vycentrovaná */
.container--center { text-align: center; }
.container--center > * { margin-left: auto; margin-right: auto; }

main { padding-bottom: 24px; }

/* Obal drobečků, hlavičky a obsahu (otevírá ho render_breadcrumbs,
   zavírá render_footer) — od něj se měří poloha rozcestníku. */
.page-shell { flex: 1; display: flex; flex-direction: column; position: relative; }
.page-shell > main { flex: 1; }

/* ── Rozcestník vlevo mimo sloupec, nahoře ──
   Pod 1280 px se nezobrazuje — stejné odkazy jsou v hlavním menu. */
.club-nav { display: none; }
@media (min-width: 1280px) {
  .klub-layout > .club-nav {
    display: block;
    position: absolute;
    /* horní hrana v úrovni první dělicí čáry (pod drobečkovou navigací:
       14 + 14 px odsazení + řádek 13 px × 1,6) */
    top: 48px;
    left: calc(var(--box-l) + var(--box-pad) - var(--nav-gap) - var(--nav-w));
    width: var(--nav-w);
  }
}

/* ── Trenéři klubu (/klub/treneri/) — karty trenérů ──
   Karta má nahoře modrý pruh, do kterého zasahuje kulatá fotka (nebo
   iniciály) s rámečkem. Pod ní jméno, role a dole — oddělené linkou —
   týmy, které trenér vede. Hlavní trenér má roli zlatě, asistent modře,
   takže je rozdíl vidět na první pohled.
   Na počítači 3 v řadě, ale karty mají strop šířky (270 px) a mezi sebou
   vzduch, aby se netáhly přes celý sloupec a „nelepily“ na sebe.
   Selektory začínají .coach-grid, aby přebily starší pravidla výše. */
.coach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 640px) {
  .coach-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 900px) {
  .coach-grid {
    grid-template-columns: repeat(3, minmax(0, 270px));
    gap: 28px 32px;
    justify-content: start;
  }
}

.coach-grid .coach-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 0 18px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* modrý pruh nahoře */
.coach-grid .coach-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 56px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
}
.coach-grid .coach-card:hover {
  background: var(--card-bg);
  transform: translateY(-3px);
  border-color: rgba(91, 143, 245, 0.45);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .coach-grid .coach-card { transition: none; }
  .coach-grid .coach-card:hover { transform: none; }
}

/* fotka / iniciály zasahují do pruhu, kolem rámeček v barvě karty */
.coach-grid .coach-card .coach-photo {
  position: relative;
  z-index: 1;
  width: 78px;
  height: 78px;
  margin-top: 18px;
  box-shadow: 0 0 0 4px var(--card-bg), 0 0 0 5px rgba(91, 143, 245, 0.55);
}
.coach-grid .coach-card .coach-photo--initials {
  background: linear-gradient(145deg, #1C2C50, #101A30);
  color: var(--white);
  font-size: 24px;
  letter-spacing: 1px;
}

.coach-grid .coach-card .coach-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  margin-top: 14px;
}
.coach-grid .coach-card .coach-meta p { margin: 0; line-height: 1.35; max-width: none; }
.coach-grid .coach-card .coach-name { font-size: 18px; font-weight: 700; line-height: 1.25; }
.coach-grid .coach-card .coach-role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--primary-hover);
}
.coach-grid .coach-card .coach-role--head { color: var(--cta); }
.coach-grid .coach-card .coach-phone { margin-top: 4px; font-size: 14px; }

/* týmy dole, oddělené linkou — linky jsou v řadě karet na stejné výšce */
.coach-grid .coach-card .coach-cats {
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
}
.coach-grid .coach-card .coach-cats::before {
  content: "";
  flex-basis: 100%;
  height: 1px;
  margin: 0 0 12px;
  background: var(--border);
}
.coach-grid .coach-card .team-chip--sm {
  padding: 4px 10px;
  font-size: 12.5px;
  background: rgba(11, 80, 226, 0.14);
  border-color: rgba(91, 143, 245, 0.3);
}
.coach-grid .coach-card .team-chip--sm:hover {
  background: var(--primary);
  border-color: var(--primary);
}

/* Telefon — dvě karty vedle sebe, všechno o kus menší */
@media (max-width: 639px) {
  .coach-grid .coach-card { padding: 0 10px 14px; }
  .coach-grid .coach-card::before { height: 44px; }
  .coach-grid .coach-card .coach-photo { width: 60px; height: 60px; margin-top: 14px; }
  .coach-grid .coach-card .coach-photo--initials { font-size: 19px; }
  .coach-grid .coach-card .coach-meta { margin-top: 12px; }
  .coach-grid .coach-card .coach-name { font-size: 15px; }
  .coach-grid .coach-card .coach-role { font-size: 10.5px; letter-spacing: 0.8px; }
  .coach-grid .coach-card .coach-cats { padding-top: 10px; gap: 4px; }
  .coach-grid .coach-card .coach-cats::before { margin-bottom: 10px; }
  .coach-grid .coach-card .team-chip--sm { padding: 3px 7px; font-size: 11px; }
}

/* ── Klub v číslech (úvodní stránka, render_club_stats) ──
   Velká čísla v Barlow Condensed (48–64 px), pod nimi krátký popis.
   Na počítači vedle sebe, na mobilu po dvou. */
.club-stats { padding: 56px 0; background: var(--rule) center top / var(--rule-w) 1px no-repeat; }
.club-stats__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--stats, 4), minmax(0, 1fr));
  gap: 16px;
}
.club-stats__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 20px;
  background: var(--card-bg);
  border-top: var(--card-accent);
}
.club-stats__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 5vw, 64px);
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.club-stats__label { font-size: 14px; line-height: 1.45; color: var(--text-muted); }
@media (max-width: 768px) {
  .club-stats { padding: 34px 0; }
  .club-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .club-stats__item { padding: 16px 14px; }
  .club-stats__num { font-size: 44px; }
  .club-stats__label { font-size: 13px; }
}

/* =========================================
   ÚVODNÍ SLIDESHOW (.hero) — index.php + js/hero.js
   =========================================
   Jeden článek přes celou šířku a výšku okna (pod hlavičkou), další tři
   se střídají jako slideshow — vzor tatranflorbal.cz. Fotka spodkem
   plynule přechází gradientem do barvy pozadí webu (--bg), takže hero
   bez hrany navazuje na zbytek stránky.
   Dole ukazatele: každý pruh se během zobrazení snímku plní (CSS animace,
   její konec přepne na další snímek). Přehrávání běží pořád — zastaví ho
   jen najetí myší na právě se plnící pruh. Bez JavaScriptu je vidět jen
   první článek. */
.hero {
  --hero-delay: 7s;
  position: relative;
  height: calc(100vh - 36px - 72px);   /* topbar + hlavička — jako dřív mozaika */
  min-height: 460px;
  overflow: hidden;
  background: var(--bg);
}
.hero__slides { position: absolute; inset: 0; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s ease, visibility 0s;
  z-index: 1;
}

.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media picture { display: contents; }
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.06);
  transition: transform 8s ease-out;
}
.hero__slide.is-active .hero__img { transform: scale(1); }   /* pomalý „dojezd“ fotky */
.hero__img--fallback {
  background:
    radial-gradient(circle at 70% 35%, rgba(11, 80, 226, 0.45), transparent 60%),
    linear-gradient(135deg, var(--primary-deep), var(--bg));
}

/* Ztmavení: spodek přechází do barvy pozadí webu, vlevo jemně
   ztmavené, ať je text čitelný na každé fotce. */
.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      var(--bg) 0%,
      rgba(10, 14, 26, 0.92) 12%,
      rgba(10, 14, 26, 0.6) 32%,
      rgba(10, 14, 26, 0.15) 58%,
      rgba(10, 14, 26, 0) 75%),
    linear-gradient(90deg, rgba(10, 14, 26, 0.55) 0%, rgba(10, 14, 26, 0) 60%);
}

/* Text článku — zarovnaný se sloupcem obsahu webu (.container) */
.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 84px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.hero__title {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: 0.5px;
  max-width: 22ch;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.hero__title a { color: inherit; }
.hero__perex {
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 12px 22px;
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: background var(--transition), gap var(--transition);
}
.hero__btn:hover { background: #0a45c4; gap: 12px; }

/* Ukazatele snímků + pauza */
.hero__nav {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.hero__nav[hidden] { display: none; }
.hero__dot {
  width: 64px;
  padding: 10px 0;          /* větší plocha pro klik/prst než samotný pruh */
  background: none;
  border: 0;
  cursor: pointer;
}
.hero__bar {
  position: relative;
  display: block;
  height: 3px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.hero__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
}
.hero__dot:hover .hero__bar { background: rgba(255, 255, 255, 0.45); }
.hero__dot.is-active .hero__bar::after { animation: hero-progress var(--hero-delay) linear forwards; }
/* Pauza jen při najetí na právě se plnící pruh (nebo fokusu na něm
   z klávesnice). Jinak se přehrává pořád. */
.hero__dot.is-active:hover .hero__bar::after,
.hero__dot.is-active:focus-visible .hero__bar::after { animation-play-state: paused; }
.hero__dot:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 2px; }
@keyframes hero-progress { to { transform: scaleX(1); } }


@media (max-width: 768px) {
  .hero { height: min(calc(100svh - 72px), 640px); min-height: 420px; }
  .hero__content { bottom: 64px; gap: 10px; }
  .hero__title { font-size: clamp(1.7rem, 7.5vw, 2.3rem); max-width: none; }
  .hero__perex { font-size: 15px; }
  .hero__btn { padding: 11px 18px; font-size: 14px; }
  .hero__nav { bottom: 18px; gap: 8px; }
  .hero__dot { width: 44px; }
}
@media (max-height: 620px) and (min-width: 769px) {
  .hero__perex { display: none; }
  .hero__content { bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__slide.is-active { transition: none; }
  .hero__img { transform: none; transition: none; }
}