/* ===========================================================================
   karate.nmnm.cz — jediný stylopis webu.
   Psáno mobilem napřed; širší obrazovky jen přidávají prostor a sloupce.

   Barvy jsou pojmenované proměnné na :root. Tmavý režim je přepíše na dvou
   místech: podle nastavení systému (když si návštěvník nevybral jinak)
   a natvrdo, když si vybral přepínačem. Nic jiného se v kódu nemění.

   Vzhled vychází z toho obrázku v záhlaví: dřevořez má tmavě modrou, sytou
   červeň a krémovou. Tyhle tři barvy drží celý web pohromadě, aby pruh nahoře
   nevypadal jako nalepený z jiného webu.
   =========================================================================== */

:root {
    --pozadi:         #f5f3ee;   /* krémová z papíru dřevořezu */
    --pozadi-karta:   #fffdf9;
    --pozadi-tlumeny: #ebe6dc;
    --text:           #1a1c22;
    --text-tlumeny:   #5d5a53;
    --akcent:         #9d2b2b;   /* červeň Fudži */
    --akcent-tmavy:   #7a2020;
    --akcent-text:    #fffdf9;
    --modra:          #1f3f6b;   /* modrá oblohy */
    --linka:          #ddd7ca;
    --stin:           0 1px 2px rgb(26 28 34 / 6%), 0 6px 18px rgb(26 28 34 / 6%);
    --stin-zvednuty:  0 2px 4px rgb(26 28 34 / 8%), 0 14px 32px rgb(26 28 34 / 12%);
    --ok:             #1f6b3a;
    --chyba:          #9d2b2b;

    --patkove: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --bezpatkove: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --sirka:    66rem;
    --mera:     38rem;           /* délka řádku, na kterou se ještě dobře čte */
    --radius:   12px;
    --mezera:   1.25rem;
    --pruh-vyska: 150px;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-motiv="svetly"]) {
        --pozadi:         #15171c;
        --pozadi-karta:   #1d2027;
        --pozadi-tlumeny: #252932;
        --text:           #ece9e2;
        --text-tlumeny:   #a5a096;
        --akcent:         #e0706c;
        --akcent-tmavy:   #c05450;
        --akcent-text:    #15171c;
        --modra:          #7da3d4;
        --linka:          #333844;
        --stin:           0 1px 2px rgb(0 0 0 / 40%), 0 6px 18px rgb(0 0 0 / 30%);
        --stin-zvednuty:  0 2px 6px rgb(0 0 0 / 45%), 0 16px 34px rgb(0 0 0 / 40%);
        --ok:             #6fc48c;
        --chyba:          #e0706c;

        color-scheme: dark;
    }
}

:root[data-motiv="tmavy"] {
    --pozadi:         #15171c;
    --pozadi-karta:   #1d2027;
    --pozadi-tlumeny: #252932;
    --text:           #ece9e2;
    --text-tlumeny:   #a5a096;
    --akcent:         #e0706c;
    --akcent-tmavy:   #c05450;
    --akcent-text:    #15171c;
    --modra:          #7da3d4;
    --linka:          #333844;
    --stin:           0 1px 2px rgb(0 0 0 / 40%), 0 6px 18px rgb(0 0 0 / 30%);
    --stin-zvednuty:  0 2px 6px rgb(0 0 0 / 45%), 0 16px 34px rgb(0 0 0 / 40%);
    --ok:             #6fc48c;
    --chyba:          #e0706c;

    color-scheme: dark;
}

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

body {
    margin: 0;
    background: var(--pozadi);
    color: var(--text);
    font: 1.02rem/1.7 var(--bezpatkove);
    -webkit-text-size-adjust: 100%;
    /* Dlouhá adresa v textu nebo název souboru nesmí roztáhnout stránku do šířky. */
    overflow-wrap: break-word;
}

