/**
 * CZ: Styly StreamField bloků (templates/blocks/*.html).
 *     Do F0 se bloky nerenderovaly vůbec (chyběl Meta.template), takže tenhle soubor je
 *     první vizuální vrstva nad obsahem z CMS. Všechny hodnoty jdou z tokens.css —
 *     žádný hex ani pevné px, aby dark mode fungoval bez dalšího zásahu.
 *
 *     Prefix `cms-` je povinný: Wagtail obaluje každý blok ve StreamFieldu do
 *     `<div class="w-block-{typ} block-{typ}">`, takže názvy `.block-*` jsou obsazené
 *     a styl by se aplikoval dvakrát (na wrapper i na obsah).
 *
 * EN: StreamField block styles (templates/blocks/*.html).
 *     Before F0 the blocks did not render at all (no Meta.template), so this file is the
 *     first visual layer over CMS content. Every value comes from tokens.css — no hex, no
 *     hardcoded px, so dark mode works with no extra work.
 *
 *     The `cms-` prefix is mandatory: Wagtail wraps every StreamField block in
 *     `<div class="w-block-{type} block-{type}">`, so `.block-*` names are taken and the
 *     styles would apply twice (to the wrapper and to the content).
 */

/* =============================================
 * SPOLEČNÉ / SHARED
 * ============================================= */
/* CZ: Sousední bloky odděluje svislý margin. Wagtailí wrapper `<div>` nemá padding ani
       border, takže se margin skrz něj složí (margin collapsing) — proto nestačí
       `.cms-block + .cms-block` (sourozenci jsou wrappery, ne samotné bloky).
   EN: Vertical margin separates adjacent blocks. Wagtail's wrapper `<div>` has no padding
       or border, so the margin collapses through it — hence `.cms-block + .cms-block`
       would not work (the siblings are wrappers, not the blocks themselves). */
.cms-block {
  margin-block: var(--spacing-6);
}

/* =============================================
 * HEADING
 * ============================================= */
.cms-heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-block-start: var(--spacing-10);
}

/* CZ: F1a — `heading` umí i úroveň H3. Podnadpis je menší a s menším odstupem shora,
       aby vizuální hierarchie odpovídala té sémantické (H2 → H3).
   EN: F1a — `heading` also supports level H3. The subheading is smaller with a tighter top
       margin so the visual hierarchy matches the semantic one (H2 → H3). */
.cms-heading--h3 {
  font-size: var(--text-xl);
  margin-block-start: var(--spacing-8);
}

/* =============================================
 * RICH TEXT (paragraph, raw_html)
 * ============================================= */
.cms-richtext {
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
  /* CZ: Dlouhé URL z WP importu jinak roztáhnou layout do horizontálního scrollu.
     EN: Long URLs from the WP import otherwise stretch the layout into horizontal scroll. */
  overflow-wrap: anywhere;
}

.cms-richtext > * + * {
  margin-block-start: var(--spacing-4);
}

.cms-richtext a {
  color: var(--color-accent-text);
  text-decoration: underline;
}

.cms-richtext ul,
.cms-richtext ol {
  padding-inline-start: var(--spacing-6);
}

.cms-richtext li + li {
  margin-block-start: var(--spacing-2);
}

.cms-richtext img,
.cms-richtext iframe {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* CZ: Tabulky z WP importu bývají širší než sloupec textu — scroll jen uvnitř bloku,
       stránka se horizontálně neposouvá.
   EN: WP-imported tables are often wider than the text column — scroll inside the block,
       the page itself never scrolls horizontally. */
.cms-rawhtml {
  overflow-x: auto;
}

.cms-richtext table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-sm);
}

.cms-richtext th,
.cms-richtext td {
  border: 1px solid var(--color-border-default);
  padding: var(--spacing-2) var(--spacing-3);
  text-align: start;
}

.cms-richtext th {
  background: var(--color-surface-subtle);
  font-weight: var(--font-semibold);
}

