/* fotbalml.cz – vzhled. Barvy klubu: tmavě modrá, modrá, žlutá. */
@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(/fonty/poppins-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF; }
@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(/fonty/poppins-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2074, U+20AC, U+2122, U+2212; }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url(/fonty/poppins-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF; }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url(/fonty/poppins-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2074, U+20AC, U+2122, U+2212; }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(/fonty/poppins-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF; }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(/fonty/poppins-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2074, U+20AC, U+2122, U+2212; }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(/fonty/poppins-latin-ext-700.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF; }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(/fonty/poppins-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2074, U+20AC, U+2122, U+2212; }

:root {
  --tmava: #0a1124;
  --modra: #1565c0;
  --modra-tm: #0f2f6b;
  --zluta: #f5d90a;
  --pozadi: #f3f3f3;
  --bila: #fff;
  --text: #1c2233;
  --seda: #667085;
  --linka: #e3e6ec;
  --zelena: #1a8f4c;
  --cervena: #c62828;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; font: 400 16px/1.6 Poppins, system-ui, "Segoe UI", sans-serif; color: var(--text); background: var(--pozadi); }
img { max-width: 100%; height: auto; }
a { color: var(--modra); }
a:hover { color: var(--modra-tm); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; font-weight: 600; }
.obal { width: min(1180px, 100% - 2rem); margin-inline: auto; }
.uzky { width: min(820px, 100% - 2rem); }
.stred { text-align: center; }
.vpravo { text-align: right; }
.nezalamovat { white-space: nowrap; }
.preskocit { position: absolute; left: -999px; }
.preskocit:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--zluta); color: #000; padding: .5rem 1rem; }
:focus-visible { outline: 3px solid var(--zluta); outline-offset: 2px; }

