/* ==========================================================================
   Olympiáda Kateřinice — block + header/footer styles.
   Loaded on FE and in the block editor (see functions.php) so the two stay
   pixel-identical. Design tokens live in tokens.css.
   ========================================================================== */

* {
	box-sizing: border-box;
}

.ok-root {
	font-family: var( --font-body );
	background: var( --paper );
	color: var( --ink );
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

.ok-root img {
	max-width: 100%;
	display: block;
}

/* :where() keeps this base link color at zero added specificity, so any
   component class (.ok-cta, .ok-post-card__more, ...) reliably overrides
   it regardless of source order — a plain ".ok-root a" (class+element)
   would otherwise outrank single-class component rules and win by mistake. */
:where( .ok-root ) a {
	color: var( --accent-link );
	text-decoration: none;
}

:where( .ok-root ) a:hover {
	color: var( --accent );
}

@keyframes ok-floaty {
	0%,
	100% {
		transform: translateY( 0 ) rotate( 0deg );
	}
	50% {
		transform: translateY( -22px ) rotate( 6deg );
	}
}

@keyframes ok-floaty-slow {
	0%,
	100% {
		transform: translateY( 0 );
	}
	50% {
		transform: translateY( 16px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ok-root * {
		animation: none !important;
	}
}

.ok-container {
	max-width: var( --container );
	margin: 0 auto;
}

.ok-cta {
	display: inline-block;
	background: var( --accent );
	color: var( --white );
	font-family: var( --font-heading );
	font-weight: 600;
	padding: 14px 28px;
	border-radius: var( --radius-pill );
	transition: filter 0.2s ease, transform 0.2s ease;
}

.ok-cta:hover {
	color: var( --white );
	filter: brightness( 0.93 );
	transform: translateY( -2px );
}

.ok-cta--white {
	background: var( --white );
	color: var( --ink );
	font-weight: 700;
}

.ok-cta--white:hover {
	color: var( --ink );
	filter: none;
	box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.22 );
}

/* ---------- Header ---------- */

.ok-header {
	position: sticky;
	/* Přihlášenému uživateli drží adminbar WordPressu horních 32 px (na mobilu
	   46) — sticky hlavička by se s ním překrývala. Bez adminbaru je proměnná
	   nedefinovaná a padá na 0. Stejný princip jako u výsuvného menu níž. */
	top: var( --wp-admin--admin-bar--height, 0px );
	z-index: 50;
	padding: 0 var( --pad-x );
	background: rgba( 255, 249, 240, 0.88 );
	backdrop-filter: blur( 10px );
	border-bottom: 1px solid var( --border-2 );
}

/* Pod 600 px není adminbar fixní — odscrolluje pryč a odsazení by nad
   hlavičkou nechalo mezeru. Stejná hranice, na jaké přepíná jádro. */
@media screen and ( max-width: 600px ) {
	.ok-header {
		top: 0;
	}
}

/* Horizontální odsazení nese .ok-header (full-bleed), aby se obsah zarovnal
   se stejně širokým containerem v hero/sekcích — viz .ok-hero. */
.ok-header__inner {
	max-width: var( --container );
	margin: 0 auto;
	padding: 14px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.ok-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var( --ink );
}

.ok-logo:hover {
	color: var( --ink );
}

.ok-logo__badge {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var( --accent );
	color: var( --white );
	display: grid;
	place-items: center;
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 1.05rem;
	box-shadow: 0 6px 16px rgba( 255, 106, 26, 0.35 );
	flex: none;
}

.ok-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

/* Logo vedle názvu. Výška drží řádek hlavičky, šířka se dopočítá — logo může
   být na šířku i na výšku a nesmí hlavičku roztáhnout. */
.ok-logo__obrazek {
	display: flex;
	flex: none;
	align-items: center;
}

.ok-logo__obrazek img {
	display: block;
	width: auto;
	height: 48px;
}

.ok-logo__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: -0.01em;
	/* Název se láme na dva řádky — jeden dlouhý řádek by na užším okně
	   vytlačil menu. */
	max-width: 15rem;
}

/* Ročník za názvem akce. `white-space: nowrap` drží tečku u čísla — jinak
   se zalomení trefí mezi ně a v hlavičce zůstane osiřelý oddělovač. */
.ok-logo__rocnik {
	color: var( --accent );
	white-space: nowrap;
}

.ok-nav {
	display: flex;
	align-items: center;
	gap: 30px;
}

/* wp_nav_menu() wraps each item in <li> even with items_wrap stripping the
   <ul> — without a reset these show a bullet + browser default li margin. */
.ok-nav li {
	list-style: none;
	margin: 0;
}

.ok-nav a {
	color: var( --ink );
	font-weight: 600;
	font-size: 0.98rem;
}

/* Aktuální stránka v menu. Kromě barvy i podtržení — v řádku položek vedle
   sebe samotná barva při letmém pohledu splyne s hover stavem. Registrační
   tlačítko se z toho vyjímá, to je oranžové vždycky. */
.ok-nav a[aria-current]:not( .ok-cta ),
.ok-nav .current-menu-item > a:not( .ok-cta ),
.ok-nav .current-menu-ancestor > a:not( .ok-cta ),
.ok-nav .current_page_parent > a:not( .ok-cta ) {
	color: var( --accent );
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 7px;
}

.ok-nav .ok-cta {
	padding: 11px 22px;
	color: var( --white );
	box-shadow: 0 6px 18px rgba( 255, 106, 26, 0.35 );
}

/* Burger bez pozadí a rámečku — vedle loga nemá co soupeřit o pozornost.
   Šířka 44px drží doporučenou velikost dotykové plochy, i když linky jsou úzké. */
.ok-burger {
	display: none;
	width: 44px;
	height: 44px;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	place-items: center;
	align-content: center;
}

.ok-burger span {
	display: block;
	width: 24px;
	height: 2px;
	margin: 3px auto;
	border-radius: 2px;
	background: var( --ink );
}

/* ---------- Výsuvné mobilní menu ---------- */

/* Panel překrývá i hlavičku, proto je mimo <header> a má vlastní z-index nad ní. */
/* Přihlášenému uživateli drží adminbar WordPressu horních 32 px (na mobilu 46).
   Fixed panel by pod něj zalezl a schoval si vlastní hlavičku i křížek, proto
   se odsazuje o jeho výšku — bez adminbaru je proměnná nedefinovaná a padá na 0. */
.ok-drawer-overlay {
	position: fixed;
	inset: var( --wp-admin--admin-bar--height, 0px ) 0 0 0;
	z-index: 90;
	background: rgba( 15, 37, 64, 0.5 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.24s ease, visibility 0s 0.24s;
}

.ok-drawer {
	position: fixed;
	top: var( --wp-admin--admin-bar--height, 0px );
	right: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	width: min( 340px, 86vw );
	height: calc( 100% - var( --wp-admin--admin-bar--height, 0px ) );
	background: var( --paper );
	box-shadow: -12px 0 40px rgba( 15, 37, 64, 0.18 );
	/* visibility (ne display) — jde animovat a zavřený panel zůstane mimo
	   pořadí tabulátoru, takže se do něj nedá proklikat. */
	visibility: hidden;
	transform: translateX( 100% );
	/* Skrytí se odkládá až za dojezd (0s se zpožděním 0.24s), ať je vidět
	   zasunutí. Odkrytí naopak musí být okamžité — dokud je panel skrytý,
	   nepřijmou jeho prvky fokus a nemá kam skočit po otevření. */
	transition: transform 0.24s ease, visibility 0s 0.24s;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ok-drawer.is-open,
.ok-drawer-overlay.is-open {
	visibility: visible;
	transform: translateX( 0 );
	opacity: 1;
	transition: transform 0.24s ease, opacity 0.24s ease, visibility 0s;
}

@media ( prefers-reduced-motion: reduce ) {
	.ok-drawer,
	.ok-drawer-overlay {
		transition: none;
	}
}

.ok-drawer__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px var( --pad-x );
	border-bottom: 1px solid var( --border-2 );
}

.ok-drawer__brand {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ok-drawer__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
	color: var( --ink );
}

/* Křížek sedí na stejné pozici i velikosti jako burger v hlavičce, ať to čte
   jako překlopení jedné ikony, ne jako druhé tlačítko. */
.ok-drawer__close {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: -10px calc( var( --pad-x ) * -0.5 ) 0 0;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	color: var( --ink );
}

.ok-drawer__close svg {
	width: 24px;
	height: 24px;
}

.ok-drawer__menu {
	display: flex;
	flex-direction: column;
	padding: 0 var( --pad-x );
}

.ok-drawer__menu li {
	list-style: none;
	margin: 0;
}

.ok-drawer__menu a {
	display: block;
	padding: 15px 0;
	border-bottom: 1px solid var( --border-2 );
	font-family: var( --font-heading );
	font-weight: 600;
	font-size: 1.05rem;
	color: var( --ink );
}

/* Poslední položka mezi sebou a CTA linku nepotřebuje — odděluje je mezera. */
.ok-drawer__menu > :last-child a,
.ok-drawer__menu > a:last-child {
	border-bottom: none;
}

.ok-drawer__menu a[aria-current],
.ok-drawer__menu .current-menu-item > a,
.ok-drawer__menu .current-menu-ancestor > a,
.ok-drawer__menu .current_page_parent > a {
	color: var( --accent );
}

.ok-drawer__cta {
	padding: 20px var( --pad-x ) 0;
}

.ok-drawer__cta .ok-cta {
	display: block;
	text-align: center;
	padding: 14px 22px;
}

/* margin-top: auto drží kontakt u dolní hrany i u krátkého menu. */
.ok-drawer__kontakt {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 24px var( --pad-x ) calc( 20px + env( safe-area-inset-bottom ) );
}

.ok-drawer__kontakt-label {
	margin-bottom: 6px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --muted-2 );
}

.ok-drawer__kontakt-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	font-weight: 600;
	color: var( --ink );
	word-break: break-word;
}

.ok-drawer__kontakt-item svg {
	flex: none;
	width: 20px;
	height: 20px;
	color: var( --accent );
}

/* V CSS dosud žádný focus styl nebyl, takže se kreslil default prohlížeče
   a po kliknutí zůstal viset kolem ikony. */
.ok-burger:focus-visible,
.ok-drawer__close:focus-visible,
.ok-drawer a:focus-visible {
	outline: 2px solid var( --accent );
	outline-offset: 3px;
	border-radius: 4px;
}

/* Zámek scrollu pod otevřeným panelem. Třída jde na <html> i <body> — samotné
   <body> iOS Safari ignoruje a stránka se pod panelem pořád posouvá. */
html.ok-no-scroll,
.ok-root.ok-no-scroll {
	overflow: hidden;
}

@media ( max-width: 1024px ) {
	.ok-nav {
		display: none;
	}
	.ok-burger {
		display: grid;
	}
}

/* Nad breakpointem panel neexistuje — kdyby zůstala třída is-open (změna
   šířky okna s otevřeným menu), nesmí se vykreslit. */
@media ( min-width: 1025px ) {
	.ok-drawer,
	.ok-drawer-overlay {
		display: none;
	}
}

/* ---------- Hero ---------- */

.ok-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp( 600px, 86vh, 860px );
	padding: clamp( 6rem, 10vw, 8rem ) var( --pad-x ) clamp( 4.5rem, 9vw, 7rem );
	overflow: hidden;
	background-color: var( --hero-bg );
}

/* Fotka na pozadí je <img> (kvůli srcset a fetchpriority — viz render.php),
   ne background-image. Vrstvení v hero: pozadí 0, přechody 1, tvary 2, text 3. */
.ok-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/* Video leží ve stejné vrstvě jako fotka (z-index 0), jen za ní v DOM —
   přehraje se přes ni. Výřez i rozměry řeší object-fit stejně jako u fotky,
   ať se obě vrstvy kryjí a přechod mezi nimi není poznat. Bez JS a na mobilu
   se `src` vůbec nenasadí, takže je pořád vidět fotka pod ním. */
.ok-hero__bg-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}

/* Odkrývá se až na první vykreslený snímek (viz hero-video.js) — do té doby
   drží místo fotka, takže při načítání videa nevznikne prázdná plocha. */
