/**
 * Template 2026-001 — Výpis produktů na mobilu: DVA v řadě (default)
 *
 * Krok 194: nová komponenta pro nastavení počtu karet produktů na mobilu.
 * Desktop layout (25% = 4 v řadě) zachován ze sablona.css:1248.
 * Změna se aplikuje POUZE na mobilu (max-width: 768px) — 2 karty vedle sebe.
 *
 * Krok 195: fix — jádrový sablona.css má vlastní mobile pravidla s
 *  `max-width: calc(50% - 8px)` na obou selektorech `.polozky_div` i
 *  `.polozky > div.polozka`. Musíme přebít flex + width + max-width + min-width.
 */

@media (max-width: 768px) {
    div.polozky_div,
    div.polozky {
        gap: 10px !important;
    }
    div.polozky_div div.polozka,
    div.polozky > div.polozka {
        flex: 0 0 calc(50% - 5px) !important;
        width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        min-width: 0 !important;
    }
    /* Kompaktnější padding fota + název, aby se karta vešla na uzsi rady. */
    div.polozka_foto {
        aspect-ratio: 1 / 1;
        padding: calc(8px * var(--tpl-card-foto-pad-on, 1)) !important;
    }
    div.polozka_nazev {
        font-size: 13px !important;
        padding: 0 8px !important;
        min-height: 32px;
    }
    div.polozka_cena {
        padding: 0 8px 8px !important;
        font-size: 15px !important;
    }
    div.polozka_odkaz {
        padding: 8px !important;
    }
}

/* Krok 196: safety fallback — pod prahem přepnout na 1 v řadě. Práh posunut
   z 480 na 408 na přání — 2 v řadě mají platit od 409px (pozor: na úzkém
   telefonu jsou karty vysoké a úzké, viz měření). */
@media (max-width: 408px) {
    div.polozky_div,
    div.polozky {
        gap: 12px !important;
        flex-direction: column !important;
    }
    div.polozky_div div.polozka,
    div.polozky > div.polozka {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    div.polozka_foto {
        /* 1/1 (ne 4/3): širší 4/3 box dělal u čtvercových produktových fotek
           horizontální letterbox → boky větší než vršek. Čtverec = stejná mezera
           nahoře / vlevo / vpravo (spolu s object-position:center top v sablona.css). */
        aspect-ratio: 1 / 1;
        padding: calc(12px * var(--tpl-card-foto-pad-on, 1)) !important;
    }
    div.polozka_nazev {
        font-size: 15px !important;
        padding: 8px 12px !important;
    }
    div.polozka_cena {
        padding: 4px 12px 12px !important;
        font-size: 17px !important;
    }
    div.polozka_odkaz {
        padding: 12px !important;
    }
}