/*
 * DISTRIKT design system (DESIGN-SYSTEM.md): shared background layers, the section band and the
 * structural components. Spacing only from tokens (tokens.css §Spacing language). Typography is decided
 * by the component a text sits in — `:where()` keeps it below an explicit block style, so a text an
 * administrator styled by hand wins, and a new text an editor adds looks right without choosing anything.
 * Loaded on the front end and in the editor canvas.
 */

/* ── 1. Background layers (every system block) ─────────────────────────── */
.has-dbg { position: relative; isolation: isolate; }
.d-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.d-bg__media { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; object-fit: cover; }
.d-bg__tint { position: absolute; inset: 0; mix-blend-mode: color; }
/* Vignette: the middle band darkened to --dbg-top (upper half) / --dbg-bot (lower half), edges fade into the page black. */
.d-bg.has-vig::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #000 0%, rgb(0 0 0 / var(--dbg-top)) 35%, rgb(0 0 0 / var(--dbg-bot)) 55%, #000 100%);
}

/* ── 2. Sekce (page band) ─────────────────────────────────────────────── */
.d-sekce {
	--_sp: var(--rhythm);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--_sp) var(--gutter);
}
.d-sekce--sp-compact { --_sp: var(--rhythm-s); }
.d-sekce--sp-none { --_sp: 0px; }
.d-sekce--w-full { padding-inline: 0; }
.d-sekce__inner {
	display: flex;
	flex-direction: column;
	gap: var(--gap-l);
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	min-width: 0;
}
.d-sekce--w-full > .d-sekce__inner { max-width: none; }
.d-sekce.is-tall { min-height: 620px; }
/* Bands without a background flow into each other: one rhythm between them, not two. */
.d-sekce:not(.has-dbg) + .d-sekce:not(.has-dbg) { padding-top: 0; }
/* The first band under a page hero starts one gap below it (the hero carries its own spacing). */
.d-page-hero + .d-sekce { padding-top: var(--gap); }
/* Desktop row: heading · content (fills) · button — e.g. the homepage photo reports. */
@media (min-width: 1025px) {
	.d-sekce--l-row > .d-sekce__inner { flex-direction: row; align-items: center; justify-content: space-between; }
	.d-sekce--l-row > .d-sekce__inner > * { flex: 1 1 0; min-width: 0; }
	.d-sekce--l-row > .d-sekce__inner > :is(.wp-block-heading, .wp-block-buttons, p) { flex: 0 0 auto; }
	.d-sekce--l-row > .d-sekce__inner > .d-panely { align-self: stretch; }
}
@media (max-width: 1024px) {
	.d-sekce.is-tall { min-height: 0; }
}
/* Texts placed straight in a band. */
:where(.d-sekce__inner) > :where(h1, h2, h3):not([class*="is-style-"]) {
	margin: 0; color: var(--c-cream); font: 400 var(--fs-display)/.85 var(--f-display); letter-spacing: var(--ls-display); text-transform: uppercase;
}
:where(.d-sekce__inner) > :where(p):not([class*="is-style-"]) { margin: 0; color: var(--c-sand); font: 400 17px/1.55 var(--f-body); }
:where(.d-sekce__inner) > .wp-block-buttons { margin: 0; }
/* Buttons over a picture get a soft shadow for legibility. */
.d-sekce.has-dbg .wp-block-button__link { text-shadow: 0 0 10px rgb(0 0 0 / .3); }

/* ── 3. Flasher: text | glass box ─────────────────────────────────────── */
.d-flasher { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--gap-l); }
.d-flasher--box-left { flex-direction: row-reverse; }
.d-flasher__text { display: flex; flex: 0 1 58%; flex-direction: column; gap: var(--gap); min-width: 0; }
.d-flasher__box {
	display: flex;
	flex: 0 0 40%;
	flex-direction: column;
	gap: var(--gap-s);
	min-width: 0;
	padding: var(--card-pad);
	background-color: var(--c-black-25);
	border: 1px solid var(--c-gold-30);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	box-shadow: 0 28px 90px var(--c-black-42);
	transition: border-color var(--t-panel) ease, box-shadow var(--t-panel) ease, transform var(--t-panel) ease;
}
.d-flasher__box:hover { border-color: var(--c-gold-72); box-shadow: 0 36px 110px rgb(0 0 0 / .56); transform: translateY(-4px); }
:where(.d-flasher__text) > :where(h1, h2, h3):not([class*="is-style-"]) {
	margin: 0; color: var(--c-cream); font: 400 var(--fs-display)/.85 var(--f-display); letter-spacing: var(--ls-display); text-transform: uppercase;
}
:where(.d-flasher__text) > :where(p):not([class*="is-style-"]) { margin: 0; color: var(--c-sand); font: 400 17px/1.55 var(--f-body); }
:where(.d-flasher__box) > :where(h2, h3, h4):not([class*="is-style-"]) { margin: 0; color: var(--c-cream); font: 400 var(--fs-title-l)/1 var(--f-display); letter-spacing: var(--ls-display); }
:where(.d-flasher__box) > :where(p):not([class*="is-style-"]) { margin: 0; color: var(--c-sand); font: 400 15px/1.55 var(--f-body); }
:where(.d-flasher) .wp-block-buttons { margin: 0; }
@media (max-width: 1024px) {
	.d-flasher, .d-flasher--box-left { flex-direction: column; align-items: stretch; }
	.d-flasher__text, .d-flasher__box { flex: 0 0 auto; width: 100%; }
}
@media (max-width: 767px) {
	:where(.d-flasher__box) > :where(p):not([class*="is-style-"]) { font-size: 14px; }
}

