/* KCHBO Theme for WebBase CMS */
/* Modern warm cream/gold design */

:root {
    --brand-300: #c8a96e;
    --brand-500: #a07d3a;
    --brand-600: #8B6F47;
    --brand-700: #5C4A32;
    --cream-50: #FDF8F0;
    --cream-100: #F9EFE0;
    --cream-200: #F5E6C8;
}

/* Body */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Form inputs - global styling for Nette forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="search"],
textarea,
select {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #111827;
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
    outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-300, #c8a96e);
    box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.15);
}

/* Labels */
label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.375rem;
}

/* Buttons */
input[type="submit"],
button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    background: linear-gradient(135deg, var(--brand-300) 0%, var(--brand-500) 100%);
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(200, 169, 110, 0.3);
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(200, 169, 110, 0.4);
}

input[type="submit"]:active,
button[type="submit"]:active {
    transform: translateY(0);
}

/* Checkbox styling */
input[type="checkbox"] {
    width: auto;
    display: inline;
    margin-right: 0.5rem;
}

/* Form pairs (Nette form groups) */
.form-group,
form table tr,
form .pair {
    margin-bottom: 1rem;
}

/* File upload */
input[type="file"] {
    display: block;
    font-size: 0.875rem;
    color: #6b7280;
    padding: 0.5rem;
    border: 2px dashed #e5e7eb;
    border-radius: 0.75rem;
    transition: border-color 0.2s;
}

input[type="file"]:hover {
    border-color: var(--brand-300);
}

/* Tables */
table {
    border-collapse: collapse;
}

/* Prose styling for article content */
.prose {
    line-height: 1.8;
}

.prose p {
    margin-bottom: 1.25em;
}

.prose h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 0.75em;
    color: #111827;
}

.prose h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #111827;
}

