/* ==========================================================================
   Magazín – výpis článků (magazin.php)

   Proč tenhle soubor existuje: na mobilu přetékaly náhledy článků mimo
   obrazovku doprava. Náhled se do stránky vkládá s atributy width/height
   podle skutečné velikosti obrázku (viz obrazek_nahled v inc/functions.php),
   takže bez CSS, které mu šířku srazí na šířku dlaždice, se vykreslí ve své
   vlastní velikosti – u širokých koláží klidně 900 px.

   Pravidla níž na tom nestojí a šířku si pohlídají samy, takže výpis drží
   v mezích i tehdy, když je hlavní style.css starší než PHP soubory.
   ========================================================================== */

/* Prvek gridu se sám o sobě nezmenší pod šířku svého obsahu (min-width má
   výchozí hodnotu auto). Stačí pak jeden široký obrázek nebo řádek
   stránkování a roztáhne se celý sloupec – a s ním i stránka.

   Platí to i pro boční sloupec s bannery: na mobilu se zařadí pod články do
   stejného sloupce mřížky, takže jeho nejmenší možná šířka určuje šířku
   sloupce i pro články nad ním. Na displejích užších než zhruba 385 px kvůli
   tomu vyčnívaly náhledy článků, přestože chyba nebyla v nich. */
.magazine-layout,
.magazine-layout__main,
.magazine-layout__side,
.magazine-layout__main > .grid,
.magazine-layout__main > .grid > * {
    min-width: 0;
}

.magazine-layout__main .tile {
    max-width: 100%;
    overflow: hidden;
}

/* Náhled vždy přes celou šířku dlaždice a nikdy přes ni.
   height:auto nechá zapsanou výšku přepočítat podle nové šířky – jinak by se
   obrázek deformoval. Když hlavní styl přidává aspect-ratio a object-fit,
   platí dál a náhledy zůstanou stejně vysoké. */
.magazine-layout__main .tile img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Reklamní bannery jsou napevno 300 px široké (obrázky i rámy z ceskemodelky.cz).
   Na displejích pod 360 px se do sloupce nevejdou a roztahovaly stránku.
   Obrázek se zmenší, rám se ořízne uvnitř svého bloku – ven už nic neleze. */
.magazine-layout__side .banner-card--ads {
    max-width: 100%;
    overflow-x: hidden;
}

.magazine-layout__side .banner-card--ads img {
    max-width: 100%;
    height: auto;
}

.magazine-layout__side .banner-card--ads iframe {
    max-width: 100%;
}

/* ---- Stránkování ----
   Přesunuto sem z inline <style> v magazin.php. Původní flex-wrap: nowrap
   držel čísla stránek v jedné řadě za každou cenu – u magazínu s víc než
   pěti stranami se na mobil nevešla a přetékala ven. */
.fm-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 2.4rem;
}

.fm-pagination__link--sipka {
    font-size: 1.2em;
}

.fm-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 40px;
    color: #999;
}