/* =============================================
 * IMAGE / GALLERY
 * ============================================= */
.cms-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.cms-image__caption {
  margin-block-start: var(--spacing-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.cms-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--spacing-4);
}

/* CZ: Uvnitř galerie nechceme svislé mezery od `.cms-block` — rozestupy řeší `gap`.
   EN: Inside the gallery the `.cms-block` vertical margins are unwanted — `gap` handles it. */
.cms-gallery .cms-image {
  margin-block: 0;
}

/* CZ: V galerii se obrázky ořezávají na jednotný poměr, jinak je mřížka rozházená.
   EN: Inside the gallery images are cropped to a uniform ratio, else the grid looks ragged. */
.cms-gallery .cms-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* =============================================
 * VIDEO
 * ============================================= */
/* CZ: Wagtail embed vrací iframe s pevnou width/height v atributech — přebíjíme je,
       aby video bylo responzivní a drželo 16:9.
   EN: A Wagtail embed returns an iframe with fixed width/height attributes — we override
       them so the video is responsive and keeps 16:9. */
.cms-video iframe,
.cms-video video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius-lg);
}

.cms-video__missing {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* =============================================
 * QUOTE
 * ============================================= */
.cms-quote {
  padding: var(--spacing-4) var(--spacing-6);
  border-inline-start: var(--spacing-1) solid var(--color-brand-accent);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-md);
}