.prose a {
    color: var(--brand-500, #a07d3a);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover {
    color: var(--brand-700, #5C4A32);
}

.prose img {
    border-radius: 0.75rem;
    margin: 1.5em auto;
    max-width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.prose ul, .prose ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.prose li {
    margin-bottom: 0.25em;
}

.prose blockquote {
    border-left: 4px solid var(--brand-300, #c8a96e);
    padding: 1em 1.25em;
    color: #6b7280;
    font-style: italic;
    margin: 1.5em 0;
    background: rgba(200, 169, 110, 0.05);
    border-radius: 0 0.5rem 0.5rem 0;
}

/* Line clamp utility */
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* ── Scroll Reveal Animations ── */
.scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Skrytí obsahu je čistě dekorace. Kdo si vypnul animace, nemá kvůli tomu
   přijít o text — a nemá čekat, až ho odkryje JS. */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Page Banner Enhancement ── */
.page-banner {
    background: var(--page-banner);
    position: relative;
    overflow: hidden;
}

.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

/* ── Modern Pagination ── */
.pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s;
    color: var(--brand-600);
}

.pagination a:hover {
    background: rgba(200, 169, 110, 0.1);
}

.pagination .active {
    background: linear-gradient(135deg, var(--brand-300), var(--brand-500));
    color: #fff;
    box-shadow: 0 2px 8px rgba(200, 169, 110, 0.3);
}

/* Selection highlight */
::selection {
    background-color: rgba(200, 169, 110, 0.3);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--cream-100, #F9EFE0);
}

::-webkit-scrollbar-thumb {
    background: var(--brand-300, #c8a96e);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-500, #a07d3a);
}

/* Alpine.js cloak */
[x-cloak] {
    display: none !important;
}

/* Confirm delete dialog */
.confirm-delete {
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   Kontakty a funkce — karty funkcionářů (návrh KCHBO-WEB-v03, str. 19)
   ══════════════════════════════════════════════════════════════════════════

   PROČ RUČNÍ CSS A NE TAILWIND UTILITY: tenhle blok se používá z OBSAHU
   CMS stránky, který je uložený v databázi. Tailwind v4 skenuje jen zdroje
   vyjmenované v `www/assets/app.css` (`templates/`, `www/js`) — utility
   třídy napsané v DB by se do `dist/app.css` nikdy nevygenerovaly a stránka
   by se rozpadla. `theme.css` se naopak posílá celý, tak jak je.

   Třídy jsou ZÁMĚRNĚ obecné (funkcionář, komise), ne KCHBO-specifické:
   výbor a komise má každý klub, jména a role jsou obsah instance. Stejná
   hranice jako u Story 1.9 (neutralizace jádra).

   Barvy jdou přes brand tokeny (`--brand-*`, `--primary`), aby karty
   respektovaly paletu instance a nesvítily KCHBO zlatou na cizím webu. */

/* Návrh počítá s mřížkou sidebar + 3 sloupce, ale `Page/detail.latte`
   sází obsah do `max-w-4xl` (896 px). Tohle je z něj vystoupení na šířku
   zbytku webu (`max-w-6xl`), aniž by se musela měnit šablona kvůli jedné
   stránce. `100vw` úmyslně ne — vyrobilo by vodorovný scroll o šířku
   svislého scrollbaru. */
.contacts {
    width: min(72rem, 100% + 16rem);
    margin-inline: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.contacts h2 {
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ink-primary, #111827);
    margin: 2.5rem 0 1.25rem;
}

.contacts__note {
    font-size: 0.875rem;
    color: #4b5563;
    margin-bottom: 1.25rem;
    max-width: 65ch;
}

/* Úvodní pás: vizitka spolku vlevo, výbor vpravo. Pod 900 px se skládá
   pod sebe — tři sloupce karet by se na mobilu stejně nevešly. */
.contacts__lead {
    display: grid;
    grid-template-columns: minmax(15rem, 19rem) 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* ── Vizitka spolku ── */
.org-card {
    background: var(--cream-50, #FDF8F0);
    border: 1px solid var(--brand-300, #c8a96e);
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.org-card__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    color: var(--brand-600, #8B6F47);
}

.org-card__icon svg {
    width: 100%;
    height: 100%;
}

.org-card__name {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--brand-700, #5C4A32);
    margin-bottom: 0.75rem;
}

.org-card__lines {
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brand-600, #8B6F47);
    line-height: 1.7;
}

.org-card__warning {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--brand-300, #c8a96e);
    font-size: 0.75rem;
    line-height: 1.6;
    color: #4b5563;
}

.org-card__warning strong {
    display: block;
    margin-bottom: 0.5rem;
    color: #b45309;
}

/* Odkazy do navazujících systémů klubu. Vlastní blok, ne další `__warning`:
   `.org-card a` schválně potlačuje podtržení uvnitř karty, takže bez téhle
   výjimky by odkazy vypadaly jako obyčejný šedý text. */
.org-card__links {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--brand-300, #c8a96e);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.contacts .org-card__links a {
    color: var(--primary, #a07d3a);
    border-bottom: 1px solid transparent;
}

.contacts .org-card__links a:hover {
    border-bottom-color: currentColor;
}

/* ── Mřížka karet ──
   Tři sloupce natvrdo, ne `auto-fit`: ten se řídí minimální šířkou karty,
   takže vedle vizitky (o 19 rem užší pás) spadl na dva sloupce a v sekcích
   pod ní vyskočil na čtyři. Návrh má všude tři a neúplný poslední řádek
   (8 disciplín, 3 členové kontrolní komise) je v něm taky. */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

/* Disciplín je osm — na tři sloupce by zbyly dvě osamocené karty. */
.contact-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contact-card {
    display: flex;
    flex-direction: column;
    background: var(--cream-50, #FDF8F0);
    border: 1px solid var(--brand-300, #c8a96e);
    border-radius: 0.75rem;
    padding: 1rem 1.125rem 1.125rem;
    min-height: 11rem;
}

/* Role vpravo nahoře, jméno vlevo dole — přesně jak v návrhu. `margin-top:
   auto` na patičce drží jména na jedné lince i u karet s různě dlouhým
   popisem. */
.contact-card__head {
    text-align: right;
    margin-bottom: 1rem;
}

.contact-card__role {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--brand-700, #5C4A32);
    line-height: 1.35;
}

.contact-card__period {
    font-size: 0.6875rem;
    color: var(--primary, #a07d3a);
    margin-top: 0.125rem;
}

.contact-card__desc {
    font-size: 0.75rem;
    line-height: 1.6;
    color: #4b5563;
    text-align: right;
    margin-top: 0.5rem;
}

.contact-card__foot {
    margin-top: auto;
}

.contact-card__name {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--brand-700, #5C4A32);
    margin-bottom: 0.25rem;
}

.contact-card__lines {
    font-size: 0.75rem;
    line-height: 1.65;
    color: var(--brand-600, #8B6F47);
}

/* `.prose a` dává obsahovým odkazům podtržení a brand barvu — uvnitř karty
   by e-mail vyčníval jako jediný zvýrazněný prvek. */
.contacts .contact-card__lines a,
.contacts .org-card a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.contacts .contact-card__lines a:hover,
.contacts .org-card a:hover {
    color: var(--primary, #a07d3a);
    border-bottom-color: currentColor;
}

/* Varianta s fotkou (chovatelská komise v návrhu). Bez `<img>` se
   `.contact-card__photo` chová jako šedý placeholder ze skicy. */
.contact-card--photo .contact-card__head {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.875rem;
    text-align: right;
}

.contact-card__photo {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 0.5rem;
    background: #d1d5db;
    object-fit: cover;
    overflow: hidden;
}

/* Disciplíny výcvikové komise nemají období ani adresu, jen jméno + mail,
   takže nepotřebují výšku plné karty. */
.contact-grid--compact .contact-card {
    min-height: 0;
}

/* Narozdíl od funkcionářů se jména NEsrovnávají na spodní hranu: karet je
   v řádku několik a mají jednoho až tři lidi, takže by `margin-top: auto`
   u těch krátkých vyrobil díru přes půl karty. */
.contact-card__people {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Zápisová čísla / plemenná kniha — patka stránky, ne karta. */
.contacts__registry {
    margin-top: 2.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--section-tint, #F9EFE0);
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: #4b5563;
}

.contacts__registry strong {
    color: var(--brand-700, #5C4A32);
}

/* Tři sloupce se vedle vizitky vejdou zhruba do 1080 px; níž se nejdřív
   zúží mřížka a teprve pod 900 px jde vizitka nad ni. */
@media (max-width: 1080px) {
    .contact-grid,
    .contact-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .contacts {
        width: 100%;
        left: 0;
        transform: none;
    }

    .contacts__lead {
        grid-template-columns: 1fr;
    }

    .contact-grid,
    .contact-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .contact-grid,
    .contact-grid--compact {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Legacy obsah CMS stránek
   ══════════════════════════════════════════════════════════════════════════

   Přes sto stránek je naimportovaných ze starého webu a nese jeho markup:
   `<table>` bez `<thead>`, `width="510"` na buňkách, `<b>`/`<i>` místo
   `<strong>`/`<em>`, inline `background-color`. Přepsat je ručně jako
   `klub-kontakty` nejde — je jich příliš. Tenhle blok je proto srovnává
   PLOŠNĚ, aby vypadaly jako tabulky ve zbytku webu (viz `Event/list.latte`),
   aniž by se sahalo do obsahu.

   Prezentační atributy (`width`, `border`, `cellpadding`) mají nulovou
   specificitu, takže je kterékoli pravidlo níž přebije. Inline `style` na
   buňkách naopak vyhrává — a to je záměr: žluté zvýraznění v textu nese
   význam, který klub vložil vědomě. */

.prose table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--brand-300, #c8a96e);
    border-radius: 0.75rem;
    overflow: hidden;
    margin: 1.5rem 0;
    font-size: 0.875rem;
    background: #fff;
}

.prose table td,
.prose table th {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid rgba(200, 169, 110, 0.25);
    text-align: left;
    vertical-align: top;
}

.prose table tr:last-child td,
.prose table tr:last-child th {
    border-bottom: 0;
}

/* Zebra až od druhého řádku — první je typicky hlavička a ta má vlastní
   pozadí. */
.prose table tbody tr:nth-child(even) {
    background: rgba(200, 169, 110, 0.05);
}

/* Hlavička. Starý editor `<thead>` nevkládal, takže se rozpoznává i podle
   toho, že jsou VŠECHNY buňky prvního řádku tučné — `:has()` to umí zjistit
   bez zásahu do obsahu. Bez té podmínky by obarvený pruh dostaly i tabulky
   používané jako layout, kde je první řádek běžná data. */
.prose table thead tr,
.prose table tbody tr:first-child:has(> th),
.prose table tbody tr:first-child:has(> td > b:only-child),
.prose table tbody tr:first-child:has(> td > strong:only-child) {
    background: var(--table-header, #8B6F47);
}

.prose table thead tr td,
.prose table thead tr th,
.prose table tbody tr:first-child:has(> th) th,
.prose table tbody tr:first-child:has(> td > b:only-child) td,
.prose table tbody tr:first-child:has(> td > strong:only-child) td {
    color: var(--ink-on-table-header, #fff);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    border-bottom: 0;
}

/* Široké tabulky (ceníky, výsledky, plemenná kniha) se na úzkém displeji
   posouvají uvnitř vlastního rámu — jinak by roztáhly celou stránku a
   vyrobily vodorovný scroll přes celý web. */
@media (max-width: 760px) {
    .prose table {
        display: block;
        overflow-x: auto;
    }
}

/* `.prose img` dává obrázkům stín, zaoblení a `margin: 1.5em auto`. Na
   fotkách v článku to sedí, ale legacy stránky jsou plné 16px ikonek u
   odkazů na soubory — ty pak vypadají jako vycentrované kartičky s vlastním
   řádkem, takže mezi nadpisem a odkazem zeje díra přes půl obrazovky
   (`klub-dokumenty-a-zapisy` jich má 377).

   Rozlišuje se podle přípony, ne podle `width` (CSS neumí porovnat jeho
   hodnotu) a ne podle umístění v buňce (půlka ikon je v `<p>`). Sonda nad
   obsahem VŠECH stránek: 954 výskytů `.gif`, z toho 3 unikátní soubory —
   `file_acrobat`, `ikona_xls`, `ikona_doc` — a ani jeden širší než 60 px.
   Fotky jsou bez výjimky jpg/png. Kdyby někdy přibyl obsahový gif, dostane
   textový tok místo vycentrovaného rámu; nic se nerozbije. */
.prose img[src$=".gif"],
.prose img[src$=".GIF"],
.prose td img,
.prose th img {
    display: inline;
    margin: 0 0.25rem;
    vertical-align: middle;
    box-shadow: none;
    border-radius: 0;
}

/* Kotvy typu `<a name="klub"></a>` ze starého webu jsou prázdné, ale
   `.prose a` jim dá podtržení a brand barvu — v textu se to projeví jako
   osamocený barevný artefakt. */
.prose a[name]:empty,
.prose a:not([href]) {
    display: inline;
    color: inherit;
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════
 *  Vizuální vrstva veřejného webu (2026-10) — kontrast, typografie, banner
 * ══════════════════════════════════════════════════════════════════════════
 * Přebíjí starší pravidla výš; drží se DESIGN.md (title-case nadpisy, verzálky
 * jen na krátké štítky, brand = akcent, AA kontrast).
 */

/* Obsah je vždy vidět. Dřív startoval na `opacity: 0` a odkrýval ho až JS při
   scrollu — dlouhé stránky, tisk i náhledy pak zůstávaly prázdné. Teď jen
   jednorázová krátká animace při načtení. */
.scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation: wb-fade-up .45s ease-out both;
}
.scroll-reveal.is-visible { opacity: 1; transform: none; }
@keyframes wb-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal { animation: none; }
}

/* Text: plný kontrast, komfortní řádkování. */
body { font-size: 16.5px; }
.prose { color: var(--ink-primary); font-size: 1.0625rem; line-height: 1.75; }
.prose a { color: var(--accent); text-decoration-thickness: 1px; }
.prose a:hover { color: var(--primary-hover); }
.prose h2, .prose h3 { font-family: var(--font-heading); letter-spacing: -0.01em; color: var(--ink-primary); }

/* ── Page banner: brand pruh, ale moderní — nadpis vlevo, title-case, bez
   stínu; drobečková navigace nad nadpisem (column-reverse, šablony se
   nemusí měnit). ── */
.page-banner {
    background:
        radial-gradient(1200px 300px at 85% -40%, color-mix(in srgb, var(--ink-on-page-banner) 14%, transparent), transparent 70%),
        linear-gradient(135deg, var(--page-banner), color-mix(in srgb, var(--page-banner) 82%, #000));
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
}
.page-banner::before { opacity: .25; }
.page-banner > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}
/* Pořadí explicitně: drobečky nad nadpisem, úvodní text (perex) pod ním.
   Dřív `column-reverse` — to dostalo drobečky nahoru, ale perex nad nadpis. */
.page-banner nav[aria-label="Drobečková navigace"] { order: -1; }
.page-banner > div > p {
    text-align: left !important;
    margin: 0 !important;
    max-width: 48rem !important;
    font-size: 1.0625rem !important;
    line-height: 1.6;
    opacity: .92;
}
.page-banner h1 {
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    filter: none !important;
    text-shadow: none !important;
    font-family: var(--font-heading);
    font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem) !important;
    line-height: 1.15;
    max-width: 30ch;
}
.page-banner nav[aria-label="Drobečková navigace"] {
    justify-content: flex-start !important;
    margin-top: 0 !important;
    opacity: .9;
    font-size: .875rem;
}

/* Karty: jemnější stín, zdvih na hover, brand akcent ve výrazném textu. */
.shadow-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px -6px rgba(15, 23, 42, .08) !important; }
.hover\:shadow-card-hover:hover { box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 32px -12px rgba(15, 23, 42, .18) !important; }
a.rounded-card, .rounded-card:has(> a:only-child) { transition: transform .18s ease, box-shadow .18s ease; }
a.rounded-card:hover { transform: translateY(-2px); }

/* Tlačítka bez verzálek (DESIGN.md: verzálky jen krátké štítky). */
.btn-primary, .btn-secondary { text-transform: none; letter-spacing: 0; }

/* Stránkování: aktivní stránka v kontrastní primary barvě. */
.pagination .active, .pagination [aria-current="page"] { background: var(--primary) !important; color: var(--ink-on-primary) !important; border-color: var(--primary) !important; }

/* Brand odstíny 300–700 jsou u světlých barev klubu (KCHBO) pro TEXT na bílé
   nečitelné (~2:1). Text proto bere `--accent` — generátor ho volí s AA
   kontrastem. Plochy (pozadí, rámečky) zůstávají na původních odstínech. */
.text-brand-300, .text-brand-400, .text-brand-500, .text-brand-600, .text-brand-700,
.hover\:text-brand-500:hover, .hover\:text-brand-600:hover, .hover\:text-brand-700:hover,
.group:hover .group-hover\:text-brand-600, .group:hover .group-hover\:text-brand-700 {
    color: var(--accent) !important;
}

/* Kontakty (vizitka spolku, karty funkcionářů) */
.org-card__icon, .org-card__name, .contact-card__role, .contact-card__name, .contacts__registry strong {
    color: var(--accent) !important;
}
.org-card__lines, .contact-card__lines { color: var(--ink-secondary) !important; }
.contact-card__lines a, .org-card__lines a { color: var(--ink-primary) !important; }
.contact-card__name { font-family: var(--font-heading); }

/* Starší tlačítka a hlavičky se světlým brand přechodem (300→400) a bílým
   textem — u světlých barev klubu nečitelné. Vykreslit jako plnou primary
   plochu s kontrastním inkem z generátoru palety. */
.from-brand-300.to-brand-400, .\!from-brand-300.\!to-brand-400 {
    background-image: none !important;
    background-color: var(--primary) !important;
    color: var(--ink-on-primary) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.from-brand-300.to-brand-400:hover, .\!from-brand-300.\!to-brand-400:hover { background-color: var(--primary-hover) !important; }

/* ── Dotažení stránek (fork) ── */
/* Globální styl `button[type=submit]` (světlý gradient, verzálky) nesmí
   přebít tokenová tlačítka — submit s .btn-primary/.btn-secondary vypadá
   stejně jako odkaz s touž třídou. */
button[type="submit"].btn-primary, input[type="submit"].btn-primary {
    background: var(--primary);
    color: var(--ink-on-primary);
    border-radius: 9999px;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    padding: 0.75rem 1.25rem;
}
button[type="submit"].btn-primary:hover, input[type="submit"].btn-primary:hover {
    background: var(--primary-hover, var(--primary));
    transform: none;
    box-shadow: none;
}
button[type="submit"].btn-secondary, input[type="submit"].btn-secondary {
    background: var(--color-surface-raised, #fff);
    color: var(--primary);
    border: 1px solid var(--color-border-strong, #cbd5e1);
    border-radius: 9999px;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}
/* Formulářové vstupy na veřejných stránkách: ≥16 px (iOS nezoomuje). */
.auth-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.auth-card select, .auth-card textarea { font-size: 1rem; }

/* Telefon a e-mail v kartách Kontaktů jsou cíl pro prst — aspoň 24 px na
   výšku (WCAG 2.2, 2.5.8). Bez toho měly 16 px a ležely těsně pod sebou. */
.contacts .contact-card__lines a,
.contacts .org-card__lines a {
    display: inline-block;
    padding-block: 4px;
}

/* ── Barevné pruhy hlavní stránky ──
   Pruhy střídají světlý tón (`--section-tint`) a tmavou plochu v barvě klubu
   (`--page-banner`), aby stránka nebyla jen bílá plocha s bílými kartami.
   Vše jde přes tokeny palety → každý klub má pruhy ve svých barvách a tmavý
   režim (section-tint → surface-subtle) funguje bez dalších pravidel. */
.wb-band-dots {
    background-image: radial-gradient(color-mix(in srgb, var(--primary) 16%, transparent) 1.2px, transparent 1.2px);
    background-size: 22px 22px;
}
.wb-band-dots-light {
    background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1.2px, transparent 1.2px);
    background-size: 22px 22px;
}
/* Vlnka mezi pruhy — SVG s fill="currentColor", barvu dává text-* třída. */
.wb-wave { display: block; width: 100%; height: 48px; }
@media (min-width: 768px) { .wb-wave { height: 72px; } }
/* Nadpisová „nadlinka“ s krátkou barevnou čárkou. */
.wb-eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
}
.wb-eyebrow::before {
    content: ""; width: 1.75rem; height: 3px; border-radius: 9999px; background: currentColor;
}
/* Tón pruhu: znatelnější než `--section-tint` (ten je pro drobné plochy a na
   celé šířce splýval s pozadím stránky). V tmavém režimu se míchá s tmavým
   povrchem, takže zůstane tmavý. */
.wb-tint-bg { background-color: color-mix(in srgb, var(--primary) 8%, var(--surface-base)); }
.wb-tint-fg { color: color-mix(in srgb, var(--primary) 8%, var(--surface-base)); }

/* ── Podstránky: bohatší hlavička (platí pro VŠECHNY .page-banner) ──
   Dekorativní kruhy přes ::after a měkký oblouk dole, aby přechod do obsahu
   nebyl ostrá hrana. Kruhy jsou z ink-on-page-banner → fungují ve světlé
   i tmavé paletě klubu. */
.page-banner {
    padding-top: 3.25rem !important;
    padding-bottom: 4rem !important;
    border-bottom-left-radius: 50% 2.25rem;
    border-bottom-right-radius: 50% 2.25rem;
}
.page-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--ink-on-page-banner) 12%, transparent) 0 7rem, transparent 7.05rem),
        radial-gradient(circle at 80% 110%, color-mix(in srgb, var(--ink-on-page-banner) 8%, transparent) 0 11rem, transparent 11.05rem),
        radial-gradient(circle at 4% -20%, color-mix(in srgb, var(--ink-on-page-banner) 7%, transparent) 0 9rem, transparent 9.05rem);
}
.page-banner > div { z-index: 1; }

/* ── Detail stránky: text v „papírové" kartě ── */
.page-paper {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
}
@media (min-width: 768px) { .page-paper { padding: 2.75rem 3rem; } }
.page-paper::after { content: ""; display: block; clear: both; }
/* První odstavec jako úvod — větší písmo. */
.page-paper > p:first-of-type { font-size: 1.125rem; color: var(--ink-primary); }
.page-paper h2 {
    position: relative;
    padding-left: 1rem;
    clear: both;
}
.page-paper h2::before {
    content: "";
    position: absolute; left: 0; top: .2em; bottom: .2em;
    width: 4px; border-radius: 9999px; background: var(--primary);
}
.page-paper h2:first-child { margin-top: 0; }

/* ── Malé fotky ze starého webu → polaroidy obtékané textem ──
   Třídu `prose-thumb` dává app.js obrázkům užším než 260 px (CSS neumí
   číst přirozenou šířku). Střídavě vpravo/vlevo, lehce natočené. */
/* Telefon: polaroid vycentrovaný nad textem (obtékání by nechalo vedle fotky
   sloupec na dvě slova). Od 640 px obtékaný, střídavě vpravo/vlevo. */
.prose img.prose-thumb {
    display: block;
    width: 168px;
    max-width: 60%;
    margin: 1.25rem auto 1.5rem;
    padding: .5rem .5rem 1.5rem;
    background: #fff;
    border-radius: .375rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 10px 24px rgba(15, 23, 42, .14);
    transform: rotate(1.5deg);
    transition: transform .25s ease;
}
.prose img.prose-thumb--left { transform: rotate(-1.5deg); }
.prose img.prose-thumb:hover { transform: rotate(0) scale(1.04); }
@media (min-width: 640px) {
    .prose img.prose-thumb {
        float: right;
        clear: right;
        max-width: none;
        margin: .35rem 0 1rem 1.5rem;
    }
    .prose img.prose-thumb--left {
        float: left;
        clear: left;
        margin: .35rem 1.5rem 1rem 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .prose img.prose-thumb, .prose img.prose-thumb--left { transform: none; transition: none; }
}
/* Skrytý duplicitní nadpis (app.js) nesmí zabrat místo ani posunout „úvod". */
.page-paper > [hidden] + p { font-size: 1.125rem; color: var(--ink-primary); }
.page-paper > [hidden] + * { margin-top: 0; }

/* ── Lightbox fotogalerie (app.js) ── */
.wb-lightbox {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(8, 10, 15, .94);
    display: flex; align-items: center; justify-content: center;
    padding: 3.5rem 4rem 3rem;
}
.wb-lightbox[hidden] { display: none; }
.wb-lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.wb-lightbox__figure img { max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; border-radius: .25rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.wb-lightbox__figure figcaption { color: #e5e7eb; font-size: .95rem; text-align: center; max-width: 60ch; }
.wb-lightbox__figure figcaption:empty { display: none; }
.wb-lightbox__close, .wb-lightbox__nav {
    position: absolute; color: #fff; background: rgba(255, 255, 255, .1);
    border-radius: 9999px; width: 3rem; height: 3rem; font-size: 2rem; line-height: 1;
    display: grid; place-items: center; transition: background .2s;
}
.wb-lightbox__close:hover, .wb-lightbox__nav:hover { background: rgba(255, 255, 255, .22); }
.wb-lightbox__close:focus-visible, .wb-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wb-lightbox__close { top: 1rem; right: 1rem; }
.wb-lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.wb-lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.wb-lightbox__count { position: absolute; top: 1.4rem; left: 1.25rem; color: #cbd5e1; font-size: .875rem; font-weight: 600; }
@media (max-width: 640px) {
    .wb-lightbox { padding: 3.5rem .5rem 2rem; }
    .wb-lightbox__nav { top: auto; bottom: 1rem; transform: none; }
}

/* ── Hlavička: položky menu a tlačítka se nezalamují ──
   S přepínačem jazyků je v hlavičce o položku víc; dvouřádkové „O / klubu"
   nebo „Přihlásit / se" vypadá rozbitě. Na užších desktopech se zúží mezery. */
.site-header__nav a, .site-header__actions a, .site-header__actions button, .site-header__brand > span { white-space: nowrap; }
.site-header__inner { gap: 1rem; }
@media (min-width: 1024px) {
    .site-header__nav a { padding-left: .6rem !important; padding-right: .6rem !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .site-header__nav a { padding-left: .5rem !important; padding-right: .5rem !important; font-size: 14px !important; }
    .site-header__actions { gap: .5rem !important; }
    /* Registrace je i na přihlašovací stránce a v mobilním menu. */
    .site-header__register { display: none; }
}

/* Povinná pole ve formulářích webu (Nette dá popisku třídu `required`). */
.page-paper label.required::after {
    content: " *";
    color: var(--accent, #be123c);
    font-weight: 700;
}