@media (max-width: 24rem) {
    .znacka-text strong { font-size: .98rem; }
    .znacka-symbol { width: 2.2rem; height: 2.2rem; font-size: 1.2rem; }
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--akcent); text-underline-offset: .18em; }
a:hover { text-decoration: none; }

h1, h2, h3 {
    font-family: var(--patkove);
    line-height: 1.22;
    text-wrap: balance;
    font-weight: 600;
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.5rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); }
h3 { font-size: 1.15rem; }

.pas {
    width: 100%;
    max-width: var(--sirka);
    margin-inline: auto;
    padding-inline: 1rem;
}

main.pas { padding-block: 2.25rem 3.5rem; }

.preskoc { position: absolute; left: -9999px; }
.preskoc:focus {
    left: 1rem; top: 1rem; z-index: 10;
    background: var(--akcent); color: var(--akcent-text);
    padding: .5rem .75rem; border-radius: var(--radius);
}

/* --- hlavička ------------------------------------------------------------ */

.hlavicka {
    background: var(--pozadi-karta);
    border-bottom: 1px solid var(--linka);
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Mřížka, ne `flex-wrap`.
   ⛔ Se zalamovaným flexem se na úzkém telefonu přepínač motivu vytratil úplně —
   vyšlo to ze zkoušky v 390 px. V mřížce má každý prvek určené místo bez ohledu
   na to, jak dlouhý je název oddílu: nahoře značka a přepínač, pod nimi nabídka. */
.hlavicka .pas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem 1rem;
    padding-block: .8rem;
}

.znacka {
    display: flex; align-items: center; gap: .7rem;
    text-decoration: none; color: inherit; margin-right: auto;
    /* ⛔ Bez `min-width: 0` se tenhle pruh nesmrští pod šířku svého textu.
       Na úzkém telefonu pak vytlačí přepínač motivu úplně mimo obrazovku
       a celá stránka se dá posouvat do strany. */
    min-width: 0;
}
.znacka-symbol, .prepinac-motivu { flex: none; }
.znacka-text { min-width: 0; }

.znacka-symbol {
    display: grid; place-items: center;
    width: 2.6rem; height: 2.6rem;
    background: var(--akcent);
    color: var(--akcent-text);
    border-radius: 4px;
    font-size: 1.45rem;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 15%);
}

.znacka-text strong {
    display: block;
    font-family: var(--patkove);
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}
.znacka-text small {
    display: block;
    color: var(--text-tlumeny);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Místa v mřížce se přidělují natvrdo. Automatické umísťování jde podle pořadí
   ve zdroji, takže by přepínač spadl pod nabídku na třetí řádek — a přesně to
   se stalo. Značka a přepínač patří na první řádek, nabídka pod ně. */
.znacka { grid-row: 1; grid-column: 1; }
.prepinac-motivu { grid-row: 1; grid-column: 2; }

.nabidka {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .35rem 1.25rem;
    grid-row: 2;
    grid-column: 1 / -1;
    border-top: 1px solid var(--linka);
    padding-top: .65rem;
}

.nabidka a {
    color: var(--text);
    text-decoration: none;
    padding: .2rem 0;
    border-bottom: 2px solid transparent;
    font-size: .97rem;
}
.nabidka a:hover { border-bottom-color: var(--akcent); color: var(--akcent); }

.prepinac-motivu {
    display: grid; place-items: center;
    width: 2.6rem; height: 2.6rem;
    border: 1px solid var(--linka);
    border-radius: 4px;
    background: var(--pozadi-tlumeny);
    color: var(--text);
    cursor: pointer; font-size: 1.05rem; line-height: 1;
    transition: border-color .15s, background .15s;
}
.prepinac-motivu:hover { border-color: var(--akcent); background: var(--pozadi-karta); }

/* Ve světlém režimu je vidět měsíc (co se stane po kliknutí), v tmavém slunce. */
.prepinac-motivu .ikona-mesic { display: block; }
.prepinac-motivu .ikona-slunce { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-motiv="svetly"]) .prepinac-motivu .ikona-mesic { display: none; }
    :root:not([data-motiv="svetly"]) .prepinac-motivu .ikona-slunce { display: block; }
}
:root[data-motiv="tmavy"] .prepinac-motivu .ikona-mesic { display: none; }
:root[data-motiv="tmavy"] .prepinac-motivu .ikona-slunce { display: block; }

