@charset "UTF-8";
/**
 * Fallbacky pre staršie prehliadače (napr. Samsung Tizen 3.0 Smart TV = Chromium ~M47, r. 2015).
 * Cesta: /home/html/michal.6f.sk/public_html/assets/css/compat.css
 *
 * Načítava sa AŽ PO base.css a public.css (cez layout/public_head_compat.php).
 * Každé pravidlo je viazané na triedu html.no-*, ktorú pridá detekčný skript
 * v <head> len tam, kde daná moderná vlastnosť chýba. Moderné prehliadače tieto
 * triedy nedostanú → tento súbor je pre ne neúčinný.
 *
 * Triedy: no-cssvars, no-grid, no-flexgap, no-aspectratio, no-inset, no-clamp,
 *         no-cssmin, no-backdropfilter
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. CSS premenné  var(--x)   (Chrome < 49)
   Kritické je hlavne pozadie <body> – inak biela plocha pod svetlým textom.
   Ostatné farby dopĺňame pre plnú čitateľnosť a akcenty (hodnoty = base.css).
   ═══════════════════════════════════════════════════════════════════════ */
html.no-cssvars body { background-color: #0d1117; color: #c9d1d9; }

html.no-cssvars .site-logo,
html.no-cssvars .section-heading,
html.no-cssvars .page-h1,
html.no-cssvars .history-title,
html.no-cssvars .art-title a,
html.no-cssvars .site-nav a.active,
html.no-cssvars .mobile-nav a.active { color: #ffffff; }

html.no-cssvars .site-logo span,
html.no-cssvars .section-title,
html.no-cssvars .subcat-title,
html.no-cssvars .art-subcat,
html.no-cssvars .article-cat,
html.no-cssvars .article-link,
html.no-cssvars .history-year { color: #38bdf8; }

html.no-cssvars .site-nav a,
html.no-cssvars .mobile-nav a,
html.no-cssvars .filter-btn,
html.no-cssvars .history-desc,
html.no-cssvars .history-list,
html.no-cssvars .section-heading + p,
html.no-cssvars .load-more-btn { color: #8b9db0; }

html.no-cssvars .art-date,
html.no-cssvars .article-date,
html.no-cssvars .site-footer,
html.no-cssvars .load-more-btn span { color: #5a7080; }

html.no-cssvars .filter-btn { border-color: #2d3748; }
html.no-cssvars .filter-btn.active { color: #ffffff; border-color: #38bdf8; }
html.no-cssvars .dot-quote,
html.no-cssvars .art-title a:hover { color: #7dd3fc; }

/* ═══════════════════════════════════════════════════════════════════════
   2. CSS Grid  (Chrome < 57)  → náhradné rozloženie cez inline-block
   ═══════════════════════════════════════════════════════════════════════ */
/* Recepty – mriežka kariet: 3 v rade */
html.no-grid .art-grid { display: block; font-size: 0; }
html.no-grid .art-grid > .art-card {
    display: inline-block; width: 32%; margin: 0 2% 20px 0;
    vertical-align: top; font-size: 14px;
}
html.no-grid .art-grid > .art-card:nth-child(3n) { margin-right: 0; }

/* Domov – história tvorby: obrázok + text vedľa seba */
html.no-grid .history-item { display: block; font-size: 0; }
html.no-grid .history-item > * {
    display: inline-block; width: 48%; margin-right: 4%;
    vertical-align: top; font-size: 14px;
}
html.no-grid .history-item > * + * { margin-right: 0; }
html.no-grid .history-item.img-right,
html.no-grid .history-item.img-right > * { direction: ltr; }

/* ═══════════════════════════════════════════════════════════════════════
   3. gap vo flexboxe  (Chrome < 84)  → náhradné okraje
   ═══════════════════════════════════════════════════════════════════════ */
html.no-flexgap .filter-bar > .filter-btn { margin: 0 8px 8px 0; }
html.no-flexgap .article-card > * + *     { margin-left: 12px; }
html.no-flexgap .site-footer > * + *      { margin-left: 12px; }

/* ═══════════════════════════════════════════════════════════════════════
   4. aspect-ratio  (Chrome < 88)  → padding-hack; inak majú náhľady výšku 0
   ═══════════════════════════════════════════════════════════════════════ */
html.no-aspectratio .art-thumb,
html.no-aspectratio .history-img {
    height: 0; position: relative; overflow: hidden;
}
html.no-aspectratio .art-thumb   { padding-bottom: 56.25%; } /* 16:9 */
html.no-aspectratio .history-img { padding-bottom: 75%; }    /* 4:3  */

html.no-aspectratio .art-thumb > *,
html.no-aspectratio .history-img > * {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. inset: 0  (Chrome < 87)  → rozpísané top/right/bottom/left
   Bez toho zmiznú obrázky v úvodnom hero.
   ═══════════════════════════════════════════════════════════════════════ */
html.no-inset .hero-slide,
html.no-inset .hero-bg,
html.no-inset .hero-placeholder,
html.no-inset .nav-overlay {
    top: 0; right: 0; bottom: 0; left: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. clamp()  (Chrome < 79)  → pevná veľkosť nadpisov
   ═══════════════════════════════════════════════════════════════════════ */
html.no-clamp .section-heading { font-size: 28px; }
html.no-clamp .page-h1         { font-size: 32px; }
html.no-clamp .hero-quote      { font-size: 26px; }

/* ═══════════════════════════════════════════════════════════════════════
   7. min()  (Chrome < 79)  → pevná šírka bočného menu
   ═══════════════════════════════════════════════════════════════════════ */
html.no-cssmin .mobile-nav { width: 300px; max-width: 80vw; }

/* ═══════════════════════════════════════════════════════════════════════
   8. backdrop-filter  (Chrome < 76)  → nepriehľadné pozadia namiesto rozmazania
   ═══════════════════════════════════════════════════════════════════════ */
html.no-backdropfilter .site-header { background: #0d1117; }
html.no-backdropfilter .art-card    { background: #1c2128; }
html.no-backdropfilter .mobile-nav  { background: #0d1117; }