/* ==========================================================================
   GeekLife UI 2026 — článek (inc/gl-ui/single.php). Generováno z mockupu
   _drafts/article-redesign/article.css skriptem port_css.py; tokeny v gl-ui.css.
   Šířky jako dnes: 1080 px (≥1141), 980 px (1024–1140), text 523 / 423 px.
   ========================================================================== */
@font-face {
	font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-010B, U+0110-0119, U+011C-0130, U+0132-0138, U+013B-013C, U+013F-0146, U+0149-0151, U+0156-0157, U+015A-015F, U+0162-0163, U+0166-016D, U+0170-017C, U+017F-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url("../fonts/jetbrains-mono-cs.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+010C-010F, U+011A-011B, U+0131, U+0139-013A, U+013D-013E, U+0147-0148, U+0152-0155, U+0158-0159, U+0160-0161, U+0164-0165, U+016E-016F, U+017D-017E, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.admin-bar .ga-toc { top: calc(var(--gl-header-h) + 52px); }
.ga { --rail: 300px; --left: 200px; --measure: 523px; /* šířka textu jako dnes (změřeno na živém webu 2026-10-02) */ font-family: var(--gl-body); color: var(--gl-ink); }
.ga a { text-decoration: none; }
.ga a:focus-visible, .ga button:focus-visible, .ga summary:focus-visible, .ga input:focus-visible, .ga textarea:focus-visible { outline: 2px solid var(--gl-green-ink); outline-offset: 2px; border-radius: 4px; }
.ga-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 25px; padding-block: 28px 56px; }
/* celková šířka článku jako dnes: 1080 px = hlavní sloupec 755 + mezera 25 + sidebar 300 (změřeno na webu 2026-10-02) */
.gl-wrap.ga-grid { width: 1080px; }
/* zlomy jako REHub .rh-container: ≥1141 px 1080, 1024–1140 px 980 (text 423 px), pod 1024 mobil */
@media (max-width: 1140px) and (min-width: 1024px) {
  .gl-wrap.ga-grid { width: 980px; }
  .ga { --measure: 423px; }
}
.ga-main { min-width: 0; }

/* ---------- hero: fotka v nativním poměru, titulek přes ni ---------- */
.ga-hero { position: relative; border-radius: 14px; overflow: hidden; background: #1a1a1a; box-shadow: 0 24px 44px -28px rgba(26,26,26,.55); }
.ga-hero img { display: block; width: 100%; height: auto; }
.ga-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.26) 32%, rgba(0,0,0,.66) 58%, rgba(0,0,0,.9) 100%); pointer-events: none; }
.ga-hero__over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 34px 30px; display: flex; flex-direction: column; gap: 16px; }
.ga-hero h1 { font: 900 clamp(26px, 3.2vw, 42px)/1.08 var(--gl-display); letter-spacing: -.02em; color: #fff; margin: 0; max-width: 26ch; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.ga-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ga-pill { font: 700 12px/1 var(--gl-display); letter-spacing: .06em; text-transform: uppercase; background: var(--gl-magenta); color: #fff; padding: 7px 10px 6px; border-radius: 4px; }
.ga-stamp { font: 500 12.5px/1 var(--gl-mono); color: #e9f5d3; font-variant-numeric: tabular-nums; }
.ga-hero .ga-hash { color: #c8ef8c; }
.ga-hash { font: 500 12.5px/1 var(--gl-mono); color: var(--gl-green-ink); }
.ga-hash:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- tělo: levý sloupec + text ---------- */
.ga-body { display: grid; grid-template-columns: var(--left) minmax(0, var(--measure)); justify-content: start; gap: 20px; margin-top: 32px; align-items: start; }
.ga-left { display: flex; flex-direction: column; gap: 24px; align-self: stretch; }
/* lepí se jen osnova (autor odjede nahoru); dlouhá osnova se posouvá uvnitř */
.ga-toc { position: sticky; top: calc(var(--gl-header-h) + 20px); max-height: calc(100vh - 108px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gl-rule-2) transparent; }
.ga-author { background: var(--gl-green-tint); border-radius: 10px; padding: 16px; display: grid; gap: 10px; }
.ga-author__head { display: flex; align-items: center; gap: 10px; }
.ga-author img { width: 48px; height: 48px; border-radius: 50%; background: #fff; }
.ga-author__name { font: 700 15px/1.25 var(--gl-display); color: var(--gl-ink); }
.ga-author__name:hover { color: var(--gl-green-deep); }
.ga-author p { margin: 0; font: 400 13.5px/1.5 var(--gl-body); color: var(--gl-ink-2); hyphens: auto; }

/* obsah: každá kapitola má buňku jako displej; přečtené svítí, aktuální svítí víc */
.ga-toc__h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--gl-ink); }
.ga-toc__h span:first-child { font: 700 12px/1 var(--gl-display); letter-spacing: .06em; text-transform: uppercase; }
.ga-toc__h span:last-child { font: 500 12px/1 var(--gl-mono); color: var(--gl-ink-3); }
.ga-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ga-toc li { margin: 0; padding: 0; }
.ga-toc a { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 6px 6px 0; border-radius: 6px; font: 600 13.5px/1.35 var(--gl-display); color: var(--gl-ink-2); }
.ga-toc a::before { content: ""; width: 6px; height: 15px; border-radius: 2px; background: var(--gl-rule-2); margin-top: 1px; transition: background .2s, box-shadow .2s; }
.ga-toc a:hover { color: var(--gl-green-deep); }
.ga-toc a.is-read::before { background: var(--gl-green); }
.ga-toc a.is-current { color: var(--gl-ink); font-weight: 700; }
.ga-toc a.is-current::before { background: var(--gl-green); box-shadow: 0 0 6px rgba(141,195,34,.55); }

/* ---------- čtecí plocha ---------- */
.ga-content { min-width: 0; max-width: var(--measure); font: 400 18px/1.7 var(--gl-body); color: var(--gl-ink); }
.ga-content > * { margin-top: 0; }
.ga-content p { margin: 0 0 1.15em; }
.ga-content h2 { position: relative; font: 800 28px/1.2 var(--gl-display); letter-spacing: -.01em; color: var(--gl-ink); margin: 2em 0 .7em; padding-bottom: 12px; border-bottom: 1px solid var(--gl-rule); text-wrap: balance; scroll-margin-top: calc(var(--gl-header-h) + 28px); }
.ga-content h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 3px; background: var(--gl-green); border-radius: 2px; }
.ga-content h3 { font: 700 22px/1.25 var(--gl-display); color: var(--gl-ink); margin: 1.6em 0 .5em; text-wrap: balance; }
.ga-content h4 { font: 700 18px/1.3 var(--gl-display); color: var(--gl-ink); margin: 1.4em 0 .4em; }
/* odkazy v textu: od 2026-10-03 sdílené pravidlo v gl-ui.css (článek i stránky) */
.ga-content strong { font-weight: 700; }
.ga-content code { font: 500 .84em/1.4 var(--gl-mono); background: var(--gl-green-tint); border: 1px solid var(--gl-green-tint-2); border-radius: 4px; padding: 1px 5px; }

/* „V kostce“ (REHub wpsm_titlebox) */
.ga-content .wpsm-titlebox { position: relative; background: var(--gl-green-tint); border: 0; border-radius: 10px; padding: 20px 24px 18px; margin: 1.6em 0 2em; font: 400 17px/1.6 var(--gl-body); }
.ga-content .wpsm-titlebox > strong { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--gl-display); letter-spacing: .06em; text-transform: uppercase; color: var(--gl-green-ink); margin-bottom: 10px; }
.ga-content .wpsm-titlebox > strong::before { content: ""; width: 6px; height: 15px; border-radius: 2px; background: var(--gl-green); box-shadow: 0 0 6px rgba(141,195,34,.45); }