@media (min-width: 46rem) {
    /* Od téhle šířky se vejde všechno do jednoho řádku: značka · nabídka · přepínač. */
    .hlavicka .pas { grid-template-columns: auto minmax(0, 1fr) auto; }
    .nabidka {
        grid-row: 1;
        grid-column: 2;
        justify-content: flex-end;
        border-top: 0;
        padding-top: 0;
    }
    .prepinac-motivu { grid-column: 3; }
}

/* --- pruh s obrázkem pod nabídkou ---------------------------------------- */

.pruh {
    position: relative;
    height: var(--pruh-vyska);
    overflow: hidden;
    background: var(--modra);
    border-bottom: 3px solid var(--akcent);
}

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

/* Tenký přechod dolů, aby obrázek nekončil ostrým řezem do obsahu. */
.pruh::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 18%));
    pointer-events: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-motiv="svetly"]) .pruh img { filter: brightness(.82) saturate(.92); }
}
:root[data-motiv="tmavy"] .pruh img { filter: brightness(.82) saturate(.92); }

@media (min-width: 60rem) {
    :root { --pruh-vyska: 190px; }
}

/* --- výpis zpráv --------------------------------------------------------- */

body:not(.administrace) main > h1 {
    margin-bottom: 1.5rem;
    padding-bottom: .5rem;
    position: relative;
}
body:not(.administrace) main > h1::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 3rem; height: 3px;
    background: var(--akcent);
}

.karta {
    background: var(--pozadi-karta);
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    box-shadow: var(--stin);
    overflow: hidden;
    margin-bottom: var(--mezera);
    display: grid;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.karta:hover {
    transform: translateY(-2px);
    box-shadow: var(--stin-zvednuty);
    border-color: color-mix(in srgb, var(--akcent) 35%, var(--linka));
}

.karta-obrazek { overflow: hidden; }
.karta-obrazek img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .4s ease;
}
.karta:hover .karta-obrazek img { transform: scale(1.03); }

.karta-text { padding: 1.15rem 1.35rem 1.35rem; }
.karta-text h2 { margin: .2rem 0 .55rem; }
.karta-text h2 a { color: inherit; text-decoration: none; }
.karta:hover .karta-text h2 a { color: var(--akcent); }
.karta-text p { margin: 0 0 .7rem; color: var(--text-tlumeny); }

.datum {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--text-tlumeny);
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0;
}
.datum::before {
    content: "";
    width: .5rem; height: .5rem;
    background: var(--akcent);
    transform: rotate(45deg);
    flex: none;
}

.dal { font-weight: 600; text-decoration: none; font-size: .95rem; }
.dal:hover { text-decoration: underline; }

@media (min-width: 42rem) {
    .karta { grid-template-columns: 17rem 1fr; }
    .karta-obrazek img { height: 100%; aspect-ratio: auto; min-height: 100%; }
    .karta:not(:has(.karta-obrazek)) { grid-template-columns: 1fr; }
}

.prazdno {
    background: var(--pozadi-tlumeny);
    border: 1px dashed var(--linka);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    color: var(--text-tlumeny);
    text-align: center;
}

.strankovani { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 2rem; }
.strankovani a, .strankovani .tady {
    display: grid; place-items: center;
    min-width: 2.4rem; height: 2.4rem;
    border: 1px solid var(--linka);
    border-radius: 4px;
    text-decoration: none;
    background: var(--pozadi-karta);
}
.strankovani a:hover { border-color: var(--akcent); }
.strankovani .tady { background: var(--akcent); color: var(--akcent-text); border-color: var(--akcent); }

/* --- článek a stránka ---------------------------------------------------- */

