/* ============================================================
   FASTEER — base design tokens + shared component CSS
   Used by both preview.html and the WordPress theme.
   Variants override token values via [data-variant] selectors.
   ============================================================ */

:root {
  /* Color tokens */
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --bg-muted: #f6f6f6;
  --bg-inverse: #0a0a0b;

  --ink: #0a0a0b;
  --ink-2: #2a2a2e;
  --ink-3: #6b6b73;
  --ink-on-dark: #ffffff;

  --line: #e7e7ea;
  --line-strong: #d4d4d8;

  --brand: #d4001a;
  --brand-deep: #a00014;
  --brand-soft: #fff2f3;

  /* Category accents */
  --cat-navod: #0f766e;       /* teal */
  --cat-bavu: #7c3aed;        /* violet */
  --cat-novinky: #2563eb;     /* blue */
  --cat-bulvar: #db2777;      /* pink */
  --cat-viral: #f59e0b;       /* amber */

  /* Typography */
  --ff-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-display: "Inter", system-ui, sans-serif;

  /* Radius / shadow / spacing */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
  --shadow-2: 0 8px 24px rgba(0,0,0,.08);

  --container: 1240px;
  --gutter: 20px;
}

/* === VARIANT OVERRIDES ============================================ */

/* Editorial — clean white, refined */
[data-variant="editorial"] {
  --bg: #ffffff;
  --bg-muted: #f7f7f8;
  --ink: #0a0a0b;
  --brand: #d4001a;
}

/* Punch — dark dramatic, bold red */
[data-variant="punch"] {
  --bg: #ffffff;
  --bg-muted: #f3f3f5;
  --bg-inverse: #0a0a0b;
  --ink: #0a0a0b;
  --brand: #e30613;
  --brand-deep: #a8000c;
  --r-md: 4px;
  --r-lg: 6px;
}

/* Compact — high density */
[data-variant="compact"] {
  --bg: #ffffff;
  --bg-muted: #fafafa;
  --ink: #18181b;
  --brand: #c8102e;
  --r-md: 6px;
  --r-lg: 8px;
}

/* === RESET / BASE ================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* Hard-locked light backgrounds — prevent dark mode / inherited dark themes */
html {
  margin: 0;
  padding: 0;
  background-color: #ffffff !important;
  color-scheme: light only;
  /* Defensivní: pokud by se cokoli (3rd-party widget, AdSense iframe,
     široký embed) přetáhlo přes viewport, page nezíská horizontální
     scrollbar. `clip` na rozdíl od `hidden` nevytváří nový scrollovací
     kontext, takže nerozbije `position: sticky` u topbaru. */
  overflow-x: clip;
}
body {
  margin: 0;
  padding: 0;
  background-color: #ffffff !important;
  color: #0a0a0b !important;
  font-family: var(--ff-sans);
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
  overflow-x: clip;
}

/* Punch variant uses dark header but light body */
[data-variant="punch"] body { background-color: #ffffff !important; }

/* Explicitly block dark-mode color-scheme override */
@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #ffffff !important;
    color: #0a0a0b !important;
  }
}

img { max-width: 100%; display: block; height: auto; }
/* Iframy (AdSense, embedy YouTube/Twitter, vložená videa) by jinak při
   pevné šířce mohly přesáhnout viewport. */
iframe, embed, object, video { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Reset any inherited site background classes WP / old theme might inject */
.site, .site-content, .site-main, .wrap, .content-area, #page, #content {
  background: transparent !important;
}

/* === LAYOUT WRAPPER =============================================== */

.fr-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* === HEADER ====================================================== */

.fr-topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.fr-topbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
}
.fr-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: 26px;
  line-height: 1;
}
.fr-logo .red { color: var(--brand); }
.fr-logo .ink { color: var(--ink); }

[data-variant="punch"] .fr-topbar {
  background: #0a0a0b;
  border-bottom: 0;
}
[data-variant="punch"] .fr-topbar .fr-logo .ink { color: #fff; }
[data-variant="punch"] .fr-topbar .fr-nav a { color: rgba(255,255,255,.85); }
[data-variant="punch"] .fr-topbar .fr-icon-btn { color: #fff; }

.fr-nav {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.fr-nav a {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  white-space: nowrap;
}
.fr-nav a:hover { background: var(--bg-muted); }
.fr-nav a.active { color: var(--brand); }

@media (min-width: 900px) {
  .fr-nav { display: inline-flex; }
}

.fr-spacer { flex: 1; }
.fr-icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  color: var(--ink);
}
.fr-icon-btn:hover { background: var(--bg-muted); }
.fr-icon-btn svg { width: 20px; height: 20px; }

/* Mobile category chips below header */
.fr-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 16px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.fr-chips::-webkit-scrollbar { display: none; }
.fr-chip {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--bg-muted);
  color: var(--ink-2);
  border: 1px solid transparent;
  white-space: nowrap;
}
.fr-chip.active {
  background: var(--ink);
  color: #fff;
}
[data-variant="punch"] .fr-chip.active { background: var(--brand); }

@media (min-width: 900px) {
  .fr-chips { display: none; }
}

/* === CATEGORY BADGES ============================================= */

.fr-cat {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  color: #fff;
  background: var(--cat-novinky);
  line-height: 1;
}
.fr-cat--navod { background: var(--cat-navod); }
.fr-cat--bavu { background: var(--cat-bavu); }
.fr-cat--novinky { background: var(--cat-novinky); }
.fr-cat--bulvar { background: var(--cat-bulvar); }
.fr-cat--viral { background: var(--cat-viral); color: #1a1300; }

[data-variant="editorial"] .fr-cat {
  background: transparent !important;
  color: var(--cat-novinky);
  padding: 0;
  font-size: 11px;
  border-radius: 0;
}
[data-variant="editorial"] .fr-cat--navod { color: var(--cat-navod); }
[data-variant="editorial"] .fr-cat--bavu { color: var(--cat-bavu); }
[data-variant="editorial"] .fr-cat--bulvar { color: var(--cat-bulvar); }
[data-variant="editorial"] .fr-cat--viral { color: #b45309; }
[data-variant="editorial"] .fr-cat::before {
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
  margin-right: 6px;
  display: inline-block;
}

/* === ARTICLE CARDS =============================================== */

/* Cards — explicit fixed heights, image absolutely positioned */
.fr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
/* Invisible click overlay covering the whole card. Lets the user click
   anywhere on the card to open the post, while keeping the category
   badge and title text as separately-clickable links above it. */
.fr-card-link,
.fr-hero-link,
.fr-list-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
  background: transparent;
  border-radius: inherit;
}
/* Stacking inside a card:
   - link overlay sits at z-index 1, covering the whole card with a
     transparent <a> — clicks on the "background" of the card navigate
   - badge / title-link / foot live above (z-index 2) so they receive
     their own clicks (category link, title link)
   - media stays unstacked → the link overlay sits visually above it,
     so clicking anywhere on the image opens the post */
.fr-card .fr-cat,
.fr-card .fr-card-title,
.fr-card .fr-card-foot,
.fr-list-card .fr-cat,
.fr-list-card .fr-list-card-title,
.fr-list-card .fr-card-foot { position: relative; z-index: 2; }
.fr-hero .fr-hero-overlay { z-index: 2; }
.fr-card-title a,
.fr-hero-title a,
.fr-list-card-title a {
  color: inherit;
  text-decoration: none;
}
.fr-card-title a:hover { color: var(--brand); }
.fr-card-media {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 62.5%;  /* 16:10 — works in every browser, no aspect-ratio quirks */
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-muted);
  display: block;
}
.fr-card-media > img,
.fr-card-media > picture,
.fr-card-media > picture > img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
.fr-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fr-card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.fr-card-title:hover { color: var(--brand); }
.fr-card-foot {
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fr-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

/* Hero card — explicit fixed heights, no aspect-ratio gymnastics */
.fr-hero {
  position: relative;
  display: block;
  width: 100%;
  height: 280px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #1f2937 0%, #0a0a0b 100%);
  isolation: isolate;
  z-index: 1;
}
@media (min-width: 720px) {
  .fr-hero { height: 420px; }
}
@media (min-width: 1100px) {
  .fr-hero { height: 480px; }
}

/* Defensive image positioning — covers any nesting depth in case a plugin
   (Jetpack lazy-load, ShortPixel/EWWW WebP, Tailwind preflight on the site,
   page builders) wraps <img> inside <figure>, <span>, or extra <picture>
   elements. Without this, Tailwind's `img { height: auto }` reset wins on
   wrapped imgs and the picture stops filling the hero. */
.fr-hero img,
.fr-hero picture,
.fr-hero > img,
.fr-hero > picture,
.fr-hero > picture > img,
.fr-hero figure,
.fr-hero figure img,
.fr-hero span img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.fr-hero img { opacity: .85; }

.fr-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.88) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px;
  color: #fff;
  z-index: 2;
}
.fr-hero-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 8px 0 6px;
  text-wrap: balance;
  color: #fff !important;
}
.fr-hero-foot {
  font-size: 12px;
  color: rgba(255,255,255,.78);
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 720px) {
  .fr-hero-title { font-size: 28px; }
  .fr-hero-overlay { padding: 28px; }
}
@media (min-width: 1100px) {
  .fr-hero-title { font-size: 34px; }
}

