/*
Theme Name: Randls – odškodnění
Theme URI: https://odskodneni.medemo.cz
Author: MEDIA ENERGY
Author URI: https://mediaenergy.cz
Description: Bloková šablona pro microsite Randls – odškodnění. Postavená na theme.json a blokových vzorech, bez page builderu.
Version: 1.9.2
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: randls-odskodneni
Tags: block-templates, full-site-editing, one-column, custom-colors, custom-menu
*/

/*
Tokeny a základní typografii řídí theme.json.
Tady je jen to, co theme.json neumí: stavy, ikony, dekorace a rozvržení.
Písmo Space Grotesk, SIL Open Font License 1.1, viz assets/fonts/OFL.txt.
*/

/* ===============================================================
   1 · Odlehčené pozadí
   Jemný nádech nahoře, ať stránka nezačíná plochou bílou.
   =============================================================== */
body {
	background-image:
		radial-gradient(1100px 480px at 78% -8%, rgba(116, 25, 52, .055), transparent 62%),
		radial-gradient(760px 380px at 4% 2%, rgba(116, 25, 52, .028), transparent 60%);
	background-repeat: no-repeat;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ===============================================================
   2 · Ikony a tlačítka
   Čisté, velkorysé, se šipkou která se na hover pohne.
   =============================================================== */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.wp-element-button::after {
	content: "";
	width: .95em;
	height: .95em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--randls-sipka) center / contain no-repeat;
	mask: var(--randls-sipka) center / contain no-repeat;
	transition: transform .2s ease;
}
:root {
	--randls-sipka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E");
}
.wp-element-button:hover::after { transform: translateX(3px); }
a.wp-element-button { text-decoration: none; }

/* ---------------------------------------------------------------
 * Hover: barva ze zaobleného tvaru „steče“ pryč
 *
 * Výplň není pozadím tlačítka, ale samostatnou vrstvou ::before –
 * o 80 % vyšší, než je tlačítko, se zaobleným spodkem. Na hover jí
 * spadne výška na nulu, takže se ta oblá hrana prožene odshora dolů
 * a odkryje pozadí, které tlačítko má samo. Pozadí je proto barva,
 * která se má objevit, ne ta, kterou vidíme v klidu.
 *
 * Vrstva má z-index -1: uvnitř vlastního stohovacího kontextu se
 * kreslí nad pozadím prvku, ale pod textem a šipkou, takže popisek
 * zůstane čitelný po celou dobu přechodu.
 * --------------------------------------------------------------- */
/* Plné tlačítko: zlatá steče, zpod ní vyjde vínová. */
a.wp-element-button {
	position: relative;
	z-index: 1;
	overflow: hidden;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--cta-text);
}
a.wp-element-button::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 180%;
	z-index: -1;
	background: var(--wp--preset--color--cta);
	border-radius: 0 0 50% 50%;
	transition: height .45s cubic-bezier(.33, 1, .68, 1);
}
a.wp-element-button:hover::before,
a.wp-element-button:focus-visible::before { height: 0; }
a.wp-element-button:hover,
a.wp-element-button:focus-visible { background: var(--wp--preset--color--brand); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	a.wp-element-button::before { transition: none; }
}

/* Prázdné tlačítko: zalije se odshora dolů. */
.wp-block-button.is-style-outline .wp-block-button__link {
	position: relative;
	z-index: 1;
	overflow: hidden;
	background: transparent;
	border: 1px solid currentColor;
	color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-outline .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index: -1;
	background: var(--wp--preset--color--contrast);
	border-radius: 0 0 50% 50%;
	transition: height .45s cubic-bezier(.33, 1, .68, 1);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover::before,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible::before { height: 180%; }
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--base);
}
.has-brand-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; }
.has-brand-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link::before { background: #fff; }
.has-brand-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-brand-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--brand-dark);
}

/* ===============================================================
   3 · Menu z klasických pozic
   Texty žijí v menu schválně: Polylang Free umí přeložit klasické
   menu, ale ne template part.
   =============================================================== */
.randls-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	align-items: center;
}
.randls-menu--sloupec .randls-menu__list { flex-direction: column; align-items: flex-start; gap: .55rem; }
.randls-menu--pruh .randls-menu__list { gap: 1.5rem; font-size: .875rem; justify-content: flex-end; }
.randls-menu a {
	position: relative;
	text-decoration: none;
	color: inherit;
	font-weight: 500;
	padding: .3rem 0;
	display: inline-block;
	transition: color .16s ease;
}
.randls-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s ease;
}
.randls-menu a:hover::after,
.randls-menu a:focus-visible::after,
.randls-menu .current-menu-item > a::after { transform: scaleX(1); }

/* šipka u položky s podmenu */
.randls-menu .menu-item-has-children > a { padding-right: 1.1rem; }
.randls-menu .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: .55rem;
	height: .55rem;
	margin-top: -.28rem;
	background-color: currentColor;
	-webkit-mask: var(--randls-sipka-dolu) center / contain no-repeat;
	mask: var(--randls-sipka-dolu) center / contain no-repeat;
	transition: transform .2s ease;
}
:root {
	--randls-sipka-dolu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.randls-menu .menu-item-has-children:hover > a::before { transform: rotate(180deg); }

.randls-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: .6rem 0;
	position: absolute;
	left: -1rem;
	min-width: 17rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--zvednuta);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 30;
}
.randls-menu .menu-item-has-children { position: relative; }
.randls-menu .menu-item-has-children:hover > .sub-menu,
.randls-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.randls-menu .sub-menu a { display: block; padding: .6rem 1.15rem; font-weight: 400; }
.randls-menu .sub-menu a::after { display: none; }
.randls-menu .sub-menu a:hover { background: var(--wp--preset--color--brand-lite); color: var(--wp--preset--color--brand); }
.randls-menu--prazdne { color: var(--wp--preset--color--brand); font-size: .875rem; }

/* tlačítko v horním pruhu: položka, která není telefon */
.randls-menu--pruh .randls-menu__list > li:not(.randls-menu__kontakt) a {
	background: var(--wp--preset--color--cta);
	color: var(--wp--preset--color--cta-text);
	border-radius: 10px;
	padding: .45rem 1rem;
}
.randls-menu--pruh .randls-menu__list > li:not(.randls-menu__kontakt) a:hover { background: var(--wp--preset--color--cta-dark); }
.randls-menu--pruh a::after { display: none; }

/*
 * Kontaktní položky v pruhu (telefon, e-mail). Třídu jim přidává
 * filtr v functions.php podle schématu odkazu, ne CSS podle :has(),
 * aby se pravidlo nerozpadlo, až položek přibude.
 */
.randls-menu--pruh .randls-menu__list > li.randls-menu__kontakt + li.randls-menu__kontakt {
	position: relative;
	padding-left: 1.5rem;
}
.randls-menu--pruh .randls-menu__list > li.randls-menu__kontakt + li.randls-menu__kontakt::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 1em;
	transform: translateY(-50%);
	background: currentColor;
	opacity: .35;
}
.randls-menu--pruh .randls-menu__list > li.randls-menu__kontakt a { opacity: .92; }
.randls-menu--pruh .randls-menu__list > li.randls-menu__kontakt a:hover { opacity: 1; }

/* Ve vysouvacím panelu na mobilu stojí kontakty pod sebou, oddělovač by překážel. */
.randls-menu--panel .randls-menu__list > li.randls-menu__kontakt + li.randls-menu__kontakt {
	padding-left: 0;
}
.randls-menu--panel .randls-menu__list > li.randls-menu__kontakt + li.randls-menu__kontakt::before { display: none; }
/* ===============================================================
   4 · Hlavička
   =============================================================== */
.randls-hlavicka { position: relative; z-index: 20; background: transparent; }
.randls-hlavicka__pruh { font-size: .875rem; }
/* Logo a menu na jedné ose, ať bílý pás nevypadá nakřivo. */
.randls-hlavicka__hlavni > .wp-block-group { align-items: center; }
.randls-hlavicka .randls-logo { margin: 0; display: flex; align-items: center; }
/*
 * Optická korekce. Geometricky je logo vycentrované přesně, ale
 * jeho těžiště je nahoře ve slově, dole visí jen tenký podtitulek,
 * takže bez posunu působí vysoko.
 */
.randls-hlavicka .randls-logo img { transform: translateY(2px); }
.randls-logo img { display: block; }
.randls-logo--inverzni img { filter: brightness(0) invert(1); opacity: .95; }

/* Mezi hlavičkou a prvním blokem nemá být bílá mezera – blokovou
   mezeru mezi hlavičkou a mainem WordPress přidává sám. */
.wp-site-blocks > main { margin-block-start: 0; }

/* ===============================================================
   5 · Hero a vlnka
   Vlnka odděluje hero od bílého obsahu, ať řez není tvrdá linka.
   =============================================================== */
.randls-hero { position: relative; }
.randls-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(38px, 5vw, 74px);
	background: var(--wp--preset--color--base);
	-webkit-mask: var(--randls-vlna) bottom center / 100% 100% no-repeat;
	mask: var(--randls-vlna) bottom center / 100% 100% no-repeat;
	pointer-events: none;
}
:root {
	--randls-vlna: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 52c186 46 372 46 558 12 186-35 372-64 558-30 116 21 232 39 324 44v64H0z' fill='%23000'/%3E%3C/svg%3E");
	--randls-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5v.01'/%3E%3C/svg%3E");
}
.randls-perex { color: var(--wp--preset--color--ink-70); max-width: 36em; margin-inline: 0 auto; font-weight: 400; }
.randls-hero__obrazek img { border-radius: 16px; }

/* ===============================================================
   6 · Mřížka a karty
   =============================================================== */
.randls-mrizka { display: grid; gap: var(--wp--preset--spacing--30); }
.randls-mrizka--2 { grid-template-columns: repeat(2, 1fr); }
.randls-mrizka--3 { grid-template-columns: repeat(3, 1fr); }
.randls-mrizka--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .randls-mrizka--3, .randls-mrizka--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .randls-mrizka { grid-template-columns: 1fr !important; } }

/*
 * Oblastí je pět, takže poslední řádek je nedopočítaný. Mřížka ho
 * neumí vystředit, proto je rozcestník flex: karty si drží šířku
 * třetiny sloupce a zbytek řádku se sám vycentruje.
 */
.randls-rozcestnik { display: flex; flex-wrap: wrap; justify-content: center; }
.randls-rozcestnik > .randls-karta {
	/* Rámeček se musí vejít dovnitř šířky, jinak trojice přeteče o dva
	   pixely a poslední karta spadne na další řádek. Půl pixelu dolů
	   je pojistka proti zaokrouhlování šířky kontejneru. */
	box-sizing: border-box;
	flex: 0 1 calc((100% - 2 * var(--wp--preset--spacing--30)) / 3 - .5px);
	max-width: calc((100% - 2 * var(--wp--preset--spacing--30)) / 3 - .5px);
}
@media (max-width: 900px) {
	.randls-rozcestnik > .randls-karta {
		flex-basis: calc((100% - var(--wp--preset--spacing--30)) / 2 - .5px);
		max-width: calc((100% - var(--wp--preset--spacing--30)) / 2 - .5px);
	}
}
@media (max-width: 640px) {
	.randls-rozcestnik > .randls-karta { flex-basis: 100%; max-width: 100%; }
}