.ok-hero__bg-video--hraje {
	opacity: 1;
}

/* Na mobilu 86vh znamenalo skoro 800 px, z toho posledních ~180 px prázdných —
   obsah hera se vejde do výrazně nižší sekce. Spodní odsazení nechává místo
   ukazateli scrollu (.ok-hero__scroll je absolutní u dolní hrany). */
@media ( max-width: 640px ) {
	.ok-hero {
		min-height: clamp( 440px, 64vh, 600px );
		padding-top: clamp( 3.5rem, 14vw, 5rem );
		padding-bottom: clamp( 3.5rem, 12vw, 5rem );
	}

	.ok-hero__bg-video {
		display: none;
	}
}

.ok-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ok-hero__overlay--v {
	background: linear-gradient(
		180deg,
		rgba( 15, 37, 64, 0.45 ) 0%,
		rgba( 15, 37, 64, 0.6 ) 45%,
		rgba( 15, 37, 64, 0.92 ) 85%,
		var( --ink ) 100%
	);
}

.ok-hero__overlay--h {
	background: linear-gradient( 90deg, rgba( 15, 37, 64, 0.65 ) 0%, rgba( 15, 37, 64, 0.18 ) 68%, transparent 100% );
}

.ok-hero__shape {
	position: absolute;
	z-index: 2;
}

.ok-hero__shape--circle {
	top: -50px;
	right: -30px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient( circle at 30% 30%, var( --caution-light ), var( --caution ) );
	opacity: 0.55;
	animation: ok-floaty 9s ease-in-out infinite;
}

.ok-hero__shape--square {
	bottom: 90px;
	left: 52%;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var( --accent );
	opacity: 0.7;
	transform: rotate( 20deg );
	animation: ok-floaty 7s ease-in-out infinite;
}

.ok-hero__content {
	position: relative;
	z-index: 3;
	max-width: var( --container );
	width: 100%;
	margin: 0 auto;
}

.ok-hero__badge {
	display: inline-block;
	font-family: var( --font-heading );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --white );
	background: rgba( 255, 255, 255, 0.14 );
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	padding: 7px 15px;
	border-radius: var( --radius-pill );
}

.ok-hero__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2.9rem, 8.5vw, 6.5rem );
	line-height: 0.98;
	letter-spacing: -0.03em;
	margin: 26px 0 0;
	max-width: 15ch;
	color: var( --white );
	text-shadow: 0 2px 30px rgba( 0, 0, 0, 0.25 );
	text-wrap: balance;
}

.ok-hero__title span {
	color: var( --accent );
}

.ok-hero__tagline {
	font-size: clamp( 1.05rem, 1.7vw, 1.35rem );
	line-height: 1.55;
	color: rgba( 255, 255, 255, 0.85 );
	max-width: 52ch;
	margin: 24px 0 0;
}

.ok-hero__meta {
	margin: 32px 0 0;
}

.ok-hero__date-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.ok-hero__date {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 1.9rem, 4vw, 2.8rem );
	line-height: 1;
	color: var( --accent );
}

.ok-hero__time {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 1.9rem, 4vw, 2.8rem );
	line-height: 1;
	color: var( --white );
}

/* Místo a cena na jednom řádku, stejně jako datum a čas nad nimi. Na úzkém
   displeji se cena zalomí pod místo, ne mimo obrazovku. */
.ok-hero__place-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

.ok-hero__place,
.ok-hero__price {
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 1.05rem;
}

.ok-hero__price {
	font-weight: 600;
}

/* ---------- Detail příspěvku / galerie (single) ---------- */

.ok-single {
	padding: clamp( 2.5rem, 6vw, 4.5rem ) 0 clamp( 3rem, 8vw, 6rem );
}

/* Úzký sloupec pro texty; přebíjí max-width .ok-container (1180) na 760. */
.ok-single__narrow {
	max-width: 760px;
	padding-inline: var( --pad-x );
}

.ok-single__back {
	display: inline-block;
	color: var( --accent );
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
}

.ok-single__back:hover {
	text-decoration: underline;
}

.ok-single__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2.1rem, 4.5vw, 3.2rem );
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 18px 0 0;
	color: var( --ink );
}

.ok-single__date {
	display: block;
	margin-top: 14px;
	color: var( --muted-2 );
	font-size: 0.95rem;
}

.ok-single__perex {
	margin: 16px 0 0;
	font-size: clamp( 1.05rem, 1.6vw, 1.2rem );
	line-height: 1.6;
	color: var( --muted );
}

.ok-single__media {
	margin-top: 36px;
	border-radius: var( --radius );
	overflow: hidden;
	border: 1px solid var( --border );
}

.ok-single__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Obsah příspěvku: běžné prvky v úzkém sloupci, .alignfull bloky přes celou
   šířku (stejně jako komponenty na homepage). */
.ok-post-content {
	margin-top: 36px;
}

.ok-post-content > *:not( .alignfull ) {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: var( --pad-x );
}

.ok-post-content > .alignfull {
	margin-block: clamp( 2.5rem, 6vw, 4.5rem );
}

.ok-post-content > .alignfull:last-child {
	margin-bottom: 0;
}

/* Jen přímé textové prvky obsahu — ne vnitřek full-bleed bloků (CTA apod.),
   které si nesou vlastní barvy. */
.ok-post-content > p,
.ok-post-content > ul,
.ok-post-content > ol {
	font-size: clamp( 1.05rem, 1.5vw, 1.18rem );
	line-height: 1.7;
	color: var( --muted );
	margin: 0 auto 1.1em;
}

.ok-post-content > h2,
.ok-post-content > h3 {
	font-family: var( --font-heading );
	font-weight: 700;
	color: var( --ink );
	letter-spacing: -0.01em;
	margin: 1.6em auto 0.5em;
}

/* ---------- Kompaktní hero pro podstránky a archivy ---------- */

.ok-page-hero {
	position: relative;
	overflow: hidden;
	background-color: var( --hero-bg );
	background-image: linear-gradient( 160deg, var( --hero-gradient-1 ) 0%, var( --hero-gradient-2 ) 60%, var( --ink ) 100% );
	padding: clamp( 3.5rem, 8vw, 5.5rem ) var( --pad-x ) clamp( 3rem, 6vw, 4.5rem );
}

.ok-page-hero__shape {
	position: absolute;
	z-index: 1;
}

.ok-page-hero__shape--circle {
	top: -60px;
	right: -40px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient( circle at 30% 30%, var( --caution-light ), var( --caution ) );
	opacity: 0.4;
	animation: ok-floaty 9s ease-in-out infinite;
}

.ok-page-hero__shape--square {
	bottom: 30px;
	right: 12%;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: var( --accent );
	opacity: 0.6;
	transform: rotate( 20deg );
	animation: ok-floaty 7s ease-in-out infinite;
}

.ok-page-hero__inner {
	position: relative;
	z-index: 2;
}

.ok-page-hero__back {
	display: inline-block;
	margin-bottom: 16px;
	color: rgba( 255, 255, 255, 0.75 );
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
}

.ok-page-hero__back:hover {
	color: var( --white );
}

.ok-page-hero__eyebrow {
	display: block;
	font-family: var( --font-heading );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --accent );
}

.ok-page-hero__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2.2rem, 5.5vw, 3.6rem );
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 10px 0 0;
	color: var( --white );
	text-wrap: balance;
}

.ok-page-hero__tagline {
	margin: 14px 0 0;
	max-width: 56ch;
	font-size: clamp( 1.02rem, 1.6vw, 1.18rem );
	line-height: 1.55;
	color: rgba( 255, 255, 255, 0.82 );
}

.ok-page-hero__cta {
	margin: 26px 0 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.ok-page-hero__shape {
		animation: none;
	}
}

/* Sekce hned pod kompaktním hero — menší mezera nahoře (hero už dýchá). */
.ok-page-hero + .ok-vypis,
.ok-page-hero + .ok-faq {
	padding-top: clamp( 2.2rem, 4vw, 3.2rem );
}

.ok-page-hero + .ok-vypis .ok-cards-grid {
	margin-top: 0;
}

/* ---------- Infobar (počasí nad hlavičkou) ---------- */

.ok-infobar {
	background: var( --ink );
	color: var( --white );
	font-size: 0.9rem;
	line-height: 1.4;
}

.ok-infobar__inner {
	max-width: var( --container );
	margin: 0 auto;
	padding: 8px var( --pad-x );
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	text-align: center;
}

.ok-infobar__label {
	color: rgba( 255, 255, 255, 0.6 );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.72rem;
	font-weight: 600;
}

.ok-infobar__data {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.ok-infobar__temp {
	font-family: var( --font-heading );
	font-weight: 700;
}

.ok-infobar__desc {
	color: rgba( 255, 255, 255, 0.88 );
}

.ok-infobar__rain {
	color: rgba( 255, 255, 255, 0.66 );
}

.ok-infobar__rain::before,
.ok-infobar__desc::before {
	content: "· ";
	color: rgba( 255, 255, 255, 0.4 );
}

.ok-hero__cta {
	margin: 28px 0 0;
	display: flex;
	align-items: center;
	gap: 10px 20px;
	flex-wrap: wrap;
}

.ok-hero__capacity {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.92rem;
	font-weight: 600;
	color: rgba( 255, 255, 255, 0.92 );
}

.ok-hero__capacity-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var( --caution );
	box-shadow: 0 0 0 0 rgba( 255, 196, 49, 0.7 );
	animation: ok-capacity-pulse 2s ease-out infinite;
}

@keyframes ok-capacity-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba( 255, 196, 49, 0.6 );
	}
	70% {
		box-shadow: 0 0 0 8px rgba( 255, 196, 49, 0 );
	}
	100% {
		box-shadow: 0 0 0 0 rgba( 255, 196, 49, 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ok-hero__capacity-dot {
		animation: none;
	}

	.ok-hero__bg-video {
		display: none;
	}
}

.ok-hero .ok-cta {
	font-size: 1.08rem;
	padding: 16px 30px;
	box-shadow: var( --shadow-cta );
}

.ok-hero__scroll {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: clamp( 20px, 4vw, 40px );
	transform: translateX( -50% );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px;
	color: rgba( 255, 255, 255, 0.85 );
}

.ok-hero__scroll:hover {
	color: var( --white );
}

.ok-hero__scroll-chevron {
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	animation: ok-scroll-cue 1.6s ease-in-out infinite;
}

.ok-hero__scroll-chevron:nth-child( 2 ) {
	margin-top: -6px;
	animation-delay: 0.25s;
}

@keyframes ok-scroll-cue {
	0%,
	100% {
		opacity: 0.25;
	}
	50% {
		opacity: 1;
	}
}

/* ---------- Info o ročníku ---------- */

.ok-rocnik {
	background: var( --white );
	padding: var( --pad-y ) var( --pad-x );
	border-top: 1px solid var( --border );
	border-bottom: 1px solid var( --border );
}

.ok-eyebrow {
	font-family: var( --font-heading );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --accent );
	display: block;
}

.ok-rocnik__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2rem, 4.5vw, 3.4rem );
	line-height: 1.03;
	letter-spacing: -0.02em;
	margin: 14px 0 0;
	max-width: 20ch;
}

.ok-cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) );
	gap: 18px;
	margin: 44px 0 0;
}

.ok-card {
	background: var( --paper );
	border: 1px solid var( --border );
	border-radius: var( --radius );
	padding: 30px 26px;
}

.ok-card--dark {
	background: var( --ink );
	border-color: var( --ink );
	color: var( --white );
}

.ok-card__number {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 3rem, 6vw, 4.4rem );
	line-height: 1;
	color: var( --accent );
	/* Stejně široké číslice — při dopočítávání (counter.js) se jinak text
	   viditelně přelévá, jak se mění šířka jednotlivých cifer. */
	font-variant-numeric: tabular-nums;
}

.ok-card--dark .ok-card__number {
	font-size: clamp( 2.2rem, 4.5vw, 3.2rem );
}

.ok-card__number sup {
	font-size: 0.5em;
}