/* Karta „Google oblíbené“ */
.ga-content .geeklife-google-fav-card { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--gl-rule-2); border-radius: 10px; padding: 14px 16px; margin: 1.6em 0; font: 600 15px/1.45 var(--gl-display); }
.ga-content .geeklife-google-fav-card__icon svg { width: 28px; height: 28px; display: block; }
.ga-content .geeklife-google-fav-card__text p { margin: 0; }

/* obrázky, galerie, embed */
.ga-content figure { margin: 1.8em 0; }
.ga-content figure img { display: block; width: 100%; height: auto; border-radius: 8px; }
.ga-content .wp-block-gallery figure { margin: 0; }
/* sloupce a ořez řídí galerie WordPressu (columns-N, is-cropped); vlastní grid z mockupu se s ní pral
   (dlaždice měla 50 % buňky = 81 px na mobilu), viz article-prod-extra.css */
.ga-content figcaption { margin-top: 8px; font: italic 400 14.5px/1.5 var(--gl-body); color: var(--gl-ink-3); }

/* tabulky (parametry): data → Bitter, čísla tabulkově */
.ga-content .wp-block-table { margin: 1.8em 0; overflow-x: auto; border: 1px solid var(--gl-rule-2); border-radius: 10px; }
.ga-content table { width: 100%; border-collapse: collapse; font: 500 14.5px/1.45 var(--gl-display); font-variant-numeric: tabular-nums; }
.ga-content th, .ga-content td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--gl-rule); vertical-align: top; }
.ga-content thead th, .ga-content tr:first-child td { background: var(--gl-green-tint); font-weight: 700; color: var(--gl-ink); }
.ga-content tr:last-child td { border-bottom: 0; }
.ga-content td:first-child { font-weight: 600; color: var(--gl-ink-2); }