/* ── 4. Čísla (stat tiles) ────────────────────────────────────────────── */
.d-cisla { display: flex; flex-flow: row wrap; align-items: stretch; }
.d-cislo { display: flex; flex-direction: column; align-items: center; gap: var(--gap); width: 25%; padding: var(--card-pad); text-align: center; }
/* Fully inside :where() (0 specificity): an explicit block style — e.g. the symbol face of ∞ — must win. */
:where(.d-cislo > :is(h1, h2, h3, p):first-child) { margin: 0; color: var(--c-cream); font: 400 var(--fs-display)/.9 var(--f-display); letter-spacing: var(--ls-display); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.d-cislo > .is-style-symbol, .d-cislo > .is-style-display { line-height: .9; }
:where(.d-cislo) > :where(p):not(:first-child):not([class*="is-style-"]) { margin: 0; color: var(--c-gold); font: 700 var(--fs-eyebrow)/1.2 var(--f-body); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
@media (max-width: 1024px) { .d-cislo { width: 50%; } }

/* ── 5. Textové sloupce ───────────────────────────────────────────────── */
.d-sloupce { display: flex; flex-flow: row nowrap; align-items: stretch; gap: var(--gap-l); }
.d-sloupec { display: flex; flex: 1 1 0; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--gap-s); min-width: 0; padding: var(--card-pad); }
.d-sloupce.is-mirror > .d-sloupec:first-child { align-items: flex-end; text-align: right; }
.d-sloupce.is-mirror > .d-sloupec:first-child .wp-block-buttons { justify-content: flex-end; }
:where(.d-sloupec) > :where(h2, h3, h4):not([class*="is-style-"]) { margin: 0; color: var(--c-cream); font: 400 var(--fs-title)/1.04 var(--f-display); letter-spacing: var(--ls-display); text-transform: uppercase; }
:where(.d-sloupec) > :where(p):not([class*="is-style-"]) { margin: 0; color: var(--c-cream-72); font: 400 var(--fs-body)/1.65 var(--f-body); }
.d-sloupec > p:not(.is-style-eyebrow):not(.is-style-label) { width: 70%; }
/* Body group sits at the top, the button at the bottom edge. */
.d-sloupec > .wp-block-buttons { margin: auto 0 0; padding-top: calc(var(--gap) - var(--gap-s)); }
@media (max-width: 767px) {
	.d-sloupce { flex-direction: column; gap: 0; }
}

/* ── 6. Info panely ───────────────────────────────────────────────────── */
.d-panely { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gap); }
.d-panel {
	display: flex;
	flex-direction: column;
	gap: var(--gap-s);
	min-width: 0;
	padding: var(--card-pad);
	background-color: var(--c-white-03);
	border: 1px solid var(--c-gold-32);
	transition: transform var(--t-card) ease, border-color var(--t-card) ease, background-color var(--t-card) ease;
}
.d-panel:hover { transform: translateY(-4px); border-color: rgb(var(--rgb-gold) / .68); }
:where(.d-panel) > :where(h2, h3, h4):not([class*="is-style-"]) { margin: 0; color: var(--c-cream); font: 400 var(--fs-title)/1.04 var(--f-display); letter-spacing: var(--ls-display); text-transform: uppercase; }
:where(.d-panel) > :where(p):not([class*="is-style-"]) { margin: 0; color: var(--c-cream-72); font: 400 var(--fs-body)/1.65 var(--f-body); }
.d-panel > .wp-block-buttons { margin: 0; }
:where(.d-panel) > :where(ul, ol) { margin: 0; padding-left: 1.2em; color: var(--c-cream-72); font: 400 var(--fs-body)/1.65 var(--f-body); }
:where(.d-panel) > :where(ul, ol) ::marker { color: var(--c-gold); }
:where(.d-panel) > :where(p, ul, ol) a { color: var(--c-gold); }
/* Long-form text in a panel keeps a readable line length (short panel texts are unaffected). */
.d-panel > :where(p.is-style-body, ul, ol) { max-width: 78ch; }
/* A panel holding the map: on desktop the map takes the rest of the panel's height (the panel matches
   its neighbours); below that the map has its own fixed height (blocks.css `--map-h`). */
.d-panel:has(> .d-map) { justify-content: flex-start; }
@media (min-width: 1025px) { .d-panel > .d-map { flex: 1 1 0; } }
@media (max-width: 1024px) { .d-panel > .d-map { flex: 0 0 auto; } }
@media (max-width: 1024px) { .d-panely { grid-template-columns: repeat(var(--cols-t, 2), minmax(0, 1fr)); } }
@media (max-width: 767px) { .d-panely { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } }

@media (prefers-reduced-motion: reduce) {
	.d-panel, .d-flasher__box { transition: none; }
	.d-panel:hover, .d-flasher__box:hover { transform: none; }
}