/* Na mobilu 2×2 místo sloupce pod sebou — čtyři karty na výšku znamenají
   scrollovat přes celou obrazovku, aby se přečetla čtyři čísla. Menší
   odsazení a číslice, ať se do poloviční šířky vejdou i „150+" a „ZDARMA". */
@media ( max-width: 600px ) {
	.ok-cards {
		grid-template-columns: repeat( 2, 1fr );
		gap: 12px;
	}

	.ok-card {
		padding: 20px 16px;
	}

	.ok-card__number {
		font-size: clamp( 2.1rem, 9vw, 2.8rem );
	}

	.ok-card--dark .ok-card__number {
		font-size: clamp( 1.5rem, 6.5vw, 2rem );
	}

	.ok-card__title {
		font-size: 0.95rem;
	}
}

.ok-card__title {
	margin-top: 10px;
	font-weight: 700;
	font-size: 1.05rem;
}

.ok-card--dark .ok-card__title {
	margin-top: 12px;
}

.ok-card__desc {
	margin-top: 4px;
	color: var( --muted-2 );
	font-size: 0.95rem;
}

.ok-card--dark .ok-card__desc {
	color: var( --card-dark-text );
}

.ok-rocnik__body {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: 28px;
	align-items: center;
	margin: 46px 0 0;
}

.ok-rocnik__perex {
	font-size: clamp( 1.05rem, 1.5vw, 1.2rem );
	line-height: 1.65;
	color: var( --muted );
	margin: 0;
}

.ok-vyhody {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ok-vyhody__item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ok-vyhody__dot {
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.ok-vyhody__text {
	font-weight: 600;
}

/* ---------- Program dne ---------- */

.ok-program {
	background: var( --white );
	padding: var( --pad-y ) var( --pad-x );
	border-top: 1px solid var( --border );
	border-bottom: 1px solid var( --border );
}

.ok-program__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2rem, 4.5vw, 3.4rem );
	line-height: 1.03;
	letter-spacing: -0.02em;
	margin: 14px 0 0;
}

.ok-program__popisek {
	font-size: clamp( 1.02rem, 1.5vw, 1.18rem );
	line-height: 1.6;
	color: var( --muted );
	max-width: 60ch;
	margin: 14px 0 0;
}

.ok-program__layout {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: 40px;
	align-items: start;
	margin: 40px 0 0;
}

.ok-program__list {
	display: flex;
	flex-direction: column;
	max-width: 720px;
}

.ok-program__photo {
	border-radius: var( --radius );
	overflow: hidden;
	border: 1px solid var( --border );
}

/* height: auto — viz .ok-photo-grid__item img. */
.ok-program__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* baseline, ne flex-start — čas má 1.3rem a text 1rem, takže při zarovnání na
   horní hranu jim nesedí účaří. Baseline srovná čas s prvním řádkem obsahu bez
   ohledu na to, jestli je pod ním popisek. */
.ok-program__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 28px;
	padding: 18px 0;
	border-bottom: 1px solid var( --border );
}

.ok-program__row:last-child {
	border-bottom: none;
}

.ok-program__time {
	flex: none;
	width: 82px;
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 1.3rem;
	color: var( --accent );
}

.ok-program__content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 200px;
}

.ok-program__text {
	font-family: var( --font-heading );
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 1rem;
	color: var( --ink );
}

.ok-program__item-popisek {
	font-family: var( --font-body );
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var( --muted-2 );
}

/* ---------- Momentky z galerie ---------- */

.ok-momentky {
	background: var( --paper );
	padding: var( --pad-y ) var( --pad-x );
}

.ok-momentky__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.ok-momentky__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2rem, 4.5vw, 3.4rem );
	line-height: 1.03;
	letter-spacing: -0.02em;
	margin: 12px 0 0;
}

.ok-momentky__all {
	font-family: var( --font-heading );
	font-weight: 600;
	font-size: 1.02rem;
	color: var( --ink );
}

.ok-momentky__all:hover {
	color: var( --accent );
}

.ok-momentky__uvod {
	margin: 20px 0 0;
	max-width: 68ch;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var( --muted );
}

.ok-momentky__uvod > :first-child {
	margin-top: 0;
}

.ok-momentky__uvod > :last-child {
	margin-bottom: 0;
}

.ok-photo-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 14px;
	margin: 24px 0 0;
}

@media ( min-width: 521px ) {
	.ok-photo-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( min-width: 861px ) {
	.ok-photo-grid {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.ok-photo-grid__item {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var( --border );
	background: var( --placeholder-bg );
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ok-photo-grid__item:hover {
	transform: scale( 1.02 );
	box-shadow: 0 12px 30px rgba( 15, 37, 64, 0.16 );
}

/* height: auto je povinné — atributy width/height z wp_get_attachment_image()
   nastavují výšku jako presentational hint a ta přebíjí aspect-ratio. Bez toho
   dlaždice dostane výšku podle souboru (360 px) místo poměru a cover fotku
   roztáhne, protože sizes popisuje jen šířku. */
.ok-photo-grid__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- Odpočet ---------- */

.ok-odpocet,
.ok-pocet-deti {
	position: relative;
	background: var( --accent );
	color: var( --white );
	padding: clamp( 4.5rem, 9vw, 8rem ) var( --pad-x );
	clip-path: polygon( 0 3.5vw, 100% 0, 100% calc( 100% - 3.5vw ), 0 100% );
	margin: -2vw 0;
}

.ok-odpocet__shape,
.ok-pocet-deti__shape {
	position: absolute;
}

.ok-odpocet__shape--ring,
.ok-pocet-deti__shape--ring {
	top: 12%;
	right: 8%;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 14px solid rgba( 255, 255, 255, 0.14 );
	animation: ok-floaty-slow 10s ease-in-out infinite;
}

.ok-odpocet__shape--square,
.ok-pocet-deti__shape--square {
	bottom: 16%;
	left: 6%;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: rgba( 255, 255, 255, 0.16 );
	transform: rotate( 18deg );
	animation: ok-floaty 8s ease-in-out infinite;
}

.ok-odpocet__inner,
.ok-pocet-deti__inner {
	position: relative;
	max-width: var( --container );
	margin: 0 auto;
	text-align: center;
	padding: 1.5vw 0;
}

.ok-odpocet__live,
.ok-pocet-deti__live {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var( --font-heading );
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --white );
}

.ok-odpocet__dot,
.ok-pocet-deti__dot {
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var( --white );
}

.ok-odpocet__dot::before,
.ok-pocet-deti__dot::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var( --white );
	opacity: 0.7;
	animation: ok-ping 1.6s cubic-bezier( 0, 0, 0.2, 1 ) infinite;
}

@keyframes ok-ping {
	0% {
		transform: scale( 1 );
		opacity: 0.7;
	}
	75%,
	100% {
		transform: scale( 3.2 );
		opacity: 0;
	}
}

.ok-odpocet__title,
.ok-pocet-deti__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2rem, 5vw, 3.6rem );
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 14px 0 0;
}

.ok-odpocet__boxes,
.ok-pocet-deti__boxes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp( 10px, 2vw, 20px );
	margin: 40px 0 0;
}

.ok-odpocet__box,
.ok-pocet-deti__box {
	background: var( --ink );
	border-radius: var( --radius );
	padding: clamp( 18px, 3vw, 32px ) clamp( 16px, 3vw, 34px );
	min-width: clamp( 84px, 20vw, 150px );
}

.ok-odpocet__num,
.ok-pocet-deti__num {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2.6rem, 9vw, 5.5rem );
	line-height: 1;
	color: var( --white );
}

.ok-odpocet__label,
.ok-pocet-deti__label {
	margin-top: 8px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --caution );
}

.ok-odpocet__line,
.ok-pocet-deti__line {
	font-family: var( --font-heading );
	font-weight: 600;
	font-size: clamp( 1.05rem, 2vw, 1.4rem );
	margin: 34px 0 0;
}

.ok-odpocet__cta,
.ok-pocet-deti__cta {
	margin: 26px 0 0;
}

.ok-odpocet .ok-cta--white,
.ok-pocet-deti .ok-cta--white {
	font-size: 1.05rem;
	padding: 15px 32px;
}

/* Jediný rámeček (na rozdíl od tří u odpočtu) — potřebuje víc šířky, aby
   čtyřciferné číslo nesedělo natěsno u okrajů. */
.ok-pocet-deti__box {
	min-width: clamp( 140px, 34vw, 260px );
}

/* Na mobilu ať rámečky využijí celou šířku sekce — flex je jinak zúží na
   obsah a po stranách zbyde prázdno. */
@media ( max-width: 600px ) {
	.ok-odpocet__boxes {
		display: grid;
		grid-template-columns: repeat( 3, 1fr );
		gap: 10px;
	}

	.ok-odpocet__box {
		min-width: 0;
		padding: 18px 6px;
	}

	.ok-pocet-deti__box {
		min-width: 0;
		width: 100%;
	}
}

/* ---------- Výzva k akci (CTA) ---------- */

.ok-cta-section {
	position: relative;
	padding: clamp( 4rem, 8vw, 6.5rem ) var( --pad-x );
	clip-path: polygon( 0 3.5vw, 100% 0, 100% calc( 100% - 3.5vw ), 0 100% );
	margin: -2vw 0;
	text-align: center;
}

.ok-cta-section__inner {
	max-width: 720px;
	margin: 0 auto;
}

.ok-cta-section__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 1.9rem, 4.5vw, 3rem );
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
}

.ok-cta-section__text {
	font-size: clamp( 1.02rem, 1.6vw, 1.2rem );
	line-height: 1.6;
	opacity: 0.85;
	margin: 16px 0 0;
}

.ok-cta-section__cta {
	margin: 30px 0 0;
}

/* ---------- Výpis (novinky, galerie) ---------- */

.ok-vypis {
	padding: var( --pad-y ) var( --pad-x );
}

/* Dvě sekce se stejným krémovým pozadím za sebou — plné odsazení obou
   dohromady dělá přes 200 px prázdna, které vypadá jako chybějící obsah. */
.ok-momentky + .ok-vypis {
	padding-top: clamp( 2rem, 4vw, 3.2rem );
}

.ok-momentky:has( + .ok-vypis ) {
	padding-bottom: clamp( 2rem, 4vw, 3.2rem );
}

.ok-vypis__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.ok-vypis__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2rem, 4.5vw, 3.4rem );
	line-height: 1.03;
	letter-spacing: -0.02em;
	margin: 12px 0 0;
}

.ok-vypis__all {
	font-family: var( --font-heading );
	font-weight: 600;
	font-size: 1.02rem;
	color: var( --ink );
}

.ok-vypis__all:hover {
	color: var( --accent );
}

.ok-cards-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 290px, 1fr ) );
	gap: 24px;
	margin: 44px 0 0;
}

/* Archiv/výpis všech novinek — pevně 3 na řádek, pak 2, pak 1. */
.ok-cards-grid--tri {
	grid-template-columns: repeat( 3, 1fr );
}

/* Souvisejících galerií je jedna nebo dvě — mřížka vyplní šířku sloupce,
   ať pod článkem nezůstane prázdné místo. */
.ok-cards-grid--1 {
	grid-template-columns: 1fr;
}

.ok-cards-grid--2 {
	grid-template-columns: repeat( 2, 1fr );
}

@media ( max-width: 560px ) {
	.ok-cards-grid--2 {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 860px ) {
	.ok-cards-grid--tri {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 560px ) {
	.ok-cards-grid--tri {
		grid-template-columns: 1fr;
	}
}

/* ---------- Související fotogalerie ---------- */

/* Blok drží šířku textu příspěvku — `.ok-post-content` mu ji dá sám (760 px
   a odsazení všemu, co není alignfull). Mimo příspěvek (stránka) si šířku
   ohlídá vnitřní obal. */
.ok-souvisejici-galerie {
	margin-top: clamp( 2.5rem, 5vw, 4rem );
	padding-inline: var( --pad-x );
}

/* Linka i odsazení patří na vnitřní obal, ne na sekci: na sekci by seděly
   na okraji paddingu, takže by přesahovaly text článku o 2× --pad-x. */
.ok-souvisejici-galerie__inner {
	max-width: 760px;
	margin-inline: auto;
	padding-top: clamp( 1.75rem, 3.5vw, 2.5rem );
	border-top: 1px solid var( --border );
}

/* Jediná karta je široká přes celý sloupec — v poměru 16:10 by náhled zabral
   půl obrazovky a přebil článek, pod kterým jen odkazuje dál. */
.ok-cards-grid--1 .ok-post-card__media {
	aspect-ratio: 21 / 9;
}

.ok-souvisejici-galerie__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 1.5rem, 3vw, 2.2rem );
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var( --ink );
	margin: 0;
}

