/**
 * Odien Events Prague — theme styles.
 *
 * Layout: Who We Work With and What We Do stack, per ¶28. Why Us keeps the
 * Tours photo beside it, per ¶61 ("nejlépe dát vpravo jako okénko vedle…").
 * The render pairs both bands; the brief wins where the two disagree.
 * See zadani-redesign-2026.md B4.
 *
 * Selector policy: one class per rule, state via `.is-*` on the same element.
 * No element selectors for layout, so nothing here can be silently outranked.
 */

/* ---------------------------------------------------------------------------
   TEMPORARY — the old typeface, kept only so the two can still be compared.
   Roboto Condensed is now the theme default (declared in theme.json, which
   also emits its @font-face with the unicode ranges). ?font=montserrat flips
   back. Remove this block, the four montserrat woff2 files, the Montserrat
   entry in theme.json and the branch in odien_body_class() once confirmed.
   --------------------------------------------------------------------------- */

body.oe-type-montserrat,
body.oe-type-montserrat * {
	font-family: Montserrat, system-ui, sans-serif;
}

/* A visible marker so a preview screenshot is never mistaken for the real site. */
body.oe-type-montserrat::before {
	content: "PREVIEW: Montserrat";
	position: fixed;
	z-index: 9999;
	inset: auto auto 0 0;
	padding: 0.35rem 0.75rem;
	background: #b32d2e;
	color: #fff;
	font: 600 11px/1 ui-monospace, monospace;
	letter-spacing: 0.06em;
}

:root {
	--oe-navy: #08132a;
	--oe-navy-700: #12233f;
	--oe-gold: #af8b3e;
	--oe-gold-700: #8c7139;
	--oe-surface: #f4f5f6;
	--oe-base: #fff;
	--oe-text: #333a45;
	--oe-muted: #6b7280;
	--oe-line: rgba(255, 255, 255, 0.16);
	--oe-header-h: 84px;
	--oe-gutter: clamp(1rem, 4vw, 2.5rem);
	--oe-max: 1200px;
}

/* -------------------------------------------------------------------- base */

/* WordPress spaces every direct child of .wp-site-blocks with the global block
   gap. Our top-level children are full-bleed bands that must touch: the gap
   otherwise (a) collapses out through the zero-height fixed-header part and
   pushes the page down, letting white body background show through the
   translucent hero header, and (b) leaves a white line above the footer.
   Specificity 0,1,1 — WordPress uses :where(), which scores 0,0,1. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Same gap one level down: inside <main>, WordPress's flow layout puts 16px
   between siblings, which shows as a white line between two full-bleed bands. */
.oe-hero,
.oe-pagehero,
.oe-band,
.oe-split,
.oe-pgrid,
.oe-siblings,
.oe-team,
.oe-ctaband {
	margin-block-start: 0;
}

/* Inner pages: the header is fixed and opaque, so content has to start below
   it. Derived from --oe-header-h rather than a spacing preset, because a
   preset that happens to be shorter than the header hides the H1 under it. */
.oe-main {
	padding-block-start: calc(var(--oe-header-h) + 2.5rem);
}

/* With a page banner above it the header is transparent and already accounted
   for by the banner's own top padding, so <main> only needs ordinary air. */
.oe-has-cover .oe-main {
	padding-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

/* Inner pages are long-form copy. At the 1200px content size a line runs to
   ~150 characters, about twice a comfortable measure.
   Narrow the content size itself rather than capping each child: WordPress's
   constrained layout reads this variable, so the title, paragraphs, lists and
   buttons all land on the same column. Capping children individually does not
   work — a `ch` value resolves against each element's own font size, so a
   large heading computes a huge max-width and escapes the container.

   Both numbers are tuned to Roboto Condensed: it sets ~35% more characters per
   inch than Montserrat did, so the column has to come in and the size go up to
   land back on a comfortable measure.

   40rem lands at ~85 characters — a little over the classic 65–75, but the
   subpages set prose directly against 1200px-wide card grids and galleries, and
   at 32rem the text column read as a stray narrow strip beside them. The
   balance between the two is worth the few extra characters. */
.oe-main {
	--wp--style--global--content-size: 40rem;
	font-size: 1rem;
}

/* WordPress only border-boxes its own .wp-block-* elements; these custom
   sections live inside a core/html block and would otherwise add padding on
   top of their max-width, making every band 80px wider than the grid. */
[class^="oe-"],
[class*=" oe-"],
[class^="oe-"]::before,
[class^="oe-"]::after {
	box-sizing: border-box;
}

.oe-container {
	width: 100%;
	max-width: var(--oe-max);
	margin-inline: auto;
	padding-inline: var(--oe-gutter);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--oe-gold);
	outline-offset: 3px;
}

.oe-icon {
	display: inline-flex;
	width: 1em;
	height: 1em;
	color: var(--oe-gold);
}

.oe-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ----------------------------------------------------------------- buttons */

.oe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.9rem 1.75rem;
	border: 1px solid transparent;
	border-radius: 2px;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.oe-btn--gold {
	background: var(--oe-gold);
	border-color: var(--oe-gold);
	color: #fff;
}

.oe-btn--gold:hover,
.oe-btn--gold:focus-visible {
	background: var(--oe-gold-700);
	border-color: var(--oe-gold-700);
	color: #fff;
}

.oe-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.oe-btn--ghost:hover,
.oe-btn--ghost:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--oe-navy);
}

.oe-btn--sm {
	padding: 0.65rem 1.15rem;
	font-size: 0.9rem;
}

/* ------------------------------------------------------------------ header */

.oe-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	background: var(--oe-navy);
	transition: background-color 0.25s;
}

/* Front page: sit transparently over the hero until the user scrolls. */
.oe-has-cover .oe-header:not(.is-solid) {
	background: linear-gradient(to bottom, rgba(8, 19, 42, 0.72), rgba(8, 19, 42, 0));
}

.oe-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	max-width: var(--oe-max);
	min-height: var(--oe-header-h);
	margin-inline: auto;
	padding-inline: var(--oe-gutter);
}