/* Hero with no image — branded placeholder */
.fr-hero--no-image {
  background:
    radial-gradient(circle at 80% 20%, rgba(212,0,26,.35) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(212,0,26,.20) 0%, transparent 50%),
    linear-gradient(135deg, #1a1a1d 0%, #0a0a0b 100%);
  height: 240px;
}
@media (min-width: 720px) {
  .fr-hero--no-image { height: 280px; }
}

/* List card (compact horizontal) */
.fr-list-card {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.fr-list-card:last-child { border-bottom: 0; }
.fr-list-card-media {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-muted);
  flex-shrink: 0;
}
.fr-list-card-media img,
.fr-list-card-media > picture img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.fr-list-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 6px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Compact variant — dense rows */
[data-variant="compact"] .fr-card-media { aspect-ratio: 16 / 9; }
[data-variant="compact"] .fr-card-title { font-size: 15px; }

/* === HOMEPAGE GRID ============================================== */

.fr-feed { padding: 16px 0 24px; position: relative; }
.fr-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 28px 0 14px;
  gap: 12px;
}
.fr-section-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fr-section-title::before {
  content: "";
  width: 4px;
  height: 18px;
  background: var(--brand);
  border-radius: 2px;
}
.fr-section-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.fr-section-more:hover { color: var(--brand); }

.fr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 720px) {
  .fr-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (min-width: 1000px) {
  .fr-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop layout with sidebar */
.fr-with-sidebar {
  display: grid;
  /* `minmax(0, 1fr)` (ne pouze `1fr`) — bez něj může široký child (obrázek,
     embed, sloupec s `white-space:nowrap`) gridový sloupec roztáhnout přes
     šířku viewportu a vyrobit horizontální scroll na mobilu. */
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  position: relative;
  z-index: 1;
}
@media (min-width: 1000px) {
  .fr-with-sidebar {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
  }
}

.fr-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Sidebar search widget — keep input + submit button aligned in a row
   regardless of which template renders the form (our searchform.php,
   WP's default Search widget, the block editor "Search" block).

   IMPORTANT: .wp-block-search is the OUTER block that contains a
   <label> sibling above an .__inside-wrapper. Making it flex puts the
   label INLINE with the input/button. So only flex the inner wrapper. */
.fr-sidebar .widget_search,
.fr-sidebar .search-form,
.fr-sidebar .fr-searchform,
.fr-sidebar form[role="search"],
.fr-sidebar .wp-block-search__inside-wrapper {
  display: flex !important;
  gap: 8px;
  align-items: stretch;
  width: 100%;
  margin: 0;
}
.fr-sidebar .wp-block-search {
  display: block;
  width: 100%;
  margin: 0;
}
/* Hide the search widget's title (e.g. "Vyhledat" / "VYHLEDAT") — the
   form is self-explanatory; the heading just steals space. Other widget
   titles (e.g. "Nejčtenější za 24 h" set via fr-side-title) are
   untouched because they're <h4>, not .widget-title. */
.fr-sidebar .widget_search .widget-title,
.fr-sidebar .widget_search h2,
.fr-sidebar .widget_search h3,
.fr-sidebar .wp-block-search__label { display: none !important; }
.fr-sidebar input[type="search"],
.fr-sidebar .wp-block-search__input,
.fr-sidebar .search-field {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 15px;
  background: var(--bg);
  color: var(--ink);
  outline: none;
  margin: 0;
}
.fr-sidebar button[type="submit"],
.fr-sidebar .wp-block-search__button,
.fr-sidebar .search-submit {
  flex: 0 0 auto !important;
  height: 44px;
  padding: 0 18px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: var(--r-md);
  font-weight: 700;
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
}
.fr-sidebar input[type="search"]:focus,
.fr-sidebar .wp-block-search__input:focus,
.fr-sidebar .search-field:focus { border-color: var(--brand); }

.fr-side-block {
  background: var(--bg-muted);
  border-radius: var(--r-lg);
  padding: 20px;
}
.fr-side-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}
.fr-rank-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.fr-rank-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  counter-increment: rank;
}
.fr-rank-list li:first-child { border-top: 0; padding-top: 0; }
.fr-rank-list li::before {
  content: counter(rank);
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--brand);
  line-height: 1;
}
.fr-rank-list a {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === AD SLOTS ==================================================== */

.fr-ad {
  background: var(--bg-muted);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 28px 16px;
  margin: 24px 0;
}
.fr-ad-label { opacity: .7; font-weight: 600; }
.fr-ad--leaderboard { min-height: 90px; }
.fr-ad--rect { min-height: 250px; }

/* "Reklama pod článkem (po Zdroji)" — slot mezi koncem textu článku
   a sekcí "Mohlo by vás zajímat". Default obsahuje MGID widget, takže
   typicky vyrenderuje native-ad mřížku. Spacing držíme decentní —
   bez dashed borderu a placeholderu (ten se nikdy nezobrazí, slot je
   defaultně vyplněný). */
.fr-ad--after-content {
  margin: 24px 0 8px;
  padding: 0;
  min-height: 0;
  background: transparent;
  border: 0;
  display: block;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
  font-size: inherit;
}

/* `fr-ad--filled` se doplňuje automaticky, když je do slotu v Customizeru
   vložený kód (viz fasteer_ad_slot). Vyrušíme placeholderovou estetiku
   (šedé pozadí, dashed border, padding), aby reálná reklama měla čistý
   prostor. */
.fr-ad--filled {
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 0;
  display: block;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
  font-size: inherit;
}
.fr-ad--filled.fr-ad--sticky-mobile {
  /* Sticky verze potřebuje white bg + border-top zachované — přepíšeme. */
  background: #fff;
  border-top: 1px solid var(--line);
  display: flex;
  padding: 0;
}

/* ACF-driven ad wrappers. No min-height / placeholder — they're hidden
   entirely on the public frontend when the field is empty. */
.fr-acf-ad {
  display: block;
  margin: 0;
}
.fr-acf-ad--under-nav {
  padding: 12px 0;
  text-align: center;
}
.fr-acf-ad--sidebar {
  margin: 0 0 16px;
}
.fr-ad-under-nav-wrap {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.fr-ad-under-nav-wrap:empty,
.fr-ad-under-nav-wrap .fr-container:empty { display: none; }

/* ad3 — "Reklama nad galerií" rendered above the gallery trigger
   inside the article body.
   DŮLEŽITÉ: žádný flex/center na vnějším kontejneru — AdSense potřebuje
   <ins class="adsbygoogle"> s nenulovou šířkou, jinak hodí
   `TagError: No slot size for availableWidth=0`. */
.fr-gallery-prefix-ad {
  margin: 24px 0 8px;
  width: 100%;
  min-height: 50px;
}
.fr-gallery-prefix-ad > * { max-width: 100%; }
.fr-gallery-prefix-ad ins.adsbygoogle {
  display: block !important;
  width: 100% !important;
  min-width: 250px;
}
.fr-gallery-prefix-ad iframe { max-width: 100% !important; }

/* Reklamní slot pod featured image v článku (widget area
   `post-after-featured`) + hardcoded article1 AdSense.
   DŮLEŽITÉ: žádný flex se zarovnáním na střed na vnějším kontejneru —
   AdSense vyžaduje, aby <ins class="adsbygoogle"> měl při push()
   nenulovou šířku, jinak vyhodí `TagError: No slot size for
   availableWidth=0`. Necháváme block layout, <ins> se chová jako block
   a roztáhne se na šířku rodiče (max-width: 720px). */
.fr-post-ad-wrap {
  margin: 20px 0 24px;
  width: 100%;
}
.fr-post-ad {
  width: 100%;
  max-width: 100%;
  min-height: 50px; /* rezervuje místo, ať se layout nepřesouvá při fillu */
}
.fr-post-ad ins.adsbygoogle {
  display: block !important;
  width: 100% !important;
  min-width: 250px;
}
.fr-post-ad iframe { max-width: 100% !important; }

/* In-article slot (`.fr-ad-wrap`, vkládaný do the_content po N. odstavci).
   v1.0.69 — reklama se MUSÍ vejít do obsahového sloupce a chovat se jako
   v lightboxu: pevně-široké kreativy (FatChilli / FLX native, AdSense
   728×90) vycentrujeme a případný přesah ořízneme SYMETRICKY místo
   asymetrického left-cropu, který vznikal jen z `overflow-x: clip` na
   <html>. `text-align: center` je bezpečné i pro AdSense — block <ins>
   s width:100% dál dostane plnou šířku, takže nehrozí
   `TagError: No slot size for availableWidth=0`. */
.fr-ad-wrap {
  width: 100%;
  max-width: 100%;
  margin: 24px 0;
  text-align: center;
  overflow: hidden;
}
.fr-ad-wrap iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.fr-ad-wrap ins.adsbygoogle {
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.fr-ad--sticky-mobile {
  position: sticky;
  bottom: 0;
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  background: #fff;
  z-index: 40;
  min-height: 70px;
}

/* === ARTICLE PAGE ================================================ */

.fr-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 0 40px;
  /* Mobil: dlouhá slova / URL nesmí přetlačit kontejner. */
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.fr-article-head { margin-bottom: 22px; }
.fr-article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.fr-h1 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 8px 0 14px;
  text-wrap: balance;
}
@media (min-width: 720px) {
  .fr-h1 { font-size: 40px; }
  .fr-article { padding: 32px 0 60px; }
}
.fr-perex {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 18px;
  font-weight: 500;
}
.fr-article-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
}
.fr-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ddd, #aaa);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}
.fr-byline-name { color: var(--ink); font-weight: 600; }
.fr-byline-time { display: inline-flex; align-items: center; gap: 4px; }

.fr-feat {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: var(--r-md);
  margin: 18px 0 14px;
  display: block;
}
.fr-caption {
  font-size: 13px;
  color: var(--ink-3);
  margin: -6px 0 22px;
}

.fr-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}
.fr-body p { margin: 0 0 18px; }
.fr-body h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 34px 0 14px;
  color: var(--ink);
}
.fr-body blockquote {
  border-left: 4px solid var(--brand);
  margin: 24px 0;
  padding: 4px 0 4px 18px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  font-style: normal;
}
.fr-body a { color: var(--brand); border-bottom: 1px solid currentColor; }