/* Mřížka má vlastní horní odsazení od nadpisu — 44px z .ok-cards-grid je
   pro sekce s eyebrow + velkým nadpisem, tady by zela mezera. */
.ok-souvisejici-galerie .ok-cards-grid {
	margin-top: 24px;
}

.ok-post-card {
	background: var( --white );
	border: 1px solid var( --border );
	border-radius: var( --radius );
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ok-post-card:hover {
	transform: translateY( -4px );
	box-shadow: var( --shadow-card );
}

.ok-post-card__media {
	aspect-ratio: 16 / 10;
	background: repeating-linear-gradient( 45deg, var( --placeholder-bg-alt ), var( --placeholder-bg-alt ) 12px, var( --placeholder-bg ) 12px, var( --placeholder-bg ) 24px );
	display: grid;
	place-items: center;
	overflow: hidden;
}

.ok-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ok-post-card__placeholder {
	width: 56px;
	height: 56px;
	color: var( --placeholder-icon );
	opacity: 0.85;
}

/* Zástupný obrázek u novinky bez fotky — vlastní grafika, ne ikona z fontu,
   takže si nese vlastní barvy a jen se vejde do rámečku karty. */
img.ok-post-card__placeholder {
	width: auto;
	height: 42%;
	max-height: 92px;
	opacity: 0.9;
}

/* Tag přes fotku karty (např. „Externí galerie"). Media je grid-centrovaná,
   proto absolutní pozice, ať tag sedí v rohu nad fotkou. */
.ok-post-card__media {
	position: relative;
}

.ok-card-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border-radius: var( --radius-pill );
	background: rgba( 15, 37, 64, 0.82 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	color: var( --white );
	font-family: var( --font-heading );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ok-card-tag svg {
	width: 13px;
	height: 13px;
	color: var( --accent );
}

.ok-post-card__body {
	padding: 24px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ok-post-card__date {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var( --accent );
	text-transform: uppercase;
}

.ok-post-card__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.2;
	margin: 10px 0 0;
}

.ok-post-card__title a {
	color: inherit;
}

.ok-post-card__excerpt {
	color: var( --muted-2 );
	line-height: 1.55;
	font-size: 0.98rem;
	margin: 10px 0 0;
	flex: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.ok-post-card__more {
	margin-top: 16px;
	font-family: var( --font-heading );
	font-weight: 600;
	color: var( --ink );
}

.ok-post-card__more:hover {
	color: var( --accent );
}

/* ---------- Sponzoři ---------- */

.ok-sponzori {
	background: var( --white );
	padding: var( --pad-y ) var( --pad-x );
	border-top: 1px solid var( --border );
	text-align: center;
}

.ok-sponzori__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2rem, 4.5vw, 3.4rem );
	line-height: 1.03;
	letter-spacing: -0.02em;
	margin: 14px auto 0;
	max-width: 16ch;
}

.ok-sponzori__text {
	font-size: clamp( 1.02rem, 1.5vw, 1.18rem );
	line-height: 1.6;
	color: var( --muted );
	max-width: 56ch;
	margin: 18px auto 0;
}

.ok-logos {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: 16px;
	margin: 44px 0 0;
}

.ok-logos__cell {
	height: 120px;
	background: var( --paper );
	border: 1px solid var( --border );
	border-radius: var( --radius-sm );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	filter: grayscale( 1 );
	opacity: 0.65;
	transition: all 0.25s ease;
}

.ok-logos__cell:hover {
	filter: grayscale( 0 );
	opacity: 1;
	transform: translateY( -3px );
}

.ok-logos__cell img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ok-sponzori__pod-logy {
	margin: 32px auto 0;
	max-width: 56ch;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var( --muted );
}

.ok-sponzori__pod-logy > :first-child {
	margin-top: 0;
}

.ok-sponzori__pod-logy > :last-child {
	margin-bottom: 0;
}

/* ---------- Videa ---------- */

.ok-videa {
	position: relative;
	background: var( --ink );
	color: var( --white );
	padding: clamp( 4.5rem, 9vw, 8rem ) var( --pad-x );
	clip-path: polygon( 0 3.5vw, 100% 0, 100% calc( 100% - 3.5vw ), 0 100% );
	margin: -2vw 0;
}

.ok-videa .ok-container {
	position: relative;
}

.ok-videa__shape {
	position: absolute;
}

.ok-videa__shape--ring {
	top: 10%;
	left: 6%;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	border: 14px solid rgba( 255, 106, 26, 0.18 );
	animation: ok-floaty-slow 10s ease-in-out infinite;
}

.ok-videa__shape--square {
	bottom: 14%;
	right: 8%;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: rgba( 255, 106, 26, 0.22 );
	transform: rotate( 15deg );
	animation: ok-floaty 8s ease-in-out infinite;
}

.ok-videa__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2rem, 4.5vw, 3.4rem );
	line-height: 1.03;
	letter-spacing: -0.02em;
	margin: 14px 0 0;
	color: var( --white );
}

.ok-video-card {
	background: var( --white );
	border: 1px solid var( --border );
	border-radius: var( --radius );
	overflow: hidden;
}

.ok-video-card__thumb {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	padding: 0;
	background-color: var( --placeholder-bg );
	cursor: pointer;
	overflow: hidden;
}

/* Náhled z YouTube je 4:3, karta 16:9 — cover odřízne černé pruhy. */
.ok-video-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ok-video-card__thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 15, 37, 64, 0 ) 55%, rgba( 15, 37, 64, 0.55 ) 100% );
	transition: background 0.2s ease;
}

.ok-video-card__thumb:hover::after {
	background: rgba( 15, 37, 64, 0.25 );
}

.ok-video-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	z-index: 1;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var( --accent );
	color: var( --white );
	display: grid;
	place-items: center;
	font-size: 1.3rem;
	padding-left: 4px;
	box-shadow: var( --shadow-cta );
	transition: transform 0.2s ease;
}

.ok-video-card__thumb:hover .ok-video-card__play {
	transform: translate( -50%, -50% ) scale( 1.08 );
}

.ok-video-card__caption {
	margin: 0;
	padding: 16px 20px;
	font-weight: 600;
	font-size: 0.98rem;
	color: var( --ink );
}

/* ---------- Mapa areálu ---------- */

.ok-mapa {
	background: var( --white );
	padding: var( --pad-y ) var( --pad-x );
	border-top: 1px solid var( --border );
}

.ok-mapa__tagline,
.ok-mapa__text {
	max-width: 65ch;
}

.ok-mapa__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2rem, 4.5vw, 3.4rem );
	line-height: 1.03;
	letter-spacing: -0.02em;
	margin: 14px 0 0;
}

.ok-mapa__tagline {
	font-family: var( --font-heading );
	font-weight: 600;
	font-size: clamp( 1.1rem, 2vw, 1.3rem );
	color: var( --accent );
	margin: 14px 0 0;
}

.ok-mapa__text {
	font-size: clamp( 1.02rem, 1.5vw, 1.18rem );
	line-height: 1.6;
	color: var( --muted );
	margin: 14px 0 0;
}

.ok-mapa__layout {
	margin: 40px 0 0;
}

.ok-mapa__image {
	margin: 0;
	max-width: 900px;
	border-radius: var( --radius );
	overflow: hidden;
	border: 1px solid var( --border );
}

.ok-mapa__zoom {
	display: block;
	cursor: zoom-in;
}

.ok-mapa__image img {
	display: block;
	width: 100%;
	height: auto;
}

.ok-mapa__original {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 16px 0 0;
	font-family: var( --font-heading );
	font-weight: 600;
	font-size: 0.95rem;
	color: var( --accent );
	text-decoration: none;
}

.ok-mapa__original::before {
	content: "⤢";
	font-size: 1.05em;
}

.ok-mapa__original:hover {
	text-decoration: underline;
}

/* Se seznamem disciplín — mapa na plnou šířku, seznam pod ní ve dvou sloupcích. */
.ok-mapa--with-list .ok-mapa__image {
	margin: 0;
	max-width: none;
}

.ok-mapa--with-list .ok-mapa__list {
	margin-top: 40px;
}

.ok-mapa__list--dva {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 40px;
}

@media ( max-width: 860px ) {
	.ok-mapa__list--dva {
		grid-template-columns: 1fr;
	}
}

.ok-mapa__col {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ok-mapa__item {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 88px;
	padding: 12px 0;
	border-bottom: 1px solid var( --border );
}

.ok-mapa__col:last-child .ok-mapa__item:last-child {
	border-bottom: none;
}

.ok-mapa__num {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --accent );
	color: var( --white );
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1;
}

.ok-mapa__content {
	flex: 1;
	min-width: 0;
	align-self: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}

.ok-mapa__item-nazev {
	font-family: var( --font-heading );
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 1rem;
	color: var( --ink );
}

/* Obsazenost stanoviště — kolik účastníků už disciplínou prošlo.
   Vyšší hodnota = odbaveno, kratší fronta, proto zelená nahoře. */
/* Teploměr vpravo vedle textu disciplíny, hodnota pod ním. Oba sloupce
   (text i teploměr) drží svislý střed řádku, ať je název jedno- nebo víceřádkový. */
.ok-mapa__obsazenost {
	flex: none;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
	width: 130px;
}

/* display: flex výš přebíjí výchozí [hidden] { display: none } prohlížeče —
   bez tohohle by se před načtením dat ukazoval prázdný pruh. */
.ok-mapa__obsazenost[hidden] {
	display: none;
}

.ok-mapa__bar {
	width: 100%;
	height: 6px;
	border-radius: var( --radius-pill );
	background: var( --border );
	overflow: hidden;
}

.ok-mapa__bar-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var( --accent );
	transition: width 0.6s ease, background-color 0.3s ease;
}

.ok-mapa__obsazenost-text {
	font-family: var( --font-body );
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	font-size: 0.82rem;
	line-height: 1.3;
	white-space: nowrap;
	text-align: right;
	color: var( --muted-2 );
}

/* Druhý řádek pod textem — absolutní průběh z API, doplněk k porovnávacímu pruhu. */
.ok-mapa__obsazenost-hotovo {
	font-family: var( --font-body );
	font-weight: 500;
	font-size: 0.72rem;
	line-height: 1.2;
	white-space: nowrap;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var( --muted );
}

[data-stav='volno'] .ok-mapa__bar-fill {
	background: var( --success );
}

[data-stav='prubezne'] .ok-mapa__bar-fill {
	background: var( --caution );
}

[data-stav='ceka'] .ok-mapa__bar-fill {
	background: var( --accent );
}

/* Úzký mobil: teploměr zůstává vpravo, jen se zúží, ať zbyde místo na název. */
@media ( max-width: 480px ) {
	.ok-mapa__obsazenost {
		width: 92px;
	}

	.ok-mapa__obsazenost-text {
		font-size: 0.76rem;
	}

	.ok-mapa__obsazenost-hotovo {
		font-size: 0.68rem;
	}
}

.ok-mapa__legenda {
	margin: 20px 0 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var( --muted-2 );
}

@media ( prefers-reduced-motion: reduce ) {
	.ok-mapa__bar-fill {
		transition: none;
	}
}

/* ---------- Footer ---------- */

.ok-footer {
	background: var( --ink );
	color: var( --footer-text );
	padding: clamp( 3.5rem, 7vw, 6rem ) var( --pad-x ) 40px;
}

.ok-footer__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 40px;
}

.ok-footer__brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ok-footer__brand-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	line-height: 1.25;
	color: var( --white );
}

.ok-footer__brand-title {
	font-family: var( --font-heading );
	font-weight: 700;
}

.ok-footer__brand-sub {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --footer-muted-2 );
}