.oe-logo {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.oe-logo img {
	width: auto;
	height: 66px;
}

.oe-nav {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(1rem, 2.4vw, 2.25rem);
}

.oe-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2vw, 1.9rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.oe-nav__item {
	position: relative;
}

.oe-nav__item > a {
	display: block;
	padding: 0.5rem 0;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s;
}

.oe-nav__item > a:hover,
.oe-nav__item.is-active > a {
	color: var(--oe-gold);
}

/* Dropdown affordance: a chevron drawn in CSS so it inherits the link colour. */
.oe-nav__item.has-children > a {
	padding-right: 0.95rem;
}

.oe-nav__item.has-children > a::after {
	content: "";
	position: absolute;
	right: 0;
	top: 45%;
	width: 0.36rem;
	height: 0.36rem;
	margin-top: -0.28rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.oe-nav__toggle {
	display: none;
}

.oe-nav__sub {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 15rem;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: #fff;
	border-top: 2px solid var(--oe-gold);
	box-shadow: 0 18px 40px rgba(8, 19, 42, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.oe-nav__item:hover > .oe-nav__sub,
.oe-nav__item:focus-within > .oe-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.oe-nav__sub a {
	display: block;
	padding: 0.55rem 1.25rem;
	color: var(--oe-navy);
	font-size: 0.9rem;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.oe-nav__sub a:hover {
	background: var(--oe-surface);
	color: var(--oe-gold-700);
}

.oe-nav__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.oe-lang {
	position: relative;
}

.oe-lang__current {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0;
	background: none;
	border: 0;
	color: #fff;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	cursor: pointer;
}

.oe-lang__current::after {
	content: "";
	width: 0.32rem;
	height: 0.32rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.oe-lang__list {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 4.5rem;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background: #fff;
	box-shadow: 0 14px 30px rgba(8, 19, 42, 0.18);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s, visibility 0.18s;
}

.oe-lang:hover .oe-lang__list,
.oe-lang:focus-within .oe-lang__list {
	opacity: 1;
	visibility: visible;
}

.oe-lang__list a {
	display: block;
	padding: 0.45rem 1rem;
	color: var(--oe-navy);
	font-size: 0.9rem;
	text-decoration: none;
}

.oe-burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	margin-left: auto;
	padding: 0.5rem;
	background: none;
	border: 0;
	cursor: pointer;
}

.oe-burger span {
	display: block;
	width: 24px;
	height: 2px;
	background: #fff;
	transition: transform 0.2s, opacity 0.2s;
}

/* -------------------------------------------------------------------- hero */

.oe-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(80vh, 720px);
	padding-block: calc(var(--oe-header-h) + 3rem) 3.5rem;
	overflow: hidden;
	isolation: isolate;
}

/* Positive layering only. A negative z-index would paint the media behind the
   section's own background box, which is what hid it the first time. */
.oe-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.oe-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
}

/* Navy wash from the left so the copy keeps contrast over any photograph.
   The copy column runs to ~62%, so the gradient stays heavy until past that
   — a lit facade behind the last trust item otherwise eats the text. */
.oe-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(8, 19, 42, 0.95) 0%, rgba(8, 19, 42, 0.88) 45%, rgba(8, 19, 42, 0.62) 68%, rgba(8, 19, 42, 0.12) 100%),
		linear-gradient(180deg, rgba(8, 19, 42, 0.55) 0%, rgba(8, 19, 42, 0) 30%);
}

.oe-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--oe-max);
	margin-inline: auto;
	padding-inline: var(--oe-gutter);
}

/* Copy column. The render keeps every hero element inside the left ~62%; the
   photograph carries the right side. */
/* Wide enough that the five trust items get ~140px of text each and settle on
   two or three lines at 13px. The title and lead cap themselves well before
   this, so widening the column only affects the bar. */
.oe-hero__copy {
	max-width: min(1060px, 92%);
}

/* rev2: od šířky, kde se karta Blue Orange vykresluje v rohu, jí musí sloupec
   uvolnit místo — jinak by pod ni zajel poslední údaj v trust baru. 20rem je
   šířka karty (17.5rem) plus odstup. Trust bar se tím přeskládá ze 4+1 na
   3+2; pořád dva řádky, jen vyrovnanější. */
@media (min-width: 861px) {
	.oe-hero__copy {
		max-width: min(1060px, calc(100% - 20rem));
	}
}

.oe-hero__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.875rem, 3vw, 2.625rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.oe-hero__title em {
	display: block;
	color: var(--oe-gold);
	font-style: normal;
	font-weight: 600;
}

.oe-hero__lead {
	max-width: 46ch;
	margin: 1.25rem 0 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 1rem;
	line-height: 1.6;
}

/* Five items on one row, separated by hairline rules — the divider is the
   detail that makes this read as one bar rather than five loose blocks. */
.oe-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 0;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

/* Each item takes its own natural width — they are not stretched to a common
   size. Only the padding either side of the divider is kept uniform.
   box-sizing is set here explicitly: these <li> carry no class, so the
   [class^="oe-"] rule above does not reach them and max-width would otherwise
   exclude the padding, making every item ~20px wider than intended. */
.oe-hero__trust li {
	box-sizing: border-box;
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	/* rev1: „On the ground na jeden řádek". Poslední položka je nejdelší a
	   při 11.5rem se lámala tak, že „On the Ground." zůstalo samo dole. */
	max-width: 13.5rem;
	padding-inline-end: 1.25rem;
	margin-inline-end: 1.25rem;
	border-inline-end: 1px solid rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.92);
	font-size: 1rem;
	line-height: 1.35;
}

.oe-hero__trust li:last-child {
	padding-inline-end: 0;
	margin-inline-end: 0;
	border-inline-end: 0;
}

.oe-hero__trust .oe-icon {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
}

.oe-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 2.25rem;
}

/* --------------------------------------------------- Blue Orange (rev2) */

/* Karta partnerského resortu v pravém dolním rohu hero sekce. Klientka
   poslala vizualizaci: navy okno s logem, čtyřmi údaji ve dvou sloupcích
   a zlatým tlačítkem, nahoře odkaz na zavření.

   Je vyňatá z toku a ukotvená k .oe-hero__inner, ne fixovaná k oknu — patří
   k hero sekci a má s ní odscrollovat pryč, ne návštěvníka doprovázet webem. */