/* === STICKY SHARE BAR (mobile) =================================== */

.fr-share-mobile {
  position: sticky;
  top: 60px;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fr-share-mobile::-webkit-scrollbar { display: none; }
.fr-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-muted);
  color: var(--ink-2);
  border: 0;
  white-space: nowrap;
}
.fr-share-btn svg { width: 14px; height: 14px; }
.fr-share-btn--fb { background: #1877f2; color: #fff; }
.fr-share-btn--x { background: #000; color: #fff; }
.fr-share-btn--wa { background: #25d366; color: #fff; }

/* Desktop sidebar share */
.fr-share-rail {
  display: none;
}
@media (min-width: 1100px) {
  .fr-share-rail {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    float: left;
    margin-left: -76px;
    margin-top: 8px;
  }
  .fr-share-mobile { display: none; }
  .fr-share-rail .fr-share-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    padding: 0;
    justify-content: center;
    /* Brand backgrounds (--fb / --x / --wa) defined above prevail. */
  }
  .fr-share-rail .fr-share-btn:hover { transform: translateY(-1px); transition: transform .15s ease; }
  .fr-share-rail .fr-share-btn svg { width: 18px; height: 18px; }
}

/* === RELATED CARDS GRID ========================================== */

.fr-related {
  margin: 36px 0 16px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.fr-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .fr-related-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
.fr-related .fr-card-title { font-size: 14px; }
.fr-related .fr-card-media { aspect-ratio: 16/10; }

/* === GALLERY ===================================================== */

.fr-gallery {
  margin: 24px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
@media (min-width: 720px) {
  .fr-gallery { grid-template-columns: repeat(3, 1fr); }
}
.fr-gallery-item {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-muted);
}
.fr-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.fr-gallery-ad {
  background: var(--bg-muted);
  border: 1px dashed var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}

/* === GALLERY TRIGGER (single image + "Otevři galerii" button) ===
   Replaces the raw [gallery] grid with a single tease image that opens
   a fullscreen lightbox on click. Better mobile UX (no scroll trap)
   and faster than a redirect to an attachment page. */
.fr-gallery-trigger {
  position: relative;
  display: block;
  margin: 24px 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-muted);
  cursor: zoom-in;
  isolation: isolate;
}
.fr-gallery-trigger-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--bg-muted);
}
.fr-gallery-trigger-media img,
.fr-gallery-trigger-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  /* Blur the teaser image so the content isn't visible — only on
     hover we slightly reduce blur for a little visual feedback. */
  filter: blur(18px);
  transform: scale(1.08); /* hide blur edges that would otherwise show transparent corners */
  transition: filter .4s ease, transform .4s ease;
}
.fr-gallery-trigger:hover .fr-gallery-trigger-img,
.fr-gallery-trigger:focus-within .fr-gallery-trigger-img {
  filter: blur(14px);
  transform: scale(1.12);
}
/* Soft dark vignette so the button reads on any photo */
.fr-gallery-trigger::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.fr-gallery-trigger-btn {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  appearance: none;
  border: 0;
  background: rgba(10,10,11,.85);
  color: #fff;
  padding: 14px 20px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .2s ease, background .2s ease;
}
.fr-gallery-trigger-btn:hover { background: var(--brand); transform: translate(-50%, -50%) scale(1.04); }
.fr-gallery-trigger-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.fr-gallery-trigger-btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fr-gallery-trigger-count {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255,255,255,.15);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

/* === LIGHTBOX (fullscreen gallery viewer) ============================
   Layout matches editorial-tabloid pattern (eXtra.cz / Blesk style):
     row 1: article title · ‹ counter › · back-to-article button
     row 2: ad slot (AdSense / Sklik)
     row 3: image with side arrows
     row 4: caption + photo credit
   Background is solid near-black with brand-tinted accents.            */
.fr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  color: var(--ink);
}
.fr-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* === Top bar (black strip with white text) ======================
   Desktop: title | pager | back | close — 4 cols.
   Mobile (≤720): 2 rows × 2 cols via grid-template-areas. The bar
   children are flat (no .fr-lightbox-bar-right wrapper) so each can
   be assigned its own grid area. */