.ok-footer__desc {
	margin: 18px 0 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var( --footer-muted );
	max-width: 34ch;
}

.ok-footer__social {
	display: flex;
	gap: 10px;
	margin: 20px 0 0;
}

.ok-footer__social a {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba( 255, 255, 255, 0.08 );
	color: var( --white );
	display: grid;
	place-items: center;
	transition: background 0.2s ease;
}

.ok-footer__social a svg {
	width: 22px;
	height: 22px;
	display: block;
}

.ok-footer__social a:hover {
	background: var( --accent );
	color: var( --white );
}

.ok-footer h4 {
	font-family: var( --font-heading );
	font-weight: 600;
	color: var( --white );
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.ok-footer__links {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.ok-footer__links li {
	list-style: none;
	margin: 0;
}

.ok-footer__links a {
	color: var( --footer-text );
	font-size: 0.98rem;
}

.ok-footer__links a:hover {
	color: var( --white );
}

/* Naše projekty — řádek normálních odkazů pod copyrightem. */
.ok-footer__projekty {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 18px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
	font-size: 0.92rem;
}

.ok-footer__projekty-label {
	color: var( --footer-muted );
	font-weight: 600;
}

.ok-footer__projekty-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.ok-footer__projekty-nav li {
	list-style: none;
	margin: 0;
}

.ok-footer__projekty-nav a {
	color: var( --footer-text );
}

.ok-footer__projekty-nav a:hover {
	color: var( --white );
}

.ok-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 0.98rem;
}

.ok-footer__contact span {
	color: var( --footer-muted );
}

.ok-footer__contact a {
	color: var( --white );
}

.ok-footer__contact a:hover {
	color: var( --accent );
}

.ok-footer__box {
	background: rgba( 255, 255, 255, 0.06 );
	border-radius: var( --radius );
	padding: 20px;
}

.ok-footer__box-date {
	font-family: var( --font-heading );
	font-weight: 700;
	color: var( --accent );
	font-size: 1.6rem;
	line-height: 1;
}

.ok-footer__box-place {
	margin-top: 8px;
	color: var( --footer-text );
	font-size: 0.95rem;
}

.ok-footer__box-time {
	color: var( --footer-muted );
	font-size: 0.95rem;
}

/* ---------- Odkaz na kalendář ---------- */

.ok-kalendar-odkaz {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.92rem;
	font-weight: 600;
}

/* Podtržený je jen text — linka pod ikonou vypadá jako překlep. */
.ok-kalendar-odkaz span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ok-kalendar-odkaz__ikona {
	flex: none;
	width: 1.15em;
	height: 1.15em;
}

.ok-footer__kalendar {
	margin: 12px 0 0;
	color: var( --footer-muted );
}

.ok-footer__kalendar:hover {
	color: var( --white );
}

/* V hero leží odkaz na fotce — potřebuje světlou barvu, ne barvu textu. */
.ok-hero__kalendar {
	margin: 12px 0 0;
	color: rgba( 255, 255, 255, 0.85 );
}

.ok-hero__kalendar:hover {
	color: var( --white );
}

.ok-footer__bottom {
	margin: 44px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
	font-size: 0.88rem;
	color: var( --footer-muted-2 );
}

.ok-footer__bottom a {
	color: var( --footer-muted-2 );
}

.ok-footer__bottom a:hover {
	color: var( --white );
}

.ok-footer__bottom-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.ok-footer__bottom-nav li {
	list-style: none;
	margin: 0;
}

/* ---------- Archiv / stránkování ---------- */

.ok-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 48px 0 0;
	flex-wrap: wrap;
}

.ok-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border-radius: var( --radius-pill );
	background: var( --paper );
	border: 1px solid var( --border );
	color: var( --ink );
	font-family: var( --font-heading );
	font-weight: 600;
}

.ok-pagination .page-numbers.current {
	background: var( --accent );
	border-color: var( --accent );
	color: var( --white );
}

.ok-pagination .page-numbers:hover {
	color: var( --white );
	background: var( --accent );
	border-color: var( --accent );
}

.ok-lightbox-link {
	display: block;
}

/* Lightbox itself is GLightbox (assets/vendor/glightbox) — gives prev/next
   navigation between photos in the same data-gallery group, which our old
   hand-rolled overlay didn't support. */

/* ---------- Časté otázky (FAQ) ---------- */

.ok-faq {
	background: var( --white );
	padding: var( --pad-y ) var( --pad-x );
	border-top: 1px solid var( --border );
	border-bottom: 1px solid var( --border );
}

/* Sekce bez nadpisu (nadpis nese třeba hero stránky) — plné odsazení nahoře
   je počítané pod nadpis a bez něj působí jako díra. */
.ok-faq--bez-hlavicky {
	padding-top: clamp( 2.2rem, 4vw, 3.2rem );
}

.ok-faq__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2rem, 4.5vw, 3.4rem );
	line-height: 1.03;
	letter-spacing: -0.02em;
	margin: 14px 0 0;
}

.ok-faq__popisek {
	font-size: clamp( 1.02rem, 1.5vw, 1.18rem );
	line-height: 1.6;
	color: var( --muted );
	max-width: 60ch;
	margin: 14px 0 0;
}

.ok-faq__list {
	max-width: 780px;
	margin: 40px 0 0;
}

/* Bez nadpisu a eyebrow začíná sekce rovnou seznamem — odsazení pod nadpis
   by tam nechalo prázdný pruh. */
.ok-faq__list:first-child {
	margin-top: 0;
}

/* Tlačítko drží stejný levý okraj jako seznam otázek — zarovnané na střed
   by se od sloupce s dotazy odtrhlo. */
.ok-faq__cta {
	max-width: 780px;
	margin: 28px 0 0;
}

.ok-faq__item {
	border-bottom: 1px solid var( --border );
}

.ok-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
	font-family: var( --font-heading );
	font-weight: 600;
	font-size: clamp( 1.05rem, 1.6vw, 1.2rem );
	color: var( --ink );
}

.ok-faq__question::-webkit-details-marker {
	display: none;
}

.ok-faq__question:hover {
	color: var( --accent );
}

/* Ikona plus — dvě čárky, po otevření se svislá schová (zůstane mínus). */
.ok-faq__icon {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
}

.ok-faq__icon::before,
.ok-faq__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: var( --accent );
	transition: transform 0.25s ease;
}

.ok-faq__icon::before {
	width: 18px;
	height: 2px;
}

.ok-faq__icon::after {
	width: 2px;
	height: 18px;
}

.ok-faq__item[open] .ok-faq__icon::after {
	transform: rotate( 90deg );
}

.ok-faq__answer {
	/* Vpravo jen tolik, aby text nelezl pod ikonu rozbalení. Řádek odpovědi
	   drží stejnou šířku jako otázka nad ním — užší sloupec uprostřed široké
	   sekce působil jako chyba sazby. */
	padding: 0 38px 22px 0;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var( --muted );
}

.ok-faq__answer p {
	margin: 0 0 0.8em;
}

.ok-faq__answer p:last-child {
	margin-bottom: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.ok-faq__icon::before,
	.ok-faq__icon::after {
		transition: none;
	}
}

/* ---------- Editor-only niceties ---------- */

/* The editor iframe's root (.editor-styles-wrapper) is a sibling of our
   .ok-root scoping class, not a descendant — so core blocks (paragraph,
   heading, list, ...) typed directly in the editor fell back to WP's
   default editor font instead of matching the FE. Mirror the FE base
   typography here so plain text stays 1:1 between editor and site. */
.editor-styles-wrapper {
	font-family: var( --font-body );
	background: var( --paper );
	color: var( --ink );
	overflow-x: hidden;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
	font-family: var( --font-heading );
	font-weight: 700;
	letter-spacing: -0.02em;
}

.editor-styles-wrapper img {
	max-width: 100%;
	display: block;
}

:where( .editor-styles-wrapper ) a {
	color: var( --accent-link );
	text-decoration: none;
}

:where( .editor-styles-wrapper ) a:hover {
	color: var( --accent );
}

@media ( prefers-reduced-motion: reduce ) {
	.editor-styles-wrapper * {
		animation: none !important;
	}
}

/* ---------- Text s obrázkem ---------- */

.ok-textobr {
	padding: var( --pad-y ) var( --pad-x );
}

.ok-textobr__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp( 2rem, 5vw, 4.5rem );
	align-items: center;
}

/* Obrázek vpravo — otoč pořadí sloupců (obrázek je v DOM první). */
.ok-textobr--obrazek-vpravo .ok-textobr__media {
	order: 2;
}

.ok-textobr__media {
	margin: 0;
}

.ok-textobr__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --radius );
	border: 1px solid var( --border );
}

.ok-textobr__caption {
	margin-top: 10px;
	font-size: 0.9rem;
	color: var( --muted-2 );
}

/* Jen text nebo jen obrázek — jeden sloupec přes celou šířku kontejneru. */
.ok-textobr--jen-text .ok-textobr__grid,
.ok-textobr--jen-obrazek .ok-textobr__grid {
	grid-template-columns: 1fr;
}

.ok-textobr--jen-text .ok-textobr__text {
	max-width: 760px;
	margin-inline: 0;
}

/* Tmavá varianta — modré pozadí, světlý text. */
.ok-textobr--tmava {
	background: var( --ink );
}

.ok-textobr--tmava .ok-wysiwyg p,
.ok-textobr--tmava .ok-wysiwyg ul,
.ok-textobr--tmava .ok-wysiwyg ol {
	color: rgba( 255, 255, 255, 0.82 );
}

.ok-textobr--tmava .ok-wysiwyg h2,
.ok-textobr--tmava .ok-wysiwyg h3,
.ok-textobr--tmava .ok-wysiwyg strong {
	color: var( --white );
}

.ok-textobr--tmava .ok-textobr__media img {
	border-color: rgba( 255, 255, 255, 0.12 );
}

.ok-textobr--tmava .ok-textobr__caption {
	color: rgba( 255, 255, 255, 0.6 );
}

/* Mezera nad tlačítkem jen když ho předchází text; samostatné bez odsazení. */
.ok-wysiwyg + .ok-textobr__cta {
	margin-top: 28px;
}

/* WYSIWYG obsah — sjednocená typografie s detailem příspěvku. */
.ok-wysiwyg > *:first-child {
	margin-top: 0;
}

.ok-wysiwyg > *:last-child {
	margin-bottom: 0;
}

.ok-wysiwyg p,
.ok-wysiwyg ul,
.ok-wysiwyg ol {
	font-size: clamp( 1.05rem, 1.5vw, 1.18rem );
	line-height: 1.7;
	color: var( --muted );
	margin: 0 0 1.1em;
}

.ok-wysiwyg h2,
.ok-wysiwyg h3 {
	font-family: var( --font-heading );
	font-weight: 700;
	color: var( --ink );
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 1.6em 0 0.5em;
}

.ok-wysiwyg h2 {
	font-size: clamp( 1.6rem, 3vw, 2.2rem );
}

.ok-wysiwyg h3 {
	font-size: clamp( 1.3rem, 2.2vw, 1.6rem );
}

.ok-wysiwyg a {
	color: var( --accent );
	text-decoration: underline;
}

.ok-wysiwyg strong {
	color: var( --ink );
}

.ok-wysiwyg ul,
.ok-wysiwyg ol {
	padding-left: 1.3em;
}

.ok-wysiwyg li {
	margin-bottom: 0.4em;
}

@media ( max-width: 860px ) {
	.ok-textobr__grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	/* Na mobilu je obrázek vždy nahoře, bez ohledu na zvolenou stranu. */
	.ok-textobr--obrazek-vpravo .ok-textobr__media {
		order: 0;
	}
}

.editor-styles-wrapper .ok-root {
	background: var( --paper );
}

/* Our full-bleed sections carry the "alignfull" class directly (see each
   block's render.php) so they escape theme.json's contentSize both on FE
   and inside the editor's constrained root container. */
.editor-styles-wrapper .alignfull {
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	max-width: 1000vw;
	width: auto;
}

/* ---------- Dashboard (šablona stránky) ---------- */

/* Displej v areálu — co nejvíc místa datům, minimum dekorace.
   Obsah drží svislý střed obrazovky, ať to na televizi nevisí u horní hrany. */