.randls-karta {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--wp--preset--shadow--karta);
}
.randls-karta--odkaz {
	text-decoration: none;
	color: inherit;
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.randls-karta--odkaz:hover,
.randls-karta--odkaz:focus-visible {
	box-shadow: var(--wp--preset--shadow--zvednuta);
	border-color: transparent;
	transform: translateY(-4px);
}
.randls-karta__obrazek { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.randls-karta__obrazek--prazdny {
	background:
		linear-gradient(135deg, rgba(116,25,52,.07), rgba(116,25,52,.02)),
		var(--wp--preset--color--paper);
}
.randls-karta__telo { display: block; padding: 1.5rem 1.6rem 1.7rem; }
.randls-karta__nadpis {
	display: block;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--contrast);
	margin-bottom: .5rem;
}
.randls-karta__text { display: block; color: var(--wp--preset--color--ink-70); font-size: var(--wp--preset--font-size--small); }
.randls-karta__vic {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: 1.1rem;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}
.randls-karta__vic::after {
	content: "";
	width: .95em; height: .95em;
	background-color: currentColor;
	-webkit-mask: var(--randls-sipka) center / contain no-repeat;
	mask: var(--randls-sipka) center / contain no-repeat;
	transition: transform .2s ease;
}
.randls-karta--odkaz:hover .randls-karta__vic::after { transform: translateX(4px); }

/* ===============================================================
   7 · Reference

   Karta nese štítek, podpis klienta a začátek textu. Reference jsou
   různě dlouhé, takže se na kartě zkracují a celé znění se otevře
   ve vyskakovacím okně – jinak by se mřížka roztrhala na nestejně
   vysoké sloupce a v posuvníku by karty poskakovaly.
   =============================================================== */
.randls-reference { padding: 1.7rem 1.75rem 1.6rem; }
/*
 * Karta je sloupcový flex, takže by se bublina štítku roztáhla
 * na celou šířku. Zarovnáním na začátek si drží šířku textu.
 */
.randls-reference > .randls-stitek { align-self: flex-start; }
.randls-reference__jmeno {
	font-size: var(--wp--preset--font-size--large);
	margin: .9rem 0 .7rem;
	color: var(--wp--preset--color--contrast);
}
.randls-reference__text {
	margin: 0;
	color: var(--wp--preset--color--ink-70);
	font-size: var(--wp--preset--font-size--small);

	/*
	 * Text je zkrácený už na serveru. Ořez na pět řádků je pojistka
	 * pro případ, kdy se stejný počet slov rozloží na víc řádků –
	 * třeba v užším sloupci posuvníku.
	 */
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.randls-reference__vic {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: auto;
	padding: 1.1rem 0 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--brand);
}
.randls-reference__sipka {
	width: .95em;
	height: .95em;
	background-color: currentColor;
	-webkit-mask: var(--randls-sipka) center / contain no-repeat;
	mask: var(--randls-sipka) center / contain no-repeat;
	transition: transform .2s ease;
}
.randls-reference__vic:hover { color: var(--wp--preset--color--brand-dark); }
.randls-reference__vic:hover .randls-reference__sipka { transform: translateX(4px); }

/*
 * Karta, která se dá rozkliknout, se pod kurzorem nadzvedne stejně
 * jako karty v rozcestníku. Karty s krátkou referencí se nezvedají –
 * nic neotevírají a pohyb by sliboval akci, která není.
 */
.randls-reference--rozbalitelna {
	cursor: pointer;
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.randls-reference--rozbalitelna:hover,
.randls-reference--rozbalitelna:focus-within {
	box-shadow: var(--wp--preset--shadow--zvednuta);
	border-color: transparent;
	transform: translateY(-4px);
}
.randls-reference--rozbalitelna:hover .randls-reference__vic { color: var(--wp--preset--color--brand-dark); }
.randls-reference--rozbalitelna:hover .randls-reference__sipka { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
	.randls-reference--rozbalitelna:hover,
	.randls-reference--rozbalitelna:focus-within { transform: none; }
}

/* Celé znění reference */
/*
 * Okno centruje prohlížeč sám přes margin: auto. WordPress ale dává
 * poslednímu prvku ve skupině margin-block-end: 0 – a to pravidlo má
 * vyšší specificitu než třída, takže u posledního okna v pořadí
 * pohltil horní okraj všechno volné místo a okno se přilepilo dolů.
 * Okna proto skript přesouvá přímo pod <body>, kde na ně rozvržení
 * WordPressu nedosáhne; tenhle předpis je pojistka, kdyby skript
 * neběžel.
 */
:root dialog.randls-ref-okno {
	position: fixed;
	inset: 0;
	margin: auto;
}
.randls-ref-okno {
	width: min(40rem, calc(100vw - 2rem));
	max-height: min(85vh, 46rem);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--zvednuta);
	color: var(--wp--preset--color--ink-70);
	overflow: hidden;
}
/*
 * Sloupec jen u otevřeného okna. Kdyby display platil pořád,
 * přebil by prohlížeči jeho vlastní skrývání zavřeného okna.
 */
.randls-ref-okno[open] {
	display: flex;
	flex-direction: column;
}
.randls-ref-okno::backdrop { background: rgba(20, 22, 27, .55); }
.randls-ref-okno__telo {
	position: relative;
	padding: 2rem 2.1rem 1.6rem;

	/* Roluje jen text, patička zůstane na očích. */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
.randls-ref-okno__zavrit-obal { position: absolute; top: 1rem; right: 1rem; margin: 0; }
.randls-ref-okno__zavrit {
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--paper);
	cursor: pointer;
	position: relative;
}
.randls-ref-okno__zavrit::before,
.randls-ref-okno__zavrit::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: .9rem;
	height: 1.5px;
	background: var(--wp--preset--color--contrast);
}
.randls-ref-okno__zavrit::before { transform: translate(-50%, -50%) rotate(45deg); }
.randls-ref-okno__zavrit::after { transform: translate(-50%, -50%) rotate(-45deg); }
.randls-ref-okno__zavrit:hover { background: var(--wp--preset--color--line); }
.randls-ref-okno__telo .randls-reference__jmeno { margin-top: .9rem; padding-right: 2.5rem; }
.randls-ref-okno__text > :first-child { margin-top: 0; }
.randls-ref-okno__text > :last-child { margin-bottom: 0; }

/*
 * Patička okna. Reference dočte člověk, který v tu chvíli zvažuje
 * vlastní případ – nabídka další akce sem patří víc než kamkoli
 * jinam na stránce. Věta o ceně stojí hned pod tlačítkem, protože
 * první otázka po přečtení bývá „co mě to bude stát“.
 */
.randls-ref-okno__paticka {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.1rem 2.1rem 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--paper);
}
.randls-ref-okno__paticka form { margin: 0; }
.randls-ref-okno__zpet {
	border: 0;
	background: none;
	padding: .6rem 0;
	cursor: pointer;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-70);
	text-decoration: underline;
	text-underline-offset: .3em;
}
.randls-ref-okno__zpet:hover { color: var(--wp--preset--color--contrast); }
.randls-ref-okno__akce { text-align: right; }
.randls-ref-okno__cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--wp--preset--color--cta);
	color: var(--wp--preset--color--cta-text);
	border-radius: 10px;
	padding: .85rem 1.5rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background .2s ease;
}
.randls-ref-okno__cta:hover {
	background: var(--wp--preset--color--cta-dark);
	color: var(--wp--preset--color--cta-text);
}
.randls-ref-okno__cta:hover .randls-reference__sipka { transform: translateX(4px); }
.randls-ref-okno__ujisteni {
	margin: .55rem 0 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--ink-40);
}

@media (max-width: 560px) {
	.randls-ref-okno__telo { padding: 1.6rem 1.4rem 1.2rem; }
	.randls-ref-okno__paticka {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: .5rem;
		padding: 1.1rem 1.4rem 1.25rem;
		text-align: center;
	}
	.randls-ref-okno__akce { text-align: center; }
	.randls-ref-okno__cta { justify-content: center; }
}
/* ---------------------------------------------------------------
   Posuvník referencí

   Na stránkách druhů odškodnění by výpis pod sebe zabral půl
   obrazovky a odsunul formulář. Posouvání do strany drží sekci
   v jedné výšce. Pás se dá posouvat i prstem a klávesnicí, šipky
   jsou doplněk – proto smí zmizet, když se vejde všechno naráz.
   --------------------------------------------------------------- */
.randls-slider { position: relative; }
.randls-slider__pas {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	/*
	 * Pás roluje, takže si ořízne všechno, co z něj vyčuhuje – a to
	 * je u karty s hoverem dost: zvedne se o 4 px a stín sahá 40 px
	 * pod ni. Odsazení proto musí být větší než ten přesah a záporný
	 * okraj ho zase vyruší, aby sekce nenarostla. Vodorovně musí obě
	 * čísla souhlasit, jinak se karty rozejdou s mřížkou pod nimi.
	 */
	padding: 24px 24px 48px;
	margin: -24px -24px -32px;
	scroll-padding: 24px;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--line) transparent;
}
.randls-slider__pas:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-radius: 16px;
}
.randls-slider__pas > .randls-reference {
	/*
	 * box-sizing je tu nutnost. Bez něj se k základní šířce přičte
	 * vnitřní odsazení karty i rámeček (368 + 54 + 2 = 426 px)
	 * a poslední karta se vždycky ořízne, i když by se vešla.
	 */
	box-sizing: border-box;

	/*
	 * Šířka karty se počítá stejně jako sloupec mřížky, tedy
	 * (100 % − mezery) / počet sloupců. Pod posuvníkem stojí na
	 * stránce běžná mřížka článků a s pevnou šířkou karty si
	 * sloupce neodpovídaly – posuvník končil dřív a celá sekce
	 * vypadala odsazená. Vnitřní odsazení pásu je vyrovnané
	 * záporným okrajem, takže 100 % je přesně šířka mřížky.
	 */
	flex: 0 0 calc((100% - 2 * var(--wp--preset--spacing--30)) / 3);
	scroll-snap-align: start;
}

/* Zlomy kopírují mřížku: pod 900 px dva sloupce, pod 640 px jeden. */
@media (max-width: 900px) {
	.randls-slider__pas > .randls-reference {
		flex-basis: calc((100% - var(--wp--preset--spacing--30)) / 2);
	}
}
.randls-slider__ovladani {
	display: flex;
	justify-content: flex-end;
	gap: .6rem;
	margin-top: 1rem;
}
.randls-slider--staci-misto .randls-slider__ovladani { display: none; }
.randls-slider__sip {
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	cursor: pointer;
	position: relative;
	transition: border-color .2s ease, background .2s ease, opacity .2s ease;
}
.randls-slider__sip::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.1rem;
	height: 1.1rem;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: var(--randls-sipka) center / contain no-repeat;
	mask: var(--randls-sipka) center / contain no-repeat;
}
.randls-slider__sip--vlevo::before { transform: rotate(180deg); }
.randls-slider__sip:hover:not(:disabled) {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand-lite);
}
.randls-slider__sip:disabled { opacity: .35; cursor: default; }

/*
 * Na mobilu jedna karta přes šířku s náznakem další – to je
 * u posuvníku srozumitelnější než dvě zmáčknuté vedle sebe.
 */
@media (max-width: 640px) {
	.randls-slider__pas > .randls-reference { flex-basis: min(80vw, 20rem); }
}