/* seznamy: odrážka = buňka displeje, číslo = klávesa */
.ga-content ul, .ga-content ol { margin: 0 0 1.2em; padding: 0; list-style: none; }
.ga-content li { position: relative; margin: 0 0 .55em; }
.ga-content ul > li { padding-left: 22px; }
.ga-content ul > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--gl-green); }
.ga-content ol { counter-reset: ga; }
.ga-content ol > li { counter-increment: ga; padding-left: 40px; }
.ga-content ol > li::before { content: counter(ga); position: absolute; left: 0; top: .2em; min-width: 26px; height: 24px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center; font: 600 12px/1 var(--gl-mono); color: var(--gl-ink); background: #fff; border: 1px solid var(--gl-key-edge); border-radius: 6px; box-shadow: 0 2px 0 var(--gl-key-edge); }

/* citace */
.ga-content blockquote { margin: 1.8em 0; padding: 4px 0 4px 24px; border: 0; position: relative; font: italic 400 19px/1.6 var(--gl-body); color: var(--gl-ink); }
.ga-content blockquote::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--gl-rule-2); }
.ga-content blockquote p { margin: 0 0 .6em; }
.ga-content blockquote cite { display: block; font: normal 600 14px/1.4 var(--gl-display); color: var(--gl-ink-3); }