.oe-bluebox {
	position: absolute;
	right: var(--oe-gutter);
	bottom: 0;
	z-index: 3;
	box-sizing: border-box;
	width: 17.5rem;
	padding: 1rem 1.1rem 1.1rem;
	border: 1px solid rgba(175, 139, 62, 0.45);
	border-radius: 3px;
	background: rgba(8, 19, 42, 0.9);
	backdrop-filter: blur(6px);
	text-align: center;
}

.oe-bluebox[hidden] {
	display: none;
}

.oe-bluebox__close {
	display: block;
	margin-inline-start: auto;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.55);
	font: inherit;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s;
}

.oe-bluebox__close:hover,
.oe-bluebox__close:focus-visible {
	color: #fff;
}

/* Bílá podložka pod logem. Klientčina vizualizace má logo přímo na navy, jenže
   to používá světlou (negativní) variantu — dodané Blue_Orange_RGB.png je tmavé
   a na navy by „ORANGE RESORT" prakticky zmizelo. Až partner pošle negativní
   verzi loga, podložka může pryč. */
.oe-bluebox__logo {
	display: block;
	margin: 0.35rem auto 0;
	padding: 0.55rem 0.75rem;
	border-radius: 3px;
	background: #fff;
}

.oe-bluebox__logo img {
	display: block;
	width: 100%;
	max-width: 11rem;
	height: auto;
	margin-inline: auto;
}

.oe-bluebox__kicker {
	margin: 0.85rem 0 0;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.8125rem;
	line-height: 1.3;
}

/* Dva sloupce s vlasovými předěly — mřížka, ne flex: hairline mezi buňkami se
   dá udělat okrajem jen tehdy, když buňky drží řádek i sloupec. */
.oe-bluebox__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0.85rem 0 0;
	padding: 0;
	list-style: none;
}

.oe-bluebox__list li {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
	padding: 0.4rem 0.25rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.75rem;
	line-height: 1.25;
	text-align: start;
}

.oe-bluebox__list li:nth-child(odd) {
	border-inline-end: 1px solid rgba(255, 255, 255, 0.18);
}

.oe-bluebox__list li:nth-child(n + 3) {
	border-block-start: 1px solid rgba(255, 255, 255, 0.18);
}

.oe-bluebox__list .oe-icon {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--oe-gold);
}

.oe-bluebox__cta {
	width: 100%;
	margin-top: 0.9rem;
	padding-inline: 0.75rem;
	font-size: 0.75rem;
}

/* ----------------------------------------------------------- section title */

.oe-sec-title {
	margin: 0 0 1.75rem;
	color: var(--oe-navy);
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 600;
	text-align: center;
}

/* The gold rule under every section heading — one component, not repeated by hand.
   Sits close under the baseline; more air than this and it reads as a separate
   element rather than part of the heading. */
.oe-sec-title::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin: 0.4rem auto 0;
	background: var(--oe-gold);
}

.oe-sec-title--light {
	color: #fff;
	text-align: left;
}

.oe-sec-title--light::after {
	margin-inline: 0;
}

/* --------------------------------------------------------------- band: B/C */

.oe-band {
	padding-block: clamp(3rem, 6vw, 4.5rem);
	background: var(--oe-surface);
}

/* Who We Work With and What We Do sit one below the other, per ¶28:
   "budou pod sebou (né vedle sebe jak je znázorněno na obrázku)".
   The render pairs them 62/36; the brief overrules it. */
.oe-band__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	width: 100%;
	max-width: var(--oe-max);
	margin-inline: auto;
	padding-inline: var(--oe-gutter);
}

/* No card — the panels sit directly on the band colour. */
.oe-panel {
	padding: clamp(1.75rem, 3vw, 2.5rem) 0;
	background: transparent;
}

/* ------------------------------------------------------ who we work with */

/* Eight columns with each item spanning two — same geometry as What We Do, so
   the shared PHP placement helper can centre a short trailing row here too. */
.oe-audience {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 1.75rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oe-audience__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-inline: 1.25rem;
	text-align: center;
}

/* Start and end as separate longhands: `grid-column: span 2` would put the
   span in the *start* slot, so an explicit start would silently drop it and
   leave the item one column wide. */
.oe-audience__item,
.oe-services li {
	grid-column-start: var(--oe-col-start, auto);
	grid-column-end: span 2;
}

/* Hairline between the groups, as in the render. `is-row-start` is set in PHP
   for the same reason as in What We Do: the list is editable, so which items
   begin a row is not something a static selector can know. */
.oe-audience__item + .oe-audience__item {
	border-inline-start: 1px solid rgba(8, 19, 42, 0.14);
}

.oe-audience__item.is-row-start {
	border-inline-start: 0;
}

.oe-audience__item .oe-icon {
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 0.9rem;
}

.oe-audience__name {
	margin: 0 0 0.5rem;
	color: var(--oe-navy);
	font-size: 1.3rem;
	font-weight: 600;
}

.oe-audience__text {
	margin: 0;
	color: var(--oe-muted);
	font-size: 1rem;
	line-height: 1.6;
}

.oe-more {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.9rem;
	color: var(--oe-gold-700);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
}

.oe-more .oe-icon {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	transition: transform 0.2s;
}

.oe-more:hover .oe-icon {
	transform: translateX(3px);
}

/* -------------------------------------------------------------- what we do */

/* Four across, so the seven services fall 4 + 3 as in the render.
   Eight columns rather than four: each item spans two, which lets the trailing
   row of three start half a column in and sit centred. A four-column grid can
   only ever left-align that row. */
.oe-services {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 2.25rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oe-services li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding-inline: 1rem;
	text-align: center;
}

/* Hairline between items, matching Who We Work With. */
.oe-services li + li {
	border-inline-start: 1px solid rgba(8, 19, 42, 0.14);
}