.randls-stitek {
	display: inline-block;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand-lite);
	border-radius: 999px;
	padding: .3rem .8rem;
}
.randls-prazdno { color: var(--wp--preset--color--ink-40); }

/*
 * Typ újmy ve výpisu článků. Bez odkazu – archiv taxonomie je vypnutý.
 * Stejné pilulky jako u referencí, ať má web jeden jazyk štítků.
 */
.randls-vypis__stitky { display: flex; flex-wrap: wrap; gap: .4rem; }

/*
 * Šedý box uvnitř sloupce vyplní sloupec do výšky. Bez toho končí
 * kratší box dřív a dvojice vypadá rozvěšeně.
 */
.wp-block-column > .wp-block-group.has-paper-background-color { height: 100%; }

/* ===============================================================
   8 · Filtr
   =============================================================== */
.randls-filtr { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: var(--wp--preset--spacing--40); }
.randls-chip {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: .5rem 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--ink-70);
	text-decoration: none;
	transition: all .16s ease;
}
.randls-chip:hover { border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand); }
.randls-chip--aktivni {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
/*
 * Aktivní štítek si při najetí myší bral barvu textu z .randls-chip:hover,
 * takže na tmavém pozadí svítilo vínové písmo. Dvě třídy proto, aby
 * tohle pravidlo přebilo :hover, který má sám o sobě vyšší váhu.
 */
.randls-chip.randls-chip--aktivni:hover,
.randls-chip.randls-chip--aktivni:focus-visible {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
}

/* ===============================================================
   9 · Osnova dlouhé stránky
   =============================================================== */
.randls-osnova {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: 1.2rem 1.4rem;
	margin-bottom: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
}
.randls-osnova__nadpis {
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--wp--preset--color--ink-40);
	cursor: pointer;
	list-style: none;
}
.randls-osnova__nadpis::-webkit-details-marker { display: none; }
.randls-osnova__seznam {
	list-style: none;
	margin: .9rem 0 0;
	padding: 0;
	display: grid;
	/*
	 * Mezera mezi položkami musí být zřetelně větší než mezi řádky
	 * uvnitř jedné položky, jinak dlouhý nadpis vypadá jako dva.
	 */
	gap: .7rem;
	line-height: 1.35;
}
.randls-osnova__seznam a { color: var(--wp--preset--color--ink-70); text-decoration: none; font-size: var(--wp--preset--font-size--small); }
.randls-osnova__seznam a:hover { color: var(--wp--preset--color--brand); }

/* Na širokém displeji si osnova sedne vedle textu, viz sekce 19. */

/* ===============================================================
   10 · Drobnosti ve vzorech
   =============================================================== */
.randls-stred { margin-inline: auto; }
.randls-cisla {
	gap: 2.75rem;
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}
.randls-cisla p { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-40); line-height: 1.4; }
/* Číslo je blokové, zalomení za ním by přidalo celý prázdný řádek. */
.randls-cisla br { display: none; }
.randls-cisla strong {
	display: block;
	margin-bottom: .2rem;
	font-size: 2.25rem;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--wp--preset--color--brand);
	font-weight: 600;
}
/*
 * Číslo kroku je plné, ne jen naznačené. Na světlém pásu sekce
 * (#F7F4F5) se původní podklad #FAF0F3 skoro ztrácel – rozdíl byl
 * menší než čtyři procenta jasu a kolečka se rozplývala do pozadí.
 */
.randls-krok__cislo {
	display: inline-flex; align-items: center; justify-content: center;
	width: 3.25rem; height: 3.25rem; border-radius: 50%;
	background: var(--wp--preset--color--brand); color: #fff;
	font-weight: 600; font-size: 1.375rem; margin: 0 0 1.15rem;
	letter-spacing: -.02em;
	box-shadow: 0 0 0 6px rgba(116, 25, 52, .1);
}
.randls-naroky h3 { margin-top: var(--wp--preset--spacing--40); }
.randls-naroky h3:first-child { margin-top: 0; }

/* ===============================================================
   11 · Závěrečná výzva
   =============================================================== */
/*
 * Pás je světlý schválně. Do formuláře na tmavém pozadí se lidem
 * píše hůř – pole vypadají jako nedostupná a text v nich hůř čte.
 */
.randls-vyzva {
	position: relative;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink-70);
	padding-block: var(--wp--preset--spacing--70);
	text-align: center;
	overflow: hidden;
}
.randls-vyzva::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(760px 340px at 50% -10%, rgba(116, 25, 52, .07), transparent 70%);
	pointer-events: none;
}
.randls-vyzva__obal { position: relative; max-width: 720px; margin-inline: auto; padding-inline: var(--wp--preset--spacing--30); }
.randls-vyzva__nadpis { color: var(--wp--preset--color--contrast); margin: 0 0 .7rem; font-size: var(--wp--preset--font-size--xx-large); }
.randls-vyzva__text { color: var(--wp--preset--color--ink-70); margin: 0; }
.randls-vyzva__text--mala { font-size: var(--wp--preset--font-size--small); }
/* Rámeček kolem formuláře patří jen tmavému pásu. Na bílé stránce
   by neviditelně odsazoval obsah od textového sloupce. */
.randls-vyzva .randls-formular {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--wp--preset--shadow--karta);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}

/* ===============================================================
   12 · Patička
   =============================================================== */
/*
 * WordPress dává blokům nejvyšší úrovně horní mezeru podle blockGap.
 * Mezeru nese obal template partu, ne patička samotná – mezi tmavým
 * pásem a tmavou patičkou by jinak svítil bílý pruh.
 */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
.randls-paticka { position: relative; }
.randls-paticka__nadpis {
	font-size: .75rem !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	color: rgba(255, 255, 255, .5) !important;
	margin-bottom: 1.1rem;
}
.randls-paticka a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.randls-paticka a:hover { color: #fff; }
.randls-paticka .randls-menu__list { gap: .6rem; }
.randls-paticka .randls-menu a { font-weight: 400; }
.randls-paticka__kontakt { display: grid; gap: .55rem; font-size: var(--wp--preset--font-size--small); }
.randls-paticka__kontakt span { display: block; color: rgba(255, 255, 255, .55); }
.randls-paticka__spodek {
	border-top: 1px solid rgba(255, 255, 255, .14);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, .55);
}

/* ===============================================================
   13 · Přístupnost a pohyb
   =============================================================== */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
	border-radius: 2px;
}
.has-brand-dark-background-color :where(a, button, summary):focus-visible { outline-color: #fff; }
:target { scroll-margin-top: 6rem; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}


/* ===============================================================
   14 · Drobečková navigace
   =============================================================== */
.randls-drobecky { margin-bottom: var(--wp--preset--spacing--30); }
.randls-drobecky__seznam {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	font-size: .875rem;
	color: var(--wp--preset--color--ink-40);
}
.randls-drobecky__polozka { display: inline-flex; align-items: center; gap: .5rem; }
.randls-drobecky__polozka + .randls-drobecky__polozka::before {
	content: "";
	width: .7rem; height: .7rem;
	flex: 0 0 auto;
	background-color: var(--wp--preset--color--ink-40);
	opacity: .6;
	-webkit-mask: var(--randls-sipka) center / contain no-repeat;
	mask: var(--randls-sipka) center / contain no-repeat;
}
.randls-drobecky a { color: var(--wp--preset--color--ink-70); text-decoration: none; }
.randls-drobecky a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; }
.randls-drobecky [aria-current="page"] { color: var(--wp--preset--color--contrast); font-weight: 500; }

/* Yoastí drobečky mají plochý markup se separátorem v textu. */
.randls-drobecky--yoast {
	font-size: .875rem;
	color: var(--wp--preset--color--ink-40);
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	align-items: center;
}
.randls-drobecky--yoast a { color: var(--wp--preset--color--ink-70); text-decoration: none; }
.randls-drobecky--yoast a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; }
.randls-drobecky--yoast .breadcrumb_last { color: var(--wp--preset--color--contrast); font-weight: 500; }

/* ===============================================================
   15 · Poznámka o ukázkové verzi
   Zmizí, jakmile stránku nahradí skutečný text.
   =============================================================== */
.randls-poznamka {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	background: var(--wp--preset--color--brand-lite);
	border-left: 3px solid var(--wp--preset--color--brand);
	border-radius: 0 8px 8px 0;
	padding: .9rem 1.2rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-70);
}
.randls-poznamka::before {
	content: "";
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: .15rem;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: var(--randls-info) center / contain no-repeat;
	mask: var(--randls-info) center / contain no-repeat;
}

/* ===============================================================
   16 · Mobilní menu
   Přepínač se ukáže pod 900 px, panel se vysouvá zprava.
   =============================================================== */
.randls-nav { display: contents; }
.randls-nav__prepinac,
.randls-nav__zavrit { display: none; }

@media (max-width: 900px) {
	.randls-nav { display: block; }

	.randls-nav__prepinac {
		display: inline-flex;
		align-items: center;
		gap: .55rem;
		background: transparent;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 10px;
		padding: .55rem .9rem;
		font: inherit;
		font-size: .9375rem;
		font-weight: 500;
		color: var(--wp--preset--color--contrast);
		cursor: pointer;
	}
	.randls-nav__carky { display: grid; gap: 4px; width: 18px; }
	.randls-nav__carky span {
		display: block;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		transition: transform .2s ease, opacity .2s ease;
	}
	.je-otevrene .randls-nav__carky span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.je-otevrene .randls-nav__carky span:nth-child(2) { opacity: 0; }
	.je-otevrene .randls-nav__carky span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	.randls-nav__panel {
		position: fixed;
		inset: 0 0 0 auto;
		/* randls-panel-do-sirky: odsazení se musí vejít dovnitř šířky,
		   jinak panel s 88vw plus 2× 1.75rem přeteče obrazovku. */
		box-sizing: border-box;
		width: min(22rem, 88vw);
		background: var(--wp--preset--color--base);
		box-shadow: var(--wp--preset--shadow--zvednuta);
		padding: 5rem 1.75rem 2rem;
		transform: translateX(100%);
		transition: transform .26s ease;
		overflow-y: auto;
		z-index: 60;
		visibility: hidden;
	}
	.je-otevrene .randls-nav__panel { transform: translateX(0); visibility: visible; }

	.randls-nav__zavrit {
		display: block;
		position: absolute;
		top: 1.35rem;
		right: 1.35rem;
		width: 2.5rem;
		height: 2.5rem;
		background: transparent;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 10px;
		cursor: pointer;
	}
	.randls-nav__zavrit span,
	.randls-nav__zavrit::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 1rem;
		height: 2px;
		margin: -1px 0 0 -.5rem;
		background: var(--wp--preset--color--contrast);
		border-radius: 2px;
	}
	.randls-nav__zavrit span { transform: rotate(45deg); }
	.randls-nav__zavrit::after { transform: rotate(-45deg); }

	/* Zatemnění pod panelem */
	body.ma-otevrene-menu::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(20, 22, 27, .45);
		z-index: 50;
	}
	body.ma-otevrene-menu { overflow: hidden; }

	/* Menu uvnitř panelu je sloupec s velkými cíli na prst */
	.randls-nav__panel .randls-menu__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.randls-nav__panel .randls-menu a {
		display: block;
		padding: .95rem 0;
		font-size: 1.125rem;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}
	.randls-nav__panel .randls-menu a::after { display: none; }

	/* Podmenu se rozbaluje ťuknutím, ne najetím myší */
	.randls-nav__panel .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		border-radius: 0;
		min-width: 0;
		padding: 0 0 .5rem 1rem;
		display: none;
	}
	.randls-nav__panel .je-rozbalene > .sub-menu { display: block; }
	.randls-nav__panel .sub-menu a { font-size: 1rem; border-bottom: 0; padding: .6rem 0; }
	.randls-nav__panel .menu-item-has-children > a::before { right: .25rem; width: .7rem; height: .7rem; }
	.randls-nav__panel .je-rozbalene > a::before { transform: rotate(180deg); }
}

