/* =========================================================================
   Telefon — společná úprava celého webu
   -------------------------------------------------------------------------
   Načítá se jako poslední (i po stylech komponent), takže přebíjí desktopová
   pravidla bez !important. Nic se nemění nad 720 px — počítač zůstává, jak je.
   Zásady: nic se neposouvá do strany, ovládací prvky mají aspoň 44 px, políčka
   mají 16 px (menší písmo iPhone při psaní přibližuje stránku) a navigace
   nesmí zabrat půlku displeje, ať je obsah vidět hned.
   ========================================================================= */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media screen and (max-width: 720px) {

    /* --- Základ ----------------------------------------------------------- */

    body {
        font-size: 1rem;
        overflow-wrap: break-word;
    }

    img, svg, video, iframe {
        max-width: 100%;
    }

    h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
    h2 { font-size: clamp(1.4rem, 6.4vw, 1.8rem); }
    h3 { font-size: 1.2rem; }

    /* Dlouhá jména, e-maily a odkazy se zalomí, místo aby vytlačily stránku. */
    h1, h2, h3, h4, td, th, label, .karta, .upozorneni, .stitek {
        overflow-wrap: anywhere;
    }

    .stitek { white-space: normal; }

    /* --- Pracovní stránky: míň vzduchu nahoře i dole ---------------------- */

    .obsah-stranky {
        padding-top: calc(var(--vyska-menu) + 1rem);
        padding-bottom: 2.5rem;
    }

    html:has(.sprava-menu) .obsah-stranky {
        padding-top: calc(var(--vyska-menu) + 0.75rem);
    }

    .karta {
        padding: 1.25rem;
        border-radius: 1.25rem;
    }

    .hlavicka-stranky {
        align-items: stretch;
        flex-direction: column;
        gap: 0.75rem;
    }

    /* --- Podmenu správy: dva řádky po čtyřech, ne tři řádky přes půl displeje */

    .sprava-menu {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.2rem;
        width: 100%;
        margin: 0 0 1rem;
        padding: 0.3rem;
    }

    .sprava-menu a {
        justify-content: center;
        min-height: 2.75rem;
        padding: 0.4rem 0.15rem;
        font-size: 0.8rem;
        text-align: center;
        line-height: 1.15;
    }

    /* --- Kroky ročníku: mřížka 3 × 2 s číslem nad popiskem ---------------- */

    .kroky {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.2rem;
        margin: 1rem 0 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid var(--platno-3);
    }

    .kroky a {
        flex-direction: column;
        justify-content: flex-start;
        gap: 0.25rem;
        min-height: 4rem;
        margin: 0;
        padding: 0.5rem 0.15rem;
        border: 0;
        border-radius: 0.75rem;
        font-size: 0.78rem;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
    }

    .kroky a.active {
        background: #fff;
        box-shadow: var(--stin-maly);
    }

    .kroky .cislo {
        width: 1.7rem;
        height: 1.7rem;
    }

    /* „Přehled“ nemá číslo — vyrovná se výškou ke kamarádům v řádku. */
    .kroky a:first-child::before {
        content: "";
        width: 1.7rem;
        height: 1.7rem;
        background: currentColor;
        opacity: 0.55;
        -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 2px, transparent 2.5px);
                mask: radial-gradient(circle at 50% 50%, #000 0 2px, transparent 2.5px);
    }

    /* --- Ovladatelnost prstem --------------------------------------------- */

    .tl,
    .btn {
        min-height: 2.9rem;
    }

    .tl-mini {
        min-height: 2.5rem;
        padding: 0.45rem 0.9rem;
        font-size: 0.88rem;
    }

    .form-control,
    .form-select,
    input:not([type=checkbox]):not([type=radio]):not([type=range]),
    select,
    textarea {
        min-height: 2.9rem;
        font-size: 1rem; /* 16 px: iPhone při menším písmu přiblíží stránku */
    }

    textarea { min-height: 6rem; }

    input[type=checkbox],
    input[type=radio] {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Řádky s tlačítky se zalomí a tlačítka se roztáhnou — snadno se trefí. */
    .akce,
    td .akce {
        white-space: normal;
    }

    .filtry {
        flex-direction: column;
        align-items: stretch;
    }

    .filtry .form-control,
    .filtry .form-select {
        max-width: none;
        width: 100%;
    }

    /* Vyhledávací pole bez pevné šířky z inline stylu. */
    input[type=search] {
        max-width: none !important;
        width: 100%;
    }

    /* --- Karty z tabulek: popisek nad hodnotou na úzkém telefonu ---------- */

    .tabulka tbody tr {
        padding: 0.65rem 0.9rem;
    }

    /* Užší sloupec s popiskem — hodnota (a tlačítka vedle sebe) dostane víc místa. */
    .tabulka td,
    .tabulka-prihlasky td {
        padding-left: 5.75rem;
    }

    .tabulka td::before,
    .tabulka-prihlasky td::before {
        width: 5.25rem;
        font-size: 0.7rem;
        letter-spacing: 0.02em;
    }

    .tabulka td:not([data-popisek]),
    .tabulka td[data-popisek=""],
    .tabulka-prihlasky td:not([data-popisek]),
    .tabulka-prihlasky td[data-popisek=""] {
        padding-left: 0;
    }

    /* Výběry a pole v kartě (postel, družina, počet bodů) přes celou šířku hodnoty,
       ať se text nezkracuje a dobře se trefí. */
    .tabulka td select,
    .tabulka td .form-select,
    .tabulka td input:not([type=checkbox]):not([type=radio]),
    .tabulka td textarea {
        width: 100%;
        max-width: 100%;
    }

    /* Řádek jen s tlačítky: zalomí se a tlačítka mají mezi sebou místo. */
    .tabulka td:not([data-popisek]),
    .tabulka td[data-popisek=""] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .tabulka td .tl-mini {
        margin: 0.15rem 0.25rem 0.15rem 0;
    }

    /* Odkazy v textu se dobře trefí, když mají kolem sebe trochu místa. */
    .tabulka td a,
    .pravidlo summary {
        padding-block: 0.1rem;
    }

    .pravidlo summary {
        min-height: 2.9rem;
    }

    /* Odkazy v patičce a drobné odkazy: větší plocha pro palec. */
    .paticka a {
        display: inline-block;
        padding-block: 0.45rem;
    }

    .rocnik-vsechny,
    .zpet,
    .tl-odkaz {
        display: inline-flex;
        align-items: center;
        min-height: 2.5rem;
    }

    /* Dialogy a plovoucí okna nikdy nepřesáhnou displej. */
    dialog,
    .dialog,
    .modal-dialog {
        max-width: calc(100vw - 1.5rem);
    }
}

@media screen and (max-width: 380px) {

    .karta {
        padding: 1rem;
    }

    .sprava-menu a,
    .kroky a {
        font-size: 0.72rem;
    }

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