/* No divider at the start of a row. Which items those are depends on how many
   there is, so the class is set in PHP — the lists are client-editable and a
   :nth-child rule would be wrong the moment one is added or removed. The same
   goes for the inline grid-column-start that centres a short trailing row. */
.oe-services li.is-row-start {
	border-inline-start: 0;
}

.oe-services .oe-icon {
	width: 2.75rem;
	height: 2.75rem;
}

/* The label needs its own class: a bare `span` selector here also matches
   .oe-icon (which is a span) and, being one specificity step stronger, would
   repaint the gold icon in the label colour. */
.oe-services__label {
	color: var(--oe-navy);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.35;
}

.oe-panel__foot {
	margin-top: 1.75rem;
	text-align: center;
}

/* -------------------------------------------------------- why us + tours */

/* The navy panel bleeds to the left edge of the viewport, but its text has to
   line up with the rest of the page. So the column is "everything left of the
   container, plus a fixed text column" rather than a share of the viewport —
   a percentage split drifts further out of alignment the wider the screen. */
.oe-split {
	--oe-why-text: 400px;
	--oe-page-pad: calc(50vw - var(--oe-max) / 2);

	display: grid;
	/* page gap + left padding + text + right padding, so --oe-why-text really
	   is the width the text gets. */
	grid-template-columns: calc(var(--oe-page-pad) + var(--oe-gutter) + var(--oe-why-text) + var(--oe-gutter)) 1fr;
	gap: 0;
	align-items: stretch;
}

.oe-why {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(2.5rem, 5vw, 4rem);
	padding-inline: max(var(--oe-gutter), calc(var(--oe-page-pad) + var(--oe-gutter))) var(--oe-gutter);
	background: var(--oe-navy);
}

/* The column width now comes from the grid track, so the inner wrapper only
   has to fill it. */
.oe-why__inner {
	width: 100%;
}

.oe-why__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oe-why__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.55rem 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 1rem;
	line-height: 1.5;
}

.oe-why__list .oe-icon {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.22rem;
}

/* `isolation` is load-bearing: the media sits at z-index -2, and without a
   stacking context here it would paint behind the page background instead of
   behind the card. */
.oe-tours {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 26rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	overflow: hidden;
	isolation: isolate;
	background: var(--oe-navy-700);
}

.oe-tours__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* One backdrop per tour, stacked and cross-faded with the card. */
.oe-tours__bg {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.oe-tours__bg.is-active {
	opacity: 1;
}

.oe-tours__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oe-tours__card {
	position: relative;
	z-index: 1;
	max-width: 21rem;
	padding: 1.75rem;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 20px 50px rgba(8, 19, 42, 0.22);
}

.oe-tours__card .oe-icon {
	width: 2.5rem;
	height: 2.5rem;
}

.oe-tours__label {
	margin: 0.4rem 0 1rem;
	color: var(--oe-navy);
	font-size: 1.25rem;
	font-weight: 600;
	text-align: center;
}

.oe-tours__label::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin: 0.75rem auto 0;
	background: var(--oe-gold);
}

.oe-tours__head {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Slides share one grid cell so the card keeps the height of the tallest and
   does not jump as they cycle. */
.oe-tours__slides {
	display: grid;
}

.oe-tours__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}

.oe-tours__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.oe-tours__name {
	margin: 0 0 0.5rem;
	color: var(--oe-navy);
	font-size: 1.1rem;
	font-weight: 600;
}

.oe-tours__text {
	margin: 0;
	color: var(--oe-muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ footer */

/* The band above is navy too, so without a rule the two merge into one slab. */
.oe-footer {
	border-top: 1px solid var(--oe-line);
	background: var(--oe-navy);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.9rem;
}

/* Four columns since rev2 dropped the Services and Group Travel lists: brand ·
   Useful Links · Contact · Newsletter. Contact is the widest of the three text
   columns on purpose — the client asked for the address on whole lines
   ("rozšířit, aby adresa byla celá vedle sebe"), and "Loretánské náměstí 109/3"
   needs roughly 290px to stay on one. */
.oe-footer__inner {
	display: grid;
	grid-template-columns: 1.3fr 0.9fr 1.25fr 1.1fr;
	gap: 1.75rem;
	width: 100%;
	max-width: var(--oe-max);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 3.5rem) var(--oe-gutter);
}

.oe-footer__logo {
	width: auto;
	height: 66px;
}

.oe-footer__claim {
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	line-height: 1.6;
}

.oe-footer__copy {
	margin: 1.25rem 0 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.8rem;
}

.oe-footer__head {
	margin: 0 0 0.9rem;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.oe-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oe-footer__col li {
	padding: 0.22rem 0;
	font-size: 1rem;
	line-height: 1.5;
}

.oe-footer__col a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s;
}

.oe-footer__col a:hover {
	color: var(--oe-gold);
}

.oe-social {
	display: flex;
	gap: 0.6rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}

.oe-social a {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	transition: background-color 0.2s;
}

.oe-social a:hover {
	background: var(--oe-gold);
}

.oe-social .oe-icon {
	width: 1.3rem;
	height: 1.3rem;
	color: currentColor;
}

/* Stacks in the narrow footer column; the field and button sit side by side
   only when the column is wide enough to keep the input usable. */
/* Plain block: this used to hold a hand-built form and be a flex row, but the
   Fluent Forms wrapper inside it then shrank to its content instead of filling
   the column, leaving the field half width. */
.oe-news {
	margin-top: 0.9rem;
}

.oe-news input {
	flex: 1 1 8rem;
	min-width: 0;
	padding: 0.6rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	background: #fff;
	color: var(--oe-text);
	font: inherit;
	font-size: 0.75rem;
}

.oe-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	max-width: var(--oe-max);
	margin-inline: auto;
	padding: 1rem var(--oe-gutter);
	border-top: 1px solid var(--oe-line);
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.8rem;
}

.oe-footer__bar p {
	margin: 0;
}

.oe-footer__bar a {
	color: inherit;
	text-decoration: none;
}

.oe-footer__bar a:hover {
	color: var(--oe-gold);
}

/* ------------------------------------------------- forms (Fluent Forms) */