/* ===============================================================
   17 · Patička, přehledné rozvržení
   =============================================================== */
.randls-paticka__mrizka {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}
@media (max-width: 980px) {
	.randls-paticka__mrizka { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--40); }
	.randls-paticka__znacka { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.randls-paticka__mrizka { grid-template-columns: 1fr; }
}
.randls-paticka__znacka { max-width: 34ch; }
.randls-paticka__claim { color: rgba(255, 255, 255, .68); margin-top: 1.1rem; }
.randls-paticka__odmena {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.1rem;
	color: #fff;
	font-weight: 500;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	padding: .4rem 1rem;
}
.randls-paticka__kontakt { display: grid; gap: .5rem; margin: 0; }
.randls-paticka__kontakt a { display: block; }
.randls-paticka__kontakt span {
	display: block;
	margin-top: .4rem;
	color: rgba(255, 255, 255, .55);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}
.randls-paticka__spodek { gap: 1rem; }
.randls-paticka__spodek p { margin: 0; }
.randls-paticka__odkazy { color: rgba(255, 255, 255, .55); }

/* ===============================================================
   18 · Formulář
   Jedno rozvržení pro tmavý pás i pro bílou stránku. Barvy se
   berou z okolí, aby formulář nemusel mít dvě verze.
   =============================================================== */
.randls-formular { text-align: left; }
.randls-formular .wpcf7 { margin: 0; }
.randls-formular .wpcf7-form-control-wrap { display: block; }
main .randls-formular { margin-top: var(--wp--preset--spacing--40); }

.randls-f { display: grid; gap: 1.1rem; }
/*
 * Pole si počítají šířku včetně rámečku a odsazení. Bez toho
 * width: 100 % plus padding přeteče sloupec mřížky a dvě pole
 * vedle sebe se překryjí.
 */
.randls-f :is(input, select, textarea, button) { box-sizing: border-box; }
.randls-f__radek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; }
.randls-f__radek > * { min-width: 0; }
@media (max-width: 560px) { .randls-f__radek { grid-template-columns: 1fr; } }

.randls-f__pole { display: grid; gap: .4rem; }
.randls-f__popis {
	font-size: .8125rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--wp--preset--color--ink-40);
}
.randls-f input[type="text"],
.randls-f input[type="email"],
.randls-f input[type="tel"],
.randls-f select,
.randls-f textarea {
	width: 100%;
	font: inherit;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: .8rem 1rem;
	transition: border-color .16s ease, box-shadow .16s ease;
	-webkit-appearance: none;
	appearance: none;
}
.randls-f textarea { resize: vertical; min-height: 8.5rem; line-height: 1.6; }
/* Vyšší specifičnost schválně: CF7 i prohlížeč dávají selectu
   vlastní šířku podle nejdelší položky, tohle je přebije. */
.randls-formular .randls-f select,
.randls-vyzva .randls-f select { width: 100%; max-width: 100%; }
.randls-formular .randls-f .wpcf7-form-control-wrap { display: block; width: 100%; }
.randls-f select {
	background-image: var(--randls-sipka-dolu);
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: .8rem;
	padding-right: 2.6rem;
}
.randls-f :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(116, 25, 52, .16);
}
.randls-f ::placeholder { color: var(--wp--preset--color--ink-40); opacity: 1; }

.randls-f__pozn {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-40);
}

.randls-f__souhlas { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-70); }
.randls-f__souhlas .wpcf7-list-item { margin: 0; }
.randls-f__souhlas label { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; line-height: 1.55; }
.randls-f__souhlas input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: .15rem;
	accent-color: var(--wp--preset--color--brand);
}
.randls-f__souhlas a { color: inherit; text-decoration: underline; }

.randls-f__odeslat { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .3rem; }
.randls-f input[type="submit"] {
	font: inherit;
	font-weight: 500;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--cta-text);
	background: var(--wp--preset--color--cta);
	border: 0;
	border-radius: 10px;
	padding: 1.05rem 1.9rem;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}
.randls-f input[type="submit"]:hover { background: var(--wp--preset--color--cta-dark); transform: translateY(-1px); }
.randls-f__ujisteni { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-40); }

/* Hlášky Contact Form 7 */
.randls-f .wpcf7-not-valid-tip { font-size: .8125rem; color: #c0392b; margin-top: .25rem; }
.randls-f :is(input, select, textarea).wpcf7-not-valid { border-color: #c0392b; }
.wpcf7 form .wpcf7-response-output {
	margin: 1.4rem 0 0;
	padding: .9rem 1.2rem;
	border: 1px solid var(--wp--preset--color--line);
	border-left-width: 3px;
	border-radius: 0 8px 8px 0;
	font-size: var(--wp--preset--font-size--small);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--wp--preset--color--success); color: var(--wp--preset--color--success); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #c0392b; color: #c0392b; }
.wpcf7-spinner { margin: 0 0 0 .6rem; }

/* ===============================================================
   19 · Dlouhý článek: osnova vedle textu
   Osnova i text drží uvnitř kontejneru. Dřív osnova plavala
   k okraji okna a text zůstal vycentrovaný uprostřed, což
   vypadalo, jako by k sobě nepatřily.
   =============================================================== */
@media (min-width: 1180px) {
	.randls-clanek {
		display: grid;
		grid-template-columns: 230px minmax(0, 760px) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--60);
		align-items: start;
	}
	/*
	 * Nejdelší položka osnovy zabere skoro celý sloupec, takže
	 * skutečná mezera mezi ní a textem byla jen 36 px – sloupce
	 * pak splývaly. Odstup proto řídí větší krok mřížky.
	 *
	 * Když vedle textu stojí i postranní kartička, nesmí se třetí
	 * sloupec smrsknout na nic: místo ustoupí text, ne kartička.
	 */
	.randls-clanek:has(> .randls-bok) {
		grid-template-columns: 230px minmax(0, 760px) minmax(15rem, 1fr);
	}
	/*
	 * width: 100 % je tu schválně. WordPress dává blokům v omezeném
	 * rozvržení automatické postranní okraje a ty vypnou roztažení
	 * v mřížce – krátký nadpis by pak visel uprostřed sloupce.
	 */
	.randls-clanek > * {
		grid-column: 2;
		width: 100%;
		margin-inline: 0;
		max-width: 760px;
	}
	/*
	 * Široké bloky začínají až za osnovou. Osnova drží celou výšku
	 * mřížky, takže blok přes všechny sloupce by jí vlezl pod nohy.
	 */
	.randls-clanek > .alignwide,
	.randls-clanek > .alignfull {
		grid-column: 2 / -1;
		max-width: none;
	}
	/*
	 * Sticky prvek v mřížce: jeho ohraničující blok je celá buňka,
	 * proto ta stovka řádků. Bez ní by se osnova neměla kam posouvat.
	 */
	/*
	 * Chrome omezuje lepivý prvek celým mřížkovým kontejnerem, ne jeho
	 * buňkou – osnova proto přejížděla i přes reference a články pod
	 * textem. Buňka se tedy roztáhne přes řádky textu a lepí se až její
	 * vnitřek; ten se zastaví na konci buňky. Sekce mimo osnovu začínají
	 * až za řádky, které si buňka drží.
	 */
	.randls-clanek > .randls-osnova {
		grid-column: 1;
		grid-row: 1 / span 100;
		align-self: stretch;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}
	.randls-clanek > .randls-osnova > .randls-osnova__obal {
		position: sticky;
		top: 2rem;
		padding-left: 1.1rem;
		border-left: 2px solid var(--wp--preset--color--line);
	}
	:root .randls-clanek > .randls-mimo-osnovu { grid-row-start: 101; }
	:root .randls-clanek > .randls-mimo-osnovu ~ .randls-mimo-osnovu { grid-row-start: auto; }
}

/* ===============================================================
   20 · Časté dotazy
   Karty s plusem a minusem místo systémového trojúhelníku.
   =============================================================== */
:root {
	--randls-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23741934' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	--randls-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* První dotaz pod nadpisem potřebuje vzduch, jinak na nadpis nalepí. */
:is(h2, h3) + .wp-block-details { margin-top: var(--wp--preset--spacing--40); }

.wp-block-details {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	margin-block: 0 .7rem;
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.wp-block-details:hover { border-color: var(--wp--preset--color--ink-40); }
.wp-block-details[open] {
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--karta);
}

.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	padding: 1.15rem 1.35rem;
	font-weight: 500;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	list-style: none;
	transition: color .16s ease;
}
.wp-block-details > summary::-webkit-details-marker,
.wp-block-details > summary::marker { display: none; content: ""; }
.wp-block-details > summary:hover { color: var(--wp--preset--color--brand); }

.wp-block-details > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--brand-lite);
	background-image: var(--randls-plus);
	background-repeat: no-repeat;
	background-position: center;
	background-size: .8rem;
	transition: background-color .18s ease, transform .18s ease;
}
.wp-block-details[open] > summary::after {
	background-color: var(--wp--preset--color--brand);
	background-image: var(--randls-minus);
	transform: rotate(180deg);
}

.wp-block-details > *:not(summary) {
	margin-block: 0;
	padding: 0 1.35rem;
	color: var(--wp--preset--color--ink-70);
}
.wp-block-details > *:not(summary):last-child { padding-bottom: 1.35rem; }
.wp-block-details > summary + * { padding-top: .2rem; }

/* ===============================================================
   21 · Výpis článků
   Pod sebe, obrázek vlevo, odkaz Číst více pod perexem.
   =============================================================== */
.randls-vypis { list-style: none; margin: 0; padding: 0; }
.randls-vypis > li { margin: 0; }

.randls-vypis__polozka {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.randls-vypis > li:last-child .randls-vypis__polozka { border-bottom: 0; }
/* Bez náhledového obrázku blok post-featured-image nevykreslí na webu nic
   (zástupný čtvereček existuje jen v editoru). Tělo položky by pak spadlo
   do 300px sloupce a text by se zúžil. Ať v takovém případě zabere obě
   mřížkové dráhy. */
.randls-vypis__telo:only-child { grid-column: 1 / -1; }
@media (max-width: 780px) {
	.randls-vypis__polozka { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }
}

.randls-vypis__obrazek { margin: 0; }
.randls-vypis__obrazek img { border-radius: 12px; display: block; width: 100%; height: auto; }
.randls-vypis__obrazek .wp-block-post-featured-image__placeholder {
	border-radius: 12px;
	aspect-ratio: 3 / 2;
	background:
		linear-gradient(135deg, rgba(116,25,52,.07), rgba(116,25,52,.02)),
		var(--wp--preset--color--paper);
}

.randls-vypis__telo > * { margin-block: 0 .6rem; }
.randls-vypis__telo > *:last-child { margin-bottom: 0; }
.randls-vypis__telo h2 { line-height: 1.2; letter-spacing: -.01em; }
.randls-vypis__telo h2 a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.randls-vypis__telo h2 a:hover { color: var(--wp--preset--color--brand); }
.randls-vypis__telo .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--ink-70); }