.cms-quote__text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.cms-quote__author {
  margin-block-start: var(--spacing-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.cms-quote__name {
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
}

/* CZ: Oddělovač „jméno · role" bez prázdného elementu, když role chybí.
   EN: A "name · role" separator without an empty element when the role is missing. */
.cms-quote__name + .cms-quote__role::before {
  content: " · ";
}

/* =============================================
 * CALLOUT
 * ============================================= */
.cms-callout {
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.cms-callout__title {
  margin: 0 0 var(--spacing-2);
  font-weight: var(--font-semibold);
}

.cms-callout__body > * + * {
  margin-block-start: var(--spacing-3);
}

.cms-callout__body a {
  color: inherit;
  text-decoration: underline;
}

.cms-callout--info {
  background: var(--color-info-soft);
  border-color: var(--color-info);
  color: var(--color-info-text);
}

.cms-callout--success {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success-text);
}

.cms-callout--warning {
  background: var(--color-warning-soft);
  border-color: var(--color-warning);
  color: var(--color-warning-text);
}

/* CZ: „tip" nemá vlastní sémantický token — používá brand accent tint s tmavým accent
       textem (--color-accent-text prochází AA), NE --color-brand-accent (jen 2.84:1).
   EN: "tip" has no semantic token of its own — it uses the brand accent tint with the dark
       accent text (--color-accent-text passes AA), NOT --color-brand-accent (only 2.84:1). */
.cms-callout--tip {
  background: var(--color-brand-accent-soft);
  border-color: var(--color-accent-strong);
  color: var(--color-accent-text);
}

/* CZ: `--color-brand-accent-soft` se v dark modu nepřepisuje (zůstává světlý pastel), takže
       by tip box trhal tmavou stránku — v dark modu ho posadíme na tmavý povrch.
   EN: `--color-brand-accent-soft` is not overridden in dark mode (it stays a light pastel),
       so the tip box would tear the dark page apart — put it on a dark surface instead. */
html.dark .cms-callout--tip {
  background: var(--color-surface-muted);
  border-color: var(--color-brand-accent);
  color: var(--color-text-primary);
}

/* =============================================
 * CTA
 * ============================================= */
/* CZ: Kořen bloku — odsazení od okolního textu. Wagtail obal (`w-block-cta`) žádné rozestupy
 *     nenese, takže bez tohohle by CTA slepilo s předchozím odstavcem.
 * EN: Block root — spacing from surrounding text. The Wagtail wrapper (`w-block-cta`) carries no
 *     spacing, so without this the CTA would stick to the preceding paragraph. */
.cms-cta {
  margin-block: var(--spacing-4);
}

.cms-cta__link {
  color: var(--color-accent-text);
  font-weight: var(--font-semibold);
  text-decoration: underline;
}

/* =============================================
 * CODE
 * ============================================= */
.cms-code {
  padding: var(--spacing-4);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  /* CZ: Kód se nezalamuje — dlouhý řádek scrolluje uvnitř bloku, ne celou stránkou.
     EN: Code does not wrap — a long line scrolls inside the block, not the whole page. */
  overflow-x: auto;
  white-space: pre;
}

.cms-code code {
  font-family: inherit;
  background: none;
  padding: 0;
}

/* =============================================
 * TABLE (F1a)
 * ============================================= */
/* CZ: Obal se scrollem — tabulka je často širší než sloupec textu a bez tohohle by
       roztáhla celou stránku do horizontálního scrollu (viz docs/FE_RESPONSIVE.md).
       Obal má v šabloně `tabindex="0"`, takže ho fokusuje klávesnice; focus ring dodává
       globální `:focus-visible` v base.css, tady se nic nepřebíjí.
   EN: Scrolling wrapper — a table is often wider than the text column and without this it
       would push the whole page into horizontal scroll (see docs/FE_RESPONSIVE.md).
       The wrapper carries `tabindex="0"` in the template so the keyboard can focus it; the
       focus ring comes from the global `:focus-visible` in base.css, nothing is overridden. */
.cms-table {
  overflow-x: auto;
  /* CZ: Pojistka proti „vytečení" — bez ní by se obal ve flex/grid rodiči roztáhl na šířku
         obsahu a `overflow-x` by nikdy nezabral.
     EN: Overflow guard — without it the wrapper would stretch to the content width inside a
         flex/grid parent and `overflow-x` would never kick in. */
  max-width: 100%;
}

.cms-table__table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.cms-table__caption {
  caption-side: bottom;
  padding-block-start: var(--spacing-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: start;
}

.cms-table__table th,
.cms-table__table td {
  border: 1px solid var(--color-border-default);
  padding: var(--spacing-2) var(--spacing-3);
  text-align: start;
  vertical-align: top;
}

.cms-table__table th {
  background: var(--color-surface-subtle);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

/* =============================================
 * FILE (F1a)
 * ============================================= */
/* CZ: Kořen bloku — odsazení od okolního textu (viz `.cms-cta`).
 * EN: Block root — spacing from surrounding text (see `.cms-cta`). */
.cms-file {
  margin-block: var(--spacing-4);
}

.cms-file__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.cms-file__link:hover {
  border-color: var(--color-accent-strong);
  background: var(--color-surface-muted);
  /* CZ: Přebíjí globální `a:hover { text-decoration: underline }` — u dlaždice s ikonou
         podtržení celého bloku vypadá rozbitě, stav nese barva rámečku a pozadí.
     EN: Overrides the global `a:hover { text-decoration: underline }` — underlining the whole
         icon tile looks broken; the state is carried by the border and background instead. */
  text-decoration: none;
  color: var(--color-text-primary);
}

/* CZ: Ikona nesmí zmenšit pod svoji velikost, když je název souboru dlouhý.
   EN: The icon must not shrink below its size when the file name is long. */
.cms-file__icon {
  flex: none;
  color: var(--color-accent-text);
}

.cms-file__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 0;
}

.cms-file__name {
  font-weight: var(--font-semibold);
  /* CZ: Dlouhý název souboru (typicky z importu) jinak roztáhne kartu mimo sloupec.
     EN: A long file name (typically from an import) would otherwise stretch the card. */
  overflow-wrap: anywhere;
}

.cms-file__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* =============================================
 * DIVIDER (F1a)
 * ============================================= */
.cms-divider {
  border: 0;
  border-block-start: 1px solid var(--color-border-default);
  margin-block: var(--spacing-8);
}