/* Fluent Forms ships its own look; these rules bring it onto the theme's
   type, colour and 2px corners. Scoped to .ff-el-* so nothing here leaks into
   the block editor's own inputs. */
.oe-form-scope .frm-fluent-form .ff-el-input--label label,
.ff-el-group .ff-el-input--label label {
	margin-bottom: 0.4rem;
	color: var(--oe-navy);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.ff-el-form-control {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid #d6d9de;
	border-radius: 2px;
	background: #fff;
	color: var(--oe-text);
	font-family: inherit;
	font-size: 0.875rem;
	line-height: 1.5;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ff-el-form-control:focus {
	border-color: var(--oe-gold);
	box-shadow: 0 0 0 3px rgba(175, 139, 62, 0.18);
	outline: none;
}

.ff-el-group {
	margin-bottom: 1rem;
}

/* The plugin's submit button, restyled as our gold CTA. */
.ff-btn-submit,
.frm-fluent-form .ff-btn-submit {
	padding: 0.9rem 1.75rem;
	border: 1px solid var(--oe-gold);
	border-radius: 2px;
	background: var(--oe-gold);
	color: #fff;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

.ff-btn-submit:hover,
.ff-btn-submit:focus-visible {
	background: var(--oe-gold-700);
	border-color: var(--oe-gold-700);
	color: #fff;
}

.ff-el-is-error .ff-el-form-control {
	border-color: #b32d2e;
}

.text-danger,
.error-text {
	color: #b32d2e;
	font-size: 0.75rem;
}

.ff-message-success {
	padding: 1rem 1.15rem;
	border-left: 3px solid var(--oe-gold);
	background: var(--oe-surface);
	color: var(--oe-navy);
	font-size: 0.875rem;
}

/* Newsletter sits in the dark footer, field and button on one line as in the
   render. Fluent Forms wraps each in its own block, so the form itself has to
   become the row; the submit group keeps its natural width, the field takes
   the rest. */
/* Field above the button. The render puts them side by side, but the footer
   column is ~308px: inline left the e-mail field at 158px, which is too narrow
   for an address. Stacked, the field gets the full column.
   (Fluent Forms wraps fields in a <fieldset>, so that — not the <form> — is
   what any row layout here would have to target.) */
.oe-news .frm-fluent-form > fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.oe-news .ff-el-group {
	margin-bottom: 0.5rem;
}

/* Field and button share the column width, so the pair reads as one control. */
.oe-news .ff-el-form-control,
.oe-news .ff-btn-submit {
	width: 100%;
}

.oe-news .ff-el-input--label {
	display: none;
}

.oe-news .ff-el-form-control {
	padding: 0.6rem 0.75rem;
	font-size: 0.75rem;
}

.oe-news .ff-btn-submit {
	padding: 0.65rem 1.15rem;
	font-size: 0.9rem;
}

.oe-news .ff-message-success {
	padding: 0.6rem 0.75rem;
	border-left-color: var(--oe-gold);
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.75rem;
}

/* ------------------------------------------------------- proposal modal */

.oe-modal {
	width: min(38rem, calc(100vw - 2rem));
	max-height: calc(100dvh - 3rem);
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: var(--oe-base);
	color: var(--oe-text);
	box-shadow: 0 30px 80px rgba(8, 19, 42, 0.35);
}

.oe-modal::backdrop {
	background: rgba(8, 19, 42, 0.62);
}

.oe-modal__inner {
	position: relative;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.oe-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	background: none;
	color: var(--oe-muted);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s;
}

.oe-modal__close:hover {
	color: var(--oe-navy);
}

.oe-modal__title {
	margin: 0 0 0.5rem;
	color: var(--oe-navy);
	font-size: 1.375rem;
	font-weight: 600;
}

.oe-modal__lead {
	margin: 0 0 1.5rem;
	color: var(--oe-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* ------------------------------------------------------------- page banner */

/* Same construction as .oe-hero — photo, navy scrim from the left, copy on
   top — but shorter, because this is a page header rather than a landing
   page. The client fills it from panels they already know: featured image,
   page title, excerpt. */
.oe-pagehero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(300px, 42vh, 420px);
	padding-block: calc(var(--oe-header-h) + 2.5rem) 2.5rem;
	overflow: hidden;
	isolation: isolate;
	background: var(--oe-navy);
}

/* No photograph — and six of the ten destinations have none worth showing
   (zadani §10.2). Rather than an empty strip, the band carries the Prague
   skyline from the logo at low opacity: it comes from the brand's own artwork,
   so it costs nothing and reads as a decision rather than an omission.
   Shorter than the cover variant, because there is nothing to look at. */
.oe-pagehero--plain {
	min-height: clamp(260px, 34vh, 340px);
	background: linear-gradient(135deg, var(--oe-navy) 0%, var(--oe-navy-700) 58%, #16294a 100%);
}

.oe-pagehero--plain::after {
	content: "";
	position: absolute;
	z-index: 0;
	right: -1.5%;
	bottom: -14%;
	width: min(30rem, 52%);
	aspect-ratio: 182 / 145;
	background: url(../img/oe-skyline.svg) right bottom / contain no-repeat;
	opacity: 0.08;
	pointer-events: none;
}

/* Photo too small to full-bleed but big enough to carry half the band: it
   fills the right side and dissolves into the navy through a gradient mask,
   so there is no seam between photograph and panel — the same read as the
   homepage hero, where the scrim swallows the left of the picture.
   Masking beats a gradient overlay here: the photo genuinely stops existing on
   the left, so the navy behind it is one flat colour rather than a wash with a
   faint image under it. */
.oe-pagehero--inset {
	background: linear-gradient(135deg, var(--oe-navy) 0%, var(--oe-navy-700) 62%, #16294a 100%);
}

.oe-pagehero--inset .oe-pagehero__media {
	inset: 0 0 0 auto;
	width: min(60%, 60rem);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
}

/* Only the top wash — the copy sits beside the photo, not on it, so the wide
   left-to-right scrim would just mute the picture for nothing. */
.oe-pagehero--inset .oe-pagehero__scrim {
	background: linear-gradient(180deg, rgba(8, 19, 42, 0.6) 0%, rgba(8, 19, 42, 0) 34%);
}

/* Keep the copy clear of the photograph. */
.oe-pagehero--inset .oe-pagehero__title,
.oe-pagehero--inset .oe-pagehero__lead {
	max-width: min(52ch, 46%);
}

/* Positive layering only — see the note on .oe-hero__media. */
.oe-pagehero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.oe-pagehero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

/* The same two gradients as .oe-hero__scrim: navy from the left so the copy
   keeps contrast over any photograph, plus a top wash so the transparent
   header stays legible. */
.oe-pagehero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(8, 19, 42, 0.94) 0%, rgba(8, 19, 42, 0.86) 42%, rgba(8, 19, 42, 0.58) 68%, rgba(8, 19, 42, 0.15) 100%),
		linear-gradient(180deg, rgba(8, 19, 42, 0.6) 0%, rgba(8, 19, 42, 0) 34%);
}

.oe-pagehero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--oe-max);
	margin-inline: auto;
	padding-inline: var(--oe-gutter);
}

.oe-pagehero__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.75rem, 2.8vw, 2.375rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* The gold hairline from .oe-sec-title, left-aligned — the motif that ties
   every heading on the site together. */
.oe-pagehero__title::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: 0.85rem;
	background: var(--oe-gold);
}

.oe-pagehero__lead {
	max-width: 52ch;
	margin: 1.1rem 0 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 1rem;
	line-height: 1.6;
}

/* --------------------------------------------------------- content sections */

/* Every section of a subpage is a locked group carrying .oe-section. Vertical
   rhythm belongs here rather than in the block gap, so a section can be added
   or removed in the migration without retuning anything.
   0,3,0 beats WordPress's 0,1,0 flow-layout gap. */
.oe-main .oe-section + .oe-section {
	margin-block-start: clamp(2.25rem, 4vw, 3.25rem);
}

/* The narrow content size applies to post-content's children, and would apply
   to post-content itself as well — leaving a wide section nothing to expand
   into. Lift the wrapper back to the grid width; its children stay narrow. */
.oe-main > .wp-block-post-content {
	max-width: var(--oe-max);
}

/* .oe-main narrows the content size to 32rem so long-form copy lands on a
   ~72-character measure (see the note above). Galleries and card grids need
   the full 1200px back. They take it with a class rather than with alignwide,
   because alignwide is a switch the client can flip in the editor and this is
   not meant to be adjustable.
   These sections use flow rather than constrained layout, so WordPress does
   not cap their children at 32rem either. */
.oe-main .oe-section--wide {
	max-width: var(--oe-max);
}

/* Opening paragraph of a service page or a hub. It keeps the same measure as
   the rest of the prose — a lead set narrower than the body it introduces
   reads as an accident — and earns its place with size and leading instead. */
.oe-main .oe-section--lead p {
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* A section that needs to read as a distinct panel rather than as more prose. */
.oe-main .oe-section--panel {
	padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem);
	background: var(--oe-surface);
}

/* ------------------------------------------------------------ bullet cards */

/* The brief writes every themed bullet as "Label: text", and oe_ul() already
   bolds the label. Adding one class turns that same list into a card grid —
   no new block, no new structure, and the client still edits it as a list. */
.oe-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Four bullets (Prague) balance as 2x2; three or five keep three columns. */
.oe-cards:has(> li:nth-child(4)):not(:has(> li:nth-child(5))) {
	grid-template-columns: repeat(2, 1fr);
}

.oe-cards > li {
	margin: 0;
	padding: 1.15rem 0 0;
	border-top: 2px solid var(--oe-gold);
	color: var(--oe-text);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.oe-cards > li > strong {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--oe-navy);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

/* ---------------------------------------------------------------- gallery */

/* core/gallery, relaid as a grid. The photo set is wildly inconsistent — a
   15212x6608 panorama, a 2870x3827 portrait and a 1000x1000 square all appear
   in the same brief — so every tile fixes its aspect ratio and crops with
   object-fit. Nothing can knock the layout out of shape.
   Doubled class: core's .wp-block-gallery.has-nested-images scores 0,2,0 and
   would otherwise win or tie on source order. */
/* rev2: „zmenšit fotky" na šesti stránkách. Galerie sedí v .oe-section--wide,
   tedy na celých 1200px, zatímco text vedle ní běží na 32rem — tři dlaždice po
   ~389px pak vedle 512px sloupce textu působí předimenzovaně. Užší mřížka je
   tady, ne v .oe-section--wide: tu potřebují karty (.oe-cards) v plné šířce. */
.oe-main .oe-gallery.oe-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 0;
	max-width: 840px;
	margin-inline: auto;
}

/* `width: auto` needs !important, and this is the one place in the file that
   does. Core sizes each tile with
   `.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)`
   — the `#individual-image` is a deliberate specificity hack that scores an id
   (1,3,1), so no chain of classes can outrank it. The grid has to own the
   width, or every tile stays at core's calc(50% - gap) and ignores its cell. */
.oe-main .oe-gallery.oe-gallery .wp-block-image {
	width: auto !important;
	max-width: none;
	margin: 0;
	aspect-ratio: 4 / 3;
}

.oe-main .oe-gallery.oe-gallery .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* One photo: a single band across the content width. */
.oe-main .oe-gallery[data-count="1"].oe-gallery {
	grid-template-columns: 1fr;
}

.oe-main .oe-gallery[data-count="1"].oe-gallery .wp-block-image {
	aspect-ratio: 16 / 9;
}

.oe-main .oe-gallery[data-count="2"].oe-gallery,
.oe-main .oe-gallery[data-count="4"].oe-gallery {
	grid-template-columns: 1fr 1fr;
}

/* Three photos side by side would each be a stamp. One large plus two stacked
   gives the set a subject instead. */
.oe-main .oe-gallery[data-count="3"].oe-gallery {
	grid-template-columns: 7fr 5fr;
	grid-template-rows: repeat(2, 1fr);
}

.oe-main .oe-gallery[data-count="3"].oe-gallery .wp-block-image:first-child {
	grid-row: span 2;
	aspect-ratio: auto;
}

/* ------------------------------------------------------- child page cards */

.oe-pgrid {
	padding-block: clamp(2.75rem, 5vw, 4rem);
	background: var(--oe-surface);
}

.oe-pgrid__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oe-pcard__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(8, 19, 42, 0.08);
	transition: transform 0.2s, box-shadow 0.2s;
}