.randls-vypis__telo .wp-block-post-excerpt__more-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: .9rem;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
}
.randls-vypis__telo .wp-block-post-excerpt__more-link::after {
	content: "";
	width: .95em;
	height: .95em;
	background-color: currentColor;
	-webkit-mask: var(--randls-sipka) center / contain no-repeat;
	mask: var(--randls-sipka) center / contain no-repeat;
	transition: transform .2s ease;
}
.randls-vypis__telo .wp-block-post-excerpt__more-link:hover::after { transform: translateX(4px); }

.randls-vypis__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-40);
}
.randls-vypis__meta a { color: inherit; text-decoration: none; }
.randls-vypis__meta a:hover { color: var(--wp--preset--color--brand); }

/* Štítek a datum ve výpisu drží jednu osu. */
.randls-vypis__meta { align-items: center; }

/* Postranní kartička zůstává jako blok pro jiná místa; v editoru je
   plátno užší než 1180 px, takže by se tam jinak nevykreslila. */
.wp-block[data-type="randls/bok"] .randls-bok { display: block; }

/* ---------------------------------------------------------------
   21b · Stránkování výpisu
   Mřížka o třech drahách s napevno přiřazenými sloupci, aby čísla
   zůstala uprostřed i na první stránce, kde chybí odkaz "Předchozí".
   --------------------------------------------------------------- */
:root .wp-block-query-pagination.wp-block-query-pagination-is-layout-flex {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
}
:root .wp-block-query-pagination .wp-block-query-pagination-previous { grid-column: 1; justify-self: start; }
:root .wp-block-query-pagination .wp-block-query-pagination-numbers  { grid-column: 2; justify-self: center; }
:root .wp-block-query-pagination .wp-block-query-pagination-next     { grid-column: 3; justify-self: end; }

/* Čísla stránek */
.wp-block-query-pagination-numbers { display: flex; align-items: center; gap: 6px; }
.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 .6rem;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--ink-70);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wp-block-query-pagination-numbers a.page-numbers:hover {
	background: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--brand);
}
.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--brand);
	color: #fff;
}
.wp-block-query-pagination-numbers .page-numbers.dots {
	min-width: 1.5rem;
	padding: 0;
	color: var(--wp--preset--color--ink-40);
}

/* Předchozí / další – stejný jazyk jako odkaz "Číst více" */
:root .wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
}
.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next)::before,
.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next)::after {
	content: "";
	width: .95em;
	height: .95em;
	background-color: currentColor;
	-webkit-mask: var(--randls-sipka) center / contain no-repeat;
	mask: var(--randls-sipka) center / contain no-repeat;
	transition: transform .2s ease;
}
.wp-block-query-pagination .wp-block-query-pagination-previous::after,
.wp-block-query-pagination .wp-block-query-pagination-next::before { content: none; }
.wp-block-query-pagination .wp-block-query-pagination-previous::before { transform: scaleX(-1); }
.wp-block-query-pagination .wp-block-query-pagination-previous:hover::before { transform: scaleX(-1) translateX(4px); }
.wp-block-query-pagination .wp-block-query-pagination-next:hover::after { transform: translateX(4px); }

@media (max-width: 560px) {
	:root .wp-block-query-pagination.wp-block-query-pagination-is-layout-flex {
		grid-template-columns: 1fr 1fr;
		row-gap: var(--wp--preset--spacing--30);
	}
	:root .wp-block-query-pagination .wp-block-query-pagination-numbers  { grid-column: 1 / -1; grid-row: 1; }
	:root .wp-block-query-pagination .wp-block-query-pagination-previous { grid-column: 1; grid-row: 2; }
	:root .wp-block-query-pagination .wp-block-query-pagination-next     { grid-column: 2; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next)::before,
	.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next)::after { transition: none; }
}

/* ===============================================================
   22 · Hero úvodní stránky: fotka jako panel u pravého okraje
   Fotka se vytrhne z kontejneru, sahá od pravého okraje okna
   k textovému sloupci a drží celou výšku bloku. Vlnka ji dole
   přetne, protože ::after se kreslí až po ní.
   =============================================================== */
@media (min-width: 1080px) {
	/* Jen hero, které fotku opravdu má, tedy úvodní stránka. */
	.randls-hero:has(.randls-hero__obrazek) {
		min-height: clamp(480px, 56vh, 680px);
		display: flex;
		align-items: center;
	}
	.randls-hero > .wp-block-columns { width: 100%; }

	/* Textový sloupec si drží šířku čitelného sloupce. */
	.randls-hero .wp-block-column:first-child {
		flex-basis: 52% !important;
		max-width: 640px;
	}

	/*
	 * Sloupec s fotkou zůstane prázdný, fotku z něj vyjmeme.
	 * Statický sloupec je potřeba, aby absolutní pozice počítala
	 * od bloku hero, ne od sloupce.
	 */
	.randls-hero .wp-block-columns,
	.randls-hero .wp-block-column { position: static; }

	.randls-hero__obrazek {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(46vw, 730px);
		margin: 0;
		border-radius: 0;
		overflow: hidden;
	}
	.randls-hero__obrazek img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 68% center;
		border-radius: 0;
		display: block;
	}
}

/* Hlavička stránky s fotkou: text si nechá místo pro panel vpravo. */
@media (min-width: 1080px) {
	/*
	 * Hlavička článku není hero úvodní stránky: nic tu neprodává, jen
	 * uvozuje text. Vlastní min-height proto přebije tu z pravidla
	 * výš, jinak by čtenář rolovat k prvnímu odstavci přes půl obrazovky.
	 */
	.randls-hero--stranka:has(.randls-hero__obrazek) {
		min-height: clamp(300px, 32vh, 400px);
		padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(3rem, 5vw, 4.5rem);
	}
	.randls-hero--stranka:has(.randls-hero__obrazek) .randls-hero__obal { width: 100%; }
	.randls-hero--stranka:has(.randls-hero__obrazek) .randls-hero__nadpis { max-width: 15ch; }
	.randls-hero--stranka:has(.randls-hero__obrazek) .randls-hero__perex { max-width: 34ch; }

	/*
	 * Nadpis i perex mají svou šířku, drobečky ne – jsou jeden dlouhý
	 * řádek a u článku s dlouhým názvem zajely pod fotku, kde je text
	 * neviditelný. Šířka se počítá z místa, které fotka nechá volné:
	 * celá šířka okna minus panel, mezera a levý okraj kontejneru.
	 *
	 * Minifikátor Autoptimize zahodí každé calc() s vnořenou funkcí
	 * – i se závorkou, která blok uzavírá. Proto se šířka počítá
	 * ve třech pásmech, každé plochým calc().
	 *
	 * do 1327 px: panel je 46vw, obal odsazuje 1,5rem
	 * 1328–1587 px: panel je 46vw, obal je vycentrovaný
	 * od 1588 px: panel má pevných 730 px, obal je vycentrovaný
	 */
	.randls-hero--stranka:has(.randls-hero__obrazek) .randls-drobecky {
		max-width: calc(54vw - 3.5rem);
	}
}

@media (min-width: 1328px) {
	.randls-hero--stranka:has(.randls-hero__obrazek) .randls-drobecky {
		max-width: calc(4vw + 640px - 2rem);
	}
}
@media (min-width: 1588px) {
	.randls-hero--stranka:has(.randls-hero__obrazek) .randls-drobecky {
		max-width: calc(50vw - 90px - 2rem);
	}
}

/*
 * Poslední drobeček opakuje název stránky, takže u dlouhého názvu
 * zabere dva řádky. Ořízneme ho třemi tečkami – cesta má orientovat,
 * ne převyprávět nadpis, který je hned pod ní.
 */
.randls-hero--stranka .randls-drobecky [aria-current="page"],
.randls-hero--stranka .randls-drobecky--yoast .breadcrumb_last {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}
.randls-hero--stranka .randls-drobecky__polozka:last-child { min-width: 0; }
.randls-hero--stranka .randls-drobecky__seznam { flex-wrap: nowrap; }

/* Na užším displeji je fotka normální blok pod textem. */
@media (max-width: 1079px) {
	.randls-hero__obrazek { margin: var(--wp--preset--spacing--40) 0 0; }
	.randls-hero__obrazek img { border-radius: 16px; width: 100%; height: auto; display: block; }
}

/* ===============================================================
   23 · Hlavička stránky
   Stejný začátek na všech šablonách: barevný pás, drobečky,
   nadpis, volitelný perex a výzva. Obsah začíná u levého okraje
   kontejneru, ne uprostřed.
   =============================================================== */
.randls-hero--stranka {
	padding-block: clamp(2rem, 4vw, 3.25rem) clamp(3.5rem, 7vw, 6rem);
	background: var(--wp--preset--color--paper);
}
.randls-hero__obal {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}
.randls-hero__nadpis {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 20ch;
}

/*
 * Drobečky v hlavičce jsou orientace, ne sdělení. Poslední položka
 * opakuje nadpis, takže se nezvýrazňuje – celá cesta je jednotně
 * tlumená a menší.
 */
.randls-hero--stranka .randls-drobecky { font-size: .8125rem; }
.randls-hero--stranka .randls-drobecky,
.randls-hero--stranka .randls-drobecky a,
.randls-hero--stranka .randls-drobecky [aria-current="page"],
.randls-hero--stranka .randls-drobecky--yoast .breadcrumb_last {
	color: var(--wp--preset--color--ink-40);
	font-weight: 400;
}
.randls-hero--stranka .randls-drobecky a:hover { color: var(--wp--preset--color--brand); }
.randls-hero__perex {
	margin: 1.1rem 0 0;
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--ink-70);
}
.randls-hero__akce { margin: var(--wp--preset--spacing--40) 0 0; }

/* Datum a typ újmy patří k nadpisu, ne nad tělo textu. */
.randls-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin: 1.15rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-40);
}
.randls-hero__stitek {
	background: var(--wp--preset--color--brand-lite);
	color: var(--wp--preset--color--brand);
	border-radius: 999px;
	padding: .25rem .75rem;
	font-weight: 500;
}
.randls-hero--stranka .randls-drobecky { margin-bottom: 0; }

/* ===============================================================
   24 · Obsah zarovnaný zleva
   Kontejner zůstává vycentrovaný, ale čitelný sloupec v něm
   začíná u levého okraje. Když stránka osnovu nemá, nedrží se
   pro ni místo.
   =============================================================== */
@media (min-width: 1180px) {
	.randls-clanek:not(:has(.randls-osnova)) {
		grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
	}
	.randls-clanek:not(:has(.randls-osnova)) > * {
		grid-column: 1;
	}
	.randls-clanek:not(:has(.randls-osnova)) > .alignwide,
	.randls-clanek:not(:has(.randls-osnova)) > .alignfull {
		grid-column: 1 / -1;
	}
}

/*
 * Sekce pod hlavičkou. Pás jde přes celou šířku, ale obsah v něm
 * drží stejný levý okraj jako logo a menu. Řeší to odsazení, ne
 * max-width – to by WordPress u alignfull bloku přebil.
 */