.ok-dashboard {
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: clamp( 1.5rem, 3vw, 2.5rem ) 0 clamp( 2rem, 4vw, 3rem );
}

/* Displej chce využít šířku, ne držet čtenářský sloupec jako zbytek webu. */
.ok-dashboard > .ok-container {
	width: 100%;
	max-width: min( 1720px, 100% );
	padding-left: var( --pad-x );
	padding-right: var( --pad-x );
}

.ok-dashboard__head {
	margin-bottom: clamp( 1.5rem, 3vw, 2.5rem );
}

.ok-dashboard__title {
	margin: 8px 0 0;
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 1.8rem, 4vw, 2.6rem );
	color: var( --ink );
}

/* Hodiny a odpočet vedle sebe, na úzkém displeji pod sebou. */
.ok-dashboard__cas {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: clamp( 1rem, 2vw, 1.5rem );
	margin-bottom: clamp( 1.25rem, 2.5vw, 2rem );
}

.ok-dashboard__hodiny,
.ok-dashboard__odpocet,
.ok-dashboard__deti {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp( 1.5rem, 3vw, 2.5rem );
	border-radius: var( --radius );
	background: var( --white );
	box-shadow: var( --shadow-card );
}

/* display: flex výš přebíjí výchozí [hidden] — karta s počtem dětí se ukáže
   až s daty z API. */
.ok-dashboard__deti[hidden] {
	display: none;
}

/* Čitelné z druhého konce areálu — proto tabulární číslice, ať to neposkakuje. */
.ok-dashboard__cislo {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 3rem, 11vw, 7rem );
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var( --ink );
}

.ok-dashboard__odpocet .ok-dashboard__cislo {
	color: var( --accent );
}

.ok-dashboard__odpocet[data-stav='konci'] .ok-dashboard__cislo {
	color: var( --accent );
	animation: ok-dashboard-puls 1.4s ease-in-out infinite;
}

/* Po konci soutěží drží „Konec" velikost i barvu běžícího odpočtu — ať karta
   vedle hodin nezdrobní a pořád je čitelná z druhého konce areálu. */
.ok-dashboard__odpocet[data-stav='konec'] .ok-dashboard__cislo {
	color: var( --accent );
}

@keyframes ok-dashboard-puls {
	50% {
		opacity: 0.55;
	}
}

/* Stejná velikost jako datum pod hodinami — obě karty pak působí jako pár. */
.ok-dashboard__doplnek {
	margin-top: 6px;
	font-family: var( --font-heading );
	font-weight: 600;
	font-size: clamp( 1.1rem, 2vw, 1.6rem );
	color: var( --muted );
}

.ok-dashboard__seznam {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Dlaždice stanoviště: nahoře číslo + název + rekord, dole přes celou šířku
   pruh obsazenosti se stavem. */
.ok-dashboard__polozka {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 24px;
	border-radius: var( --radius-sm );
	background: var( --white );
	box-shadow: var( --shadow-card );
}

.ok-dashboard__radek {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ok-dashboard__cislo-stanoviste {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var( --accent );
	color: var( --white );
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1;
}

.ok-dashboard__nazev {
	flex: 1;
	min-width: 0;
	font-family: var( --font-heading );
	font-weight: 600;
	font-size: clamp( 1.15rem, 1.6vw, 1.45rem );
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --ink );
}

/* Nejlepší dnešní výkon — hlavní údaj dlaždice, čte se z celého areálu.
   Bez popisku, samotné číslo s jednotkou. */
.ok-dashboard__rekord {
	flex: none;
	display: flex;
	align-items: baseline;
	text-align: right;
	line-height: 1;
}

.ok-dashboard__rekord[hidden] {
	display: none;
}

.ok-dashboard__rekord-hodnota {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 1.9rem, 3.2vw, 3rem );
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	color: var( --accent );
	white-space: nowrap;
}

/* Ukázková hodnota (API rekord zatím neposílá) — tečkované podtržení, ať se
   nesplete s reálným výkonem. */
.ok-dashboard__rekord[data-ukazka='1'] .ok-dashboard__rekord-hodnota {
	text-decoration: underline dotted;
	text-underline-offset: 8px;
	text-decoration-color: var( --border );
}

/* Pruh sedí na spodní hraně dlaždice přes celou šířku, stav a odbavená
   procenta jsou vedle něj drobným písmem. */
.ok-dashboard__obsazenost {
	flex-direction: row;
	align-items: center;
	align-self: stretch;
	gap: 12px;
	width: auto;
}

.ok-dashboard__obsazenost .ok-mapa__bar {
	flex: 1;
	min-width: 0;
	height: 10px;
}

.ok-dashboard__obsazenost .ok-mapa__obsazenost-hotovo {
	flex: none;
	font-size: 0.78rem;
}

/* Kontrolka stahování dat. Z pár metrů splyne s pozadím, obsluha u displeje
   pozná, že se data točí. Chyba bliká, dokud další pokus neprojde. */
.ok-dashboard__sync {
	position: fixed;
	right: 14px;
	bottom: 14px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var( --muted-2 );
	opacity: 0.16;
	pointer-events: none;
	transition: opacity 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
}

.ok-dashboard__sync[data-sync='nacita'] {
	background: var( --accent );
	opacity: 0.75;
	transform: scale( 1.4 );
}

.ok-dashboard__sync[data-sync='ok'] {
	background: var( --success );
	opacity: 0.7;
}

.ok-dashboard__sync[data-sync='chyba'] {
	background: var( --accent );
	opacity: 0.9;
	animation: ok-sync-blik 1.4s ease-in-out infinite;
}

@keyframes ok-sync-blik {
	50% {
		opacity: 0.15;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ok-dashboard__sync {
		transition: none;
	}

	.ok-dashboard__sync[data-sync='chyba'] {
		animation: none;
	}
}

.ok-dashboard__prazdno {
	margin-top: 24px;
	font-size: 0.9rem;
	color: var( --muted-2 );
}

/* Datum a počasí na jednom řádku pod hodinami — nikdy pod sebe, displej má
   údaje vedle sebe. */
.ok-dashboard__meta {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 18px;
	margin-top: 6px;
}

.ok-dashboard__datum {
	white-space: nowrap;
	font-family: var( --font-heading );
	font-weight: 600;
	font-size: clamp( 1.1rem, 2vw, 1.6rem );
	color: var( --muted );
}

.ok-dashboard__pocasi {
	display: flex;
	align-items: baseline;
	gap: 10px;
	white-space: nowrap;
}

.ok-dashboard__teplota {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 1.3rem, 2.4vw, 2rem );
	color: var( --accent );
}

.ok-dashboard__pocasi-popis {
	font-size: clamp( 1rem, 1.6vw, 1.25rem );
	color: var( --muted-2 );
}

@media ( max-width: 700px ) {
	.ok-dashboard__seznam {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 480px ) {
	.ok-dashboard__rekord-hodnota {
		font-size: 1.6rem;
	}

	.ok-dashboard__obsazenost .ok-mapa__obsazenost-hotovo {
		font-size: 0.72rem;
	}
}

/* ---------- Registrační formulář ---------- */

.ok-registrace {
	background: var( --paper );
	padding: var( --pad-y ) var( --pad-x );
	border-top: 1px solid var( --border );
}

.ok-registrace__inner {
	max-width: 760px;
}

.ok-registrace__uvod {
	text-align: center;
	margin: 0 0 36px;
}

.ok-registrace__title {
	margin: 8px 0 0;
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2rem, 5vw, 3rem );
	line-height: 1.1;
	color: var( --ink );
}

.ok-registrace__text {
	margin: 14px auto 0;
	max-width: 52ch;
	color: var( --muted );
	line-height: 1.6;
}

.ok-registrace__zavreno {
	margin: 0;
	padding: 20px 24px;
	border-radius: var( --radius );
	background: var( --white );
	border: 1px solid var( --border );
	color: var( --muted );
	text-align: center;
}

/* Formulář v kartě — oddělí vyplňování od okolní stránky. */
.ok-form-karta {
	background: var( --white );
	border: 1px solid var( --border );
	border-radius: var( --radius );
	box-shadow: var( --shadow-card );
	padding: clamp( 24px, 4vw, 40px );
}

/* Dvousloupcová mřížka; pole se širokým obsahem ji přepnou na plnou šířku. */
.ok-form__mrizka {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 22px 24px;
}

/* Sekce pro více dětí — počítač na postech každé sekce, odstranění tlačítka,
   přidání nové sekce. */