.oe-pcard__link:hover,
.oe-pcard__link:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(8, 19, 42, 0.16);
}

.oe-pcard__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--oe-navy);
}

.oe-pcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Same answer as the plain banner: the six destinations with no usable photo
   get the brand silhouette rather than a hole in the grid. */
.oe-pcard--plain .oe-pcard__media {
	background: linear-gradient(135deg, var(--oe-navy) 0%, var(--oe-navy-700) 100%);
}

.oe-pcard--plain .oe-pcard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url(../img/oe-skyline.svg) center 60% / 58% no-repeat;
	opacity: 0.16;
}

.oe-pcard__body {
	display: block;
	padding: 1.2rem 1.35rem 1.5rem;
}

.oe-pcard__title {
	display: block;
	color: var(--oe-navy);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.oe-pcard__title::after {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin-top: 0.6rem;
	background: var(--oe-gold);
}

.oe-pcard__text {
	display: block;
	margin-top: 0.75rem;
	color: var(--oe-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* ------------------------------------------------------------------- team */

.oe-team {
	padding-block: clamp(2.75rem, 5vw, 4rem);
	background: var(--oe-surface);
}

.oe-team__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 2.25rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

/* auto-fit would stretch two or three people across the whole 1200px and leave
   them marooned; cap the track count by capping the list instead. */
.oe-team__list:has(> li:nth-child(-n + 3):last-child) {
	max-width: 48rem;
	margin-inline: auto;
}

/* Dodané portréty jsou na výšku (~205×380) a mají vlastní kreslený rámeček.
   Kolečko z nich čtvercovým výřezem vždycky něco uřízlo — buď temeno, nebo
   ramena, a rámeček zmizel celý. Karta v poměru originálu nechá obrázek tak,
   jak byl nakreslený, a nemá co oříznout.
   8/15 = 0.533; dodané portréty jdou od 0.530 do 0.565, takže se ořízne
   nanejvýš pár procent na výšku a všechny čtyři sednou na stejnou velikost. */
.oe-team__photo {
	display: block;
	width: min(11rem, 100%);
	margin: 0 auto 1.1rem;
	aspect-ratio: 8 / 15;
	overflow: hidden;
	border-radius: 4px;
	background: var(--oe-navy);
}

.oe-team__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No photograph: a monogram on navy, the same answer the banner and the card
   grid give. Half the team having a picture and half a grey box would look
   broken; monograms throughout look like a decision. */
.oe-team__photo--plain {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--oe-navy) 0%, var(--oe-navy-700) 100%);
}

.oe-team__initials {
	color: var(--oe-gold);
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
}

.oe-team__name {
	margin: 0;
	color: var(--oe-navy);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.oe-team__role {
	margin: 0.3rem 0 0;
	color: var(--oe-gold-700);
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.oe-team__contact {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0.7rem 0 0;
	font-size: 0.875rem;
}

.oe-team__contact a {
	color: var(--oe-muted);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.oe-team__contact a:hover,
.oe-team__contact a:focus-visible {
	color: var(--oe-navy);
}

/* --------------------------------------------------------------- partners */

.oe-partners {
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
	background: var(--oe-base);
}

/* Surface above (the team) and white here would meet as an invisible seam;
   the hairline says the two sections are separate on purpose. */
.oe-team + .oe-partners {
	border-top: 1px solid rgba(8, 19, 42, 0.08);
}

/* Mřížka, ne řada. Ve flexu se šest log zalomilo na pět a jedno osamocené
   pod nimi; pevný počet sloupců drží řady vyrovnané při jakémkoli počtu.
   Stejně velká pole navíc srovnají to, co samotné soubory nesrovnají —
   loga jdou od 392×157 po 2412×583 a čtvercové AviaCity vedle širokého
   nápisu jinak vypadá jako omylem zmenšené. */
.oe-partners__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 3vw, 2.25rem);
	width: 100%;
	max-width: 54rem;
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

/* Pole mřížky zůstávají bez pozadí. Dodaná loga mají bílý podklad zapečený
   v souboru, takže na jakémkoli barevném poli vystoupí jako bílý obdélník —
   na bílé sekci naopak splynou a zůstane jen to, co má být vidět. Mřížku
   pak drží pohromadě zarovnání, ne rámečky. */
.oe-partners__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5rem;
	padding: 0.5rem 1rem;
}

.oe-partners__item img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	/* Čtvercové značky (AviaCity) vypadají při stejné výšce jako široké
	   nápisy opticky menší — 4rem jim trochu přidá, aniž by wordmarky
	   přerostly. */
	max-height: 4rem;
	object-fit: contain;
	/* Barevné značky vedle sebe si konkurují navzájem i se zlatou. Ztlumené
	   jsou v klidu, v barvě naskočí při najetí — obvyklá zdvořilost vůči
	   partnerovi, aniž by pět palet rozbilo stránku. */
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.2s, opacity 0.2s;
}

.oe-partners__item a:hover img,
.oe-partners__item a:focus-visible img,
.oe-partners__item:hover img {
	filter: none;
	opacity: 1;
}

/* --------------------------------------------------------- sibling strip */

.oe-siblings {
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
	background: var(--oe-surface);
}

.oe-siblings__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oe-siblings__list a {
	display: block;
	padding: 0.55rem 1.1rem;
	background: #fff;
	border: 1px solid rgba(8, 19, 42, 0.12);
	color: var(--oe-navy);
	font-size: 0.875rem;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}

.oe-siblings__list a:hover,
.oe-siblings__list a:focus-visible {
	border-color: var(--oe-gold);
	color: var(--oe-gold-700);
}

/* ---------------------------------------------------------------- CTA band */

.oe-ctaband {
	padding-block: clamp(2.75rem, 5vw, 4rem);
	background: var(--oe-navy);
}

.oe-ctaband__inner {
	text-align: center;
}

.oe-ctaband__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 600;
}