.wp-block-group.randls-sekce {
	padding-inline: max(
		var(--wp--preset--spacing--30),
		calc((100% - var(--wp--style--global--wide-size)) / 2 + var(--wp--preset--spacing--30))
	);
}
/*
 * Tři třídy schválně. WordPress dává potomkům omezeného rozvržení
 * margin-inline: auto selektorem o dvou třídách; s jednou třídou by
 * nás přebil a krátký nadpis nebo datum by se posadily doprostřed.
 */
.wp-block-group.alignfull.randls-sekce > * { margin-inline: 0; }

/* ===============================================================
   25 · Horní pruh, výzva u menu a jazyky
   Tlačítko Nezávazná konzultace sedí na širokém displeji vedle
   menu, na tabletu a níž se schová zpátky do horního pruhu.
   Je to jedno a totéž menu, jen dvakrát vykreslené.
   =============================================================== */
.randls-hlavicka__pruh-obsah { gap: 1rem 1.5rem; }
.randls-hlavicka__vpravo { gap: 1.75rem; }

/* Varianta menu, která ukáže jen poslední položku, tedy tlačítko. */
.randls-menu--cta .randls-menu__list { gap: 0; }
.randls-menu--cta .randls-menu__list > li.randls-menu__kontakt { display: none; }
.randls-menu--cta .randls-menu__list > li a {
	background: var(--wp--preset--color--cta);
	color: var(--wp--preset--color--cta-text);
	border-radius: 10px;
	padding: .7rem 1.25rem;
	font-weight: 500;
	white-space: nowrap;
}
.randls-menu--cta .randls-menu__list > li a {
	position: relative;
	z-index: 1;
	overflow: hidden;
	background: var(--wp--preset--color--brand);
}
.randls-menu--cta .randls-menu__list > li a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 180%;
	z-index: -1;
	background: var(--wp--preset--color--cta);
	border-radius: 0 0 50% 50%;
	transition: height .45s cubic-bezier(.33, 1, .68, 1);
}
.randls-menu--cta .randls-menu__list > li a:hover::before,
.randls-menu--cta .randls-menu__list > li a:focus-visible::before { height: 0; }
.randls-menu--cta .randls-menu__list > li a:hover,
.randls-menu--cta .randls-menu__list > li a:focus-visible { color: #fff; }
.randls-menu--cta a::after { display: none; }

/* Nad 1080 px je tlačítko u menu, v pruhu zůstane jen telefon. */
@media (min-width: 1080px) {
	.randls-menu--pruh .randls-menu__list > li:not(.randls-menu__kontakt) { display: none; }
}
@media (max-width: 1079px) {
	.randls-hlavicka__vpravo .randls-menu--cta { display: none; }
}

/* Jazyky */
.randls-jazyky { display: flex; align-items: center; gap: .75rem; }
.randls-jazyky__polozka {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	text-decoration: none;
	color: rgba(255, 255, 255, .7);
	font-size: .8125rem;
	letter-spacing: .06em;
	font-weight: 500;
	padding: .2rem .1rem;
	transition: color .16s ease, opacity .16s ease;
}
.randls-jazyky__polozka:hover { color: #fff; }
.randls-jazyky__polozka.je-aktivni { color: #fff; }
.randls-jazyky__vlajka { display: inline-flex; }
.randls-jazyky__vlajka img {
	display: block;
	width: 18px;
	height: auto;
	border-radius: 2px;
	opacity: .75;
	transition: opacity .16s ease;
}
.randls-jazyky__polozka:hover .randls-jazyky__vlajka img,
.randls-jazyky__polozka.je-aktivni .randls-jazyky__vlajka img { opacity: 1; }

@media (max-width: 560px) {
	.randls-hlavicka__pruh-obsah { justify-content: center; }
	.randls-jazyky__kod--zkratka { display: none; }
}

/* ===============================================================
   26 · Jak to funguje
   Sekce dostane vlastní světlý pás, aby se opticky oddělila od
   rozcestníku nad sebou. Vybírá se podle obsahu, ne podle třídy
   navíc: skupina, která má přímo v sobě sloupce s kroky. Na
   stránce /jak-to-funguje kroky sedí v post-contentu, ne ve
   skupině, takže tam se pás nechytí a nezdvojí hlavičku.
   =============================================================== */
/*
 * Obal článku je taky alignfull skupina, takže od chvíle, kdy kroky
 * můžou být i v obsahu stránky, by se pás obarvil přes celý článek.
 * Odtud to vyloučení – pás patří jen sekci na úvodní stránce.
 */
.wp-block-group.alignfull:not(.randls-clanek):has(> .wp-block-columns.randls-kroky) {
	background: var(--wp--preset--color--paper);
}

/* ===============================================================
   26b · Jak to funguje: kroky jako karty
   Číslo sedí na horní hraně karty, proto má sloupec odsazení shora
   a kulička zápornou polovinu výšky. Prstenec kolem ní je ve stejné
   barvě jako podklad, takže opticky přeruší rámeček karty.
   Spojnice mezi kroky tu byly dvakrát a pokaždé rušily víc, než
   pomohly. Pořadí nesou čísla, šipky k tomu nic nepřidávaly.
   =============================================================== */
.wp-block-columns.randls-kroky { align-items: stretch; }

.randls-kroky > .wp-block-column {
	position: relative;
	margin-top: 1.75rem;
	padding: 2.6rem 1.6rem 1.9rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 18px;
	box-shadow: var(--wp--preset--shadow--karta);
	text-align: center;
	transition: box-shadow .22s ease, transform .22s ease;
}
.randls-kroky > .wp-block-column > *:first-child { margin-top: 0; }

/* Stejné chování jako u karet v rozcestníku, ať je web jeden systém.
   Karta není odkaz, takže je to čistě oživení – proto se při vypnutých
   animacích nic nehýbe a zůstane jen silnější stín. */
.randls-kroky > .wp-block-column:hover {
	box-shadow: var(--wp--preset--shadow--zvednuta);
	transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
	.randls-kroky > .wp-block-column { transition: none; }
	.randls-kroky > .wp-block-column:hover { transform: none; }
}

.randls-kroky .randls-krok__cislo {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}

.randls-kroky h3 { margin-top: 0; }
.randls-kroky p:not(.randls-krok__cislo) { color: var(--wp--preset--color--ink-70); }

@media (min-width: 782px) {
	.wp-block-columns.randls-kroky { column-gap: 2.5rem; }
}

@media (max-width: 781px) {
	.wp-block-columns.randls-kroky { row-gap: 3.25rem; }
	.randls-kroky > .wp-block-column { margin-top: 1.75rem; }
}

/* ===============================================================
   27 · Odkaz na všechny případy
   Za mřížkou výsledků nemá být druhé výrazné tlačítko, tady stačí
   textový odkaz se šipkou. Rozhodne poloha za blokem případů,
   ať se stejný styl nechytí i jinde na webu.
   =============================================================== */
.randls-pripady + .wp-block-buttons,
.randls-souvisejici + .wp-block-buttons { margin-top: var(--wp--preset--spacing--50); }
.randls-pripady + .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link,
.randls-souvisejici + .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 0;
	overflow: visible;
	padding: .6rem 0;
	color: var(--wp--preset--color--brand);
	font-weight: 500;
}
/* Holý odkaz zůstává odkazem, výplň by z něj udělala tlačítko. */
.randls-pripady + .wp-block-buttons .wp-block-button__link::before,
.randls-souvisejici + .wp-block-buttons .wp-block-button__link::before { content: none; }
.randls-pripady + .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover,
.randls-souvisejici + .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--brand-dark);
	text-decoration: underline;
	text-underline-offset: .35em;
	transform: none;
}

/* Fotka v sekci o kanceláři */
.randls-foto { margin: 0; }
.randls-foto img { border-radius: 16px; display: block; width: 100%; height: auto; }

/* ===============================================================
   28 · Vlnka v patičce
   Světlejší tvar v tmavém pozadí, čistě dekorace. Obsah patičky
   se musí zvednout nad ni, jinak by ho překryla.
   =============================================================== */
:root {
	--randls-vlna-paticka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v44c-200 86-360 34-560 72-230 44-430 100-880 124z' fill='%23000'/%3E%3C/svg%3E");
}
.randls-paticka::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	/* Nejhlubší bod vlnky teď sedí přesně na spodní hraně tohohle boxu,
	   takže výška určuje, kde vlnka končí: nad linkou u copyrightu,
	   ne až u dolního okraje patičky. */
	height: clamp(280px, 32vw, 460px);
	background: linear-gradient(100deg, rgba(155, 41, 70, .28), rgba(155, 41, 70, .09) 58%, rgba(155, 41, 70, 0) 88%);
	-webkit-mask: var(--randls-vlna-paticka) top center / 100% 100% no-repeat;
	mask: var(--randls-vlna-paticka) top center / 100% 100% no-repeat;
	pointer-events: none;
}
.randls-paticka > * { position: relative; z-index: 1; }

/* ===============================================================
   29 · Postranní kartička u článku
   Sedí v pravém sloupci mřížky článku a jede s textem. Pod 1180 px
   mřížka mizí a kartička by jen zdvojila výzvu pod článkem, proto
   se tam nevykresluje.
   =============================================================== */
.randls-bok { display: none; }

@media (min-width: 1180px) {
	.randls-clanek > .randls-bok {
		display: block;
		grid-column: 3;
		grid-row: 1 / span 100;
		align-self: start;
		justify-self: end;
		position: sticky;
		top: 2rem;
		width: 100%;
		max-width: 320px;
		margin-inline: 0;
		padding: 1.5rem 1.6rem 1.7rem;
		background: var(--wp--preset--color--brand-lite);
		border-radius: 16px;
	}
	/* Bez osnovy má mřížka jen dva sloupce, volný je ten druhý. */
	.randls-clanek:not(:has(.randls-osnova)) > .randls-bok { grid-column: 2; }
}