.ok-form__deti {
	counter-reset: ok-dite;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ok-form__dite {
	counter-increment: ok-dite;
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Druhá a další sekce se odděluje linkou a nadpisem s pořadím z CSS
   counteru — JS po odebrání nemusí nic přečíslovávat. */
.ok-form__dite + .ok-form__dite {
	border-top: 1px solid var( --border );
	padding-top: 20px;
}

.ok-form__dite-nadpis {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 0.95rem;
	color: var( --ink );
	padding: 0;
}

.ok-form__dite-nadpis span[aria-hidden]::before {
	content: counter( ok-dite ) '. dítě';
}

/* Jediná sekce nadpis nepotřebuje — vypadá jako dnešní formulář. */
.ok-form__dite:only-child .ok-form__dite-nadpis {
	display: none;
}

.ok-form__dite-odebrat {
	position: absolute;
	top: 0;
	right: 0;
	border: 0;
	background: none;
	color: var( --muted-2 );
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}

.ok-form__dite-odebrat:hover {
	color: var( --accent );
}

.ok-form__dite:only-child .ok-form__dite-odebrat {
	display: none;
}

.ok-form__dite + .ok-form__dite .ok-form__dite-odebrat {
	top: 20px;
}

.ok-form__pridat-radek {
	margin: 20px 0 0;
}

.ok-form__pridat {
	border: 1px dashed var( --border );
	background: none;
	border-radius: var( --radius-sm );
	padding: 12px 20px;
	width: 100%;
	font-weight: 700;
	color: var( --ink );
	cursor: pointer;
}

.ok-form__pridat:hover {
	border-color: var( --accent );
	color: var( --accent );
}

.ok-form__pole {
	margin: 0;
	min-width: 0;
}

/* Jméno + příjmení na prvním řádku, ročník a pohlaví vedle sebe na druhém —
   obojí určuje soutěžní kategorii. E-mail rodiče má vlastní mřížku a je sám
   přes celou šířku. */
.ok-form__mrizka--rodic {
	margin-top: 22px;
}

.ok-form__mrizka--rodic .ok-form__pole {
	grid-column: 1 / -1;
}

.ok-form__pole--siroke {
	grid-column: 1 / -1;
}

.ok-form__textarea {
	min-height: 160px;
	line-height: 1.55;
	/* Jen svisle — vodorovné tažení rozbíjí mřížku formuláře. */
	resize: vertical;
}

.ok-form__label {
	display: block;
	margin: 0 0 7px;
	font-family: var( --font-heading );
	font-weight: 600;
	font-size: 0.95rem;
	color: var( --ink );
}

.ok-form__hvezda {
	color: var( --accent );
}

.ok-form__input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var( --border-2 );
	border-radius: var( --radius-sm );
	background: var( --paper );
	font-family: var( --font-body );
	font-size: 1rem;
	color: var( --ink );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ok-form__input::placeholder {
	color: var( --input-placeholder );
}

.ok-form__input:hover {
	border-color: var( --input-border-hover );
}

.ok-form__input:focus-visible {
	outline: none;
	border-color: var( --accent );
	box-shadow: 0 0 0 3px rgba( 255, 106, 26, 0.18 );
}

/* Roletka roku narození sdílí vzhled inputů; vlastní šipka, protože
   appearance: none zahodí i tu systémovou. */
select.ok-form__input {
	appearance: none;
	-webkit-appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2351606e' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	padding-right: 42px;
	cursor: pointer;
}

.ok-form__napoveda {
	display: block;
	margin: 7px 0 0;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var( --muted-2 );
}

/* Potvrzení po odeslání dotazu. Zelená, ne oranžová — oranžová je v tématu
   barva výzvy k akci a tady se už nic dělat nemá. */
.ok-form__hotovo {
	padding: 22px 24px;
	border: 1px solid var( --success );
	border-left-width: 4px;
	border-radius: var( --radius-sm );
	background: rgba( 47, 158, 107, 0.08 );
	color: var( --ink );
}

.ok-form__hotovo strong {
	font-family: var( --font-heading );
	font-size: 1.1rem;
}

.ok-form__hotovo p {
	margin: 6px 0 0;
	color: var( --muted );
}

/* Chyba se značí barvou i textem — samotná barva je pro barvoslepé neviditelná. */
.ok-form__input[aria-invalid="true"] {
	border-color: var( --danger );
	background: var( --danger-bg );
}

.ok-form__chyba {
	display: block;
	font-size: 0.88rem;
	font-weight: 600;
	color: var( --danger );
}

/* Prázdný element nesmí zabírat místo, jinak by mřížka poskakovala. */
.ok-form__chyba:empty {
	display: none;
}

.ok-form__chyba:not( :empty ) {
	margin: 7px 0 0;
}

.ok-form__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Volby jako přepínače, ne holé kolečko s textem — na mobilu se lépe trefuje. */
.ok-form__volby {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ok-form__volba {
	flex: 1 1 120px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	border: 1px solid var( --border-2 );
	border-radius: var( --radius-sm );
	background: var( --paper );
	font-weight: 600;
	color: var( --ink );
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.ok-form__volba:hover {
	border-color: var( --input-border-hover );
}

/* Zelená jako u souhlasů — vybraná volba je potvrzený stav, ne výzva k akci.
   Oranžová patří tlačítkům a odkazům. */
.ok-form__volba input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var( --success );
}

.ok-form__volba:has( input:checked ) {
	border-color: var( --success );
	background: var( --success-bg );
}

.ok-form__volba:has( input:focus-visible ) {
	box-shadow: 0 0 0 3px rgba( 47, 158, 107, 0.2 );
}

.ok-form__souhlasy {
	margin: 28px 0 0;
	padding: 20px 22px;
	border-radius: var( --radius-sm );
	background: var( --paper );
	border: 1px solid var( --border-2 );
}

.ok-form__souhlas {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	line-height: 1.55;
	font-size: 0.95rem;
	color: var( --muted );
	cursor: pointer;
}

/* Obecný sourozenecký selektor, ne `+` — mezi souhlasy je span s chybou,
   který sousedství rozbíjí i když je prázdný a skrytý. */
.ok-form__souhlas ~ .ok-form__souhlas {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var( --border-2 );
}

/* Zelená, ne oranžová: zaškrtnutý souhlas je potvrzení, ne akce k provedení.
   Oranžová je v tématu barva výzvy (tlačítka, odkazy) a na potvrzovacím
   zaškrtávátku působí jako varování. */
.ok-form__souhlas input {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	accent-color: var( --success );
}

.ok-form__souhlas input:focus-visible {
	outline: 2px solid var( --success );
	outline-offset: 2px;
}

/* Zaškrtnutý souhlas se jemně zvýrazní, ať je stav vidět i bez pohledu
   přímo na políčko. */
.ok-form__souhlas:has( input:checked ) {
	color: var( --ink );
}

.ok-form__souhlas--nepovinny em {
	font-style: normal;
	color: var( --muted-2 );
}

.ok-form__paticka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 28px 0 0;
}

.ok-form__povinne {
	margin: 0;
	font-size: 0.85rem;
	color: var( --muted-2 );
}

.ok-form__odeslat {
	border: 0;
	cursor: pointer;
	font-size: 1rem;
	padding: 15px 32px;
}

.ok-form__souhrn {
	margin: 0 0 24px;
	padding: 16px 20px;
	border-radius: var( --radius-sm );
	border: 1px solid var( --danger-border );
	background: var( --danger-bg );
	color: var( --danger-text );
}

.ok-form__souhrn:focus-visible {
	outline: 2px solid var( --danger );
	outline-offset: 2px;
}

.ok-form__souhrn ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

/* Honeypot. Mimo obrazovku, ne přes display:none ani hidden — obojí bot pozná
   a pole přeskočí, takže by past nesklapla. */
.ok-form__past {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media ( max-width: 620px ) {
	.ok-form__mrizka {
		grid-template-columns: 1fr;
	}

	.ok-form__odeslat {
		width: 100%;
	}
}

/* ---------- Potvrzení registrace ---------- */

.ok-dekujeme {
	background: var( --white );
	padding: var( --pad-y ) var( --pad-x );
	border-top: 1px solid var( --border );
}

.ok-dekujeme__inner {
	max-width: 640px;
	text-align: center;
}

.ok-dekujeme__ikona {
	display: inline-grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var( --paper );
	color: var( --accent );
}

.ok-dekujeme__ikona svg {
	width: 34px;
	height: 34px;
}

.ok-dekujeme__title {
	margin: 20px 0 0;
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 1.8rem, 4vw, 2.6rem );
	color: var( --ink );
}

.ok-dekujeme__text {
	margin: 14px 0 0;
	color: var( --muted );
	line-height: 1.6;
}

.ok-dekujeme__pozn {
	margin: 10px 0 0;
	font-size: 0.92rem;
	color: var( --muted-2 );
}

.ok-dekujeme__cta {
	margin: 28px 0 0;
}

/* Výzva na WhatsApp (template-parts/whatsapp-vyzva.php) — poděkování i detail
   přihlášky. Zelená je značková barva WhatsAppu, ne paleta tématu: tlačítko má
   být poznat na první pohled a neplést se s oranžovým CTA pod ním.
   Panel sedí uvnitř vycentrovaného sloupce poděkování, proto si zarovnání
   doleva vynucuje sám. */
.ok-whatsapp {
	margin: 32px 0 0;
	padding: 24px;
	border: 1px solid var( --border );
	border-radius: var( --radius-sm );
	background: var( --paper );
	text-align: left;
}

.ok-whatsapp__nadpis {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0;
}

/* Jen zelený glyf vedle nadpisu, žádná dlaždice — panel je doplněk pod
   přehledem přihlášky a nemá přetahovat pozornost startovacímu číslu. */
.ok-whatsapp__ikona {
	flex: none;
	display: block;
	color: #25d366;
}

.ok-whatsapp__ikona svg {
	width: 22px;
	height: 22px;
	display: block;
}

.ok-whatsapp__text {
	margin: 6px 0 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var( --muted-2 );
}

.ok-whatsapp__odkaz {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0;
	padding: 12px 22px;
	border-radius: var( --radius-pill );
	background: #25d366;
	color: var( --white );
	font-weight: 700;
	font-size: 0.95rem;
	transition: background 0.2s ease;
}

/* Bílá se musí přebít i na hoveru — globální `:where( .ok-root ) a:hover`
   má vyšší specificitu (`a:hover`) než jednotřídní pravidlo výš a obarvilo
   by text oranžově. */
.ok-whatsapp__odkaz:hover,
.ok-whatsapp__odkaz:focus-visible {
	background: #1da851;
	color: var( --white );
}

@media ( max-width: 520px ) {
	.ok-whatsapp__odkaz {
		width: 100%;
		justify-content: center;
	}
}

/* Jméno dítěte se ukazuje jen při více dětech v dávce — jinak by opakovalo
   nadpis stránky. */
.ok-dekujeme__dite {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 1.1rem;
	margin: 28px 0 8px;
}

/* Startovací číslo je jediný údaj, kvůli kterému se sem rodič vrací —
   dostává vlastní tmavou kartu, ne řádek v přehledu. */
.ok-dekujeme__cislo {
	display: block;
	margin: 28px 0 0;
	padding: 24px 28px;
	border-radius: var( --radius-sm );
	background: var( --ink );
	color: var( --white );
}

.ok-dekujeme__cislo-popisek {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb( 255 255 255 / 0.7 );
}

.ok-dekujeme__cislo-hodnota {
	display: block;
	margin-top: 6px;
	/* Neproporcionální písmo: číslo se čte po číslicích a opisuje na místě,
	   stejně široké znaky se přepisují líp než proporcionální. */
	font-family: var( --font-mono );
	font-weight: 700;
	font-size: clamp( 2.6rem, 11vw, 4.8rem );
	letter-spacing: 0.06em;
	line-height: 1;
	color: var( --accent );
}

/* Chybějící číslo drží velikost i rám přiděleného — jen barvu vymění za
   varovnou, aby bylo poznat, že něco chybí, a ne že tam číslo nepatří. */
.ok-dekujeme__cislo--chybi .ok-dekujeme__cislo-hodnota {
	color: var( --caution );
	font-size: clamp( 1.6rem, 3.5vw, 2.4rem );
	letter-spacing: 0.02em;
}

.ok-dekujeme__prehled {
	margin: 28px 0 0;
	padding: 20px 24px;
	border: 1px solid var( --border );
	border-radius: var( --radius-sm );
	background: var( --paper );
	text-align: left;
}

.ok-dekujeme__radek {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 8px 0;
	border-bottom: 1px solid var( --border-2 );
}

.ok-dekujeme__radek:last-child {
	border-bottom: none;
}

/* Šířka sloupce pokrývá i nejdelší popisek („Ověřeno organizátory") — kratší
   min-width by u něj utekla hodnota doprava a řádky by se rozešly. */
.ok-dekujeme__radek dt {
	flex: none;
	min-width: 200px;
	font-weight: 600;
	color: var( --muted-2 );
}

/* Na úzkém displeji se popisek a hodnota lámou pod sebe, pevný sloupec by
   jinak vytlačil delší hodnoty (e-mail) mimo kartu. */
@media ( max-width: 480px ) {
	.ok-dekujeme__radek dt {
		min-width: 100%;
	}
}

.ok-dekujeme__radek dd {
	margin: 0;
	font-family: var( --font-heading );
	font-weight: 700;
	color: var( --ink );
}

/* Blok jako první na stránce — sedí pod hlavičkou webu, plné odsazení sekce
   by mezi ně vložilo prázdný pruh. Třídu přidává render.php. */
.ok-registrace--prvni {
	padding-top: clamp( 2rem, 5vw, 3.5rem );
	border-top: 0;
}

/* ---------- Informační modální okno ---------- */

.ok-modal {
	/* dvh je na iOS Safari „velký" viewport (počítá i s adresním řádkem, když
	   zrovna zmizí) — bez fallbacku na dvh by okno mohlo přesahovat viditelnou
	   plochu. Druhá deklarace přepíše první jen tam, kde je dvh podporované. */
	--ok-modal-max-h: 88vh;
	--ok-modal-max-h: 88dvh;
	width: min( 520px, 92vw );
	max-height: var( --ok-modal-max-h );
	padding: 0;
	border: 0;
	border-radius: var( --radius );
	background: var( --white );
	color: var( --ink );
	box-shadow: var( --shadow-card );
	overflow: visible;
}

.ok-modal::backdrop {
	/* --ink s alfou natvrdo, ne var() — custom properties v ::backdrop byly
	   nespolehlivé ve starších Chrome. */
	background: rgba( 15, 37, 64, 0.55 );
}

.ok-modal__inner {
	position: relative;
	/* Stejná max-height jako na .ok-modal — dialog ji potomkovi nepředá, tenhle
	   box je skutečný scroll kontejner. Stejně tak border-radius nese obojí:
	   vnější tvaruje pozadí a stín karty, vnitřní ořezává scrollovaný obsah,
	   aby nepřetekl přes zaoblený roh. */
	max-height: var( --ok-modal-max-h );
	overflow-y: auto;
	padding: 2.25rem 2rem;
	border-radius: var( --radius );
}

.ok-modal__close {
	position: absolute;
	/* .ok-modal__inner je taky pozicovaný a v DOM později — bez z-indexu by se
	   vykreslil přes křížek a ten by zmizel pod obrázkem. */
	z-index: 1;
	top: 0.75rem;
	right: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var( --radius-pill );
	background: var( --paper );
	color: var( --ink );
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.ok-modal__close:hover {
	background: var( --border );
}

/* showModal() dává fokus křížku automaticky, potřebuje tedy vlastní výrazný
   focus styl v barvě značky — stejný vzor jako u burgeru a zavření drawru. */
.ok-modal__close:focus-visible {
	outline: 2px solid var( --accent );
	outline-offset: 3px;
}

.ok-modal__media {
	margin: 0 0 1.5rem;
}

.ok-modal__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --radius-sm );
}

.ok-modal__title {
	margin: 0 2.5rem 0.75rem 0;
	font-family: var( --font-heading );
	font-size: clamp( 1.4rem, 3.5vw, 1.75rem );
	font-weight: 700;
	line-height: 1.2;
}

.ok-modal__text {
	color: var( --muted );
	line-height: 1.6;
}

.ok-modal__text > :first-child {
	margin-top: 0;
}

.ok-modal__text > :last-child {
	margin-bottom: 0;
}

.ok-modal__cta {
	margin-top: 1.5rem;
}

@media ( max-width: 600px ) {
	.ok-modal__inner {
		padding: 2rem 1.25rem 1.5rem;
	}
}

/* ---------- Běžný text ---------- */

.ok-bezny-text {
	background: var( --white );
	padding: clamp( 3rem, 7vw, 5rem ) var( --pad-x );
}

/* Úzký sloupec — dlouhý právní text se na plné šířce nedá číst. Stejná
   šířka jako u příspěvků (.ok-post-content), aby web držel jednu míru. */
.ok-bezny-text__inner {
	max-width: 760px;
	margin-inline: auto;
}

.ok-bezny-text__title {
	font-family: var( --font-heading );
	font-size: clamp( 1.6rem, 3.5vw, 2.1rem );
	font-weight: 700;
	line-height: 1.2;
	color: var( --ink );
	letter-spacing: -0.01em;
	margin: 0 0 0.4em;
}

.ok-bezny-text__meta {
	margin: 0 0 2rem;
	font-size: 0.9rem;
	color: var( --muted-2 );
}

.ok-bezny-text .ok-wysiwyg h2 {
	margin-top: 2em;
}

/* Zástupný obsah prázdného bloku — vidí ho jen redakce v editoru ($is_preview),
   na webu se prázdný blok nevykreslí vůbec. Bez něj by nešel vybrat a otevřít
   jeho nastavení. */
.ok-blok-placeholder {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-height: 120px;
	justify-content: center;
	padding: 1.5rem var( --pad-x );
	border: 1px dashed var( --border-2 );
	border-radius: var( --radius-sm );
	background: var( --paper );
	color: var( --muted );
	text-align: center;
}

.ok-blok-placeholder strong {
	font-family: var( --font-heading );
	color: var( --ink );
}

.ok-blok-placeholder span {
	font-size: 0.9rem;
}

/* Odkaz na zásady uvnitř znění souhlasu — podtržený, aby byl v drobném
   textu u zaškrtávátka poznat jako odkaz, ne jen jiná barva. */
.ok-form__souhlas a {
	color: var( --accent );
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.ok-form__souhlas a:hover {
	color: var( --ink );
}

.ok-form__souhlas a:focus-visible {
	outline: 2px solid var( --accent );
	outline-offset: 3px;
}

/* Identifikace spolku pod copyrightem — IČO a spolkový rejstřík. Menší a
   tlumenější než copyright, je to údaj k dohledání, ne sdělení. */
.ok-footer__identifikace {
	margin: 10px 0 0;
	font-size: 0.8rem;
	color: var( --footer-muted-2 );
}

/* ---------- Přepínač velikosti písma ---------- */

/* Stupnice sedí na kořenovém <html>, ze kterého vychází všechny rem hodnoty
   v tématu — jedno místo místo přepisování desítek velikostí. Hodnoty
   v clamp() s vw se zvětší jen částečně, to je záměr: nadpisy už jsou velké
   a plné zvětšení by je na mobilu rozbilo. */
html[data-ok-pismo='stredni'] {
	font-size: 112.5%;
}

html[data-ok-pismo='velke'] {
	font-size: 125%;
}

/* Text jen pro čtečky. V tématu zatím nebyl potřeba, teď ho nese popis
   tlačítek — vidět je jen písmeno A. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.ok-pismo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 10px;
	margin: 32px 0 0;
	font-size: 0.85rem;
	color: var( --footer-muted-2 );
}

.ok-pismo__tlacitka {
	display: flex;
	gap: 6px;
}

.ok-pismo__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 10px;
	background: transparent;
	color: var( --footer-text );
	font-family: var( --font-heading );
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

/* Velikost písmene napovídá, co tlačítko udělá — popisek by v patičce zabral
   víc místa než celý přepínač. */
.ok-pismo__btn--normalni {
	font-size: 0.85rem;
}

.ok-pismo__btn--stredni {
	font-size: 1.05rem;
}

.ok-pismo__btn--velke {
	font-size: 1.3rem;
}

.ok-pismo__btn:hover {
	background: rgba( 255, 255, 255, 0.1 );
}

.ok-pismo__btn[aria-pressed='true'] {
	background: var( --accent );
	border-color: var( --accent );
	color: var( --white );
}

.ok-pismo__btn:focus-visible {
	outline: 2px solid var( --accent );
	outline-offset: 3px;
}

/* ---------- Kontakty ---------- */

.ok-kontakt {
	background: var( --white );
	padding: var( --pad-y ) var( --pad-x );
	border-top: 1px solid var( --border );
}

/* Sekce bez nadpisu (nese ho třeba hero stránky) — plné odsazení nahoře je
   počítané pod nadpis a bez něj působí jako díra. */
.ok-kontakt--bez-hlavicky {
	padding-top: clamp( 2.2rem, 4vw, 3.2rem );
}

.ok-kontakt__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2rem, 4.5vw, 3.4rem );
	line-height: 1.03;
	letter-spacing: -0.02em;
	color: var( --ink );
	margin: 10px 0 0;
}