.oe-ctaband__title::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin: 0.7rem auto 0;
	background: var(--oe-gold);
}

.oe-ctaband__lead {
	max-width: 48ch;
	margin: 0.9rem auto 1.75rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: 1rem;
	line-height: 1.6;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
	.oe-split {
		grid-template-columns: 1fr;
	}

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

	.oe-why__inner {
		max-width: none;
	}

	.oe-footer__inner {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 860px) {
	.oe-burger {
		display: flex;
	}

	.oe-nav {
		position: fixed;
		inset: var(--oe-header-h) 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-height: calc(100dvh - var(--oe-header-h));
		padding: 0.5rem 0 1.5rem;
		overflow-y: auto;
		background: var(--oe-navy);
		border-top: 1px solid var(--oe-line);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
	}

	.oe-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.oe-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.oe-nav__item {
		border-bottom: 1px solid var(--oe-line);
	}

	.oe-nav__item > a {
		padding: 0.95rem var(--oe-gutter);
	}

	/* On touch the chevron is not a hover target — use an explicit button. */
	.oe-nav__item.has-children > a::after {
		display: none;
	}

	.oe-nav__toggle {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		width: 3.25rem;
		height: 3.1rem;
		background: none;
		border: 0;
		cursor: pointer;
	}

	.oe-nav__toggle::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0.45rem;
		height: 0.45rem;
		margin: -0.35rem 0 0 -0.25rem;
		border-right: 1.5px solid #fff;
		border-bottom: 1.5px solid #fff;
		transform: rotate(45deg);
		transition: transform 0.2s;
	}

	.oe-nav__toggle[aria-expanded="true"]::after {
		transform: rotate(-135deg);
	}

	.oe-nav__sub {
		position: static;
		display: none;
		min-width: 0;
		padding: 0 0 0.5rem;
		background: none;
		border-top: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.oe-nav__item.is-open > .oe-nav__sub {
		display: block;
	}

	.oe-nav__sub a {
		padding: 0.5rem var(--oe-gutter) 0.5rem calc(var(--oe-gutter) + 1rem);
		color: rgba(255, 255, 255, 0.75);
	}

	.oe-nav__sub a:hover {
		background: rgba(255, 255, 255, 0.06);
		color: var(--oe-gold);
	}

	.oe-nav__actions {
		padding: 1.25rem var(--oe-gutter) 0;
	}

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

	/* Reset the eight-column spans and the centring offset — neither applies
	   once the grid is two across. */
	.oe-audience__item {
		grid-column: auto;
	}

	/* Two columns: the divider belongs between the pair, not at the start of
	   each row, where "every item but the first" would put it. */
	.oe-audience__item + .oe-audience__item {
		border-inline-start: 0;
	}

	.oe-audience__item:nth-child(2n) {
		border-inline-start: 1px solid rgba(8, 19, 42, 0.14);
	}

	.oe-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 860px) {
	/* Na úzkém rozvržení už v hero nezbývá roh — karta se zařadí do toku pod
	   tlačítka, na plnou šířku sloupce (nejvýš 22rem, ať na tabletu nezplihne). */
	.oe-bluebox {
		position: static;
		width: auto;
		max-width: 22rem;
		margin: 2.25rem 0 0;
	}

	/* Wrapped into a grid, the dividers stop separating and start decorating. */
	.oe-hero__trust {
		gap: 0.9rem 1.25rem;
	}

	.oe-hero__trust li {
		flex: 1 1 45%;
		max-width: 100%;
		padding-inline-end: 0;
		margin-inline-end: 0;
		border-inline-end: 0;
	}
}

/* One column for everything composed: below this a three-up gallery tile is
   ~200px wide and a card holds four words per line. */
@media (max-width: 720px) {
	.oe-pagehero {
		min-height: clamp(240px, 38vh, 320px);
		padding-block: calc(var(--oe-header-h) + 1.75rem) 2rem;
	}

	/* The scrim's left-to-right wash has nothing to protect on a narrow
	   screen — the copy spans the whole width, so darken the whole frame. */
	.oe-pagehero__scrim,
	.oe-pagehero--inset .oe-pagehero__scrim {
		background:
			linear-gradient(180deg, rgba(8, 19, 42, 0.7) 0%, rgba(8, 19, 42, 0.5) 45%, rgba(8, 19, 42, 0.85) 100%);
	}

	/* There is no room for a half-and-half split at this width. The photo takes
	   the whole band and the scrim above carries the contrast, which is exactly
	   the cover variant — and a 1000px file is ample for a 390px screen. */
	.oe-pagehero--inset .oe-pagehero__media {
		inset: 0;
		width: 100%;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.oe-pagehero--inset .oe-pagehero__title,
	.oe-pagehero--inset .oe-pagehero__lead {
		max-width: none;
	}

	.oe-cards,
	.oe-pgrid__list {
		grid-template-columns: 1fr;
	}

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

	.oe-cards:has(> li:nth-child(4)):not(:has(> li:nth-child(5))) {
		grid-template-columns: 1fr;
	}

	/* Every count collapses to one column at a single ratio; the asymmetric
	   three-photo grid has no room to be asymmetric.
	   Each count is listed rather than relying on the bare .oe-gallery rule:
	   the count-specific selectors above carry an attribute and outrank it. */
	.oe-main .oe-gallery.oe-gallery,
	.oe-main .oe-gallery[data-count].oe-gallery {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.oe-main .oe-gallery.oe-gallery .wp-block-image,
	.oe-main .oe-gallery[data-count].oe-gallery .wp-block-image {
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 560px) {
	/* Two across; the eight-column span trick and its centred trailing row
	   only make sense while four fit on a line. */
	.oe-services {
		grid-template-columns: repeat(2, 1fr);
	}

	.oe-services li {
		grid-column: auto;
	}

	.oe-services li + li {
		border-inline-start: 0;
	}

	.oe-services li:nth-child(2n) {
		border-inline-start: 1px solid rgba(8, 19, 42, 0.14);
	}

	.oe-footer__inner {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}