/* hlavička */
.hlavicka { position: sticky; top: 0; z-index: 50; background: var(--bila); box-shadow: 0 2px 10px rgba(10, 17, 36, .12); }
.hlavicka-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 84px; }
.znacka { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--modra-tm); }
.znacka img { width: 64px; height: 64px; }
.znacka strong { display: block; font-size: 1.45rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.znacka small { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--modra); }
.znacka-svetla { color: var(--bila); }
.znacka-svetla small { color: var(--zluta); }
.menu > ul { display: flex; flex-wrap: wrap; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.menu li { position: relative; }
.menu a { display: block; padding: .7rem .9rem; color: var(--text); text-decoration: none; font-weight: 500; border-radius: 6px; }
.menu a:hover, .menu a[aria-current] { color: var(--modra); }
.menu ul ul { display: none; position: absolute; left: 0; top: 100%; min-width: 220px; list-style: none; margin: 0; padding: .4rem; background: var(--bila); border-radius: 8px; box-shadow: 0 10px 30px rgba(10, 17, 36, .18); }
.menu li:hover > ul, .menu li:focus-within > ul { display: block; }
.menu ul ul a { padding: .5rem .8rem; font-weight: 400; }
.menu ul ul a:hover { background: var(--pozadi); }
.menu-tlacitko { display: none; }

/* pruhy stránky */
.pas { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.pas-bily { background: var(--bila); }
.pas-tmavy { background: var(--tmava); color: #dfe4f0; }
.pas-tmavy h2 { color: var(--zluta); }
.zahlavi { background: linear-gradient(120deg, var(--tmava), var(--modra-tm)); color: var(--bila); padding: clamp(2rem, 5vw, 3.5rem) 0; }
.zahlavi h1 { margin: 0; }
.zahlavi p { margin: .4rem 0 0; color: var(--zluta); font-weight: 500; }
.uvod { background: linear-gradient(120deg, var(--tmava) 30%, var(--modra-tm)); color: var(--bila); padding: clamp(3rem, 8vw, 6rem) 0; }
.uvod-in { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.uvod h1 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 16em; }
.uvod p { font-size: 1.1rem; max-width: 38em; color: #dfe4f0; }
.uvod img { width: clamp(140px, 22vw, 260px); height: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .4)); }
.dva-sloupce { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.tri-sloupce { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.na-stred { align-items: center; }
.zaobleny { border-radius: 12px; }

.tlacitko { display: inline-block; margin: .3rem .3rem .3rem 0; padding: .75rem 1.4rem; background: var(--modra); color: var(--bila); border: 0; border-radius: 6px; font: 600 .82rem Poppins, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .15s; }
.tlacitko:hover { background: var(--modra-tm); color: var(--bila); }
.tlacitko-zlute { background: var(--zluta); color: var(--tmava); }
.tlacitko-zlute:hover { background: #ffe94a; color: var(--tmava); }
.stitek { margin: 0 0 .5rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--seda); }
.stitek a { color: var(--modra); text-decoration: none; }
.pas-tmavy .stitek, .pas-tmavy .stitek a { color: var(--zluta); }
.poznamka { color: var(--seda); font-size: .9rem; }
.pas-tmavy .poznamka { color: #c9d2e6; }
.sezona { margin: 1.5rem 0 .8rem; }
.tabulka caption small { font-weight: 400; color: var(--seda); }
.prazdne { padding: 1.2rem; background: var(--bila); border: 1px dashed var(--linka); border-radius: 8px; color: var(--seda); }
.pas-bily .poznamka { color: var(--seda); font-size: .9rem; }
.pas-tmavy .poznamka { color: #c9d2e6; }
.sezona { margin: 1.5rem 0 .8rem; }
.tabulka caption small { font-weight: 400; color: var(--seda); }
.prazdne { background: var(--pozadi); }

/* zápasy */
.zapasy-karty { display: grid; gap: 1rem; margin-bottom: 1rem; }
.zapas-karta { display: grid; gap: .3rem; justify-items: center; padding: 1.2rem; background: var(--bila); border-radius: 10px; border-top: 4px solid var(--linka); color: var(--text); text-decoration: none; box-shadow: 0 2px 8px rgba(10, 17, 36, .06); transition: transform .15s, box-shadow .15s; }
.zapas-karta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10, 17, 36, .12); color: var(--text); }
.zapas-karta.je-vyhra { border-top-color: var(--zelena); }
.zapas-karta.je-prohra { border-top-color: var(--cervena); }
.zapas-karta.je-remiza { border-top-color: var(--seda); }
.zapas-datum, .zapas-soutez { font-size: .8rem; color: var(--seda); }
.zapas-radek { display: flex; align-items: center; gap: 1.5rem; }
.zapas-skore { font-size: 2.2rem; font-weight: 700; white-space: nowrap; }
.zapas-tymy { font-weight: 600; text-align: center; }
.logo-klubu { object-fit: contain; flex: none; }
.logo-prazdne { display: inline-block; border-radius: 50%; background: var(--linka); }
.zapas-detail { background: linear-gradient(120deg, var(--tmava), var(--modra-tm)); color: var(--bila); padding: clamp(2rem, 5vw, 3.5rem) 0; text-align: center; }
.zapas-detail .stitek { color: var(--zluta); }
.zapas-detail h1 { font-size: clamp(1.3rem, 3vw, 1.9rem); }
.zapas-velky { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; margin-top: 2rem; }
.zapas-velky > div { display: grid; gap: .6rem; justify-items: center; }
.zapas-velky .logo-klubu { background: var(--bila); border-radius: 50%; padding: 8px; }
.zapas-velke-skore { font-size: clamp(2.4rem, 8vw, 4.5rem); font-weight: 700; line-height: 1; }
.zapas-velke-skore small { display: block; margin-top: .6rem; font-size: .9rem; font-weight: 400; color: #c9d2e6; }

/* tabulky */
.tabulka-obal { overflow-x: auto; background: var(--bila); border-radius: 10px; box-shadow: 0 2px 8px rgba(10, 17, 36, .06); margin-bottom: 1.5rem; }
.tabulka { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabulka caption { padding: .9rem 1rem; text-align: left; font-weight: 600; }
.tabulka th { background: var(--tmava); color: var(--bila); font-weight: 600; text-align: center; padding: .7rem .6rem; white-space: nowrap; }
.tabulka td { padding: .6rem; text-align: center; border-top: 1px solid var(--linka); }
.tabulka th:nth-child(2), .tabulka td.klub { text-align: left; }
.tabulka td.klub { display: flex; align-items: center; gap: .6rem; min-width: 220px; }
.tabulka td.klub a { color: var(--text); font-weight: 500; }
.tabulka .nasi-radek td { background: #fff8c9; font-weight: 600; }
.tabulka.zapasy th, .tabulka.zapasy td { text-align: left; }
.tabulka.zapasy .vpravo { text-align: right; }
.tabulka.zapasy .stred { text-align: center; }
.s-logem { display: inline-flex; align-items: center; gap: .5rem; }
.tabulka.zapasy small { display: block; color: var(--seda); }
.tabulka .nasi { font-weight: 600; color: var(--modra-tm); }
.skore { display: inline-block; min-width: 4.2em; padding: .25rem .6rem; border-radius: 5px; background: var(--tmava); color: var(--bila); font-weight: 600; text-decoration: none; text-align: center; }
.je-vyhra .skore { background: var(--zelena); }
.je-prohra .skore { background: var(--cervena); }
.je-remiza .skore { background: var(--seda); }
.skore:hover { color: var(--zluta); }

.zalozky-tlacitka { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.zalozky-tlacitka button { padding: .6rem 1rem; border: 1px solid var(--linka); border-radius: 6px; background: var(--bila); font: 500 .9rem Poppins, sans-serif; cursor: pointer; }
.zalozky-tlacitka button[aria-selected=true] { background: var(--modra); border-color: var(--modra); color: var(--bila); }

.podmenu { background: var(--bila); border-bottom: 1px solid var(--linka); }
.podmenu .obal { display: flex; flex-wrap: wrap; gap: .3rem; }
.podmenu a { padding: .9rem 1rem; color: var(--text); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; }
.podmenu a[aria-current], .podmenu a:hover { color: var(--modra); border-bottom-color: var(--modra); }

/* soupiska */
.soupiska { background: var(--bila); color: var(--text); border-radius: 8px; margin-bottom: 1.2rem; overflow: hidden; }
.soupiska h3 { margin: 0; padding: 1rem 1.2rem; border-bottom: 1px solid var(--linka); font-weight: 500; font-size: 1.2rem; }
.soupiska ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .4rem; list-style: none; margin: 0; padding: 1rem; }
.soupiska a { display: flex; align-items: center; gap: .8rem; padding: .5rem; border-radius: 6px; color: var(--text); text-decoration: none; font-weight: 500; }
.soupiska a:hover { background: var(--pozadi); }
.soupiska b { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; background: var(--modra); color: var(--bila); border-radius: 4px; font-weight: 600; }
.hrac { display: flex; gap: 2rem; align-items: center; margin-bottom: 2rem; }
.hrac-cislo { flex: none; display: grid; place-items: center; width: 7rem; height: 7rem; background: var(--modra); color: var(--bila); border-radius: 12px; font-size: 3rem; font-weight: 700; }
.udaje { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0 0 1.5rem; }
.udaje dt { color: var(--seda); }
.udaje dd { margin: 0; font-weight: 500; }

/* lidé, partneři, dlaždice */
.lide { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.clovek { display: grid; gap: .15rem; padding: 1.2rem; background: var(--pozadi); border-left: 4px solid var(--modra); border-radius: 6px; }
.pas:not(.pas-bily) .clovek { background: var(--bila); }
.clovek span { color: var(--seda); font-size: .9rem; }
.clovek a { text-decoration: none; font-weight: 500; }
.dlazdice { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.dlazdice a { display: grid; gap: .2rem; padding: 1.4rem; background: var(--tmava); color: var(--bila); border-radius: 10px; text-decoration: none; transition: background .15s; }
.dlazdice a:hover { background: var(--modra); }
.dlazdice strong { font-size: 1.2rem; }
.dlazdice span { color: var(--zluta); font-size: .85rem; }
.loga { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem 3rem; margin: 1.5rem 0 2rem; }
.loga img { height: 60px; width: auto; max-width: 170px; object-fit: contain; }
.partneri { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.partner { display: grid; gap: .8rem; justify-items: center; align-content: center; padding: 1.5rem; min-height: 170px; background: var(--bila); border: 1px solid var(--linka); border-radius: 10px; color: var(--text); text-align: center; text-decoration: none; }
a.partner:hover { border-color: var(--modra); color: var(--modra); }
.partner img { height: 80px; width: auto; max-width: 180px; object-fit: contain; }
.partner span { font-size: .8rem; color: var(--seda); }
.partner-generalni, .partner-tmavy { background: var(--tmava); border-color: var(--tmava); color: var(--bila); }
a.partner-tmavy:hover { color: var(--zluta); }
.partner-generalni span { color: var(--zluta); }
a.partner-generalni:hover { color: var(--zluta); }
.partneri + p { margin-top: 1.5rem; }
.kontakt { text-align: center; }
.kontakt h2 { font-size: 1.3rem; }
.mapa { display: grid; place-items: center; align-content: center; min-height: 320px; margin-bottom: 2.5rem; background: var(--bila); border: 1px dashed var(--linka); border-radius: 10px; text-align: center; overflow: hidden; }
.mapa iframe { width: 100%; height: 420px; border: 0; display: block; }
.rozbal { border: 1px solid var(--linka); border-radius: 8px; margin-bottom: .6rem; padding: 0 1.2rem; }
.rozbal summary { padding: 1rem 0; font-weight: 600; cursor: pointer; }
.rozbal[open] summary { color: var(--modra); }

/* články */
.clanky { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.clanek-karta { display: flex; flex-direction: column; background: var(--bila); color: var(--text); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(10, 17, 36, .06); }
.clanek-karta img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.clanek-karta > div { padding: 1.2rem 1.3rem 1.4rem; }
.clanek-karta h3 a { color: var(--text); text-decoration: none; }
.clanek-karta h3 a:hover { color: var(--modra); }
.clanek-karta p { margin: 0; }
.clanek-karta .stitek, .clanek-karta .stitek a { color: var(--modra); margin-bottom: .5rem; }
.clanek-karta .stitek time { color: var(--seda); }
.rubriky a { display: inline-block; margin: 0 .3rem 1rem 0; padding: .4rem 1rem; background: var(--bila); border: 1px solid var(--linka); border-radius: 99px; text-decoration: none; font-size: .9rem; }
.strankovani { display: flex; justify-content: center; gap: .4rem; }
.strankovani a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--bila); border-radius: 6px; text-decoration: none; font-weight: 600; }
.strankovani a[aria-current] { background: var(--modra); color: var(--bila); }
.text { font-size: 1.05rem; overflow-wrap: break-word; }
.text img, .text video { display: block; max-width: 100%; height: auto; margin: 1.5rem auto; border-radius: 8px; }
.text h2 { margin-top: 2em; font-size: 1.6rem; }
.text table { border-collapse: collapse; width: 100%; }
.text td, .text th { border: 1px solid var(--linka); padding: .4rem .6rem; }
.sousedi { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linka); }
.sousedi a { text-decoration: none; font-weight: 500; }
.sousedi small { display: block; color: var(--seda); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }

/* patička */
.paticka { background: var(--tmava); color: #c9d2e6; padding-top: 3rem; font-size: .95rem; }
.paticka-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.paticka h2 { font-size: 1rem; color: var(--zluta); text-transform: uppercase; letter-spacing: .08em; }
.paticka a { color: var(--bila); }
.paticka-dole { margin-top: 2rem; padding: 1.2rem 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; }

@media (max-width: 1020px) {
  .menu-tlacitko { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; background: none; border: 1px solid var(--linka); border-radius: 6px; font: 500 .9rem Poppins, sans-serif; cursor: pointer; }
  .menu-tlacitko span { display: none; }
  .menu-tlacitko b::before { content: "☰ "; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 84px); overflow-y: auto; background: var(--bila); box-shadow: 0 12px 20px rgba(10, 17, 36, .15); padding: .5rem 1rem 1rem; }
  .menu.otevrene { display: block; }
  .menu > ul { display: block; }
  .menu ul ul { display: block; position: static; box-shadow: none; padding: 0 0 .4rem 1rem; }
  .menu ul ul a { padding: .35rem .8rem; color: var(--seda); }
}
@media (max-width: 760px) {
  .dva-sloupce, .tri-sloupce, .uvod-in, .sousedi { grid-template-columns: 1fr; }
  .uvod-in img { order: -1; }
  .paticka-in { grid-template-columns: 1fr 1fr; }
  .znacka img { width: 48px; height: 48px; }
  .znacka strong { font-size: 1.1rem; }
  .znacka small { font-size: .65rem; }
  .hlavicka-in { min-height: 68px; }
  .zapas-radek { gap: .8rem; }
  .zapas-skore { font-size: 1.8rem; }
  .zapas-velky .logo-klubu { width: 70px; height: 70px; }
  .hrac { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .tabulka td.klub { min-width: 180px; }
}
@media (max-width: 480px) { .paticka-in { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }