/**
 * Template 2026-001 — Výpis produktů na mobilu: JEDEN v řadě
 *
 * Krok 194: druhá varianta komponenty vypis_mobil.
 * Desktop layout (25% = 4 v řadě) zachován ze sablona.css:1248.
 * Změna se aplikuje POUZE na mobilu (max-width: 768px) — 1 karta na řadu, plná šířka.
 *
 * 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`. Bez override tohoto max-width by karta zůstala
 *  50% šířky. Musíme přebít flex + width + max-width + min-width na oba selektory.
 *
 * Vhodné pro produkty s dlouhými názvy nebo detailním popisem — každá karta má
 * více prostoru pro obrázek + text.
 */

@media (max-width: 768px) {
    div.polozky_div,
    div.polozky {
        gap: 12px !important;
        /* POZOR: NE flex-direction:column! Karty níže mají flex:0 0 100% (basis =
           ŠÍŘKA). V column kontejneru by basis:100% znamenal 100% VÝŠKY → každá karta
           naroste přes celou výšku = obří prázdné karty (bug na mobilu). 1-v-řadě se
           dělá row + flex-wrap:wrap (ze sablona.css) + karta width:100% → zalomí se
           jedna pod druhou, přirozená výška. */
    }
    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;
    }
    /* Větší prostor pro obrázek + text (větší mobil karta). */
    div.polozka_foto {
        /* 1/1 (dřív 4/3): 1-v-řadě karta je široká, ale produktová fota jsou čtvercová —
           ve 4:3 boxu se svisle vyplnila (dotyk u horního/dolního kraje) a po stranách
           zůstaly velké pruhy. Čtverec = foto vyplní box rovnoměrně. */
        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;
    }
}