.randls-bok__nadpis {
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	letter-spacing: -.01em;
}
.randls-bok__text { margin: 0 0 1.15rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-70); }
.randls-bok__akce {
	display: block;
	text-align: center;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--cta-text);
	border-radius: 10px;
	padding: .8rem 1rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .18s ease;
}
.randls-bok__akce {
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.randls-bok__akce::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 180%;
	z-index: -1;
	background: var(--wp--preset--color--cta);
	border-radius: 0 0 50% 50%;
	transition: height .45s cubic-bezier(.33, 1, .68, 1);
}
.randls-bok__akce:hover { background: var(--wp--preset--color--brand); color: #fff; }
.randls-bok__akce:hover::before { height: 0; }
.randls-bok__telefon {
	display: block;
	margin-top: .9rem;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}
.randls-bok__telefon:hover { text-decoration: underline; text-underline-offset: .3em; }

/* ===============================================================
   30 · Hlavička na malém displeji
   Vínový pruh zabíral skoro čtvrtinu obrazovky kvůli dlouhé větě
   u telefonu. Na mobilu proto odpadá celý: v bílé řadě zůstane
   logo vlevo, vlaječky a přepínač vpravo, telefon i výzva se
   přestěhují do panelu menu, kde na ně je místo.
   =============================================================== */

/* Nad 900 px vlaječky žijí v horním pruhu; kopie v bílé řadě by překážela. */
.randls-hlavicka__vpravo .randls-jazyky { display: none; }
/* Totéž pro telefon a výzvu v panelu – ten se otevírá až na mobilu. */
.randls-menu--panel { display: none; }

@media (max-width: 900px) {
	.randls-hlavicka__pruh { display: none; }

	.randls-hlavicka__hlavni > .wp-block-group { flex-wrap: nowrap; gap: 1rem; }
	.randls-hlavicka__vpravo { gap: .9rem; }
	.randls-logo img { width: min(200px, 46vw); height: auto; }

	/* Vlaječky jsou nově na bílém, tedy i jinou barvou. */
	.randls-hlavicka__vpravo .randls-jazyky { display: flex; }
	.randls-hlavicka__vpravo .randls-jazyky__polozka { color: var(--wp--preset--color--ink-40); }
	.randls-hlavicka__vpravo .randls-jazyky__polozka:hover,
	.randls-hlavicka__vpravo .randls-jazyky__polozka.je-aktivni { color: var(--wp--preset--color--contrast); }
	.randls-hlavicka__vpravo .randls-jazyky__kod--zkratka { display: none; }
	.randls-hlavicka__vpravo .randls-jazyky__vlajka img { opacity: 1; width: 20px; }

	/* Telefon a výzva na konci panelu menu. */
	.randls-nav__panel .randls-menu--panel { display: block; margin-top: 1.6rem; }
	.randls-nav__panel .randls-menu--panel .randls-menu__list { gap: 1rem; }
	.randls-nav__panel .randls-menu--panel a { border-bottom: 0; padding: 0; font-size: 1rem; }
	.randls-nav__panel .randls-menu--panel li.randls-menu__kontakt a {
		color: var(--wp--preset--color--brand);
		font-weight: 500;
		line-height: 1.5;
	}
	.randls-nav__panel .randls-menu--panel li:not(.randls-menu__kontakt) a {
		background: var(--wp--preset--color--cta);
		color: var(--wp--preset--color--cta-text);
		border-radius: 10px;
		padding: .9rem 1.1rem;
		text-align: center;
		font-weight: 500;
	}

	/*
	 * Panel je uvnitř hlavičky, a ta má vlastní vrstvu se z-indexem 20.
	 * Zatemnění pod panelem žije v kořeni na 50, takže by panel překrylo,
	 * ať má uvnitř hlavičky jakékoli číslo. Zvedáme proto celou hlavičku.
	 */
	body.ma-otevrene-menu .randls-hlavicka { z-index: 60; }

	/* Tři čísla vedle sebe: srovnaná, ne 2 + 1 na druhý řádek. */
	.randls-cisla {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
	.randls-cisla strong { font-size: 1.75rem; }
	.randls-cisla p { font-size: .8125rem; line-height: 1.35; }
}

@media (max-width: 400px) {
	.randls-logo img { width: 150px; }
}

/* ===============================================================
   31 · Typografie v textu stránky

   Nadpisy v theme.json jsou dimenzované na sekce úvodní stránky,
   kde mají být velké. Uvnitř článku ale H2 vycházelo 48 px proti
   17 px textu, tedy skoro trojnásobek – kapitola pak křičí víc
   než sekce a stránka působí roztaženě.

   Druhá půlka problému byly mezery. WordPress dává všem blokům
   stejný odstup 24 px, takže nadpis stál přesně uprostřed mezi
   odstavcem nad ním a pod ním a nepatřil ani k jednomu. Nadpis
   proto dostane velký odstup nahoře a malý dole – tím se sváže
   s textem, který uvozuje.

   Selektor začíná :root kvůli specificitě: pravidlo rozvržení
   WordPressu je silnější než samotná třída.

   Sekční nadpisy uvnitř článku („Naše výsledky v této oblasti“,
   „Mohlo by vás zajímat“) jsou poznané třídou randls-mimo-osnovu
   a zůstávají velké – nejsou to kapitoly textu, ale předěly.
   =============================================================== */
:root .randls-clanek h2:not(.randls-mimo-osnovu) {
	font-size: clamp(1.75rem, 1.15rem + 1.6vw, 2.125rem);
	line-height: 1.2;
	margin-block-start: var(--wp--preset--spacing--50);
	margin-block-end: .5rem;
}
:root .randls-clanek h3 {
	font-size: clamp(1.3125rem, 1.05rem + .7vw, 1.5rem);
	line-height: 1.3;
	margin-block-start: var(--wp--preset--spacing--40);
	margin-block-end: .35rem;
}
:root .randls-clanek h4 {
	margin-block-start: var(--wp--preset--spacing--30);
	margin-block-end: .3rem;
}

/*
 * Tady je potřeba sáhnout na text pod nadpisem, ne na nadpis samotný.
 * Svislé okraje sousedů se v CSS sesypávají a platí ten větší – malý
 * spodní okraj nadpisu tedy nikdy nepřebil odstup 24 px, který dává
 * blokům WordPress. Nadpis pak visel od svého textu stejně daleko
 * jako od cizího.
 *
 * Vyjmenované jsou jen obsahové bloky. Nadpis po nadpisu (H2 a hned
 * pod ním H3) si svůj odstup ponechá – tam je odsazení na místě.
 */
:root .randls-clanek :is(h2, h3, h4) + :is(p, ul, ol, dl, figure, table, blockquote, pre) {
	margin-block-start: .5rem;
}

/*
 * Karty jsou komponenty, ne text článku.
 *
 * Kroky „Jak to funguje“ stojí na úvodní stránce mimo článek, ale na
 * /jak-to-funguje/ uvnitř něj – a pravidla výš jim tam zmenšila nadpis
 * na 24 px proti 28 px na úvodní. Stejná karta tak vypadala na každé
 * stránce jinak. Tohle jí velikost i rozestup vrací bez ohledu na to,
 * kde leží.
 *
 * Odstup nadpisu od textu je 8 px stejně jako u karet v rozcestníku,
 * ať mají karty napříč webem stejný rytmus.
 */
:root .randls-kroky h3,
:root .randls-clanek .randls-kroky h3 {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	margin-block-end: .5rem;
}
:root .randls-kroky h3 + p,
:root .randls-clanek .randls-kroky h3 + p {
	margin-block-start: .5rem;
}
/*
 * Nadpis hned na začátku obsahu nemá nad sebou co oddělovat,
 * velký odstup by jen odsunul text od hlavičky stránky.
 */
:root .randls-clanek > h2:first-child,
:root .randls-clanek > h3:first-child { margin-block-start: 0; }

/* Předěl před sekcí je větší než mezi kapitolami, ať je znát. */
:root .randls-clanek h2.randls-mimo-osnovu {
	margin-block-start: var(--wp--preset--spacing--60);
}

/*
 * Sekční nadpis má 48 px, ale pod ním byla jen dvacítka – oproti
 * své velikosti seděl na kartách. Odstup řídí prvek pod nadpisem,
 * protože svislé okraje sousedů se sesypávají a vyhrává ten větší.
 */
:root h2.randls-mimo-osnovu + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ===============================================================
   32 · Sekce pod textem stránky
   „Naše výsledky“ a „Mohlo by vás zajímat“ stojí od téhle chvíle
   v obsahu stránky, tedy uvnitř mřížky článku. Musí ale jít přes
   celou její šířku, ne jen přes textový sloupec.

   Řádek řešit nemusíme: osnova drží sto řádků v prvním sloupci,
   takže prvek přes všechny sloupce se automatické umístění
   nepokusí vměstnat vedle ní a odsune ho až pod ni.
   =============================================================== */
@media (min-width: 1180px) {
	:root .randls-clanek > :is(.randls-mimo-osnovu, .randls-mimo-osnovu ~ *) {
		grid-column: 1 / -1;
		max-width: none;
	}
}

/* ===============================================================
   33 · Medailonky týmu
   Portréty přicházejí z randls.com v různých poměrech i ořezech,
   proto pevný poměr a ořez ze středu horní části – tam je u portrétu
   obličej. Bez toho by řada čtyř fotek byla rozházená.
   =============================================================== */
.randls-tym { gap: var(--wp--preset--spacing--40); }

.randls-tym .randls-tym__foto { margin: 0 0 1rem; }
.randls-tym .randls-tym__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: 50% 18%;
	border-radius: 14px;
}

/*
 * Svislá linka u textu je stejné gesto jako na randls.com – drží
 * jméno a pozici pohromadě a odděluje je od fotky nad nimi.
 */
.randls-tym .wp-block-heading,
.randls-tym .randls-tym__pozice,
.randls-tym .randls-tym__mail {
	padding-left: .85rem;
	border-left: 2px solid var(--wp--preset--color--brand);
}
:root .randls-tym .wp-block-heading {
	margin: 0;
	padding-top: .1rem;
	font-size: 1.0625rem;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--brand);
}
.randls-tym .randls-tym__pozice {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-40);
}
.randls-tym .randls-tym__mail {
	margin: 0;
	padding-bottom: .1rem;
	font-size: var(--wp--preset--font-size--small);
}
.randls-tym .randls-tym__mail a {
	color: var(--wp--preset--color--ink-70);
	text-decoration: none;
	word-break: break-word;
}
.randls-tym .randls-tym__mail a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-underline-offset: .25em;
}

/*
 * Na mobilu se sloupce skládají pod sebe a portrét roztažený přes celou
 * šířku působí obrovsky. Omezíme ho a necháme na střed; poměr 4:3 je
 * u portrétu vlídnější ořez než široký pruh.
 */
@media (max-width: 781px) {
	.randls-tym .randls-tym__foto { text-align: center; }
	.randls-tym .randls-tym__foto img {
		aspect-ratio: 4 / 3;
		object-position: 50% 20%;
		max-width: 450px;
		margin-inline: auto;
	}
}

/* ===============================================================
   34 · Ikony u kontaktních boxů
   Nad nadpisem byl prázdný pruh po vnitřním okraji skupiny. Ikona
   ho zaplní a zároveň napoví, o čem box je, dřív než ho člověk čte.
   Kreslí se maskou, takže drží barvu značky a nepotřebuje obrázek.
   =============================================================== */
.randls-kontakt-box::before {
	content: "";
	display: block;
	width: 2rem;
	height: 2rem;
	margin-bottom: .85rem;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: var(--randls-ikona) center / contain no-repeat;
	mask: var(--randls-ikona) center / contain no-repeat;
}
:root .randls-kontakt-box > .wp-block-heading { margin-block-start: 0; }