.fr-lightbox-bar {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: #0a0a0b;
  color: #fff;
}
.fr-lightbox-title {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}
.fr-lightbox-pager {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: center;
  color: #fff;
}
.fr-lightbox-pager-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s ease, transform .15s ease;
}
.fr-lightbox-pager-btn:hover { background: rgba(255,255,255,.08); }
.fr-lightbox-pager-btn:active { transform: scale(.92); }
.fr-lightbox-pager-btn[disabled] { opacity: .3; cursor: default; }
.fr-lightbox-counter {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  min-width: 60px;
  text-align: center;
}
.fr-lightbox-back {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  transition: filter .15s ease;
  white-space: nowrap;
}
.fr-lightbox-back:visited { color: #fff; }
.fr-lightbox-back:hover { filter: brightness(1.1); color: #fff; }
.fr-lightbox-close {
  appearance: none;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}
.fr-lightbox-close:hover { background: rgba(255,255,255,.18); }

/* === Ad slot ===================================================== */
.fr-lightbox-ad {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}
.fr-lightbox-ad[hidden] { display: none; }
.fr-lightbox-ad > * { max-width: 100%; }
/* Slot variants — above image, below image. (Top-bar slot was removed:
   ad3 renders above the gallery trigger in the article body, not in the
   lightbox top strip.) */
.fr-lightbox-ad--top   { display: none; }

/* === Interstitial (full-bleed ad shown between photos) ============ */
.fr-lightbox-interstitial {
  position: absolute;
  inset: 0;
  background: #0a0a0b;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  gap: 20px;
}
.fr-lightbox-interstitial[hidden] { display: none; }
.fr-lightbox-interstitial-ad {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fr-lightbox-interstitial-skip {
  appearance: none;
  background: var(--brand);
  color: #fff;
  border: 0;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  align-self: flex-end;
  transition: filter .15s ease;
}
.fr-lightbox-interstitial-skip:hover { filter: brightness(1.1); }

/* === Arrow position toggle (pozice_sipek = dole | nahore) ========
   Default "dole" — arrows centered vertically beside image (current).
   "nahore" — collapse side arrows, move all nav into the top bar only. */
.fr-lightbox[data-arrows="nahore"] .fr-lightbox-side { display: none; }
.fr-lightbox[data-arrows="nahore"] .fr-lightbox-stage { grid-template-columns: 1fr; }

/* === Image stage ================================================ */
.fr-lightbox-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  justify-items: center;
  gap: 8px;
  padding: 12px 24px;
  min-height: 0;
  overflow: hidden;
}
/* Big round side arrows removed — top-bar nav is the only nav surface.
   Side arrow HTML is still emitted for backwards-compat but kept hidden. */
.fr-lightbox-side { display: none; }
.fr-lightbox-imgwrap {
  position: relative;
  width: 100%;
  height: 100%;
  /* Grid (ne flex) — řádky se nemůžou nikdy překrývat, ani když má ad
     iframe vlastní outer/inner border, padding nebo iframe-container
     s `position: absolute`. Tři pevné řádky: nad / obrázek / pod.
     Hidden ad-sloty (atribut `hidden` = display:none) řádek zkolabují,
     takže obrázek bere jejich místo.

     DŮLEŽITÉ: `minmax(0, 1fr)` (ne čistě `1fr`) — bez `minmax(0, ...)`
     by min-content řádku ≥ min-height/min-content potomka, a grid by
     se rozšířil nad rámec stage, když je viewport krátký. minmax(0…)
     dovolí řádku smrsknout pod min-content. */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 12px;
  padding: 0;
  min-height: 0;
  overflow: hidden;
}
/* Ad sub-slots: don't grow, sit at natural height, never overlap the image.
   Capped (max-height) so even velkoplošný native-ad widget (carousel
   produktů z Alza / MGID / Etarget) nezabere víc, než si obrázek může
   dovolit. Bez capu šel obrázek dolů na ~10–15 % stage, což bylo
   nečitelné. */
.fr-lightbox-ad--above,
.fr-lightbox-ad--below {
  /* Grid item — řádek 1 (above) nebo 3 (below). */
  width: auto;
  max-width: 100%;
  /* Cap reklamy: ≤ 30 % výšky viewportu nebo 280 px (co je menší).
     Kompromis mezi „obrázek čitelný" a „reklama vidět celá" — produkční
     native ad widget (Alza/Sklik/MGID grid s 4×2 produkty) má přirozenou
     výšku ~270–320 px, takže s capem 280 vidí uživatel typicky celý.
     Vyšší obsah (např. carousel s víc řádky) se ořízne, ale to je
     v pořádku — alternativa „nezacapovat" znamenala obrázek slidu
     v ~80 px šířky a nečitelný text. */
  max-height: min(30vh, 280px);
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  /* Garance, že se ad-sloty nemůžou natáhnout pod/nad sousední řádek. */
  align-self: center;
}
.fr-lightbox-ad--above { grid-row: 1; }
.fr-lightbox-ad--below { grid-row: 3; }
/* Vnitřek capped slotu se nesmí přetahovat ven (alza carousel umí být
   vyšší než 170 px — pak se zobrazí jen horní část).
   Native-ad iframe občas vyrenderuje `position: absolute` content;
   držíme ho přes `position: relative` na rodiči. */
.fr-lightbox-ad--above > *,
.fr-lightbox-ad--below > * {
  max-height: 100%;
  max-width: 100%;
}
.fr-lightbox-img {
  /* Grid item — řádek 2 (mezi reklamami). */
  grid-row: 2;
  align-self: center;
  justify-self: center;
  /* ŽÁDNÉ min-height — grid `minmax(0, 1fr)` se postará o správné
     rozdělení místa: ad nahoře max ≤ 18vh, foot a top-bar své
     výšky, a obrázku zbude maximum, ale ne víc, než stage skutečně
     dovolí. Bez tohoto pravidla se na krátkém viewportu obrázek
     odřízne pod spodním okrajem.

     `min-height: 0` doplněn explicitně, kdyby grid implicitně
     dosadil `min-content` (default pro 1fr items). */
  min-height: 0;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
  margin: 0;
}
.fr-lightbox-side {
  appearance: none;
  background: #0a0a0b;
  color: #fff;
  border: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.fr-lightbox-side:hover { background: var(--brand); }
.fr-lightbox-side:active { transform: scale(.94); }
.fr-lightbox-side[disabled] { opacity: .25; cursor: default; }

/* === Foot (caption + credit) ==================================== */
.fr-lightbox-foot {
  padding: 12px 24px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.fr-lightbox-caption {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  max-width: 880px;
  text-wrap: balance;
}
.fr-lightbox-caption:empty { display: none; }
.fr-lightbox-credit {
  color: var(--ink-3);
  font-size: 12px;
  font-style: italic;
}
.fr-lightbox-credit:empty { display: none; }

body.fr-lightbox-open { overflow: hidden; }

/* === Mobile ====================================================== */
@media (max-width: 720px) {
  .fr-lightbox-bar {
    /* Mobile rozložení:
       Řádek 1 — titulek (celá šířka, max 2 řádky) + zavírací křížek vpravo
       Řádek 2 — šipky + počitadlo, centrované
       Řádek 3 — „Zpět do článku" tlačítko v plné šířce
       Takto je titulek čitelný, ovládání jasné a tlačítka mají dobrý tap target. */
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title  close"
      "pager  pager"
      "back   back";
    row-gap: 10px;
    column-gap: 10px;
    padding: 10px 12px;
  }
  .fr-lightbox-title    { grid-area: title; font-size: 13px; -webkit-line-clamp: 2; min-width: 0; }
  .fr-lightbox-pager    { grid-area: pager; justify-self: center; gap: 14px; }
  .fr-lightbox-pager-btn { width: 32px; height: 32px; }
  .fr-lightbox-counter  { font-size: 14px; min-width: 48px; }
  .fr-lightbox-back     { grid-area: back;  justify-self: stretch; text-align: center; padding: 8px 12px; font-size: 12px; }
  .fr-lightbox-close    { grid-area: close; justify-self: end; align-self: start; width: 30px; height: 30px; }

  .fr-lightbox-stage { padding: 12px 14px; }
  .fr-lightbox-imgwrap { gap: 14px; }
  .fr-lightbox-foot { padding: 10px 14px 18px; }
  .fr-lightbox-caption { font-size: 14px; }
  .fr-lightbox-ad { padding: 8px 12px; }
  /* Na mobilu mírnější cap (vertikální prostor je tam vzácnější). */
  .fr-lightbox-ad--above,
  .fr-lightbox-ad--below {
    max-height: min(25vh, 220px);
  }

  /* v1.0.56 — Mobil: lightbox stage se scrolluje vertikálně, ad
     a obrázek mají přirozenou výšku, nic se neořeže. Cap reklamy
     výše se přesto zachová pro starší prohlížeče bez `overflow-y`
     na grid containeru. */
  .fr-lightbox-stage {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    align-items: start !important;
  }
  .fr-lightbox-imgwrap {
    /* Z grid přepnout na block — přirozený flow. Sloty se naskládají
       pod sebou, žádný "minmax(0, 1fr)" tlak na zmenšení obrázku. */
    display: block !important;
    height: auto !important;
    min-height: 100%;
  }
  .fr-lightbox-ad--above,
  .fr-lightbox-ad--below {
    /* Cap zrušený — reklama dostane plnou přirozenou výšku, scroll
       lightbox stage. Důležitější je celá reklama než „všechno na
       jednu obrazovku bez scrollu". */
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 !important;
  }
  .fr-lightbox-img {
    /* Obrázek na mobilu má jasný cap, aby nebyl gigantický (typicky
       slide má aspoct ratio 9:16 = vysoký), ale roztáhne se na šířku
       viewport (minus stage padding). */
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 75vh !important;
    margin: 0 auto !important;
    object-fit: contain;
  }
  /* min-height: 0 stačí — grid `minmax(0, 1fr)` udělá zbytek. */
}

/* === FOOTER ====================================================== */

.fr-footer {
  background: #0a0a0b;
  color: #cfd0d4;
  margin-top: 40px;
  padding: 32px 0 24px;
  font-size: 13px;
}
.fr-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: flex-start;
}
@media (min-width: 720px) {
  .fr-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.fr-footer h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
}
.fr-footer a { display: block; padding: 4px 0; color: #cfd0d4; }
.fr-footer a:hover { color: #fff; }
.fr-footer-logo {
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.fr-footer-logo .red { color: var(--brand); }
.fr-footer-fine {
  border-top: 1px solid #1d1d20;
  margin-top: 24px;
  padding-top: 18px;
  font-size: 12px;
  color: #87878d;
}

/* === LOAD MORE / PAGINATION ====================================== */

.fr-loadmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 28px auto;
  padding: 14px 28px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
}
.fr-loadmore-wrap { text-align: center; }

/* WP pagination */
.navigation.pagination,
.nav-links {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 28px 0;
  flex-wrap: wrap;
}
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background: var(--bg-muted);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.nav-links .page-numbers.current {
  background: var(--ink);
  color: #fff;
}
.nav-links .page-numbers:hover:not(.current) {
  background: var(--line);
}

/* WP page-links (for wp_link_pages) */
.page-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 28px 0;
  align-items: center;
}
.page-links > a, .page-links > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--bg-muted);
}

/* === NAV MENU (WP markup) ======================================== */

.fr-nav .fr-nav-list,
.fr-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
/* When wp_nav_menu uses items_wrap='%3$s' the <ul> wrapper is missing —
   so the list-style reset above never matches. Reset the <li>s directly. */
.fr-nav > li,
.fr-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fr-nav li::marker { content: ''; }
.fr-nav li > a {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  white-space: nowrap;
}
.fr-nav li > a:hover { background: var(--bg-muted); }
.fr-nav li.current-menu-item > a,
.fr-nav li.current-cat > a { color: var(--brand); }

[data-variant="punch"] .fr-topbar .fr-nav li > a { color: rgba(255,255,255,.85); }
[data-variant="punch"] .fr-topbar .fr-nav li > a:hover { background: rgba(255,255,255,.08); }

/* Drawers — hidden by default unless explicitly opened via JS */
.fr-search-drawer,
.fr-mobile-drawer {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.fr-search-drawer[hidden],
.fr-mobile-drawer[hidden] {
  display: none !important;
}
.fr-mobile-drawer .fr-mobile-menu,
.fr-mobile-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.fr-mobile-drawer li > a {
  display: block;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.fr-mobile-drawer li:last-child > a { border-bottom: 0; }

[data-variant="punch"] .fr-search-drawer,
[data-variant="punch"] .fr-mobile-drawer {
  background: #0a0a0b;
  color: #fff;
}
[data-variant="punch"] .fr-mobile-drawer li > a {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.1);
}

/* Skip link */
.skip-link,
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}
.skip-link:focus {
  background: #fff;
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  padding: 12px 18px;
  z-index: 999;
  top: 8px;
  left: 8px;
  text-decoration: underline;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

/* === COMMENTS =================================================== */

.comment-list .comment {
  padding: 14px;
  background: var(--bg-muted);
  border-radius: var(--r-md);
  list-style: none;
}
.comment-list .comment + .comment { margin-top: 14px; }
.comment-list .children {
  list-style: none;
  padding-left: 16px;
  margin: 14px 0 0;
}
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.comment-author .avatar { border-radius: 50%; }
.comment-metadata { font-size: 12px; color: var(--ink-3); margin: 2px 0 8px; }
.comment-content { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.comment-content p { margin: 0 0 8px; }
.reply { margin-top: 8px; }
.reply a {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: rgba(212,0,26,.08);
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.comment-form label {
  font-size: 13px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font: inherit;
  font-size: 15px;
  background: var(--bg);
}
.comment-form textarea { min-height: 120px; }
.comment-form .submit,
.comment-form .form-submit button {
  align-self: flex-start;
}

/* === EDITOR (admin) compat ======================================= */
.entry-content > * + * { margin-top: 18px; }
.entry-content ul,
.entry-content ol { padding-left: 22px; }
.entry-content img { border-radius: var(--r-md); height: auto; }
.entry-content figure { margin: 24px 0; }
.entry-content figure figcaption {
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
  margin-top: 8px;
}

/* WP native gallery styling override */
.fr-gallery .gallery-icon,
.gallery.fr-gallery .gallery-icon { margin: 0; }
.gallery.fr-gallery {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 24px 0;
}
@media (min-width: 720px) {
  .gallery.fr-gallery { grid-template-columns: repeat(3, 1fr); }
}
.gallery.fr-gallery .gallery-item {
  width: 100% !important;
  margin: 0 !important;
}
.gallery.fr-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 0 !important;
}
.gallery.fr-gallery .gallery-caption { display: none; }

/* === DARK MODE for Punch is handled via theme color tokens === */

/* === READING PROGRESS BAR ======================================== */

.fr-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--brand);
  z-index: 60;
  transition: width .1s linear;
  width: 0;
}

/* Punch variant tweaks */
[data-variant="punch"] .fr-loadmore { background: var(--brand); }
[data-variant="punch"] .fr-hero-title { font-weight: 900; text-transform: none; }
[data-variant="punch"] .fr-card-title { font-weight: 800; }
[data-variant="punch"] .fr-section-title::before { background: var(--brand); }

/* Compact tweaks */
[data-variant="compact"] .fr-section-head { margin: 18px 0 10px; }
[data-variant="compact"] .fr-grid { gap: 18px; }
[data-variant="compact"] .fr-feed { padding: 12px 0 18px; }

/* === MOBILE OVERFLOW DEFENSE (v1.0.41 → strengthened in v1.0.44) ==
   Fix pro stížnost: „Na pravém kraji na iPhone nevidím celý obrázek
   ani text."

   Příčina: AdSense / Sklik / Protag vkládají <ins class="adsbygoogle">
   (a podobné) s inline-stylem `width: 728px` (nebo i víc). Globální
   defenziva v hlavičce CSS pokrývala jen <iframe>/<embed>/<video>,
   ne <ins>. Když AdSense vyplní slot 728×90, element je 728 px široký,
   posune layout, a `overflow-x: clip` na <html> sice nezpůsobí
   horizontální scroll, ale ořízne pravý okraj — uživatel přijde
   o závěr titulku a část obrázků v gridu pod ním.

   Stejný princip platí pro Gutenberg `alignfull` / `alignwide`,
   `<table>`, `<pre>` a další obsah, který běžně vzniká v editoru.

   Všechna pravidla níže používají `!important`, protože konkurují
   inline-stylům, které dosazují reklamní sítě a WP core. */

/* --- AdSense / Sklik / generické ad ins-tagy --------------------- */
ins.adsbygoogle,
ins.amp-ad,
ins.amp-sticky-ad,
ins.advertiscom,
amp-ad,
.adsbygoogle,
.sklik-leaderboard,
.sklik-square,
.fr-acf-ad,
.fr-acf-ad > *,
.fr-ad-wrap,
.fr-ad-wrap *,
.fr-post-ad,
.fr-post-ad > *,
.fr-gallery-prefix-ad,
.fr-gallery-prefix-ad > * {
  max-width: 100% !important;
  box-sizing: border-box;
}
/* AdSense reálně sází `display: inline-block; width: 728px;`. Pokud
   element ponecháme inline-block, `max-width: 100%` ho sice zúží, ale
   sourozenecké inline boxy mu kolem nechají whitespace. Přepneme tedy
   na block a šířku jednoznačně přebíráme od rodiče. */
ins.adsbygoogle {
  display: block !important;
  width: auto !important;
}
/* Jakýkoli iframe (ad, embed, YouTube) je vždy zúžen na šířku rodiče,
   i když má inline style="width:NNNpx". Doplňuje původní pravidlo
   `iframe { max-width: 100% }`, které ne vždy přebíjelo inline width. */
iframe, embed, object, video {
  max-width: 100% !important;
}

/* --- Gutenberg align- bloky -------------------------------------- *
   `.alignfull` / `.alignwide` v defaultním Gutenbergu používají
   negative margin trick (margin-left: calc(50% - 50vw)), který v naší
   konstrukci s `max-width: 720px` článkem rozbije pravý okraj — obrázek
   se vykreslí 100vw široký a vyleze přes celé tělo. Resetujeme zpět na
   obsahový sloupec a obrázek držíme uvnitř.                          */
.entry-content .alignfull,
.entry-content .alignwide,
.fr-body .alignfull,
.fr-body .alignwide,
.entry-content .wp-block-image.alignfull,
.entry-content .wp-block-image.alignwide {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
.entry-content .alignfull img,
.entry-content .alignwide img,
.fr-body .alignfull img,
.fr-body .alignwide img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
/* `.alignright` / `.alignleft` na mobilu zalomíme do bloku, aby plovoucí
   obrázek netlačil text přes hranu. */
@media (max-width: 720px) {
  .entry-content .alignright,
  .entry-content .alignleft,
  .fr-body .alignright,
  .fr-body .alignleft {
    float: none !important;
    display: block !important;
    margin: 18px auto !important;
    max-width: 100% !important;
  }
}

/* --- Pojistka: cokoli uvnitř těla článku nesmí přečníst rodiče --- */
.fr-body > *,
.entry-content > * {
  max-width: 100%;
}
.fr-body img,
.entry-content img,
.fr-body figure,
.entry-content figure,
.fr-body picture,
.entry-content picture {
  max-width: 100% !important;
  height: auto;
}
.fr-body figure,
.entry-content figure {
  margin-left: 0;
  margin-right: 0;
}

/* --- Tabulky a předformátované bloky se skrolují interně --------- *
   Pokud autor vloží širokou tabulku nebo dlouhý fragment kódu, bude se
   skrolovat uvnitř článku, ne přes celou stránku.                   */
.fr-body table,
.entry-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
.fr-body pre,
.entry-content pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
  word-break: normal;
}
.fr-body code,
.entry-content code {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* --- Dlouhá slova / URL v textu lámeme ---------------------------- */
.fr-body p,
.fr-body li,
.fr-body h1,
.fr-body h2,
.fr-body h3,
.fr-body a,
.fr-h1,
.fr-card-title,
.fr-hero-title,
.fr-list-card-title,
.entry-content p,
.entry-content li {
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* `hyphens: auto` doplňuje break-word — Safari/iOS umí česká dělení,
     pokud má <html lang="cs">. */
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* --- Vnější wrapery pro reklamy nesmí samy přesahovat ------------ */
.fr-ad-under-nav-wrap,
.fr-ad-under-nav-wrap > .fr-container,
.fr-post-ad-wrap {
  max-width: 100%;
  overflow: hidden;
}

/* --- Bezpečné chování při notch / Dynamic Island ----------------- *
   Meta viewport má `viewport-fit=cover`. V landscape se safe-area-insets
   na bocích dotknou obsahu. Přidáme jim respekt na úrovni containeru,
   aby titulky a obrázky nebyly schované pod zaoblením displeje.     */
@supports (padding: max(0px)) {
  .fr-container {
    padding-left:  max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .fr-chips {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .fr-share-mobile {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .fr-ad--sticky-mobile {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* --- Sticky-mobile reklama nesmí ukazovat 320px ven ze 360 mob. -- */
.fr-ad--sticky-mobile,
.fr-ad--sticky-mobile > * {
  max-width: 100vw;
  overflow: hidden;
}
.fr-ad--sticky-mobile ins.adsbygoogle {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* --- Pojistka úplně nahoře v hierarchii -------------------------- *
   I kdyby plugin někde nasadil <div style="width:9999px">, html/body
   ho ořízne. Toto bylo už dříve, jen znovu připomenuto.             */
html, body {
  max-width: 100%;
}

/* === V1.0.44 — POSÍLENÁ DEFENZIVA PROTI MOBILNÍMU PŘEKRESLENÍ ===== *
   Reálné iPhone screenshoty ukazují, že obsah místy přetéká i přes
   `overflow-x: clip` — typicky kvůli iOS Accessibility „Dynamic Type" /
   „Larger Text" (Safari zvětší tělo textu, ale šířku containeru ne),
   kvůli starší verzi Safari (clip neexistoval před iOS 16), kvůli
   některému 3rd-party scriptu, který injektuje široký element po
   načtení stránky, nebo kvůli inline-stylům s pevnými šířkami v obsahu.

   Tady jsou pravidla, která pokrývají všechny tyto kanály najednou.
   Záměrně agresivní, většinou `!important`, protože konkurujeme
   inline-stylům reklamních sítí. */

/* iOS Safari nesmí auto-zoomovat text, když má uživatel zapnutý
   "Larger Text" v Accessibility. Bez toho Safari nafoukne body
   na velikost dynamic-type, ale layout zůstane na designové
   šířce → text vyteče. */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Fallback z `overflow-x: clip` na `hidden` pro Safari ≤ 15.6.
   `clip` nemá v starém Safari žádný efekt → obsah teče přes okraj.
   `hidden` zase vytváří scroll-container, ale na html/body to v praxi
   nezpůsobuje regression — `position: sticky` v hlavičce funguje
   i pod tímto pravidlem, protože sticky je vázané na nejbližšího
   scrollovacího předka (typicky viewport), a `overflow: hidden`
   na html / body NEVYTVÁŘÍ nový scroll-container pro sticky elementy
   uvnitř (to dělá až jiný element s overflow). */
@supports not (overflow: clip) {
  html, body {
    overflow-x: hidden !important;
  }
}
/* Pojistka — některé verze Safari ohlásí `@supports (overflow: clip)`
   jako true, ale renderují clip špatně. Necháme oba mechanismy
   aktivní vedle sebe, aby fallback vždy zabíral. */
html, body {
  width: 100%;
  max-width: 100%;
}

/* Žádný potomek <body> nesmí přesáhnout viewport. Použijeme `100vw`
   jako tvrdou pojistku — když některý plugin vrátí <div style="width:
   2000px;">, tahle vrstva ho ořízne ještě před tím, než vyvolá
   layout shift. */
body > * {
  max-width: 100vw;
}

/* Hlavní textové bloky v článku — povolíme break i v dlouhých slovech
   bez hyphenace. `overflow-wrap: anywhere` je agresivnější než
   `break-word`: rozdělí slovo na libovolné pozici, pokud by jinak
   přetekl řádek. Pro běžný text v češtině se vůbec neuplatní (slova
   se zalomí mezerou), ale pro URL / dlouhé identifikátory uloženě
   ve velkém slově funguje spolehlivěji. */
.fr-h1,
.fr-card-title,
.fr-hero-title,
.fr-list-card-title,
.fr-body p,
.fr-body li,
.fr-body h2,
.fr-body h3,
.fr-body a,
.fr-body strong,
.entry-content p,
.entry-content li,
.entry-content h2,
.entry-content h3 {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* `display: flex` se sourozencem, který nemá `min-width: 0`, je častý
   důvod, proč grid/flex item rozšíří svou šířku přes rodičovský box.
   Article byline (avatar + jméno + datum) je flex; explicitně
   zajistíme, že textový sloupec nepřetlačí container. */
.fr-article-byline,
.fr-article-byline > * {
  min-width: 0;
}
.fr-article-byline > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Tagy a chips na konci článku — `<a class="fr-chip">` je inline-flex.
   Když jméno tagu obsahuje dlouhé slovo, chip se může roztáhnout přes
   container. Limituj. */
.fr-tags .fr-chip,
.fr-related .fr-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sidebar widgety (search bar, rank list, atd.) — všechny inputy,
   buttony a vnořené prvky drž v boxu rodiče. */
.fr-sidebar > *,
.fr-sidebar input,
.fr-sidebar button,
.fr-sidebar form,
.fr-side-block,
.fr-side-block > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* MGID a podobné native-ad widgety na šířku 100% rodiče. MGID
   `<div data-type="_mgwidget">` typicky vyrenderuje vnitřní iframe
   nebo grid — chceme, aby se vešel. */
div[data-type="_mgwidget"],
div[data-widget-id],
div[class*="mgid"],
div[class*="MGID"],
div[id^="MG_"],
div[id^="M-"] {
  max-width: 100% !important;
  overflow: hidden;
}

/* Hard cap pro vše uvnitř `.fr-body` jako poslední záchrana. Hlavní
   článek nesmí mít žádné dítě širší než kontejner. Použít `!important`,
   aby přebilo i inline `style="width:NNNpx"` z editoru. */
.fr-body *,
.entry-content > * {
  max-width: 100% !important;
}

/* Ad slot pod featured image — `<ins>` často dostává inline width.
   Pojistka navíc nad rámec původního pravidla, ať platí i pro starou
   variantu wrapperu. */
.fr-post-ad,
.fr-post-ad > *,
.fr-post-ad ins,
.fr-post-ad iframe {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* === V1.0.48 — BELT-AND-SUSPENDERS PADDING PROTI EDGE-TO-EDGE ===== *
   Reálné iPhone screenshoty stále ukazují obsah článku přilepený
   k pravému/levému okraji viewportu, nadpis začíná na x=0, fotka
   v featured-image jde edge-to-edge.

   Diagnóza: `.fr-container` levý/pravý padding (20 px) se v daném
   prostředí neaplikoval — buď je v cache stará verze CSS, nebo
   některý 3rd-party plugin přepisuje `.fr-container { padding: 0 }`,
   nebo (méně pravděpodobné) inline `style="padding-..."` na <main>
   přebíjí shorthand.

   Řešení: dát horizontální padding NEJEN `.fr-container`, ale i přímo
   nositelům obsahu (`.fr-article`, `.fr-feed`, `.fr-with-sidebar`).
   Kdyby cokoli rozbilo `.fr-container`, content má vlastní obranu. */

@media (max-width: 720px) {
  /* Hlavní container — re-deklarace padding-left/right s `!important`,
     aby ho přepsalo jen něco s vyšší specifikou (např. inline). */
  main.fr-container,
  .fr-container {
    padding-left:  max(16px, env(safe-area-inset-left))  !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  /* Pokud někdo `.fr-container { padding: 0 }` přebíjí, tak alespoň
     article wrapper si zachová margin. Inline `padding:0` v single.php
     na <article class="fr-article"> přepíšeme zpět na padding-left/right
     12px — title a tělo článku pak nejsou nikdy přilepené k hraně. */
  article.fr-article,
  .fr-article {
    padding-left:  12px !important;
    padding-right: 12px !important;
  }
  /* Vnitřní `<div style="max-width:720px;...">` v single.php nemá padding —
     padding přebírá z `.fr-article` (výše). */

  /* Sekce/feedy také, kdyby se použily na mobile bez fr-container. */
  .fr-feed,
  .fr-with-sidebar {
    padding-left:  0 !important;
    padding-right: 0 !important;
  }

  /* Featured image v článku má `width: 100%` (full-bleed v rámci
     containeru). Když `.fr-container` selže, fotka by šla edge-to-edge.
     Drž ji uvnitř `.fr-article` paddingu. */
  .fr-feat,
  .fr-article img,
  .fr-article picture,
  .fr-article figure,
  .fr-article video,
  .fr-article iframe,
  .fr-article > * {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Sticky share lišta — má vlastní padding (16px), ale pokud
     `.fr-container` selže, zarovná se k hraně. Re-declare. */
  .fr-share-mobile {
    padding-left:  max(16px, env(safe-area-inset-left))  !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  /* Chips kategorií pod headerem — podobně. */
  .fr-chips {
    padding-left:  max(16px, env(safe-area-inset-left))  !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
}

/* === V1.0.53 — BRUTE-FORCE VIEWPORT CONTAINMENT NA MOBILU ========== *
   Reálné iPhone screenshoty STÁLE ukazují text článku, který se na
   konci řádku ořezává mid-word. Předchozí pravidla `overflow-wrap:
   anywhere` jsou validní pro Safari 16+, ale ve starším Safari /
   některých 3rd-party CSS prostředích neúčinkují.

   Tato sekce je „kladivo" — všechno v `.fr-article` se zúží na max
   100vw, všechno se může lámat kdekoli, žádný element nesmí mít
   min-width větší než 0. Cílem je: ať se stane cokoli, text v článku
   se nikdy nevyleje za pravý okraj viewportu na mobilu. */

@media (max-width: 720px) {
  /* v1.0.68 — Mobil: menší vertikální mezera kolem sticky share lišty
     + odsazení článku, aby ji nepřekrývalo. */
  .fr-share-mobile {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 0;
  }
  /* Šablona má `main.fr-container { padding-top: 8px }` inline-stylem,
     na mobilu ho stáhneme na 0 — sticky share lišta jde rovnou pod
     chips/ad1. */
  main.fr-container {
    padding-top: 0 !important;
  }
  /* Mezi sticky share a article-head je potřeba buffer, aby badge
     a h1 nebyly zakryté při sticky pinningu. */
  article.fr-article > div {
    padding-top: 6px !important;
  }
  .fr-article-head {
    padding-top: 4px;
  }
  .fr-article-meta {
    margin-top: 2px;
  }

  /* v1.0.58 — Kategorie badge `.fr-cat` musí mít `overflow: visible`,
     jinak letter-spacing UPPERCASE textu (např. "VIRÁLNÍ") ořeže
     poslední znak. Brute-force pravidla v1.0.56 mu daly `overflow-x:
     hidden`, což diakritiku odřízlo. */
  .fr-cat,
  .fr-cat::before,
  .fr-cat::after {
    overflow: visible !important;
    padding-right: 10px;
  }

  /* v1.0.59 — Reklamy musí být centrované a uvnitř containeru.
     Některé sítě (AdSense related search „Zjistit více", Sklik,
     MGID native ads) vracejí widget s pevnou interní šířkou — bez
     `text-align: center` na wrapperu se zarazí o levý okraj.
     `margin: 0 auto` na <ins>/<iframe> sjednotí horizontální
     centrování napříč všemi sítěmi.

     v1.0.67 — `:not(script):not(style)` na universal selektoru.
     Bez toho `display: block !important` přebíjelo browser-default
     `script { display: none }` a obsah `<script>` (např. AdSense
     `adsbygoogle.push({})`) se renderoval jako text na stránce. */
  .fr-post-ad,
  .fr-post-ad-wrap,
  .fr-legacy-ad,
  .fr-legacy-ad-wrap,
  .fr-acf-ad,
  .fr-acf-ad--under-nav,
  .fr-ad,
  .fr-ad-wrap,
  .fr-ad-under-nav-wrap,
  .fr-gallery-prefix-ad {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .fr-post-ad > *:not(script):not(style),
  .fr-post-ad-wrap > *:not(script):not(style),
  .fr-legacy-ad > *:not(script):not(style),
  .fr-legacy-ad-wrap > *:not(script):not(style),
  .fr-acf-ad > *:not(script):not(style),
  .fr-ad-wrap > *:not(script):not(style),
  .fr-gallery-prefix-ad > *:not(script):not(style),
  .fr-post-ad ins,
  .fr-post-ad iframe,
  .fr-legacy-ad ins,
  .fr-legacy-ad iframe,
  .fr-acf-ad ins,
  .fr-acf-ad iframe {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  /* Pojistka — `<script>` a `<style>` uvnitř ad wrapperů musí být
     vždy schované (browser-default `display: none`), aby se jejich
     obsah nezobrazoval jako text. */
  .fr-post-ad script,
  .fr-post-ad-wrap script,
  .fr-legacy-ad script,
  .fr-legacy-ad-wrap script,
  .fr-acf-ad script,
  .fr-ad script,
  .fr-ad-wrap script,
  .fr-ad-under-nav-wrap script,
  .fr-gallery-prefix-ad script,
  .fr-post-ad style,
  .fr-post-ad-wrap style,
  .fr-legacy-ad style,
  .fr-legacy-ad-wrap style,
  .fr-acf-ad style,
  .fr-ad style,
  .fr-ad-wrap style,
  .fr-ad-under-nav-wrap style,
  .fr-gallery-prefix-ad style {
    display: none !important;
  }

  /* Konvergence dvou verzí `overflow-wrap` v cascade — starší Safari
     ignoruje `anywhere` a propadne na `break-word`, novější Safari
     použije `anywhere`. */
  .fr-body,
  .fr-body *,
  .entry-content,
  .entry-content *,
  /* v1.0.56 — rozšíření na celý article, ne jen tělo. Reklamní
     wrappery `.fr-post-ad-wrap`, `.fr-legacy-ad-wrap`, ACF ad bloky
     sedí v `.fr-article-head` (mezi h1 a featured), tj. mimo
     `.fr-body` — bez tohohle pravidla jejich vnitřní iframy /
     <ins> přečnívaly. */
  .fr-article,
  .fr-article *,
  .fr-article-head,
  .fr-article-head * {
    overflow-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    -webkit-hyphens: auto;
    hyphens: auto;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Reklamní wrappery — všechny varianty (ACF, legacy, current).
     Hard cap včetně všech vnitřních prvků. Cílíme i na klasická
     ad-network HTML (Sklik, MGID, Etarget, Mafra, Protag) co
     vykreslují vlastní iframy s pevnou šířkou. */
  .fr-post-ad,
  .fr-post-ad-wrap,
  .fr-legacy-ad,
  .fr-legacy-ad-wrap,
  .fr-acf-ad,
  .fr-acf-ad--under-nav,
  .fr-acf-ad--sidebar,
  .fr-ad,
  .fr-ad-wrap,
  .fr-ad-under-nav-wrap,
  .fr-gallery-prefix-ad,
  /* + vnitřní obsah */
  .fr-post-ad *,
  .fr-post-ad-wrap *,
  .fr-legacy-ad *,
  .fr-legacy-ad-wrap *,
  .fr-acf-ad *,
  .fr-ad *,
  .fr-ad-wrap *,
  .fr-ad-under-nav-wrap *,
  .fr-gallery-prefix-ad * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  /* AdSense / GPT iframy mají často inline `width="NNN"` HTML atribut
     (ne CSS), který musíme explicitně přebít. Pozn.: `width` attr
     se v CSS overriduje stejnou cestou jako inline style, ale s
     `!important` je jistota. */
  .fr-post-ad iframe,
  .fr-post-ad-wrap iframe,
  .fr-legacy-ad iframe,
  .fr-legacy-ad-wrap iframe,
  .fr-acf-ad iframe,
  .fr-ad iframe,
  .fr-ad-wrap iframe,
  .fr-ad-under-nav-wrap iframe,
  .fr-gallery-prefix-ad iframe,
  /* AdSense vrací <ins> + uvnitř <iframe id="aswift_X"> */
  iframe[id^="aswift_"],
  iframe[id^="google_ads"],
  iframe[name^="google_ads"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* `<main class="fr-container">` má historicky `max-width: 1240px;
     margin: 0 auto; padding: 0 20px;`. Na mobilu mu vynucujeme
     `width: 100%; max-width: 100vw;` aby ho nic nemohlo natáhnout
     ven z viewportu. `overflow-x: hidden` na vnitřním wrapperu je
     poslední pojistka, kdyby jakýkoli child element ignoroval
     `max-width: 100%`. */
  main.fr-container,
  .fr-container {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Article a jeho interní wrapper — striktně zúžit a zalomit text. */
  article.fr-article,
  .fr-article,
  .fr-article > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  /* Hlavičky článku a karet — break anywhere. */
  .fr-h1,
  .fr-card-title,
  .fr-hero-title,
  .fr-list-card-title,
  .fr-body h1,
  .fr-body h2,
  .fr-body h3,
  .entry-content h1,
  .entry-content h2,
  .entry-content h3 {
    overflow-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* `with-sidebar` grid — implicit min-content track size by mohl
     způsobit, že grid item přesáhne. Explicitní `minmax(0, 1fr)`. */
  .fr-with-sidebar {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* === V1.0.53 — DEBUG OVERFLOW PARAM ============================== *
   Otevři článek s `?fasteer_debug_overflow=1` v URL a každý element,
   který přečnívá viewport, se vyrenderuje s magentovým outlinem.
   Pomáhá vzdáleně diagnostikovat, který konkrétní DOM uzel padding
   prorážel. theme.js detekuje query parametr a doplní třídu
   `fasteer-overflow-debug` na <html>. */

html.fasteer-overflow-debug .__fr-overflow-marker {
  outline: 3px solid magenta !important;
  outline-offset: -3px;
  background: rgba(255, 0, 255, 0.08) !important;
}
html.fasteer-overflow-debug::after {
  content: "DEBUG: overflow audit aktivní";
  position: fixed;
  top: 0; left: 0; right: 0;
  background: magenta;
  color: white;
  font: bold 12px monospace;
  text-align: center;
  padding: 4px;
  z-index: 99999;
}