.clanek {
    background: var(--pozadi-karta);
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    box-shadow: var(--stin);
    padding: 1.6rem 1.3rem 2.2rem;
}
.clanek.uzky { max-width: 27rem; margin-inline: auto; }

/* 🕳️ Délku řádku určuje ŠÍŘKA KARTY, ne `max-width` uvnitř ní.
   Dokud byla karta 54rem a text v ní 38rem, zbývalo vpravo ~180 px prázdna —
   a to nevypadá jako záměr, ale jako rozbitá sazba (nahlásil správce 20. 9.).
   Karta je proto užší a text ji vyplní: 46rem minus vnitřní okraje ≈ 70 znaků
   na řádek, což je přesně rozmezí, na kterém se souvislý text čte nejlíp.
   V administraci to neplatí — tam se do šířky roztahují tabulky. */
body:not(.administrace) .clanek { max-width: 46rem; margin-inline: auto; }
.clanek p, .clanek ul { margin-block: 0 1.1rem; }
.clanek ul { padding-left: 1.2rem; }
.clanek li { margin-bottom: .35rem; }

.clanek h1 {
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--linka);
    margin-bottom: 1.2rem;
}
.clanek h2 { margin: 2rem 0 .7rem; }
.clanek h3 { margin: 1.5rem 0 .5rem; color: var(--text-tlumeny); }

/* První odstavec článku čte oko jako úvod — ať tak i vypadá. */
.clanek > .datum + h1 + p { font-size: 1.1rem; color: var(--text); }

.zpet { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linka); }
.zpet a { text-decoration: none; font-weight: 600; }
.zpet a:hover { text-decoration: underline; }

@media (min-width: 46rem) {
    .clanek { padding: 2.5rem 2.75rem 3rem; }
}

/* --- přílohy ------------------------------------------------------------- */

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .65rem;
    margin: 1.75rem 0;
}
.galerie-polozka { overflow: hidden; border-radius: var(--radius); display: block; }
.galerie-polozka img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    transition: transform .3s ease;
}
.galerie-polozka:hover img { transform: scale(1.05); }

/* Jediný obrázek nemá být malá dlaždice v rohu — dostane celou šířku textu. */
.galerie:has(.galerie-polozka:only-child) { grid-template-columns: 1fr; }
.galerie:has(.galerie-polozka:only-child) img { aspect-ratio: 16 / 10; }

.nadpis-priloh { margin-top: 2rem; }
.prilohy { list-style: none; padding-left: 0; }
.prilohy li {
    margin-bottom: .4rem;
    padding: .55rem .75rem;
    border: 1px solid var(--linka);
    border-radius: 6px;
    background: var(--pozadi-tlumeny);
    display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap;
}
.prilohy li::before { content: "↓"; color: var(--akcent); font-weight: 700; }
.prilohy a { text-decoration: none; font-weight: 600; }
.prilohy a:hover { text-decoration: underline; }

.drobne { color: var(--text-tlumeny); font-size: .86rem; }

/* --- patička ------------------------------------------------------------- */

.paticka {
    border-top: 1px solid var(--linka);
    background: var(--pozadi-karta);
    padding-block: 2rem;
    margin-top: 3rem;
}
.paticka-mrizka { display: grid; gap: 1.25rem; }
.paticka p { margin: 0 0 .3rem; }
.paticka-nazev { font-family: var(--patkove); font-size: 1.1rem; font-weight: 600; }
.paticka-odkazy a { text-decoration: none; font-weight: 600; }

@media (min-width: 48rem) {
    .paticka-mrizka { grid-template-columns: 1fr 1.5fr auto; align-items: start; }
    .paticka-odkazy { text-align: right; }
}

/* ===========================================================================
   Administrace — střídmě, ať je poznat, že je to jiné místo než web.
   =========================================================================== */

.zahlavi {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: .75rem;
    margin-bottom: 1.25rem;
}
.zahlavi h1 { margin: 0; }