.ok-kontakt__popisek {
	max-width: 680px;
	margin: 16px 0 0;
	color: var( --muted );
	line-height: 1.6;
}

/* Karta s údaji a mapa vedle sebe, obojí stejně vysoké — mapa jinak
   „plavala" vedle krátkého sloupce textu. */
.ok-kontakt__grid {
	display: grid;
	grid-template-columns: minmax( 280px, 0.85fr ) 1.15fr;
	gap: clamp( 20px, 3vw, 32px );
	margin: 40px 0 0;
	align-items: stretch;
}

.ok-kontakt__grid--bez-mapy {
	grid-template-columns: 1fr;
	max-width: 640px;
}

.ok-kontakt__udaje {
	display: flex;
	flex-direction: column;
	background: var( --paper );
	border: 1px solid var( --border );
	border-radius: var( --radius );
	padding: clamp( 24px, 3vw, 36px );
}

.ok-kontakt__organizace {
	margin: 0;
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.25;
	color: var( --ink );
}

/* Řádky odděluje linka, ne mezera — seznam pak drží pohromadě jako tabulka
   údajů a nerozpadá se do plovoucích bloků. */
.ok-kontakt__seznam {
	margin: 20px 0 0;
	display: flex;
	flex-direction: column;
}

.ok-kontakt__radek {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	align-items: baseline;
	gap: 8px 16px;
	padding: 14px 0;
	border-top: 1px solid var( --border-2 );
}

.ok-kontakt__radek:last-child {
	padding-bottom: 0;
}

.ok-kontakt__radek dt {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --muted-2 );
}

.ok-kontakt__radek dd {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.45;
	color: var( --ink );
}

/* Jméno kontaktní osoby za telefonem — doplněk, ne druhý údaj. */
.ok-kontakt__osoba {
	margin-left: 8px;
	font-size: 0.92rem;
	color: var( --muted-2 );
}

.ok-kontakt__radek a {
	color: var( --ink );
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var( --border-2 );
}

.ok-kontakt__radek a:hover {
	color: var( --accent );
	text-decoration-color: currentColor;
}

/* Sociální sítě dolů karty — `margin-top: auto` je přisaje ke spodní hraně,
   ať karta vedle mapy nekončí prázdnem. */
.ok-kontakt__social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: auto 0 0;
	padding-top: 24px;
}

.ok-kontakt__social a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1px solid var( --border );
	border-radius: var( --radius-pill );
	background: var( --white );
	font-size: 0.88rem;
	font-weight: 600;
	color: var( --ink );
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ok-kontakt__social a svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.ok-kontakt__social a:hover {
	background: var( --ink );
	border-color: var( --ink );
	color: var( --white );
}

.ok-kontakt__mapa {
	position: relative;
	min-height: 420px;
	border-radius: var( --radius );
	overflow: hidden;
	border: 1px solid var( --border );
	box-shadow: var( --shadow-card );
}

/*
 * Iframe se natahuje absolutním pozicováním, ne `height: 100%`. Souhlasová
 * lišta (Complianz) totiž zablokovaný obsah obalí vlastním <div>, takže
 * procentuální výška by se počítala vůči němu — a ten má výšku `auto`, takže
 * by spadla zpátky na výchozích 150 px a mapa by se vykreslila jen v horním
 * proužku. Selektor proto míří na cokoli uvnitř, ne jen na iframe.
 */
.ok-kontakt__mapa > *,
.ok-kontakt__mapa iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media ( max-width: 860px ) {
	.ok-kontakt__grid {
		grid-template-columns: 1fr;
	}

	/* Pod sebou už mapa nemá k čemu dorovnávat výšku — poměr stran ji udrží
	   v rozumné velikosti i na úzkém displeji. */
	.ok-kontakt__mapa {
		min-height: 0;
		aspect-ratio: 3 / 2;
	}
}

@media ( max-width: 520px ) {
	.ok-kontakt__radek {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* Formuláře dotazu a newsletteru sdílí vzhled s registrací, ale sedí uprostřed
   stránky mezi dalšími sekcemi — plné odsazení patří registrační stránce, kde
   je formulář hlavním obsahem. */
.ok-dotaz,
.ok-newsletter {
	padding-top: clamp( 2.5rem, 5vw, 4rem );
}

/* ---------- Jídelní a nápojový lístek ---------- */

.ok-listek {
	background: var( --white );
	padding: var( --pad-y ) var( --pad-x );
}

.ok-listek__title {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: clamp( 2rem, 4.5vw, 3.4rem );
	line-height: 1.03;
	letter-spacing: -0.02em;
	color: var( --ink );
	margin: 10px 0 0;
}

.ok-listek__popisek {
	margin: 16px 0 0;
	color: var( --muted );
	line-height: 1.6;
}

.ok-listek__seznam {
	margin: 36px 0 0;
	display: flex;
	flex-direction: column;
}

.ok-listek__seznam:first-child {
	margin-top: 0;
}

/* Zebra místo linek: přes celou šířku kontejneru je cena daleko od názvu
   a oko po prázdném řádku sklouzne o položku vedle — podbarvení drží řádek
   pohromadě líp než tenká linka. */
.ok-listek__radek {
	display: flex;
	/* Ne baseline — cena je větší než název a u položky s popisem na druhém
	   řádku by seděla nahoře u jeho první linky. */
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-radius: var( --radius-sm );
	border-bottom: 1px solid var( --border );
}

.ok-listek__radek:nth-child( odd ) {
	background: var( --paper );
}

/* Linka za posledním řádkem by končila do prázdna. */
.ok-listek__radek:last-child {
	border-bottom: none;
}

.ok-listek__nazev {
	margin: 0;
	min-width: 0;
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 1.08rem;
	color: var( --ink );
}

.ok-listek__popis {
	display: block;
	margin-top: 4px;
	font-family: var( --font-body );
	font-weight: 400;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var( --muted );
}

/* Stejně široké číslice — ceny pod sebou pak drží řádek a nepřelévají se. */
.ok-listek__cena {
	margin: 0;
	flex: none;
	font-family: var( --font-heading );
	font-weight: 700;
	/* Větší než název — v lístku je cena to, co člověk hledá jako první. */
	font-size: clamp( 1.25rem, 2vw, 1.5rem );
	color: var( --accent );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ok-listek__poznamka {
	margin: 24px 0 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var( --muted-2 );
}

.ok-listek__poznamka > :first-child {
	margin-top: 0;
}

.ok-listek__poznamka > :last-child {
	margin-bottom: 0;
}