/* callouty [callout type=…]: štítek nad hranou panelu */
.ga-content .geeklife-callout { position: relative; border-radius: 10px; padding: 22px 20px 16px; margin: 2em 0 1.6em; font: 400 16px/1.6 var(--gl-body); background: var(--gl-green-tint); }
.ga-content .geeklife-callout-label { position: absolute; top: -10px; left: 16px; font: 700 11px/1 var(--gl-display); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 4px; background: var(--gl-green-ink); color: #fff; }
.ga-content .geeklife-callout-pozor { background: #fff4df; }
.ga-content .geeklife-callout-pozor .geeklife-callout-label { background: #8a5300; }
.ga-content .geeklife-callout-tldr { background: #f1f2ee; }
.ga-content .geeklife-callout-tldr .geeklife-callout-label { background: var(--gl-ink); }
.ga-content .geeklife-callout-info { background: #eaf3fc; }
.ga-content .geeklife-callout-info .geeklife-callout-label { background: #24609e; }
.ga-content .geeklife-callout-body > :last-child { margin-bottom: 0; }

.ga-content .geeklife-pullquote { margin: 2em 0; padding: 22px 0; border-top: 2px solid var(--gl-ink); border-bottom: 2px solid var(--gl-ink); font: 800 26px/1.3 var(--gl-display); letter-spacing: -.01em; text-align: left; color: var(--gl-ink); text-wrap: balance; }
.ga-content hr.geeklife-separator { border: 0; height: 15px; margin: 2.4em 0; background: radial-gradient(circle, var(--gl-rule-2) 1.5px, transparent 2px) center / 14px 14px repeat-x; }

/* blokové styly Promo / Tip */
.ga-content .is-style-geeklife-promo, .ga-content .is-style-geeklife-tip { border-radius: 10px; padding: 16px 20px; font: 600 16px/1.5 var(--gl-display); }
.ga-content .is-style-geeklife-promo { background: #fff; border: 1px solid var(--gl-rule-2); }
.ga-content .is-style-geeklife-tip { background: var(--gl-green-tint); }

/* tabulka faktů (Netflix) */
.ga-content .gl-facts { border-color: var(--gl-green-tint-2); }
.ga-content .gl-facts td:first-child { width: 42%; font-weight: 500; color: var(--gl-ink-3); background: none; }
.ga-content .gl-facts tr:first-child td { background: none; font-weight: 600; }
.ga-content .gl-facts td:last-child { font-weight: 600; }
.ga-content .gl-y, .ga-content .gl-n, .ga-content .gl-u { display: inline-block; font: 700 12px/1 var(--gl-display); padding: 4px 8px; border-radius: 999px; }
.ga-content .gl-y { background: var(--gl-green-tint-2); color: var(--gl-green-deep); }
.ga-content .gl-n { background: #fbe3e3; color: #8f1717; }
.ga-content .gl-u { background: #eceee8; color: var(--gl-ink-2); }

/* ---------- pod textem ---------- */
.ga-after { margin-top: 40px; display: grid; gap: 24px; }
.ga-rate { background: var(--gl-green-tint); border-radius: 10px; padding: 20px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.ga-rate h2 { font: 800 18px/1.25 var(--gl-display); margin: 0 0 4px; }
.ga-rate p { margin: 0; font: 400 14.5px/1.4 var(--gl-body); color: var(--gl-ink-2); }
.ga-stars { display: flex; gap: 6px; }
.ga-stars button { width: 38px; height: 38px; display: grid; place-items: center; background: #fff; border: 1px solid var(--gl-key-edge); border-radius: 8px; box-shadow: 0 2px 0 var(--gl-key-edge); color: var(--gl-rule-2); cursor: pointer; transition: transform .07s, box-shadow .07s, color .15s; }
.ga-stars svg { width: 20px; height: 20px; }
.ga-stars button:hover, .ga-stars button:hover ~ button { color: var(--gl-rule-2); }
.ga-stars:hover button { color: var(--gl-green); }
.ga-stars button:hover ~ button { color: var(--gl-rule-2); }
.ga-stars button:active { transform: translateY(2px); box-shadow: 0 0 0 var(--gl-key-edge); }
.ga-rate__votes { font: 500 12.5px var(--gl-mono); color: var(--gl-ink-3); margin-top: 6px; }

.ga-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ga-tags__h { font: 700 12px/1 var(--gl-display); letter-spacing: .06em; text-transform: uppercase; color: var(--gl-ink-3); margin-right: 6px; }
.ga-tags a { display: inline-flex; gap: 6px; align-items: baseline; font: 600 14px/1 var(--gl-display); padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--gl-rule-2); color: var(--gl-ink); }
.ga-tags a:hover { border-color: var(--gl-green); background: var(--gl-green-tint); color: var(--gl-green-deep); }
.ga-tags a.is-cat { color: var(--gl-magenta-ink); border-color: #f0cfe3; }

.ga-bio { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; border: 1px solid var(--gl-rule-2); border-radius: 10px; padding: 18px 20px; }
.ga-bio img { width: 64px; height: 64px; border-radius: 50%; background: var(--gl-green-tint); }
.ga-bio__name { font: 800 17px/1.2 var(--gl-display); color: var(--gl-ink); }
.ga-bio p { margin: 6px 0 10px; font: 400 15px/1.55 var(--gl-body); color: var(--gl-ink-2); }
.ga-bio__more { display: inline-flex; gap: 6px; align-items: center; font: 700 14px var(--gl-display); color: var(--gl-green-ink); }
.ga-bio__more svg { width: 14px; height: 14px; }
.ga-bio__more:hover { color: var(--gl-green-deep); text-decoration: underline; text-underline-offset: 3px; }

.ga-related { margin-top: 48px; }
.ga-related__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--gl-ink); margin-bottom: 18px; }
.ga-related__h h2 { font: 900 28px/1.1 var(--gl-display); letter-spacing: -.01em; margin: 0; }
.ga-related__h a { font: 600 14px var(--gl-display); color: var(--gl-green-ink); }
.ga-related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ga-related a.card { display: grid; gap: 10px; color: var(--gl-ink); }
.ga-related .card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.ga-related .card .t { font: 700 15.5px/1.3 var(--gl-display); text-wrap: balance; }
.ga-related .card:hover .t { color: var(--gl-green-deep); }
.ga-related .card .gl-stamp-mini { font: 500 12px var(--gl-mono); color: var(--gl-ink-3); }

.ga-comments { margin-top: 48px; }
.ga-comments h2 { font: 800 24px/1.2 var(--gl-display); margin: 0 0 6px; }
.ga-comments > p { margin: 0 0 18px; font: 400 15px/1.5 var(--gl-body); color: var(--gl-ink-2); }
.ga-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ga-form label { display: grid; gap: 6px; font: 600 14px var(--gl-display); color: var(--gl-ink); }
.ga-form .full { grid-column: 1 / -1; }
.ga-form input, .ga-form textarea { font: 400 16px/1.5 var(--gl-body); color: var(--gl-ink); background: #fff; border: 1px solid var(--gl-rule-2); border-radius: 8px; padding: 10px 12px; }
.ga-form textarea { min-height: 140px; resize: vertical; }
.ga-form input:focus, .ga-form textarea:focus { outline: none; border-color: var(--gl-green); box-shadow: 0 0 0 3px var(--gl-green-tint-2); }
.ga-submit { justify-self: start; font: 800 16px/1 var(--gl-display); background: var(--gl-ink); color: #fff; border: 0; border-radius: 12px; padding: 14px 24px; box-shadow: 0 4px 0 #000; cursor: pointer; transition: transform .07s, box-shadow .07s, background .15s; }
.ga-submit:hover { background: var(--gl-green-deep); }
.ga-submit:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }

/* ---------- pravý sloupec: widgety beze změny, nový vzhled ---------- */
.ga-rail { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.ga-rail .widget .title { font: 800 19px/1.2 var(--gl-display); color: var(--gl-ink); margin: 0 0 12px; padding: 0; border: 0; }
.ga-posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gl-rule); }
.ga-posts li { border-bottom: 1px solid var(--gl-rule); }
.ga-posts a { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px 0; color: var(--gl-ink); }
.ga-posts img { width: 84px; height: 63px; object-fit: cover; border-radius: 6px; }
.ga-posts .t { display: block; font: 700 14.5px/1.3 var(--gl-display); margin-bottom: 6px; }
.ga-posts a:hover .t { color: var(--gl-green-deep); }
.ga-posts .m { display: flex; gap: 10px; align-items: baseline; }
.ga-posts .cat { font: 700 11px/1 var(--gl-display); letter-spacing: .06em; text-transform: uppercase; color: var(--gl-magenta-ink); }
.ga-posts .d { font: 500 12px/1 var(--gl-mono); color: var(--gl-ink-3); }
.ga-ad { display: flex; flex-direction: column; gap: 6px; }
.ga-ad .lbl { font: 600 11px/1 var(--gl-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gl-ink-3); }
.ga-ad .slot { display: grid; place-items: center; text-align: center; aspect-ratio: 300 / 533; border: 1px solid var(--gl-rule); border-radius: 4px; background: repeating-linear-gradient(135deg, #f4f5f0 0 10px, #eceee6 10px 20px); font: 600 13px/1.4 var(--gl-display); color: var(--gl-ink-3); padding: 12px; }
.ga-ad .slot.sq { aspect-ratio: 1; }
.ga-geekl { display: flex; flex-wrap: wrap; gap: 8px; }
.ga-geekl a { font: 600 14px/1 var(--gl-display); padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--gl-rule-2); color: var(--gl-ink); }
.ga-geekl a:hover { border-color: var(--gl-green); background: var(--gl-green-tint); color: var(--gl-green-deep); }

/* ---------- mobilní prvky (skryté na desktopu) ---------- */
.ga-mauthor, .ga-tocbar, .ga-tocwrap { display: none; }

/* ---------- tablet a mobil ---------- */

@media (max-width: 1023px) {
  .ga-grid { grid-template-columns: minmax(0, 1fr); padding-block: 0 40px; }
  .gl-wrap.ga-grid { width: 100%; padding-left: 14px; padding-right: 14px; }
  /* hero přes celou šířku, text s menším odsazením od kraje */
  .ga-hero { margin-inline: -14px; border-radius: 0; box-shadow: none; }
  .ga-content { max-width: none; font-size: 17px; }
  .ga-content h2 { font-size: 24px; scroll-margin-top: calc(var(--gl-header-h) + 60px); }
  .ga-related ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ga-rail { gap: 28px; }
  .ga-rail .hide-mobile { display: none; }
}
/* osnova-nahore: lišta osnovy a rozbalovací autor místo levého sloupce. Tablet a navíc široké okno
   1500–1759 px, kde by levý sloupec překryla postranní reklama. Rozbalovací autor se zapíná jen
   pro široké okno (article-prod-extra.css); na mobilu a tabletu je skrytý, autor je pod článkem
   (rozhodnutí 2026-10-21) (port_css.py doplní media query). */
@media (max-width: 1023px), (min-width: 1500px) and (max-width: 1759px) {
  .ga-body { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
  .ga-left { display: none; }
  .ga-mauthor { margin-top: 16px; background: var(--gl-green-tint); border-radius: 10px; }
  .ga-mauthor summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font: 700 15px var(--gl-display); }
  .ga-mauthor summary::-webkit-details-marker { display: none; }
  .ga-mauthor summary img { width: 36px; height: 36px; border-radius: 50%; background: #fff; }
  .ga-mauthor summary svg { width: 16px; height: 16px; margin-left: auto; transition: transform .2s; }
  .ga-mauthor[open] summary svg { transform: rotate(180deg); }
  .ga-mauthor p { margin: 0; padding: 0 14px 14px 60px; font: 400 13.5px/1.5 var(--gl-body); color: var(--gl-ink-2); }
  /* osnova: obal bez výšky se přilepí pod header, lišta se ukáže až po přescrollování hero */
  .ga-tocwrap { display: block; position: sticky; top: var(--gl-header-h); height: 0; z-index: 30; }
  .ga-tocbar { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; position: absolute; top: 0; left: -14px; right: -14px; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--gl-rule); box-shadow: 0 8px 16px -12px rgba(26,26,26,.35); transform: translateY(-110%); visibility: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s; }
  .ga-tocbar.is-pinned { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
  .ga-tocbar button { height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--gl-ink-2); cursor: pointer; }
  .ga-tocbar button svg { width: 16px; height: 16px; }
  .ga-tocbar button:disabled { opacity: .3; }
  .ga-tocbar ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
  .ga-tocbar ol::-webkit-scrollbar { display: none; }
  .ga-tocbar a { display: block; white-space: nowrap; padding: 13px 8px 11px; font: 600 13px/1 var(--gl-display); color: var(--gl-ink-2); border-bottom: 2px solid transparent; }
  .ga-tocbar a.is-current { color: var(--gl-ink); border-bottom-color: var(--gl-green); }
}
@media (max-width: 600px) {
  .ga-hero { background: var(--gl-panel); }
  .ga-hero::after { display: none; }
  .ga-hero__over { position: relative; margin-top: -60px; padding: 60px 18px 20px; gap: 12px; background: linear-gradient(180deg, rgba(21,23,19,0) 0, var(--gl-panel) 60px); }
  .ga-hero h1 { font-size: 26px; }
  .ga-hero .ga-hash:nth-of-type(n+2) { display: none; }
  .ga-content h2 { font-size: 22px; }
  .ga-content blockquote { font-size: 17px; }
  .ga-form { grid-template-columns: minmax(0, 1fr); }
  .ga-rate { padding: 18px; }
  .ga-bio { grid-template-columns: 48px minmax(0, 1fr); padding: 16px; }
  .ga-bio img { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .ga *, .ga *::before { transition: none !important; animation: none !important; } }

/* ==========================================================================
   Produkční doplňky: skutečné HTML WordPressu, REHubu a pluginů (v mockupu
   byly jen zástupné prvky). Widgety a pluginy beze změny logiky, jen vzhled.
   style.css (child) dává widgetům a komentářům vlastní skin s !important,
   proto tady vyšší specifičnost a !important tam, kde je to nutné.
   ========================================================================== */

.ga { background: transparent; }
.ga-grid--full { grid-template-columns: minmax(0, 1fr); }
.ga-hero__img { display: block; width: 100%; height: auto; }

/* hero bez obrázku: titulek na papíře */
.ga-hero--plain { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.ga-hero--plain::after { display: none; }
.ga-hero--plain .ga-hero__over { position: static; padding: 8px 0 18px; border-bottom: 2px solid var(--gl-ink); }
.ga-hero--plain h1 { color: var(--gl-ink); text-shadow: none; }
.ga-hero--plain .ga-stamp { color: var(--gl-ink-3); }
.ga-hero--plain .ga-hash { color: var(--gl-green-ink); }

/* šipky v mobilní liště osnovy z jedné sady ikon */
.ga-tocbar .gl-ico { width: 16px; height: 16px; }
.ga-tocbar .gl-ico--left { transform: rotate(90deg); }
.ga-tocbar .gl-ico--right { transform: rotate(-90deg); }
.ga-mauthor .gl-ico { width: 16px; height: 16px; margin-left: auto; transition: transform .2s; }
.ga-mauthor[open] .gl-ico { transform: rotate(180deg); }
.ga-mauthor summary .avatar { width: 36px; height: 36px; border-radius: 50%; }
.ga-author .avatar { width: 48px; height: 48px; border-radius: 50%; background: #fff; }
.ga-bio .avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--gl-green-tint); }
/* avatary: vždy čtverec ořezaný do kruhu; na mobilu má bio sloupec jen 48 px a max-width by fotku zúžila do oválu */
.ga-mauthor summary .avatar, .ga-author .avatar, .ga-bio .avatar { flex-shrink: 0; object-fit: cover; aspect-ratio: 1; }
@media (max-width: 600px) { .ga-bio .avatar { width: 48px; height: 48px; } }

/* Mobil: Heuréka widget má od Heuréky pevný iframe width="410px" (centrovaný), na telefonech
   širších než ~438 px je tak užší než text. Bloky okolo (hodnocení, reklamní pozice Advanced Ads
   v textu, např. box s RSS) se na jeho šířku zarovnávají, ne obráceně (rozhodnutí uživatele 2026-10-02).
   Parallax pozice mají vlastní třídy geekl-parallax-* a zůstávají přes celou šířku. */
@media (max-width: 600px) {
	.ga .ga-content .rmp-widgets-container,
	.ga .ga-content > [class^="geekl-"]:not([class*="parallax"]) { max-width: 410px; margin-left: auto; margin-right: auto; }
}
.ga-bio__more .gl-ico { width: 14px; height: 14px; }
.ga-related .card .gl-stamp { font: 500 12px var(--gl-mono); color: var(--gl-ink-3); }
.ga-related .card .gl-stamp.is-fresh { color: var(--gl-green-ink); font-weight: 700; }

/* bio autora: odkazy v popisu, dlouhé URL nesmí přetéct */
.ga-author p, .ga-mauthor p, .ga-bio p { overflow-wrap: anywhere; }
.ga-author p a, .ga-mauthor p a, .ga-bio p a { color: var(--gl-green-ink); text-decoration: underline; text-decoration-color: var(--gl-green-tint-2); text-underline-offset: 2px; }

/* „V kostce“ (wpsm_titlebox): přebít parent titlebox.css a .rehub-sec-color-border */
.ga-content .wpsm-titlebox { border: 0 !important; }
.ga .ga-content .wpsm-titlebox > strong:first-child, .ga-content .wpsm-titlebox > strong { display: flex !important; width: max-content; margin: 0 0 10px !important; float: none !important; position: static !important; top: auto !important; left: auto !important; background: none !important; padding: 0 !important; font: 700 12px/1 var(--gl-display) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--gl-green-ink) !important; }

.ga-content .wpsm-titlebox > div { display: block !important; float: none !important; margin: 0 !important; }

/* reklamní pozice z Theme Options */
.ga .mediad { margin: 16px 0; text-align: center; }
.ga .single_custom_bottom { margin: 1.6em 0; text-align: center; }

/* prvky obsahu, které vkládá REHub/WP a v mockupu nebyly */
.ga-content blockquote p { font: inherit; }
.ga-content .wp-block-image figcaption, .ga-content .wp-element-caption { border: 0; padding: 0; }
.ga-content .lightbox-trigger { border-radius: 6px; }
/* Obrázek se střední nebo náhledovou velikostí z editoru drží svou šířku a stojí na středu.
   Mockup roztahuje každý obrázek na 100 % sloupce, takže volba velikosti dřív nic nedělala.
   Blok musí být úzký jako obrázek: lupa lightboxu se počítá, jako by obrázek stál vlevo v bloku.
   Popisek šířku bloku neovlivní (contain) a symetricky se rozšíří až na 22em, max. šířku okna. */
.ga-content figure.wp-block-image:is(.size-medium, .size-thumbnail) { display: block; width: fit-content; max-width: 100%; margin-inline: auto; }
.ga-content figure.wp-block-image:is(.size-medium, .size-thumbnail) img { width: auto; max-width: 100%; margin-inline: 0; }
.ga-content figure.wp-block-image:is(.size-medium, .size-thumbnail) > figcaption { display: block; contain: inline-size; width: auto; margin-inline: calc((100% - max(100%, min(22em, 100vw - 40px))) / 2); }
.ga-content .rll-youtube-player { border-radius: 10px; overflow: hidden; margin: 1.8em 0; }
.ga-content iframe { max-width: 100%; border-radius: 10px; }
.ga-content .wp-block-embed { margin: 1.8em 0; }
.ga-content .wp-block-gallery.has-nested-images { gap: 8px; }
/* Galerie: popisek pod obrázkem, ne přes něj. Dlouhé popisky přes obrázek zakryly celou dlaždici
   a kliknutí dopadlo na figcaption místo na <img>, takže se lightbox WordPressu neotevřel (2026-10-03).
   Specificita kvůli core selektoru s :not(#individual-image). */
.ga .ga-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption {
	position: static; max-height: none; overflow: visible; margin: 0; padding: 6px 2px 0;
	background: none; color: var(--gl-ink-3); text-shadow: none; text-align: left;
	font: 400 13.5px/1.45 var(--gl-body); flex: none;
}
.ga .ga-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):has(figcaption)::before { display: none; }
.ga .ga-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image):not(:only-child) img { flex: none; height: auto; aspect-ratio: 1; object-fit: cover; } /* jediný obrázek v galerii: vlastní poměr stran */
.ga .ga-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { justify-content: flex-start; }
.ga .ga-content .wp-block-gallery img { border-radius: 6px; cursor: zoom-in; }
.ga-content > *:first-child { margin-top: 0; }

/* tabulky: přebít pruhování řádků z parent CSS (table tr:nth-child(2n) td) */
.ga .ga-content table tr td, .ga .ga-content table tr th { background: none; }
.ga .ga-content thead th, .ga .ga-content .wp-block-table:not(.gl-facts) tbody tr:first-child td { background: var(--gl-green-tint); }
.ga .ga-content .wp-block-table.gl-facts tbody tr td { background: none; }

/* Rate My Post (plugin na konci obsahu) */
.ga-content .rmp-widgets-container { margin: 2.4em 0 0; }
.ga-content .rmp-rating-widget { background: var(--gl-green-tint); border-radius: 10px; padding: 20px 22px; text-align: left; }
.ga-content .rmp-heading--title { font: 800 18px/1.25 var(--gl-display) !important; color: var(--gl-ink) !important; margin: 0 0 4px !important; }
.ga-content .rmp-heading--subtitle { font: 400 14.5px/1.4 var(--gl-body) !important; color: var(--gl-ink-2) !important; margin: 0 0 12px !important; }
.ga-content .rmp-rating-widget__icons-list { justify-content: flex-start !important; gap: 6px; padding: 0 !important; margin: 0 !important; }
.ga-content .rmp-rating-widget__icons-list > li { padding: 0 !important; margin: 0 !important; }
.ga-content .rmp-rating-widget__icons-list > li::before { display: none !important; }
.ga-content .rmp-rating-widget__results, .ga-content .rmp-rating-widget__not-rated { font: 500 12.5px var(--gl-mono) !important; color: var(--gl-ink-3) !important; margin-top: 8px !important; text-align: left !important; }
.ga-content .rmp-rating-widget__submit-btn { font: 700 14px var(--gl-display); background: var(--gl-ink); color: #fff; border: 0; border-radius: 999px; padding: 10px 16px; }

/* komentáře (REHub comments.php) */
.ga-comments { margin-top: 48px; }
.ga-comments #comments, .ga-comments .post-comments { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.ga-comments .title_comments { font: 800 24px/1.2 var(--gl-display) !important; color: var(--gl-ink) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; }
.ga-comments .title_comments::after { display: none !important; }
.ga-comments ol.commentlist { list-style: none; margin: 0 0 24px; padding: 0; }
.ga-comments ol.commentlist li::before { display: none; }
.ga-comments .commbox { background: #fff !important; border: 1px solid var(--gl-rule-2) !important; border-left-width: 1px !important; border-radius: 10px !important; box-shadow: none !important; padding: 16px 18px !important; font: 400 16px/1.6 var(--gl-body); }
.ga-comments #respond, .ga-comments .comment-respond { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
.ga-comments .comment-reply-title { font: 700 18px/1.3 var(--gl-display) !important; color: var(--gl-ink) !important; text-transform: none !important; margin: 0 0 12px !important; }
.ga-comments .comment-reply-title::after { display: none !important; }
.ga-comments #commentform { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ga-comments #commentform > textarea, .ga-comments #commentform > .form-submit, .ga-comments #commentform > .clearfix, .ga-comments #commentform > p { grid-column: 1 / -1; }
.ga-comments #commentform > div { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }
.ga-comments #commentform textarea, .ga-comments #commentform input[type="text"], .ga-comments #commentform input[type="email"], .ga-comments #commentform input[type="url"] {
	width: 100% !important; box-sizing: border-box; font: 400 16px/1.5 var(--gl-body) !important; color: var(--gl-ink) !important;
	background: #fff !important; border: 1px solid var(--gl-rule-2) !important; border-radius: 8px !important; padding: 10px 12px !important; box-shadow: none !important; height: auto !important; margin: 0 !important;
}
.ga-comments #commentform textarea { min-height: 140px; resize: vertical; }
.ga-comments #commentform textarea:focus, .ga-comments #commentform input:focus { outline: none; border-color: var(--gl-green) !important; box-shadow: 0 0 0 3px var(--gl-green-tint-2) !important; }
.ga-comments .form-submit { margin: 4px 0 0 !important; }
.ga-comments #submit {
	font: 800 16px/1 var(--gl-display) !important; background: var(--gl-ink) !important; color: #fff !important; border: 0 !important;
	border-radius: 12px !important; padding: 14px 24px !important; box-shadow: 0 4px 0 #000 !important; cursor: pointer; text-transform: none !important; height: auto !important;
	transition: transform .07s, box-shadow .07s, background .15s;
}
.ga-comments #submit:hover { background: var(--gl-green-deep) !important; }
.ga-comments #submit:active { transform: translateY(3px); box-shadow: 0 1px 0 #000 !important; }

/* sidebar (.ga-rail): styly widgetů jsou od 2026-10-03 ve sdíleném gl-ui.css (článek i archivy) */

@media (max-width: 1023px) {
	.ga-rail { margin-top: 8px; }
	.ga-comments #commentform { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.ga-hero--plain .ga-hero__over { background: none; margin-top: 0; padding: 18px 0; }
}

/* Lightbox pro odkazy na soubor obrázku (gl-article.js): tmavý panel přístroje, obrázek přes
   většinu obrazovky, popisek Georgia, počítadlo mono; kulatá tlačítka 44 px. */
.gl-lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 56px 72px 24px; border: 0; background: rgba(21, 23, 19, .94); color: var(--gl-panel-ink); box-sizing: border-box; }
.gl-lb[open] { display: flex; align-items: center; justify-content: center; animation: gl-lb-in .18s ease-out; }
.gl-lb::backdrop { background: transparent; }
.gl-lb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; }
.gl-lb__img { display: block; max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 6px; background: var(--gl-panel-2); }
.gl-lb__cap { display: flex; gap: 16px; align-items: baseline; max-width: 70ch; font: 400 15px/1.5 var(--gl-body); color: var(--gl-panel-ink); }
.gl-lb__cap:empty, .gl-lb__txt:empty { display: none; }
.gl-lb__n { flex: none; font: 500 12.5px var(--gl-mono); font-variant-numeric: tabular-nums; color: var(--gl-panel-mute); }
.gl-lb__btn { position: absolute; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(242, 244, 236, .1); color: var(--gl-panel-ink); transition: background .15s, color .15s; }
.gl-lb__btn:hover { background: var(--gl-green); color: var(--gl-ink); }
.gl-lb__btn:focus-visible { outline: 2px solid var(--gl-green); outline-offset: 2px; }
.gl-lb__btn svg { width: 22px; height: 22px; }
.gl-lb__close { top: 12px; right: 12px; }
.gl-lb__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.gl-lb__next { right: 14px; top: 50%; transform: translateY(-50%); }
.gl-lb.is-single .gl-lb__prev, .gl-lb.is-single .gl-lb__next { display: none; }
@keyframes gl-lb-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) {
	.gl-lb { padding: 56px 10px 18px; }
	.gl-lb__prev, .gl-lb__next { top: auto; bottom: 14px; transform: none; }
	.gl-lb__img { max-height: calc(100vh - 190px); }
	.gl-lb__cap { padding: 0 6px 56px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .gl-lb[open] { animation: none; } }

/* Široké okno 1500–1759 px: Advanced Ads „Left bar“ a „Right bar“ (sticky u okraje okna, 300 px,
   od šířky 1500 px) by překryly levý sloupec a sidebar. Článek se zúží tak, aby z každé strany zbylo
   aspoň 340 px (reklama 300 px + zavírací křížek vně + vzduch), osnova a autor jdou nahoru (blok osnova-nahore v article.css).
   Rozhodnutí uživatele 2026-10-03. */
@media (min-width: 1500px) and (max-width: 1759px) {
	/* Bez levého sloupce smí text využít rezervu: až 600 px (horní hranice pohodlného čtení u Georgia
	   18 px; rozhodnutí 2026-10-04). Článek = nejvýš text 600 + mezera 25 + sidebar 300 = 925 px
	   a aspoň 340 px od každého okraje (reklama 300 + zavírací křížek + vzduch). 100 % = šířka bez
	   posuvníku. Hlavní sloupec je vždy jen tak široký jako text, takže před sidebarem nezbyde mezera. */
	.ga { --measure: 600px; }
	.ga .gl-wrap.ga-grid { width: min(calc(100% - 680px), 925px); }
	.ga-tocbar { left: 0; right: 0; }
	.ga-mauthor { display: block; margin-top: 18px; }
	/* užší sloupec (455–1039 px): titulek pod fotkou na tmavém panelu jako na mobilu, ať dlouhý titulek nepřeteče */
	.ga-hero { background: var(--gl-panel); }
	.ga-hero__over { position: relative; margin-top: -60px; padding: 60px 26px 24px; gap: 12px; background: linear-gradient(180deg, rgba(21, 23, 19, 0) 0, var(--gl-panel) 60px); }
	.ga-hero h1 { font-size: 30px; }
	.ga-hero--plain .ga-hero__over { background: none; margin-top: 0; padding: 18px 0; }
}