.formular { display: grid; gap: 1.1rem; }
.formular label { display: grid; gap: .35rem; font-weight: 600; }
.formular label.radek {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 400; flex-wrap: wrap;
}

input[type="text"], input[type="password"], input[type="date"],
input[type="datetime-local"], input[type="number"], input[type="file"], textarea {
    font: inherit;
    color: var(--text);
    background: var(--pozadi);
    border: 1px solid var(--linka);
    border-radius: 6px;
    padding: .55rem .7rem;
    width: 100%;
}
textarea { resize: vertical; min-height: 9rem; font-family: inherit; line-height: 1.6; }

input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--akcent);
    outline-offset: 2px;
}

.napoveda { font-weight: 400; color: var(--text-tlumeny); font-size: .85rem; }
.napoveda code, .clanek code {
    background: var(--pozadi-tlumeny);
    padding: .05rem .3rem;
    border-radius: 4px;
    font-size: .92em;
}

.skupina {
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    padding: 1rem;
    display: grid;
    gap: .6rem;
}
.skupina legend { font-weight: 600; padding-inline: .4rem; }

button, .tlacitko {
    font: inherit;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid var(--linka);
    background: var(--pozadi-tlumeny);
    color: var(--text);
    padding: .55rem 1rem;
    text-decoration: none;
    display: inline-block;
}
button:hover, .tlacitko:hover { border-color: var(--akcent); }
button.hlavni, .tlacitko.hlavni {
    background: var(--akcent);
    border-color: var(--akcent);
    color: var(--akcent-text);
    font-weight: 600;
    justify-self: start;
}
button.hlavni:hover, .tlacitko.hlavni:hover { background: var(--akcent-tmavy); border-color: var(--akcent-tmavy); }
button.jako-odkaz {
    background: none; border: 0; padding: 0;
    color: var(--akcent); text-decoration: underline;
}
button.nebezpeci { color: var(--chyba); }

.v-radku, .v-nabidce { display: inline; }

.tabulka {
    width: 100%;
    border-collapse: collapse;
    background: var(--pozadi-karta);
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    overflow: hidden;
}
.tabulka th, .tabulka td {
    text-align: left;
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--linka);
    vertical-align: top;
}
.tabulka th {
    background: var(--pozadi-tlumeny);
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.tabulka tr:last-child td { border-bottom: 0; }
.tabulka .vpravo { text-align: right; white-space: nowrap; }

.odznak {
    display: inline-block;
    font-size: .78rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--linka);
    background: var(--pozadi-tlumeny);
    color: var(--text-tlumeny);
}
.odznak-publikovano { color: var(--ok); border-color: currentColor; }
.odznak-naplanovano { color: var(--akcent); border-color: currentColor; }

.hlaska {
    border-radius: var(--radius);
    padding: .8rem 1rem;
    border: 1px solid currentColor;
    margin-bottom: 1rem;
}
.hlaska-ok { color: var(--ok); }
.hlaska-chyba { color: var(--chyba); }

.sprava-priloh { list-style: none; padding: 0; display: grid; gap: .6rem; }
.sprava-priloh li {
    display: flex; align-items: center; gap: .75rem;
    border: 1px solid var(--linka);
    border-radius: var(--radius);
    padding: .5rem .75rem;
    flex-wrap: wrap;
}
.sprava-priloh .mini {
    width: 3.5rem; height: 3.5rem;
    object-fit: cover;
    border-radius: 6px;
    display: grid; place-items: center;
    background: var(--pozadi-tlumeny);
    font-size: 1.4rem;
}
.sprava-priloh .nazev { flex: 1 1 12rem; }

@media (max-width: 34rem) {
    .tabulka thead { display: none; }
    .tabulka tr { display: grid; gap: .2rem; padding: .6rem .75rem; border-bottom: 1px solid var(--linka); }
    .tabulka td { border: 0; padding: 0; }
    .tabulka .vpravo { text-align: left; }
}

/* Kdo si vypnul animace v systému, ať je nemá ani tady. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}