.randls-kontakt-box--telefon { --randls-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 6.5 6.5L17 13l4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4 5.2 2 2 0 0 1 6 3z'/%3E%3C/svg%3E"); }
.randls-kontakt-box--adresa { --randls-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); }
.randls-kontakt-box--doprava { --randls-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='13' rx='3.5'/%3E%3Cpath d='M6 11h12'/%3E%3Cpath d='M9.6 13.6h.01M14.4 13.6h.01'/%3E%3Cpath d='M9 16l-1.6 4M15 16l1.6 4'/%3E%3C/svg%3E"); }
.randls-kontakt-box--udaje { --randls-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E"); }

/* ===============================================================
   35 · Tlačítko v hlavičce na jedné ose s menu
   Odkaz uvnitř je inline-block, takže mu řádek pod patičkou
   písma nechává místo navíc a pilulka sedí o čtyři pixely výš
   než text menu vedle. Položka seznamu je proto flex a nic
   k výšce nepřidává.
   =============================================================== */
.randls-menu--cta .randls-menu__list > li:not(.randls-menu__kontakt) {
	display: flex;
	align-items: center;
}

/*
 * Nižší hlavička na mobilu – randls-hlavicka-mobil-vyska
 *
 * Odsazení hlavičky drží blok v šabloně přes vlastní styl,
 * proto je tady !important – bez něj by pravidlo neprošlo.
 * Na úzkém displeji zabírala hlavička skoro 80 px, což je
 * pruh navíc před obsahem; přepínač menu zůstává dost velký
 * na pohodlné klepnutí (přes 40 px i s odsazením).
 */
@media (max-width: 900px) {
	.randls-hlavicka__hlavni {
		/*
		 * Mezera nad řádkem s logem je odstup od horního pruhu,
		 * jenže ten je na mobilu skrytý – zůstávalo po něm 24 px
		 * prázdna. Necháváme jen tolik, aby logo nelepilo nahoru.
		 */
		margin-block-start: .625rem !important;
		padding-top: .55rem !important;
		padding-bottom: .55rem !important;
	}
	.randls-nav__prepinac { padding: .4rem .8rem; }
}

/* ===============================================================
   36 · Hlavička stránky uvnitř obsahu – randls-hero-v-obsahu

   Stránky druhů odškodnění mají hero v obsahu jako zbytek webu,
   aby ho redakce viděla v editoru i s tlačítkem. Obsah ale nad
   1180 px stojí v mřížce kvůli osnově, takže hero musí umět
   přes všechny sloupce a až ke krajům obrazovky.

   Postranní odsazení sekce je počítané z její vlastní šířky
   (max(spacing-30, (100% - wide-size)/2 + spacing-30)), a to se
   zápornou marží uvnitř napodobit nedá – procenta se počítají
   z jiného prvku. Odsazení proto sekci sebereme a přesuneme ho
   do obsahu: na mobilu jako padding, na širokém displeji jako
   krajní sloupce mřížky. Hero pak sahá ke krajům samo od sebe,
   bez 100vw, které na desktopu přidá posuv o šířku rolovátka.
   =============================================================== */
.randls-sekce:has(> .randls-clanek > .randls-hero) { padding-inline: 0; }

.randls-sekce:has(> .randls-clanek > .randls-hero) > .randls-clanek {
	/*
	 * Stejná hodnota, jakou má odsazení sekcí na zbytku webu.
	 * Sekce počítá procenta ze svého rodiče, který je o dvojí
	 * odsazení stránky užší, a to odsazení pak zase přičte – což
	 * se vyruší. Tady se procenta počítají z plné šířky, takže
	 * stačí polovina rozdílu a přičítat se nesmí, jinak by obsah
	 * stál o 24 px jinde než sekce nad ním a pod ním.
	 */
	--randls-okraj: max(
		var(--wp--preset--spacing--30),
		calc((100% - var(--wp--style--global--wide-size)) / 2)
	);
	padding-inline: var(--randls-okraj);
}

/* Na mobilu je obsah běžný proud, hero si okraj odečte marží. */
.randls-clanek > .randls-hero {
	max-width: none;
	width: auto;
	margin-inline: calc(-1 * var(--randls-okraj, 0px));
	margin-bottom: var(--wp--preset--spacing--60);
}

@media (min-width: 1180px) {
	/*
	 * Okraje drží krajní sloupce, aby se hero mělo kam roztáhnout.
	 * Mezeru mezi osnovou a textem dělá vlastní sloupec, ne
	 * column-gap – ten by se přidal i kolem krajních sloupců.
	 */
	.randls-sekce:has(> .randls-clanek > .randls-hero) > .randls-clanek {
		padding-inline: 0;
		grid-template-columns:
			var(--randls-okraj)
			230px
			var(--wp--preset--spacing--60)
			minmax(0, 760px)
			minmax(0, 1fr)
			var(--randls-okraj);
		column-gap: 0;
	}
	.randls-sekce:has(> .randls-clanek > .randls-hero) > .randls-clanek > * { grid-column: 4; }
	.randls-sekce:has(> .randls-clanek > .randls-hero) > .randls-clanek > .alignwide,
	.randls-sekce:has(> .randls-clanek > .randls-hero) > .randls-clanek > .alignfull {
		grid-column: 4 / 6;
	}
	.randls-sekce:has(> .randls-clanek > .randls-hero) > .randls-clanek > .randls-osnova {
		grid-column: 2;
		grid-row: 2 / span 100;
	}
	/*
	 * Hero je taky alignfull, takže by ho jinak chytlo pravidlo
	 * o řádek výš – a to má stejné třídy i :has, tedy vyšší váhu.
	 * Selektor proto začíná stejně a přidává poslední krok navíc.
	 */
	.randls-sekce:has(> .randls-clanek > .randls-hero) > .randls-clanek > .randls-hero {
		grid-column: 1 / -1;
		grid-row: 1;
		margin-inline: 0;
	}
	/* Sekce mimo osnovu začínají až za řádky, které si osnova drží. */
	:root .randls-clanek:has(> .randls-hero) > .randls-mimo-osnovu { grid-row-start: 102; }
	:root .randls-clanek:has(> .randls-hero) > .randls-mimo-osnovu ~ .randls-mimo-osnovu { grid-row-start: auto; }
}

/* ===============================================================
   37 · Tým – medailonky a výpis – randls-tym-medailonky

   Medailonek má vlevo portrét a vpravo jméno, pozici a spojení.
   Na úzkém displeji jde foto nad text a drží se do 450 px, aby
   nezabralo celou obrazovku.
   =============================================================== */
.randls-medailonek {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--50);
}
.randls-medailonek__foto img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 450px;
	border-radius: 16px;
}
.randls-medailonek__pozice {
	margin: 0 0 .4rem;
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-40);
}
/*
 * randls-medailonek-sirka
 *
 * Medailonek stojí v obsahu stránky, kde je text omezený na
 * čtecí šířku. Zarovnání „na šířku“ se u vykreslovaného bloku
 * nechytlo, tak si šířku bere sám – jinak zbyde na jméno vedle
 * fotky necelých 400 px a zalomí se i „Mgr. Milan Flachs“.
 */
.randls-medailonek-hlava.alignwide {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/*
 * Jméno je nadpis stránky, ale vedle fotky nemá prostor hlavičky
 * na celou šířku – proto vlastní velikost místo předvolené.
 */
.randls-medailonek__jmeno {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	line-height: 1.15;
}
/*
 * Popisky drží jeden společný sloupec, jehož šířku určuje ten
 * nejdelší („ID datové schránky“) – aby se nelámal na dva řádky
 * a aby údaje vedle sebe začínaly na stejné svislici. Dvojice
 * dt/dd jsou proto z rozvržení vyjmuté přes display: contents.
 */
.randls-medailonek__spojeni {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 1rem;
	row-gap: .55rem;
	align-items: baseline;
	margin: 0;
}
.randls-medailonek__spojeni > div { display: contents; }
.randls-medailonek__spojeni dt {
	color: var(--wp--preset--color--ink-40);
	font-size: var(--wp--preset--font-size--small);
}
.randls-medailonek__spojeni dd { margin: 0; }

@media (min-width: 900px) {
	.randls-medailonek {
		grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
		align-items: start;
	}
}

/* Výpis týmu: karta je celá odkaz, ať se na dotyku dobře trefuje. */
.randls-tym-vypis {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.randls-tym-karta__odkaz {
	display: grid;
	gap: .5rem;
	text-decoration: none;
	color: inherit;
	border-bottom: 0;
}
.randls-tym-karta__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 14px;
	margin-bottom: .35rem;
}
.randls-tym-karta__jmeno { font-weight: 500; }
.randls-tym-karta__pozice {
	color: var(--wp--preset--color--ink-40);
	font-size: var(--wp--preset--font-size--small);
}
.randls-tym-karta__odkaz:hover .randls-tym-karta__jmeno,
.randls-tym-karta__odkaz:focus-visible .randls-tym-karta__jmeno { color: var(--wp--preset--color--brand); }

/* Drobečky nad medailonkem si drží stejný odstup jako v hlavičce stránky. */
.randls-medailonek-hlava .randls-drobecky { margin-bottom: var(--wp--preset--spacing--40); }

/* ===============================================================
   38 · Medailonek jako pás – randls-medailonek-pas

   Stejný podklad i vlnka jako hlavička ostatních stránek, ať
   medailonek nevypadá jako cizí prvek. Hodnoty se schválně
   neopisují od oka: berou se ze stejných proměnných a stejných
   clampů, takže když se změní hero, změní se i tohle.
   =============================================================== */
.randls-medailonek-hlava.alignfull {
	position: relative;
	background: var(--wp--preset--color--paper);
	/*
	 * Spodní odsazení a přesah drží proměnné, protože se na ně
	 * odvolává i záporná marže fotky a odstup textu pod pásem.
	 * Kdyby se hodnoty opisovaly, při první změně by se rozešly
	 * a fotka by buď vlnku nepřekročila, nebo vlezla do textu.
	 */
	--randls-medailonek-spodek: clamp(3.5rem, 7vw, 6rem);
	--randls-medailonek-presah: clamp(1.5rem, 3vw, 2.75rem);
	padding-block: clamp(2rem, 4vw, 3.25rem) var(--randls-medailonek-spodek);
	/*
	 * Doslova stejný vzorec jako u sekcí, včetně přičteného kroku.
	 * Procenta se počítají z rodiče, a ten je tady – stejně jako
	 * u sekcí – o dvojí odsazení stránky užší než obrazovka. Bez
	 * toho přičtení by obsah pásu stál o 24 px vedle textu pod ním.
	 * (U .randls-clanek je rodič naopak plná šířka, proto tam
	 * přičtení není – rozdíl je v rodiči, ne v záměru.)
	 */
	padding-inline: max(
		var(--wp--preset--spacing--30),
		calc((100% - var(--wp--style--global--wide-size)) / 2 + var(--wp--preset--spacing--30))
	);
	/* Odstup pod pásem počítá i s tím, co z něj fotka vyčnívá. */
	margin-bottom: calc(var(--wp--preset--spacing--50) + var(--randls-medailonek-presah));
}

/* Vlnka je maska v barvě stránky – překrývá spodek pásu. */
.randls-medailonek-hlava.alignfull::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(38px, 5vw, 74px);
	background: var(--wp--preset--color--base);
	mask: var(--randls-vlna) bottom center / 100% 100% no-repeat;
	pointer-events: none;
}

/*
 * Obsah pásu drží šířku stránky a musí být nad vlnkou – bez
 * vlastní vrstvy by ho maska na spodní hraně překreslila.
 */
.randls-medailonek-hlava.alignfull > * {
	position: relative;
	z-index: 1;
}

.randls-medailonek-hlava.alignfull .randls-medailonek { margin-bottom: 0; }

/*
 * Fotka přečuhuje z pásu ven – randls-medailonek-presah
 *
 * Záporná marže je o spodní odsazení pásu větší než přesah, aby
 * fotka vůbec došla k dolní hraně; teprve co je nad rámec, kouká
 * ven. Řádek mřížky se o tu hodnotu zkrátí, takže pás nenaroste
 * a vlnka zůstane tam, kde je.
 *
 * Jen od 900 px: na mobilu je fotka nad textem přes celou šířku
 * a vyčnívat by neměla kam.
 */
@media (min-width: 900px) {
	.randls-medailonek-hlava.alignfull .randls-medailonek__foto {
		margin-bottom: calc(-1 * (var(--randls-medailonek-spodek) + var(--randls-medailonek-presah)));
	}
}