/* ==========================================================================
   Eureko theme — main stylesheet
   Design tokens are defined in theme.json and exposed as
   var(--wp--preset--*) and var(--wp--custom--*).
   ========================================================================== */

:root {
	/* Colors */
	--eureko-primary:        var(--wp--preset--color--primary);
	--eureko-primary-hover:  var(--wp--preset--color--primary-hover);
	--eureko-cream:          var(--wp--preset--color--cream);
	--eureko-dark:           var(--wp--preset--color--dark);
	--eureko-text:           var(--wp--preset--color--text);
	--eureko-muted:          var(--wp--preset--color--muted);
	--eureko-border:         var(--wp--preset--color--border);
	--eureko-white:          var(--wp--preset--color--white);
	--eureko-bg:             var(--wp--preset--color--background);

	/* Typography */
	--eureko-font-heading:   var(--wp--preset--font-family--heading);
	--eureko-font-body:      var(--wp--preset--font-family--body);
	--eureko-fs-sm:          var(--wp--preset--font-size--sm);
	--eureko-fs-base:        var(--wp--preset--font-size--base);
	--eureko-fs-lg:          var(--wp--preset--font-size--lg);
	--eureko-fs-xl:          var(--wp--preset--font-size--xl);
	--eureko-fs-2xl:         var(--wp--preset--font-size--2xl);
	--eureko-fs-3xl:         var(--wp--preset--font-size--3xl);
	--eureko-fs-4xl:         var(--wp--preset--font-size--4xl);
	--eureko-fs-5xl:         var(--wp--preset--font-size--5xl);
	--eureko-lh-base:        1.6;
	--eureko-lh-tight:       1.2;   /* Figma line-height for every heading */

	/* Spacing */
	--eureko-space-xs:       var(--wp--preset--spacing--xs);
	--eureko-space-s:        var(--wp--preset--spacing--s);
	--eureko-space-m:        var(--wp--preset--spacing--m);
	--eureko-space-l:        var(--wp--preset--spacing--l);
	--eureko-space-xl:       var(--wp--preset--spacing--xl);
	--eureko-space-2xl:      var(--wp--preset--spacing--2xl);
	--eureko-space-3xl:      var(--wp--preset--spacing--3xl);

	/* Layout */
	--eureko-container:      var(--wp--custom--eureko--container);
	--eureko-header-h:       var(--wp--custom--eureko--header-height);
	--eureko-announcement-h: var(--wp--custom--eureko--announcement-height);
	--eureko-gutter:         var(--wp--preset--spacing--m);

	/* Radius */
	--eureko-radius-s:       var(--wp--custom--eureko--radius--s);
	--eureko-radius-m:       var(--wp--custom--eureko--radius--m);
	--eureko-radius-l:       var(--wp--custom--eureko--radius--l);
	--eureko-radius-xl:      var(--wp--custom--eureko--radius--xl);
	--eureko-radius-pill:    var(--wp--custom--eureko--radius--pill);

	/* Shadows & motion */
	--eureko-shadow-sm:      var(--wp--custom--eureko--shadow--sm);
	--eureko-shadow-md:      var(--wp--custom--eureko--shadow--md);
	--eureko-shadow-lg:      var(--wp--custom--eureko--shadow--lg);
	--eureko-transition:     var(--wp--custom--eureko--transition);

	/* Floating insurance strip — gap above/below (desktop). Single source of
	   truth: change here and homepage + every inner page update together. */
	--eureko-strip-above:    7rem;
	--eureko-strip-below:    8rem;
}

@media (min-width: 768px) {
	:root {
		--eureko-gutter: var(--wp--preset--spacing--xl);
	}
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--eureko-header-h);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--eureko-font-body);
	font-size: var(--eureko-fs-base);
	line-height: var(--eureko-lh-base);
	color: var(--eureko-text);
	background: var(--eureko-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

/*
 * Global heading layer — ONE source of truth for heading family / weight /
 * line-height / colour. Figma's whole type scale is Catamaran **Medium (500)**;
 * components had drifted to 600–700 individually, which is why headings read
 * heavy and small. Components must now only ever set `font-size`.
 *
 * The class-substring selectors are here on purpose: plenty of headings are
 * rendered as <p>/<span>/<div> (card titles, drawer titles), so tag selectors
 * alone would miss them. Specificity stays at (0,1,0) so any component rule
 * still wins when a section genuinely needs something different.
 */
h1, h2, h3, h4, h5, h6,
[class*="__title"],
[class*="__headline"],
[class*="__heading"],
[class*="__name"] {
	font-family: var(--eureko-font-heading);
	font-weight: 500;
	line-height: var(--eureko-lh-tight);
	color: var(--eureko-text);
}
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--eureko-space-m);
}

/*
 * Figma type scale. Use these tokens for section headings rather than fresh
 * clamp() values, so the whole site moves together.
 */
:root {
	--eureko-fs-display-xl: clamp(2.25rem, 5vw, 3.5rem);   /* 56px */
	--eureko-fs-display-l:  clamp(2rem, 4vw, 3rem);        /* 48px */
	--eureko-fs-display-m:  clamp(1.625rem, 3vw, 2.5rem);  /* 40px */
	--eureko-fs-h4:         1.5rem;                        /* 24px */
	--eureko-fs-h5:         1.375rem;                      /* 22px */
}

p {
	margin: 0 0 var(--eureko-space-m);
}

a {
	color: var(--eureko-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--eureko-transition);
}

a:hover,
a:focus {
	color: var(--eureko-primary-hover);
}

/* ==========================================================================
   Accessibility utilities
   ========================================================================== */

/* WordPress core class — also used by .screen-reader-text in markup */
.screen-reader-text,
.eureko-skip-link {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	clip-path: inset(50%);
	word-wrap: normal !important;
}

.eureko-skip-link:focus {
	position: fixed !important;
	top: var(--eureko-space-s);
	left: var(--eureko-space-s);
	width: auto;
	height: auto;
	padding: var(--eureko-space-s) var(--eureko-space-m);
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: var(--eureko-primary);
	color: var(--eureko-bg);
	text-decoration: none;
	border-radius: var(--eureko-radius-m);
	z-index: 9999;
}

:focus-visible {
	outline: 2px solid var(--eureko-primary);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.eureko-container {
	width: 100%;
	max-width: 99rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
}
@media (min-width: 768px) {
	.eureko-container {
		padding-inline: 3rem;
	}
}

.eureko-main {
	display: block;
	min-height: 50vh;
}

.eureko-main:focus {
	outline: none;
}

/* ==========================================================================
   Header / footer placeholders (will be styled in next iteration)
   ========================================================================== */

.eureko-header {
	border-bottom: 1px solid var(--eureko-border);
}

.eureko-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--eureko-header-h);
	gap: var(--eureko-space-m);
}

.eureko-footer {
	margin-top: var(--eureko-space-3xl);
	padding-block: var(--eureko-space-xl);
	border-top: 1px solid var(--eureko-border);
	color: var(--eureko-text-muted);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Announcement bar
   ========================================================================== */

.eureko-announcement {
	background: var(--eureko-dark);
	color: var(--eureko-white);
	text-align: center;
	padding: 0.625rem 0;
	font-size: var(--eureko-fs-sm);
}
.eureko-announcement__viewport {
	overflow: hidden;
}
.eureko-announcement__track {
	display: flex;
	width: max-content;
	animation: eureko-announcement-scroll 40s linear infinite;
}
.eureko-announcement__viewport:hover .eureko-announcement__track,
.eureko-announcement__viewport:focus-within .eureko-announcement__track {
	animation-play-state: paused;
}
.eureko-announcement__text {
	margin: 0;
	padding-right: 4rem;
	line-height: 1.4;
	white-space: nowrap;
}

@keyframes eureko-announcement-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.eureko-announcement__track {
		animation: none;
		width: 100%;
		justify-content: center;
	}
	.eureko-announcement__text {
		padding-right: 0;
		white-space: normal;
	}
	.eureko-announcement__text[aria-hidden="true"] {
		display: none;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

.eureko-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background var(--eureko-transition), border-color var(--eureko-transition), box-shadow var(--eureko-transition);
}
.eureko-header--scrolled {
	background: var(--eureko-white);
	border-bottom-color: var(--eureko-border);
	box-shadow: var(--eureko-shadow-md);
}
.eureko-header__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	height: 4.5rem;
	padding-block: 0;
}
.eureko-header__logo {
	flex-shrink: 0;
}
.eureko-header__logo img {
	display: block;
	height: 3.875rem;
	width: auto;
}
.eureko-header__logo a.eureko-header__brand {
	font-family: var(--eureko-font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--eureko-text);
	text-decoration: none;
}

/* "Nabídka služeb" services button — green outline pill */
.eureko-header__services-btn {
	display: none;
	align-items: center;
	gap: 0.75rem;
	padding: 1.125rem 1.5rem;
	background: transparent;
	border: 1px solid var(--eureko-primary);
	border-radius: var(--eureko-radius-pill);
	color: #1a1a1a;
	font-family: var(--eureko-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--eureko-transition);
	flex-shrink: 0;
}
.eureko-header__services-btn:hover {
	background: rgba(99, 157, 33, 0.07);
}
.eureko-header__services-btn .material-symbols-outlined {
	font-size: 1.0625rem;
	line-height: 1;
}

/* Nav */
.eureko-header__nav {
	display: none;
	flex: 1;
}
.eureko-header__nav .eureko-nav__list,
.eureko-nav--primary .eureko-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 2.375rem;
}
.eureko-header__nav .eureko-nav__list > li > a {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-family: var(--eureko-font-heading);
	font-weight: 600;
	font-size: 1rem;
	color: var(--eureko-muted);
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
	transition: color var(--eureko-transition);
}
/*
 * Client, 2026-08-24: „v horní liště po najetí kurzoru prosím o zbarvení do
 * zelena" — Ceník / Blog / E-shop / Kontakt / Recenze. Hover is now the brand
 * green; the CURRENT page keeps the dark text so „where am I" and „what am I
 * pointing at" stay two different signals.
 */
.eureko-header__nav .eureko-nav__list > li > a:hover,
.eureko-header__nav .eureko-nav__list > li > a:focus-visible {
	color: var(--eureko-primary);
}
.eureko-header__nav .eureko-nav__list > li.current-menu-item > a {
	color: var(--eureko-text);
}
/* Dropdown */
.eureko-header__nav .eureko-nav__list li {
	position: relative;
}
.eureko-header__nav .eureko-nav__list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 0.75rem;
	background: var(--eureko-white);
	border: 1px solid var(--eureko-border);
	border-radius: var(--eureko-radius-m);
	box-shadow: var(--eureko-shadow-md);
	min-width: 14rem;
	padding: 0.5rem;
	list-style: none;
	z-index: 10;
}
/* Transparent bridge over the gap so the dropdown stays hoverable */
.eureko-header__nav .eureko-nav__list .sub-menu::before {
	content: "";
	position: absolute;
	top: -0.75rem;
	left: 0;
	right: 0;
	height: 0.75rem;
}
.eureko-header__nav .eureko-nav__list li:hover > .sub-menu,
.eureko-header__nav .eureko-nav__list li:focus-within > .sub-menu {
	display: block;
}
/* Dropdown chevron on parent items */
.eureko-header__nav .eureko-nav__list .menu-item-has-children > a::after {
	content: "expand_more";
	font-family: "Material Symbols Outlined";
	font-size: 1.125rem;
	line-height: 1;
	margin-left: 0.25rem;
	vertical-align: middle;
	transition: transform var(--eureko-transition);
}
.eureko-header__nav .eureko-nav__list .menu-item-has-children:hover > a::after,
.eureko-header__nav .eureko-nav__list .menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
}
.eureko-header__nav .eureko-nav__list .sub-menu li a {
	display: block;
	padding: 0.5rem 1rem;
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-text);
	border-radius: var(--eureko-radius-s);
	transition: background var(--eureko-transition);
}
.eureko-header__nav .eureko-nav__list .sub-menu li a:hover {
	background: var(--eureko-cream);
}

/* Right block */
.eureko-header__right {
	display: none;
	align-items: center;
	gap: 3rem;
	flex-shrink: 0;
	margin-left: auto;
}

/* Phone block */
.eureko-header__phone-block {
	display: flex;
	align-items: center;
	gap: 1.0625rem;
}
.eureko-header__phone-avatar {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--eureko-cream);
	flex-shrink: 0;
	overflow: hidden;
}
.eureko-header__phone-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eureko-header__phone-info {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}
.eureko-header__phone-label {
	font-size: 0.875rem;
	font-family: var(--eureko-font-body);
	color: var(--eureko-muted);
	line-height: 1.2;
}
.eureko-header__phone-number {
	display: flex;
	align-items: center;
	gap: 0.8125rem;
	font-family: var(--eureko-font-body);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--eureko-muted);
	text-decoration: none;
	line-height: 1.2;
}
.eureko-header__phone-number:hover {
	color: var(--eureko-text);
}
.eureko-header__phone-dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--eureko-primary);
	flex-shrink: 0;
}
.eureko-header__phone-hours {
	font-size: 0.875rem;
	color: var(--eureko-muted);
	line-height: 1.2;
}

/* Search + CTA group */
.eureko-header__actions {
	display: flex;
	align-items: center;
	gap: 1.4375rem;
}
.eureko-header__search {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--eureko-white);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1a1a1a;
	cursor: pointer;
	font-family: 'Material Symbols Outlined';
	font-size: 1.5rem;
	font-style: normal;
	line-height: 1;
	text-decoration: none;
	transition: background var(--eureko-transition);
}
.eureko-header__search:hover {
	background: var(--eureko-cream);
}
.eureko-header__search .eureko-icon {
	display: none;
}
.eureko-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.125rem 1.5rem;
	background: var(--eureko-primary);
	border: 1px solid var(--eureko-primary);
	border-radius: var(--eureko-radius-pill);
	color: #ffffff;
	font-family: var(--eureko-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--eureko-transition), border-color var(--eureko-transition);
}
.eureko-header__cta:hover {
	background: var(--eureko-primary-hover);
	border-color: var(--eureko-primary-hover);
	color: #ffffff;
}

/* Hamburger */
.eureko-header__hamburger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--eureko-text);
	padding: 0;
	margin-left: auto;
}
.eureko-header__hamburger .eureko-icon--close {
	display: none;
}
.eureko-header__hamburger[aria-expanded="true"] .eureko-icon:not(.eureko-icon--close) {
	display: none;
}
.eureko-header__hamburger[aria-expanded="true"] .eureko-icon--close {
	display: block;
}

@media (min-width: 768px) {
	.eureko-header__inner {
		height: 5.5rem;
	}
	/* 🔴 The desktop header row does NOT fit at 768–1023px. Logo (~200) + five nav
	   items (~450) + search (56) + the "Objednat se" CTA (~180) measures ~900px, so
	   the CTA overhung the viewport and gave the WHOLE PAGE a horizontal scrollbar.
	   The hamburger therefore stays in charge through the entire tablet range and the
	   desktop nav switches on at 1024px instead. Do not lower this back to 768. */
}

@media (min-width: 1024px) {
	.eureko-header__nav {
		display: flex;
	}
	.eureko-header__right {
		display: flex;
	}
	.eureko-header__hamburger {
		display: none;
	}
	.eureko-header__nav .eureko-nav__list {
		gap: 1.25rem;
	}
	/* ⚠️ Must be explicit: the BASE rule for the phone block is `display: flex`
	   (unlike the services pill, whose base is `none`). It was only ever hidden
	   because its parent `__right` is `display: none` below 1024 — the moment
	   `__right` turns on, the phone block comes with it. */
	.eureko-header__phone-block {
		display: none;
	}
	.eureko-header__inner {
		height: 6rem;
	}
}

/*
 * 🔴 The header row is built in THREE stages because the full desktop row needs
 * ~1478px and simply does not fit below that — it was overflowing and giving the
 * page a horizontal scrollbar on every iPad Pro width (1024 / 1194 / 1366) and on
 * ordinary 1440px laptops.
 *
 * Measured at 1366 (content box 1351): logo 188 + pill 219 + nav 357 + right 555
 * (phone 275 + search 48 + CTA 161) + 4 × 32 gaps = 1463. Over by 112.
 *
 *   1024–1279  logo + nav + search + CTA          (content ~841)
 *   1280–1479  + the "Nabídka služeb" pill        (content ~1092)
 *   ≥1480      + the phone block — the full row   (content ~1463)
 *
 * Nothing above 1480px changed. Do not move the phone block back down.
 */
@media (min-width: 1280px) {
	.eureko-header__services-btn {
		display: inline-flex;
	}
	.eureko-header__nav .eureko-nav__list {
		gap: 1.875rem;
	}
}

@media (min-width: 1500px) {
	.eureko-header__phone-block {
		display: flex;
	}
}

/* ==========================================================================
   Mobile menu
   ========================================================================== */

.eureko-mobile-menu {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(20rem, 92vw);
	background: var(--eureko-white);
	z-index: 200;
	transform: translateX(100%);
	transition: transform 300ms ease;
	overflow-y: auto;
	box-shadow: -12px 0 40px rgba(61, 72, 86, 0.12);
}
.eureko-mobile-menu--open {
	transform: translateX(0);
}
.eureko-mobile-menu__inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 1.25rem 1.5rem 2rem;
}
/* Top bar: logo + close */
.eureko-mobile-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--eureko-border);
}
.eureko-mobile-menu__top .eureko-header__logo img,
.eureko-mobile-menu__top .eureko-header__brand img {
	max-height: 34px;
	width: auto;
}
.eureko-mobile-menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border: 1px solid var(--eureko-border);
	border-radius: 50%;
	background: var(--eureko-white);
	color: var(--eureko-text);
	cursor: pointer;
	transition: background var(--eureko-transition), color var(--eureko-transition);
}
.eureko-mobile-menu__close:hover {
	background: var(--eureko-cream);
	color: var(--eureko-primary);
}
.eureko-mobile-menu__close .material-symbols-outlined {
	font-size: 1.5rem;
	line-height: 1;
}
/* Nav links */
.eureko-mobile-menu .eureko-nav--primary {
	flex: 1 0 auto;
	padding-block: 0.5rem;
}
.eureko-mobile-menu .eureko-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch; /* override desktop .eureko-nav--primary rule leaking align-items:center */
	gap: 0;                /* override desktop 2.375rem gap */
	text-align: left;
}
.eureko-mobile-menu .eureko-nav__list > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.eureko-mobile-menu .eureko-nav__list > li + li {
	border-top: 1px solid var(--eureko-border);
}
.eureko-mobile-menu .eureko-nav__list > li > a {
	flex: 1 1 auto;
	min-width: 0;
}
/* Accordion toggle injected next to parent links */
.eureko-mobile-menu__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--eureko-muted);
	cursor: pointer;
}
.eureko-mobile-menu__toggle .material-symbols-outlined {
	font-size: 1.6rem;
	transition: transform 250ms ease;
}
.eureko-mobile-menu .menu-item-has-children.is-open > .eureko-mobile-menu__toggle {
	color: var(--eureko-primary);
}
.eureko-mobile-menu .menu-item-has-children.is-open > .eureko-mobile-menu__toggle .material-symbols-outlined {
	transform: rotate(180deg);
}
.eureko-mobile-menu .eureko-nav__list a,
.eureko-mobile-menu .eureko-nav__list a:link,
.eureko-mobile-menu .eureko-nav__list a:visited {
	display: block;
	padding: 0.9rem 0.25rem;
	color: var(--eureko-text);
	text-decoration: none;
	font-family: var(--eureko-font-heading);
	font-weight: 600;
	font-size: var(--eureko-fs-lg);
	transition: color var(--eureko-transition);
}
.eureko-mobile-menu .eureko-nav__list a:hover,
.eureko-mobile-menu .eureko-nav__list .current-menu-item > a {
	color: var(--eureko-primary);
}
.eureko-mobile-menu .eureko-nav__list .sub-menu {
	list-style: none;
	flex-basis: 100%;
	padding: 0 0 0 0.9rem;
	margin: 0;
	border-left: 2px solid var(--eureko-border);
	max-height: 0;
	overflow: hidden;
	transition: max-height 300ms ease, padding-bottom 300ms ease;
}
.eureko-mobile-menu .menu-item-has-children.is-open > .sub-menu {
	max-height: 40rem;
	padding-bottom: 0.6rem;
}
.eureko-mobile-menu .eureko-nav__list .sub-menu a,
.eureko-mobile-menu .eureko-nav__list .sub-menu a:link,
.eureko-mobile-menu .eureko-nav__list .sub-menu a:visited {
	font-size: var(--eureko-fs-base);
	font-weight: 500;
	padding: 0.55rem 0.25rem;
	color: var(--eureko-muted);
}
.eureko-mobile-menu .eureko-nav__list .sub-menu a:hover,
.eureko-mobile-menu .eureko-nav__list .sub-menu .current-menu-item > a {
	color: var(--eureko-primary);
}
/* Footer: phone + CTA */
.eureko-mobile-menu__footer {
	margin-top: auto;
	padding-top: 1.25rem;
	border-top: 1px solid var(--eureko-border);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.eureko-mobile-menu__phone {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--eureko-text);
	font-family: var(--eureko-font-heading);
	font-weight: 700;
	text-decoration: none;
	font-size: var(--eureko-fs-lg);
}
.eureko-mobile-menu__phone .eureko-icon {
	color: var(--eureko-primary);
}
.eureko-mobile-menu__social {
	display: flex;
	gap: 0.75rem;
}
.eureko-mobile-menu__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	border: 1px solid var(--eureko-border);
	border-radius: 50%;
	color: var(--eureko-text);
	transition: background var(--eureko-transition), color var(--eureko-transition), border-color var(--eureko-transition);
}
.eureko-mobile-menu__social-link:hover {
	background: var(--eureko-primary);
	border-color: var(--eureko-primary);
	color: var(--eureko-white);
}
.eureko-mobile-menu__social-link .eureko-icon {
	width: 1.15rem;
	height: 1.15rem;
}
.eureko-mobile-menu__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
}
.eureko-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 150;
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms ease;
}
.eureko-overlay--visible {
	opacity: 1;
	pointer-events: auto;
}

/*
 * 🔴 1024, NOT 768. The hamburger is in charge across the WHOLE tablet range —
 * the desktop nav and `__right` only switch on at 1024 (see the note at l. 632,
 * where lowering it caused a page-wide horizontal scrollbar). Hiding the drawer
 * from 768 meant that at 768–1023 the burger was visible and clickable, the JS
 * ran and set `aria-expanded="true"`, but the panel it opens was `display: none`
 * — the menu was simply unreachable on every tablet.
 * ⚠️ Keep this breakpoint in sync with the `.eureko-header__hamburger` hide
 * rule at l. 646; whenever one moves, the other must move with it.
 */
@media (min-width: 1024px) {
	.eureko-mobile-menu {
		display: none;
	}
	.eureko-overlay {
		display: none;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.eureko-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	font-family: var(--eureko-font-body);
	font-size: var(--eureko-fs-base);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--eureko-radius-m);
	cursor: pointer;
	transition: background var(--eureko-transition), color var(--eureko-transition), border-color var(--eureko-transition), box-shadow var(--eureko-transition);
	white-space: nowrap;
}
.eureko-btn:focus-visible {
	outline: 3px solid var(--eureko-primary);
	outline-offset: 2px;
}
.eureko-btn--pill {
	border-radius: var(--eureko-radius-pill);
}
.eureko-btn--sm {
	padding: 0.5rem 1.25rem;
	font-size: var(--eureko-fs-sm);
}
.eureko-btn--lg {
	padding: 1rem 2rem;
	font-size: var(--eureko-fs-lg);
}
.eureko-btn--primary {
	background: var(--eureko-primary);
	color: var(--eureko-white);
	border-color: var(--eureko-primary);
}
.eureko-btn--primary:hover {
	background: var(--eureko-primary-hover);
	border-color: var(--eureko-primary-hover);
	color: var(--eureko-white);
}
.eureko-btn--outline {
	background: transparent;
	color: var(--eureko-primary);
	border-color: var(--eureko-primary);
}
.eureko-btn--outline:hover {
	background: var(--eureko-primary);
	color: var(--eureko-white);
}
/* Figma "Button / Secondary" — border + label in the heading colour #3d4856,
   not the brand green. Used where the design puts the pill on a cream band. */
.eureko-btn--outline-dark {
	background: transparent;
	color: var(--eureko-text);
	border-color: var(--eureko-text);
}
.eureko-btn--outline-dark:hover {
	background: var(--eureko-text);
	color: var(--eureko-white);
}
.eureko-btn--outline-white {
	background: transparent;
	color: var(--eureko-white);
	border-color: var(--eureko-white);
}
.eureko-btn--outline-white:hover {
	background: var(--eureko-white);
	color: var(--eureko-dark);
}
.eureko-btn--white {
	background: var(--eureko-white);
	color: var(--eureko-primary);
	border-color: var(--eureko-white);
}
.eureko-btn--white:hover {
	background: var(--eureko-cream);
	border-color: var(--eureko-cream);
}

/* ==========================================================================
   Shared: icons
   ========================================================================== */

.eureko-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}
.eureko-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--eureko-primary);
	flex-shrink: 0;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

/*
 * 🔴 THE SCROLL-REVEAL ANIMATION IS RETIRED (2026-08-26, client request:
 * „the sections are appearing as you are scrolling and I would get rid of this
 * appearing effect") — every page now renders complete on load, which also
 * removes any chance of a crawler seeing an empty, JS-gated page.
 *
 * `.reveal` is deliberately LEFT IN THE MARKUP on ~28 templates: stripping it
 * everywhere would be a large, risky diff for zero visual gain. The class is
 * now INERT — it paints nothing and animates nothing.
 *
 * ⛔ Do NOT reintroduce `opacity: 0` here. That one declaration is what made
 * whole sections invisible whenever the IntersectionObserver failed to fire
 * (the 2026-08-24 iPhone report on `.eureko-vybaveni-section`). With no JS
 * toggling `is-revealed` any more, opacity 0 would hide the content
 * permanently and unconditionally.
 */
.reveal,
.reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Hero section
   ========================================================================== */

.eureko-hero {
	background: var(--eureko-cream);
	position: relative;
	overflow: hidden;
	padding-bottom: 3rem;
}
@media (min-width: 768px) {
	.eureko-hero {
		overflow: visible;
		padding-bottom: 5rem;
	}
}
.eureko-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding-block: 2rem;
	position: relative;
	z-index: 1;
}

/* Decorative shapes behind hero content (desktop only) */
.eureko-hero__shapes {
	display: none;
}
@media (min-width: 1024px) {
	.eureko-hero__shapes {
		display: block;
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 0;
		overflow: hidden;
	}
	.eureko-hero__shape {
		position: absolute;
		display: block;
	}
	.eureko-hero__shape--circle {
		left: 35.6%;
		top: 43%;
		width: 13.6%;
		height: auto;
		max-width: 261px;
	}
	.eureko-hero__shape--curve {
		left: 6.4%;
		top: 77%;
		width: 48%;
		height: auto;
		max-width: 920px;
	}
}
@media (max-width: 1023px) {
	.eureko-hero__inner {
		padding-block: 1.5rem 2rem;
	}
}
.eureko-hero__content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.eureko-hero__supertitle {
	font-size: var(--eureko-fs-sm);
	font-weight: 600;
	color: var(--eureko-primary);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0;
}
.eureko-hero__headline {
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.1;
	color: var(--eureko-text);
	margin: 0;
}
.eureko-hero__subheadline {
	font-size: var(--eureko-fs-lg);
	color: var(--eureko-muted);
	line-height: 1.6;
	margin: 0;
	max-width: 42rem;
}
.eureko-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.75rem;
}

/* Each CTA button paired with its badge directly below */
.eureko-hero__cta-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

/* Hero buttons — exact Figma specs: 20px 32px padding, Catamaran Bold 18px */
.eureko-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem 2rem;
	border-radius: var(--eureko-radius-pill);
	font-family: var(--eureko-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--eureko-transition), border-color var(--eureko-transition), color var(--eureko-transition);
}
.eureko-hero__btn--primary {
	background: var(--eureko-primary);
	border: 1px solid var(--eureko-primary);
	color: #ffffff;
}
.eureko-hero__btn--primary:hover {
	background: var(--eureko-primary-hover);
	border-color: var(--eureko-primary-hover);
	color: #ffffff;
}
.eureko-hero__btn--outline {
	background: transparent;
	border: 1px solid var(--eureko-text);
	color: var(--eureko-text);
}
.eureko-hero__btn--outline:hover {
	background: var(--eureko-text);
	color: #ffffff;
}

/* Badge — speech bubble with white upward-pointing triangle (16×8px) */
.eureko-hero__badge {
	position: relative;
	display: inline-block;
	background: #ffffff;
	border-radius: 0.75rem;
	padding: 0.6875rem 1.25rem;
	font-family: var(--eureko-font-body);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--eureko-muted);
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.eureko-hero__badge::before {
	content: '';
	position: absolute;
	top: -0.5rem;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 0.5rem solid transparent;
	border-right: 0.5rem solid transparent;
	border-bottom: 0.5rem solid #ffffff;
}
.eureko-hero__google-rating {
	margin-top: 0.75rem;
}
/* Outer link: two groups side by side, gap 18px */
.eureko-hero__google-link {
	display: inline-flex;
	align-items: center;
	gap: 1.125rem; /* 18px */
	text-decoration: none;
}
/* Left group: Google logo + score, gap 13px */
.eureko-hero__google-left {
	display: flex;
	align-items: center;
	gap: 0.8125rem; /* 13px */
	flex-shrink: 0;
}
.eureko-hero__google-logo {
	width: 2.625rem;  /* 42px */
	height: 2.625rem;
	display: block;
	flex-shrink: 0;
}
/* Score: Catamaran ExtraBold 800, 32px, green, tracking 1.92px */
.eureko-hero__google-score {
	font-family: var(--eureko-font-heading);
	font-weight: 800;
	font-size: 2rem; /* 32px */
	color: var(--eureko-primary);
	letter-spacing: 0.12rem; /* 1.92px */
	line-height: 1.375rem; /* 22px */
	text-transform: uppercase;
}
/* Right group: stars + count stacked, gap 4px */
.eureko-hero__google-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem; /* 4px */
	width: 8.75rem; /* 140px */
}
/* 5 orange stars using ★ unicode, 96×16px total */
.eureko-hero__google-stars {
	display: block;
	font-size: 1rem;
	line-height: 1;
	color: #f59e0b;
	letter-spacing: 1px;
}
/* "12 recenzí na Google": Figtree Regular 14px, #505460, underline */
.eureko-hero__google-count {
	font-family: var(--eureko-font-body);
	font-size: 0.875rem; /* 14px */
	font-weight: 400;
	color: var(--eureko-muted);
	text-decoration: underline;
	line-height: 1.2;
}
.eureko-hero__media {
	position: relative;
}
.eureko-hero__image {
	width: 100%;
	height: auto;
	border-radius: var(--eureko-radius-xl); /* Figma 718:6745 = 32px */
	display: block;
	object-fit: cover;
	aspect-ratio: 4/3;
	background: var(--eureko-border); /* shown while the Drive poster loads */
}
.eureko-hero__image-placeholder {
	width: 100%;
	aspect-ratio: 4/3;
	background: var(--eureko-border);
	border-radius: var(--eureko-radius-xl);
}
@media (min-width: 768px) {
	/* Media column stretches to the full height of the text column, and the
	   poster fills it (object-fit: cover) so the box doesn't change shape when
	   the video is played in its place. */
	.eureko-hero__media {
		align-self: stretch;
	}
	.eureko-hero__image,
	.eureko-hero__image-placeholder {
		height: 100%;
		aspect-ratio: auto;
	}
}
/* Play pill — Figma 718:6777. Sits bottom-LEFT of the poster, not bottom-right. */
.eureko-hero__video-btn {
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1.5rem;
	background: var(--eureko-white);
	border: none;
	border-radius: var(--eureko-radius-pill);
	cursor: pointer;
	box-shadow: var(--eureko-shadow-md);
	font-family: var(--eureko-font-heading);
	font-size: 1.0625rem;
	color: var(--eureko-text);
	transition: transform var(--eureko-transition);
}
.eureko-hero__video-btn:hover {
	transform: scale(1.04);
}
.eureko-hero__video-btn .eureko-icon {
	width: 23px;
	height: 23px;
	flex: none;
}
/* Stacked play label + runtime ("Přehrát video" over "01:29"). */
.eureko-hero__video-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1;
	text-align: left;
	gap: 0.25rem;
}
.eureko-hero__video-label {
	font-weight: 700;
}
.eureko-hero__video-length {
	font-weight: 400;
}
/* Insurance strip — floating card between hero and services grid */
/* Mobile: static block below hero */
.eureko-insurance-strip {
	position: relative;
	z-index: 10;
	padding-inline: 0;
	padding-block: 2.5rem;
	overflow: visible;
	max-width: 100%;
}
/*
 * Mobile card — Figma 729:19487 (the 390px homepage frame). Centred column,
 * 32px padding, 32px gap. The desktop block below flips it back to a row.
 */
.eureko-insurance-strip__card {
	background: #ffffff;
	border-radius: 1.25rem;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}
.eureko-insurance-strip__label {
	font-family: var(--eureko-font-heading);
	font-weight: 500;
	font-size: 1rem;
	color: var(--eureko-text);
	letter-spacing: 0.96px;
	text-transform: uppercase;
	line-height: 1.6;
	margin: 0;
	text-align: center;
	white-space: normal;
	word-break: break-word;
}
/*
 * Logos — wrap 2-up, the odd fifth centring itself on its own row (Figma
 * 729:19489: gap 16px/8px, justify-center).
 */
.eureko-insurance-strip__logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem 0.5rem;
	width: 100%;
}
.eureko-insurance-strip__logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8.75rem; /* 140px — see the note on the img below */
	max-width: 100%;
}
/*
 * 🔴 On mobile the logos are sized by WIDTH, not height. The design gives every
 * cell the same 140px width and lets the heights fall out naturally (59/35/17/
 * 37/24) — a shared height would squash the wide-thin ones (ZPMV) and blow up
 * the tall ones (VZP). Desktop is the opposite: see --logo-h below.
 */
.eureko-insurance-strip__logo-item img {
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
	object-position: center;
	display: block;
}

@media (min-width: 768px) {
	.eureko-hero__inner {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		padding-block: 5rem var(--eureko-strip-above);
		gap: 2rem;
	}
	.eureko-insurance-strip {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		transform: translateY(50%);
		padding-block: 0;
	}
	.eureko-insurance-strip__card {
		flex-direction: row;
		align-items: center;
		padding: 2rem 3rem;
		gap: 2.1875rem;
		overflow: visible;
	}
	.eureko-insurance-strip__label {
		font-size: 1rem;
		letter-spacing: 0.96px; /* Figma 654:9900 */
		white-space: nowrap;
	}
	.eureko-insurance-strip__logos {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
	}
	/*
	 * Each logo carries its own Figma height as --logo-h (62/45/22/48/28).
	 * Cap with max-height, never a fixed height: a fixed height also fixes the
	 * rendered width, so flex can't shrink the row and OZP wraps.
	 */
	/* Undo the mobile fixed-width cell so flex can distribute the row. */
	.eureko-insurance-strip__logo-item {
		width: auto;
		min-width: 0;
	}
	.eureko-insurance-strip__logo-item img {
		max-height: var(--logo-h, 3.875rem);
		height: auto;
		width: auto;
	}
}

/* Inline variant — used on inner pages (Ceník, Kontakt, etc.) */
/* Same white card as homepage, just static (no overlap). */
.eureko-insurance-strip--inline {
	position: static;
	padding-block: 2rem;
}
@media (min-width: 768px) {
	.eureko-insurance-strip--inline {
		position: static;
		bottom: auto;
		transform: none;
		padding-block: 2rem;
	}
}


@media (min-width: 1024px) {
	/* Figma 718:6731 — on the 1584 container the video is 804 wide starting at
	   x=949, so the split is 732 / 48 gap / 804. The video is very slightly the
	   WIDER of the two columns; the old 3fr 2fr made it read as a thumbnail. */
	.eureko-hero__inner {
		grid-template-columns: 732fr 804fr;
		gap: 3rem;
		padding-block: 6rem var(--eureko-strip-above);
	}
}

/* ==========================================================================
   Services grid
   ========================================================================== */

.eureko-services {
	padding-top: 4rem;
	padding-bottom: 3rem;
	background: var(--eureko-white);
	overflow: visible;
}
@media (min-width: 768px) {
	.eureko-services {
		padding-top: var(--eureko-strip-below); /* clears the floating insurance card + breathing room below it */
	}
}
.eureko-services__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}
.eureko-service-card {
	position: relative;
	border-radius: var(--eureko-radius-l);
	overflow: hidden;
	display: block;
	text-decoration: none;
	color: inherit;
}
.eureko-service-card__image,
.eureko-service-card__image-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	min-height: 200px;
}
.eureko-service-card__image-placeholder {
	background: var(--eureko-border);
}
.eureko-service-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 60%);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 1.25rem;
	color: var(--eureko-white);
}
.eureko-service-card__title {
	font-size: var(--eureko-fs-xl);
	margin: 0 0 0.25rem;
	color: #ffffff;
}
.eureko-service-card__subtitle {
	font-family: var(--eureko-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.02em;
	opacity: 0.85;
	margin: 0;
	color: #ffffff;
}
.eureko-service-card__icon {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--eureko-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform var(--eureko-transition);
	font-family: var(--eureko-font-body);
	font-size: 1.75rem;
	font-weight: 300;
	color: #fff;
	line-height: 1;
	user-select: none;
}
.eureko-service-card:hover .eureko-service-card__icon {
	transform: rotate(45deg);
}

/*
 * Mobile (Figma 729:20642) — 358x200 at radius 12 with a deeper gradient that
 * reaches solid black at the bottom edge, so the white copy stays legible on a
 * small card. Scoped to phones: the desktop card keeps its own radius/ramp.
 */
@media (max-width: 767px) {
	.eureko-service-card {
		border-radius: 0.75rem;
	}
	.eureko-service-card__overlay {
		padding: 1.5rem;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 32.75%, rgba(0, 0, 0, 1) 100%);
	}
	.eureko-service-card__title {
		font-size: 1.375rem;
	}
	.eureko-service-card__subtitle {
		font-size: 0.875rem;
		letter-spacing: 0.28px;
	}
}

/* CTA card — light green tint */
.eureko-service-card--cta {
	background: rgba(99, 157, 33, 0.08);
	color: var(--eureko-text);
	display: block;
	position: relative;
	overflow: hidden;
}
.eureko-service-card--cta::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 16rem;
	background: url("../images/decor/leaf-green.svg") no-repeat left bottom / contain;
	pointer-events: none;
	z-index: 0;
}
.eureko-service-card__cta-inner {
	padding: 1.75rem 1.75rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	position: relative;
	z-index: 1;
}
.eureko-service-card__cta-headline {
	font-family: var(--eureko-font-heading);
	font-size: 2rem;
	font-weight: 500;
	color: var(--eureko-text);
	margin: 0;
	line-height: 1.2;
}
.eureko-service-card__cta-hours {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--eureko-muted);
	margin: 0;
}
/* Two-column contact row */
.eureko-service-card__cta-contacts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}
.eureko-service-card__cta-contact {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.eureko-service-card__cta-label {
	font-size: 0.875rem;
	color: var(--eureko-muted);
	margin: 0;
}
.eureko-service-card__cta-phone,
.eureko-service-card__cta-email {
	font-family: var(--eureko-font-body);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--eureko-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.eureko-service-card__cta-address-block {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.eureko-service-card__cta-address {
	font-style: normal;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--eureko-text);
	line-height: 1.4;
}
/* Bottom row: just the button */
.eureko-service-card__cta-bottom {
	margin-top: 1.25rem;
}
.eureko-service-card--cta .eureko-btn--primary {
	padding: 1rem 2.75rem;
	font-family: var(--eureko-font-heading);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	min-width: 10rem;
	text-align: center;
	display: inline-block;
}
/* Lady photo — absolute, bottom-right of the card */
.eureko-service-card__cta-photo {
	display: block;
	position: relative;
	width: 100%;
	height: 18rem;
	pointer-events: none;
	overflow: hidden;
}
.eureko-service-card__cta-photo img {
	width: auto;
	height: 100%;
	display: block;
}

@media (min-width: 768px) {
	.eureko-services__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 240px 240px;
	}
	.eureko-service-card--large {
		grid-column: 1;
		grid-row: 1 / 3;
	}
	.eureko-service-card__image,
	.eureko-service-card__image-placeholder {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.eureko-service-card__cta-contacts {
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}
	.eureko-service-card__cta-photo {
		position: absolute;
		bottom: 0;
		right: 2rem;
		width: 13rem;
		height: 15rem;
	}
}

@media (min-width: 1024px) {
	.eureko-services__grid {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 240px 240px;
	}
	.eureko-service-card--large {
		grid-column: 1;
		grid-row: 1 / 3;
	}
	.eureko-service-card--cta {
		grid-column: 3;
		grid-row: 1 / 3;
	}
}

/* ==========================================================================
   Needs cards
   ========================================================================== */

.eureko-needs {
	background: #ffffff;
	padding-block: 5rem;
}
.eureko-needs__headline {
	font-size: 2.5rem;
	color: var(--eureko-text);
	margin: 0 0 2.5rem;
	line-height: 1.2;
}
.eureko-needs__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
.eureko-need-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	padding: 1.75rem 1.5rem;
	background: var(--eureko-cream);
	border-radius: var(--eureko-radius-l);
	text-decoration: none;
	color: var(--eureko-text);
	min-height: 16rem;
	transition: box-shadow var(--eureko-transition), transform var(--eureko-transition);
}
.eureko-need-card:hover {
	box-shadow: var(--eureko-shadow-md);
	transform: translateY(-2px);
}
.eureko-need-card__content {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.eureko-need-card__title {
	font-size: 1.5rem;
	color: var(--eureko-text);
	margin: 0;
	line-height: 1.2;
	letter-spacing: 0.48px;
}
.eureko-need-card__subtitle {
	font-size: 1rem;
	color: var(--eureko-text);
	margin: 0;
	line-height: 1.6;
	letter-spacing: 0.32px;
}
.eureko-need-card__icon {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--eureko-primary);
	color: var(--eureko-white);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-family: 'Material Symbols Outlined';
	font-size: 1.5rem;
	font-style: normal;
	transition: transform var(--eureko-transition);
}
.eureko-need-card:hover .eureko-need-card__icon {
	transform: rotate(45deg);
}

@media (min-width: 768px) {
	.eureko-needs__grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.eureko-needs__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/*
 * Mobile (Figma 729:20670) — the four cards collapse from 256px-tall tiles into
 * compact 66px link rows: title and the green ⊕ on ONE line, 8px apart.
 * The design marks the subtitle `hidden` on mobile, so it is hidden here too.
 */
@media (max-width: 767px) {
	.eureko-needs {
		padding-block: 3rem;
	}
	.eureko-needs__headline {
		font-size: 1.75rem;
		text-align: center;
		margin-bottom: 2.5625rem; /* 41px */
	}
	.eureko-needs__grid {
		gap: 0.5rem;
	}
	.eureko-need-card {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		min-height: 0;
		padding: 1rem;
		border-radius: 1rem;
	}
	.eureko-need-card__title {
		font-size: 1.125rem;
		letter-spacing: 0.36px;
	}
	/*
	 * Shown on mobile since v1.9.370. The design hides the subtitles at this
	 * width, but that predates the client's real copy (2026-08-24) — these four
	 * lines now say what actually happens at the reception desk, which is the
	 * point of the cards. The row keeps its title + icon layout; the subtitle
	 * simply flows under the title inside __content.
	 */
	.eureko-need-card__subtitle {
		font-size: 0.875rem;
		line-height: 1.5;
		margin-top: 0.375rem;
	}
	.eureko-need-card__icon {
		width: 2rem;
		height: 2rem;
		font-size: 1.5rem;
	}
}

/* ==========================================================================
   USP / About
   ========================================================================== */

.eureko-usp {
	padding-block: 4rem 0;
	background: var(--eureko-white);
	border-bottom: 1px solid var(--eureko-border);
	overflow: hidden;
	position: relative;
}
.eureko-usp__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
	z-index: 1;
}

/* Col 1 — heading + CTA + signature */
.eureko-usp__left {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.eureko-usp__headline {
	font-size: 2rem;
	line-height: 1.2;
	letter-spacing: -0.025em;
	color: var(--eureko-text);
	margin: 0;
}
.eureko-usp__cta-btn--mobile {
	display: none !important;
}
@media (max-width: 1023px) {
	.eureko-usp__cta-btn--mobile {
		display: flex !important;
		margin-bottom: 2rem;
	}
	.eureko-usp__cta-btn--desktop {
		display: none !important;
	}
}
/* Figma 718:6481 — Button/Label: Catamaran Bold 16 / 2px tracking, 16/20 padding, 1px #e5e5e5. */
.eureko-usp__cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1rem 1.25rem;
	background: transparent;
	border: 1px solid var(--eureko-border);
	border-radius: var(--eureko-radius-pill);
	color: var(--eureko-text);
	font-family: var(--eureko-font-heading);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 2px;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--eureko-transition), border-color var(--eureko-transition);
}
.eureko-usp__cta-btn:hover {
	background: var(--eureko-cream);
	border-color: #ccc;
}
.eureko-usp__signature {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
/* Figma 718:6496 — Figtree Medium 18 over Figtree Regular 16 / 0.32px, both #3d4856. */
.eureko-usp__sig-name {
	font-family: var(--eureko-font-body);
	font-weight: 500;
	font-size: 1.125rem;
	color: var(--eureko-text);
	line-height: 1.2;
}
.eureko-usp__sig-role {
	font-family: var(--eureko-font-body);
	font-size: 1rem;
	letter-spacing: 0.32px;
	color: var(--eureko-text);
	line-height: 1.6;
}

/* Mobile: image-wrap stacks normally; absolute only on desktop */
@media (max-width: 1023px) {
	.eureko-btn,
	.eureko-btn--primary,
	.eureko-btn--white,
	.eureko-btn--outline,
	.eureko-hero__btn,
	.eureko-about-clinic .eureko-btn--white {
		display: flex !important;
		width: 100% !important;
		justify-content: center;
		box-sizing: border-box;
	}
	.eureko-hero__ctas {
		flex-direction: column;
	}
	.eureko-hero__cta-item {
		width: 100%;
	}
	.eureko-hero__google-rating {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.eureko-hero__google-link {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.eureko-usp__image-wrap {
		position: relative !important;
		left: auto !important;
		width: 100%;
		flex-direction: column !important;
		align-items: center;
		justify-content: center;
		padding-left: 0;
	}
	.eureko-usp__signature {
		order: 2;
		padding-bottom: 0;
		text-align: center;
		align-items: center;
		width: 100%;
		justify-content: center;
	}
	.eureko-usp__image {
		order: 1;
		max-height: 280px;
		width: auto;
	}
	.eureko-usp::before {
		display: none;
	}
	.eureko-usp__cta-btn--desktop {
		display: none;
	}
	.eureko-usp__cta-btn--mobile {
		display: flex;
		width: 100%;
		margin-top: 1.5rem;
	}
}

/* ==========================================================================
   Hero — 390px mobile frame (Figma 729:20598)
   --------------------------------------------------------------------------
   ⚠️ This block MUST stay AFTER the `max-width: 1023px` block above: that one
   forces `.eureko-hero__btn { width: 100% !important }`, and several rules here
   are single-class overrides that would otherwise lose on source order.
   Scoped to `max-width: 767px` because the hero becomes two-column at 768px.
   ========================================================================== */
@media (max-width: 767px) {
	/*
	 * The design orders the column text → buttons → VIDEO → Google rating, but
	 * the rating lives inside `__content` in the markup. `display: contents`
	 * dissolves that wrapper so the media can be re-ordered between them
	 * without touching hero.php (which is shared with the desktop layout).
	 */
	.eureko-hero__inner {
		display: flex;
		flex-direction: column;
		gap: 0;
		text-align: center;
		padding-block: 2rem 0;
	}
	.eureko-hero__content {
		display: contents;
	}
	.eureko-hero__supertitle  { order: 1; }
	.eureko-hero__headline    { order: 2; margin-top: 0.75rem; }
	.eureko-hero__subheadline { order: 3; margin-top: 0.75rem; max-width: none; }
	.eureko-hero__ctas        { order: 4; margin-top: 2.5625rem; } /* 41px */
	.eureko-hero__media       { order: 5; margin-top: 4rem; }      /* 64px */
	.eureko-hero__google-rating {
		order: 6;
		margin-top: 2rem;
	}

	/* Buttons are a fixed 300px centred column, NOT full-bleed. The item is what
	   carries the width — the button itself keeps the `100% !important` above. */
	.eureko-hero__ctas {
		align-items: center;
		gap: 2.9375rem; /* 47px — leaves room for the badge under each button */
	}
	.eureko-hero__cta-item {
		width: 18.75rem; /* 300px */
		max-width: 100%;
	}
	.eureko-hero__btn {
		font-size: 1rem;
		padding: 1rem 1.25rem;
	}

	/* Poster is 358x239 at radius 16 on mobile (desktop uses 32). */
	.eureko-hero__image,
	.eureko-hero__image-placeholder {
		aspect-ratio: 358 / 239;
		border-radius: 1rem;
	}
	.eureko-hero__video-btn {
		left: 1rem;
		bottom: 1rem;
	}

	/* `text-align: center` on the wrapper would drag these along with it. */
	.eureko-hero__video-text,
	.eureko-hero__google-right {
		text-align: left;
	}
}

/* Doctor photo + name card combined; absolutely positioned at bottom */
.eureko-usp__image-wrap {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
	gap: 1rem;
	z-index: 2;
}
.eureko-usp__image {
	position: relative;
	z-index: 2;
	height: auto;
	display: block;
	object-fit: contain;
	object-position: bottom center;
	/* Figma 718:6822: the portrait box is 321x302, bottom-anchored on the
	   section's closing rule. The cut-out is 805x752 (same 1.07 ratio), so
	   capping the height reproduces the design width without cropping. */
	max-height: 302px;
}
.eureko-usp__signature {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding-bottom: 4rem;
	flex-shrink: 0;
}

/* Col 3 — 2×2 features grid */
.eureko-usp__features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 1024px) {
	.eureko-usp__features {
		grid-template-columns: 1fr 1fr;
		gap: 2rem 2rem;
	}
}
.eureko-usp-feature {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 1rem;
}
.eureko-usp-feature__icon {
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
}
/* Material Symbols stand-in for features that have no brand SVG. */
.eureko-usp-feature__icon--symbol {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	color: var(--eureko-primary);
	font-variation-settings: "wght" 300;
}
.eureko-usp-feature__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
/* Figma 718:6487/6488 — Heading 4 (Catamaran Medium 24) + Body/M/Regular (16/1.7), both #3d4856. */
.eureko-usp-feature__title {
	font-size: 1.5rem;
	margin: 0;
	color: var(--eureko-text);
	line-height: 1.2;
}
.eureko-usp-feature__desc {
	font-family: var(--eureko-font-body);
	font-size: 1rem;
	color: var(--eureko-text);
	margin: 0;
	line-height: 1.7;
}

/*
 * Mobile (Figma 729:20701) — each USP is a single centred row of "icon + label".
 * ⚠️ The design ALSO dropped the descriptions here; we no longer do — the client
 * sent the real copy on 2026-08-24, so see the note further down this block.
 */
@media (max-width: 767px) {
	.eureko-usp__headline {
		text-align: center;
	}
	.eureko-usp__features {
		gap: 1rem;
		justify-items: center;
	}
	.eureko-usp-feature {
		align-items: center;
		gap: 0.75rem;
	}
	.eureko-usp-feature__icon {
		width: 2.5rem;
		height: 2.5rem;
	}
	.eureko-usp-feature__icon--symbol {
		font-size: 2rem;
	}
	.eureko-usp-feature__title {
		font-size: 1.125rem;
	}
	/*
	 * Shown on mobile since v1.9.370. The design dropped them, but that was
	 * decided while the four descriptions were Lorem; the client sent the real
	 * copy on 2026-08-24, so the phone layout no longer hides content he wrote.
	 * Centred to match the row above it.
	 */
	.eureko-usp-feature__desc {
		text-align: center;
		font-size: 0.9375rem;
		line-height: 1.55;
	}
}

@media (min-width: 768px) {
	.eureko-usp__inner {
		grid-template-columns: 1fr 1fr;
	}
	.eureko-usp__features {
		grid-column: 1 / -1;
	}
}
/*
 * Desktop geometry read off Figma 718:6467 (1584 × 351 band). Tracks are the
 * design's absolute positions expressed as fractions of the container, with NO
 * gap — the design has none, the offsets ARE the gutters:
 *   heading 0–512 | portrait region 512–804 | features 804–1584 (2 × 378 + 24)
 */
@media (min-width: 1024px) {
	.eureko-usp {
		position: relative;
	}
	.eureko-usp__inner {
		grid-template-columns: 512fr 292fr 780fr;
		align-items: start;
		gap: 0;
		min-height: 351px;
	}
	.eureko-usp__inner > .eureko-usp__features {
		grid-column: 3;
	}
	.eureko-usp__features {
		grid-column: auto;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.5rem;
		row-gap: 2.5rem;
	}
	.eureko-usp__left {
		gap: 2.875rem; /* Figma 718:6479 — 46px headline → button */
		max-width: 32rem;
	}
	.eureko-usp__headline {
		font-size: 2.5rem;
		letter-spacing: -1px;
	}
	.eureko-usp__cta-btn {
		width: fit-content;
	}
	/*
	 * Signature + portrait as one bottom-anchored band: Figma puts the name at
	 * left 284 and the photo at 421–742, so the wrap spans 284–742.
	 */
	.eureko-usp__image-wrap {
		position: absolute;
		bottom: 0;
		/* Figma puts the name at 17.929%, but our CTA label („Poznejte naše
		   hodnoty") is wider than the design's, so the band starts 3% later to
		   keep clear of the button. */
		left: 20.4%;
		width: 28.914%;
		justify-content: flex-start;
		align-items: flex-end;
		gap: 1.75rem;
		padding-left: 0;
	}
	.eureko-usp__signature {
		width: 6.5rem; /* 104px */
		flex-shrink: 0;
		padding-bottom: 4.625rem; /* 74px — puts the name block at design top 235 */
	}
	/* SVG decoration behind the doctor image */
	.eureko-usp::before {
		content: '';
		position: absolute;
		width: 320px;
		height: 320px;
		background: url('../images/decor/leaf-cream.svg') center / contain no-repeat;
		bottom: 0;
		left: 26.5%;
		z-index: 0;
		pointer-events: none;
		opacity: 0.6;
	}
}
/*
 * The design's absolute geometry only clears at full width: at 1584 the CTA
 * ends around x230 and the signature starts at x284, and that 54px gap is a
 * PERCENTAGE while the button's width is fixed by its label — so below ~1440
 * the name slid under the button. In that range the portrait band drops out of
 * absolute positioning and simply occupies its own grid column instead.
 */
@media (min-width: 1024px) and (max-width: 1439px) {
	.eureko-usp__image-wrap {
		position: static;
		grid-column: 2;
		align-self: end;
		width: auto;
		gap: 1.25rem;
	}
	.eureko-usp__left {
		padding-right: 1.5rem;
	}
	/* 🔴 iPad Pro portrait (1024): grid column 2 is only 168px wide, but the wrap
	   lays the signature (112) + gap (20) + portrait (168) out in a ROW = 300px.
	   The portrait therefore overflowed 121px into the features column and sat
	   on top of "Moderní metody léčby". Stack them instead — the column is far
	   too narrow to hold both side by side at any width in this range. */
	.eureko-usp__image-wrap {
		flex-direction: column;
		align-items: center;
	}
	.eureko-usp__signature {
		width: auto;
		max-width: 100%;
		padding-bottom: 0;
	}
	.eureko-usp__image {
		max-width: 100%;
		height: auto;
	}
	.eureko-usp::before {
		left: 30%;
	}
}

/* ==========================================================================
   Carousel (shared)
   ========================================================================== */

.eureko-carousel {
	position: relative;
	overflow: visible;
}
.eureko-carousel__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block: 1rem 1.5rem;
}
.eureko-carousel__track::-webkit-scrollbar {
	display: none;
}
.eureko-carousel__track > * {
	scroll-snap-align: start;
	flex-shrink: 0;
}
.eureko-carousel__arrow {
	position: absolute;
	top: calc(29.4065rem / 2);
	right: 0;
	transform: translateY(-50%);
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--eureko-cream);
	border: 4px solid #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1a1a1a;
	z-index: 2;
	font-family: 'Material Symbols Outlined';
	font-size: 1.5rem;
	font-style: normal;
	line-height: 1;
	transition: background var(--eureko-transition);
}
.eureko-carousel__arrow--prev {
	right: auto;
	left: 0;
}
.eureko-carousel__arrow:hover {
	background: var(--eureko-border);
}
.eureko-carousel__arrow .eureko-icon {
	display: none; /* Use Material Symbol font instead */
}
.eureko-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	padding: 0 0 1rem;
}
.eureko-carousel__dot {
	width: 1.25rem;
	height: 0.375rem;
	border-radius: var(--eureko-radius-pill);
	background: var(--eureko-border);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background var(--eureko-transition), width var(--eureko-transition);
}
.eureko-carousel__dot--active {
	background: var(--eureko-primary);
	width: 1.75rem;
}

/* ==========================================================================
   Cases carousel
   ========================================================================== */

.eureko-cases {
	padding-block: 5rem 3rem;
	background: var(--eureko-white);
	position: relative;
}
.eureko-cases__cta-wrap {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}
/* 🔴 Raised from 768 to 1280. The "Další naše proměny" pill is absolutely
   positioned at the top-right of the container, and the headline is a long
   single line — below ~1280 the two collided and the pill sat ON the words
   ("…zpět k pohybu" / "Další naše proměny" overlapped at 1024, i.e. iPad Pro
   portrait). Under 1280 the pill falls back to its centred position below the
   carousel, which is the mobile treatment and is what the design shows there. */
@media (min-width: 1280px) {
	.eureko-cases .eureko-container {
		position: relative;
	}
	.eureko-cases__cta-wrap {
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 0;
	}
}
.eureko-cases__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 3rem;
}
.eureko-cases__headline {
	font-size: 2.5rem;
	margin: 0;
	color: var(--eureko-text);
	line-height: 1.2;
}
/* Cases/Team secondary button - same gray outline style */
.eureko-cases .eureko-btn,
.eureko-cases__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.25rem;
	background: transparent;
	border: 1px solid var(--eureko-border);
	border-radius: var(--eureko-radius-pill);
	color: var(--eureko-text);
	font-family: var(--eureko-font-heading);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-decoration: none;
	transition: background var(--eureko-transition);
}
.eureko-cases .eureko-btn:hover {
	background: var(--eureko-cream);
}
.eureko-case-card {
	width: min(23.5625rem, 85vw); /* 377px, capped at 85vw on mobile */
	background: var(--eureko-white);
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.eureko-case-card__before-after {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 29.4065rem; /* 470.504px */
	border-radius: 1.25rem; /* 20px */
	overflow: hidden;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.eureko-case-card__before,
.eureko-case-card__after {
	position: relative;
	overflow: hidden;
}
.eureko-case-card__before img,
.eureko-case-card__after img,
.eureko-case-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eureko-case-card__media {
	position: relative;
	height: 29.4065rem;
	border-radius: 1.25rem;
	overflow: hidden;
}
.eureko-case-card__media-placeholder {
	width: 100%;
	height: 100%;
	background: var(--eureko-border);
}
.eureko-case-card__label {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	background: #ffffff;
	color: var(--eureko-text);
	font-family: var(--eureko-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	padding: 0.75rem 1.5rem;
	border-radius: var(--eureko-radius-pill);
	line-height: 1;
}
.eureko-case-card__after .eureko-case-card__label {
	left: 0.75rem;
}
.eureko-case-card__play {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #ffffff;
	border: none;
	border-radius: var(--eureko-radius-pill);
	padding: 0.75rem 1.5rem;
	cursor: pointer;
	color: var(--eureko-text);
}
.eureko-case-card__play .eureko-icon {
	width: 1.4375rem;
	height: 1.4375rem;
}
.eureko-case-card__play-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
	font-size: 1.0625rem;
	color: var(--eureko-text);
}
.eureko-case-card__play-text strong {
	font-family: var(--eureko-font-heading);
	font-weight: 700;
}
.eureko-case-card__duration {
	font-family: var(--eureko-font-heading);
	font-weight: 400;
}
.eureko-case-card__footer {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.eureko-case-card__headline {
	font-size: 1.375rem;
	margin: 0;
	color: var(--eureko-text);
	line-height: 1.2;
}
.eureko-case-card__patient {
	font-size: 1rem;
	color: var(--eureko-text);
	margin: 0;
	line-height: 1.6;
	letter-spacing: 0.32px;
}

/* ==========================================================================
   About clinic — cream section (text left, photo collage right)
   ========================================================================== */

.eureko-about-clinic {
	background: #f7f4f0;
	color: #3d4856;
	padding-block: 3rem 5rem;
	position: relative;
	overflow: hidden;
}
@media (min-width: 768px) {
	.eureko-about-clinic {
		padding-block: 5rem 22rem;
	}
}
/* Brand-mark watermark behind the content (Figma "Group 3"). Reuses the same
   leaf-cream.svg the usp-about section already uses — it is the identical mark,
   circle included. Desktop only; the mobile design is a separate pass. */
@media (min-width: 1024px) {
	.eureko-about-clinic::before {
		content: '';
		position: absolute;
		left: 20.3%;                 /* 390.7 / 1920 */
		top: 1.5rem;
		width: 26.6%;                /* 510.5 / 1920 */
		aspect-ratio: 510 / 628;
		/* leaf-cream.svg is filled #F7F4F0 — the same colour as this band, so
		   using it as a background makes it invisible (it was authored for the
		   white usp-about section). Use it as a mask instead and paint Figma's
		   decor tone through it. */
		-webkit-mask: url('../images/decor/leaf-cream.svg') center / contain no-repeat;
		mask: url('../images/decor/leaf-cream.svg') center / contain no-repeat;
		background-color: #f3eee7;
		z-index: 0;
		pointer-events: none;
	}
	.eureko-about-clinic .eureko-container {
		position: relative;
		z-index: 1;
	}
}
.eureko-about-clinic__inner {
	max-width: 41rem; /* ~655px */
}
.eureko-about-clinic__headline {
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	color: #3d4856;
	margin: 0 0 2rem;
	line-height: 1.2;
	letter-spacing: -0.5px;
}
.eureko-about-clinic__body {
	color: #505460;
	font-size: 1.125rem;
	line-height: 1.7;
	margin-bottom: 2.5rem;
}
.eureko-about-clinic__body p {
	margin: 0 0 1rem;
}
.eureko-about-clinic__actions {
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}
.eureko-about-clinic .eureko-btn--white {
	display: inline-flex;
	align-items: center;
	padding: 1.25rem 2rem;
	background: #ffffff;
	border: none;
	border-radius: 200px;
	color: #3d4856;
	font-family: var(--eureko-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease;
}
.eureko-about-clinic .eureko-btn--white:hover {
	background: #ece9e4;
}
.eureko-about-clinic__signature {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	border-left: 3px solid #639d21;
	padding-left: 1rem;
}
.eureko-about-clinic__sig-name {
	font-family: var(--eureko-font-heading);
	font-weight: 700;
	font-size: 1.125rem;
	color: #3d4856;
}
.eureko-about-clinic__sig-role {
	font-size: 1rem;
	color: #505460;
}
/* Signature with a photo drops the green rule in favour of a round avatar. */
.eureko-about-clinic__signature--photo {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	border-left: 0;
	padding-left: 0;
}
.eureko-about-clinic__sig-photo {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.eureko-about-clinic__sig-text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

/* --- Photo collage + stat badges -------------------------------------- */
/* Mobile: a plain stacked block under the text. The badges only become
   overlapping circles once there is room for them (>=1024px). */
.eureko-about-clinic__media {
	margin-top: 3rem;
}
.eureko-about-clinic__collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	align-items: center;
}
.eureko-about-clinic__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--eureko-radius-l); /* 24px, per Figma */
	display: block;
}
.eureko-about-clinic__photo--team {
	grid-column: 1 / -1;
	aspect-ratio: 643 / 400;
}
.eureko-about-clinic__photo--building {
	aspect-ratio: 380 / 236;
}
.eureko-about-clinic__photo--placeholder {
	background: linear-gradient(135deg, #e7e2db, #d9d3ca);
}
.eureko-about-clinic__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--eureko-primary);
	color: var(--eureko-white);
	text-align: center;
	line-height: 1.1;
	padding: 0.5rem;
}
.eureko-about-clinic__stat-value {
	font-family: var(--eureko-font-heading);
	font-size: 1.75rem;
	font-weight: 600;
}
.eureko-about-clinic__stat-label {
	font-size: 0.875rem;
}

@media (min-width: 1024px) {
	/* Desktop: text left, collage right, in the Figma's 655 : 911 proportion.
	   A grid (rather than absolute positioning) keeps both columns measured
	   against the same box, so they scale together below 1584px instead of
	   overlapping. The section's large bottom padding stays empty on purpose —
	   that is where team-carousel overlaps upward by -20rem. */
	.eureko-about-clinic .eureko-container {
		display: grid;
		grid-template-columns: 41.35% 57.51%;   /* 655 / 911 of 1584 */
		justify-content: space-between;
		align-items: start;
	}
	.eureko-about-clinic__inner {
		max-width: none;
	}
	.eureko-about-clinic__media {
		margin-top: 0;
	}
	.eureko-about-clinic__collage {
		display: block;
		position: relative;
		aspect-ratio: 911 / 468;
		container-type: inline-size;   /* badge type scales off collage width */
	}
	.eureko-about-clinic__photo {
		position: absolute;
		height: auto;
	}
	.eureko-about-clinic__photo--team {
		left: 29.4%;
		top: 0;
		width: 70.6%;
		aspect-ratio: 643 / 400;
	}
	.eureko-about-clinic__photo--building {
		left: 0;
		top: 29.6%;
		width: 41.7%;
		aspect-ratio: 380 / 236;
	}
	.eureko-about-clinic__stat {
		position: absolute;
		width: 15.5%;      /* 141 / 911 */
		padding: 0;
	}
	.eureko-about-clinic__stat--area  { left: 11.2%; top: 3.7%; }
	.eureko-about-clinic__stat--team  { left: 6.4%;  top: 57.1%; }
	.eureko-about-clinic__stat--since { left: 68.8%; top: 69.9%; }
	/* Badge type scales with the collage, not the viewport, so the text keeps
	   its proportion inside the 141/911 circle at every width. px values are
	   the no-container-query fallback. */
	.eureko-about-clinic__stat-value {
		font-size: 2.5rem;              /* Display M — 40px at full size */
		font-size: 4.39cqw;
	}
	.eureko-about-clinic__stat--area .eureko-about-clinic__stat-value {
		font-size: 3rem;                /* Display L — 48px for "600" */
		font-size: 5.27cqw;
	}
	.eureko-about-clinic__stat-label {
		font-size: 1.25rem;             /* Text XL — 20px */
		font-size: 2.2cqw;
		letter-spacing: 0.4px;
	}
}

/* ==========================================================================
   Team carousel
   ========================================================================== */

.eureko-team {
	padding-block: 5rem;
	background: var(--eureko-white);
}
.eureko-team .eureko-container {
	margin-top: 0;
	position: relative;
	z-index: 1;
}
@media (min-width: 768px) {
	/* Pulls the team content up over the cream about-clinic band. The overlap is
	   tuned so the band's bottom edge lands on the VERTICAL CENTRE of the disc,
	   as in the design. Disc geometry is fixed px (377 card / 300 disc), so this
	   offset holds across desktop widths. Re-measure if the card width changes. */
	.eureko-team .eureko-container {
		margin-top: -24.75rem;
	}
	/* Figma: 24px between the title row and the card top. The track already
	   contributes 16px of padding-top, so the headline supplies the other 8px.
	   Needs the extra `.eureko-team` specificity — the base `.eureko-team__headline`
	   rule below uses the `margin` shorthand and would otherwise win on source order. */
	.eureko-team .eureko-team__headline {
		margin-bottom: 0.5rem;
	}
}
/* ⚠️ The overlap above assumes a ONE-LINE headline: a second line pushes the
   cards down 48px and drags the band edge that far up the disc. Between 1024
   and 1279 the default headline (826px natural) no longer fits beside the
   arrows (762px available), so step the size down to keep it on one line.
   If the ACF headline is ever made much longer, re-check this. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.eureko-team .eureko-team__headline {
		font-size: 2.25rem;
	}
}
.eureko-team__headline {
	font-size: 2.5rem;
	margin: 0 0 3rem;
	color: var(--eureko-text);
	line-height: 1.2;
}
.eureko-team-card {
	width: min(23.5625rem, 85vw); /* 377px, capped at 85vw on mobile */
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.eureko-team-card__photo {
	height: 29.4065rem; /* 470.504px */
	border-radius: 1.25rem;
	overflow: hidden;
	background: var(--eureko-border);
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.eureko-team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eureko-team-card__photo-placeholder {
	width: 100%;
	height: 100%;
	background: var(--eureko-border);
}

/* --- Homepage carousel: cut-out portraits over a cream disc ---------------
   The beige disc is a ::before BEHIND the portrait; the portrait itself is
   NOT clipped, so the head stands proud of the disc and the shoulders spill
   past its sides — exactly as in Figma. This requires a transparent portrait
   (`tym_photo_cutout`); members without one get --framed below instead.
   Shared by the homepage carousel (.eureko-team) and the Náš tým page grid
   (.eureko-team-grid) — Figma 718:11263 uses the identical Person component. */
/* Geometry (card 377 wide), measured off the approved reference card and
   normalised to the Figma 1:1.25 portrait:
     photo container  377 x 333, radius 20, overflow clipped
     disc             266 x 266  at left 55, top 66
     portrait         266 x 333  at left 55, top 0  (bottom flush with the disc)
   As fractions of the card: D = 266/377 = 70.6%, disc top = 66/333 = 19.82%.
   The portrait is bottom-aligned to the disc, so its head clears the disc top.
   ⚠ The 266:333 portrait is 1:1.25 — the cut-out FILES must be cropped to
   width x 1.25 to match. They were 1:1.10 until 2026-08-07, which rendered every
   member ~12% short and let the disc dominate the card. */
.eureko-team .eureko-team-card__photo,
.eureko-team-grid .eureko-team-card__photo {
	position: relative;
	height: auto;
	aspect-ratio: 377 / 333;
	border-radius: 1.25rem;
	background: none;
	overflow: hidden;
	-webkit-mask-image: none;
}
.eureko-team .eureko-team-card__photo::before,
.eureko-team-grid .eureko-team-card__photo::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 19.82%;                 /* 66 / 333 */
	transform: translateX(-50%);
	width: 70.6%;                /* 266 / 377 */
	aspect-ratio: 1;
	border-radius: 50%;
	background: #eae2d8;
	z-index: 0;
}
/* Absolutely positioned so the portrait cannot inflate the box: the container's
   height must come from aspect-ratio alone, otherwise the in-flow image sizes it
   and the disc disappears behind an oversized photo. */
/* Sized by WIDTH, not height: the subject spans the full width of the cut-out
   file, so width is what controls how big the person reads against the disc.
   Width matches the disc exactly (1.00 D); height follows from the file's own
   1:1.10 crop. Raised 0.13 D off the bottom so the disc's arc shows beneath.
   Absolute so it cannot inflate the box. */
.eureko-team .eureko-team-card__photo img,
.eureko-team-grid .eureko-team-card__photo img {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 0.30%;               /* disc bottom: 100% - (19.82% + 266/333) */
	transform: translateX(-50%);
	width: 70.6%;
	max-width: none;
	height: auto;
	object-fit: contain;
	object-position: bottom center;
	/* The portrait MUST be clipped at the bottom: the studio shots are framed so
	   the subject fills the whole frame width from about 60% down, so the
	   cut-out's lower band is a solid rectangle of shoulders ending in a hard
	   flat edge. Unclipped it covers the disc's lower arc and the card stops
	   reading as a circle.
	   ⚠ NOT `border-radius: 50%`. That is an ellipse of the IMAGE's box, and at
	   the 1:1.25 crop the box is tall and narrow, so its lower arc is far
	   pointier than the disc and the flat file edge shows straight across.
	   Rounding only the bottom, with horizontal radius 50% (= 133px of 266) and
	   vertical radius 40% (= 133px of 332.5), makes the two bottom corners meet
	   at the centre as a TRUE SEMICIRCLE of r=133 — identical to the disc's own
	   bottom arc. The 40% is 0.5 / 1.25, so it is tied to the file crop ratio:
	   re-derive it if the crop ever changes. Top corners stay square; the
	   cut-out is transparent up there, so the head is untouched. */
	border-radius: 0 0 50% 50% / 0 0 40% 40%;
}
/* Let the beige disc show through for members who have no portrait yet. */
.eureko-team .eureko-team-card__photo-placeholder,
.eureko-team-grid .eureko-team-card__photo-placeholder {
	background: transparent;
}
/* No transparent portrait available — crop the ordinary photo into a circle the
   SAME size as the disc, so these cards sit level with the cut-out ones instead
   of showing an oversized circle. Members with no photo at all just show the
   bare disc. */
.eureko-team .eureko-team-card__photo--framed img,
.eureko-team-grid .eureko-team-card__photo--framed img {
	width: 70.6%;
	height: auto;
	bottom: 0.30%;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
}
/* --- Carousel arrows sit at the right end of the headline row (Figma 718:6865)
   The two 64px buttons are right-aligned on the title line, 12px apart, and are
   vertically centred on it (Figma top:-8 against a 48px title = dead centre).
   `.eureko-carousel` goes static so the buttons resolve against the container,
   which is the box the headline is measured in. */
@media (min-width: 1024px) {
	.eureko-team .eureko-carousel {
		position: static;
	}
	.eureko-team__headline {
		padding-right: 9.5rem;   /* 2 x 64px + 12px gap — keeps the title clear */
	}
	.eureko-team .eureko-carousel__arrow {
		top: 1.5rem;             /* half of the 3rem headline line-box */
		bottom: auto;
		right: 0;
		left: auto;
		transform: translateY(-50%);
	}
	.eureko-team .eureko-carousel__arrow--prev {
		right: 4.75rem;          /* 64px button + 12px gap */
		left: auto;
	}
}
/* Below the desktop breakpoint the buttons would collide with a wrapped
   headline; the track is swipeable and the dots are clickable. */
@media (max-width: 1023px) {
	.eureko-team .eureko-carousel__arrow {
		display: none;
	}
}
.eureko-team .eureko-team-card__info {
	align-items: center;
	text-align: center;
	gap: 0.5rem;
}
.eureko-team-card__info {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.eureko-team-card__name {
	font-size: 1.375rem;
	margin: 0;
	color: var(--eureko-text);
	line-height: 1.2;
}
.eureko-team-card__role {
	font-size: 1rem;
	color: var(--eureko-text);
	margin: 0;
	line-height: 1.6;
	letter-spacing: 0.32px;
}

/* --- Náš tým page: full team grid --- */
.eureko-team-grid-section {
	padding-block: 1rem 4rem;
}
/* Figma 718:11260 — 4 × 377 cards, 24px columns, 47px rows. Card internals come
   from the shared circular Person rules above; nothing here may re-crop them. */
.eureko-team-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.9375rem 1.5rem;
}
.eureko-team-grid .eureko-team-card {
	width: 100%;
	gap: 2rem;
}
.eureko-team-grid .eureko-team-card__info {
	align-items: center;
	text-align: center;
	gap: 1rem;
}
@media (min-width: 600px) {
	.eureko-team-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.eureko-team-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.eureko-team-grid-section {
		padding-block: 2rem 6rem;
	}
}
.eureko-team-card--link {
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease;
}
.eureko-team-card--link:hover {
	transform: translateY(-4px);
}
.eureko-team-card--link:hover .eureko-team-card__name {
	color: var(--eureko-primary);
}

/* Contact-only team card (e.g. jednatel) — non-link card with tel:/mailto: links. */
.eureko-team-card__contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.25rem;
}
.eureko-team-card__contact-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--eureko-text);
	text-decoration: none;
	font-size: 1rem;
	line-height: 1.4;
}
.eureko-team-card__contact-link:hover {
	color: var(--eureko-primary);
}
.eureko-team-card__contact-link .material-symbols-outlined {
	font-size: 1.25rem;
	color: var(--eureko-primary);
}

/* Contact block on the team-member detail hero. */
.eureko-tym-detail__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	margin-top: 1.25rem;
}
.eureko-tym-detail__contact-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--eureko-text);
	text-decoration: none;
	font-size: 1.0625rem;
	font-weight: 500;
}
.eureko-tym-detail__contact-link:hover {
	color: var(--eureko-primary);
}
.eureko-tym-detail__contact-link .material-symbols-outlined {
	font-size: 1.375rem;
	color: var(--eureko-primary);
}

/* ==========================================================================
   Tým — member detail (single-tym.php)
   ========================================================================== */
.eureko-tym-detail__role {
	font-family: var(--eureko-font-heading);
	font-size: 1.25rem;
	color: var(--eureko-primary);
	margin: -0.5rem 0 1.25rem;
}
.eureko-tym-detail__bio p {
	margin: 0 0 1rem;
}
.eureko-tym-detail__bio p:last-child {
	margin-bottom: 0;
}
.eureko-tym-detail__hero-cta {
	margin-top: 2rem;
}
.eureko-tym-detail__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	border-radius: inherit;
}

/* 718:15641 — the member photo is 640×530, not the 804×536 plate the other
   heroes use, so the hero columns are closer to even here. */
.eureko-tym-detail__image {
	aspect-ratio: 640 / 530;
	border-radius: var(--eureko-radius-xl);
	overflow: hidden;
}

.eureko-tym-detail__info {
	padding-block: 2rem;
}
/* Each list block is heading + two bullet columns, with the design's hairline
   between blocks (Line 5 / Line 6 at 718:15712 and 718:15736). */
.eureko-tym-detail__section {
	padding-block: 2.5rem;
	border-bottom: 1px solid var(--eureko-border);
}
.eureko-tym-detail__section:last-child {
	border-bottom: none;
}
.eureko-tym-detail__section-heading {
	font-family: var(--eureko-font-heading);
	font-size: var(--eureko-fs-display-l);
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0 0 1.5rem;
}
/* 🔴 Must stay `display: block`. A previous pass set `display: grid` here and
   `columns: 2` in the media query — multi-column layout does not apply to a grid
   container, so the two-column split was silently ignored and all 19 courses
   stacked in one column. Item spacing therefore comes from margin, not `gap`. */
.eureko-tym-detail__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.eureko-tym-detail__item {
	position: relative;
	padding-left: 1.25rem;
	margin-bottom: 1rem;
	color: var(--eureko-muted);
	line-height: 1.4;
	break-inside: avoid;
}
.eureko-tym-detail__item:last-child {
	margin-bottom: 0;
}
.eureko-tym-detail__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--eureko-primary);
}
/* 718:15718 — cream card, radius 24, 48/64 padding, 24px between the heading and
   the list. Items are Captions/L: 18px at line-height 1.2 in Neutral 700, and
   the design underlines them. */
.eureko-tym-detail__card {
	background: var(--eureko-cream);
	border-radius: var(--eureko-radius-l);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.eureko-tym-detail__card .eureko-tym-detail__section-heading {
	color: #353e5c;
	margin-bottom: 0;
}
.eureko-tym-detail__card .eureko-tym-detail__item {
	color: #353e5c;
	font-size: 1.125rem;
	line-height: 1.2;
	text-decoration: underline;
	text-underline-position: from-font;
	margin-bottom: 1rem;
}
.eureko-tym-detail__card .eureko-tym-detail__item::before {
	top: 0.35em;
}
.eureko-tym-detail__bio p {
	color: var(--eureko-muted);
	line-height: 1.7;
	margin: 0 0 1rem;
}
.eureko-tym-detail__bio p:last-child {
	margin-bottom: 0;
}

.eureko-tym-detail__colleagues {
	padding-block: 3rem;
}
.eureko-tym-detail__section-title {
	font-family: var(--eureko-font-heading);
	font-size: 2rem;
	font-weight: 500;
	color: var(--eureko-text);
	margin: 0 0 2rem;
}
@media (min-width: 768px) {
	/* Two bullet columns (718:15656 / 718:15684 — 664 + 128 gutter + 664).
	   `columns` rather than a 2-col grid: the lists differ wildly in length and
	   the design balances them by height, exactly as the Ceník categories do. */
	.eureko-tym-detail__list {
		columns: 2;
		column-gap: 8rem;
	}
	.eureko-tym-detail__list--single {
		columns: 1;
	}
	/* 718:15713 — „Co dělám" beside the card. When only one of the two is present
	   (most members have no `tym_specializace`), it must not sit in a half-width
	   column with dead space beside it. */
	.eureko-tym-detail__section--split:has(> * + *) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8rem;
		align-items: start;
	}
	/* With no card beside it, „Co dělám" was running the full 1584px container —
	   ~200 characters a line. It keeps the design's column width instead. */
	.eureko-tym-detail__section--split:not(:has(> * + *)) .eureko-tym-detail__about {
		max-width: calc(50% - 4rem);
	}
}
@media (min-width: 1024px) {
	.eureko-tym-detail__info {
		padding-block: 4rem;
	}
	.eureko-tym-detail__section {
		padding-block: 4rem;
	}
	.eureko-tym-detail__section-heading {
		margin-bottom: 2rem;
	}
	.eureko-tym-detail__card {
		padding: 3rem 4rem;
	}
}

/* ==========================================================================
   Před/Po — listing page
   ========================================================================== */
.eureko-predpo-hero__label {
	font-weight: 600;
	color: var(--eureko-text);
	margin: 1.75rem 0 1rem;
}
.eureko-predpo-hero__features {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.875rem 2rem;
}
.eureko-predpo-hero__feature {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--eureko-text);
	line-height: 1.3;
}
.eureko-predpo-hero__feature-icon {
	color: var(--eureko-primary);
	font-size: 1.5rem;
	flex-shrink: 0;
}
.eureko-predpo-hero__ratings {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
}
.eureko-predpo-rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.eureko-predpo-rating__logo {
	font-family: var(--eureko-font-heading);
	font-weight: 700;
	color: var(--eureko-text);
	font-size: 1.25rem;
}
.eureko-predpo-rating__score {
	font-weight: 700;
	color: var(--eureko-text);
}
.eureko-predpo-rating__stars {
	color: #f5b50a;
	letter-spacing: 1px;
}
.eureko-predpo-rating__count {
	font-size: 0.8125rem;
	color: var(--eureko-muted);
	width: 100%;
}

.eureko-predpo-section {
	padding-block: 1rem 4rem;
}
.eureko-predpo-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem 1.5rem;
}
.eureko-predpo-grid .eureko-case-card {
	width: 100%;
	background: transparent;
}
@media (min-width: 600px) {
	.eureko-predpo-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.eureko-predpo-hero__features {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.eureko-predpo-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.eureko-predpo-section {
		padding-block: 2rem 6rem;
	}
}

/* The Tělocvična equipment row used to hand-roll its own list; it now goes
   through `media-text`'s shared `items` / `items_columns` args, so
   `.eureko-telocvicna-equip*` was removed. */

/* ==========================================================================
   Vybavení — equipment grid
   ========================================================================== */
.eureko-vybaveni-section {
	padding-block: 1rem 4rem;
	/* Only the hero carries the cream band; the body default would show through. */
	background: var(--eureko-white);
}
.eureko-vybaveni-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem 2rem;
}
.eureko-vybaveni-card {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.eureko-vybaveni-card__photo {
	aspect-ratio: 3 / 2;
	border-radius: 1rem;
	overflow: hidden;
	background: var(--eureko-border);
}
.eureko-vybaveni-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/*
 * Shown for the devices the client has not photographed yet. A bare grey box
 * read as a broken image, so it now centres a muted icon on the cream ground —
 * clearly "no photo yet" rather than "this failed to load".
 */
.eureko-vybaveni-card__placeholder {
	width: 100%;
	height: 100%;
	background: var(--eureko-cream);
	border: 1px dashed var(--eureko-border);
	display: flex;
	align-items: center;
	justify-content: center;
}
.eureko-vybaveni-card__placeholder .material-symbols-outlined {
	font-size: 2.5rem;
	color: var(--eureko-border);
}
.eureko-vybaveni-card__info {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
/* Figma 718:15564 — Heading 4 (Catamaran Medium 24) over Body/M at 1.7. */
.eureko-vybaveni-card__name {
	font-size: 1.5rem;
	letter-spacing: 0;
	margin: 0;
	color: var(--eureko-text);
	line-height: 1.2;
}
.eureko-vybaveni-card__desc {
	font-size: 1rem;
	color: #6d758f;
	margin: 0;
	line-height: 1.7;
}

/* Linked variant — whole card is clickable via the title's stretched link. */
.eureko-vybaveni-card--linked {
	position: relative;
	transition: transform 0.2s ease;
}
.eureko-vybaveni-card--linked:hover {
	transform: translateY(-4px);
}
.eureko-vybaveni-card__link {
	color: inherit;
	text-decoration: none;
}
.eureko-vybaveni-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.eureko-vybaveni-card--linked:hover .eureko-vybaveni-card__link {
	color: var(--eureko-primary);
}
.eureko-vybaveni-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--eureko-primary);
}
.eureko-vybaveni-card__more .material-symbols-outlined {
	font-size: 1.125rem;
	transition: transform 0.2s ease;
}
.eureko-vybaveni-card--linked:hover .eureko-vybaveni-card__more .material-symbols-outlined {
	transform: translateX(3px);
}

/* --- Vybavení detail (single-vybaveni.php) --- */
.eureko-vybaveni-single__subtitle {
	font-family: var(--eureko-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 2rem 0 1rem;
	color: var(--eureko-text);
}
.eureko-vybaveni-single__indications {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.625rem;
}
.eureko-vybaveni-single__indication {
	position: relative;
	padding-left: 1.5rem;
	color: var(--eureko-muted);
	line-height: 1.5;
}
.eureko-vybaveni-single__indication::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--eureko-primary);
}
@media (min-width: 768px) {
	.eureko-vybaveni-single__indications {
		grid-template-columns: 1fr 1fr;
		column-gap: 1.5rem;
	}
}

@media (min-width: 600px) {
	.eureko-vybaveni-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.eureko-vybaveni-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.eureko-vybaveni-section {
		padding-block: 2rem 6rem;
	}
}

/* ==========================================================================
   Půjčovna motodlah
   ========================================================================== */
/* Shared brown notice card. The design uses ONE component for this everywhere it
   states a price or a condition — Figma 718:16137 (Půjčovna hero) and 718:15799
   (program drawer) are the same node. `.eureko-orto-note`, the class the drawer
   and the Skupinové cvičení hero were already using, had no CSS at all, so those
   two rendered as bare text beside a raw 48px `info` glyph.
   NOT merged with `.eureko-kontakt-hero__notice`: that one carries a two-link
   body and its own padding, and the ambulance hero pairs the two classes. */
.eureko-note-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #b97e46;
	border-radius: var(--eureko-radius-s, 12px);
	padding: 1.5rem;
	margin: 0.5rem 0 0;
}
.eureko-note-card__icon {
	font-size: 3rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.3);
	flex-shrink: 0;
}
.eureko-note-card__text {
	margin: 0;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--eureko-white);
}
@media (min-width: 768px) {
	.eureko-note-card {
		padding: 1.5rem 2.5rem;
	}
}
/* The hero band is the page's only cream area; the hero itself is transparent. */
.eureko-page-motodlah .eureko-cenik-hero {
	background: transparent;
}
.eureko-poukaz-steps--3 .eureko-orto-steps__list {
	gap: 2rem 3rem;
}
@media (min-width: 768px) {
	.eureko-poukaz-steps--3 .eureko-orto-steps__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Mám poukaz — 5-step guide card
   ========================================================================== */
.eureko-poukaz-steps {
	padding-block: 2rem;
}
.eureko-poukaz-steps__card {
	background: #f1f3f5;
	border-radius: var(--eureko-radius-xl, 32px);
	padding: 2.5rem 1.5rem;
}
.eureko-poukaz-steps__title {
	font-size: 1.75rem;
	color: var(--eureko-text);
	text-align: center;
	margin: 0 0 2.5rem;
	line-height: 1.3;
}
.eureko-poukaz-steps__action {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
}
@media (min-width: 1024px) {
	.eureko-poukaz-steps {
		padding-block: 3rem;
	}
	.eureko-poukaz-steps__card {
		padding: 3.5rem 4rem;
	}
}

/* ==========================================================================
   Pro samoplátce — self-payer price card
   ========================================================================== */
/*
 * Figma 718:10316. The page reuses the ambulance body grid (983 / 89 / 512),
 * so most of the work here is the media-less hero and the price card that now
 * sits INSIDE the main column (718:10356) rather than in its own band.
 */
/* `body` carries the cream `--eureko-bg`, so everything below the band inherits
   it. Only the hero band is cream in the frame — the rest is white. */
.eureko-page-samoplatce {
	background: var(--eureko-white);
}
.eureko-samoplatce-pricing__card {
	margin-bottom: 0;
}
.eureko-samoplatce-pricing__action {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
}
/* 718:10359 — Heading 3 (28px), against the shared card's 24px. */
.eureko-samoplatce-pricing__card .eureko-cenik-card__title {
	font-size: 1.75rem;
	color: #353e5c;
	margin-bottom: 1rem;
}
/* Hero: copy only. The frame has no media column and no insurer strip, so the
   band ends where the hero does. */
.eureko-samoplatce-hero .eureko-orto-hero__content {
	max-width: 40.9375rem; /* 655 */
}
/* 718:10351 — Heading 2 is 32px here; the ambulance pages' Display M (40px) is
   a different token, so it is stepped down page-wide rather than globally. */
.eureko-page-samoplatce .eureko-orto-info__title {
	font-size: 2rem;
	margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
	.eureko-samoplatce-hero .eureko-orto-hero__inner {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Light theme, per Figma 718:6868 (and this file's own docblock — the CSS had
   never actually been flipped and was still painting a dark band). */
.eureko-footer {
	background: var(--eureko-white);
	color: var(--eureko-text);
}
.eureko-footer .eureko-contact-cta__visit-title,
.eureko-footer .eureko-contact-cta__hours-label {
	color: var(--eureko-text);
}
.eureko-footer .eureko-contact-cta__address,
.eureko-footer .eureko-contact-cta__hours {
	color: #6d758f;
}
.eureko-footer .eureko-contact-cta__directions {
	color: var(--eureko-muted);
}
.eureko-footer .eureko-contact-cta__directions:hover {
	color: var(--eureko-primary);
}

/* Link columns */
.eureko-footer__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem 3rem;
	padding-block: 1rem 3rem;
}
/* H6 title with the 34x3px green rule beneath it (a ::after, so the columns
   need no extra markup). */
.eureko-footer__column-title {
	font-family: var(--eureko-font-heading);
	font-weight: 500;
	font-size: 1.25rem;   /* H6 = 20px */
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0 0 1rem;
}
.eureko-footer__column-title::after {
	content: '';
	display: block;
	width: 34px;
	height: 3px;
	margin-top: 1rem;
	background: var(--eureko-primary);
}
.eureko-footer__column-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.eureko-footer__column-links li {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}
/* 8px bullet dot preceding every link — Figma fills it flat #EAEAEB, not a
   green tint. */
.eureko-footer__column-links li::before {
	content: '';
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #eaeaeb;
}
.eureko-footer__column-links a {
	color: #353e5c;
	text-decoration: none;
	font-size: 0.875rem;   /* Text S = 14px */
	line-height: 1.2;
	transition: color var(--eureko-transition);
}
.eureko-footer__column-links a:hover {
	color: var(--eureko-primary);
}
/* Leaf with no page yet — same type as a link, no hover, no pointer. Matches
   how eureko_services_menu()'s unresolved leaves render in both menus. */
.eureko-footer__column-text {
	color: #353e5c;
	font-size: 0.875rem;
	line-height: 1.2;
}

/* Insurance partners — full-width white band, hairline top and bottom. */
.eureko-footer__partners {
	border-top: 1px solid #eaeaeb;
	border-bottom: 1px solid #eaeaeb;
	background: var(--eureko-white);
	padding-block: 2rem;
}
.eureko-footer__partners-inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.eureko-footer__partners-label {
	font-family: var(--eureko-font-heading);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	color: var(--eureko-text);
	margin: 0;
	flex-shrink: 0;
}
.eureko-footer__partners-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2.1875rem;
	flex: 1;
	min-width: 0;
}
.eureko-footer__partner {
	display: flex;
	align-items: center;
}
.eureko-footer__partner img {
	max-width: 100%;
	object-fit: contain;
}

/* Legal / copyright bar */
.eureko-footer__legal {
	padding-block: 1.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	text-align: center;
}
.eureko-footer__copyright {
	font-size: 0.875rem;
	line-height: 1.2;
	color: #6d758f;
	margin: 0;
}
.eureko-footer__legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
}
.eureko-footer__legal-links a {
	font-size: 0.875rem;
	color: #6d758f;
	text-decoration: none;
}
.eureko-footer__legal-links a:hover {
	color: var(--eureko-primary);
}

@media (min-width: 600px) {
	.eureko-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	/* Label and logos share one row once there is room for it. */
	.eureko-footer__partners-inner {
		flex-direction: row;
		align-items: center;
		gap: 2.1875rem;
	}
}

@media (min-width: 900px) {
	.eureko-footer__columns {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1200px) {
	.eureko-footer__columns {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 2.5rem 1.5rem;
	}
	.eureko-footer__legal {
		flex-direction: row;
		gap: 2rem;
	}
}

/* ==========================================================================
   Reviews page — hero
   ========================================================================== */

/* Figma 718:14390 — the cream comes from the enclosing `.eureko-hero-band`
   (see page-recenze.php), so the section itself is transparent. */
.eureko-reviews-hero {
	background: transparent;
	padding-block: 3rem 4rem;
	position: relative;
	z-index: 1;
}
.eureko-reviews-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
.eureko-reviews-hero__content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Breadcrumb */
.eureko-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--eureko-fs-sm);
	line-height: 1.3;
	color: var(--eureko-muted);
}
.eureko-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}
.eureko-breadcrumb__item + .eureko-breadcrumb__item::before {
	content: "›";
	color: var(--eureko-muted);
	opacity: 0.55;
	font-size: 1.125em;
	line-height: 1;
}
.eureko-breadcrumb__link {
	color: var(--eureko-muted);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	transition: color var(--eureko-transition);
}
.eureko-breadcrumb__link:hover {
	color: var(--eureko-primary);
}
.eureko-breadcrumb__home-icon {
	font-size: 1.125rem;
	line-height: 1;
}
.eureko-breadcrumb__item--current {
	color: var(--eureko-text);
	font-weight: 500;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 100%;
}
/* Normalize breadcrumb→heading gap to 2rem across the flex-gap heroes
   (their __content uses gap:1.25rem; +0.75rem margin = 2rem, matching inner-hero/kontakt). */
.eureko-reviews-hero__content .eureko-breadcrumb,
.eureko-cenik-hero__content .eureko-breadcrumb,
.eureko-metoda-hero__content .eureko-breadcrumb,
.eureko-orto-hero__content .eureko-breadcrumb {
	margin-bottom: 0.75rem;
}

/* Rating bar strip */
.eureko-reviews-rating-bar {
	background: var(--eureko-cream);
	border-top: 1px solid var(--eureko-border);
	padding-block: 1.25rem;
}

/* ==========================================================================
   Reviews page — grid
   ========================================================================== */

.eureko-reviews-grid {
	background: #fff;
	padding-block: 3.5rem 4rem;
}
.eureko-reviews-grid__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
.eureko-reviews-grid__empty {
	text-align: center;
	color: var(--eureko-muted);
	padding: 3rem 0;
}

@media (min-width: 768px) {
	.eureko-reviews-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.eureko-reviews-grid__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Review card
   ========================================================================== */

/* Figma 654:10200 — white card, hairline border, soft warm shadow. */
.eureko-review-card {
	position: relative;
	background: var(--eureko-white);
	border: 1px solid #eaeaeb;
	border-radius: 1rem;   /* 16px */
	box-shadow: 0 2px 2px rgba(243, 238, 231, 0.8);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
/* Decorative quote mark behind the opening text — Figma node 654:10201, a
   73x53 pair of slanted bars filled #EFF5E8. It is a real asset, not a
   typographic quote: the glyph shape does not match. */
.eureko-review-card::before {
	content: '';
	position: absolute;
	left: 0.875rem;   /* Figma left 14 */
	top: 3.4375rem;   /* Figma top 55 */
	width: 4.5625rem; /* 73px */
	height: 3.3125rem;/* 53px */
	background: url('../images/decor/quote.svg') center / contain no-repeat;
	pointer-events: none;
}
/* Figma 654:10203 — five 16px stars on a 20px pitch, filled #F08929. Painted
   through a mask so the empty state is just a colour swap; the previous ★ glyph
   rendered a different shape and metrics per platform. */
.eureko-review-card__stars {
	display: flex;
	gap: 4px;
}
.eureko-review-card__star {
	width: 16px;
	height: 16px;
	background-color: #f08929;
	-webkit-mask: url('../images/icons/star-rating.svg') center / contain no-repeat;
	mask: url('../images/icons/star-rating.svg') center / contain no-repeat;
}
.eureko-review-card__star--empty {
	background-color: #eaeaeb;
}
.eureko-review-card__text {
	position: relative;
	font-size: 1rem;
	color: #6d758f;
	line-height: 1.7;
	margin: 0;
	flex: 1;
}
.eureko-review-card__author {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
}
.eureko-review-card__avatar {
	width: 3rem;   /* 48px */
	height: 3rem;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--eureko-border);
	display: flex;
	align-items: center;
	justify-content: center;
}
.eureko-review-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eureko-review-card__avatar-initials {
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--eureko-muted);
	text-transform: uppercase;
}
.eureko-review-card__author-info {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}
.eureko-review-card__author-name {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.32px;
	color: var(--eureko-text);
	margin: 0;
}
/* Green leading calendar glyph, matching the blog card's meta row. */
.eureko-review-card__date {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0;
}
.eureko-review-card__date::before {
	content: 'calendar_today';
	font-family: 'Material Symbols Outlined';
	font-size: 0.875rem;
	line-height: 1;
	color: var(--eureko-primary);
}

/* ==========================================================================
   Reviews pagination
   ========================================================================== */

.eureko-reviews-pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
}
.eureko-reviews-pagination .page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
}
.eureko-reviews-pagination .page-numbers li a,
.eureko-reviews-pagination .page-numbers li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--eureko-radius-s);
	font-size: var(--eureko-fs-sm);
	font-weight: 600;
	color: var(--eureko-text);
	text-decoration: none;
	border: 1px solid var(--eureko-border);
	transition: background var(--eureko-transition), color var(--eureko-transition);
}
.eureko-reviews-pagination .page-numbers li a:hover {
	background: var(--eureko-primary);
	color: #fff;
	border-color: var(--eureko-primary);
}
.eureko-reviews-pagination .page-numbers li span.current {
	background: var(--eureko-primary);
	color: #fff;
	border-color: var(--eureko-primary);
}

/* ==========================================================================
   Ceník page — hero
   ========================================================================== */

.eureko-cenik-hero {
	background: var(--eureko-cream);
	padding-block: 3rem 2.5rem;
}
.eureko-cenik-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
.eureko-cenik-hero__content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.eureko-cenik-hero__title {
	font-size: var(--eureko-fs-display-l);
	color: var(--eureko-text);
	margin: 0;
	line-height: 1.15;
}
.eureko-cenik-hero__lead {
	font-size: var(--eureko-fs-lg);
	color: var(--eureko-muted);
	margin: 0;
	font-style: italic;
	line-height: 1.6;
}
.eureko-cenik-hero__book-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	padding-top: 0.5rem;
}
.eureko-cenik-hero__phone {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.eureko-cenik-hero__phone-label {
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-text);
}
.eureko-cenik-hero__phone-number {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--eureko-text);
	text-decoration: none;
}
.eureko-cenik-hero__phone-number:hover {
	color: var(--eureko-primary);
}
.eureko-cenik-hero__phone-hours {
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-muted);
}

/*
 * "Contact small" (Figma 718:15556) — the header's phone block reused beside a
 * hero CTA: 56px avatar, availability dot, 20px number. Opt-in wrapper, so the
 * older book-bars that use a bare `__phone` are unchanged.
 */
.eureko-cenik-hero__contact {
	display: flex;
	align-items: center;
	gap: 1.0625rem;
	padding-left: 0.5rem;
}
.eureko-cenik-hero__contact-avatar {
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	overflow: hidden;
	display: block;
}
.eureko-cenik-hero__contact-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eureko-cenik-hero__contact .eureko-cenik-hero__phone-label,
.eureko-cenik-hero__contact .eureko-cenik-hero__phone-hours {
	font-size: 0.875rem;
	color: var(--eureko-muted);
	line-height: 1.2;
}
.eureko-cenik-hero__contact .eureko-cenik-hero__phone-number {
	display: flex;
	align-items: center;
	gap: 0.8125rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	margin-block: 0.125rem;
}
.eureko-cenik-hero__phone-dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--eureko-primary);
	flex-shrink: 0;
}

/* --- Vybavení / Tělocvična / Ceník hero (Figma 718:15534, 718:15958, 718:13872):
       655 / 125 / 804 on the 1584 container, with the brand leaf behind. */
@media (min-width: 1024px) {
	.eureko-page-vybaveni .eureko-cenik-hero__inner,
	.eureko-page-telocvicna .eureko-cenik-hero__inner,
	.eureko-page-cenik .eureko-cenik-hero__inner {
		grid-template-columns: 655fr 804fr;
		gap: 7.8125rem;
		align-items: center;
	}
	.eureko-page-vybaveni .eureko-cenik-hero__image,
	.eureko-page-telocvicna .eureko-cenik-hero__image,
	.eureko-page-cenik .eureko-cenik-hero__image {
		height: auto;
		aspect-ratio: 804 / 536;
	}
	.eureko-page-vybaveni .eureko-cenik-hero__title,
	.eureko-page-telocvicna .eureko-cenik-hero__title,
	.eureko-page-cenik .eureko-cenik-hero__title {
		font-size: 3.5rem;
	}
}
/*
 * Hero decor is `template-parts/components/hero-shapes.php` — the SAME circle +
 * curve the homepage hero uses, styled by the shared `.eureko-hero__shape--*`
 * rules further up this file. Nothing page-specific, and no separate asset:
 * earlier attempts here used leaf-cream.svg (a small `usp-about` leaf) and a
 * composite export, and both rendered wrong.
 */
.eureko-page-vybaveni .eureko-cenik-hero,
.eureko-page-telocvicna .eureko-cenik-hero,
.eureko-page-cenik .eureko-cenik-hero {
	position: relative;
	overflow: hidden;
}
.eureko-page-vybaveni .eureko-cenik-hero .eureko-container,
.eureko-page-telocvicna .eureko-cenik-hero .eureko-container,
.eureko-page-cenik .eureko-cenik-hero .eureko-container {
	position: relative;
	z-index: 1;
}
.eureko-page-vybaveni .eureko-cenik-hero__lead,
.eureko-page-telocvicna .eureko-cenik-hero__lead,
.eureko-page-cenik .eureko-cenik-hero__lead {
	font-style: normal;
	font-size: 1.25rem;
	line-height: 1.7;
}

/*
 * Tělocvična — everything below the cream hero is white in the design; the
 * body default (cream) would otherwise show through these transparent sections.
 */
.eureko-page-telocvicna .eureko-media-text,
.eureko-page-telocvicna .eureko-sluzba-programs,
.eureko-page-telocvicna .eureko-gallery {
	background: var(--eureko-white);
}
.eureko-cenik-hero__image {
	display: none;
}
.eureko-cenik-hero__image-placeholder {
	width: 100%;
	height: 100%;
	border-radius: var(--eureko-radius-l);
	background: var(--eureko-border);
}
.eureko-cenik-hero__image-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--eureko-radius-l);
}

/* Centered text hero (Plánování rehabilitací and similar) */
.eureko-centered-hero {
	background: var(--eureko-cream);
	padding-block: 3rem 2.5rem;
	text-align: center;
}
.eureko-centered-hero .eureko-breadcrumb {
	justify-content: flex-start;
}
.eureko-centered-hero__title {
	font-size: var(--eureko-fs-display-l);
	color: var(--eureko-text);
	margin: 2rem 0 1rem;
	line-height: 1.15;
}
.eureko-centered-hero__lead {
	color: var(--eureko-muted);
	max-width: 60rem;
	margin: 0 auto;
	line-height: 1.6;
}
.eureko-centered-hero__action {
	margin-top: 1.5rem;
	display: flex;
	justify-content: center;
}

/* Inside a hero band the cream comes from the band, so the hero is transparent
   and the title steps up to Display XL (718:15281). Scoped to the band so
   Plánování rehabilitací keeps its current treatment until that page is synced. */
.eureko-hero-band .eureko-centered-hero {
	background: transparent;
	padding-block: 3rem 4rem;
	position: relative;
	z-index: 1;
}
.eureko-hero-band .eureko-centered-hero__title {
	font-size: var(--eureko-fs-display-xl);
	margin-bottom: 0;
}
/*
 * 🔴 A text-only hero needs the band's height pinned, or the brand mark is cut in
 * half. The shared `__decor::before` places the mark at `top: 18.2%`, which was
 * derived from the tall image heroes (Ceník / Kontakt) where the band runs ~895px
 * — there, 18.2% ≈ the frame's 163px offset. On this hero the band is only as
 * tall as its content (~235px), so 18.2% collapses to ~43px, the head alone
 * consumes the remaining height and the shoulder curve never renders.
 *
 * Both numbers are really ONE measurement off the 1920 canvas — the mark sits
 * 163px down (8.49vw) and the band runs 617px (32.13vw) — so expressing them in
 * vw keeps the crop identical at every width, instead of drifting with however
 * tall the copy happens to be. Scoped to this band; the image heroes are unchanged.
 */
@media (min-width: 768px) {
	.eureko-rezervace-band {
		min-height: 32.13vw;
	}
	.eureko-rezervace-band .eureko-hero-band__decor::before {
		top: 8.49vw;
	}
}
/*
 * Text-only cream band, shared by Plánování rehabilitací (718:15154) and Mám
 * poukaz (718:15102) — identical frames apart from the hero button. `body`
 * carries the cream background, so the page below the band must be painted
 * white.
 */
.eureko-page-poukaz,
.eureko-page-plan {
	background: var(--eureko-white);
}
.eureko-plan-band .eureko-hero-band__decor {
	z-index: 0;
}
.eureko-plan-band > *:not(.eureko-hero-band__decor) {
	position: relative;
	z-index: 1;
}
/*
 * Band geometry, measured off 718:15155 on the 1920 canvas: the rectangle runs
 * y43 → y875 (832 tall = 43.33vw) and the „How it works" card starts at y514 —
 * i.e. 361px (18.8vw) of the card rides UP into the cream, the same arrangement
 * Rezervace uses for its embed. The hero copy only fills y217→450, so the band
 * needs an explicit height; content alone would leave it far too short.
 */
@media (min-width: 1024px) {
	/* Shortened from the frame's 43.33vw at the user's request — the design
	   leaves a large empty stretch of cream under the lead. */
	.eureko-plan-band {
		min-height: 30vw;
	}
	.eureko-plan-band + .eureko-steps-cards {
		margin-top: -12vw;
		position: relative;
		z-index: 2;
	}
	/* Mám poukaz's hero carries an extra element (the pill), so the card's
	   overlap has to be shallower or it covers the button. */
	.eureko-page-poukaz .eureko-plan-band + .eureko-steps-cards {
		margin-top: -4vw;
	}
	/* 718:15150 — the hero pill sits 40px under the lead. */
	.eureko-centered-hero__action {
		margin-top: 2.5rem;
	}
	/* Title 56px / lead 20px, centred on a 779px measure (718:15252/15253). */
	.eureko-plan-band .eureko-centered-hero {
		padding-block: 5.5rem 0;
	}
	.eureko-plan-band .eureko-centered-hero__lead {
		max-width: 48.6875rem;
		margin-inline: auto;
	}
}
/* Stacking, stated explicitly for this band: the mark is always the BACK layer
   and everything else in the band paints over it, so any hero image or video
   added here covers the SVG rather than sitting under it. The shared rule only
   lifts a direct `.eureko-cenik-hero` child, which this text hero is not. */
.eureko-rezervace-band .eureko-hero-band__decor {
	z-index: 0;
}
.eureko-rezervace-band > *:not(.eureko-hero-band__decor) {
	position: relative;
	z-index: 1;
}
/*
 * The card is not stacked BELOW the band — it rides UP into it, exactly where a
 * hero image would sit. In the frame the band spans y 43→660 while the card
 * starts at y 372, so 288px of the card overlaps the cream and covers the mark.
 * In canvas fractions: card top = 329/1920 = 17.14vw below the band top, band
 * height = 32.13vw, so the pull-up is the difference, ~15vw. Same vw model as
 * the decor above, so the overlap holds at every width.
 */
@media (min-width: 768px) {
	.eureko-page-rezervace .eureko-embed-slot {
		margin-top: -15vw;
		padding-top: 0;
		position: relative;
		z-index: 1;
	}
}

/* `.eureko-simple-hero` (the old full-width image hero) was removed with the
   Rezervační systém sync — 718:15254 has no hero image, and it was that page's
   only caller. */

/* ==========================================================================
   Embed slot — where a third-party widget is dropped in (Figma 718:15273)
   ========================================================================== */

/*
 * A white card matching the steps card's treatment, holding whatever ACF
 * `rezervace_embed` contains. Until the booking system is installed it shows the
 * design's own grey placeholder line, so the page never looks broken.
 */
.eureko-embed-slot {
	padding-block: 2.5rem;
}
.eureko-embed-slot__card {
	background: var(--eureko-white);
	border-radius: var(--eureko-radius-l, 24px);
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
	padding: 2.5rem 1.5rem;
	min-height: 20rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.eureko-embed-slot__placeholder {
	margin: 0;
	font-family: var(--eureko-font-heading);
	font-weight: 500;
	font-size: 1.75rem;
	line-height: 1.2;
	text-align: center;
	color: #d3d3d3;
}
/* The embedded widget owns the full card width. */
.eureko-embed-slot__card > *:not(.eureko-embed-slot__placeholder) {
	width: 100%;
}
@media (min-width: 1024px) {
	.eureko-embed-slot {
		padding-block: 3rem;
	}
	.eureko-embed-slot__card {
		padding: 5rem;
		min-height: 41rem;
	}
	.eureko-embed-slot__placeholder {
		font-size: var(--eureko-fs-display-m);
	}
}

@media (min-width: 1024px) {
	.eureko-cenik-hero__inner {
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: 4rem;
	}
	.eureko-cenik-hero__image {
		display: block;
		height: 440px;
	}
}

/* --- Náš tým hero (Figma 718:11239) -------------------------------------
   Scoped to this page: `.eureko-cenik-hero` is shared with Ceník and the other
   inner pages, which have not been synced to the 1920px set yet.
   Design: text column 655 / image 804×536 on the 1584 container, title Display
   XL 56, lead Body XL 20 (not italic), 24px stack gap. The insurer strip sits
   INSIDE the cream band rather than on white below it. */
/* One cream rectangle behind hero + insurer strip (Figma 718:11240), carrying
   the decorative mark. `overflow: hidden` is what clips the mark to the band —
   safe here because this page's strip is an inline section, not the floating
   variant that deliberately overhangs a hero edge. */
.eureko-tym-band,
.eureko-hero-band {
	position: relative;
	background: var(--eureko-cream);
	overflow: hidden;
}
/* Mirrors `.eureko-hero`: visible from 768px up so the floating insurer card can
   overhang the band's bottom edge instead of being clipped in half. */
@media (min-width: 768px) {
	.eureko-tym-band,
	.eureko-hero-band {
		overflow: visible;
	}
}
.eureko-tym-band > .eureko-cenik-hero,
.eureko-hero-band > .eureko-cenik-hero {
	position: relative;
	z-index: 1;
}
/* Decor clipper — the direct equivalent of `.eureko-hero__shapes`. */
.eureko-tym-band__decor,
.eureko-hero-band__decor {
	display: block;
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
/* Figma 718:11241 — left-anchored, 1047 wide on the 1920 canvas, starting 163px
   down the band. Same asset as about-clinic; it is filled #f7f4f0, identical to
   the band, so it must be a MASK painted #f3eee7 (the design's own tint,
   sampled off the node) — as a background-image it renders invisible. */
.eureko-tym-band__decor::before,
.eureko-hero-band__decor::before {
	content: '';
	position: absolute;
	left: 0;
	top: 18.2%;
	width: 54.53vw;
	aspect-ratio: 1047 / 1288;
	background: #f3eee7;
	-webkit-mask: url('../images/decor/leaf-cream.svg') left top / contain no-repeat;
	mask: url('../images/decor/leaf-cream.svg') left top / contain no-repeat;
	z-index: 0;
	pointer-events: none;
}
@media (max-width: 767px) {
	.eureko-tym-band__decor,
	.eureko-hero-band__decor {
		display: none;
	}
}
.eureko-page-tym .eureko-cenik-hero {
	padding-block: 4rem 0;
	background: transparent;
}
/* Same spacing contract as the homepage: the hero reserves --eureko-strip-above
   below its content, the floating card straddles the band edge, and the next
   section clears it with --eureko-strip-below. */
@media (min-width: 768px) {
	.eureko-page-tym .eureko-cenik-hero {
		padding-bottom: var(--eureko-strip-above);
	}
	.eureko-page-tym .eureko-team-grid-section {
		padding-top: var(--eureko-strip-below);
	}
}
.eureko-page-tym .eureko-cenik-hero__content {
	gap: 1.5rem;
}
.eureko-page-tym .eureko-cenik-hero__lead {
	font-style: normal;
	font-size: 1.25rem;
	line-height: 1.7;
}
/* Team grid sits on white — the cream band ends below the insurer strip, as in
   Figma (the cream rectangle is 895px tall). */
.eureko-page-tym .eureko-team-grid-section {
	background: var(--eureko-white);
}
@media (min-width: 1024px) {
	.eureko-page-tym .eureko-cenik-hero__title {
		font-size: 3.5rem;
	}
	.eureko-page-tym .eureko-cenik-hero__inner {
		grid-template-columns: 41.35% 50.76%;
		justify-content: space-between;
		gap: 0;
		align-items: center;
	}
	.eureko-page-tym .eureko-cenik-hero__image {
		height: 33.5rem; /* 536px */
	}
}

/* --- Detail člena týmu (Figma 718:15627) --------------------------------
   Only the hero band is cream. `body` carries the cream `--eureko-bg`, so every
   section below the band inherited it; the frame puts them all on white. */
.eureko-tym-detail {
	background: var(--eureko-white);
}
.eureko-tym-detail .eureko-cenik-hero {
	background: transparent;
	padding-block: 3rem 4rem;
}
/* Fallback plate for members with no cut-out yet: 640×530, radius 32. */
.eureko-tym-detail__image {
	border-radius: var(--eureko-radius-xl);
	overflow: hidden;
}
.eureko-tym-detail__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	border-radius: inherit;
}
/*
 * 718:15641 — a background-removed cut-out in a 640×530 window that CLIPS it, so
 * the shoulders run off the bottom flush with the cream band's edge.
 *
 * The frame's own numbers: the box is `overflow: hidden`, no radius, and the
 * image sits at width 99.56% / height 183.67% / top −14.62%. Scaling to 183.67%
 * of the box height while filling its width is exactly `object-fit: cover` for a
 * portrait source. The −14.62% top offset is 77.5px of a 447.8px vertical
 * overflow, i.e. `object-position: center 17%` — which keeps the head just below
 * the top edge whatever the source crop happens to be.
 */
.eureko-tym-detail__image--cutout {
	border-radius: 0;
	overflow: hidden;
	align-self: end;
}
/*
 * 🔴 `cover` + a top offset crops the head. The frame can afford it because its
 * source is a full portrait with headroom above the hair; OUR cut-outs are
 * cropped to the alpha bbox, so the very first pixel row IS the top of the head
 * and any downward offset slices it off.
 * `contain` + bottom anchoring gives the same result the design is after — whole
 * person, shoulders flush with the band edge — without cutting anything. The
 * silhouette is narrower than the 640 window; the spare width is transparent.
 */
.eureko-tym-detail__image--cutout .eureko-tym-detail__photo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	border-radius: 0;
}
/*
 * Desktop framing, tunable via these two numbers:
 *   --cutout-zoom — how much wider than the column the portrait is drawn, so the
 *                   person reads larger; the overflow is transparent margin.
 *   the box ratio — set so roughly the bottom 30% of the portrait is clipped by
 *                   the window, leaving a head-and-torso crop on the band edge.
 * Anchored top so the head is never cut (our cut-outs start at the hairline).
 */
@media (min-width: 1024px) {
	.eureko-tym-detail__image--cutout {
		--cutout-zoom: 1.45;  /* portrait drawn wider than the column */
		--cutout-shift: 16%;  /* positive = toward the container's RIGHT edge */
		aspect-ratio: 640 / 620;
	}
	.eureko-tym-detail__image--cutout .eureko-tym-detail__photo {
		width: calc(100% * var(--cutout-zoom));
		height: auto;
		margin-inline: calc((100% - 100% * var(--cutout-zoom)) / 2);
		transform: translateX(var(--cutout-shift));
		object-fit: contain;
		object-position: center top;
	}
}
@media (min-width: 1024px) {
	.eureko-tym-detail .eureko-cenik-hero__title {
		font-size: 3.5rem;
	}
	/* 655 copy / 149 gutter / 640 photo on the 1584 container. Percentages, not
	   fr: fr would stretch the photo across the 140px the design leaves empty on
	   the right. */
	.eureko-tym-detail .eureko-cenik-hero__inner {
		grid-template-columns: 41.35% 40.4%;
		gap: 9.41%;
		align-items: center;
	}
	/* Beats the generic `.eureko-cenik-hero__image { height: 440px }` further up,
	   which was squashing the plate and breaking its aspect ratio. */
	.eureko-tym-detail .eureko-cenik-hero__image {
		height: auto;
		aspect-ratio: 640 / 530;
	}
	/* The image reaches the band's edge by overhanging the hero's bottom padding,
	   NOT by removing it — zeroing the padding pushed the „Objednat se" button
	   hard against the band border. The copy column keeps its 4rem; only the
	   portrait pulls past it. */
	.eureko-tym-detail__image--cutout {
		margin-bottom: -4rem;
	}
}

/* ==========================================================================
   Ceník page — insurance strip
   ========================================================================== */

.eureko-cenik-insurance {
	border-top: 1px solid var(--eureko-border);
	border-bottom: 1px solid var(--eureko-border);
	padding-block: 1.25rem;
	background: var(--eureko-cream);
}
.eureko-cenik-insurance__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
}
.eureko-cenik-insurance__label {
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-muted);
	margin: 0;
	white-space: nowrap;
}
.eureko-cenik-insurance__logos {
	display: flex;
	flex: 1;
	gap: 1rem;
}
.eureko-cenik-insurance__logo-placeholder {
	flex: 1;
	height: 3.5rem;
	border-radius: var(--eureko-radius-s);
	background: var(--eureko-border);
	min-width: 4rem;
}

/* ==========================================================================
   Ceník page — price cards
   ========================================================================== */

.eureko-cenik-prices {
	background: #fff;
	padding-block: 3rem 4rem;
}
/* Section head — title left, tan info card right (Figma 718:13900). */
.eureko-cenik-prices__head {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 3rem;
}
.eureko-cenik-prices__title {
	font-size: 2rem;
	margin: 0 0 1rem;
}
.eureko-cenik-prices__intro-text {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--eureko-muted);
}
.eureko-cenik-prices__info {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #b97e46;
	border-radius: var(--eureko-radius-s);
	padding: 1.5rem;
}
.eureko-cenik-prices__info-icon {
	font-size: 3rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.3);
	flex-shrink: 0;
}
.eureko-cenik-prices__info-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 600;
	color: #fff;
}

/*
 * Two balanced columns of cards. CSS columns rather than a grid: the ten
 * categories have wildly different row counts, and the design stacks them by
 * height, not in fixed pairs.
 */
.eureko-cenik-prices__grid {
	column-gap: 2.5rem;
}
.eureko-cenik-card {
	background: var(--eureko-cream);
	border-radius: var(--eureko-radius-l);
	padding: 1.75rem;
	margin-bottom: 2.5rem;
	break-inside: avoid;
}
.eureko-cenik-card__title {
	font-size: 1.5rem;
	color: var(--eureko-text);
	margin: 0 0 1rem;
}
.eureko-cenik-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Zebra rows: the odd row is a white pill, the even one is the panel itself. */
.eureko-cenik-card__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	border-radius: 6px;
	font-size: var(--eureko-fs-base);
	line-height: 1.2;
	color: var(--eureko-muted);
}
.eureko-cenik-card__row:nth-child(odd) {
	background: var(--eureko-white);
}
.eureko-cenik-card__name {
	flex: 1;
}
.eureko-cenik-card__price {
	font-weight: 700;
	white-space: nowrap;
	color: var(--eureko-muted);
}
.eureko-cenik-prices__notes {
	margin-top: 1rem;
}
.eureko-cenik-prices__note {
	margin: 0 0 0.375rem;
	font-size: var(--eureko-fs-sm);
	line-height: 1.6;
	color: var(--eureko-muted);
}
.eureko-cenik-prices__note:last-child {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.eureko-cenik-prices__head {
		grid-template-columns: 1fr 1fr;
		gap: 6.25rem;
		align-items: start;
	}
	.eureko-cenik-prices__info {
		padding: 1.5rem 2.5rem;
	}
	.eureko-cenik-prices__grid {
		columns: 2;
	}
	.eureko-cenik-card {
		padding: 3rem;
	}
	.eureko-cenik-card__row {
		padding: 1.5rem;
	}
}

/*
 * Ceník uses the SAME arrangement as Náš tým: `.eureko-hero-band` supplies the
 * cream + decor, and the FLOATING strip straddles the band edge. The old
 * page-scoped `--band` gradient hack is gone; do not bring it back.
 */
.eureko-page-cenik .eureko-cenik-hero {
	position: relative;
	background: transparent;
	overflow: visible;
	padding-block: 4rem 0;
}
/* Same spacing contract as the homepage and Náš tým. */
@media (min-width: 768px) {
	.eureko-page-cenik .eureko-cenik-hero {
		padding-bottom: var(--eureko-strip-above);
	}
	.eureko-page-cenik .eureko-cenik-prices {
		padding-top: var(--eureko-strip-below);
	}
}
.eureko-page-cenik .eureko-cenik-prices {
	background: var(--eureko-white);
}

/* ==========================================================================
   Ceník page — CTA banner
   ========================================================================== */

/*
 * Contact stripe (Figma 718:11739) — light-green bar, NOT the old dark slab.
 * Geometry as fractions of the 1584 container: photo 185w at x31 / y-17 (it
 * deliberately overflows the 155-tall bar and is clipped), content column
 * starts at x245 = 15.47%, button right edge 55px from the end.
 */
.eureko-cenik-cta-banner {
	background: var(--eureko-white);
	padding-block: 2.25rem;
}
.eureko-cenik-cta-banner__inner {
	position: relative;
	overflow: hidden;
	background: #eff5e8;
	border-radius: var(--eureko-radius-l);
	padding: 2rem 1.5rem;
}
/* Same asset and the same rule as the contact CTA: each vector already carries
   opacity="0.1" from Figma, so NEVER add a CSS opacity layer on top. */
.eureko-cenik-cta-banner__decor {
	position: absolute;
	left: 0;
	top: 0;
	width: 49.1%;
	aspect-ratio: 778 / 316;
	background: url('../images/decor/cta-leaves.svg') left top / contain no-repeat;
	pointer-events: none;
	z-index: 0;
}
.eureko-cenik-cta-banner__photo {
	display: none;
}
.eureko-cenik-cta-banner__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 3rem;
}
.eureko-cenik-cta-banner__left {
	flex: 1;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.eureko-cenik-cta-banner__title {
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	letter-spacing: 0.02em;
	color: var(--eureko-text);
	margin: 0;
}
.eureko-cenik-cta-banner__hours {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1rem;
	color: var(--eureko-muted);
	margin: 0;
}
.eureko-cenik-cta-banner__dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--eureko-primary);
	flex-shrink: 0;
}
.eureko-cenik-cta-banner__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3rem;
}
.eureko-cenik-cta-banner__contact {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.eureko-cenik-cta-banner__contact-label {
	font-size: 1rem;
	color: var(--eureko-muted);
	line-height: 1.2;
}
.eureko-cenik-cta-banner__contact-value {
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--eureko-muted);
	text-decoration: underline;
	line-height: 1.2;
}
.eureko-cenik-cta-banner__contact-value:hover {
	color: var(--eureko-primary);
}
.eureko-cenik-cta-banner__action .eureko-btn {
	min-width: 15.125rem;
}

@media (min-width: 1024px) {
	.eureko-cenik-cta-banner__inner {
		min-height: 9.6875rem;   /* 155px */
		display: flex;
		align-items: center;
		padding: 1.5rem 3.47% 1.5rem 15.47%;
	}
	.eureko-cenik-cta-banner__content {
		flex: 1;
		flex-wrap: nowrap;
	}
	.eureko-cenik-cta-banner__photo {
		display: block;
		position: absolute;
		left: 1.96%;
		top: -11%;
		width: 11.68%;
		height: 178%;
		z-index: 1;
	}
	.eureko-cenik-cta-banner__photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
	}
}
.eureko-btn--outline-white {
	background: transparent;
	border: 2px solid rgba(255,255,255,0.6);
	color: #fff;
}
.eureko-btn--outline-white:hover {
	background: #fff;
	color: var(--eureko-text);
	border-color: #fff;
}

/* ==========================================================================
   Ceník page — FAQ accordion
   ========================================================================== */

/* Figma 718:6867 — the whole block is a cream rounded panel inset in the
   container, NOT a full-bleed white band. */
.eureko-cenik-faq {
	background: var(--eureko-white);
	padding-block: 3.5rem 4rem;
}
.eureko-cenik-faq__inner {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	background: var(--eureko-cream);
	border-radius: var(--eureko-radius-l);
	padding: clamp(2rem, 5vw, 5rem) clamp(1.25rem, 8.5vw, 8.4375rem);
}
.eureko-cenik-faq__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
}
.eureko-cenik-faq__title {
	font-size: var(--eureko-fs-display-l);   /* Display L = 48px */
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0;
}
.eureko-cenik-faq__main {
	display: flex;
	flex-direction: column;
	gap: 1.4375rem;   /* Figma 23px */
	min-width: 0;
}
/* Category filter pills — active is the dark fill, the rest are white. */
.eureko-cenik-faq__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.eureko-cenik-faq__filter {
	border: none;
	cursor: pointer;
	padding: 0.75rem 1.5rem;
	border-radius: var(--eureko-radius-pill);
	background: var(--eureko-white);
	color: var(--eureko-text);
	font-family: var(--eureko-font-heading);
	font-weight: 700;
	font-size: 1.0625rem;   /* 17px */
	line-height: 1;
	transition: background 0.2s ease, color 0.2s ease;
}
.eureko-cenik-faq__filter.is-active {
	background: var(--eureko-text);
	color: var(--eureko-white);
}
.eureko-cenik-faq__accordion {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.eureko-faq-item {
	background: var(--eureko-white);
	border: none;
	border-radius: var(--eureko-radius-s);   /* 12px */
	overflow: hidden;
	box-shadow: 0 2px 2px #e9e1d6;
}
.eureko-faq-item[hidden] {
	display: none;
}
.eureko-faq-item__trigger {
	width: 100%;
	background: none;
	border: none;
	padding: 1rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	text-align: left;
}
.eureko-faq-item__q {
	font-family: var(--eureko-font-heading);   /* Heading 6 = 20px / 500 */
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
}
.eureko-faq-item__trigger:hover .eureko-faq-item__q {
	color: var(--eureko-primary);
}
.eureko-faq-item__icon {
	font-size: 1.5rem;   /* 24px */
	line-height: 1;
	flex-shrink: 0;
	color: var(--eureko-primary);
}
.eureko-faq-item__body {
	padding: 0 1.5rem 1rem;
	font-size: 0.875rem;   /* 14px / 22px */
	line-height: 1.571;
	color: #6d758f;
}
.eureko-faq-item__body p {
	margin: 0;
}
.eureko-faq-item__body[hidden] {
	display: none;
}

@media (min-width: 1024px) {
	.eureko-cenik-faq__inner {
		/* Figma: 378px heading column, 157px gutter. */
		grid-template-columns: 23.625rem 1fr;
		align-items: start;
		gap: clamp(3rem, 10vw, 9.8125rem);
	}
	/* Brand mark bleeding off the panel's lower-left, behind the heading.
	   leaf-cream.svg is filled #F7F4F0 — identical to this panel's background —
	   so it must be painted through a mask, not used as a background-image. */
	.eureko-cenik-faq__inner::before {
		content: '';
		position: absolute;
		/* Figma places the group 16px outside the panel's left edge and 74px down
		   from its top, 528px wide, bleeding off the bottom (the panel clips it).
		   aspect-ratio pins the box to leaf-cream.svg's own 362x351 so `contain`
		   fills it exactly and the mark is never stretched. */
		left: -1rem;
		top: 4.625rem;
		bottom: auto;
		width: 33rem;
		height: auto;
		aspect-ratio: 362 / 351;
		background: #f3eee7;
		-webkit-mask: url('../images/decor/leaf-cream.svg') center / contain no-repeat;
		mask: url('../images/decor/leaf-cream.svg') center / contain no-repeat;
		pointer-events: none;
		z-index: 0;
	}
	.eureko-cenik-faq__header,
	.eureko-cenik-faq__main {
		position: relative;
		z-index: 1;
	}
}

/* ==========================================================================
   Ceník page — reviews strip
   ========================================================================== */

.eureko-cenik-reviews {
	background: var(--eureko-white);
	padding-block: 3.5rem 4rem;
}
.eureko-cenik-reviews__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.eureko-cenik-reviews__title {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);   /* Display M = 40px */
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0;
}
/* Carousel, per Figma 654:10217 — three 511px cards fill the 1581px container
   exactly (511*3 + 24*2), so the next one peeks past the right edge. */
.eureko-cenik-reviews__slide {
	flex: 0 0 auto;
	width: min(31.9375rem, 85vw);
	display: flex;
}
.eureko-cenik-reviews__slide .eureko-review-card {
	width: 100%;
}
/* The arrow is vertically centred on the row and carries no white ring here
   (unlike the team carousel). The base rule pins it to the team card height. */
.eureko-cenik-reviews .eureko-carousel__arrow {
	top: 50%;
	border: none;
	box-shadow: 0 2px 8px rgba(61, 72, 86, 0.1);
}
/* Kept inside the container edges — an ancestor with overflow clipping would
   otherwise swallow a negative offset. */
.eureko-cenik-reviews .eureko-carousel__arrow--prev {
	left: 0;
}
.eureko-cenik-reviews .eureko-carousel__arrow--next {
	right: 0;
}
/* The track has to overflow the container for the peek to read, but the arrows
   must stay reachable, so only the scroll axis is clipped. */
.eureko-cenik-reviews__carousel {
	position: relative;
}
.eureko-cenik-reviews__carousel .eureko-carousel__track {
	gap: 1.5rem;
	align-items: stretch;
	padding-block: 0.5rem;
}

/* ==========================================================================
   Kontakt page — hero
   ========================================================================== */

/* Cream + decor come from the enclosing `.eureko-hero-band` (page-kontakt.php). */
.eureko-kontakt-hero {
	position: relative;
	z-index: 1;
	background: transparent;
	padding-block: 4rem 0;
}
/* Same spacing contract as the homepage / Náš tým / Ceník. */
@media (min-width: 768px) {
	.eureko-kontakt-hero {
		padding-bottom: var(--eureko-strip-above);
	}
	.eureko-page-kontakt .eureko-kontakt-features {
		padding-top: var(--eureko-strip-below);
	}
}
/* Only the hero band is beige; every section below it sits on white. */
.eureko-page-kontakt {
	background: var(--eureko-white);
}
.eureko-kontakt-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
.eureko-kontakt-hero__content .eureko-breadcrumb {
	margin-bottom: 2rem;
}
/* Figma 718:12301 — the column is a 24px-gap stack; the contacts are plain
   text (no cards) and the notice is a solid #b97e46 bar. */
.eureko-kontakt-hero__title {
	font-family: var(--eureko-font-heading);
	font-size: clamp(2.5rem, 5vw, 3.5rem); /* Display XL 56px */
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0 0 1.5rem;
}
.eureko-kontakt-hero__lead {
	font-size: 1.25rem; /* Text XL 20px */
	color: var(--eureko-muted);
	line-height: 1.7;
	margin: 0;
}
.eureko-kontakt-hero__contacts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2rem;
	padding-block: 1.5rem;
}
.eureko-kontakt-hero__contact {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.eureko-kontakt-hero__contact-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--eureko-primary);
	margin-right: 13px;
	vertical-align: middle;
}
.eureko-kontakt-hero__contact-value {
	display: block;
	font-family: var(--eureko-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem); /* Display M 40px */
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	text-decoration: none;
	white-space: nowrap;
}
.eureko-kontakt-hero__contact-value:hover {
	color: var(--eureko-primary);
}
.eureko-kontakt-hero__contact-hours {
	display: block;
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--eureko-muted);
}
.eureko-kontakt-hero__notice {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #b97e46;
	border-radius: 12px;
	padding: 1.5rem 2.5rem;
}
.eureko-kontakt-hero__notice-icon {
	flex-shrink: 0;
	font-size: 48px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.3);
}
.eureko-kontakt-hero__notice-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 600;
	color: #fff;
}
.eureko-kontakt-hero__notice-link {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}
.eureko-kontakt-hero__notice-link:hover,
.eureko-kontakt-hero__notice-link:focus-visible {
	text-decoration-thickness: 2px;
}
@media (max-width: 479px) {
	.eureko-kontakt-hero__notice {
		padding: 1.25rem 1.25rem;
	}
}
.eureko-kontakt-hero__media {
	display: none;
}
.eureko-kontakt-hero__image-placeholder {
	width: 100%;
	height: 100%;
	background: #e8e4df;
	border-radius: var(--eureko-radius-l);
}
.eureko-kontakt-hero__image-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Figma 718:12299 — the back plate is radius 32; the front portrait
	   (718:12300) is deliberately square-cornered. */
	border-radius: var(--eureko-radius-xl);
}
.eureko-kontakt-hero__image--front .eureko-kontakt-hero__image-img {
	border-radius: 0;
	object-position: center top;
}

@media (min-width: 1024px) {
	/* Figma: copy column 655, media column the rest of the 1584 container. */
	.eureko-kontakt-hero__inner {
		grid-template-columns: 655fr 804fr;
		align-items: start;
		gap: 7.8125rem;
	}
	/*
	 * Two-photo collage (718:12299 + 718:12300), positioned in units of the
	 * 804-wide plate: the tall portrait is 534/804 = 66.4% wide, 667/536 = 124%
	 * of the plate's height, and starts 80px LEFT of it (-9.95%) so it hangs
	 * over the copy column exactly as in the design.
	 */
	.eureko-kontakt-hero__media {
		display: block;
		position: relative;
		width: 100%;
		aspect-ratio: 804 / 536;
	}
	.eureko-kontakt-hero__image--back {
		position: absolute;
		inset: 0;
	}
	.eureko-kontakt-hero__image--front {
		position: absolute;
		left: -9.95%;
		top: 4.48%;      /* 241-217 = 24px on the 536 plate */
		width: 66.42%;
		height: 124.44%;
		z-index: 1;
	}
}

/* ==========================================================================
   Kontakt page — notice box
   ========================================================================== */

.eureko-kontakt-notice {
	padding-block: 1.5rem;
}
/* Figma 718:12315 — icon + text, 40/24 padding, 16px gap. */
.eureko-kontakt-notice__box {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #fdf6d3;
	border: 1px solid #f0e4a8;
	border-radius: var(--eureko-radius-s, 12px);
	padding: 1.25rem 1.5rem;
}
.eureko-kontakt-notice__icon {
	flex: none;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--eureko-text);
	opacity: 0.45;
}
.eureko-kontakt-notice__text {
	font-size: var(--eureko-fs-base);
	color: var(--eureko-muted);
	margin: 0;
	line-height: 1.5;
}
.eureko-kontakt-notice__link {
	color: var(--eureko-primary);
	text-decoration: underline;
	margin-left: 0.25rem;
}

/* ==========================================================================
   Kontakt page — facility features
   ========================================================================== */

.eureko-kontakt-features {
	padding-block: 3rem;
}
.eureko-kontakt-features__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 1.5rem;
}
/* Figma 718:12324 — cream card, 48px padding, 80px icon tile above the copy. */
.eureko-kontakt-features__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	background: var(--eureko-cream);
	border-radius: var(--eureko-radius-l);
	padding: 1.75rem;
}
.eureko-kontakt-features__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	/* Figma 718:12325 — green tile, radius 51 on an 80px box (reads as a
	   squircle), holding the design's own 48px white glyph. */
	border-radius: 51px;
	background: var(--eureko-primary);
	margin-bottom: 0.5rem;
}
.eureko-kontakt-features__glyph {
	display: block;
	width: 3rem;
	height: 3rem;
}
.eureko-kontakt-features__title {
	font-family: var(--eureko-font-heading);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0;
}
.eureko-kontakt-features__text {
	font-size: 1rem;
	color: var(--eureko-muted);
	margin: 0;
	line-height: 1.7;
}
@media (min-width: 768px) {
	.eureko-kontakt-features__item {
		padding: 3rem;
	}
}

@media (min-width: 768px) {
	.eureko-kontakt-features__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   Kontakt page — opening hours + map + address
   ========================================================================== */

/* Figma 718:12352 — ONE green-tinted panel (rgba(99,157,33,0.1)) at radius 24
   with 64px padding, holding three equal columns: the white hours card, the
   map, and the address. The brand mark is clipped at the panel's right edge. */
.eureko-kontakt-hours {
	padding-block: 3rem;
	background: var(--eureko-white);
}
.eureko-kontakt-hours__panel {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 2.5rem;
	padding: 2rem;
	border-radius: var(--eureko-radius-l);
	background: rgba(99, 157, 33, 0.1);
}
/* Same mark as the hero band; painted white-ish so it reads over the green
   tint. 411x506 at left 1155 / top 166 on the 1584x457 panel. */
.eureko-kontakt-hours__decor {
	display: none;
	position: absolute;
	left: 72.9%;
	top: 36.3%;
	width: 25.95%;
	aspect-ratio: 1047 / 1288;
	/* A DEEPER green than the panel, not a white highlight: the panel is the
	   brand green at 10%, the mark composites to roughly 18% over it. */
	background: rgba(99, 157, 33, 0.09);
	-webkit-mask: url('../images/decor/leaf-cream.svg') left top / contain no-repeat;
	mask: url('../images/decor/leaf-cream.svg') left top / contain no-repeat;
	pointer-events: none;
	z-index: 0;
}

/* ---- Hours card ---- */
.eureko-kontakt-hours__card {
	position: relative;
	z-index: 1;
	background: var(--eureko-white);
	border-radius: var(--eureko-radius-m, 20px);
	padding: 2rem;
}
.eureko-kontakt-hours__card-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--eureko-font-heading);
	font-size: 1.375rem; /* H5 22px */
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0 0 0.9375rem;
}
.eureko-kontakt-hours__card-icon {
	font-size: 24px;
	color: #a8a9ab;
}
.eureko-kontakt-hours__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.eureko-kontakt-hours__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 12px;
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--eureko-muted);
	border-bottom: 1px solid #eaeaeb;
}
.eureko-kontakt-hours__row--active {
	background: rgba(99, 157, 33, 0.1);
	border-radius: 12px;
	border-bottom-color: transparent;
	font-weight: 700;
}
.eureko-kontakt-hours__day {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 80px;
}
.eureko-kontakt-hours__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--eureko-primary);
	flex-shrink: 0;
}
.eureko-kontakt-hours__time {
	white-space: nowrap;
}
/* ---- Map ---- */
.eureko-kontakt-hours__map {
	position: relative;
	z-index: 1;
	display: block;
	border-radius: var(--eureko-radius-xl);
	overflow: hidden;
}
.eureko-kontakt-hours__map img {
	display: block;
	width: 100%;
	aspect-ratio: 803 / 577;
	object-fit: cover;
}

/* ---- Address ---- */
.eureko-kontakt-hours__address-col {
	position: relative;
	z-index: 1;
}
.eureko-kontakt-hours__heading {
	font-family: var(--eureko-font-heading);
	font-size: 2rem; /* H2 32px */
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0 0 1.5rem;
}
.eureko-kontakt-hours__address {
	font-style: normal;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--eureko-muted);
	margin: 0 0 1.5rem;
}
.eureko-kontakt-hours__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}
.eureko-kontakt-hours__navigate {
	font-size: 1.125rem;
	line-height: 1.7;
	color: #497b11;
	text-decoration: underline;
	text-underline-position: from-font;
}
/* Button/Secondary — outline only, Catamaran Bold 15px / 2px tracking. */
.eureko-kontakt-hours__directions-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 12px 16px;
	border: 1px solid #505460;
	border-radius: var(--eureko-radius-pill, 200px);
	font-family: var(--eureko-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.2;
	color: #505460;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.eureko-kontakt-hours__directions-link:hover,
.eureko-kontakt-hours__directions-link:focus-visible {
	background: var(--eureko-primary);
	border-color: var(--eureko-primary);
	color: #fff;
}

@media (min-width: 768px) {
	.eureko-kontakt-hours__panel {
		grid-template-columns: 1fr 1fr;
		padding: 3rem;
	}
	.eureko-kontakt-hours__address-col {
		grid-column: 1 / -1;
	}
}
@media (min-width: 1024px) {
	.eureko-kontakt-hours {
		padding-block: 4rem;
	}
	.eureko-kontakt-hours__panel {
		grid-template-columns: repeat(3, 1fr);
		gap: 2.5rem;
		padding: 4rem;
	}
	.eureko-kontakt-hours__address-col {
		grid-column: auto;
	}
	.eureko-kontakt-hours__decor {
		display: block;
	}
}

/* ==========================================================================
   Kontakt page — gallery
   ========================================================================== */

.eureko-kontakt-gallery {
	padding-block: 3rem;
}
.eureko-kontakt-gallery__title {
	font-size: var(--eureko-fs-display-m);
	color: var(--eureko-text);
	margin: 0 0 1.5rem;
}
.eureko-kontakt-gallery__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
.eureko-kontakt-gallery__placeholder {
	width: 100%;
	aspect-ratio: 4/3;
	background: #e8e4df;
	border-radius: 20px;
}
.eureko-kontakt-gallery__image {
	display: block;
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 20px;
}

@media (min-width: 768px) {
	.eureko-kontakt-gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Kontakt page — USP strip
   ========================================================================== */

.eureko-kontakt-usp {
	padding-block: 4rem;
	background: var(--eureko-cream);
}
.eureko-kontakt-usp__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}
.eureko-kontakt-usp__headline {
	font-size: var(--eureko-fs-display-m);
	color: var(--eureko-text);
	margin: 0 0 1.5rem;
	line-height: 1.35;
}
.eureko-kontakt-usp__features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}
.eureko-kontakt-usp__feature {
	display: flex;
	gap: 0.875rem;
	align-items: flex-start;
}
.eureko-kontakt-usp__feature-icon {
	font-size: 2rem;
	color: var(--eureko-primary);
	flex-shrink: 0;
	margin-top: 0.1rem;
}
.eureko-kontakt-usp__feature-title {
	font-family: var(--eureko-font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--eureko-text);
	margin: 0 0 0.3rem;
}
.eureko-kontakt-usp__feature-text {
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-muted);
	margin: 0;
	line-height: 1.55;
}

@media (min-width: 1024px) {
	.eureko-kontakt-usp__inner {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}

/* ==========================================================================
   O nás page — white sections, cream hero only
   ========================================================================== */

.eureko-page-onas {
	background: #fff;
}

/* ==========================================================================
   Reusable inner-page hero (inner-hero)
   ========================================================================== */

.eureko-inner-hero {
	background: var(--eureko-cream);
	padding-block: 2.5rem 3rem;
	position: relative;
}
.eureko-inner-hero__content {
	margin-top: 2rem;
	max-width: 42rem;
}

/* Hero carrying the floating insurance strip — reserve space so the card
   straddles the hero's bottom edge, exactly like the homepage hero. */
.eureko-inner-hero--has-insurance {
	padding-bottom: 2rem;
}
@media (min-width: 768px) {
	.eureko-inner-hero--has-insurance {
		overflow: visible;
		padding-bottom: var(--eureko-strip-above);
	}
	/* Clear the half-overlapping card on the white section directly below,
	   whichever section that happens to be. */
	.eureko-inner-hero--has-insurance + .eureko-intro-features,
	.eureko-inner-hero--has-insurance + .eureko-usp {
		padding-top: var(--eureko-strip-below);
	}
}
.eureko-inner-hero--center .eureko-inner-hero__content {
	margin-inline: auto;
	text-align: center;
}
.eureko-inner-hero__title {
	font-size: var(--eureko-fs-display-l);
	color: var(--eureko-text);
	margin: 0 0 1rem;
	line-height: 1.15;
}
.eureko-inner-hero__lead {
	font-size: var(--eureko-fs-lg);
	color: var(--eureko-muted);
	margin: 0;
	line-height: 1.6;
}
.eureko-inner-hero__action {
	margin-top: 2rem;
}

/* Photo hero (Figma 718:10772) — full-bleed image behind the copy, darkened so
   the white text keeps its contrast whatever the photo does. */
/* NOTE: no `overflow: hidden` here. The floating insurance strip is an absolute
   child that deliberately hangs past the hero's bottom edge — clipping the
   section cuts the card in half. The photo is clipped by __bg instead. */
.eureko-inner-hero--media {
	background: var(--eureko-dark);
}
.eureko-inner-hero--media .eureko-container {
	position: relative;
	z-index: 1;
}
.eureko-inner-hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.eureko-inner-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Crop pulled toward the top: these are group/portrait shots and a centred
	 * crop slices heads off. Not flush `top` — measured against the O nás group
	 * photo, faces sit at 22–44% of the source, so a 0% band would cut the front
	 * row's chins while showing only ceiling above. 25% keeps every face inside
	 * the band with margin at both edges.
	 */
	object-position: center 25%;
	display: block;
}
.eureko-inner-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(28, 32, 28, 0.62) 0%, rgba(28, 32, 28, 0.42) 50%, rgba(28, 32, 28, 0.22) 100%);
}
.eureko-inner-hero--media .eureko-inner-hero__title,
.eureko-inner-hero--media .eureko-inner-hero__lead,
.eureko-inner-hero--media .eureko-breadcrumb,
.eureko-inner-hero--media .eureko-breadcrumb__link,
.eureko-inner-hero--media .eureko-breadcrumb__item {
	color: var(--eureko-white);
}
.eureko-inner-hero--media .eureko-inner-hero__lead {
	color: rgba(255, 255, 255, 0.85);
}
@media (min-width: 768px) {
	.eureko-inner-hero--media {
		display: flex;
		align-items: center;
		min-height: 32rem;
	}
	/* The container is a flex item here — keep it full width. */
	.eureko-inner-hero--media > .eureko-container {
		width: 100%;
	}
	.eureko-inner-hero--media .eureko-inner-hero__content {
		max-width: 41rem;
	}
}

/* ==========================================================================
   Reusable intro-features (heading + CTA | 2×2 feature grid)
   ========================================================================== */

.eureko-intro-features {
	padding-block: 3.5rem;
}
.eureko-intro-features__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
.eureko-intro-features__headline {
	font-size: var(--eureko-fs-display-m);
	color: var(--eureko-text);
	margin: 0 0 1.5rem;
	line-height: 1.3;
}
.eureko-intro-features__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
}
.eureko-intro-feature {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}
.eureko-intro-feature__icon {
	font-size: 2rem;
	color: var(--eureko-primary);
	flex-shrink: 0;
	margin-top: 0.1rem;
}
.eureko-intro-feature__title {
	font-size: 1.0625rem;
	color: var(--eureko-text);
	margin: 0 0 0.35rem;
	line-height: 1.25;
}
.eureko-intro-feature__desc {
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-muted);
	margin: 0;
	line-height: 1.55;
}

@media (min-width: 768px) {
	.eureko-intro-features__grid {
		grid-template-columns: 1fr 1fr;
		gap: 1.75rem 2.5rem;
	}
}
@media (min-width: 1024px) {
	.eureko-intro-features__inner {
		grid-template-columns: 1fr 1.6fr;
		gap: 4rem;
		align-items: start;
	}
}

/* ==========================================================================
   Reusable media + text row (media-text)
   ========================================================================== */

.eureko-media-text {
	padding-block: 2.5rem;
}
.eureko-media-text__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	align-items: center;
}
.eureko-media-text__placeholder {
	width: 100%;
	aspect-ratio: 642 / 360;
	background: #e8e4df;
	border-radius: var(--eureko-radius-l);
}
.eureko-media-text__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--eureko-radius-l);
	display: block;
}
/* Figma Heading/Display M — Catamaran Medium 40px / 1.2, not 30px Bold. */
.eureko-media-text__title {
	font-size: var(--eureko-fs-display-m);
	color: var(--eureko-text);
	margin: 0 0 1.25rem;
	line-height: 1.2;
}
.eureko-media-text__text {
	font-size: var(--eureko-fs-base);
	color: var(--eureko-muted);
	margin: 0 0 1rem;
	line-height: 1.65;
}
.eureko-media-text__text:last-of-type {
	margin-bottom: 0;
}
.eureko-media-text__action {
	margin-top: 1.75rem;
}

@media (min-width: 768px) {
	.eureko-media-text__inner {
		grid-template-columns: 1fr 1fr;
		gap: 3.5rem;
	}
	.eureko-media-text--image-right .eureko-media-text__media {
		order: 2;
	}
	.eureko-media-text--image-right .eureko-media-text__body {
		order: 1;
	}
}

/*
 * Panel variant (Figma 718:15874) — the row becomes one cream rounded card,
 * with the photo bleeding to the panel's edge instead of sitting inset. The
 * inner grid loses its gap so the two halves meet exactly at the midpoint.
 */
.eureko-media-text--panel {
	/* The gutter moves to the section, so the panel can bleed to its own edge. */
	padding-inline: 1.5rem;
}
@media (min-width: 768px) {
	.eureko-media-text--panel {
		padding-inline: 3rem;
	}
}
.eureko-media-text--panel .eureko-media-text__inner {
	background: var(--eureko-cream);
	border-radius: var(--eureko-radius-xl);
	overflow: hidden;
	gap: 0;
	padding-inline: 0;
}
.eureko-media-text--panel .eureko-media-text__body {
	padding: clamp(2rem, 5vw, 4.5rem);
}
.eureko-media-text--panel .eureko-media-text__image,
.eureko-media-text--panel .eureko-media-text__placeholder {
	border-radius: 0;
	height: 100%;
	aspect-ratio: auto;
	min-height: 18rem;
}
.eureko-media-text--panel .eureko-media-text__media {
	align-self: stretch;
}
@media (min-width: 768px) {
	.eureko-media-text--panel .eureko-media-text__inner {
		align-items: stretch;
	}
	.eureko-media-text--panel .eureko-media-text__body {
		align-self: center;
	}
}

/*
 * Optional bullet list under the copy (Figma 718:15976 / 718:16003) — an 8px
 * dot, 12px in from the text, 18px copy. `--2` splits it into the design's two
 * columns once there is room; below that it stays a single column so the
 * reading order never breaks across a fold.
 */
.eureko-media-text__list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}
.eureko-media-text__item {
	position: relative;
	padding-left: 1.25rem;
	font-size: 1.125rem;
	line-height: 1.35;
	color: var(--eureko-muted);
}
.eureko-media-text__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--eureko-primary);
}
@media (min-width: 768px) {
	.eureko-media-text__list--2 {
		grid-template-columns: 1fr 1fr;
		column-gap: 2.5rem;
	}
}
.eureko-media-text__list + .eureko-media-text__action {
	margin-top: 2rem;
}

/* ==========================================================================
   Steps cards — "Jak probíhá …" (Figma 718:16044)
   ========================================================================== */

/*
 * A white card holding cream step cards. The connector arrows are the design's
 * own export (718:16076/16096) — one mirrored — placed between the columns and
 * dropped entirely once the grid stacks, where they would point nowhere.
 */
.eureko-steps-cards {
	padding-block: 2rem;
}
.eureko-steps-cards__card {
	background: var(--eureko-white);
	border-radius: var(--eureko-radius-l, 24px);
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
	padding: 2.5rem 1.5rem;
}
.eureko-steps-cards__title {
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--eureko-text);
	text-align: center;
	margin: 0 0 2rem;
}
.eureko-steps-cards__grid {
	position: relative;
	display: grid;
	gap: 1.5rem;
}
.eureko-steps-cards__step {
	background: var(--eureko-cream);
	border-radius: var(--eureko-radius-s, 12px);
	padding: 2.5rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
}
.eureko-steps-cards__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	flex-shrink: 0;
	border: 3px solid var(--eureko-primary);
	border-radius: 50%;
	font-family: var(--eureko-font-heading);
	font-weight: 500;
	font-size: 3rem;
	line-height: 1;
	color: var(--eureko-primary);
	margin-bottom: 1rem;
}
.eureko-steps-cards__step-title {
	font-family: var(--eureko-font-heading);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0;
}
.eureko-steps-cards__rule {
	display: block;
	width: 34px;
	height: 3px;
	background: var(--eureko-primary);
}
.eureko-steps-cards__step-desc {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--eureko-muted);
}
/* The row stacks below 1024px, where a horizontal connector means nothing.
   ⚠️ This must stay ABOVE the media query — the `display: block` inside it has
   the same specificity, so a later base rule would silently win. */
.eureko-steps-cards__arrow {
	display: none;
}
.eureko-steps-cards__action {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
}
@media (min-width: 1024px) {
	.eureko-steps-cards {
		padding-block: 3rem;
	}
	.eureko-steps-cards__card {
		padding: 5rem;
	}
	.eureko-steps-cards__title {
		font-size: 2.5rem;
		margin-bottom: 2rem;
	}
	.eureko-steps-cards__grid {
		grid-template-columns: repeat(var(--steps, 3), 1fr);
	}
	.eureko-steps-cards__step {
		border-radius: 1rem;
		padding: 3rem 2rem;
	}
	.eureko-steps-cards__step-title {
		font-size: 1.75rem;
	}
	/*
	 * Connectors sit over the gutters, level with the numerals. One element per
	 * gutter, placed at `--i / --steps` of the row width — so 3 steps give two
	 * arrows and 5 steps give four, with no per-page rule.
	 * They all carry the SAME transform: Figma mirrors every other one, but
	 * mirrored it reads as pointing up out of the row rather than across to the
	 * next card, so the left-hand orientation is used throughout.
	 */
	.eureko-steps-cards__arrow {
		display: block;
		position: absolute;
		top: 3rem;
		left: calc(100% * var(--i) / var(--steps, 3) - 2.25rem);
		width: 4.5rem;
		height: 4.5rem;
		background: url('../images/decor/steps-arrow.svg') center / contain no-repeat;
		transform: rotate(-45deg);
		pointer-events: none;
	}
}

/* ==========================================================================
   Reusable quote / testimonial block (quote-block)
   ========================================================================== */

/*
 * Figma 654:10556 — left-aligned, not centred: a 4px green rule with 48px of
 * padding, the comma mark parked in its own column to the left of the rule.
 */
.eureko-quote-block {
	padding-block: 3rem;
}
.eureko-quote-block__figure {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	column-gap: 2.625rem; /* 42px mark → rule */
	margin: 0;
	text-align: left;
}
.eureko-quote-block__mark {
	width: 5.625rem;  /* 90px */
	height: 4.4375rem; /* 70.7px */
	background: url('../images/decor/quote-mark.svg') left top / contain no-repeat;
	flex-shrink: 0;
}
.eureko-quote-block__body {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	border-left: 4px solid var(--eureko-primary);
	padding-left: 3rem;
	min-width: 0;
}
.eureko-quote-block__quote {
	font-family: var(--eureko-font-heading);
	/* Heading/Display L — 48px at full width. */
	font-size: clamp(1.5rem, 3.05vw, 3rem);
	font-weight: 500;
	color: #19213d;
	line-height: 1.2;
	margin: 0;
}
.eureko-quote-block__author {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1.5rem;
	margin-top: 0;
}
.eureko-quote-block__avatar {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background: var(--eureko-border);
	overflow: hidden;
	flex-shrink: 0;
	display: block;
}
.eureko-quote-block__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eureko-quote-block__meta {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-align: left;
}
.eureko-quote-block__name {
	font-family: var(--eureko-font-body);
	font-weight: 700;
	color: var(--eureko-text);
	font-size: 1.125rem;
	line-height: 1.2;
}
.eureko-quote-block__date {
	font-family: var(--eureko-font-body);
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: 0.32px;
	color: var(--eureko-muted);
}

/* Mobile: the 90px mark would eat half the width — stack it above the rule. */
@media (max-width: 767px) {
	.eureko-quote-block__figure {
		grid-template-columns: 1fr;
		row-gap: 1rem;
	}
	.eureko-quote-block__mark {
		width: 3.75rem;
		height: 2.95rem;
	}
	.eureko-quote-block__body {
		padding-left: 1.5rem;
	}
	.eureko-quote-block__author {
		gap: 1rem;
	}
	.eureko-quote-block__avatar {
		width: 3.5rem;
		height: 3.5rem;
	}
}

/* ==========================================================================
   Reusable gallery (gallery)
   ========================================================================== */

.eureko-gallery {
	padding-block: 3rem;
}
.eureko-gallery__title {
	font-size: var(--eureko-fs-display-m);
	color: var(--eureko-text);
	margin: 0 0 1.5rem;
}
.eureko-gallery__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
/* Panel variant — Figma 718:10794: cream card, centred title, captioned tiles. */
.eureko-gallery--panel .eureko-gallery__panel {
	background: var(--eureko-cream);
	border-radius: var(--eureko-radius-xl);
	padding: clamp(1.5rem, 5vw, 5rem);
}
.eureko-gallery--panel .eureko-gallery__title {
	text-align: center;
	font-size: var(--eureko-fs-display-l);
	line-height: 1.2;
	margin-bottom: clamp(1.75rem, 3vw, 3rem);
}
.eureko-gallery--panel .eureko-gallery__grid {
	row-gap: 3rem;
}
.eureko-gallery__card {
	margin: 0;
}
.eureko-gallery__caption {
	margin-top: 1rem;
	text-align: center;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--eureko-muted);
}
.eureko-gallery__placeholder {
	width: 100%;
	aspect-ratio: 342 / 335;
	background: #e8e4df;
	border-radius: var(--eureko-radius-m);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--eureko-muted);
}
.eureko-gallery__placeholder .material-symbols-outlined {
	font-size: 2.75rem;
	opacity: 0.5;
}
.eureko-gallery__image {
	width: 100%;
	aspect-ratio: 342 / 335;
	object-fit: cover;
	border-radius: var(--eureko-radius-m);
	display: block;
}
/* Design tiles are 338x243 — landscape, not the near-square default. */
.eureko-gallery--panel .eureko-gallery__image,
.eureko-gallery--panel .eureko-gallery__placeholder {
	aspect-ratio: 338 / 243;
	border-radius: var(--eureko-radius-s);
}

@media (min-width: 768px) {
	.eureko-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.eureko-gallery__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   Reusable timeline (timeline — "Jak šel čas")
   ========================================================================== */

.eureko-timeline {
	padding-block: 3rem 4rem;
}
.eureko-timeline__title {
	font-size: clamp(1.5rem, 3.5vw, 2.5rem);
	color: var(--eureko-text);
	margin: 0 0 2rem;
}
.eureko-timeline__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 1rem;
	-webkit-overflow-scrolling: touch;
}
.eureko-timeline__card {
	scroll-snap-align: start;
}
/* 🔴 Rail + dot replace the photo/year-disc card (client point 36, 2026-08-25).
   The rail is a per-card segment so it survives the ≤767 scroller — see the note
   in timeline.php. The dot sits left of centre, as in his reference graphic. */
.eureko-timeline__rail {
	position: relative;
	display: block;
	height: 2px;
	background: var(--eureko-primary);
}
.eureko-timeline__rail::after {
	content: "";
	position: absolute;
	left: 12%;
	top: 50%;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: var(--eureko-primary);
	transform: translate(-50%, -50%);
}
.eureko-timeline__year {
	display: block;
	font-family: var(--eureko-font-heading);
	font-size: clamp(2.75rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1;
	color: var(--eureko-primary);
}
/* The short green rule now hangs off the YEAR, not the title — his graphic puts
   it between the two. */
.eureko-timeline__year::after {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	background: var(--eureko-primary);
	margin-top: 1rem;
}
.eureko-timeline__card-title {
	font-family: var(--eureko-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--eureko-text);
	margin: 1.5rem 0 0;
	line-height: 1.3;
}
.eureko-timeline__body {
	margin-top: 2rem;
}
.eureko-timeline__text {
	font-size: 1rem;
	color: var(--eureko-muted);
	margin: 1rem 0 0;
	line-height: 1.7;
}

@media (min-width: 768px) {
	.eureko-timeline__track {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, 1fr);
		overflow: visible;
		padding-bottom: 0;
	}
}

/* ==========================================================================
   Reusable contact CTA band (contact-cta)
   ========================================================================== */

.eureko-contact-cta {
	padding-block: 3rem 4rem;
}
.eureko-contact-cta__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

/* "Zeptejte se…" panel — pale green card with the reception photo bleeding off
   its left edge (Figma 718:19387). */
.eureko-contact-cta__card {
	position: relative;
	overflow: hidden;
	background: #eff5e8;
	color: var(--eureko-text);
	border-radius: var(--eureko-radius-l);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
/* Decorative leaf/swoosh group on the card's right (Figma 718:19389 — five
   vectors, all filled #639D21, composed into one asset at the card's own
   778x316 geometry). Drawn at low opacity so it reads as a tint. */
.eureko-contact-cta__card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/decor/cta-leaves.svg') right center / cover no-repeat;
	/* NO opacity here. Each vector in the asset already carries opacity="0.1"
	   from Figma, so an extra CSS layer multiplies (0.1 x 0.09 = 0.9%) and the
	   art disappears. Adjust the tint in the SVG, not here. */
	pointer-events: none;
	z-index: 0;
}
.eureko-contact-cta__photo {
	display: none;
}
.eureko-contact-cta__card-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.eureko-contact-cta__title,
.eureko-contact-cta__visit-title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);   /* 36px */
	line-height: 1.6;
	letter-spacing: 0.72px;
	color: var(--eureko-text);
	margin: 0;
}
.eureko-contact-cta__lead {
	font-size: 1rem;
	line-height: 1.2;
	color: var(--eureko-muted);
	margin: 0;
}
.eureko-contact-cta__lead strong {
	font-weight: 700;
}
.eureko-contact-cta__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
}
.eureko-contact-cta__contact {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.eureko-contact-cta__contact-label {
	font-size: 1rem;
	line-height: 1.2;
	color: var(--eureko-muted);
}
.eureko-contact-cta__contact-value {
	font-size: 1.375rem;   /* 22px */
	font-weight: 600;
	line-height: 1.2;
	color: var(--eureko-muted);
	text-decoration: underline;
}
.eureko-contact-cta__contact-value:hover {
	color: var(--eureko-primary);
}
.eureko-contact-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
}
/* White status pill with the green "open" dot. */
.eureko-contact-cta__hours-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--eureko-white);
	border-radius: var(--eureko-radius-pill);
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	line-height: 1.2;
	color: var(--eureko-muted);
	white-space: nowrap;
}
.eureko-contact-cta__hours-pill::before {
	content: '';
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--eureko-primary);
}
/* Figma sizes the CTA at 200px wide. */
.eureko-contact-cta__actions .eureko-btn {
	min-width: 12.5rem;
	justify-content: center;
}

/* "Visit us" block */
.eureko-contact-cta__visit {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	align-items: stretch;
}
.eureko-contact-cta__visit-media {
	flex: 1 1 100%;
	aspect-ratio: 1;
	background: #eef1f4;
	border-radius: var(--eureko-radius-l);
	overflow: hidden;
}
.eureko-contact-cta__visit-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eureko-contact-cta__visit-body {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.eureko-contact-cta__address {
	font-style: normal;
	color: #6d758f;
	margin: 0;
	line-height: 1.7;
}
.eureko-contact-cta__hours {
	color: #6d758f;
	margin: 0;
	line-height: 1.7;
}
.eureko-contact-cta__hours-label {
	display: block;
	font-weight: 700;
	color: #6d758f;
}
/* Outline pill, per the design's Button/Label at 15px. */
.eureko-contact-cta__directions {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1rem;
	border: 1px solid var(--eureko-muted);
	border-radius: var(--eureko-radius-pill);
	color: var(--eureko-muted);
	font-family: var(--eureko-font-heading);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.2;
	letter-spacing: 2px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.eureko-contact-cta__directions:hover {
	background: var(--eureko-muted);
	color: var(--eureko-white);
}

@media (min-width: 1024px) {
	/* Figma row: 778px card + 24px + (316px image + 32px + 431px text) = 1581. */
	/* stretch, not center: the card must match the height of the image+text
	   block on the right, which is set by its 316px square photo. */
	.eureko-contact-cta__inner {
		grid-template-columns: 778fr 803fr;
		gap: 1.5rem;
		align-items: stretch;
	}
	.eureko-contact-cta__card {
		min-height: 19.75rem;   /* 316px */
		padding: 3rem 3rem 3rem 16rem;   /* clears the photo column */
		justify-content: center;
	}
	/* Reception cut-out standing on the card's bottom edge and filling its full
	   height, so it scales with the card instead of floating in white space.
	   Height-driven: the file is 490x729, so at 316px tall it lands ~212 wide. */
	.eureko-contact-cta__photo {
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		top: 0;
		z-index: 1;
		pointer-events: none;
	}
	.eureko-contact-cta__photo img {
		display: block;
		height: 100%;
		width: auto;
		object-fit: contain;
		object-position: left bottom;
	}
	.eureko-contact-cta__visit {
		flex-wrap: nowrap;
		gap: 2rem;
		align-items: stretch;
	}
	/* Width is fixed at the design's 316px, but the HEIGHT must follow the row —
	   the green card grows past 316px once its content plus padding exceeds that,
	   and a hard `aspect-ratio: 1` here would leave the two blocks unaligned.
	   object-fit: cover absorbs the changing aspect. */
	.eureko-contact-cta__visit-media {
		flex: 0 0 19.75rem;   /* 316px */
		aspect-ratio: auto;
		min-height: 19.75rem;
	}
	.eureko-contact-cta__visit-body {
		flex: 1 1 auto;
		padding-block: 2rem;
		justify-content: center;
	}
}

/* ==========================================================================
   Metoda — single detail template
   ========================================================================== */

.eureko-metoda-hero {
	background: var(--eureko-cream);
	padding-block: 2.5rem 3rem;
}
.eureko-metoda-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
}
.eureko-metoda-hero__content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.eureko-metoda-hero__eyebrow {
	font-size: var(--eureko-fs-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eureko-primary);
	margin: 0;
}
.eureko-metoda-hero__title {
	font-size: var(--eureko-fs-display-l);
	line-height: 1.15;
	color: var(--eureko-text);
	margin: 0;
}
.eureko-metoda-hero__lead {
	font-size: var(--eureko-fs-lg);
	color: var(--eureko-muted);
	line-height: 1.6;
	margin: 0;
}
.eureko-metoda-hero__actions {
	margin-top: 0.25rem;
}
.eureko-metoda-hero__image {
	border-radius: var(--eureko-radius-l);
	overflow: hidden;
	min-height: 14rem;
	/* The image is in flow, so the box must have a ratio of its own — `height:
	   100%` alone resolves against nothing and the photo dictates the height. */
	aspect-ratio: 804 / 536;
}
.eureko-metoda-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eureko-metoda-hero__placeholder {
	width: 100%;
	min-height: 14rem;
	height: 100%;
	background: #eef1f4;
	border-radius: var(--eureko-radius-l);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--eureko-muted);
}
.eureko-metoda-hero__placeholder .material-symbols-outlined {
	font-size: 2.5rem;
	opacity: 0.5;
}

/* About + sidebar */
.eureko-metoda-about {
	padding-block: 3rem;
}
.eureko-metoda-about__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}
.eureko-metoda-about__title {
	font-size: var(--eureko-fs-display-m);
	color: var(--eureko-text);
	margin: 0 0 1rem;
}
.eureko-metoda-about__content {
	color: var(--eureko-muted);
	line-height: 1.7;
}
.eureko-metoda-about__content p {
	margin: 0 0 1rem;
}
.eureko-metoda-cta {
	background: var(--eureko-dark);
	color: #fff;
	border-radius: var(--eureko-radius-l);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.eureko-metoda-cta__title {
	font-size: 1.375rem;
	color: #fff;
	margin: 0;
}
.eureko-metoda-cta__eyebrow {
	font-size: var(--eureko-fs-sm);
	color: rgba(255,255,255,0.8);
	margin: 0 0 0.5rem;
}
.eureko-metoda-cta__phone {
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff;
	text-decoration: none;
}
.eureko-metoda-cta__phone:hover {
	color: var(--eureko-primary);
}
.eureko-metoda-cta__email {
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	word-break: break-word;
}
.eureko-metoda-cta__email:hover {
	color: var(--eureko-primary);
}
.eureko-metoda-cta__action {
	margin-top: 1rem;
}

/*
 * Indications card — 718:9709. A cream card INSIDE the main column (it used to
 * be a full-width band), 48px padding, 32px heading over a two-column dotted
 * list. The 8px dot replaces the Material `verified` tick the design has none of.
 */
.eureko-metoda-benefits {
	background: var(--eureko-cream);
	border-radius: var(--eureko-radius-l);
	padding: 1.75rem;
}
.eureko-metoda-benefits__title {
	font-size: 1.5rem;
	color: var(--eureko-text);
	margin: 0 0 1.5rem;
}
.eureko-metoda-benefits__item::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--eureko-primary);
}
@media (min-width: 1024px) {
	.eureko-metoda-benefits {
		padding: 3rem;
	}
	.eureko-metoda-benefits__title {
		font-size: 2rem;
	}
}
.eureko-metoda-benefits__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem 2rem;
}
.eureko-metoda-benefits__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: var(--eureko-fs-base);
	color: var(--eureko-muted);
}
.eureko-metoda-benefits__icon {
	flex: none;
	font-size: 1.375rem;
	line-height: 1;
	color: var(--eureko-primary);
}

/* Related articles */
.eureko-metoda-related {
	padding-block: 3rem;
}
.eureko-metoda-related__title {
	font-size: var(--eureko-fs-display-m);
	color: var(--eureko-text);
	margin: 0 0 1.5rem;
}
.eureko-metoda-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
.eureko-metoda-related__card {
	display: block;
	text-decoration: none;
	color: inherit;
}
.eureko-metoda-related__thumb {
	aspect-ratio: 16 / 10;
	background: #eef1f4;
	border-radius: var(--eureko-radius-m);
	overflow: hidden;
	margin-bottom: 0.75rem;
}
.eureko-metoda-related__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eureko-metoda-related__card-title {
	font-size: var(--eureko-fs-base);
	font-weight: 500;
	color: var(--eureko-text);
	margin: 0;
	line-height: 1.4;
}
.eureko-metoda-related__card:hover .eureko-metoda-related__card-title {
	color: var(--eureko-primary);
}

/* ==========================================================================
   Metoda — archive listing
   ========================================================================== */

.eureko-metoda-archive__hero {
	background: var(--eureko-cream);
	padding-block: 2.5rem 2rem;
}
.eureko-metoda-archive__title {
	font-size: var(--eureko-fs-display-l);
	color: var(--eureko-text);
	margin: 0.5rem 0 0.5rem;
}
.eureko-metoda-archive__lead {
	font-size: var(--eureko-fs-lg);
	color: var(--eureko-muted);
	margin: 0;
	max-width: 40rem;
}
.eureko-metoda-archive__list {
	padding-block: 3rem;
}
.eureko-metoda-archive__group {
	margin-bottom: 3rem;
}
.eureko-metoda-archive__group:last-child {
	margin-bottom: 0;
}
.eureko-metoda-archive__group-title {
	font-family: var(--eureko-font-heading);
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	font-weight: 600;
	color: var(--eureko-text);
	margin: 0 0 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--eureko-border);
}
.eureko-metoda-archive__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
.eureko-metoda-archive__card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--eureko-border);
	border-radius: var(--eureko-radius-l);
	padding: 1.25rem;
	transition: box-shadow var(--eureko-transition), border-color var(--eureko-transition);
}
.eureko-metoda-archive__card:hover {
	border-color: var(--eureko-primary);
	box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.eureko-metoda-archive__thumb {
	aspect-ratio: 16 / 10;
	background: #eef1f4;
	border-radius: var(--eureko-radius-m);
	overflow: hidden;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--eureko-muted);
}
.eureko-metoda-archive__thumb .material-symbols-outlined {
	font-size: 2.5rem;
	opacity: 0.5;
}
.eureko-metoda-archive__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eureko-metoda-archive__card-title {
	font-family: var(--eureko-font-heading);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--eureko-text);
	margin: 0 0 0.5rem;
}
.eureko-metoda-archive__excerpt {
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-muted);
	margin: 0 0 0.75rem;
	line-height: 1.6;
}
.eureko-metoda-archive__more {
	font-weight: 600;
	color: var(--eureko-primary);
	font-size: var(--eureko-fs-sm);
}
.eureko-metoda-archive__empty {
	color: var(--eureko-muted);
	text-align: center;
	padding: 3rem 0;
}

@media (min-width: 768px) {
	.eureko-metoda-benefits__list {
		grid-template-columns: 1fr 1fr;
	}
	.eureko-metoda-related__grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.eureko-metoda-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.eureko-metoda-hero__inner {
		grid-template-columns: 1.1fr 0.9fr;
		gap: 3rem;
	}
	.eureko-metoda-hero__image,
	.eureko-metoda-hero__placeholder {
		min-height: 22rem;
	}
	.eureko-metoda-about__inner {
		grid-template-columns: 1.8fr 1fr;
		gap: 3rem;
	}
	.eureko-metoda-archive__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Služba — service detail (extends the metoda look)
   ========================================================================== */

/* Hero: two buttons + phone block */
.eureko-sluzba-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 0.5rem;
}
.eureko-sluzba-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.eureko-sluzba-hero__phone {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.eureko-sluzba-hero__phone-avatar {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	/* Tinted disc = the fallback if the photo is ever missing. */
	background: rgba(99, 157, 33, 0.15);
}
.eureko-sluzba-hero__phone-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eureko-sluzba-hero__phone-text {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}
.eureko-sluzba-hero__phone-label,
.eureko-sluzba-hero__phone-hours {
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-muted);
}
.eureko-sluzba-hero__phone-number {
	font-weight: 700;
	color: var(--eureko-text);
	text-decoration: none;
}
.eureko-sluzba-hero__phone-number:hover {
	color: var(--eureko-primary);
}

/* Methods & therapies panel (718:8980) — a white card with a cream glow,
   holding five cream columns. The panel is inset from the container on both
   sides in the design (1314 of 1584), so it uses its own max-width. */
.eureko-sluzba-methods {
	padding-block: 3rem;
}
/* Figma 718:8981: the CARDS span the full 1584 container; it is the white
   backdrop (Rectangle 16) that is narrower at 1314 and sits behind them. Do not
   pad the panel horizontally — that shrinks the cards instead. */
.eureko-sluzba-methods__panel {
	position: relative;
	padding-block: 2.5rem;
}
.eureko-sluzba-methods__panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 100%;
	max-width: 82.95%; /* 1314 / 1584 */
	margin-inline: auto;
	left: 0;
	right: 0;
	background: var(--eureko-white);
	border-radius: 40px;
	box-shadow: 0 0 160px 0 #ede5d9;
	z-index: 0;
}
.eureko-sluzba-methods__title,
.eureko-sluzba-methods__columns {
	position: relative;
	z-index: 1;
}
.eureko-sluzba-methods__title {
	font-size: var(--eureko-fs-display-m);
	line-height: 1.2;
	color: var(--eureko-text);
	text-align: center;
	margin: 0 0 2rem;
}
.eureko-sluzba-methods__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
.eureko-sluzba-methods__col {
	background: var(--eureko-cream);
	border-radius: 16px;
	padding: 2rem 1.5rem;
}
.eureko-sluzba-methods__col-title {
	font-family: var(--eureko-font-heading);
	font-size: 1.25rem; /* H6 20px */
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0;
}
.eureko-sluzba-methods__rule {
	display: block;
	width: 34px;
	height: 3px;
	background: var(--eureko-primary);
	margin: 1rem 0;
}
.eureko-sluzba-methods__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.eureko-sluzba-methods__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
.eureko-sluzba-methods__dot {
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: 0.375rem;
	border-radius: 50%;
	background: var(--eureko-primary);
}
.eureko-sluzba-methods__link,
.eureko-sluzba-methods__text {
	font-size: 0.875rem; /* Captions/S 14px */
	line-height: 1.2;
	color: #353e5c;
}
.eureko-sluzba-methods__link {
	text-decoration: underline;
	transition: color var(--eureko-transition);
}
.eureko-sluzba-methods__link:hover,
.eureko-sluzba-methods__link:focus-visible {
	color: var(--eureko-primary);
}

/* "Jsem po operaci" green CTA banner (718:9102) — solid green card, radius 24,
   centred copy over a white pill, with a circular photo bleeding off the right
   edge and the brand mark bleeding off the left. Both are clipped by the card. */
.eureko-sluzba-banner {
	padding-block: 2rem;
}
.eureko-sluzba-banner__inner {
	position: relative;
	overflow: hidden;
	background: var(--eureko-primary);
	border-radius: var(--eureko-radius-l);
	padding: 2.5rem 1.5rem;
	/* Figma draws this card at 1046 of 1584. Full-container was too wide, so at
	   the user's request it sits at 75% of the container. */
	max-width: 75%;
	margin-inline: auto;
}
/* The same brand mark as the sidebar CTA, painted in a lighter green. */
.eureko-sluzba-banner__inner::before {
	content: "";
	position: absolute;
	left: -6.4%;
	top: -2.1%;
	width: 29.45%;
	aspect-ratio: 308 / 362;
	background: rgba(255, 255, 255, 0.12);
	-webkit-mask: url('../images/decor/leaf-mark.svg') center / contain no-repeat;
	mask: url('../images/decor/leaf-mark.svg') center / contain no-repeat;
	pointer-events: none;
}
/* With the card widened the circle can no longer be sized as a percentage of
   it — 25% of 1584 would be a 400px disc. It is pinned to the right edge at the
   design's own 264px, overhanging by 44px exactly as in the frame. */
.eureko-sluzba-banner__photo {
	display: none;
	position: absolute;
	right: -44px;
	top: 16px;
	width: 264px;
	height: 264px;
	object-fit: cover;
	border-radius: 50%;
	pointer-events: none;
}
.eureko-sluzba-banner__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	text-align: center;
	color: var(--eureko-white);
}
.eureko-sluzba-banner__title {
	font-family: var(--eureko-font-heading);
	font-size: 1.75rem; /* H3 28px */
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-white);
	margin: 0;
}
.eureko-sluzba-banner__sub {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--eureko-white);
	margin: 0 0 1.5rem; /* 718:9106 -> 718:9107 is 24px */
}

@media (min-width: 768px) {
	.eureko-sluzba-hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 2rem;
	}
	.eureko-sluzba-methods__panel {
		padding-block: 4rem;
	}
	.eureko-sluzba-methods__columns {
		grid-template-columns: repeat(3, 1fr);
		align-items: stretch;
	}
	/* 718:9102 is 1046x229 with NO inner padding — the 646-wide copy column is
	   simply centred in it, so the padding must not eat into that percentage. */
	.eureko-sluzba-banner__inner {
		padding: 2.5rem 0;
	}
	/* Wider share than Figma's 646/1046 so the 28px title still fits one line in
	   the narrowed card — type does not scale down with the layout. */
	.eureko-sluzba-banner__text {
		max-width: 85%;
		margin-inline: auto;
	}
	/* The team carousel's -20rem overlap is a homepage-only effect; on the
	   service page the team block follows a text row, so cancel the overlap.
	   `--plain` is the general opt-out for any page reusing the carousel outside
	   the homepage's cream-band sandwich (e.g. the member detail page). */
	.eureko-service .eureko-team .eureko-container,
	.eureko-team--plain .eureko-container {
		margin-top: 0;
	}
}

@media (min-width: 1024px) {
	.eureko-sluzba-methods__columns {
		grid-template-columns: repeat(5, 1fr);
	}
	/* The circle only clears the copy once the card is wide enough; below this
	   it would sit on top of the heading. */
	.eureko-sluzba-banner__photo {
		display: block;
	}
}

/* Program cards ("Nabídka skupinových cvičení") */
.eureko-sluzba-programs {
	padding-block: 3rem;
}
/* Figma section heading = Display L: Catamaran Medium 48px / 1.2, not 32/600. */
.eureko-sluzba-programs__title {
	font-size: var(--eureko-fs-display-l);
	line-height: 1.2;
	color: var(--eureko-text);
	text-align: center;
	margin: 0 0 2.5rem;
}
.eureko-sluzba-programs__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
/* Figma 718:15850 — white card, radius 16, a 32px gap between the photo and the
   text stack, and only 8px between title and body. */
.eureko-sluzba-programs__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	background: var(--eureko-white);
	border-radius: 1rem;
}
.eureko-sluzba-programs__media {
	width: 100%;
	aspect-ratio: 300 / 200;
	border-radius: 1rem;
	overflow: hidden;
	margin-bottom: 1.5rem;
}
.eureko-sluzba-programs__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eureko-sluzba-programs__placeholder {
	width: 100%;
	height: 100%;
	background: #eef1f4;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--eureko-muted);
}
.eureko-sluzba-programs__placeholder .material-symbols-outlined {
	font-size: 2.5rem;
	opacity: 0.5;
}
/* Heading/Heading 4 — Catamaran Medium 24px / 1.2, sentence case. The design
   sets no uppercase transform; „SM Systém" and „Škola zad" are cased as written. */
.eureko-sluzba-programs__card-title {
	font-family: var(--eureko-font-heading);
	font-size: var(--eureko-fs-h4);
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0;
}
/* Body/M/Regular 16px / 1.7 in the design's own card grey. */
.eureko-sluzba-programs__card-text {
	font-size: 1rem;
	color: #6d758f;
	line-height: 1.7;
	margin: 0 0 0.75rem;
	flex: 1 1 auto;
}

@media (min-width: 600px) {
	.eureko-sluzba-programs__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.eureko-sluzba-programs__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Blog — listing (posts page)
   ========================================================================== */

/* Reusable pill chip */
/*
 * Figma "Button / Secondary" — 729:21351 (mobile) / 718:12867 (desktop): NO
 * fill, a 1px #3d4856 outline, Catamaran Bold 15px with 2px tracking, 12/16
 * padding, pill radius. The chips therefore read outline-on-cream.
 *
 * 🔴 This is the BASE now, not a per-list override. All three pill lists —
 * the blog hero's CATEGORY filter (`.eureko-blog-filter__list`, home.php), the
 * blog footer's ŠTÍTKY panel (`.eureko-blog-tags__list`) and the single-post
 * tags (`.eureko-article-tags__list`) — are the same component in the design.
 * The last two carried an identical copy of this rule while the hero was left
 * on the old white/#e5e5e5 pill, which is exactly the drift being fixed; the
 * duplicates were deleted rather than a third one added.
 * ⚠️ An earlier pass gave these a white fill and the client rejected it — the
 * design's outline-only version is confirmed. Do not reintroduce a fill.
 */
.eureko-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--eureko-text);
	border-radius: 200px;
	background: transparent;
	color: var(--eureko-text);
	font-family: var(--eureko-font-heading);
	font-weight: 700;
	font-size: 0.9375rem;   /* 15px */
	line-height: 1.2;
	letter-spacing: 2px;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--eureko-transition), color var(--eureko-transition);
}
.eureko-pill:hover {
	border-color: var(--eureko-primary);
	color: var(--eureko-primary);
}
.eureko-pill--sm {
	padding: 0.375rem 0.875rem;
	font-size: 0.8125rem;
}

/*
 * The blog band keeps `overflow: hidden` at every width — unlike Ceník / Náš
 * tým it has no floating insurer card to let through, and the clip is what
 * crops the author portraits at the band's bottom edge (Figma 718:12780).
 */
.eureko-blog-band {
	overflow: hidden;
}
/* Header — Figma 718:12780. The cream + decor come from the enclosing
   `.eureko-hero-band`, exactly as on Ceník and Náš tým. */
.eureko-blog-head {
	background: transparent;
	position: relative;
	z-index: 1;
	padding-block: 3rem 2.5rem;
}
.eureko-blog-head__inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
/* Blog listing wraps breadcrumb+title in __intro (not a flex row), so the
   __inner gap doesn't apply here — add it manually to hit the 2rem site gap. */
.eureko-blog-head__intro {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.eureko-blog-head__intro .eureko-breadcrumb {
	margin-bottom: 1.5rem;
}
/* Figma 718:12804 — 24px from the subtitle down to the pill rows. */
.eureko-blog-head__intro .eureko-blog-filter__list {
	margin-top: 1.5rem;
}
.eureko-blog-head__title {
	font-size: var(--eureko-fs-display-l);
	color: var(--eureko-text);
	margin: 0.5rem 0;
}
.eureko-blog-head__subtitle {
	font-size: var(--eureko-fs-lg);
	color: var(--eureko-muted);
	margin: 0;
	max-width: 40rem;
}
/*
 * Author cut-outs (Figma 718:12782-12785) — the same background-removed WebPs
 * the team carousel uses, standing on the band's bottom edge. Hidden below
 * 1024px: the band is only tall enough for them beside the copy column.
 */
.eureko-blog-head__authors {
	display: none;
}
.eureko-blog-head__authors-label {
	/* Label + arrow sit ~25% of their own block height lower than the design;
	   the photos stay put because they are bottom-anchored (margin-top: auto). */
	margin-top: 1.25rem;
	font-size: var(--eureko-fs-base);
	line-height: 1.2;
	color: var(--eureko-muted);
}
.eureko-blog-head__authors-arrow {
	display: block;
	width: 3.15rem;   /* 30% smaller at the client's ask */
	height: auto;
	margin: 0.5rem 0 0 0.5rem;
	opacity: 0.9;
}
/* The exported asset ALREADY points down-right at the portraits. It was being
   flipped and rotated here, which turned it back on itself — no transform. */
/*
 * The four portraits must read at the SAME size with their heads level — that
 * is what the design shows. The source exports are framed differently from one
 * another, so they are trimmed to their alpha bounding box and normalised to a
 * common 900px height before shipping; here they are simply bottom-aligned at a
 * shared height and overlapped.
 *
 * Do NOT go back to per-node absolute widths: sizing four differently-cropped
 * cut-outs by width makes each person a different size, which is exactly how
 * this rendered wrong the first time.
 */
.eureko-blog-head__authors-photos {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	width: 100%;
	/*
	 * Explicit height, NOT `aspect-ratio`. Flex items default to
	 * `min-height: auto`, so the 900px-tall portraits refuse to shrink and the
	 * aspect-ratio box is pushed to their natural size — the row rendered
	 * several times too large and overflowed the page. 51.8cqw is the design's
	 * 375/724 against the authors column (`container-type` is set on it).
	 */
	height: 45cqw;   /* Figma 375/724 = 51.8cqw, trimmed ~13% at the client's ask */
	margin-top: auto;
	/* Torsos crop on the band edge, as in Figma. The extra 20px is the client's
	   ask — it deepens the crop without changing how large the people read. */
	margin-bottom: calc(-6% - 20px);
}
.eureko-blog-head__authors-photos img {
	display: block;
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	height: 100%;
	width: auto;
	margin-left: -16%;
}
.eureko-blog-head__authors-photos img:first-child {
	margin-left: 0;
}
/* The man sits BEHIND the two women either side of him — flex order alone
   paints later items on top, so he needs an explicit z-index. */
.eureko-blog-head__authors-photos img:nth-child(3) {
	z-index: 0;
}

/* Filter */
.eureko-blog-filter__list,
.eureko-blog-tags__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;   /* Figma 729:21349 */
}

/* Grid */
.eureko-blog-list {
	padding-block: 4rem 3rem;   /* Figma 718:12814 — 81px below the band */
	background: var(--eureko-white);
}
.eureko-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

/* ==========================================================================
   Article list — homepage blog teaser
   ========================================================================== */

.eureko-article-list {
	padding-block: 3rem;
	background: var(--eureko-white);
}
/* Head — Figma 654:10129: heading + category pills on the left, CTA on the
   right, 48px down to the grid. */
.eureko-article-list__head {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 3rem;
}
.eureko-article-list__intro {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;          /* Figma 4px; loosened so the pills clear the cap height */
	min-width: 0;
}
.eureko-article-list__title {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);   /* Display M = 40px */
	color: var(--eureko-text);
	margin: 0;
	line-height: 1.2;
}
.eureko-article-list__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.eureko-article-list__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1rem;
	border-radius: var(--eureko-radius-pill);
	background: #f3eee7;
	color: var(--eureko-text);
	font-family: var(--eureko-font-heading);
	font-weight: 700;
	font-size: 1.0625rem;   /* 17px */
	line-height: 1;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.eureko-article-list__tag:hover,
.eureko-article-list__tag:focus-visible {
	background: var(--eureko-primary);
	color: var(--eureko-white);
}
.eureko-article-list__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 1rem 1.25rem;
	border: 1px solid var(--eureko-border);
	border-radius: var(--eureko-radius-pill);
	color: var(--eureko-text);
	font-family: var(--eureko-font-heading);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	letter-spacing: 2px;
	white-space: nowrap;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.eureko-article-list__cta:hover {
	background: var(--eureko-cream);
	border-color: var(--eureko-primary);
}
@media (min-width: 768px) {
	.eureko-article-list {
		padding-block: 5rem;
	}
	.eureko-article-list__head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
	}
	.eureko-article-list__cta {
		align-self: auto;
		flex-shrink: 0;
	}
}
@media (min-width: 1024px) {
	.eureko-blog-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Card */
/*
 * Cream card, photo flush at the top (user, 2026-08-26 — „why aren't you
 * applying it on all article blocks?").
 *
 * `blog-feature.php` and `blog-card.php` are separate components, so the cream
 * fill given to the feature's panel left every ORDINARY card still bare: its
 * media was a rounded block, then a 32px gap, then loose text directly on the
 * white section, with no edges of its own. The two sat side by side in the
 * same grid looking like different things.
 *
 * Now the whole card is the cream block and the photo sits inside it, so the
 * media's own radius is dropped and the parent clips instead. The 32px Figma
 * gap goes with it — the separation is the body's padding now, or the photo
 * floats away from the card it belongs to.
 *
 * ⚠️ This reaches all FOUR render sites: home.php, category.php, single.php
 * (related posts) and sections/article-list.php (homepage). That is the point
 * — they must not drift — but check the homepage teaser after touching it.
 */
.eureko-blog-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--eureko-cream);
	border-radius: var(--eureko-radius-l);
	overflow: hidden;
}
.eureko-blog-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;    /* Figma 300 x 200 */
	border-radius: 0;       /* the CARD is the rounded box now */
	overflow: hidden;
	background: #eef1f4;
}
.eureko-blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eureko-blog-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--eureko-muted);
}
.eureko-blog-card__placeholder .material-symbols-outlined {
	font-size: 2.5rem;
	opacity: 0.5;
}
.eureko-blog-card__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: var(--eureko-white);
	color: var(--eureko-text);
	font-family: var(--eureko-font-heading);
	font-size: 1.0625rem;   /* 17px */
	font-weight: 700;
	line-height: 1;
	padding: 0.75rem 1rem;
	border-radius: 200px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.eureko-blog-card__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;        /* replaces the old 32px card gap */
}
.eureko-blog-card__meta {
	display: flex;
	gap: 1.5rem;
	font-size: 0.875rem;    /* Text S = 14px */
	line-height: 1.2;
	color: var(--eureko-text);
}
.eureko-blog-card__date,
.eureko-blog-card__readtime {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
/* Green leading icons, sized to the meta text rather than the 24px default. */
.eureko-blog-card__meta .material-symbols-outlined {
	font-size: 1rem;
	line-height: 1;
	color: var(--eureko-primary);
}
.eureko-blog-card__title {
	font-size: 1.375rem;    /* Heading 5 = 22px */
	line-height: 1.2;
	margin: 0;
}
.eureko-blog-card__title a {
	color: var(--eureko-text);
	text-decoration: none;
}
.eureko-blog-card__title a:hover {
	color: var(--eureko-primary);
}
.eureko-blog-card__author {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.25rem;
}
.eureko-blog-card__author-avatar,
.eureko-blog-card__author-img {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: rgba(99, 157, 33, 0.15);
}
.eureko-blog-card__author-name {
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: 0.32px;
	color: var(--eureko-text);
	text-decoration: underline;
}

/* Tags — Figma 718:12864: a cream panel, not a ruled strip. */
.eureko-blog-tags {
	padding-block: 2rem 4rem;
	background: var(--eureko-white);
}
.eureko-blog-tags__panel {
	background: var(--eureko-cream);
	border-radius: var(--eureko-radius-l);
	padding: 2rem 1.5rem;
}
.eureko-blog-tags__label {
	font-size: 1.25rem;          /* Text XL */
	line-height: 1.2;
	letter-spacing: 0.4px;
	color: var(--eureko-muted);
	margin: 0 0 1.5rem;
}
/* Chip styling now lives on the base `.eureko-pill` — see the note there. */
.eureko-blog-tags__list {
	gap: 0.5rem;
}
@media (min-width: 768px) {
	.eureko-blog-tags__panel {
		padding: 3rem 4rem;
	}
}

@media (min-width: 600px) {
	.eureko-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	/* Figma 718:12800 — the copy column is 655 of the 1584 container; the
	   cut-outs fill the rest and are bottom-aligned to the band. */
	.eureko-blog-head__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		gap: 2rem;
	}
	.eureko-blog-head__intro {
		flex: 0 1 655px;
	}
	/* Figma: the photo row is x987-1711 on the 1920 canvas = 45.7% of the 1584
	   container, starting at 51.7%. Fixed share, not `1 1 auto`, or the row
	   stretches to whatever the copy column leaves over. */
	.eureko-blog-head__authors {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 0 0 45.7%;
		container-type: inline-size;
		min-width: 0;
		align-self: flex-end;
		/* The portraits run past the band's bottom edge, so the section's own
		   bottom padding has to be cancelled here rather than removed globally. */
		margin-bottom: -2.5rem;
	}
	.eureko-blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	/* Figma 718:12816 — the feature spans two of the three columns, with one
	   ordinary card beside it. */
	.eureko-blog-feature {
		grid-column: span 2;
	}
	.eureko-blog-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Featured article — Figma 718:12817
   -------------------------------------------------------------------------- */

.eureko-blog-feature {
	position: relative;
	display: flex;
	flex-direction: column;
}
.eureko-blog-feature__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: var(--eureko-radius-l);
	overflow: hidden;
	background: var(--eureko-border);
}
.eureko-blog-feature__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eureko-blog-feature__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--eureko-muted);
}
.eureko-blog-feature__placeholder .material-symbols-outlined {
	font-size: 3rem;
}
/* 16px inset, Catamaran Bold 17px — same badge as `blog-card`. */
.eureko-blog-feature__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: var(--eureko-white);
	border-radius: var(--eureko-radius-pill, 200px);
	padding: 0.75rem 1rem;
	font-family: var(--eureko-font-display, 'Catamaran', sans-serif);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1;
	color: var(--eureko-text);
}
.eureko-blog-feature__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	/*
	 * Cream, not white (user, 2026-08-26). `.eureko-blog-list` is white, so a
	 * white card dissolved into the page and the block had no visible start or
	 * end — only the stretch of it lying over the photo read as an edge. The
	 * cream fill gives it its own shape with no border, and it is the same
	 * `--eureko-cream` the hero band uses. ⛔ A 1px green outline was tried
	 * first and dropped.
	 */
	background: var(--eureko-cream);
	padding: 1.5rem;
	border-radius: 0 0 var(--eureko-radius-l) var(--eureko-radius-l);
}
.eureko-blog-feature__meta {
	display: flex;
	gap: 1.5rem;
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-text);
}
.eureko-blog-feature__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	line-height: 1.2;
}
.eureko-blog-feature__meta-item .material-symbols-outlined {
	font-size: 1rem;
	color: var(--eureko-primary);
}
.eureko-blog-feature__title {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
}
.eureko-blog-feature__title a {
	color: inherit;
	text-decoration: none;
}
.eureko-blog-feature__title a:hover {
	color: var(--eureko-primary);
}
.eureko-blog-feature__author {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.eureko-blog-feature__author img,
.eureko-blog-feature__author-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(99, 157, 33, 0.15);
	flex-shrink: 0;
}
.eureko-blog-feature__author-name {
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: 0.32px;
	color: var(--eureko-text);
}

/*
 * From 1024px the body detaches and overlaps the photo's bottom-right corner
 * (Figma: 645 wide at x403 / y329 on a 914x610 photo, 48px padding, and the
 * and 48px padding). ⚠️ Figma's bottom-LEFT corner was square — that is NO
 * longer what we ship; see the radius note in the block below.
 */
@media (min-width: 1024px) {
	/*
	 * 🔴 The card overhangs the PHOTO, never the feature's own grid area
	 * (client, 2026-08-26 — his desktop screenshot showed it lying across the
	 * ordinary card in column 3, slicing that card's title).
	 *
	 * The old `left: 44.1% / right: -14.7%` took both figures from the Figma
	 * PHOTO (403/914 and the 134px the card runs past it) but applied them to
	 * the containing block, which is the ARTICLE — 1045px wide, since the
	 * feature spans 2 of 3 columns of the 1584 container (506.67·2 + 32). So
	 * -14.7% resolved to -154px of overhang against a 32px gap, putting ~122px
	 * of white card on top of the neighbour, and `left` landed at 461 instead
	 * of 403.
	 *
	 * Figma's own numbers already agree with the grid: the card's right edge
	 * (403 + 645 = 1048) IS the span edge, and the photo is the narrower box.
	 * So pin the body to `right: 0` and shrink the media instead — 914/1045 =
	 * 87.5%, leaving left at 403/1045 = 38.6% and the card 642 wide.
	 * ⛔ Never give the body a negative `right` again: any overhang there is
	 * measured against the article, not the photo, and lands on column 3.
	 */
	/*
	 * 87.5% = Figma's own 914 of the 1045 span. ⛔ SETTLED — do not tune it
	 * again: 100% (photo flush to the span edge) and 80% were both tried on
	 * 2026-08-26 and both reverted, back to this value.
	 * ⚠️ The photo is `aspect-ratio: 3/2`, so this width also sets the
	 * feature's HEIGHT — changing it moves the whole row.
	 * ⛔ The safe edge is the PHOTO, not the card. Never buy overhang back by
	 * giving `__body` a negative `right` again — that is the bug the client
	 * reported; see the note above.
	 */
	.eureko-blog-feature__media {
		width: 87.5%;     /* 914 / 1045 — the card overhangs THIS, not the grid area */
	}
	.eureko-blog-feature__body {
		position: absolute;
		left: 38.6%;      /* 403 / 1045 */
		right: 0;         /* 403 + 645 = 1048 = the span's own right edge */
		bottom: 0;
		padding: 3rem;
		/*
		 * All FOUR corners round (user, 2026-08-26). Figma left the bottom-left
		 * square because the white panel butted into the photo there and the
		 * square corner hid the join. Once the panel went cream it stopped
		 * reading as a join at all — the corner just looked like a missing
		 * radius. ⛔ Do not "restore" the Figma 0 here.
		 */
		border-radius: var(--eureko-radius-l);
	}
	.eureko-blog-feature__title {
		font-size: var(--eureko-fs-display-m, 2.5rem);
	}
}

/* --------------------------------------------------------------------------
   Nejčtenější články — Figma 718:12856
   -------------------------------------------------------------------------- */

.eureko-blog-popular {
	padding-block: 3rem;
	background: var(--eureko-white);
}
.eureko-blog-popular__title {
	margin: 0 0 2rem;
	font-size: var(--eureko-fs-h4, 1.5rem);
	color: var(--eureko-text);
}

/* --------------------------------------------------------------------------
   Pagination — Figma 718:12847: 42px square pills, centred
   -------------------------------------------------------------------------- */

.eureko-blog-page .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}
.eureko-blog-page .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.75rem;
	border: 1px solid var(--eureko-border);
	border-radius: var(--eureko-radius-pill, 200px);
	background: var(--eureko-white);
	color: var(--eureko-text);
	text-decoration: none;
	font-size: var(--eureko-fs-sm);
	transition: border-color var(--eureko-transition), color var(--eureko-transition);
}
.eureko-blog-page .pagination .page-numbers:hover {
	border-color: var(--eureko-primary);
	color: var(--eureko-primary);
}
.eureko-blog-page .pagination .page-numbers.current {
	background: var(--eureko-primary);
	border-color: var(--eureko-primary);
	color: var(--eureko-white);
}

/* ==========================================================================
   Blog — single article
   ========================================================================== */

/*
 * Figma 718:13314. The article is ONE 1048-of-1584 column (66.16%) centred in
 * the container — head, featured image, prose, author box and tags all share
 * it. `--eureko-article-col` is that measure; use it rather than repeating a
 * max-width on each block.
 */
.eureko-article {
	--eureko-article-col: 66.16%;
	/*
	 * Figma 718:13315 — the band runs 269px past the hero copy, i.e. behind the
	 * top ~38% of the featured image (band 43-890, image 621-1319). Expressed
	 * against the viewport because the band is full-bleed while the image is
	 * inside the 99rem container: 0.1685 x 0.825vw = 13.9vw, capped at the
	 * container's own maximum.
	 */
	--eureko-article-overlap: clamp(3rem, 13.9vw, 16.68rem);
	/* Only the hero band is beige; everything below it sits on white. Without
	   this the body's cream shows through every transparent section. */
	background: var(--eureko-white);
}
.eureko-article-band {
	/* The hero copy, then the overlap that runs behind the featured image. */
	padding-bottom: calc(3rem + var(--eureko-article-overlap));
}
.eureko-article__hero {
	position: relative;
	z-index: 1;
	padding-block: 3rem 0;
}
.eureko-article__head {
	width: 100%;
	max-width: var(--eureko-article-col);
	margin: 0 auto;
}
.eureko-article__title {
	font-size: var(--eureko-fs-display-l);
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0 0 1.25rem;
}
/* The breadcrumb starts at the column's left edge, not the container's. */
.eureko-article__hero .eureko-breadcrumb {
	width: 100%;
	max-width: var(--eureko-article-col);
	margin: 0 auto 1.5rem;
}
/* Figma 718:13336 — 48px avatar + name, then calendar / timer, 24px apart. */
.eureko-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin-top: 1.5rem;
	font-size: var(--eureko-fs-base);
	color: var(--eureko-text);
}
.eureko-article__author {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.eureko-article__author img,
.eureko-article__author-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(99, 157, 33, 0.15);
	flex-shrink: 0;
}
.eureko-article__author-name {
	color: var(--eureko-text);
	letter-spacing: 0.32px;
}
.eureko-article__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	line-height: 1.2;
}
.eureko-article__meta-item .material-symbols-outlined {
	font-size: 1rem;
	color: var(--eureko-primary);
}
.eureko-article__lead {
	margin: 1.5rem 0 0;
	font-size: 1.125rem;
	color: var(--eureko-muted);
	line-height: 1.7;
}
/* 1048x698 = 3/2, sitting on the white below the band. It does NOT overlap the
   hero — the previous negative-margin/overlap treatment is gone. */
.eureko-article__featured {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--eureko-article-col);
	margin: calc(-1 * var(--eureko-article-overlap)) auto 0;
	aspect-ratio: 3 / 2;
	border-radius: var(--eureko-radius-l);
	overflow: hidden;
}
.eureko-article__featured-img,
.eureko-article__featured-placeholder {
	width: 100%;
	height: 100%;
	display: block;
}
.eureko-article__featured-img {
	object-fit: cover;
}
.eureko-article__featured-placeholder {
	background: #eef1f4;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--eureko-muted);
}
.eureko-article__featured-placeholder .material-symbols-outlined {
	font-size: 3rem;
	opacity: 0.5;
}

/* Table of contents — Figma 718:13350: cream panel, radius 24, 48px padding,
   H2-sized title, 8px green dots, 18px underlined items. */
.eureko-article__toc {
	background: var(--eureko-cream);
	border: 0;
	border-radius: var(--eureko-radius-l);
	padding: 1.75rem;
}
.eureko-article__toc-title {
	font-family: var(--eureko-font-heading);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0 0 1.5rem;
}
.eureko-article__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}
.eureko-article__toc-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.eureko-article__toc-item::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--eureko-primary);
}
.eureko-article__toc-item--sub {
	padding-left: 1.25rem;
}
.eureko-article__toc-list a {
	font-size: 1.125rem;
	line-height: 1.2;
	color: var(--eureko-text);
	text-decoration: underline;
}
.eureko-article__toc-list a:hover {
	color: var(--eureko-primary);
}
@media (min-width: 768px) {
	.eureko-article__toc {
		padding: 3rem;
	}
	.eureko-article__toc-title {
		font-size: 2rem;
	}
}

/*
 * Prose — Figma 718:13368. Body is Text L: 18px / 1.7 in `--eureko-muted`;
 * headings are Catamaran Medium (500), NOT 600; in-body links are the darker
 * green #497b11, underlined.
 */
.eureko-article__content {
	width: 100%;
	max-width: var(--eureko-article-col);
	margin: 3rem auto 0;
	color: var(--eureko-muted);
	font-size: 1.125rem;
	line-height: 1.7;
}
.eureko-article__content > .eureko-article__toc + * {
	margin-top: 3rem;
}
.eureko-article__content > * + * {
	margin-top: 1.5rem;
}
.eureko-article__content h2,
.eureko-article__content h3,
.eureko-article__content h4 {
	font-family: var(--eureko-font-heading);
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	margin-bottom: 1rem;
}
.eureko-article__content h2 {
	font-size: clamp(1.625rem, 3vw, 2rem);
	margin-top: 3rem;
}
.eureko-article__content h3 {
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	margin-top: 2.5rem;
}
.eureko-article__content h4 {
	font-size: 1.5rem;
	margin-top: 2rem;
}
.eureko-article__content p {
	color: var(--eureko-muted);
}
.eureko-article__content strong {
	font-weight: 700;
	color: var(--eureko-muted);
}
/*
 * 🔴 `:not(.eureko-btn)` is LOAD-BEARING. An article body may embed a real CTA
 * (post 304 ships `<a class="eureko-btn eureko-btn--primary">`), and this prose
 * rule is (0,1,1) against the button's own (0,1,0) — so it did not merely win,
 * it painted the pill's label dark green AND underlined it. Client-reported
 * 2026-08-30. ⛔ Do not drop the negation.
 */
.eureko-article__content a:not(.eureko-btn) {
	color: #497b11;
	text-decoration: underline;
}
/* Body lists use the same 8px green dot as the TOC (Figma 718:13398). */
.eureko-article__content ul,
.eureko-article__content ol {
	list-style: none;
	padding-left: 2rem;
	margin-block: 1.5rem;
	color: var(--eureko-muted);
	display: grid;
	gap: 1rem;
}
.eureko-article__content ul li {
	position: relative;
	padding-left: 1.25rem;
	line-height: 1.2;
}
.eureko-article__content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--eureko-primary);
}
.eureko-article__content ol {
	list-style: decimal;
	padding-left: 3rem;
}
.eureko-article__content img {
	border-radius: var(--eureko-radius-l);
	height: auto;
}
.eureko-article__content figure {
	margin: 2.5rem 0;
}
.eureko-article__content figcaption {
	margin-top: 0.75rem;
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-muted);
}
/* Quote (Figma 718:13440) — cream panel with the brand quote mark, not a rule. */
.eureko-article__content blockquote {
	position: relative;
	margin: 3rem 0;
	padding: 3rem 3rem 3rem 6rem;
	background: var(--eureko-cream);
	border: 0;
	border-radius: var(--eureko-radius-l);
	font-size: 1.375rem;
	line-height: 1.5;
	color: var(--eureko-text);
}
.eureko-article__content blockquote::before {
	content: "";
	position: absolute;
	left: 3rem;
	top: 3rem;
	width: 2rem;
	height: 2rem;
	background: var(--eureko-primary);
	-webkit-mask: url('../images/decor/quote-mark.svg') left top / contain no-repeat;
	mask: url('../images/decor/quote-mark.svg') left top / contain no-repeat;
}
.eureko-article__content blockquote p {
	color: var(--eureko-text);
	margin: 0;
}
.eureko-article__content blockquote p + p {
	margin-top: 1rem;
}
@media (max-width: 599px) {
	.eureko-article__content blockquote {
		padding: 2rem 1.5rem;
	}
	.eureko-article__content blockquote::before {
		position: static;
		display: block;
		margin-bottom: 1rem;
	}
}

/*
 * Author box — Figma 718:13467. Beige panel, radius 24, portrait bleeding into
 * the bottom-left corner: the photo is bottom-aligned (`align-items: end`) with
 * NO padding on its side, so the panel's own radius clips it. The copy column
 * carries the 48px padding instead.
 */
.eureko-article-author-box {
	width: 100%;
	max-width: var(--eureko-article-col);
	margin: 4rem auto 0;
	background: var(--eureko-cream);
	border: 0;
	border-radius: var(--eureko-radius-l);
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0;
	align-items: stretch;
}
.eureko-article-author-box__media {
	flex: none;
	width: 100%;
	max-width: 311px;
	aspect-ratio: 311 / 268;
	overflow: hidden;
	align-self: flex-start;
}
.eureko-article-author-box__media img,
.eureko-article-author-box__avatar {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	border-radius: 0;
}
.eureko-article-author-box__body {
	padding: 2rem;
}
/* Eyebrow — brand green, uppercase, ExtraBold 12px. */
.eureko-article-author-box__label {
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.48px;
	color: var(--eureko-primary);
	margin: 0;
}
.eureko-article-author-box__name {
	font-family: var(--eureko-font-heading);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0.25rem 0 1rem;
}
.eureko-article-author-box__bio {
	font-size: 1rem;
	color: var(--eureko-muted);
	line-height: 1.7;
	margin: 0 0 1rem;
}
.eureko-article-author-box__bio a {
	color: #497b11;
	text-decoration: underline;
}
@media (min-width: 768px) {
	.eureko-article-author-box {
		flex-direction: row;
		align-items: flex-end;   /* the cut-out stands on the panel floor */
		gap: 2.9375rem;          /* Figma 47px */
	}
	.eureko-article-author-box__media {
		align-self: flex-end;
	}
	.eureko-article-author-box__body {
		flex: 1 1 0;
		min-width: 0;
		padding: 3rem 3rem 3rem 0;
	}
}

/* Tags — same panel-less list as the design (718:13475). */
.eureko-article-tags {
	width: 100%;
	max-width: var(--eureko-article-col);
	margin: 4rem auto 0;
}
.eureko-article-tags__label {
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.4px;
	color: var(--eureko-muted);
	margin: 0 0 1.5rem;
}
.eureko-article-tags__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
/* Chip styling now lives on the base `.eureko-pill` — see the note there. */

/* Related — 4 cards, heading left-aligned (718:13493). */
.eureko-article-related {
	padding-block: 4rem;
	margin-top: 2rem;
	background: var(--eureko-white);
}
.eureko-article-related__title {
	font-size: var(--eureko-fs-h4, 1.5rem);
	color: var(--eureko-text);
	text-align: left;
	margin: 0 0 2rem;
}


/* ==========================================================================
   Ortopedie — service layout (sidebar hero + 2-col body + steps)
   ========================================================================== */

/* Hero */
/* Figma 718:7625 — the cream comes from the enclosing `.eureko-hero-band`. */
.eureko-orto-hero {
	/* Clips the front portrait's flat bottom edge at the band boundary so she
	   reads as disappearing behind the next section. Safe to clip here: the
	   floating insurer strip is a SIBLING inside .eureko-hero-band, not a child
	   of this section, so it still overhangs the band edge. */
	overflow: hidden;
	background: transparent;
	padding-block: 2.5rem 3rem;
	position: relative;
	z-index: 1;
}
.eureko-orto-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}
.eureko-orto-hero__content {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.eureko-orto-hero__title {
	font-family: var(--eureko-font-heading);
	font-size: clamp(2.5rem, 5vw, 3.5rem); /* Display XL 56px */
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0;
}
.eureko-orto-hero__lead {
	font-size: 1.25rem; /* Text XL 20px */
	color: var(--eureko-muted);
	line-height: 1.7;
	margin: 0;
}
.eureko-orto-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
/* Doctor + reception contact, side by side (718:7646) */
.eureko-orto-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2.5rem;
}
.eureko-orto-hero__doctor {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.eureko-orto-hero__doctor-avatar {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	background: rgba(99, 157, 33, 0.15);
}
.eureko-orto-hero__doctor-text {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	line-height: 1.2;
}
.eureko-orto-hero__doctor-label {
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eureko-muted);
}
.eureko-orto-hero__doctor-name {
	font-family: var(--eureko-font-heading);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--eureko-text);
}
/*
 * The name links to the doctor's medailonek (client request, 2026-08-17). It
 * renders as an <a> only when the `tym` post exists and is published, so this
 * modifier must inherit the plain name's look and only add affordance.
 */
.eureko-orto-hero__doctor-name--link {
	text-decoration: none;
	transition: color 0.2s ease;
}
.eureko-orto-hero__doctor-name--link:hover,
.eureko-orto-hero__doctor-name--link:focus-visible {
	color: var(--eureko-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.eureko-orto-hero__contact {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.eureko-orto-hero__contact-avatar {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(99, 157, 33, 0.15);
}
.eureko-orto-hero__contact-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eureko-orto-hero__contact-line {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}
.eureko-orto-hero__contact-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--eureko-primary);
	flex: none;
}
.eureko-orto-hero__contact-text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.eureko-orto-hero__contact-label {
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--eureko-muted);
}
.eureko-orto-hero__contact-value {
	font-family: var(--eureko-font-heading);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	text-decoration: none;
}
.eureko-orto-hero__contact-value:hover {
	color: var(--eureko-primary);
}
.eureko-orto-hero__contact-hours {
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--eureko-muted);
}
/*
 * "Contact small" is sized per instance. The ambulance hero draws it at 64px /
 * Catamaran 24px; 718:10342 (and the Fyzioterapie hero) use 56px with the
 * number in Figtree SemiBold 20px.
 */
.eureko-orto-hero__contact--sm {
	gap: 17px;
	padding-left: 1.5rem;
}
.eureko-orto-hero__contact--sm .eureko-orto-hero__contact-avatar {
	width: 56px;
	height: 56px;
}
.eureko-orto-hero__contact--sm .eureko-orto-hero__contact-value {
	font-family: var(--eureko-font-body);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--eureko-muted);
}

/* Hero media — 804x536 plate + a 447x430 portrait over its lower-left,
   with the office-hours card floating on top (718:7639/7640/7641). */
.eureko-orto-hero__media {
	position: relative;
	display: none;
}
.eureko-orto-hero__photo {
	display: block;
	width: 100%;
	aspect-ratio: 804 / 536;
	object-fit: cover;
	border-radius: var(--eureko-radius-xl);
}
/* Figma 718:7640 is a background-removed PNG, not a photo card: the doctor
   stands in FRONT of the plate and is cropped by the band edge below. No
   radius, no fill — a rounded white rectangle here reads as a broken card. */
.eureko-orto-hero__photo--front {
	position: absolute;
	left: -13.31%;
	width: 55.6%;
	height: 80.22%;
	aspect-ratio: auto;
	border-radius: 0;
	object-fit: contain;
	object-position: center bottom;
	z-index: 1;
	/* Pushed far enough past the section's bottom edge that the cut-out's flat
	   base is clipped away by the section's overflow, not left floating. */
	bottom: calc(-31% - 68px);
}

/* Floating office-hours card — Figma 718:7641 */
.eureko-orto-hours {
	background: var(--eureko-white);
	border-radius: 20px;
	filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.9375rem;
}
/* Anchored to the BOTTOM, not the top: the card's height depends on how many
   days a service lists, and a top offset let it hang off the photo. */
.eureko-orto-hero__media .eureko-orto-hours {
	position: absolute;
	left: 58.08%;
	/* Figma 718:8291 hangs the card 40px BELOW the plate's bottom edge. */
	bottom: -7.5%;
	width: 39.8%;
	z-index: 2;
}
.eureko-orto-hours__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--eureko-font-heading);
	font-size: 1.375rem; /* H5 22px */
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0;
	white-space: nowrap;
}
.eureko-orto-hours__icon {
	font-size: 24px;
	color: #a8a9ab;
}
.eureko-orto-hours__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.eureko-orto-hours__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 12px;
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--eureko-muted);
	border-bottom: 1px solid #eaeaeb;
}
/* Today's row — same treatment as the Kontakt hours card (654:10401). */
.eureko-orto-hours__row--active {
	background: rgba(99, 157, 33, 0.1);
	border-radius: 12px;
	border-bottom-color: transparent;
	font-weight: 700;
}
.eureko-orto-hours__day {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 80px;
}
.eureko-orto-hours__dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--eureko-primary);
}
.eureko-orto-hours__time {
	white-space: nowrap;
}
/* Only the hero band is cream on a service page; everything below it is white.
   The tinted CARDS inside (info--card, pricing, steps) stay — the design uses
   cream cards on a white page, which is not the same as a cream band. */
.eureko-service {
	background: var(--eureko-white);
}
.eureko-service .eureko-orto-steps .eureko-container {
	background: var(--eureko-cream);
}

/* Media rows on a service page (718:9121 / 718:9122) — the halves meet at the
   midpoint with no gutter, the photo is 803/577 at radius 32, and the copy sits
   behind 120px of padding under a Display-L heading. Scoped to .eureko-service
   so the O nás / Tělocvična rows keep their own (smaller) spec. */
.eureko-service .eureko-media-text__image,
.eureko-service .eureko-media-text__placeholder {
	aspect-ratio: 803 / 577;
	height: auto;
	border-radius: var(--eureko-radius-xl);
}
.eureko-service .eureko-media-text__title {
	font-size: var(--eureko-fs-display-l);
	margin-bottom: 1.5rem;
}
.eureko-service .eureko-media-text__text {
	font-size: 1.125rem;
	line-height: 1.7;
	margin-bottom: 0;
}
/* 718:9121 highlights key phrases in green + underline. */
.eureko-service .eureko-media-text__text a {
	color: #497b11;
	text-decoration: underline;
}
.eureko-service .eureko-media-text__text a:hover,
.eureko-service .eureko-media-text__text a:focus-visible {
	color: var(--eureko-primary-hover);
}
.eureko-service .eureko-media-text__text strong {
	font-weight: 700;
	color: inherit;
}
@media (min-width: 768px) {
	.eureko-service .eureko-media-text__inner {
		gap: 0;
	}
	.eureko-service .eureko-media-text__body {
		padding-inline: clamp(2rem, 6.25vw, 7.5rem);
	}
}
/* Panel variant on a service page (Figma 718:15972). Two corrections over the
   generic `--panel` rules, both of which have to sit AFTER the `.eureko-service`
   media-row block to win on source order (all these selectors are two classes).

   1. The panel is the WHOLE block: it spans the same 1584 container as the plain
      rows above and below it, so the generic variant's extra section gutter is
      cancelled here. Otherwise the cream card is visibly narrower than its
      neighbours.
   2. The PHOTO drives the row height, not the copy. Keeping the 803/577 aspect
      makes the block 569px tall exactly as the frame does; letting the image
      stretch to `height: 100%` instead collapses the cream card down to the
      height of the text. */
.eureko-service .eureko-media-text--panel {
	padding-inline: 0;
}
.eureko-service .eureko-media-text--panel .eureko-media-text__image,
.eureko-service .eureko-media-text--panel .eureko-media-text__placeholder {
	aspect-ratio: 803 / 577;
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 0;
	/* 718:15998 sets mix-blend-multiply on the fill: the whole block reads as one
	   continuous beige field with the device standing on it, NOT a photo
	   rectangle butted against a beige text half. The shot's white studio
	   backdrop multiplies away to the panel colour. */
	mix-blend-mode: multiply;
}
@media (min-width: 768px) {
	/* The copy centres inside the height the photo has established. */
	.eureko-service .eureko-media-text--panel .eureko-media-text__inner {
		align-items: stretch;
	}
	.eureko-service .eureko-media-text--panel .eureko-media-text__body {
		align-self: center;
		padding-block: 2rem;
	}
}

/* Fyzioterapie hero action row (718:8967) — two pills 16px apart, then the
   „Contact small" instance behind a 24px gutter, all vertically centred. */
.eureko-fyzio-hero .eureko-orto-hero__meta {
	align-items: center;
	gap: 1.5rem 1rem;
}
.eureko-fyzio-hero .eureko-orto-hero__buttons {
	align-items: center;
	gap: 1rem;
}
.eureko-fyzio-hero .eureko-orto-hero__contact {
	gap: 17px;
	padding-left: 1.5rem;
}
.eureko-fyzio-hero .eureko-orto-hero__contact-avatar {
	width: 56px;
	height: 56px;
}
.eureko-fyzio-hero .eureko-orto-hero__contact-text {
	gap: 2px;
	max-width: 202px;
}
/* This instance uses the body font at 20px, not the 24px Catamaran of the
   ambulance hero — same component, different size token. */
.eureko-fyzio-hero .eureko-orto-hero__contact-value {
	font-family: var(--eureko-font-body);
	font-size: 1.25rem;
	font-weight: 600;
	color: #505460;
}
.eureko-fyzio-hero .eureko-orto-hero__contact-label,
.eureko-fyzio-hero .eureko-orto-hero__contact-hours {
	font-size: 0.875rem;
	color: #505460;
}

/* „Ceník služeb" carries a small tooltip badge pointing at the self-payer page
   (718:8972). It is ABSOLUTE in the design too — it must not add height to the
   wrapper, or the two pills stop lining up with each other and the contact. */
.eureko-fyzio-hero__btn-wrap {
	position: relative;
	display: inline-flex;
}
.eureko-fyzio-hero__tip {
	position: absolute;
	top: calc(100% + 5px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--eureko-white);
	border-radius: 7px;
	padding: 0.5rem 1rem;
	font-family: var(--eureko-font-heading);
	font-size: 0.8125rem;
	line-height: 1.2;
	color: var(--eureko-text);
	text-decoration: none;
	white-space: nowrap;
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.25));
}
.eureko-fyzio-hero__tip::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-bottom-color: var(--eureko-white);
	border-top-width: 0;
}
.eureko-fyzio-hero__tip:hover,
.eureko-fyzio-hero__tip:focus-visible {
	color: var(--eureko-primary);
}

/* Strip spacing contract — the card floats from 768px up, so the clearance
   starts there too: the hero reserves --eureko-strip-above below its content
   and the body clears the overhang with --eureko-strip-below. Without this the
   card lands on top of „S čím vám pomůžeme". */
@media (min-width: 768px) {
	.eureko-sluzba-band .eureko-orto-hero {
		padding-bottom: var(--eureko-strip-above);
	}
	/* Fyzioterapie (718:8962) places the cut-out ON the plate's lower-left and
	   lets the floating insurer card cover her flat bottom edge — so unlike the
	   ambulance hero this one must NOT clip, and the strip must sit above her. */
	.eureko-fyzio-hero {
		overflow: visible;
	}
	.eureko-sluzba-band--fyzio .eureko-insurance-strip {
		z-index: 3;
	}
	.eureko-fyzio-hero .eureko-orto-hero__photo--front {
		left: -12.19%;   /* 851 - 949, over the 804 plate */
		top: 36.75%;     /* 414 - 217, over the 536 plate */
		bottom: auto;
		width: 52.11%;   /* 419 */
		height: 89.74%;  /* 481 */
		object-fit: cover;
		object-position: center top;
	}
	.eureko-sluzba-band + .eureko-orto-body {
		padding-top: var(--eureko-strip-below);
	}
	/* Fyzioterapie puts the methods panel under the band instead, so it carries
	   the same clearance — otherwise the floating insurer card lands on the
	   „Individuální fyzioterapeutické metody a terapie" heading. */
	.eureko-sluzba-band + .eureko-sluzba-methods {
		padding-top: var(--eureko-strip-below);
	}
}

/* Two-column body */
.eureko-orto-body {
	padding-block: 3rem;
}
.eureko-orto-body__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}
.eureko-orto-main {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	min-width: 0;
}
.eureko-orto-info__title {
	font-size: var(--eureko-fs-display-m);
	color: var(--eureko-text);
	margin: 0 0 1rem;
}
.eureko-orto-info__text {
	font-size: var(--eureko-fs-base);
	color: var(--eureko-muted);
	line-height: 1.7;
	margin: 0;
}
/* Figma 718:7703 — pale blue note card with the brand mark on the left.
   leaf-cream.svg is painted through a mask (its own fill is #F7F4F0). */
.eureko-orto-info--card {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	background: #f0f8ff;
	border: none;
	border-radius: var(--eureko-radius-l);
	padding: 2rem;
	filter: drop-shadow(0 4px 2px rgba(162, 187, 209, 0.26));
}
/* Figma 718:8358 — the mark is 130x160 here, a TALLER framing than
   leaf-cream.svg (362x351, authored for usp-about). leaf-mark.svg is composed
   from this node's own four vectors, so nothing is cropped or squeezed. */
.eureko-orto-info__mark {
	display: none;
	flex: none;
	width: 8.125rem;   /* Figma 130px */
	aspect-ratio: 130.07 / 160;
	background: #d5dfe7;
	-webkit-mask: url('../images/decor/leaf-mark.svg') center / contain no-repeat;
	mask: url('../images/decor/leaf-mark.svg') center / contain no-repeat;
}
.eureko-orto-info__body {
	min-width: 0;
	flex: 1 1 auto;
}
.eureko-orto-info--card .eureko-orto-info__title {
	font-size: 2rem;   /* Heading 2 = 32px */
	color: #0f407e;
}
@media (min-width: 768px) {
	.eureko-orto-info--card {
		padding: 3rem;
	}
	.eureko-orto-info__mark {
		display: block;
	}
}
/* Figma 718:7666 — the two bullet columns sit in a CREAM CARD: radius 24,
   48px padding, 64px between columns, 16px between rows, 8px green dots. */
.eureko-orto-list-wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem 4rem;
	margin-top: 1.5rem;
	background: var(--eureko-cream);
	border-radius: var(--eureko-radius-l);
	padding: 1.75rem;
}
@media (min-width: 768px) {
	.eureko-orto-list-wrap {
		grid-template-columns: 1fr 1fr;
		padding: 3rem;
	}
}
.eureko-orto-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.eureko-orto-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1.125rem;
	line-height: 1.2;
	color: #353e5c;
}
.eureko-orto-list__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--eureko-primary);
}

/* Pricing card — Figma 718:7731. Cream panel, radius 24, 48px padding, zebra
   rows (odd rows a white radius-6 plate) and a centred outline pill. */
.eureko-orto-pricing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	background: var(--eureko-cream);
	border: none;
	border-radius: var(--eureko-radius-l);
	padding: 2rem;
}
.eureko-orto-pricing__title {
	align-self: stretch;
	font-size: 1.75rem;   /* Heading 3 = 28px */
	line-height: 1.2;
	color: #353e5c;
	margin: 0 0 1rem;
}
.eureko-orto-pricing__list {
	align-self: stretch;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}
.eureko-orto-pricing__row {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem;
	align-items: center;
	font-size: 1.125rem;
	line-height: 1.2;
	color: var(--eureko-muted);
}
.eureko-orto-pricing__row:nth-child(odd) {
	background: var(--eureko-white);
	border-radius: 6px;
}
.eureko-orto-pricing__info {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.eureko-orto-pricing__name {
	font-weight: 400;
	color: inherit;
}
.eureko-orto-pricing__desc {
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-muted);
	line-height: 1.5;
}
.eureko-orto-pricing__price {
	flex: none;
	font-weight: 700;
	color: inherit;
	text-align: right;
}
@media (min-width: 768px) {
	.eureko-orto-pricing {
		padding: 3rem;
	}
	.eureko-orto-pricing__price {
		white-space: nowrap;
	}
}

/* Sidebar */
.eureko-orto-aside {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Figma 718:8407 „Info" — navy card at the top of the sidebar, 40/24 padding,
   28px title over an 18px line, with a 30%-white 48px glyph on the right. */
.eureko-orto-aside__info {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: #1f2f83;
	border-radius: var(--eureko-radius-l);
	padding: 1.5rem 2.5rem;
	color: #fff;
}
.eureko-orto-aside__info-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.eureko-orto-aside__info-title {
	font-family: var(--eureko-font-heading);
	font-size: 1.75rem;   /* H3 28px */
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	margin: 0;
}
.eureko-orto-aside__info-text {
	font-size: 1.125rem;
	line-height: 1.7;
	color: #fff;
	margin: 0;
}
.eureko-orto-aside__info-icon {
	flex: none;
	font-size: 48px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.3);
}

/* Figma 718:7744 „CTA - green" — solid green, radius 24, 40px padding, with a
   circular photo bleeding off the right edge and a WHITE pill button. */
.eureko-orto-aside__cta-green {
	position: relative;
	overflow: hidden;
	background: var(--eureko-primary);
	border-radius: var(--eureko-radius-l);
	padding: 2.5rem;
	color: #fff;
}
.eureko-orto-aside__cta-green-photo {
	position: absolute;
	/* design 62.7% / 30.2%, nudged down and left at the user's request.
	   ✅ The 75px nudge (circle bleeding off the card's bottom-right, clipped by
	   the card's overflow) is DELIBERATE and confirmed — do not "fix" it. */
	left: calc(62.7% - 50px);
	top: calc(30.2% + 75px);
	width: 54.9%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	pointer-events: none;
}
.eureko-orto-aside__cta-green-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
	max-width: 71.1%; /* 364 of 512 */
}
.eureko-orto-aside__cta-green-title {
	font-family: var(--eureko-font-heading);
	font-size: 1.75rem; /* H3 28px */
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	margin: 0;
}
.eureko-orto-aside__cta-green-text {
	font-size: 1.125rem;
	line-height: 1.7;
	color: #fff;
	margin: 0;
	/* The circular photo starts at 62.7% of the card — keep the body clear of it.
	   The title sits above the circle and may use the full column. */
	max-width: 62%;
}
.eureko-orto-aside__cta-green .eureko-btn {
	margin-top: 0.5rem;
}

/* Figma 718:7745 „Contact" — #eff5e8 card with the receptionist cut-out in the
   bottom-right corner. */
.eureko-orto-aside__cta {
	position: relative;
	overflow: hidden;
	background: #eff5e8;
	color: var(--eureko-muted);
	border-radius: var(--eureko-radius-l);
	padding: 3.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}
.eureko-orto-aside__cta-photo {
	position: absolute;
	right: 3.2%;
	bottom: 0;
	width: 40.2%;
	/* Cut-out is 726x1080; show only the upper half so the torso stops
	   running over the address block. Bottom-anchored, so the crop lowers her. */
	aspect-ratio: 726 / 675;
	object-fit: cover;
	object-position: center top;
	pointer-events: none;
	z-index: 0;
}
.eureko-orto-aside__cta > *:not(.eureko-orto-aside__cta-photo) {
	position: relative;
	z-index: 1;
}
.eureko-orto-aside__cta-title {
	font-family: var(--eureko-font-heading);
	font-size: 2.25rem; /* 36px */
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.72px;
	color: var(--eureko-text);
	margin: 0;
}
.eureko-orto-aside__cta-hours {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1rem;
	line-height: 1.2;
	color: var(--eureko-muted);
	margin: 0;
}
.eureko-orto-aside__cta-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--eureko-primary);
	flex: none;
}
.eureko-orto-aside__cta-note {
	font-size: 1rem;
	line-height: 1.2;
	color: var(--eureko-muted);
	margin: 0;
	max-width: 26rem;
}
.eureko-orto-aside__cta-note strong {
	font-weight: 700;
	display: block;
}
.eureko-orto-aside__cta-contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
}
.eureko-orto-aside__cta-visit {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	max-width: 25rem;
}
.eureko-orto-aside__cta-contact {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.eureko-orto-aside__cta-label {
	font-size: 1rem;
	line-height: 1.2;
	color: var(--eureko-muted);
}
.eureko-orto-aside__cta-value,
.eureko-orto-aside__cta-address {
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--eureko-muted);
	text-decoration: none;
	word-break: break-word;
}
.eureko-orto-aside__cta-value {
	text-decoration: underline;
	text-underline-position: from-font;
}
.eureko-orto-aside__cta-value:hover {
	color: var(--eureko-primary);
}
.eureko-orto-aside__cta > .eureko-btn {
	margin-top: 0.75rem;
}
@media (max-width: 1279px) {
	.eureko-orto-aside__cta {
		padding: 2rem;
	}
	.eureko-orto-aside__cta-photo {
		display: none;
	}
	.eureko-orto-aside__cta-title {
		font-size: 1.75rem;
	}
}

/* "Jak to probíhá" steps */
.eureko-orto-steps {
	padding-block: 3rem;
}
.eureko-orto-steps .eureko-container {
	background: #f1f3f5;
	border-radius: var(--eureko-radius-xl, 32px);
	padding: 3rem 2rem;
}
.eureko-orto-steps__title {
	font-size: var(--eureko-fs-display-m);
	color: var(--eureko-text);
	text-align: center;
	margin: 0 0 2.5rem;
}
.eureko-orto-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
.eureko-orto-steps__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.eureko-orto-steps__num {
	font-family: var(--eureko-font-heading);
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
	color: var(--eureko-primary);
}
.eureko-orto-steps__step-title {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--eureko-text);
	margin: 0;
}
.eureko-orto-steps__step-desc {
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-muted);
	line-height: 1.5;
	margin: 0;
}
.eureko-orto-steps__action {
	text-align: center;
	margin-top: 2.5rem;
}

@media (min-width: 600px) {
	.eureko-orto-list-wrap {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 768px) {
	.eureko-orto-steps__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	/* Figma: copy 655 | gutter 126 | media 804 on the 1584 container. */
	.eureko-orto-hero__inner {
		grid-template-columns: 655fr 804fr;
		column-gap: 126px;
		align-items: center;
	}
	.eureko-orto-hero__media {
		display: block;
	}
	/* Figma 718:7660 — main column 983, sidebar 512, 89px apart. */
	.eureko-orto-body__inner {
		grid-template-columns: minmax(0, 983fr) 512fr;
		column-gap: 89px;
	}
	.eureko-orto-aside {
		position: sticky;
		top: 6rem;
	}
	.eureko-orto-steps__list {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* ==========================================================================
   Mega menu — desktop "Nabídka služeb" dropdown (Figma 654:12355)
   ========================================================================== */

.eureko-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--eureko-white);
	border-top: 1px solid var(--eureko-border);
	box-shadow: var(--eureko-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 90;
	max-height: calc(100vh - 4.5rem);
	overflow-y: auto;
}
.eureko-mega--open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.eureko-mega__inner {
	padding-block: 2.5rem;
}
/* Figma: Catamaran ExtraBold 16 / 0.96px, brand green — NOT the old grey. */
.eureko-mega__eyebrow {
	font-family: var(--eureko-font-heading);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.375;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	color: var(--eureko-primary);
	margin: 0 0 2.6875rem;
}

/* --- Top row: services | vertical rule | procedury ------------------------ */
.eureko-mega__row--top {
	display: grid;
	grid-template-columns: 14.25rem 1fr;
}
.eureko-mega__procedury {
	border-left: 1px solid var(--eureko-border);
	padding-left: 2.5rem;
}

/* Left services column */
.eureko-mega__services {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.eureko-mega__services a {
	font-family: var(--eureko-font-heading);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	text-decoration: none;
	transition: color var(--eureko-transition);
}
.eureko-mega__services a:hover,
.eureko-mega__services a:focus-visible {
	color: var(--eureko-primary);
}

/* Procedury columns */
.eureko-mega__columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3rem;
}
.eureko-mega__group-title {
	font-family: var(--eureko-font-heading);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0;
}
/* 34x3 green rule under every group title. */
.eureko-mega__group-title::after {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	background: #66b32e;
	margin-top: 1rem;
}
.eureko-mega__list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
/* Second group stacked in the same column ("Regenerační oddělení"). */
.eureko-mega__list + .eureko-mega__group-title {
	margin-top: 2rem;
}
.eureko-mega__list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.eureko-mega__list li::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #eaeaeb;
	transition: background var(--eureko-transition);
}
.eureko-mega__list li:hover::before {
	background: var(--eureko-primary);
}
.eureko-mega__list a {
	font-size: 0.875rem;
	line-height: 1.2;
	color: #353e5c;
	text-decoration: none;
	transition: color var(--eureko-transition);
}
.eureko-mega__list a:hover,
.eureko-mega__list a:focus-visible {
	color: var(--eureko-primary);
}

.eureko-mega__divider {
	border: 0;
	border-top: 1px solid var(--eureko-border);
	margin: 2.5rem 0;
}

/* --- Bottom: Pro pacienty ------------------------------------------------- */
.eureko-mega__row--bottom .eureko-mega__eyebrow {
	margin-bottom: 2rem;
}
.eureko-mega__patients {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.eureko-mega__buttons {
	display: flex;
	gap: 1.5rem;
	flex: 3 1 0;
	min-width: 0;
}
.eureko-mega__btn {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 1rem 1.5rem;
	background: var(--eureko-cream);
	border-radius: var(--eureko-radius-s);
	text-decoration: none;
	transition: background var(--eureko-transition);
}
.eureko-mega__btn:hover,
.eureko-mega__btn:focus-visible {
	background: #eff5e8;
}
.eureko-mega__btn-icon {
	flex: none;
	width: 2rem;
	height: 2rem;
	display: block;
}
.eureko-mega__btn-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.eureko-mega__btn-label {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--eureko-font-heading);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.36px;
	color: var(--eureko-text);
}
.eureko-mega__btn-plus {
	flex: none;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--eureko-radius-pill);
	background: var(--eureko-primary);
	color: #fff;
	font-size: 16px;
	transition: background var(--eureko-transition), transform var(--eureko-transition);
}
.eureko-mega__btn:hover .eureko-mega__btn-plus {
	background: var(--eureko-primary-hover);
	transform: rotate(90deg);
}

.eureko-mega__help {
	display: flex;
	align-items: center;
	gap: 1.0625rem;
	flex: 1 1 0;
	min-width: 0;
}
.eureko-mega__help-avatar {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	overflow: hidden;
	background: #eef1f4;
	flex: none;
}
.eureko-mega__help-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eureko-mega__help-text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}
.eureko-mega__help-label {
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--eureko-muted);
}
.eureko-mega__help-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.eureko-mega__help-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.8125rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--eureko-muted);
	text-decoration: none;
	white-space: nowrap;
}
.eureko-mega__help-phone::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--eureko-primary);
	flex: none;
}
.eureko-mega__help-phone:hover {
	color: var(--eureko-primary);
}
.eureko-mega__help-hours {
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--eureko-muted);
	white-space: nowrap;
}

/* --- Bottom strip: partner insurers + Google rating ----------------------- */
.eureko-mega__row--partners {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}
.eureko-mega__insurers {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1 1 auto;
	min-width: 0;
}
.eureko-mega__insurers-label {
	flex: none;
	max-width: 14rem;
	margin: 0;
	font-family: var(--eureko-font-heading);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.84px;
	text-transform: uppercase;
	color: var(--eureko-text);
}
.eureko-mega__logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* NEVER wrap — the five insurers are one row in the design. The gap and the
	   logos themselves shrink instead (see the --logo-h rule below). */
	flex-wrap: nowrap;
	gap: clamp(1rem, 2.5vw, 3rem);
	flex: 1 1 auto;
	min-width: 0;
}
.eureko-mega__logos li {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}
.eureko-mega__logos img {
	display: block;
	width: auto;
	max-width: 100%;
	/* Per-logo cap from the design; --logo-h is set inline per <img>. */
	height: auto;
	max-height: var(--logo-h, 3rem);
	object-fit: contain;
}

.eureko-mega__google {
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.8125rem;
	text-decoration: none;
}
.eureko-mega__google-logo {
	width: 2.625rem;
	height: 2.625rem;
	flex: none;
}
.eureko-mega__google-score {
	font-family: var(--eureko-font-heading);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.375;
	letter-spacing: 1.92px;
	color: var(--eureko-primary);
	margin-right: 0.3125rem;
}
.eureko-mega__google-meta {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.eureko-mega__google-stars {
	display: flex;
	gap: 4px;
}
.eureko-mega__google-stars span {
	width: 16px;
	height: 16px;
	background-color: #f08929;
	-webkit-mask: url("../images/icons/star-rating.svg") center / contain no-repeat;
	mask: url("../images/icons/star-rating.svg") center / contain no-repeat;
}
.eureko-mega__google-count {
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--eureko-muted);
	text-decoration: underline;
}

/* Trigger chevron flips when open */
.eureko-header__services-btn[aria-expanded="true"] .material-symbols-outlined {
	transform: rotate(180deg);
}
.eureko-header__services-btn .material-symbols-outlined {
	transition: transform var(--eureko-transition);
}

/* Header turns solid while the mega menu is open */
.eureko-header.is-mega-open {
	background: var(--eureko-white);
	border-bottom-color: var(--eureko-border);
}

/* Dim backdrop below the header */
.eureko-mega-backdrop {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s;
	z-index: 80;
}
.eureko-mega-backdrop.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Desktop only */
@media (max-width: 1023px) {
	.eureko-mega,
	.eureko-mega-backdrop {
		display: none !important;
	}
}

/* Below the 1584px design width the 4-up procedury grid and the partner strip
   both need to breathe — tighten the gaps rather than let them wrap. */
@media (min-width: 1024px) and (max-width: 1439px) {
	.eureko-mega__columns {
		gap: 2rem;
	}
	.eureko-mega__btn {
		gap: 1rem;
		padding-inline: 1rem;
	}
	.eureko-mega__btn-label {
		font-size: 1rem;
	}
	.eureko-mega__insurers-label {
		max-width: 11rem;
		font-size: 0.8125rem;
	}
	.eureko-mega__row--partners {
		gap: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.eureko-mega__columns {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   Booking form drawer ("Objednávkový formulář")
   ========================================================================== */

.eureko-booking {
	position: fixed;
	inset: 0;
	z-index: 10000;
	visibility: hidden;
	pointer-events: none;
}
.eureko-booking--open {
	visibility: visible;
	pointer-events: auto;
}
.eureko-booking__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(61, 72, 86, 0.55);
	opacity: 0;
	transition: opacity 300ms ease;
}
.eureko-booking--open .eureko-booking__backdrop {
	opacity: 1;
}
.eureko-booking__panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(45.25rem, 100vw); /* 724px */
	max-width: 100vw;
	background: var(--eureko-white);
	box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12);
	transform: translateX(100%);
	transition: transform 320ms ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.eureko-booking--open .eureko-booking__panel {
	transform: translateX(0);
}
.eureko-booking__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: var(--eureko-radius-pill);
	cursor: pointer;
	color: var(--eureko-text);
}
.eureko-booking__close:hover {
	background: var(--eureko-cream);
}
.eureko-booking__inner {
	padding: 3.5rem 1.75rem 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.eureko-booking__title {
	font-size: clamp(1.6rem, 3vw, 2rem);
	font-weight: 700;
	color: var(--eureko-text);
	margin: 0;
	line-height: 1.15;
}
.eureko-booking__lead {
	color: var(--eureko-muted);
	margin: -0.5rem 0 0;
	line-height: 1.55;
}
.eureko-booking__alert {
	margin: 0;
	padding: 0.875rem 1.25rem;
	border-radius: var(--eureko-radius-md);
	font-size: 0.95rem;
	line-height: 1.45;
}
.eureko-booking__alert--ok {
	background: rgba(99, 157, 33, 0.12);
	color: var(--eureko-primary-hover);
}
.eureko-booking__alert--error {
	background: rgba(200, 60, 60, 0.1);
	color: #b23535;
}
.eureko-booking__form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Underline-style fields (match Figma) */
.eureko-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.eureko-field__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}
.eureko-field__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--eureko-text);
	line-height: 1.3;
}
.eureko-field__label--sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.eureko-field__hint {
	font-size: 0.85rem;
	color: var(--eureko-primary);
	text-decoration: none;
	white-space: nowrap;
}
.eureko-field__hint:hover {
	text-decoration: underline;
}
/* Boxed fields, measured off the booking-form design: 1px #e2e0e4, radius 8,
   40px tall, white, placeholder #a8aaac. (Was an underline treatment.) */
.eureko-field__input {
	width: 100%;
	border: 1px solid #e2e0e4;
	background: var(--eureko-white);
	padding: 0.625rem 0.875rem;
	min-height: 2.5rem;
	font-family: var(--eureko-font-body);
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--eureko-text);
	border-radius: 8px;
	box-sizing: border-box;
	transition: border-color var(--eureko-transition);
}
.eureko-field__input::placeholder {
	color: #a8aaac;
	opacity: 1;
}
.eureko-field__input:hover {
	border-color: #cfccd4;
}
.eureko-field__input:focus {
	outline: none;
	border-color: var(--eureko-primary);
	box-shadow: 0 0 0 3px rgba(99, 157, 33, 0.12);
}
/* Red asterisk on required labels. */
.eureko-field__req {
	color: #e02b2b;
}
/* Insurer + voucher share a row (single column on narrow panels). */
.eureko-field-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 400px) {
	.eureko-field-group {
		grid-template-columns: 1fr;
	}
}
.eureko-booking__consent {
	font-size: 0.875rem;
	color: var(--eureko-muted);
	margin: 0;
}
.eureko-booking__consent a {
	color: var(--eureko-text);
	text-decoration: underline;
}
.eureko-booking__consent a:hover {
	color: var(--eureko-primary);
}
.eureko-field__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23505460' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	padding-right: 2.25rem;
	cursor: pointer;
}
.eureko-field__textarea {
	resize: vertical;
	min-height: 4.5rem; /* 72px in the design */
	border: 1px solid #e2e0e4;
	border-radius: 8px;
	padding: 0.625rem 0.875rem;
}
.eureko-field__textarea:focus {
	border-color: var(--eureko-primary);
}
.eureko-booking__submit {
	width: 100%;
	justify-content: center;
	margin-top: 0.5rem;
}
/* Centred under the submit button, avatar + text as one centred group. */
.eureko-booking__help {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding-top: 1.5rem;
}
.eureko-booking__help-avatar {
	display: block;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--eureko-border);
	overflow: hidden;
	flex-shrink: 0;
}
.eureko-booking__help-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}
/* Green availability dot, matching the header's phone block. */
.eureko-booking__help-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--eureko-primary);
	flex-shrink: 0;
}
.eureko-booking__help-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.eureko-booking__help-label {
	font-size: 0.85rem;
	color: var(--eureko-muted);
}
.eureko-booking__help-phone {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--eureko-font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--eureko-text);
	text-decoration: none;
}
.eureko-booking__help-hours {
	font-size: 0.8rem;
	color: var(--eureko-muted);
}

@media (min-width: 768px) {
	.eureko-booking__inner {
		padding: 4.5rem 3.5rem 3rem;
		gap: 1.75rem;
	}
}

/* ==========================================================================
   Program detail drawer (Skupinové cvičení — Figma 1-3109)
   ========================================================================== */

.eureko-progdrawer {
	position: fixed;
	inset: 0;
	z-index: 10000;
	visibility: hidden;
	pointer-events: none;
}
.eureko-progdrawer--open {
	visibility: visible;
	pointer-events: auto;
}
.eureko-progdrawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(61, 72, 86, 0.55);
	opacity: 0;
	transition: opacity 300ms ease;
}
.eureko-progdrawer--open .eureko-progdrawer__backdrop {
	opacity: 1;
}
.eureko-progdrawer__panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(37.5rem, 100vw); /* 600px — Figma 718:15793 */
	max-width: 100vw;
	background: var(--eureko-white);
	box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12);
	transform: translateX(100%);
	transition: transform 320ms ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.eureko-progdrawer--open .eureko-progdrawer__panel {
	transform: translateX(0);
}
.eureko-progdrawer__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: var(--eureko-radius-pill);
	cursor: pointer;
	color: var(--eureko-text);
	z-index: 1;
}
.eureko-progdrawer__close:hover {
	background: var(--eureko-cream);
}
.eureko-progdrawer__inner {
	padding: 1.5rem 1.75rem 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
/* 718:15795 — 3/2 photo at radius 16, then a 33px gap before the copy stack. */
.eureko-progdrawer__media {
	width: 100%;
	aspect-ratio: 300 / 200;
	border-radius: 1rem;
	overflow: hidden;
	margin-bottom: 1.0625rem;
}
.eureko-progdrawer__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eureko-progdrawer__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--eureko-border);
	color: var(--eureko-muted);
}
/* Heading/Heading 3 — Catamaran Medium 28px, not 30px Bold. */
.eureko-progdrawer__title {
	font-family: var(--eureko-font-heading);
	font-size: 1.75rem;
	font-weight: 500;
	color: var(--eureko-text);
	margin: 0;
	line-height: 1.2;
}
.eureko-progdrawer__desc,
.eureko-progdrawer__long {
	color: var(--eureko-muted);
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
}
/* 718:15802 — an 8px dot 12px in from the text, matching every other bullet
   list in the design. This was a default `list-style` disc on a padded <ul>. */
.eureko-progdrawer__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.eureko-progdrawer__bullets li {
	position: relative;
	padding-left: 1.25rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--eureko-muted);
}
.eureko-progdrawer__bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--eureko-primary);
}
/* Body/M/Bold — the design bolds this line rather than restyling it. */
.eureko-progdrawer__note {
	margin: 0;
	color: var(--eureko-muted);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.7;
}
/* 718:15810 "Hodiny" — white card, 1px #eaeaeb, radius 20, 32px padding. */
.eureko-progdrawer__schedule {
	background: var(--eureko-white);
	border: 1px solid #eaeaeb;
	border-radius: 1.25rem;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.9375rem;
}
.eureko-progdrawer__schedule-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--eureko-font-heading);
	font-size: var(--eureko-fs-h5, 1.375rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--eureko-text);
	margin: 0;
}
.eureko-progdrawer__schedule-icon {
	font-size: 1.5rem;
	line-height: 1;
	color: #a8a9ab;
	flex-shrink: 0;
}
.eureko-progdrawer__slots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
/* 718:15815 — 12px padding, rule UNDER each row, day + time left, therapists
   pushed to the right edge. */
.eureko-progdrawer__slot {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex-wrap: wrap;
	padding: 0.75rem;
	border-bottom: 1px solid #eaeaeb;
}
.eureko-progdrawer__slot-day,
.eureko-progdrawer__slot-time {
	color: var(--eureko-muted);
	font-size: 0.875rem;
	line-height: 1.2;
	white-space: nowrap;
}
.eureko-progdrawer__slot-people {
	display: flex;
	flex: 1 1 auto;
	justify-content: flex-end;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.eureko-progdrawer__person {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.eureko-progdrawer__person-avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: #eae2d8;
	flex-shrink: 0;
}
.eureko-progdrawer__person-name {
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--eureko-muted);
	white-space: nowrap;
}
.eureko-progdrawer__reserve {
	width: 100%;
	justify-content: center;
	margin-top: 1rem;
}

@media (min-width: 768px) {
	/* 48px on every side (718:15794 sits at x=1368 in a panel starting at 1320). */
	.eureko-progdrawer__inner {
		padding: 3rem;
		gap: 1rem;
	}
}

/* =========================================================================
   Content blocks — reusable long-copy section (template-parts/sections/content-blocks.php)
   ========================================================================= */
.eureko-content-blocks {
	padding-block: 3rem;
}
.eureko-content-blocks--cream {
	background: var(--eureko-cream);
}
.eureko-content-blocks__title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1.25rem;
	color: var(--eureko-text);
}
.eureko-content-blocks__intro {
	max-width: 60ch;
	margin-bottom: 2.5rem;
}
.eureko-content-blocks__intro p {
	color: var(--eureko-muted);
	line-height: 1.65;
	margin: 0 0 1rem;
}
.eureko-content-blocks__intro p:last-child {
	margin-bottom: 0;
}
.eureko-content-blocks__grid {
	display: grid;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.eureko-content-blocks__block {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.eureko-content-blocks--card .eureko-content-blocks__block {
	background: #fff;
	border: 1px solid var(--eureko-border);
	border-radius: 20px;
	padding: 1.75rem;
}
.eureko-content-blocks__block-title {
	font-family: var(--eureko-font-heading);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	color: var(--eureko-text);
}
.eureko-content-blocks__block-text p {
	color: var(--eureko-muted);
	line-height: 1.6;
	margin: 0 0 0.75rem;
}
.eureko-content-blocks__block-text p:last-child {
	margin-bottom: 0;
}
.eureko-content-blocks__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}
.eureko-content-blocks__item {
	position: relative;
	padding-left: 1.5rem;
	color: var(--eureko-muted);
	line-height: 1.55;
}
.eureko-content-blocks__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--eureko-primary);
}

/* Numbered variant (Vnitřní řád) — counter in place of the bullet. */
.eureko-content-blocks__grid--numbered {
	counter-reset: eureko-cb;
	gap: 2.25rem;
}
.eureko-content-blocks__grid--numbered .eureko-content-blocks__block {
	counter-increment: eureko-cb;
	position: relative;
	padding-left: 3rem;
}
.eureko-content-blocks__grid--numbered .eureko-content-blocks__block::before {
	content: counter(eureko-cb);
	position: absolute;
	left: 0;
	top: 0;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--eureko-primary);
	color: #fff;
	font-family: var(--eureko-font-heading);
	font-weight: 700;
	font-size: 0.9375rem;
}

@media (min-width: 768px) {
	.eureko-content-blocks {
		padding-block: 4rem;
	}
	.eureko-content-blocks--cols-2 .eureko-content-blocks__grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 3rem;
		row-gap: 2.5rem;
	}
	.eureko-content-blocks--cols-2 .eureko-content-blocks__grid--numbered {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   Prose pages — legal documents rendered from post_content (page.php fallback)
   Source markup comes from the client's old site: section headings are <h5>,
   so heading LEVEL carries no size meaning here — h2–h6 are all styled as
   section headings and sized by their role on the page, not their tag.
   ========================================================================= */
.eureko-prose-section {
	padding-block: 1rem 4rem;
}
.eureko-prose {
	max-width: 46rem; /* ~85 characters — comfortable measure for dense legal copy */
	font-size: 1rem;
}
.eureko-prose > *:first-child {
	margin-top: 0;
}
.eureko-prose > *:last-child {
	margin-bottom: 0;
}
.eureko-prose p,
.eureko-prose li {
	color: var(--eureko-muted);
	line-height: 1.7;
	overflow-wrap: break-word;
}
.eureko-prose p {
	margin: 0 0 1.125rem;
}

/* All heading levels read as section headings — the source uses <h5>. */
.eureko-prose h1,
.eureko-prose h2,
.eureko-prose h3,
.eureko-prose h4,
.eureko-prose h5,
.eureko-prose h6 {
	font-family: var(--eureko-font-heading);
	font-weight: 700;
	line-height: 1.3;
	color: var(--eureko-text);
	letter-spacing: -0.01em;
	margin: 2.25rem 0 0.875rem;
	font-size: 1.375rem;
	/* Neutralise inline margins carried over from the old site's editor. */
	margin-bottom: 0.875rem !important;
}
.eureko-prose h1 { font-size: clamp(1.625rem, 3vw, 2rem); }
.eureko-prose h2 { font-size: clamp(1.375rem, 2.4vw, 1.625rem); }
.eureko-prose h3,
.eureko-prose h4,
.eureko-prose h5,
.eureko-prose h6 { font-size: 1.25rem; }

.eureko-prose ul,
.eureko-prose ol {
	margin: 0 0 1.125rem;
	padding-left: 1.125rem;
}
.eureko-prose li {
	margin-bottom: 0.375rem;
}
.eureko-prose a {
	color: var(--eureko-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.eureko-prose a:hover {
	color: var(--eureko-primary-hover);
}
.eureko-prose strong,
.eureko-prose b {
	color: var(--eureko-text);
	font-weight: 600;
}
.eureko-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
}
.eureko-prose th,
.eureko-prose td {
	border: 1px solid var(--eureko-border);
	padding: 0.625rem 0.75rem;
	text-align: left;
	vertical-align: top;
}
.eureko-prose th {
	background: var(--eureko-cream);
	color: var(--eureko-text);
	font-weight: 600;
}
/* Wide legal tables scroll inside their own box, never the page. */
.eureko-prose .cky-audit-table-element,
.eureko-prose figure.wp-block-table {
	overflow-x: auto;
	margin: 0 0 1.25rem;
}
/* Consent-plugin placeholders are empty until a plugin fills them — collapse
   them so they don't leave a void under their heading. */
.eureko-prose div:empty,
.eureko-prose p:empty {
	display: none;
}
.eureko-prose blockquote {
	margin: 0 0 1.25rem;
	padding-left: 1.125rem;
	border-left: 3px solid var(--eureko-primary);
	color: var(--eureko-muted);
}
@media (min-width: 768px) {
	.eureko-prose {
		font-size: 1.0625rem;
	}
}

/* Prose pages: tighten the hero → body gap (no lead paragraph to fill it). */
.eureko-page-prose .eureko-inner-hero {
	padding-block: 2rem 1.75rem;
}
.eureko-page-prose .eureko-inner-hero__content {
	margin-top: 1.5rem;
	max-width: 46rem;
}
/* ==========================================================================
   Recenze page hero — Figma 718:14390
   ========================================================================== */

/* Title & lead */
.eureko-reviews-hero__title {
	font-family: var(--eureko-font-heading);
	font-size: clamp(2.5rem, 5vw, 3.5rem); /* Display XL 56px */
	font-weight: 500;
	color: var(--eureko-text);
	margin: 0;
	line-height: 1.2;
}
.eureko-reviews-hero__lead {
	font-size: 1.25rem; /* Text XL 20px */
	color: var(--eureko-muted);
	margin: 0;
	padding: 0;
	border: none;
	line-height: 1.7;
}

/* What clients value — 2x2, 40px brand glyphs exported from the design */
.eureko-reviews-hero__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 480px) {
	.eureko-reviews-hero__features {
		grid-template-columns: 1fr 1fr;
	}
}
.eureko-reviews-hero__feature {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--eureko-text);
}
.eureko-reviews-hero__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
}
.eureko-reviews-hero__feature-icon svg {
	display: block;
	width: 40px;
	height: 40px;
}
.eureko-reviews-hero__feature-text {
	font-family: var(--eureko-font-heading);
	font-size: 1.25rem; /* H6 20px */
	font-weight: 500;
	line-height: 1.2;
}

/* CTA + Google rating */
.eureko-reviews-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 3rem;
	padding-bottom: 1.5rem;
}
.eureko-reviews-hero__rating-link {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	text-decoration: none;
}
.eureko-reviews-hero__rating-left {
	display: flex;
	align-items: center;
	gap: 13px;
}
.eureko-reviews-hero__google {
	display: block;
	width: 42px;
	height: 42px;
}
.eureko-reviews-hero__score {
	font-family: var(--eureko-font-heading);
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: 1.92px;
	line-height: 22px;
	color: var(--eureko-primary);
}
.eureko-reviews-hero__rating-right {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.eureko-reviews-hero__stars {
	display: flex;
	gap: 4px;
}
.eureko-reviews-hero__stars span {
	width: 16px;
	height: 16px;
	background-color: #f08929;
	-webkit-mask: url('../images/icons/star-rating.svg') center / contain no-repeat;
	mask: url('../images/icons/star-rating.svg') center / contain no-repeat;
}
.eureko-reviews-hero__count {
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--eureko-muted);
	text-decoration: underline;
}

/* Hero photo — 804x536 at radius 32 */
.eureko-reviews-hero__image {
	display: none;
}
.eureko-reviews-hero__image img {
	display: block;
	width: 100%;
	aspect-ratio: 804 / 536;
	object-fit: cover;
	border-radius: var(--eureko-radius-xl);
}

@media (min-width: 1024px) {
	/* The design's 1584 container: copy 655, gutter 125, photo 804. */
	.eureko-reviews-hero__inner {
		grid-template-columns: 655fr 804fr;
		column-gap: 125px;
		align-items: start;
	}
	.eureko-reviews-hero__image {
		display: block;
	}
}

/* ==========================================================================
   Detail metody / terapie — Figma 718:9676
   ========================================================================== */
/*
 * `body` carries the cream background, so everything below the hero band must
 * be painted white — only the band is cream in the frame.
 */
.eureko-metoda {
	background: var(--eureko-white);
}
/*
 * The hero is the shared `.eureko-orto-hero` with a single 804x536 plate
 * instead of the ambulance plate + cut-out pair, so nothing overhangs the band
 * edge and nothing needs clipping.
 */
.eureko-metoda-hero {
	overflow: visible;
}
.eureko-metoda-hero .eureko-orto-hero__photo {
	position: static;
	width: 100%;
	height: auto;
	aspect-ratio: 804 / 536;
	object-fit: cover;
	border-radius: var(--eureko-radius-xl);
}

/* ==========================================================================
   Homepage mobile sync — sections 3–4 (Figma 729:20597, 390px)
   --------------------------------------------------------------------------
   🔴 PLACED AT THE END OF THE FILE ON PURPOSE. Several of these override
   single-class rules that live later in the sheet than the older mobile
   blocks (the `.eureko-team__headline` trap in CLAUDE.md cost a deploy
   cycle). Keep new ≤767px work here unless it has to sit beside its section.
   ========================================================================== */

@media (max-width: 767px) {

	/* --- about-clinic collage (Figma 729:20717–20733) ------------------------
	 * The collage was falling back to a plain 2-col grid: the three stat discs
	 * became ~160px grid CELLS instead of 89px badges OVERLAPPING the photos,
	 * costing ~500px of scroll and reading as a different design.
	 *
	 * Geometry is the design's own, measured as a 358×358 square whose origin is
	 * the TOP OF THE "Tým" DISC (y1174), not the top of the team photo (y1211) —
	 * that disc deliberately rides above the photo. Every value below is
	 * <figma px> / 358, so the block scales with the container.
	 */
	.eureko-about-clinic__collage {
		display: block;
		position: relative;
		aspect-ratio: 1;              /* 358 × 358 */
		container-type: inline-size;  /* badge type scales off the collage */
	}
	.eureko-about-clinic__photo {
		position: absolute;
		height: auto;
	}
	.eureko-about-clinic__photo--team {
		left: 0;
		top: 10.34%;                  /* 37 / 358 */
		width: 100%;
		aspect-ratio: 358 / 223;
	}
	.eureko-about-clinic__photo--building {
		left: 42.46%;                 /* 152 / 358 */
		top: 60.89%;                  /* 218 / 358 */
		width: 53.63%;                /* 192 / 358 */
		aspect-ratio: 192 / 120;
	}
	.eureko-about-clinic__stat {
		position: absolute;
		width: 24.86%;                /* 89 / 358 */
		padding: 0;
	}
	.eureko-about-clinic__stat--tym,
	.eureko-about-clinic__stat--team  { left: 70.67%; top: 0; }
	.eureko-about-clinic__stat--since { left: 2.23%;  top: 55.03%; }
	.eureko-about-clinic__stat--area  { left: 28.49%; top: 75.14%; }
	/* Same value : disc-width ratios as the desktop badges, so the type keeps
	   its proportion inside the smaller circle. px is the fallback. */
	.eureko-about-clinic__stat-value {
		font-size: 1.375rem;
		font-size: 7.04cqw;
	}
	.eureko-about-clinic__stat--area .eureko-about-clinic__stat-value {
		font-size: 1.625rem;
		font-size: 8.45cqw;
	}
	.eureko-about-clinic__stat-label {
		font-size: 0.75rem;
		font-size: 3.53cqw;
		letter-spacing: 0.2px;
	}

	/* --- USPs (Figma 729:20701) ---------------------------------------------
	 * The design orders it heading → features → photo, with the portrait small
	 * and bleeding off the section's bottom edge. Ours rendered the portrait
	 * SECOND at full container width (342px), so the cut-out's flat chest crop
	 * sat mid-section looking like a broken image.
	 */
	.eureko-usp__left       { order: 1; }
	.eureko-usp__features   { order: 2; }
	.eureko-usp__cta-btn--mobile { order: 3; }
	.eureko-usp__image-wrap { order: 4; }
	/* The design's USP block carries no signature card — Dan's name already
	   appears in about-clinic directly above. */
	.eureko-usp__signature {
		display: none;
	}
	.eureko-usp__image {
		display: block;
		max-width: 12.5rem;   /* 200px, per the design */
		margin-inline: auto;
		margin-bottom: 0;
	}
	/* Let the cut-out's flat bottom coincide with the section edge so it reads
	   as a deliberate bleed rather than a crop. */
	.eureko-usp {
		padding-bottom: 0;
		overflow: hidden;
	}
	/* `justify-items: center` centred each ROW independently, so the four icons
	   landed at four different x positions and the list read as ragged. Centre
	   the GROUP instead and keep the rows left-aligned to a shared edge. */
	.eureko-usp__features {
		justify-items: start;
		width: max-content;
		max-width: 100%;
		margin-inline: auto;
	}

	/* --- Před/po (Figma 729:20703) ------------------------------------------ */
	.eureko-cases__headline {
		font-size: 1.75rem;
		text-align: center;
	}
	/* The 64px arrows sat on top of the photos. The track is swipeable and the
	   dots are clickable, so shrink them and pull them clear of the media. */
	.eureko-cases .eureko-carousel__arrow {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.25rem;
	}

	/* --- Carousel dots ------------------------------------------------------
	 * The team carousel has 19 slides. At 20×6px + 8px gap that is 528px of
	 * dots in a 342px column, so they were being squashed by flexbox into an
	 * illegible smear. Small circles fit the full run.
	 */
	.eureko-carousel__dots {
		flex-wrap: wrap;
		gap: 0.375rem;
	}
	.eureko-carousel__dot {
		width: 0.375rem;
		height: 0.375rem;
		flex: 0 0 auto;
	}
	.eureko-carousel__dot--active {
		width: 1rem;
	}

	/* --- Review cards -------------------------------------------------------
	 * Google reviews are arbitrarily long — one imported review rendered a
	 * ~700px wall of text and made the section 1684px. The design shows a
	 * compact card, so clamp the body; the full text lives on /recenze/.
	 */
	.eureko-review-card__text {
		display: -webkit-box;
		-webkit-line-clamp: 6;
		line-clamp: 6;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

@media (max-width: 767px) {

	/* --- Footer link columns → accordions (Figma 729:20737) -----------------
	 * The design shows five single-line chevron rows. Printed in full the five
	 * columns run ~1300px, which was nearly the whole gap between our 3348px
	 * mobile footer and the design's 2047px.
	 *
	 * `--collapsible` is added by initFooterAccordions() in main.js, NOT by
	 * footer.php — so with JS disabled these rules never apply and the columns
	 * stay expanded and reachable. Do not move the collapse onto the bare class.
	 */
	/* The 2.5rem row-gap is right for expanded columns but leaves ~130px between
	   collapsed chevron rows. Scoped with :has so the no-JS (never-collapsed)
	   fallback keeps its original spacing. */
	.eureko-footer__columns:has(.eureko-footer__column--collapsible) {
		gap: 0;
	}
	.eureko-footer__column--collapsible {
		border-bottom: 1px solid var(--eureko-border);
	}
	.eureko-footer__column--collapsible .eureko-footer__column-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin: 0;
		padding: 1rem 0;
		font-size: 1.0625rem;
		cursor: pointer;
	}
	/* The 34×3 green rule is a desktop column-heading device; the design's
	   collapsed rows do not carry it. */
	.eureko-footer__column--collapsible .eureko-footer__column-title::after {
		display: none;
	}
	.eureko-footer__column-toggle {
		display: flex;
		align-items: center;
		background: none;
		border: 0;
		padding: 0;
		color: inherit;
		cursor: pointer;
		flex: 0 0 auto;
	}
	.eureko-footer__column-toggle .material-symbols-outlined {
		font-size: 1.625rem;
		transition: transform var(--eureko-transition);
	}
	.eureko-footer__column--collapsible.is-open .eureko-footer__column-toggle .material-symbols-outlined {
		transform: rotate(180deg);
	}
	/* display none/flex rather than a grid-rows animation: `__column-links` is a
	   flex column with a gap, and the 0fr→1fr trick needs a single wrapper child
	   it does not have. */
	.eureko-footer__column--collapsible .eureko-footer__column-links {
		display: none;
	}
	.eureko-footer__column--collapsible.is-open .eureko-footer__column-links {
		display: flex;
		padding-bottom: 1.25rem;
	}

	/* --- Services contact card (Figma 729:20669) ---------------------------
	 * The design puts phone and e-mail SIDE BY SIDE, keeps the button a small
	 * auto-width pill, and tucks the receptionist portrait into the bottom-right
	 * corner. Ours stacked everything full-width and scaled the portrait to the
	 * full card width, so its flat bottom crop was sliced by the card edge and
	 * the card ran 694px against the design's 423px.
	 */
	.eureko-service-card__cta-contacts {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}
	.eureko-service-card__cta-label {
		font-size: 0.8125rem;
	}
	.eureko-service-card__cta-phone,
	.eureko-service-card__cta-email {
		font-size: 1rem;
		word-break: break-word;
	}
	/* ⚠️ `__cta-bottom` must stay UNPOSITIONED. The photo is its child, so giving
	   this element `position: relative` made the portrait resolve against the
	   button row instead of the card — it rode up over the address and covered
	   the button. The containing block has to be `.eureko-service-card--cta`. */
	.eureko-service-card__cta-bottom .eureko-btn {
		position: relative;
		z-index: 1;
	}
	/* 🔴 `!important` is required, not sloppiness: the ≤1023px block near l.1943
	   sets `.eureko-btn { width: 100% !important }` for the full-bleed mobile
	   buttons. The design's contact-card button is an auto-width pill sitting
	   in front of the portrait, so it has to opt out explicitly. */
	/* `display: inline-flex` matters as much as the width: the ≤1023px block also
	   forces `display: flex !important`, and a block-level flex box fills its
	   line even at `width: auto`. */
	.eureko-service-card__cta-bottom .eureko-btn {
		width: auto !important;
		display: inline-flex !important;
	}
	/* Absolute, bottom-right — the same treatment as ≥768px, just smaller. In
	   flow it was 288px tall (the base rule fixes `height: 18rem` and lets the
	   img drive the width), which pushed the button down and left a dead gap.
	   The button overlaps it, exactly as the design draws it. */
	.eureko-service-card__cta-photo {
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 0;
		width: 7.5rem;   /* 120px — any wider and her hair rides over the address */
		height: auto;
		overflow: visible;
	}
	.eureko-service-card__cta-photo img {
		width: 100%;
		height: auto;
	}
}

/* ==========================================================================
   Homepage mobile — round 2 (client review against the 390px Figma frames)
   ========================================================================== */

@media (max-width: 767px) {

	/* --- 1. Decorative mark behind Dan in the USP block ---------------------
	 * The blob existed only from 1024px up (`.eureko-usp::before`). On mobile
	 * the portrait stood on bare white.
	 *
	 * ⚠️ leaf-cream.svg is filled #F7F4F0, which is ALSO this section's cream —
	 * used as a background-image it renders invisible. It is painted through a
	 * `mask` instead, the same treatment about-clinic uses. Do NOT swap this
	 * back to `background: url(...)`.
	 */
	.eureko-usp {
		position: relative;
	}
	.eureko-usp::before {
		content: '';
		/* ⚠️ `display` is REQUIRED here: the `@media (max-width: 1023px)` block
		   near l.2024 sets `.eureko-usp::before { display: none }`. Same
		   specificity, so without this declaration that rule simply stands and
		   the mark never paints — which is exactly what happened first try. */
		display: block;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 17.5rem;
		height: 17.5rem;
		background: #f1ece4;
		-webkit-mask: url('../images/decor/leaf-cream.svg') center / contain no-repeat;
		mask: url('../images/decor/leaf-cream.svg') center / contain no-repeat;
		z-index: 0;
		pointer-events: none;
	}
	.eureko-usp__image-wrap {
		position: relative;
		z-index: 1;
	}

	/* --- 2. Breathing room under the contact card's button ------------------ */
	.eureko-service-card--cta {
		padding-bottom: 2.5rem;
	}

	/* --- 3. about-clinic: centre the signature under the button ------------- */
	.eureko-about-clinic__inner {
		text-align: center;
	}
	.eureko-about-clinic__signature--photo {
		justify-content: center;
	}
	.eureko-about-clinic__sig-text {
		text-align: left;
	}

	/* --- 4. Team carousel: two members per view, arrows visible ------------- */
	/* 50% minus half the 1rem track gap → 2 × 163 + 16 = 342 = the container. */
	.eureko-team .eureko-team-card {
		width: calc(50% - 0.5rem);
		flex: 0 0 auto;
		gap: 1rem;
	}
	/* 🔴 Overrides the `@media (max-width: 1023px)` block above, which hides
	   these. That block is EARLIER in the sheet, so this wins on source order —
	   moving this rule up would silently lose. */
	.eureko-team .eureko-carousel__arrow {
		display: flex;
		top: auto;
		bottom: 0;
		transform: none;
		width: 2.75rem;
		height: 2.75rem;
		font-size: 1.375rem;
	}
	.eureko-team .eureko-carousel__arrow--prev {
		left: 0;
		right: auto;
	}
	.eureko-team .eureko-carousel__arrow--next {
		right: 0;
		left: auto;
	}
	/* Clear the arrow row and centre the dots between them. */
	.eureko-team .eureko-carousel {
		position: relative;
		padding-bottom: 3.75rem;
	}
	.eureko-team .eureko-carousel__dots {
		position: absolute;
		left: 3.75rem;
		right: 3.75rem;
		bottom: 1.1875rem;
		padding: 0;
	}
	.eureko-team .eureko-team-card__name {
		font-size: 1rem;
	}
	.eureko-team .eureko-team-card__role {
		font-size: 0.875rem;
	}

	/* --- 5. FAQ: pills on one scrolling row, CTA moved to the bottom -------- */
	/* `display: contents` dissolves `__header` so its title and button become
	   grid items of `__inner` and can be ordered around `__main`. */
	.eureko-cenik-faq__header {
		display: contents;
	}
	.eureko-cenik-faq__title  { order: 1; }
	.eureko-cenik-faq__main   { order: 2; }
	.eureko-cenik-faq__header > .eureko-btn { order: 3; }
	/* The design lets the pill row run off the right edge rather than wrap. */
	.eureko-cenik-faq__filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: -0.25rem;
		padding-inline: 0.25rem;
	}
	.eureko-cenik-faq__filters::-webkit-scrollbar {
		display: none;
	}
	.eureko-cenik-faq__filter {
		flex: 0 0 auto;
	}

	/* --- 6. Footer "Zeptejte se…" card: portrait + hours pill top-right ----- */
	.eureko-contact-cta__card {
		position: relative;
		overflow: hidden;
	}
	/* Base rule is `display: none`, so mobile had no receptionist at all. */
	.eureko-contact-cta__photo {
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 8.75rem;
		z-index: 0;
		pointer-events: none;
	}
	.eureko-contact-cta__photo img {
		display: block;
		width: 100%;
		height: auto;
	}
	/* Title and the hours pill share row 1; everything else spans both columns.
	   `display: contents` on `__actions` lifts the pill and the button out so
	   they can be placed independently. */
	.eureko-contact-cta__card-body {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 0.75rem 1rem;
	}
	.eureko-contact-cta__title    { grid-column: 1; }
	.eureko-contact-cta__actions  { display: contents; }
	.eureko-contact-cta__hours-pill {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}
	.eureko-contact-cta__lead,
	.eureko-contact-cta__contacts {
		grid-column: 1 / -1;
	}
	/*
	 * ⚠️ EXCEPTION to "all CTA buttons run full width on mobile and tablet"
	 * (user, 2026-08-11): the green „Zeptejte se…" card keeps an AUTO-WIDTH
	 * pill, exactly like „Objednat se" on the services contact card, and for
	 * the same reason — the receptionist cut-out sits behind it, and a
	 * full-width bar runs straight across her face.
	 * This was briefly made full width and reverted; do not "fix" it again.
	 *
	 * `width: auto !important` is required because the global
	 * `@media (max-width: 1023px)` block (l. 1974) forces
	 * `.eureko-btn { width: 100% !important }`.
	 */
	.eureko-contact-cta__actions .eureko-btn {
		grid-column: 1 / -1;
		justify-self: start;
		width: auto !important;
		display: inline-flex !important;
	}
	/* Keep the copy off the portrait. Her left edge now falls at ~219px of the
	   342px card, so the gutter is 6.25rem. */
	.eureko-contact-cta__contacts {
		padding-right: 6.25rem;
	}
}

@media (max-width: 767px) {
	/* --- corrections after visual review at 390px ------------------------- */

	/* Team: long names (MUDr. Alena Svárovská) overflowed the 163px card and
	   were clipped by the container edge. The design wraps them to two lines. */
	.eureko-team .eureko-team-card__info {
		width: 100%;
		min-width: 0;
	}
	.eureko-team .eureko-team-card__name,
	.eureko-team .eureko-team-card__role {
		white-space: normal;
		overflow-wrap: break-word;
		hyphens: auto;
	}
	/* 19 dots wrapped onto a second row between the arrows; keep them on one. */
	.eureko-team .eureko-carousel__dots {
		flex-wrap: nowrap;
		gap: 0.25rem;
		left: 3.25rem;
		right: 3.25rem;
	}

	/* FAQ: the design's bottom button is the dark secondary, not brand green. */
	.eureko-cenik-faq__header > .eureko-btn {
		color: var(--eureko-text);
		border-color: var(--eureko-text);
	}

	/* Footer "Zeptejte se…" card, after review:
	   - the title was wrapping to two lines because the 184px hours pill left it
	     only ~110px, so both are trimmed to fit one row;
	   - the lead had no reason to be indented — only the CONTACTS sit beside the
	     portrait, and the design runs the lead full width. */
	.eureko-contact-cta__title {
		white-space: nowrap;
		font-size: 1.375rem;
	}
	.eureko-contact-cta__hours-pill {
		white-space: nowrap;
		font-size: 0.75rem;
		padding: 0.375rem 0.625rem;
		gap: 0.375rem;
	}
	.eureko-contact-cta__lead {
		padding-right: 0;
	}
	.eureko-contact-cta__photo {
		width: 7.5rem;
	}
}

@media (max-width: 767px) {
	/* --- second review pass ------------------------------------------------ */

	/* `.eureko-team .eureko-team-card__info` is a CENTRED flex column, so its
	   children size to max-content and long names never wrapped — they just ran
	   off the 163px card. An explicit width is what makes `white-space: normal`
	   actually do something here. */
	.eureko-team .eureko-team-card__name,
	.eureko-team .eureko-team-card__role {
		width: 100%;
	}

	/* The signature sizes to its content, so `text-align: center` on the parent
	   could not move it — it needs to centre itself in the column. */
	.eureko-about-clinic__signature {
		align-self: center;
		margin-inline: auto;
		width: fit-content;
	}

	/* info@eurekofyzio.cz at 24px is 290px wide and ran under the receptionist.
	   16px keeps it inside the 150px gutter left beside the enlarged portrait. */
	.eureko-contact-cta__contact-value {
		font-size: 1rem;
	}
}

@media (max-width: 767px) {
	/* The name box is correctly 163px, but "MUDr. Alena Svárovská" set at 16px
	   measures ~165px — it overran by a couple of pixels rather than wrapping,
	   which read as clipped text at the card edge. */
	.eureko-team .eureko-team-card__name {
		font-size: 0.9375rem;
	}
}

@media (max-width: 767px) {
	/* --- client review round 3 --------------------------------------------- */

	/* Hero: 47px between the two CTA blocks read as a disconnect, because each
	   block is button + tooltip and the tooltip already adds its own height. */
	.eureko-hero__ctas {
		gap: 1.25rem;
	}

	/* USP: the "Poznejte naše hodnoty" button sat in 64px above / 72px below —
	   the grid's own 40px gap PLUS the button's 24/32px margins. Drop the
	   margins and tighten the grid so the spacing is even and much smaller. */
	.eureko-usp__inner {
		gap: 2rem;
	}
	.eureko-usp__cta-btn--mobile {
		margin-top: 0;
		margin-bottom: 0;
	}
	/* …and drop the decorative mark clear of that button. It is 280px tall and
	   anchored to the section bottom, so its upper curve was reaching the CTA.
	   The section clips, so the extra depth simply bleeds off. */
	.eureko-usp::before {
		bottom: -3rem;
	}

	/* Reviews: the arrows were vertically centred, landing on top of the quote.
	   Same treatment as the team carousel — park them under the card. */
	.eureko-cenik-reviews .eureko-carousel {
		position: relative;
		padding-bottom: 3.75rem;
	}
	.eureko-cenik-reviews .eureko-carousel__arrow {
		top: auto;
		bottom: 0;
		transform: none;
		width: 2.75rem;
		height: 2.75rem;
		font-size: 1.375rem;
	}
	.eureko-cenik-reviews .eureko-carousel__arrow--prev {
		left: 0;
		right: auto;
	}
	.eureko-cenik-reviews .eureko-carousel__arrow--next {
		right: 0;
		left: auto;
	}
	.eureko-cenik-reviews .eureko-carousel__dots {
		position: absolute;
		left: 3.25rem;
		right: 3.25rem;
		bottom: 1.1875rem;
		padding: 0;
		flex-wrap: nowrap;
		gap: 0.25rem;
	}
}

@media (max-width: 767px) {
	/* Před/po: the last carousel still centring its arrows on the media. Same
	   treatment as team + reviews so all three behave identically on mobile. */
	.eureko-cases .eureko-carousel {
		position: relative;
		padding-bottom: 3.75rem;
	}
	.eureko-cases .eureko-carousel__arrow {
		top: auto;
		bottom: 0;
		transform: none;
		width: 2.75rem;
		height: 2.75rem;
		font-size: 1.375rem;
	}
	.eureko-cases .eureko-carousel__arrow--prev {
		left: 0;
		right: auto;
	}
	.eureko-cases .eureko-carousel__arrow--next {
		right: 0;
		left: auto;
	}
	.eureko-cases .eureko-carousel__dots {
		position: absolute;
		left: 3.25rem;
		right: 3.25rem;
		bottom: 1.1875rem;
		padding: 0;
		flex-wrap: nowrap;
		gap: 0.25rem;
	}
}

@media (max-width: 767px) {
	/* --- client review round 4 --------------------------------------------- */

	/* 🔴 The receptionist sat 40px above the card's bottom edge. `bottom: 0` was
	   resolving against `.eureko-service-card__cta-inner` — an INNER wrapper
	   that is itself `position: relative` and sits inside the card's 40px
	   bottom padding, so it was never the card. Making the inner static hands
	   the containing block back to `.eureko-service-card--cta`. */
	.eureko-service-card__cta-inner {
		position: static;
	}

	/* Reviews: "Všechny recenze" belongs under the slider, not above it.
	   `.eureko-container` is a plain block, so it has to become a flex column
	   before `order` means anything; `display: contents` then lifts the title
	   and the button out of `__header` so they can sit either side of it. */
	.eureko-cenik-reviews .eureko-container {
		display: flex;
		flex-direction: column;
	}
	.eureko-cenik-reviews__header {
		display: contents;
	}
	.eureko-cenik-reviews__title {
		order: 1;
		margin-bottom: 1.5rem;
	}
	.eureko-cenik-reviews__carousel {
		order: 2;
	}
	.eureko-cenik-reviews__header > .eureko-btn {
		order: 3;
		margin-top: 1.5rem;
	}

	/* Decorative mark: another 20px clear of the CTA button. */
	.eureko-usp::before {
		bottom: -4.25rem;
	}

	/* Team cards: bigger, closer together. The track gap is 24px (not the 16 the
	   earlier `calc(50% - 0.5rem)` assumed), which is why two 163px cards
	   measured 350 in a 342 track and the second name clipped. Halve the gap,
	   trim the container padding, and size the cards off the real numbers. */
	.eureko-team .eureko-container {
		padding-inline: 1rem;
	}
	.eureko-team .eureko-carousel__track {
		gap: 0.75rem;
	}
	.eureko-team .eureko-team-card {
		width: calc((100% - 0.75rem) / 2);
	}
	.eureko-team .eureko-team-card__name {
		font-size: 1rem;
	}
}

@media (max-width: 767px) {
	/* 🔴 Receptionist geometry, taken from the design's own Contact frame
	   (Figma 729:20669, and the footer's copy 0:73): the photo is 213 wide at
	   x179 / y94 inside a 358 x 316 card.
	     width  213/358      = 59.5%
	     right  (358-392)/358 = -9.5%   → bleeds off the right edge
	     top    94/316        = 29.7%   → bottom bleeds off; the card clips it
	   THIS IS WHY THE DESIGN NEVER SHOWS A CROPPED SHOULDER. Her shoulders run
	   off the left and right edges of the SOURCE PHOTO itself — verified: the
	   alpha bounding box of the original 726x1080 studio shot is the full 726px
	   width, so no wider export exists anywhere. The design scales her up and
	   pushes her down so the band where her arm meets the frame edge sits BELOW
	   the card, out of view; only head and upper shoulders show.
	   ⚠️ Do NOT "fix" this by shrinking her to fit inside the card — that is
	   exactly what put the hard vertical cut back on screen, and a gradient mask
	   over it is a worse fix than the design's own framing. */
	.eureko-contact-cta__photo {
		/* 40% smaller than the design's 59.5% (client request). The two bleed
		   values are scaled WITH her, not left at the design's absolutes — they
		   are what keeps the cropped band off screen, so they have to stay the
		   same FRACTION OF THE PHOTO:
		     right  16% of the photo width  → 0.16 x 42.8% = 6.85% of the card
		     bottom 30% of the photo height → 64px of the 346px card = 18.6%
		   ⚠️ `bottom` resolves against the card HEIGHT while `width` resolves
		   against the card WIDTH, so the bottom figure is not a straight
		   multiple of the width — recompute it whenever the width changes:
		     photoH = (width% x 342) / 0.684 ;  bottom% = 0.30 x photoH / 346
		   Leaving the bleeds at the design's absolutes would hide ~50% of a
		   smaller photo and leave only her forehead showing. */
		width: 42.8%;
		right: -6.85%;
		top: auto;
		bottom: -18.6%;
		height: auto;
	}
}

/*
 * 🔴 Insurer strip on TABLET (768–1023px).
 *
 * The ≥768px block puts the card in a ROW with a `white-space: nowrap` label
 * and `flex-wrap: nowrap` logos sized by `--logo-h`. That works at desktop
 * container widths, but at 834px the card is 723 wide, the label alone takes
 * 401 and the gap 35 — leaving 191px for five logos, which flex duly squashed
 * to NINE PIXELS TALL.
 *
 * So the tablet range keeps the strip floating (that part of the ≥768 block is
 * correct) but reverts the card to the stacked, width-sized mobile treatment.
 * Logos stay on ONE row on purpose: the card floats across the hero edge on a
 * fixed --eureko-strip-above/below clearance, so a second row would overlap the
 * section below.
 *   768px: card ~660 wide → content ~596; 5 x 90 + 4 x 24 = 546. Fits.
 */
@media (min-width: 768px) and (max-width: 1023px) {
	.eureko-insurance-strip__card {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1.5rem;
		padding: 2rem;
	}
	.eureko-insurance-strip__label {
		white-space: normal;
	}
	.eureko-insurance-strip__logos {
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		gap: 1.5rem;
		width: 100%;
	}
	/* Sized by WIDTH, like mobile — a shared height squashes the wide-thin ZPMV
	   and inflates the tall VZP. See the note on the base rule. */
	.eureko-insurance-strip__logo-item {
		width: 5.625rem;
		min-width: 0;
		flex: 0 1 5.625rem;
	}
	.eureko-insurance-strip__logo-item img {
		width: 100%;
		height: auto;
		max-height: none;
		object-fit: contain;
	}
}

/*
 * 🔴 Insurer strip, 1024–1479px (iPad Pro portrait 1024 / 11" 1194 / 12.9" 1366,
 * and every laptop narrower than ~1480).
 *
 * The row does not reach its intended logo sizes until ~1480px — measured:
 *   1024 → 23/17/8/18/10 px tall   (badly squashed)
 *   1280 → 42/30/15/32/19
 *   1536 → 60/44/21/47/27          (the --logo-h targets 62/45/22/48/28)
 * The cause is the label: it is `white-space: nowrap` and 401px wide, so it
 * takes a fixed bite out of the row and flex shrinks the logos to fill what is
 * left. Letting it wrap to two lines frees ~200px and the logos reach their
 * caps. Below 1024 the card stacks instead (see the block above).
 */
/*
 * Wrapping the label alone was not enough: at 1024 the logos need ~1030px to
 * reach their caps and only 598 was left beside it (they rendered 36/26/13/
 * 28/16). Stacking hands them the FULL card width — 857 at 1024, 1073 at 1280 —
 * so they reach ~83% of target at 1024 and full size from ~1280 up.
 */
@media (min-width: 1024px) and (max-width: 1479px) {
	.eureko-insurance-strip__card {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1.5rem;
	}
	.eureko-insurance-strip__label {
		white-space: normal;
	}
	/* Still sized by --logo-h here, NOT by a shared width like the ≤1023 block:
	   there is enough room at these widths for the design's own heights. */
	.eureko-insurance-strip__logos {
		width: 100%;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}
}

/*
 * 🔴 "Objednejte se k nám" contact card on TABLET (768–1279px).
 *
 * The services grid goes 2-up at 768 and 3-up at 1024, so this card is only
 * 322px wide at 768 and 296px at 1024 — but it keeps the desktop internals:
 *   - contacts in two columns. `info@eurekofyzio.cz` is one unbreakable token,
 *     so its `1fr` track resolved to its min-content width (171px) and starved
 *     the phone column down to 53px, wrapping "603 396 250" over three lines.
 *   - the receptionist at 13rem x 15rem, which on a 296px card covers the
 *     address and the button.
 * Both revert to a single column / a proportionate photo until there is room.
 */
@media (min-width: 960px) and (max-width: 1279px) {
	.eureko-service-card__cta-contacts {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	.eureko-service-card__cta-phone,
	.eureko-service-card__cta-email {
		font-size: 1rem;
		overflow-wrap: anywhere;
	}
	.eureko-service-card__cta-photo {
		width: 8.5rem;
		height: auto;
		right: 0;
	}
	.eureko-service-card__cta-photo img {
		width: 100%;
		height: auto;
	}
}

/* ==========================================================================
   TABLET SWEEP (768–1023px)
   --------------------------------------------------------------------------
   🔴 This range had no owner. The mobile work stops at 767 and the desktop
   layouts start at 1024, so several blocks fell back to their BASE (mobile)
   rules while sitting in a 723px-wide container — which is how the about-clinic
   stat discs ended up 354px across. Anything added here is filling that gap;
   check this block before adding a new ≤767 or ≥1024 rule.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

	/* --- about-clinic collage ---------------------------------------------
	 * Fell back to the base 2-col grid: 1189px tall with 354px discs, which is
	 * most of why the section measured 2077px. Same absolute geometry as the
	 * ≤767 block (Figma 729:20717–20733), just capped so the discs stay a
	 * badge and do not become the whole section.
	 */
	.eureko-about-clinic__collage {
		display: block;
		position: relative;
		aspect-ratio: 1;
		container-type: inline-size;
		max-width: 26rem;
		margin-inline: auto;
	}
	.eureko-about-clinic__photo {
		position: absolute;
		height: auto;
	}
	.eureko-about-clinic__photo--team {
		left: 0;
		top: 10.34%;
		width: 100%;
		aspect-ratio: 358 / 223;
	}
	.eureko-about-clinic__photo--building {
		left: 42.46%;
		top: 60.89%;
		width: 53.63%;
		aspect-ratio: 192 / 120;
	}
	.eureko-about-clinic__stat {
		position: absolute;
		width: 24.86%;
		padding: 0;
	}
	.eureko-about-clinic__stat--tym,
	.eureko-about-clinic__stat--team  { left: 70.67%; top: 0; }
	.eureko-about-clinic__stat--since { left: 2.23%;  top: 55.03%; }
	.eureko-about-clinic__stat--area  { left: 28.49%; top: 75.14%; }
	.eureko-about-clinic__stat-value {
		font-size: 1.5rem;
		font-size: 7.04cqw;
	}
	.eureko-about-clinic__stat--area .eureko-about-clinic__stat-value {
		font-size: 1.75rem;
		font-size: 8.45cqw;
	}
	.eureko-about-clinic__stat-label {
		font-size: 0.8125rem;
		font-size: 3.53cqw;
	}

	/* --- services grid: the contact card was stranded ----------------------
	 * The grid goes 2-up at 768 and the CTA card auto-flowed into row 3 col 1,
	 * leaving an empty cell beside it. It is a full-width block in the design.
	 */
	.eureko-service-card--cta {
		grid-column: 1 / -1;
	}

	/* --- reviews: clamp the quote -----------------------------------------
	 * The ≤767 clamp did not reach here, so an imported Google review rendered
	 * a 925px-tall card.
	 */
	.eureko-review-card__text {
		display: -webkit-box;
		-webkit-line-clamp: 6;
		line-clamp: 6;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* --- před/po arrows off the photos ------------------------------------- */
	.eureko-cases .eureko-carousel {
		position: relative;
		padding-bottom: 4.5rem;
	}
	.eureko-cases .eureko-carousel__arrow {
		top: auto;
		bottom: 0;
		transform: none;
		width: 3rem;
		height: 3rem;
		font-size: 1.5rem;
	}
	.eureko-cases .eureko-carousel__arrow--prev { left: 0; right: auto; }
	.eureko-cases .eureko-carousel__arrow--next { right: 0; left: auto; }

	/* --- footer "Zeptejte se…" card: the receptionist was missing ----------
	 * Her base rule is `display: none` and the desktop rule that re-shows her
	 * only starts at 1024, so the tablet card was an empty green panel.
	 */
	.eureko-contact-cta__card {
		position: relative;
		overflow: hidden;
	}
	.eureko-contact-cta__photo {
		display: block;
		position: absolute;
		right: 0;
		bottom: -5.5rem;   /* ~30% of her height stays below the card, so the
		                      band where her shoulders meet the source frame
		                      edge is never visible — see the ≤767 note. */
		width: 12.5rem;
		height: auto;
		z-index: 0;
		pointer-events: none;
	}
	.eureko-contact-cta__photo img {
		display: block;
		width: 100%;
		height: auto;
	}
	.eureko-contact-cta__card-body {
		position: relative;
		z-index: 1;
		padding-right: 13rem;
	}
	.eureko-contact-cta__actions .eureko-btn {
		width: auto;
		display: inline-flex;
		align-self: flex-start;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* Reviews arrows were still vertically centred, landing on the quote —
	   the same fix the team/před-po carousels already got at this width. */
	.eureko-cenik-reviews .eureko-carousel {
		position: relative;
		padding-bottom: 4.5rem;
	}
	.eureko-cenik-reviews .eureko-carousel__arrow {
		top: auto;
		bottom: 0;
		transform: none;
		width: 3rem;
		height: 3rem;
		font-size: 1.5rem;
	}
	.eureko-cenik-reviews .eureko-carousel__arrow--prev { left: 0; right: auto; }
	.eureko-cenik-reviews .eureko-carousel__arrow--next { right: 0; left: auto; }
}

/*
 * 🔴 contact-cta + reviews at 1024–1279px (iPad Pro portrait / 11").
 *
 * The desktop two-column `__inner` (green card | building photo) kicks in at
 * 1024, but at that width the card is only 414px wide — and the receptionist is
 * sized as a PERCENTAGE of it, so she rendered 414x693 and covered the heading,
 * the lead, the phone and the e-mail completely. The "Zastavte se osobně"
 * column was squeezed to the point that "Jak se k nám dostanete?" broke over
 * three lines.
 *
 * Below 1280 the block therefore stacks, exactly as it does on tablet, and the
 * portrait goes back to a fixed 200px anchored bottom-right.
 */
@media (min-width: 1024px) and (max-width: 1279px) {
	.eureko-contact-cta__inner {
		grid-template-columns: 1fr;
	}
	.eureko-contact-cta__card {
		position: relative;
		overflow: hidden;
		/* The desktop card reserves a 256px LEFT gutter because at ≥1280 the
		   portrait sits on the left. We move her to the right here, so that
		   gutter would otherwise leave half the card empty. */
		padding-left: 3rem;
	}
	.eureko-contact-cta__photo {
		display: block;
		position: absolute;
		/* ⚠️ `left: auto` is required. The ≥1024 desktop rule sets BOTH `left: 0`
		   and `right: <n>`; with an explicit width, `left` wins in LTR, so
		   setting `right: 0` alone parked her on the LEFT of the card, on top of
		   the heading. */
		left: auto;
		right: 0;
		bottom: -5.5rem;
		top: auto;
		width: 12.5rem;
		height: auto;
		z-index: 0;
		pointer-events: none;
	}
	.eureko-contact-cta__photo img {
		display: block;
		width: 100%;
		height: auto;
	}
	.eureko-contact-cta__card-body {
		position: relative;
		z-index: 1;
		padding-right: 13rem;
	}
	.eureko-contact-cta__actions .eureko-btn {
		width: auto;
		display: inline-flex;
		align-self: flex-start;
	}

	/* Same unclamped-review problem as ≤1023: 925px-tall cards. */
	.eureko-review-card__text {
		display: -webkit-box;
		-webkit-line-clamp: 6;
		line-clamp: 6;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/*
 * Review clamp for 1280–1479 (iPad Pro landscape 1366). Google reviews have no
 * length limit and one runs ~700px, which made 925px-tall cards in a carousel
 * whose siblings are 380. Stops at 1479 — the full desktop layout above that is
 * signed off and keeps the untruncated quotes.
 */
@media (min-width: 1280px) and (max-width: 1479px) {
	.eureko-review-card__text {
		display: -webkit-box;
		-webkit-line-clamp: 6;
		line-clamp: 6;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/*
 * Services contact card at 768–1023 — adopt the mobile treatment now that the
 * card spans the full grid width (723px):
 *   - contacts go back to two columns (there is room; the single-column rule
 *     from the 768–1279 block is only needed for the narrow 296px card at 1024+)
 *   - the button becomes an auto-width pill instead of a 667px bar
 *   - the receptionist gets bigger and sits BEHIND the button
 * Same mechanics as the ≤767 block — see the notes there.
 */
@media (min-width: 768px) and (max-width: 1023px) {
	.eureko-service-card__cta-contacts {
		grid-template-columns: 1fr 1fr;
		gap: 1rem 2rem;
	}
	/* The photo is a child of `__cta-bottom`; keeping that box unpositioned lets
	   her anchor to the card's own bottom-right corner. */
	.eureko-service-card__cta-bottom {
		position: static;
	}
	/* `!important` on both: the ≤1023px block near l.1943 forces
	   `.eureko-btn { display: flex !important; width: 100% !important }`, and a
	   block-level flex box fills its line even at `width: auto`. */
	.eureko-service-card__cta-bottom .eureko-btn {
		position: relative;
		z-index: 1;            /* paints IN FRONT of her */
		width: auto !important;
		display: inline-flex !important;
	}
	.eureko-service-card__cta-photo {
		position: absolute;
		left: auto;
		right: 0;
		bottom: 0;
		top: auto;
		z-index: 0;            /* behind the button */
		width: 15rem;          /* 240px — was 136px */
		height: auto;
		overflow: visible;
	}
	.eureko-service-card__cta-photo img {
		width: 100%;
		height: auto;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* The 240px portrait needs a gutter: at 768 the address and e-mail ran
	   straight behind her (their boxes reached x677 against her left edge at
	   x465). `auto-fit` lets the contacts drop to ONE column on their own when
	   the remaining width can no longer hold two — 2 columns at 834, 1 at 768 —
	   instead of needing a second breakpoint. 11rem is the e-mail's min-content
	   width; below that the track would overflow rather than wrap. */
	.eureko-service-card__cta-contacts {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
		padding-right: 15rem;
	}
	.eureko-service-card__cta-address-block {
		padding-right: 15rem;
	}
}

/* ==========================================================================
   TABLET SWEEP, round 2 (768–1023px) — carousels, section CTAs, visit block
   --------------------------------------------------------------------------
   Everything here mirrors a rule that already exists in the ≤767 blocks; the
   tablet range simply never inherited it because those blocks stop at 767 and
   the desktop layouts start at 1024. Read the ≤767 notes for the mechanics —
   only the sizes differ (3rem arrows instead of 2.75rem).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

	/* --- 1. Reviews: "Všechny recenze" belongs UNDER the slider ------------
	 * `.eureko-container` is a plain block, so it has to become a flex column
	 * before `order` means anything; `display: contents` then dissolves
	 * `__header` so its title and button become siblings of the carousel.
	 */
	.eureko-cenik-reviews .eureko-container {
		display: flex;
		flex-direction: column;
	}
	.eureko-cenik-reviews__header {
		display: contents;
	}
	.eureko-cenik-reviews__title {
		order: 1;
		margin-bottom: 1.5rem;
	}
	.eureko-cenik-reviews__carousel {
		order: 2;
	}
	.eureko-cenik-reviews__header > .eureko-btn {
		order: 3;
		margin-top: 1.5rem;
	}

	/* --- 2. FAQ: filter pills stay, CTA moves to the bottom ---------------- */
	.eureko-cenik-faq__header {
		display: contents;
	}
	.eureko-cenik-faq__title  { order: 1; }
	.eureko-cenik-faq__main   { order: 2; }
	.eureko-cenik-faq__header > .eureko-btn {
		order: 3;
		/* The design's bottom button is the dark secondary, not brand green. */
		color: var(--eureko-text);
		border-color: var(--eureko-text);
	}
	/* Let the row run off the right edge rather than wrap onto three lines. */
	.eureko-cenik-faq__filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: -0.25rem;
		padding-inline: 0.25rem;
	}
	.eureko-cenik-faq__filters::-webkit-scrollbar { display: none; }
	.eureko-cenik-faq__filter { flex: 0 0 auto; }

	/* --- 3. Team carousel: arrows under the cards --------------------------
	 * 🔴 The `@media (max-width: 1023px)` block near l.1865 HIDES these arrows,
	 * and only the ≤767 block turned them back on — so the tablet range had
	 * dots and no arrows. This rule is later in the sheet, so it wins.
	 */
	.eureko-team .eureko-carousel {
		position: relative;
		padding-bottom: 4.5rem;
	}
	.eureko-team .eureko-carousel__arrow {
		display: flex;
		top: auto;
		bottom: 0;
		transform: none;
		width: 3rem;
		height: 3rem;
		font-size: 1.5rem;
	}
	.eureko-team .eureko-carousel__arrow--prev { left: 0; right: auto; }
	.eureko-team .eureko-carousel__arrow--next { right: 0; left: auto; }
	.eureko-team .eureko-carousel__dots {
		position: absolute;
		left: 4rem;
		right: 4rem;
		bottom: 1.375rem;
		padding: 0;
		flex-wrap: nowrap;
		gap: 0.25rem;
	}

	/* --- 4. "Zastavte se osobně": address and hours share one row ----------
	 * The block is ~660px wide here but its copy is two short stacked
	 * paragraphs, so most of that width was empty and the block ran tall.
	 */
	.eureko-contact-cta__visit-body {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: 1rem 2rem;
	}
	.eureko-contact-cta__visit-title { grid-column: 1 / -1; }
	.eureko-contact-cta__address     { grid-column: 1; }
	.eureko-contact-cta__hours       { grid-column: 2; }
	/* --- 5. CTA buttons run full width (client call, matches mobile) ------- */
	.eureko-contact-cta__directions {
		grid-column: 1 / -1;
		justify-content: center;
		align-self: stretch;
	}
	/* ⚠️ EXCEPTION (user, 2026-08-11): the green „Zeptejte se…" card keeps an
	   auto-width pill at tablet too — same rule as ≤767 and as „Objednat se"
	   on the services card, so the button never crosses the receptionist.
	   Only „Jak se k nám dostanete?" above runs full width here.
	   `!important` is needed to beat the global ≤1023 `width: 100% !important`. */
	.eureko-contact-cta__actions .eureko-btn {
		width: auto !important;
		display: inline-flex !important;
		align-self: flex-start;
	}

	/* --- 6. about-clinic collage: fill the column --------------------------
	 * Capped at 26rem in the first tablet block, which left a wide empty band
	 * either side of it. 34rem is the widest that keeps the 600 m² disc inside
	 * the container at 768.
	 */
	.eureko-about-clinic__collage {
		max-width: 34rem;
	}
}

/* ==========================================================================
   KONTAKT — mobile (≤767) + tablet (768–1023)
   --------------------------------------------------------------------------
   Mobile frame: Figma 729:21055 (390x6920) on the "Mobile" canvas 729:19433.
   ⚠️ That canvas holds a 390px frame for nearly EVERY page — see the ID list
   in the project memory before assuming a page has no mobile design.

   Section order on mobile matches desktop, so this is CSS-only; no template
   was forked.
   ========================================================================== */
@media (max-width: 767px) {

	/* --- 1. Hero photos were `display: none` below 1024 --------------------
	 * The mobile frame keeps BOTH photos (729:21075 "Group 19"), stacked under
	 * the copy: the reception plate 358x239, and the portrait 165x206 hanging
	 * off the LEFT viewport edge over the plate's lower-left corner.
	 * Geometry is expressed against the plate, exactly as the ≥1024 rule does.
	 */
	.eureko-kontakt-hero__media {
		display: block;
		position: relative;
		width: 100%;
		aspect-ratio: 358 / 239;
		margin-top: 2rem;
	}
	.eureko-kontakt-hero__image--back {
		position: absolute;
		inset: 0;
	}
	.eureko-kontakt-hero__image--front {
		position: absolute;
		/* Bleeds to the viewport edge — the container's own 24px padding, so
		   the flat left edge of the cut-out falls outside the screen. */
		left: -1.5rem;
		top: 46.4%;      /* 111 / 239 */
		width: 46.09%;   /* 165 / 358 */
		height: 86.19%;  /* 206 / 239 */
		z-index: 1;
	}

	/* --- 2. Features: the 2-col base grid OVERFLOWED ------------------------
	 * 🔴 This was the page's real horizontal overflow: `1fr 1fr` tracks default
	 * to `min-width: auto`, and "Výdejní místo e-shopu" has a wider min-content
	 * than its track, so the grid pushed the document to 406px at a 390 viewport.
	 * The frame (729:21082) stacks four full-width rows instead — icon tile on
	 * the LEFT, copy on the right — so the min-content problem disappears.
	 */
	.eureko-kontakt-features__grid {
		grid-template-columns: 1fr;
		gap: 0.5rem;             /* frame: 114 - 106 = 8px between rows */
	}
	/* ⚠️ The icon, title and text are three FLAT siblings — there is no copy
	   wrapper in `kontakt-features.php`. A flex row therefore lays them out as
	   three columns (icon | title | text), which is not the frame. A 2-column
	   grid with the icon spanning both rows stacks the copy correctly WITHOUT
	   touching the template. */
	.eureko-kontakt-features__item {
		display: grid;
		grid-template-columns: 4rem 1fr;
		column-gap: 1rem;
		row-gap: 0.25rem;
		padding: 1.3125rem 1.5rem;
	}
	.eureko-kontakt-features__icon {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
		width: 4rem;
		height: 4rem;
		margin-bottom: 0;
		flex: none;
	}
	.eureko-kontakt-features__title { grid-column: 2; grid-row: 1; align-self: end; }
	.eureko-kontakt-features__text  { grid-column: 2; grid-row: 2; align-self: start; }
	.eureko-kontakt-features__glyph {
		width: 2rem;
		height: 2rem;
	}
	.eureko-kontakt-features__title { font-size: 1.125rem; }
	.eureko-kontakt-features__text  { font-size: 0.875rem; line-height: 1.5; }

	/* --- 3. Hours panel: 32px padding is too much on a 342 container -------- */
	.eureko-kontakt-hours__panel { padding: 1.5rem; gap: 2rem; }
	.eureko-kontakt-hours__card  { padding: 1.5rem; }

	/* --- 4. Gallery: 2 up, and the cream panel drops away -------------------
	 * The 1-column grid ran 2634px tall for 8 tiles. The frame (729:21134) puts
	 * them 2-up at 171px on a plain white section with a LEFT-aligned heading —
	 * there is no cream card on mobile. Tile ratio is unchanged (338/243).
	 * ⚠️ Shared with O nás, which uses the same `--panel` gallery.
	 */
	.eureko-gallery--panel .eureko-gallery__panel {
		background: none;
		padding: 0;
	}
	.eureko-gallery--panel .eureko-gallery__title {
		text-align: left;
		font-size: 2rem;
	}
	.eureko-gallery__grid {
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}
	.eureko-gallery--panel .eureko-gallery__grid { row-gap: 1rem; }
	.eureko-gallery__caption {
		margin-top: 0.75rem;
		font-size: 0.875rem;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	/*
	 * 🔴 Kontakt features overflowed the document by 161px at 768.
	 * Unlike most tablet defects in this build, this one is NOT a missing
	 * mobile mirror — the 4-column rule starts at 768 (l. 5563), and four
	 * cards with an 80px icon tile plus "Výdejní místo e-shopu" need ~794px
	 * inside a 657px container. Two columns is the widest that fits.
	 */
	.eureko-kontakt-features__grid {
		grid-template-columns: 1fr 1fr;
	}
	.eureko-kontakt-features__item {
		padding: 2rem;
	}
}

/* ==========================================================================
   CENÍK — mobile (≤767) + tablet (768–1023)   [Figma 729:21465]
   ========================================================================== */

/*
 * The category heading is now a <button> at every width so the mobile accordion
 * needs no template fork. These base rules strip the button chrome so that at
 * ≥768 it renders EXACTLY as the old <h3> did — verify at 1280 after any edit.
 */
.eureko-cenik-card__toggle {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: default;
}
.eureko-cenik-card__chevron { display: none; }

/*
 * ⚠️ ≤1023, NOT ≤767 — the accordion covers the whole tablet range too, and
 * `initCenikAccordion()` in main.js matches the same breakpoint. Keep the two
 * in sync. At tablet the `columns: 2` grid (l. 4904) squeezed the name column
 * so hard that "Balíček 5ti lekcí vedených fyzioterapeutem" wrapped onto four
 * lines beside its price, so the grid also drops to one column here.
 */
@media (max-width: 1023px) {
	.eureko-cenik-prices__grid {
		columns: 1;
	}
	/*
	 * Collapsed categories — the frame (729:21487) draws each as a 358x72 cream
	 * row with the title at 24px inset and a chevron at the right edge; only the
	 * first is expanded. Expanded, the price rows keep their zebra striping.
	 * The 10 categories ran 4519px tall before this.
	 *
	 * 🔴🔴 EVERY selector here is scoped to `.eureko-cenik-prices` — the Ceník
	 * section — and must stay that way. `.eureko-cenik-card` is ALSO used by
	 * `page-pro-samoplatce.php` („Ceník pro samoplátce"), which hand-rolls the
	 * card and therefore has no `<button>` toggle and no `is-open` class. Left
	 * unscoped (v1.9.259–266) the `:not(.is-open)` rule hid all six of that
	 * page's price rows at ≤1023 with **nothing on screen able to reveal them** —
	 * a published price list, unreachable on every phone and tablet.
	 * ⚠️ A collapse rule keyed on a class that JS adds must never be able to
	 * match markup that JS does not manage.
	 */
	.eureko-cenik-prices .eureko-cenik-card {
		padding: 0;
		margin-bottom: 0.625rem;
	}
	.eureko-cenik-prices .eureko-cenik-card__title {
		font-size: 1.125rem;
		margin: 0;
	}
	.eureko-cenik-prices .eureko-cenik-card__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		min-height: 4.5rem;
		padding: 1.5rem;
		cursor: pointer;
	}
	.eureko-cenik-prices .eureko-cenik-card__chevron {
		display: block;
		flex: none;
		font-size: 1.5rem;
		color: var(--eureko-text);
		transition: transform 0.2s ease;
	}
	.eureko-cenik-prices .eureko-cenik-card.is-open .eureko-cenik-card__chevron {
		transform: rotate(90deg);
	}
	.eureko-cenik-prices .eureko-cenik-card:not(.is-open) .eureko-cenik-card__list {
		display: none;
	}
	.eureko-cenik-prices .eureko-cenik-card__list {
		padding: 0 1.5rem 1.5rem;
	}
	.eureko-cenik-prices .eureko-cenik-card__row {
		padding: 0.875rem 1rem;
		font-size: 0.9375rem;
	}

	/*
	 * The hero photo (a real one — RECEPCE-2.jpg) was `display: none` below
	 * 1024, but the frame keeps it at 358x239 under the contact block.
	 * ⚠️ SCOPED to the Ceník body class on purpose: `.eureko-cenik-hero` is
	 * shared by Vybavení, Tělocvična, Náš tým, Blog, Recenze and the team
	 * detail page, each of which sets its own hero height. Extend this
	 * selector page by page as each one is swept — do not unscope it blind.
	 */
}

/* Phone-only hero photo ratio. Kept in its own ≤767 block: the accordion block
   above now runs to 1023, and this must NOT leak into the tablet range, which
   has its own 804/536 rule further down. */
@media (max-width: 767px) {
	.eureko-page-motodlah .eureko-cenik-hero__image,
	.eureko-page-cenik .eureko-cenik-hero__image,
	.eureko-page-tym .eureko-cenik-hero__image,
	.eureko-page-vybaveni .eureko-cenik-hero__image {
		display: block;
		width: 100%;
		aspect-ratio: 358 / 239;
		height: auto;
		margin-top: 2rem;
	}
}

/* ==========================================================================
   NÁŠ TÝM — mobile (≤767)   [Figma 729:21418]
   --------------------------------------------------------------------------
   The grid only went 2-up at ≥600px, so a 390 viewport stacked 19 members in
   ONE column: 8645px of scrolling. The frame puts them 2-up at 174px from the
   start (729:21428 onwards), which is ~3100px.
   ========================================================================== */
@media (max-width: 767px) {
	.eureko-team-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.75rem 1rem;
	}
	/* 2rem between the disc and the name is tuned for a 377px card; at 171px it
	   is most of the card's height. */
	.eureko-team-grid .eureko-team-card {
		gap: 1rem;
	}
	.eureko-team-grid .eureko-team-card__info {
		gap: 0.25rem;
	}
	.eureko-team-grid .eureko-team-card__name {
		font-size: 1.125rem;
	}
	.eureko-team-grid .eureko-team-card__role {
		font-size: 0.875rem;
		line-height: 1.4;
	}
}

/* ==========================================================================
   HERO PHOTOS AT 768–1023 — the classic "no owner" gap
   --------------------------------------------------------------------------
   🔴 `.eureko-cenik-hero__image` and `.eureko-kontakt-hero__media` are BOTH
   `display: none` in the base rules and only turned on at ≥1024. The mobile
   blocks above now show them at ≤767, so without this the photo existed on a
   phone and on a desktop but vanished on a tablet, leaving a text-only hero
   with a large empty band. The hero is single-column here, so the photo simply
   runs the full width of the copy column.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
	.eureko-page-motodlah .eureko-cenik-hero__image,
	.eureko-page-cenik .eureko-cenik-hero__image,
	.eureko-page-tym .eureko-cenik-hero__image,
	.eureko-page-vybaveni .eureko-cenik-hero__image {
		display: block;
		width: 100%;
		aspect-ratio: 804 / 536;
		height: auto;
		margin-top: 2.5rem;
	}

	.eureko-kontakt-hero__media {
		display: block;
		position: relative;
		width: 100%;
		aspect-ratio: 804 / 536;
		margin-top: 2.5rem;
	}
	.eureko-kontakt-hero__image--back {
		position: absolute;
		inset: 0;
	}
	/* Same collage as ≥1024, but the bleed matches the 3rem container padding
	   at this width instead of the 1.5rem used on phones. */
	/* 🔴 Her bottom must land BEHIND the insurer card. At 96% the flat cut edge
	   ended just above it and read as a hard horizontal slice through her
	   torso — the same framing rule as everywhere else in this build: never
	   shrink a cut-out to fit, let the cut edge fall outside the visible area. */
	.eureko-kontakt-hero__image--front {
		position: absolute;
		left: -3rem;
		top: 12%;
		width: 40%;
		height: 120%;
		z-index: 1;
	}
}

/* ==========================================================================
   "Jak se k nám dostanete?" — full width at ≤767 (2026-08-11, user request)
   --------------------------------------------------------------------------
   ⚠️ `.eureko-contact-cta__directions` is an <a>, NOT a `.eureko-btn`, so the
   global `@media (max-width: 1023px)` full-width rule (l. 1974) never reached
   it. It was a compact pill on phones and full width on tablet only — the
   tablet half was already handled at l. 12223. This completes the client's
   "every CTA runs full width on mobile and tablet" call.
   The block lives in `footer.php`, so this applies to EVERY page at once.
   ========================================================================== */
@media (max-width: 767px) {
	.eureko-contact-cta__directions {
		align-self: stretch;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
	}
}

/* ==========================================================================
   MOBILE MENU — drill-down rebuild (2026-08-11)
   Figma "Menu - level 1/2/3" = 729:22789 / 729:22858 / 729:22948
   --------------------------------------------------------------------------
   Replaces the inline accordion. Each level is a `__panel`; only the active one
   is in flow, so the drawer height follows the level you are actually on.
   The panel background is explicitly WHITE — `body` carries the cream
   `--eureko-bg`, and any transparent layer here inherits it.
   ========================================================================== */

.eureko-mobile-menu,
.eureko-mobile-menu__inner {
	background: var(--eureko-white);
}
.eureko-mobile-menu__inner {
	padding: 1.25rem 0 1.5rem;   /* rows run edge to edge; padding is per-row */
}

/* ---- Top bar: logo (root) OR back + title (deeper levels) ---- */
.eureko-mobile-menu__top {
	align-items: center;
	gap: 0.5rem;
	padding: 0 1.25rem 1rem;
	border-bottom: 1px solid #eaeaeb;
	margin-bottom: 0.25rem;
}
.eureko-mm__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--eureko-text);
	cursor: pointer;
	flex: none;
}
.eureko-mm__back[hidden] { display: none; }
.eureko-mm__back .material-symbols-outlined { font-size: 1.25rem; }
.eureko-mm__brand { flex: 1; min-width: 0; }
.eureko-mm__brand[hidden] { display: none; }
.eureko-mm__heading {
	flex: 1;
	min-width: 0;
	font-family: var(--eureko-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--eureko-text);
}
.eureko-mm__heading[hidden] { display: none; }

/* ---- Panels ---- */
.eureko-mm__viewport {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.eureko-mm__panel {
	display: none;
	flex-direction: column;
	flex: 1;
}
.eureko-mm__panel.is-active { display: flex; }
.eureko-mm__panel[hidden]   { display: none; }

/* ---- Rows ---- */
.eureko-mm__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.eureko-mm__item + .eureko-mm__item .eureko-mm__link { border-top: 1px solid #eaeaeb; }
.eureko-mm__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.875rem 1.25rem;
	border: 0;
	background: none;
	font-family: var(--eureko-font-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--eureko-text);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.eureko-mm__link.is-current,
.eureko-mm__link:hover,
.eureko-mm__link:focus-visible { color: var(--eureko-primary); }
.eureko-mm__chevron {
	flex: none;
	font-size: 1.25rem;
	color: var(--eureko-muted);
}

/* Green uppercase group label — Figma level 2. */
.eureko-mm__eyebrow {
	margin: 1.25rem 0 0.25rem;
	padding: 0 1.25rem;
	font-family: var(--eureko-font-heading);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--eureko-primary);
}
.eureko-mm__eyebrow + .eureko-mm__list .eureko-mm__item:first-child .eureko-mm__link {
	border-top: 1px solid #eaeaeb;
}

/* ---- Level-1 foot: CTA + the receptionist contact block ----
 * Sits directly UNDER the last menu row, as in Figma 729:22789 — not pinned to
 * the bottom of the drawer. `margin-top: auto` pushed it to the bottom edge and
 * left a large empty gap under "Kontakt" on tall screens. */
.eureko-mm__foot {
	padding: 1.5rem 1.25rem 0;
}
.eureko-mm__cta {
	width: 100%;
	justify-content: center;
}
.eureko-mm__contact {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}
.eureko-mm__avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}
.eureko-mm__contact-body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}
.eureko-mm__phone {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--eureko-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--eureko-text);
	text-decoration: none;
}
.eureko-mm__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--eureko-primary);
	flex: none;
}
.eureko-mm__hours {
	font-size: 0.8125rem;
	color: var(--eureko-muted);
}

/* ==========================================================================
   O NÁS — mobile (≤767)   [Figma 729:22687]
   ========================================================================== */
@media (max-width: 767px) {
	/*
	 * O nás hero KEEPS its team photo on mobile (user, 2026-08-11).
	 * ⛔ An earlier pass replaced it with a cream band because the Figma mobile
	 * frame (729:22689) is a plain cream rectangle — the user overrode that;
	 * the photo hero is the intended look. Do not revert to cream.
	 *
	 * 🔴 What actually made it unreadable was the TINT, not the photo:
	 * `__bg::after` is a **90deg** gradient tuned for the desktop left-aligned
	 * column, fading 62% → 22% left-to-right. On a 390px column the white copy
	 * sat over the team's faces at roughly 30% and disappeared. On mobile it
	 * becomes a flat vertical tint instead, so every line has the same contrast
	 * wherever it falls on the photo.
	 */
	.page-template-page-o-nas .eureko-inner-hero__bg::after {
		background: linear-gradient(180deg, rgba(28, 32, 28, 0.55) 0%, rgba(28, 32, 28, 0.68) 100%);
	}

	/*
	 * HERO HEIGHT — the band must end at the VERTICAL MIDDLE of the insurer
	 * card, exactly as it does at ≥768 (user, 2026-08-11).
	 *
	 * ⛔ An earlier attempt used a fixed `__bg { bottom: 27rem }`. That is
	 * measured from the hero's bottom, so any change in the card's height moves
	 * the band edge UP into the copy — it cut the "Poznejte náš tým" button in
	 * half on narrower phones. Never anchor this with a magic number.
	 *
	 * The ≥768 mechanic has no magic number: the strip is absolutely positioned
	 * at the hero's bottom and pulled down by `translateY(50%)`, so the hero
	 * ends at the card's midline BY CONSTRUCTION whatever the card's height.
	 * That is now mirrored here; the only tuned value is the padding that keeps
	 * the card's upper half clear of the button.
	 */
	.page-template-page-o-nas .eureko-inner-hero--has-insurance {
		position: relative;
		overflow: visible;
		/* Must exceed half the mobile card (463 / 2 = 231px); 16rem leaves ~25px
		   of air between the button and the card's top edge. */
		padding-bottom: 16rem;
	}
	.page-template-page-o-nas .eureko-inner-hero__bg {
		bottom: 0;
	}
	.page-template-page-o-nas .eureko-inner-hero .eureko-insurance-strip {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		transform: translateY(50%);
		padding-block: 0;
	}
	/* The card's lower half now hangs over the next section, which has to clear
	   it — the same `--eureko-strip-below` contract used at ≥768. */
	.page-template-page-o-nas .eureko-inner-hero--has-insurance + .eureko-usp {
		padding-top: 17rem;
	}
	/* What shows below the photo. The `--media` base is `--eureko-dark`, which
	   would otherwise paint the area behind the card near-black. */
	.page-template-page-o-nas .eureko-inner-hero--media {
		background: var(--eureko-white);
	}

	/*
	 * ⚠️ O nás KEEPS the cream gallery panel, Kontakt does NOT.
	 * The Kontakt frame (729:21134) puts its tiles at the page margin with no
	 * card; the O nás frame (729:22702) wraps them in a panel with 24px padding.
	 * They genuinely differ — do not "unify" them. The generic ≤767 rule above
	 * strips the panel, so it is restored here.
	 */
	.page-template-page-o-nas .eureko-gallery--panel .eureko-gallery__panel {
		background: var(--eureko-cream);
		padding: 1.5rem;
	}
}

/* ==========================================================================
   FOOTER partner logos — mobile (≤767)
   --------------------------------------------------------------------------
   🔴 Same opposition as the hero insurer strip: on DESKTOP the logos are sized
   by HEIGHT (footer.php prints an inline `style="height:<h>px;width:auto"` per
   logo, 62/45/22/48/28), which is correct there. On a 390px column that gives
   five different widths (147–182px) in a 2-up layout, so nothing lines up.
   Mobile sizes them by a shared WIDTH instead, exactly like the hero strip.
   ⚠️ `!important` is required — the height is an INLINE style, so a plain rule
   cannot beat it.
   ⚠️ Do NOT "unify" this with the desktop rule; they are deliberate opposites.
   ========================================================================== */
@media (max-width: 767px) {
	.eureko-footer__partners-label {
		text-align: center;
	}
	.eureko-footer__partners-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-items: center;
		align-items: center;
		gap: 2rem 1.5rem;
	}
	.eureko-footer__partner {
		justify-content: center;
		width: 100%;
	}
	.eureko-footer__partner img {
		width: 8.75rem !important;   /* 140px — the hero strip's shared width */
		height: auto !important;
	}
}

/*
 * Footer partner logos at 768–1023.
 * Five height-sized logos total ~856px against a 657px container, so they wrap
 * 3 + 2 — and `justify-content: space-between` then flung the orphan row to the
 * two outer edges (ČPZP at x48, OZP at x539) with a 350px hole between them.
 * Shared width + centred wrapping keeps both rows reading as one group.
 */
@media (min-width: 768px) and (max-width: 1023px) {
	/* Centred with the logos — a left-aligned label over a centred, wrapped
	   logo block read as two unrelated elements. Same treatment as ≤767. */
	.eureko-footer__partners-label {
		text-align: center;
	}
	.eureko-footer__partners-list {
		justify-content: center;
		gap: 2rem 3rem;
	}
	.eureko-footer__partner img {
		width: 8.75rem !important;
		height: auto !important;
	}
}

/* ==========================================================================
   MOBILE / TABLET HEADER — Figma 729:20755
   --------------------------------------------------------------------------
   Design: 80px white row, 120x42 logo, and three 48px circles at the right —
   phone (with a green presence dot), search, and a GREEN menu button.
   Applies across the whole ≤1023 range: the desktop nav and the `__right`
   block only switch on at 1024 (see the note at l. 632), so the tablet range
   uses the same compact cluster as phones.
   ========================================================================== */
.eureko-header__mobile-actions {
	display: none;
}

@media (max-width: 1023px) {
	/*
	 * 🔴 `.eureko-header__inner` is a flex row with `gap: 32px`, which is sized
	 * for the desktop layout. With the new cluster that made
	 * 24 + 188(logo) + 32 + 104 + 32 + 48 + 24 = 452 against a 390 viewport, and
	 * the green menu button hung off the right edge (document scrollWidth 436).
	 * The cluster owns its own spacing, so the row gap goes to 8px here.
	 */
	.eureko-header__inner {
		gap: 0.5rem;
		flex-wrap: nowrap;
	}
	/*
	 * 🔴 The header row needs 24 + 120 + 8 + 104 + 8 + 48 + 24 = 336px. At a 320
	 * viewport flex has nothing left to give, so it collapsed the container's
	 * own right padding to 0 and the green menu button sat FLUSH against the
	 * screen edge (it read as cropped). The header therefore uses the frame's
	 * own 16px margin instead of the 24px page gutter, which brings the row to
	 * 320 and restores breathing room at every width above that.
	 * ⚠️ Scoped to the header — page content keeps the 24px gutter.
	 */
	.eureko-header .eureko-header__inner {
		padding-inline: 1rem;
	}
	/* Frame 2114:4641 — the logo is 120x42 on mobile; ours rendered at 188.
	   `flex: 0 1 auto` + `min-width: 0` makes the LOGO the thing that gives way
	   on a very narrow screen, never the tap targets. */
	.eureko-header__logo {
		flex: 0 1 auto;
		min-width: 0;
	}
	.eureko-header__logo img {
		width: 7.5rem;
		max-width: 100%;
		height: auto;
	}
	.eureko-header__mobile-actions {
		display: flex;
		align-items: center;
		gap: 0.5rem;              /* frame: 56 - 48 = 8px */
		margin-left: auto;        /* pushes the cluster to the right edge */
	}
	.eureko-header__mobile-btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		background: var(--eureko-white);
		color: var(--eureko-text);
		text-decoration: none;
		flex: none;
		box-shadow: 0 2px 10px rgba(61, 72, 86, 0.12);
		transition: background 0.2s ease, color 0.2s ease;
	}
	.eureko-header__mobile-btn .material-symbols-outlined {
		font-size: 1.5rem;        /* frame: 24px glyph in a 48px button */
		line-height: 1;
	}
	.eureko-header__mobile-btn:hover,
	.eureko-header__mobile-btn:focus-visible {
		background: var(--eureko-cream);
	}
	/* Presence dot on the phone button (frame 2114:4645 — 10px, top-right of
	   the glyph). The white ring keeps it legible where it meets the icon. */
	.eureko-header__mobile-dot {
		position: absolute;
		top: 0.75rem;
		right: 0.8125rem;
		width: 0.625rem;
		height: 0.625rem;
		border-radius: 50%;
		background: var(--eureko-primary);
		box-shadow: 0 0 0 2px var(--eureko-white);
	}

	/* The menu button becomes the design's filled green circle. `margin-left`
	   is reset because the cluster now owns the `auto` push. */
	.eureko-header__hamburger {
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		background: var(--eureko-primary);
		color: var(--eureko-white);
		margin-left: 0.5rem;
		flex: none;
		transition: background 0.2s ease;
	}
	.eureko-header__hamburger:hover,
	.eureko-header__hamburger:focus-visible {
		background: var(--eureko-primary-hover);
	}
	.eureko-header__hamburger .eureko-icon {
		width: 1.5rem;
		height: 1.5rem;
	}
}

/*
 * O nás hero CTA — hollow pill at EVERY width (user, 2026-08-11).
 * Solid green on a dark photo reads as a second focal point and competes with
 * the headline; the outline pill sits back and lets the title lead. Outside a
 * media query on purpose — mobile, tablet and desktop all use it on this page.
 * ⚠️ Scoped to the O nás template: `.eureko-btn--primary` is the site-wide CTA.
 */
.page-template-page-o-nas .eureko-inner-hero .eureko-btn--primary {
	background: transparent;
	border-color: var(--eureko-white);
	color: var(--eureko-white);
}
.page-template-page-o-nas .eureko-inner-hero .eureko-btn--primary:hover,
.page-template-page-o-nas .eureko-inner-hero .eureko-btn--primary:focus-visible {
	background: var(--eureko-white);
	border-color: var(--eureko-white);
	color: var(--eureko-text);
}

/* ==========================================================================
   FLOATING INSURER CARD ON MOBILE — generalised (2026-08-11)
   --------------------------------------------------------------------------
   Lifts the deferral recorded in CLAUDE.md ("the design floats the card across
   the band edge on mobile too; ours sits fully on the cream").
   Before this the card sat at 100% inside the band on every page.

   🔴 The straddle needs NO magic number: the card is absolutely positioned at
   the band's bottom and pulled down by `translateY(50%)`, so the band ends at
   the card's midline BY CONSTRUCTION whatever the card's height (it varies
   299–409px across 320–430px viewports). Never anchor this with a fixed offset
   — see the failed `__bg { bottom: 27rem }` attempt on O nás.

   The two tuned values are clearances only: the band reserves room for the
   card's top half, the next section clears its bottom half. Half the card is
   150–205px across the range, so 14rem/15rem covers every width.

   ⚠️ `:has(> .eureko-insurance-strip)` is deliberate — `.eureko-hero-band` is
   also used by Blog and Recenze, which carry NO strip, and `.eureko-blog-band`
   MUST keep `overflow: hidden` at every width (that clip is what crops the
   author cut-outs). `:has()` leaves them alone.
   ⚠️ The HOMEPAGE is excluded by design (user, 2026-08-11): it uses
   `.eureko-hero`, not a band, and its mobile layout is already signed off.
   ========================================================================== */
@media (max-width: 767px) {
	.eureko-tym-band:has(> .eureko-insurance-strip),
	.eureko-hero-band:has(> .eureko-insurance-strip) {
		overflow: visible;
		padding-bottom: 14rem;
	}
	.eureko-tym-band > .eureko-insurance-strip,
	.eureko-hero-band > .eureko-insurance-strip {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		transform: translateY(50%);
		padding-block: 0;
	}
	.eureko-tym-band:has(> .eureko-insurance-strip) + *,
	.eureko-hero-band:has(> .eureko-insurance-strip) + * {
		padding-top: 15rem;
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.260 — the green „recepce" cards all adopt the HOMEPAGE card's treatment
 * at ≤1023.
 *
 * Three blocks on the site are the same card in the client's eyes, all built on
 * the same portrait (`assets/images/about/eureko-recepce.webp`):
 *   1. `.eureko-contact-cta__card`  — footer.php, every page   ← THE REFERENCE
 *   2. `.eureko-cenik-cta-banner`   — Ceník / Mám poukaz / Půjčovna /
 *                                      Rezervace / Tělocvična / Vnitřní řád
 *   3. `.eureko-orto-aside__cta`    — contact-card.php (ambulance, samoplátce)
 * 2 and 3 hid the portrait outright below their desktop breakpoint, so they
 * rendered as bare green rectangles on phones and tablets.
 *
 * 🔴 Copy the homepage card EXACTLY — both halves of it, not just the photo:
 *
 *   a) DECOR. The homepage paints the leaves as `right center / cover` across
 *      the whole card. The banner has its own `__decor` span at
 *      `left top / contain` sized 49.1% — geometry derived from the 1584-wide
 *      DESKTOP stripe, which on a 342px card renders as one oversized blob in
 *      the top-left corner. That is the „SVG issue". The span is neutralised
 *      here and the card's own `::after` takes over.
 *      ⚠️ NO CSS opacity — every vector in the asset already carries
 *      opacity="0.1" from Figma; a second layer multiplies it to ~0.9%.
 *
 *   b) FRAMING. Scale her UP and let her bleed off the card's right and bottom
 *      so the flat cut edge of the source photo falls OUTSIDE the card, which
 *      clips it with its own `overflow: hidden`. Values are the homepage's,
 *      unchanged: 12.5rem / bottom −5.5rem at tablet, and the ≤767 pair scaled
 *      by the same fractions (right = 16% of the photo width, bottom = 30% of
 *      its height, photoH = photoW / 0.684).
 *      ⛔ Never shrink her to fit inside the card — that is what puts the hard
 *      vertical slice back on screen, and a gradient mask over it was tried and
 *      rejected by the user.
 *
 * ⚠️ Green cards keep an AUTO-WIDTH pill at mobile and tablet — the confirmed
 * exception (v1.9.240): a full-width bar runs straight across her face. The
 * global `@media (max-width: 1023px)` rule (~l. 1974) forces
 * `.eureko-btn { width: 100% !important }`, so `width` AND `display` both have
 * to be re-declared.
 *
 * ⏸ Desktop (≥1024) is untouched: the banner keeps its 155px stripe with the
 * portrait on the LEFT, and the sidebar card keeps its 1024–1279 hide (there it
 * is a ~512px sidebar column and that call was deliberate).
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	/* (a) — swap the stripe's own decor for the homepage card's. */
	.eureko-cenik-cta-banner__decor {
		display: none;
	}
	.eureko-cenik-cta-banner__inner::after {
		content: '';
		position: absolute;
		inset: 0;
		background: url('../images/decor/cta-leaves.svg') right center / cover no-repeat;
		pointer-events: none;
		z-index: 0;
	}

	/* (b) — the homepage portrait geometry, verbatim. */
	.eureko-cenik-cta-banner__photo {
		display: block;
		position: absolute;
		left: auto;
		top: auto;
		right: 0;
		bottom: -5.5rem;
		width: 12.5rem;
		height: auto;
		z-index: 0;
		pointer-events: none;
	}
	.eureko-cenik-cta-banner__photo img {
		display: block;
		width: 100%;
		height: auto;
	}
	.eureko-cenik-cta-banner__content {
		padding-right: 11rem;
	}
	.eureko-cenik-cta-banner__action .eureko-btn {
		width: auto !important;
		display: inline-flex !important;
		min-width: 0;
	}

	/* Sidebar contact-card — she was `display: none` below 1280 (~l. 9513). The
	   card runs full width at ≤1023, so the desktop geometry fits as-is. */
	.eureko-orto-aside__cta-photo {
		display: block;
	}
	.eureko-orto-aside__cta > .eureko-btn {
		width: auto !important;
		display: inline-flex !important;
		align-self: flex-start;
	}
}

@media (max-width: 767px) {
	/* Same fractions as the homepage's ≤767 rule, scaled to the 342px card. */
	.eureko-cenik-cta-banner__photo {
		width: 9rem;
		right: -1.4375rem;
		bottom: -3.9375rem;
	}
	.eureko-cenik-cta-banner__content {
		padding-right: 7.5rem;
	}
	.eureko-cenik-cta-banner__contacts {
		gap: 1rem 1.5rem;
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.262 — the blog hero's AUTHOR CUT-OUTS at mobile and tablet.
 * Figma 729:21344 (mobile frame) — the group is 729:21362.
 *
 * They were `display: none` below 1024 with the note „the band is only tall
 * enough for them beside the copy column". The mobile frame proves otherwise:
 * it stacks them UNDER the pill rows, full width, standing on the band's bottom
 * edge — so the block simply becomes a third row of the hero instead of a
 * second column.
 *
 * ⚠️ The label and the arrow sit on ONE LINE here (label x28, arrow x245),
 * unlike desktop where the arrow drops below the label. `__authors` is
 * therefore a 2-column grid at ≤1023, with the photo row spanning both.
 *
 * 🔴 `container-type: inline-size` must be carried over from the ≥1024 rule —
 * the photo row's height is `45cqw`, and without a query container that
 * resolves against nothing and the row collapses. The value needs no change:
 * the design's portrait is 160 tall on a 358 row = 44.7cqw, which is the same
 * proportion as desktop's.
 *
 * 🔴 The overlap is TIGHTER on mobile — four ~128px portraits span exactly 358,
 * i.e. ~40% of each portrait's width is covered, against 16% on desktop. At
 * −16% the row would be far wider than the container and `.eureko-blog-band`'s
 * `overflow: hidden` would silently clip the left-hand person off the page.
 *
 * ⚠️ Do NOT size these by width — see the note on the ≥1024 rule. They are
 * bottom-aligned at one shared height on purpose; that is what makes the four
 * heads level despite the exports being cropped differently.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eureko-blog-head__authors {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: start;
		align-items: center;
		width: 100%;
		min-width: 0;
		container-type: inline-size;
		margin-top: 1rem;
		/* Cancel the section's own bottom padding so the portraits reach the
		   band edge and are cropped by it, exactly as at ≥1024. */
		margin-bottom: -2.5rem;
	}
	.eureko-blog-head__authors-label {
		margin-top: 0;
		font-size: 0.875rem;   /* 14px — Figma 729:21368 */
		/* One line, as in the frame. At 14px the string is ~200px; even at a
		   320px viewport that leaves room for the 39px arrow and its gap. */
		white-space: nowrap;
	}
	.eureko-blog-head__authors-arrow {
		width: 2.4375rem;      /* 39px — Figma 729:21369 */
		margin: 0 0 0 0.625rem;
	}
	.eureko-blog-head__authors-photos {
		grid-column: 1 / -1;
		justify-content: center;
		margin-top: 0.5rem;
		margin-bottom: calc(-6% - 10px);
	}
	/*
	 * 🔴 A percentage margin resolves against the CONTAINER's inline size, not
	 * the image's own width. The ≥1024 value (−16%) is ~112px against a ~700px
	 * authors column, which is right for 230px-wide portraits; reused verbatim
	 * on a 342px container it is only ~51px — and −30% (the naive „tighter on
	 * mobile" figure) collapsed all four people into a 60px stack.
	 * The design overlaps four ~128px portraits down to a 358px row = ~51px per
	 * gap; against a 342px container that is −13%, NOT −40%.
	 */
	.eureko-blog-head__authors-photos img {
		margin-left: -13%;
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.263 — single article runs FULL WIDTH at mobile and tablet.
 *
 * `--eureko-article-col` is the design's 1048-of-1584 measure (66.16%), and at
 * ≥1024 that is right — a long line of prose needs a cap. Below it the token was
 * never overridden, so on a 390px viewport the whole article rendered in a
 * **227px column** inside a 342px container: title, lead, featured image, prose,
 * TOC, author box and tag panel all indented ~58px on each side.
 *
 * 🔴 One token, six consumers (head · breadcrumb · featured · content · author
 * box · tags). Overriding the custom property on `.eureko-article` fixes every
 * one of them — do NOT add per-block `max-width` rules, which is exactly the
 * duplication the token was introduced to avoid.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eureko-article {
		--eureko-article-col: 100%;
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.264 — Recenze hero at mobile and tablet. Figma 729:22299.
 *
 * Two defects, both from the block only ever having been laid out for ≥1024:
 *
 *  1. **The hero photo was `display: none`** and only switched on at ≥1024,
 *     the same pattern already found on the Ceník / Kontakt / Vybavení heroes.
 *     The mobile frame keeps it — `729:22345`, a **358x239** plate at radius 16
 *     sitting below the copy, inside the band. Note the RATIO and RADIUS differ
 *     from desktop's 804/536 at radius 32, so both need restating here.
 *
 *  2. **The icon list and the CTA/rating block are in the wrong order.** The
 *     frame runs title → lead → button + Google rating (`729:22304`) → the four
 *     icon rows (`729:22323`) → photo. Our markup has the features BEFORE
 *     `__actions` because that is the desktop arrangement (718:14390).
 *     `__content` is already a flex column, so a single `order: 1` on the
 *     features lifts the actions above them — **no fork of `reviews-hero.php`**,
 *     which would duplicate the Google-rating markup that is deliberately wired
 *     to the same ACF options as the homepage hero.
 *
 * ⏸ Icon size is left at our 40px (the frame draws 24px). „Rest is all good"
 * per the user — not in scope, and the glyphs read poorly smaller.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eureko-reviews-hero__features {
		order: 1;
	}
	.eureko-reviews-hero__image {
		display: block;
		margin-top: 2rem;
	}
	.eureko-reviews-hero__image img {
		aspect-ratio: 358 / 239;
		border-radius: var(--eureko-radius-m);
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.265 — Detail člena týmu: the member portrait at mobile and tablet.
 * Figma 729:22227, photo `729:22297` (358×296 at the band's bottom edge).
 *
 * Same root cause as every other hero in this sweep: `.eureko-cenik-hero__image`
 * is `display: none` in the base rules and only switched on at ≥1024. The ≤767
 * and 768–1023 blocks that fix this are **scoped page by page on purpose**
 * (`.eureko-page-cenik` / `-tym` / `-vybaveni`) because that hero is shared; this
 * page is `.eureko-tym-detail`, so it needs its own entry — do not unscope.
 *
 * 🔴 The crop differs from desktop and that is deliberate:
 *   - desktop draws the cut-out `contain` at `--cutout-zoom: 1.45` in a 640/620
 *     window, so the WHOLE person stands on the band edge;
 *   - the mobile frame is a head-and-shoulders crop filling the full 358 width.
 *     `contain` here would fit by HEIGHT (box 1.21 vs portrait 0.79) and leave a
 *     235px person marooned in the middle, so mobile uses `cover`.
 * ⚠️ `object-position` stays **`center top`**. Our cut-outs are cropped to the
 * alpha bbox — the first pixel row IS the top of the head — so the frame's own
 * `center 17%` would slice the face off. This is the trap already recorded for
 * the desktop rule; `cover` is safe, a downward offset is not.
 *
 * The −4rem cancels the hero's own bottom padding so the photo reaches the band
 * edge, exactly as at ≥1024 — the padding is NOT removed, or the „Objednat se"
 * button ends up hard against the band border.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eureko-tym-detail .eureko-cenik-hero__image {
		display: block;
		width: 100%;
		height: auto;
		margin-top: 1.5rem;
	}
	.eureko-tym-detail__image--cutout {
		aspect-ratio: 358 / 296;
		margin-bottom: -4rem;
	}
	.eureko-tym-detail__image--cutout .eureko-tym-detail__photo {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
	}
	/* Members with no cut-out yet fall back to the plate; keep its own ratio. */
	.eureko-tym-detail__image:not(.eureko-tym-detail__image--cutout) {
		aspect-ratio: 640 / 530;
	}
	/*
	 * ⚠️ 4 members have NO photo at all (Šubrová, Šálková, Křížek, Fejgl — still
	 * owed by Dan), and the template renders `__image-placeholder`, an empty grey
	 * plate. While the block was `display: none` that never showed; turning the
	 * photo on surfaced it. A blank grey rectangle 345px tall is worse than no
	 * photo on a phone, so the placeholder variant stays hidden here.
	 * ⏸ Desktop still shows it — that layout is signed off and its two-column
	 * hero would leave a hole. Revisit when the photos arrive.
	 */
	.eureko-tym-detail__image:has(> .eureko-cenik-hero__image-placeholder) {
		display: none;
	}
}

/*
 * ⚠️ TABLET CAP. There is no tablet frame, and the mobile ratio does not scale:
 * 358/296 across a 672px container renders a 556px-tall portrait with a head
 * roughly life-size. Capping the WIDTH keeps the frame's proportions and the
 * band-edge anchoring while bringing her back to phone-like scale (~416x344).
 */
@media (min-width: 768px) and (max-width: 1023px) {
	.eureko-tym-detail .eureko-cenik-hero__image {
		max-width: 26rem;
		margin-inline: auto;
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.266 — programme drawer („Více o cvičení"): the close ✕ sat ON the photo
 * at ≤767. Figma 729:22451 gives the ✕ its own row above the image.
 *
 * `__close` is absolute at top/right 1rem and is 2.75rem square, so it occupies
 * 16–60px. `__inner`'s padding is 3rem at ≥768 (image starts at 48px, clear
 * enough) but only 1.5rem below that, so the image started at 24px and the ✕
 * landed over its top-right corner — on the photo, not on white.
 *
 * Padding the INNER is the fix rather than moving the ✕: the button is the one
 * fixed reference point in the panel and the design keeps it in the corner.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.eureko-progdrawer__inner {
		padding-top: 4.5rem;   /* 60px close button + 12px breathing room */
	}
	/*
	 * `__slot` is a wrapping flex row: day/time left, therapists pushed right by
	 * `justify-content: flex-end` — correct at desktop, where it is ONE line.
	 * On a 390px panel the people wrap onto their own line but keep the
	 * right-alignment, so two therapists stack ragged-right away from the day
	 * they belong to. The frame stacks them left-aligned under the day, so the
	 * people block takes a full row and starts at the left edge.
	 */
	.eureko-progdrawer__slot-people {
		flex-basis: 100%;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
		gap: 0.5rem;
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.267 — „Mám poukaz" at mobile and tablet. Figma 729:22154 / 729:22157.
 *
 * 1. **The cream band ended ABOVE the steps card.** The overlap that makes the
 *    card straddle the band edge lives in a `@media (min-width: 1024px)` block
 *    and is expressed in **vw**, which does not survive the trip down: 30vw is
 *    117px at a 390 viewport. The frame runs the band to y965 with the card
 *    starting at y613 — a **352px overlap**.
 *    Adding padding to the band and pulling the next section back by the SAME
 *    amount extends the cream *behind* the card without moving the card, so the
 *    hero's own spacing is untouched.
 *    ⚠️ Scoped to the page: `.eureko-plan-band` is shared with Plánování
 *    rehabilitací, whose hero has one element fewer (no pill) — the same reason
 *    the ≥1024 rule already carries a `.eureko-page-poukaz` exception.
 *
 * 2. **The connector arrows were `display: none` below 1024** with the note „a
 *    horizontal connector means nothing when the row stacks" — true of a
 *    *horizontal* one, but the frame draws a **downward** arrow between the
 *    stacked cards. `steps-cards.php` now emits each connector after its step,
 *    so here it is simply an in-flow grid item; at ≥1024 they are absolutely
 *    positioned by `--i` and source order is irrelevant.
 *    🔴 The asset already points DOWN-RIGHT (never assume it points right — see
 *    the note on the blog hero arrow). Desktop rotates −45° to level it out;
 *    pointing it straight down is therefore **+45°**, not −45° or 90°.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	/*
	 * Both frames put the band bottom 352px INTO the steps card
	 * (Mám poukaz 729:22155 vs 729:22157; Plánování 729:22192 vs 729:22194 —
	 * identical geometry: band to y965, card from y613).
	 *
	 * Formula: padding = 352px + whatever gap the page already leaves between
	 * the band's bottom and the card's top. That gap is NOT the same on the two
	 * pages (57px vs 32px — their heroes carry different elements), which is why
	 * these stay page-scoped rather than sharing one value. Measure the gap
	 * before adding a third page.
	 */
	.eureko-page-poukaz .eureko-plan-band {
		padding-bottom: 25.5rem;   /* 352 + 57 */
	}
	.eureko-page-poukaz .eureko-plan-band + .eureko-steps-cards {
		margin-top: -25.5rem;
		position: relative;
		z-index: 2;
	}
	.eureko-page-plan .eureko-plan-band {
		padding-bottom: 24rem;     /* 352 + 32 */
	}
	.eureko-page-plan .eureko-plan-band + .eureko-steps-cards {
		margin-top: -24rem;
		position: relative;
		z-index: 2;
	}

	/*
	 * The connector OVERLAPS both cards rather than sitting in the gap between
	 * them (user reference, 2026-08-11): it starts inside the card above and
	 * ends inside the card below.
	 *
	 * 🔴 The box stays SQUARE. The asset is a down-right arrow rotated 45° to
	 * point down, so a non-square box would skew it. Length comes from the box's
	 * diagonal instead: a 4.5rem square rotated 45° draws a ~102px-tall arrow.
	 * ⚠️ `transform` does not affect layout, so the row only reserves the
	 * unrotated 72px — the extra ~15px at each end already spills over the
	 * neighbours for free, and `margin-block: -2rem` pushes it a further 32px
	 * into each. `z-index` is what keeps it above the cream cards.
	 */
	.eureko-steps-cards__grid--arrows {
		gap: 0.5rem;
	}
	.eureko-steps-cards__grid--arrows .eureko-steps-cards__arrow {
		display: block;
		justify-self: center;
		position: relative;
		z-index: 1;
		width: 4.5rem;
		height: 4.5rem;
		margin-block: -2rem;
		background: url('../images/decor/steps-arrow.svg') center / contain no-repeat;
		transform: rotate(45deg);
		pointer-events: none;
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.268 — Rezervační systém: the embed straddles the band on mobile too.
 * Figma 729:22033 — band to y534, embed card from y269, i.e. **265px** of the
 * embed rides up into the cream.
 *
 * The existing pull-up is `margin-top: -15vw` inside `@media (min-width: 768px)`
 * — the same vw model that failed on Mám poukaz and Plánování. Below 768 it did
 * not run at all, so the band simply ended where the embed began; 15vw would in
 * any case be 58px on a 390 viewport, nowhere near the 265 the frame asks for.
 *
 * 🔴 It was BROKEN AT TABLET TOO, in the opposite direction: the pull-up starts
 * at 768 but the band's `min-height: 32.13vw` only starts at **1024**, so from
 * 768–1023 the card rode up over a band sized to the title alone and **covered
 * the „Rezervační systém" heading**. Fixed px therefore runs to 1023, past the
 * -15vw rule, and the vw model is left to desktop where its two halves agree.
 * ⚠️ Whenever a band's height and its overlap are set at different breakpoints,
 * check the range in between — that mismatch is this build's most repeated bug.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eureko-page-rezervace .eureko-rezervace-band {
		padding-bottom: 16.5rem;   /* 264px */
	}
	.eureko-page-rezervace .eureko-embed-slot {
		margin-top: -16.5rem;
		padding-top: 0;
		position: relative;
		z-index: 1;
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.270 — `media-text` rows STACK on tablet (image top, copy below).
 *
 * The two-column split fires at `min-width: 768px`, so the whole 768–1023 range
 * got the desktop layout inside a ~720px container: **336px columns**. Body copy
 * at 18px in a 336px measure wraps every four or five words and the rows ran
 * several screens tall (user reference on Půjčovna, 2026-08-11).
 *
 * This is the classic „768–1023 had no owner" case — the desktop layout simply
 * started too early. The row is single-column in the base rules already, so the
 * fix is to hold that shape to 1023 rather than invent a tablet layout.
 *
 * ⚠️ Four separate rules push the row into two columns and ALL of them are
 * `@media (min-width: 768px)`; each has to be undone here or the stack comes out
 * half-applied:
 *   1. the generic `1fr 1fr` grid + 3.5rem gap
 *   2. the `--image-right` order swap (meaningless stacked — the image must stay
 *      on top either way, which is what the frames show)
 *   3. `.eureko-service`'s `gap: 0` + the big horizontal copy padding, which
 *      exist so the two halves meet at the container midpoint
 *   4. `--panel`'s `align-items: stretch` + `align-self: center`, which centre
 *      the copy against the photo's height
 *
 * ⚠️ Shared block: this also restyles the rows on Fyzioterapie, Tělocvična,
 * Plánování, Skupinové cvičení, O nás and Detail metody at tablet. That is the
 * intent — every one of them had the same 336px columns.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eureko-media-text__inner {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		align-items: center;
	}
	.eureko-media-text--image-right .eureko-media-text__media,
	.eureko-media-text--image-right .eureko-media-text__body {
		order: 0;
	}
	.eureko-service .eureko-media-text__inner {
		gap: 1.75rem;
	}
	.eureko-service .eureko-media-text__body {
		padding-inline: 0;
	}
	/*
	 * ⚠️ …but NOT in the panel. `.eureko-service .__body` and
	 * `.eureko-media-text--panel .__body` are both two-class selectors, so the
	 * rule above (later in the file) beat the panel's own
	 * `padding: clamp(2rem, 5vw, 4.5rem)` and the copy ran flush to the cream
	 * card's left edge. Three classes to win it back.
	 */
	.eureko-service .eureko-media-text--panel .eureko-media-text__body {
		padding-inline: clamp(2rem, 5vw, 4.5rem);
	}
	/*
	 * The panel keeps `gap: 0` — it is one cream card, photo flush to the copy.
	 *
	 * 🔴 But it must NOT run full-bleed. `--panel .__inner` zeroes the
	 * `.eureko-container` padding and `.eureko-service .--panel` zeroes the
	 * section's, both so the cream card spans the same 1584 measure as the plain
	 * rows on DESKTOP. At tablet those rows are 672 inside a 768 viewport while
	 * the panel went edge-to-edge at 768 — the card read as a different, wider
	 * block. Restoring the container's own padding lines them up.
	 * ⚠️ 3rem is `.eureko-container`'s ≥768 value and 1.5rem its base — keep
	 * these in step with l. 213 if that ever changes.
	 */
	.eureko-media-text--panel .eureko-media-text__inner,
	.eureko-service .eureko-media-text--panel .eureko-media-text__inner {
		grid-template-columns: 1fr;
		gap: 0;
		align-items: start;
	}
	.eureko-media-text--panel .eureko-media-text__body {
		align-self: auto;
	}
	/*
	 * ⚠️ The inset goes on the SECTION, not on `__inner`. `__inner` carries the
	 * cream background, so padding there would indent the CONTENT inside a card
	 * that is still full-bleed — it has to be the card itself that narrows.
	 */
	.eureko-media-text--panel,
	.eureko-service .eureko-media-text--panel {
		padding-inline: 1.5rem;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.eureko-media-text--panel,
	.eureko-service .eureko-media-text--panel {
		padding-inline: 3rem;
	}
}
/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.272 — SERVICE / AMBULANCE hero media at mobile and tablet.
 * Figma 729:20738 (Rehabilitační lékař) · 729:20856 (Ortopedická ambulance).
 *
 * `.eureko-orto-hero__media` was `display: none` and only switched on at ≥1024,
 * so both ambulance pages lost the plate, the doctor cut-out AND the opening
 * hours card below 1024 — the hours in particular are information, not decor.
 *
 * The frame keeps all three, restacked:
 *   plate    `729:20753`  358x239 at the container width (desktop is 804x536)
 *   doctor   `729:20754`  214x206, overlapping the plate's lower-left and
 *                         bleeding off the page's left edge
 *   hours    `729:20756`  full width, in flow BELOW the plate — not floated
 *                         over it as at ≥1024
 *
 * 🔴 `__media` becomes a 2-ROW GRID with the plate and the doctor sharing row 1
 * and the hours card in row 2. The doctor cannot stay absolutely positioned:
 * its `bottom` resolves against `__media`, and once the hours card is in flow
 * that box is ~170px taller than the plate, so the cut-out landed BELOW the
 * photo instead of on it. Sharing a grid cell anchors it to the plate itself,
 * whatever the card does.
 *
 * 🔴 `aspect-ratio` must be scoped with `:not(--front)`. The cut-out carries
 * BOTH classes, so a bare `.eureko-orto-hero__photo { aspect-ratio: 358/239 }`
 * squashed a 700x1061 portrait into a landscape box — it rendered 205x137
 * instead of 205x310. The base `--front` rule sets `aspect-ratio: auto`, but
 * equal specificity means a later plate rule silently wins.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eureko-orto-hero__media {
		display: grid;
		grid-template-columns: 1fr;
		margin-top: 2rem;
	}
	.eureko-orto-hero__photo:not(.eureko-orto-hero__photo--front) {
		grid-row: 1;
		grid-column: 1;
		aspect-ratio: 358 / 239;
		border-radius: var(--eureko-radius-m);
	}
	/*
	 * Same framing rule as every other cut-out here: scale up and let the flat
	 * cut edge fall outside the visible area rather than shrinking the person to
	 * fit. It runs off the container's left edge and its base tucks under the
	 * hours card.
	 */
	.eureko-orto-hero__photo--front {
		position: relative;
		grid-row: 1;
		grid-column: 1;
		align-self: end;
		justify-self: start;
		inset: auto;
		width: 59.8%;
		height: auto;
		aspect-ratio: auto;
		margin-left: -6%;
		margin-bottom: -14%;
		z-index: 1;
	}
	/*
	 * 🔴 The card comes OUT of absolute positioning. At ≥1024 it floats at
	 * `left: 58%` over the plate; left there it would sit on the doctor's face
	 * on a 342px plate. In flow it also covers the cut-out's flat base, which is
	 * what the frame does — hence the z-index rather than a plain gap.
	 */
	.eureko-orto-hero__media .eureko-orto-hours {
		position: relative;
		grid-row: 2;
		grid-column: 1;
		left: auto;
		bottom: auto;
		width: 100%;
		margin-top: 1.5rem;
		z-index: 3;
	}
}

/*
 * Fyzioterapie hero — the „Pro samoplátce" tooltip needs its own clearance
 * below 1024. The badge is `position: absolute` on purpose (it is absolute in
 * Figma too, so it must not add height or the two pills stop lining up at
 * ≥1024). At ≤1023 the hero's rows stack tighter and the badge landed on the
 * „Naplánujte si termín po telefonu" contact row underneath it.
 * The clearance goes on the WRAP as margin — the badge itself must stay out of
 * flow, or the pills misalign again.
 */
@media (max-width: 1023px) {
	.eureko-fyzio-hero__btn-wrap {
		margin-bottom: 2.5rem;
	}
}

/*
 * ⚠️ TABLET SIZING for the ambulance/service cut-out. There is no tablet frame,
 * and the phone's 59.8% does not scale: on a 672px plate that is a 402x609
 * portrait covering most of the photo behind it. 40% keeps the same reading as
 * the phone (269x407 against a 449-tall plate) while the framing rule — bleed
 * off the left, base tucked under the hours card — is unchanged.
 */
@media (min-width: 768px) and (max-width: 1023px) {
	.eureko-orto-hero__photo--front {
		width: 40%;
		margin-left: -4%;
		margin-bottom: -8%;
	}
}

/*
 * v1.9.274 — the ambulance/service cut-out was too LARGE on the phone: at 59.8%
 * of a 342px plate she covered most of the photo behind her. 45% keeps her
 * reading as a person standing in front of the scene rather than as the subject
 * of it. The framing rule is unchanged — she still bleeds off the container's
 * left edge and her flat base tucks under the hours card.
 */
@media (max-width: 767px) {
	.eureko-orto-hero__photo--front {
		width: 45%;
		margin-left: -5%;
		margin-bottom: -10%;
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.276 — FYZIOTERAPIE: the cut-out must NOT be clipped; the insurer card
 * passes in FRONT of her instead.
 *
 * 🔴 `.eureko-orto-hero { overflow: hidden }` is correct for the AMBULANCE
 * heroes — it slices the portrait's flat base at the band boundary. Fyzioterapie
 * is the documented exception: the design (718:8962) lets the floating insurer
 * card do the covering, so the hero must stay `overflow: visible` and the strip
 * must sit above her. Both of those rules lived in the `@media (min-width:
 * 1024px)` block ONLY, so below 1024 the shared `overflow: hidden` won and she
 * was cut off with a hard horizontal edge.
 *
 * With the clip gone she renders whole and simply runs behind the insurer card,
 * so the bleed no longer has to be extreme — it only needs to carry her base
 * past the strip's top edge.
 * ⚠️ Scoped to `.eureko-fyzio-hero` / `--fyzio`: on Rehabilitační lékař and
 * Ortopedie the hours card is the cover and the clip stays.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eureko-fyzio-hero {
		overflow: visible;
	}
	/*
	 * 🔴🔴 z-index ONLY — never re-declare `position` here. The strip is already
	 * `position: absolute` (v1.9.258 floats it across the band edge with
	 * `transform: translateY(50%)`); forcing `position: relative` dropped it back
	 * into flow and the card stopped straddling the band entirely.
	 */
	.eureko-sluzba-band--fyzio .eureko-insurance-strip {
		z-index: 3;
	}
}
/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.278 — FYZIOTERAPIE hero, mobile + tablet, MEASURED OFF Figma 729:20984.
 *
 * ⛔ This SUPERSEDES v1.9.274–276, whose cut-out width and bleed were tuned by
 * eye across four successive blocks (45% / 59.8% / -35% / -22% / -14%). Those
 * are deleted. Every number below is read straight off the mobile frame — do
 * not re-tune them by eye again.
 *
 * Frame geometry, 390 viewport, container 358 at x16:
 *   plate     x16  y657  358x239      (bottom y896)
 *   cut-out   x0   y760  214x214      (bottom y974 = the band's bottom edge)
 *   insurer   x16  y934  358x285      (its top passes IN FRONT of her)
 *
 * As fractions of the container width (358), which is what the percentages
 * below resolve against, so the whole arrangement scales to our 342 container
 * and on to tablet without a second set of numbers:
 *   width          214/358 = 59.78%
 *   margin-left    -16/358 = -4.47%   (she bleeds off the container's left)
 *   margin-bottom  -78/358 = -21.8%   (78px of her falls below the plate)
 *
 * 🔴🔴 The frame's box is SQUARE — a head-and-chest crop. Our desktop cut-out
 * is a 700x1061 PORTRAIT, so with `height: auto` a 59.78% width renders her
 * 324px tall against a 228px plate: her head clears the top of the photo behind
 * her and she reads as the subject of the hero rather than a person standing in
 * front of the scene. THAT is what "covers most of the plate" was, and shrinking
 * the width (v1.9.274's 45%) treated the symptom — it made her small AND still
 * mis-cropped.
 *
 * ⛔ v1.9.281 — the square crop MUST be done here, in CSS, from the
 * background-removed cut-out. Exporting 729:21002 and swapping it in per
 * breakpoint was tried in v1.9.280 and REVERTED: that node is a photo crop with
 * the studio white baked in (measured 100% opaque, corner pixel 255,255,255),
 * so it renders as a white square on the cream band. Our cut-out is 47.6%
 * opaque with transparent corners and is the only correct source at any width.
 *
 * ⚠️ `object-position: center top` — our cut-outs are cropped to the alpha
 * bbox, so the first pixel row IS the top of the head. Anything lower slices
 * the face. (Same trap already recorded for the team-detail portrait.)
 *
 * ⚠️ Her flat bottom edge is never visible: the insurer card's top (y934) sits
 * 40px above the box's bottom (y974). That only holds because this hero is
 * `overflow: visible` with the strip at `z-index: 3` — see the block above.
 *
 * ⚠️ Scoped to `.eureko-fyzio-hero` throughout. Rehabilitační lékař and
 * Ortopedie share `__photo--front` but have an „Ordinační hodiny" card doing
 * the covering and their own frames; they keep the generic rules untouched.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eureko-fyzio-hero .eureko-orto-hero__photo--front {
		width: 59.78%;
		height: auto;
		aspect-ratio: 1;
		object-fit: cover;
		object-position: center top;
		margin-left: -4.47%;
		margin-bottom: -21.8%;
	}
}

/*
 * Hero action row — Figma 729:20989/20990. The two pills stay SIDE BY SIDE at
 * their natural widths („Zeptat se" 134, „Ceník služeb" 162, 16px apart = 312
 * inside a 358 container), with the „Pro samoplátce" tooltip hanging under the
 * second one and the „Contact small" row below.
 *
 * 🔴 This is a documented EXCEPTION to the client's „CTA buttons run full width
 * on mobile and tablet" call, and it is confined to this hero. The global rule
 * at l. 1974 is `.eureko-btn { display: flex !important; width: 100% !important }`,
 * so escaping it needs BOTH properties re-declared — `width` alone leaves them
 * stacked as full-width blocks.
 */
@media (max-width: 1023px) {
	.eureko-fyzio-hero .eureko-orto-hero__buttons {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		width: 100%;
	}
	.eureko-fyzio-hero .eureko-orto-hero__buttons .eureko-btn {
		width: auto !important;
		display: inline-flex !important;
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.279 — Fyzioterapie „metody a terapie": ACCORDION below 1024.
 * Figma 729:21009 (mobile) vs 718:8981 (desktop).
 *
 * 🔴 THE reported defect was the white backdrop. `__panel::before` is capped at
 * `max-width: 82.95%` (1314/1584) because on DESKTOP the cards are the wider
 * element and the white plate sits behind them. On a 342px container that plate
 * became a narrow white rectangle showing through behind the title and in the
 * gaps between cards — which is the „blocks width" problem in the screenshot.
 * The mobile frame has no white plate at all, so it is dropped outright rather
 * than resized.
 *
 * Frame geometry (390 viewport, 358 container):
 *   open card       358x246 — 32px padding, title, 34x3 rule, dotted list
 *   collapsed card  358x51  — 16px padding, title + chevron, nothing else
 *   gap between      8px
 *
 * The heading is a <button> at every width, so the base chrome reset below is
 * NOT inside a media query — at ≥1024 it must render exactly as the old <h3>
 * did (no padding, no border, no background, no chevron, not interactive).
 * ⚠️ Re-verify the desktop panel at 1280+ after touching these.
 *
 * ⚠️ Every selector is scoped to `.eureko-sluzba-methods`. The lesson from the
 * Ceník regression: a collapse rule keyed on a class that JS adds must never be
 * able to match markup that JS does not manage.
 * ───────────────────────────────────────────────────────────────────────────── */
.eureko-sluzba-methods__col-heading {
	margin: 0;
}
.eureko-sluzba-methods__col-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: default;
	-webkit-appearance: none;
	appearance: none;
}
.eureko-sluzba-methods__chevron {
	display: none;
	flex: 0 0 auto;
	font-size: 17px;
	color: var(--eureko-text);
	transition: transform var(--eureko-transition);
}

@media (max-width: 1023px) {
	/* No white plate on mobile — the frame draws the cards straight on the page. */
	.eureko-sluzba-methods__panel::before {
		display: none;
	}
	.eureko-sluzba-methods__panel {
		padding-block: 0;
	}
	.eureko-sluzba-methods__columns {
		gap: 0.5rem;
	}
	.eureko-sluzba-methods__col-title {
		cursor: pointer;
	}
	.eureko-sluzba-methods__chevron {
		display: block;
	}
	.eureko-sluzba-methods__col.is-open .eureko-sluzba-methods__chevron {
		transform: rotate(180deg);
	}
	/*
	 * Collapsed = title row only. 16px padding + a 19px line = the frame's 51px.
	 * The open card keeps the base 32/24 padding, which already matches.
	 */
	.eureko-sluzba-methods__col:not(.is-open) {
		padding-block: 1rem;
	}
	.eureko-sluzba-methods__col:not(.is-open) .eureko-sluzba-methods__rule,
	.eureko-sluzba-methods__col:not(.is-open) .eureko-sluzba-methods__list {
		display: none;
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.280 — Fyzioterapie: the methods panel collapses to ONE column at tablet.
 * ───────────────────────────────────────────────────────────────────────────── */

/*
 * 🔴 The methods accordion ran THREE COLUMNS at tablet: the `repeat(3, 1fr)`
 * rule lives in a `@media (min-width: 768px)` block, so 768–1023 got the
 * desktop grid while the cards had already become collapsible accordion rows.
 * The result was three stubby columns of chevrons — an accordion is a stack by
 * definition. Textbook „768–1023 had no owner".
 *
 * ⚠️ This must stay in sync with `initMethodsAccordion()`'s matchMedia (1023).
 */
@media (max-width: 1023px) {
	.eureko-sluzba-methods__columns {
		grid-template-columns: 1fr;
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.282 — FYZIOTERAPIE hero cut-out: her flat base must be COVERED by the
 * insurer card at every mobile and tablet width, not at 390 only.
 *
 * Measured live (v1.9.281) — the gap between her base and the card's top edge:
 *   320 → +9px   390 → +5px   430 → +39px      (a positive number is an
 *   exposed flat cut edge sitting on the cream, i.e. the reported defect)
 *   768 → she overshot the card's BOTTOM by 123px, running down over the
 *         „Individuální fyzioterapeutické metody" heading.
 *
 * 🔴 TABLET ROOT CAUSE — a specificity trap, not a value. The ≥1024 rule
 * `.eureko-fyzio-hero .eureko-orto-hero__photo--front { top: 36.75%; left:
 * -12.19% }` (l. 9096) is TWO classes; the ≤1023 restack sets `inset: auto` on
 * the ONE-class `.eureko-orto-hero__photo--front` (l. 13686). Source order never
 * came into it — the desktop rule simply outranked it, so at 768–1023 she was
 * shoved 165px down the plate by a desktop offset. `inset: auto` is re-declared
 * here at matching specificity. Textbook „768–1023 had no owner".
 *
 * 🔴 WHY ONE NUMBER COULD NEVER WORK, and what replaces it. The card is
 * `position: absolute; bottom: 0; translateY(50%)` on the band, so its top edge
 * is `bandBottom − cardHeight/2` — and the card's height CHANGES WITH WIDTH as
 * the logos rewrap: 409px at 320, 383 at 390, 299 at 430, 152 from 768 up. Her
 * overhang was a percentage of the container, the band's reserve was a fixed
 * rem. Two quantities scaling differently — hence right at 390, wrong either
 * side of it. The fix is therefore split by what the COVER does in each range:
 *
 *   ≤767  the card's height varies, so give the overhang headroom (26% of the
 *         container, up from the frame's 21.8%) AND drop the band's reserve
 *         11rem so the card rides higher. Verified cover: 51px @320, 49 @360,
 *         57 @390, 20 @412, 25 @430 — always negative slack, never a gap.
 *         ⚠️ 11rem is a FLOOR, not a spacing preference: the card's top must
 *         still clear the plate at 320, where half the card is 205px
 *         (11rem + the hero's 3rem = 224 > 205, 19px to spare). Do not reduce.
 *
 *   768+  the card is a single 152px row at EVERY width in the range, so the
 *         correct tuck is a CONSTANT, not a percentage. At 21.8% she cleared
 *         the card's bottom edge again above ~910px (9px of flat edge showing
 *         at 1000). -9rem keeps her 44–108px inside the card from 768 to 1023.
 *
 * ⚠️ Scoped to `.eureko-fyzio-hero` / `.eureko-sluzba-band--fyzio` throughout.
 * Rehabilitační lékař and Ortopedie share `__photo--front` but are covered by
 * their „Ordinační hodiny" card and keep the generic rules. Desktop (≥1024) is
 * untouched — every rule here is bounded at 1023.
 * ⚠️ `:has(> .eureko-insurance-strip)` on the band selector is not decoration:
 * the shared straddle rule it overrides (l. 13056) uses it, and a plain
 * `.eureko-sluzba-band--fyzio` loses the specificity match.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eureko-fyzio-hero .eureko-orto-hero__photo--front {
		inset: auto;
	}
}
@media (max-width: 767px) {
	.eureko-sluzba-band--fyzio:has(> .eureko-insurance-strip) {
		padding-bottom: 11rem;
	}
	.eureko-fyzio-hero .eureko-orto-hero__photo--front {
		margin-bottom: -26%;
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.eureko-fyzio-hero .eureko-orto-hero__photo--front {
		margin-bottom: -9rem;
	}
}

/* ==========================================================================
   Lightbox — click-to-enlarge for gallery tiles (client request 2026-08-17)
   Markup: `template-parts/sections/gallery.php` + `initLightbox()` in main.js.
   Serves Kontakt and Tělocvična from one component.
   ========================================================================== */
.eureko-gallery__link {
	display: block;
	position: relative;
	border-radius: var(--eureko-radius-m);
	overflow: hidden;
	cursor: zoom-in;
	text-decoration: none;
}
.eureko-gallery--panel .eureko-gallery__link {
	border-radius: var(--eureko-radius-s);
}
/* The <img> already carries the radius; the link clips it, so keep them equal. */
.eureko-gallery__link .eureko-gallery__image {
	transition: transform 0.35s ease;
}
.eureko-gallery__link:hover .eureko-gallery__image,
.eureko-gallery__link:focus-visible .eureko-gallery__image {
	transform: scale(1.04);
}
.eureko-gallery__link:focus-visible {
	outline: 2px solid var(--eureko-primary);
	outline-offset: 3px;
}
.eureko-gallery__zoom {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--eureko-text);
	opacity: 0;
	transform: translateY(0.25rem);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}
.eureko-gallery__zoom .material-symbols-outlined { font-size: 1.375rem; }
.eureko-gallery__link:hover .eureko-gallery__zoom,
.eureko-gallery__link:focus-visible .eureko-gallery__zoom {
	opacity: 1;
	transform: translateY(0);
}
/* Touch has no hover — show the affordance permanently so the tile reads as tappable. */
@media (hover: none) {
	.eureko-gallery__zoom { opacity: 1; transform: none; }
}

.eureko-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 4vw, 5rem);
	opacity: 0;
	transition: opacity 0.28s ease;
}
.eureko-lightbox.is-open { opacity: 1; }
.eureko-lightbox[hidden] { display: none; }
/*
 * Deep tint + blur: the header sat legibly behind the first version and the
 * overlay read as a floating card rather than a mode.
 */
.eureko-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31, 37, 45, 0.94);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: zoom-out;
}
.eureko-lightbox__stage {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	max-width: 100%;
	max-height: 100%;
}
.eureko-lightbox__figure {
	margin: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.125rem;
	min-height: 0;
}
.eureko-lightbox__image {
	display: block;
	max-width: 100%;
	/* Room for the caption row underneath, plus the overlay's own padding. */
	max-height: calc(100vh - 12rem);
	width: auto;
	height: auto;
	border-radius: var(--eureko-radius-m);
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45);
	background: var(--eureko-dark);
	transform: scale(0.97);
	transition: transform 0.28s ease;
}
.eureko-lightbox.is-open .eureko-lightbox__image { transform: scale(1); }
.eureko-lightbox__caption {
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--eureko-font-heading);
	font-size: 1.125rem;
	line-height: 1.4;
	text-align: center;
	letter-spacing: 0.01em;
}
.eureko-lightbox__caption[hidden] { display: none; }
.eureko-lightbox__counter {
	display: block;
	margin-top: 0.375rem;
	font-family: var(--eureko-font-body, inherit);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.5);
}
.eureko-lightbox__counter[hidden] { display: none; }

.eureko-lightbox__close,
.eureko-lightbox__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 0.2s ease, transform 0.2s ease;
}
.eureko-lightbox__close:hover,
.eureko-lightbox__nav:hover {
	background: var(--eureko-primary);
	transform: scale(1.06);
}
.eureko-lightbox__close:focus-visible,
.eureko-lightbox__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
/*
 * Both chrome layers anchor to the OVERLAY, not the stage — anchoring the close
 * button to the stage pushed it up over the site header, where it read as part
 * of the page rather than part of the lightbox.
 */
.eureko-lightbox__close {
	position: absolute;
	top: clamp(0.75rem, 2.5vh, 1.75rem);
	right: clamp(0.75rem, 2.5vw, 1.75rem);
	z-index: 2;
	width: 3rem;
	height: 3rem;
}
.eureko-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 3.25rem;
	height: 3.25rem;
}
.eureko-lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.eureko-lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.75rem); }
.eureko-lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.75rem); }
.eureko-lightbox__nav[hidden] { display: none; }
.eureko-lightbox__close .material-symbols-outlined { font-size: 1.5rem; }
.eureko-lightbox__nav .material-symbols-outlined { font-size: 1.75rem; }

/*
 * Phones: the arrows drop to the bottom edge of the overlay rather than floating
 * over the photo, where at 390px they cover the subject entirely.
 */
@media (max-width: 767px) {
	.eureko-lightbox { padding: 3.75rem 0.75rem 5.5rem; }
	.eureko-lightbox__image { max-height: calc(100vh - 16rem); }
	.eureko-lightbox__caption { font-size: 1rem; }
	.eureko-lightbox__nav {
		top: auto;
		bottom: clamp(1rem, 3vh, 1.75rem);
		transform: none;
		width: 2.875rem;
		height: 2.875rem;
	}
	.eureko-lightbox__nav:hover { transform: scale(1.06); }
	.eureko-lightbox__nav--prev { left: calc(50% - 4.5rem); }
	.eureko-lightbox__nav--next { right: calc(50% - 4.5rem); }
}

@media (prefers-reduced-motion: reduce) {
	.eureko-lightbox,
	.eureko-lightbox__image,
	.eureko-lightbox__close,
	.eureko-lightbox__nav { transition: none; }
	.eureko-lightbox__image { transform: none; }
}
.eureko-lightbox__caption-text { display: block; }
.eureko-lightbox__caption-text[hidden] { display: none; }

/* ==========================================================================
   usp-about signature — alignment fix (client feedback 2026-08-17, Jakub)
   „zlepšit zarovnání" on the „Poznejte naše hodnoty" button + owner signature.

   Two real defects in the old geometry:
   1. The band was pinned with `left: 20.4%` while the CTA's width is fixed by
      its LABEL, so the gap between the two drifted with the viewport and the
      name crept toward the button as the window narrowed.
   2. `.eureko-usp__signature` was clamped to `width: 6.5rem` (104px) — narrower
      than „majitel kliniky" renders — so the block sat cramped and its edges
      lined up with nothing.

   Fix: anchor the band from the RIGHT (the portrait's own edge, which is what
   the design actually fixes) and let the signature size to its content, so its
   right edge always meets the portrait at a constant gap. The side-by-side
   band now starts at 1600 rather than 1440 — below that the left column can
   still reach the signature, so the stacked treatment above stays in charge.
   ========================================================================== */
@media (min-width: 1440px) {
	.eureko-usp__image-wrap {
		/* Same right edge as before (20.4% + 28.914%), expressed from the right
		   so the signature grows AWAY from the button instead of toward it. */
		left: auto;
		/* 1440–1599 needs a wider right offset: the band is ~452px and the left
		   column still reaches x292, so the design percentage collides. */
		right: 45%;
		width: auto;
		justify-content: flex-end;
		align-items: flex-end;
		gap: 1.75rem;
	}
	.eureko-usp__signature {
		width: max-content;
		max-width: none;
		white-space: nowrap;
		/* Right-aligned: both lines then share one edge with the portrait beside
		   them, which is the alignment the eye actually reads. */
		text-align: right;
		align-items: flex-end;
		padding-bottom: 4.625rem; /* unchanged — design top 235 */
	}
}

@media (min-width: 1600px) {
	.eureko-usp__image-wrap { right: 50.686%; } /* the design edge, once there is room for it */
}

/* --------------------------------------------------------------------------
   usp-about signature — moved onto the portrait as a soft-green card.
   User direction (2026-08-18): sit it to the RIGHT, resting on Dan's shoulder,
   on the site's existing green card fill (#eff5e8, same as `contact-cta`).

   Taking the signature out of flow leaves the wrap as the portrait box alone,
   so the photo keeps the exact position the right anchor already gave it —
   only the name moves. z-index 3, because `.eureko-usp__image` is 2 and the
   signature precedes it in the DOM.
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
	.eureko-usp__image-wrap {
		gap: 0;
	}
	.eureko-usp__signature {
		position: absolute;
		z-index: 3;
		left: -2rem;
		bottom: 5.5rem;
		width: max-content;
		padding: 0.75rem 1.125rem;
		background: #eff5e8;
		border-radius: var(--eureko-radius-s);
		box-shadow: 0 0.5rem 1.5rem rgba(61, 72, 86, 0.1);
		text-align: left;
		align-items: flex-start;
		gap: 0.125rem;
	}
	.eureko-usp__sig-role {
		color: var(--eureko-muted);
	}
}

/* Signature card, revision 2 (user, 2026-08-18): brand green, pill radius to
   match the buttons, nudged up off the shoulder. */
@media (min-width: 1440px) {
	.eureko-usp__signature {
		bottom: 7.75rem;
		padding: 0.875rem 1.5rem;
		background: var(--eureko-primary);
		border-radius: var(--eureko-radius-pill);
		box-shadow: 0 0.625rem 1.75rem rgba(99, 157, 33, 0.28);
	}
	.eureko-usp__sig-name { color: #fff; }
	.eureko-usp__sig-role { color: rgba(255, 255, 255, 0.85); }
}

/* Signature pill, revision 3 (user): a little wider on both sides. The left
   offset grows by the same amount the padding does, so it widens symmetrically
   instead of only creeping onto the portrait. */
@media (min-width: 1440px) {
	.eureko-usp__signature {
		padding-left: 2.25rem;
		padding-right: 2.25rem;
		left: -2.75rem;
	}
}

/* ==========================================================================
   Header search button — match the CTA (user, 2026-08-18)
   The circle was 48px beside a 65px „Objednat se" pill, so it read as a
   smaller, unrelated control. Sizing it to the CTA's own height lines the two
   up and gives the icon the same optical padding.
   ========================================================================== */
.eureko-header__search {
	width: 4.0625rem;   /* 65px — the CTA's rendered height */
	height: 4.0625rem;
	border: 1px solid var(--eureko-border);
	color: var(--eureko-text);
}
.eureko-header__search:hover {
	border-color: var(--eureko-primary);
	color: var(--eureko-primary);
	background: var(--eureko-cream);
}

/* ==========================================================================
   Search results page
   Client: „výsledky vyhledávání nejsou graficky zpracované" (2026-08-17).
   Before this block `grep eureko-search main.css` returned nothing — the page
   rendered with browser defaults.
   ========================================================================== */
.eureko-search-page {
	background: var(--eureko-bg, #fff);
}
.eureko-search-hero {
	background: var(--eureko-cream);
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem);
}
.eureko-search-hero__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--eureko-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--eureko-primary);
}
.eureko-search-hero__title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--eureko-text);
}
.eureko-search-hero__count {
	margin: 0.75rem 0 0;
	color: var(--eureko-muted);
	font-size: 1.0625rem;
}
.eureko-search-hero__form {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	max-width: 34rem;
}

/* The form ships in searchform.php and was previously unstyled everywhere. */
.eureko-search-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.375rem 0.375rem 1.25rem;
	background: var(--eureko-white, #fff);
	border: 1px solid var(--eureko-border);
	border-radius: var(--eureko-radius-pill);
	transition: border-color var(--eureko-transition);
}
.eureko-search-form:focus-within {
	border-color: var(--eureko-primary);
}
.eureko-search-form__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0.75rem 0;
	font-family: var(--eureko-font-body);
	font-size: 1.0625rem;
	color: var(--eureko-text);
}
.eureko-search-form__input:focus { outline: none; }
.eureko-search-form__input::placeholder { color: var(--eureko-muted); }
.eureko-search-form__submit {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	padding: 0.875rem 1.5rem;
	border-radius: var(--eureko-radius-pill);
	background: var(--eureko-primary);
	color: #fff;
	font-family: var(--eureko-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	transition: background var(--eureko-transition);
}
.eureko-search-form__submit:hover { background: var(--eureko-primary-hover); }

.eureko-search-results {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.eureko-search-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 768px) {
	.eureko-search-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 1280px) {
	.eureko-search-grid { grid-template-columns: repeat(3, 1fr); }
}
.eureko-search-card { margin: 0; }
.eureko-search-card__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	height: 100%;
	padding: 1.5rem;
	background: var(--eureko-white, #fff);
	border: 1px solid var(--eureko-border);
	border-radius: var(--eureko-radius-l);
	text-decoration: none;
	transition: border-color var(--eureko-transition), box-shadow var(--eureko-transition), transform var(--eureko-transition);
}
.eureko-search-card__link:hover {
	border-color: var(--eureko-primary);
	box-shadow: 0 0.75rem 2rem rgba(61, 72, 86, 0.08);
	transform: translateY(-2px);
}
/* Names the section the hit came from — a flat title list mixes services,
   devices, articles and pages with no way to tell them apart. */
.eureko-search-card__type {
	display: inline-flex;
	padding: 0.25rem 0.75rem;
	border-radius: var(--eureko-radius-pill);
	background: #eff5e8;
	color: var(--eureko-primary);
	font-family: var(--eureko-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.eureko-search-card__title {
	margin: 0.25rem 0 0;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--eureko-text);
}
.eureko-search-card__excerpt {
	margin: 0;
	color: var(--eureko-muted);
	font-size: 1rem;
	line-height: 1.55;
}
.eureko-search-card__more {
	margin-top: auto;
	padding-top: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--eureko-primary);
	font-family: var(--eureko-font-heading);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 1px;
}
.eureko-search-card__more .material-symbols-outlined {
	font-size: 1.125rem;
	transition: transform var(--eureko-transition);
}
.eureko-search-card__link:hover .eureko-search-card__more .material-symbols-outlined {
	transform: translateX(3px);
}

/* Pagination — same 42px pills as the blog listing. */
.eureko-search-page__pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.eureko-search-page__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}
.eureko-search-page__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.75rem;
	border: 1px solid var(--eureko-border);
	border-radius: var(--eureko-radius-pill);
	background: var(--eureko-white, #fff);
	color: var(--eureko-text);
	text-decoration: none;
	font-size: var(--eureko-fs-sm);
	transition: border-color var(--eureko-transition), color var(--eureko-transition);
}
.eureko-search-page__pagination .page-numbers:hover {
	border-color: var(--eureko-primary);
	color: var(--eureko-primary);
}
.eureko-search-page__pagination .page-numbers.current {
	background: var(--eureko-primary);
	border-color: var(--eureko-primary);
	color: #fff;
}
.eureko-search-page__pagination .screen-reader-text { position: absolute; left: -9999px; }

.eureko-search-empty {
	max-width: 32rem;
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
	background: var(--eureko-cream);
	border-radius: var(--eureko-radius-xl);
}
.eureko-search-empty__icon {
	font-size: 3rem;
	color: var(--eureko-primary);
}
.eureko-search-empty__title {
	margin: 1rem 0 0.5rem;
	font-size: 1.5rem;
	color: var(--eureko-text);
}
.eureko-search-empty__text {
	margin: 0 0 1.5rem;
	color: var(--eureko-muted);
}

/* Search hero, revision 2 (user, 2026-08-18): the form read as small and
   stranded on the left, and the stack below it was too airy. Centre the block,
   widen the field, and tighten the vertical rhythm. */
.eureko-search-hero {
	padding-block: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 2.5vw, 2.25rem);
	text-align: center;
}
.eureko-search-hero__form {
	margin-inline: auto;
	margin-top: clamp(1.25rem, 2vw, 1.75rem);
	max-width: 46rem;
}
.eureko-search-form {
	padding: 0.5rem 0.5rem 0.5rem 1.75rem;
}
.eureko-search-form__input {
	padding-block: 0.9375rem;
	font-size: 1.125rem;
}
.eureko-search-form__submit {
	padding: 1rem 2rem;
	font-size: 1rem;
}
.eureko-search-results {
	padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
}

/*
 * Fyzioterapie hero — „Pro samoplátce" tooltip overlapping the contact row at
 * desktop (client, 2026-08-17: „ať nedochází k překryvu").
 *
 * The ≤1023 clearance below already covered phones/tablet, but ≥1024 was still
 * exposed: `.eureko-orto-hero__meta` is a WRAPPING flex row, so between about
 * 1024 and the width where buttons + contact fit on one line, the contact block
 * drops to a second line — straight under the tooltip, which is absolute and
 * therefore reserves no height.
 *
 * Fixing it with row-gap costs nothing in the common case: row-gap only applies
 * BETWEEN wrapped lines, so when the two blocks sit side by side the hero is
 * unchanged and the pills still line up with the contact exactly as designed.
 */
@media (min-width: 1024px) {
	.eureko-fyzio-hero .eureko-orto-hero__meta {
		row-gap: 3.75rem;
	}
}

/* ---------------------------------------------------------------------------
 * Ceník — linked price rows (client, 2026-08-18: „from individual items there
 * should be links to the details of the given procedure").
 *
 * Only SOME rows link — Tejpování, Administrativa, Dornova metoda etc. have no
 * detail page — so the link must read as an affordance without turning the
 * unlinked rows into second-class text. Hence: same colour and weight as a
 * plain row, with an underline + arrow that only appear on hover/focus.
 * ⚠️ The row is a flex parent with `justify-content: space-between`; the name
 * was `flex: 1`, so the <a> replacing it has to carry that itself or the price
 * stops sitting hard right.
 * ------------------------------------------------------------------------- */
.eureko-cenik-card__name--link {
	flex: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}
.eureko-cenik-card__name--link .eureko-cenik-card__name-text {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.18s ease;
}
.eureko-cenik-card__name-icon {
	/*
	 * font-family is set HERE, not left to the Google Fonts stylesheet's own
	 * .material-symbols-outlined rule — inside the <a> that rule lost and the
	 * span rendered the LITERAL word "arrow_outward" in Catamaran. Four other
	 * icons in this file (header search, need-card, carousel arrow, review
	 * date) already declare the family for the same reason.
	 */
	font-family: 'Material Symbols Outlined';
	font-variation-settings: 'opsz' 20, 'wght' 400, 'FILL' 0, 'GRAD' 0;
	font-size: 1.125rem;
	line-height: 1;
	flex: none;
	opacity: 0;
	transform: translateX(-0.125rem);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.eureko-cenik-card__name--link:hover,
.eureko-cenik-card__name--link:focus-visible {
	color: var(--eureko-primary);
}
.eureko-cenik-card__name--link:hover .eureko-cenik-card__name-text,
.eureko-cenik-card__name--link:focus-visible .eureko-cenik-card__name-text {
	text-decoration-color: currentColor;
}
.eureko-cenik-card__name--link:hover .eureko-cenik-card__name-icon,
.eureko-cenik-card__name--link:focus-visible .eureko-cenik-card__name-icon {
	opacity: 1;
	transform: translateX(0);
}
/*
 * Touch has no hover, so the arrow would never show. Keep it permanently
 * visible but muted below 1024 — that is the whole cue there is.
 */
@media (max-width: 1023px) {
	.eureko-cenik-card__name-icon {
		opacity: 0.45;
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.eureko-cenik-card__name--link,
	.eureko-cenik-card__name--link .eureko-cenik-card__name-text,
	.eureko-cenik-card__name-icon {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Programme drawer — therapist avatars (client, 2026-08-18).
 *
 * These were empty tinted discs at every width. They now carry the person's
 * `tym` cut-out. The tinted background STAYS as the disc behind the cut-out —
 * the portraits are transparent PNG/WebP, so without it they float on white.
 * ⚠️ `object-position: center top` is the house rule for our cut-outs: they are
 * cropped to the alpha bbox, so row 0 IS the top of the head and any lower
 * anchor slices the face.
 * ------------------------------------------------------------------------- */
.eureko-progdrawer__person-avatar--photo {
	position: relative;
	overflow: hidden;
	display: block;
}
.eureko-progdrawer__person-avatar--photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: 50%;
}

/* ---------------------------------------------------------------------------
 * Footer column toggles — hide above the accordion breakpoint (client,
 * 2026-08-18: „the element with the down arrow is extra here, it has no purpose
 * and does not appear anywhere else").
 *
 * 🔴 `initFooterAccordions()` INJECTS the toggle button and never tears it
 * down — deliberately, so open state survives a resize. But every rule that
 * styles it lives inside `@media (max-width: 767px)`, so once a visitor had
 * been below 768 even momentarily, the button stayed in the DOM at desktop
 * with NO styling at all and rendered as a raw grey browser <button>. It also
 * pushed the wrapping „Vodoléčba a tepelné terapie" heading onto a second line
 * — the „messy formatting" in the same report.
 *
 * ⚠️ Must be a min-width query, NOT a bare `display: none`: the ≤767 rule that
 * shows it sits EARLIER in the file, so an unscoped rule here would win at
 * every width and kill the mobile accordion.
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.eureko-footer__column-toggle {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Ambulance hero — the WHOLE doctor block is the link (client, 2026-08-18:
 * „make doc's whole block clickable — from the doctor's name a click should
 * lead to her medallion").
 *
 * `.eureko-orto-hero__doctor` is now an <a> when the medailonek exists, so it
 * has to shed the anchor's inherited colour/underline and drive the hover of
 * its children instead. The `--link` modifier on the NAME is kept so the green
 * hover reads exactly as it did when only the name was clickable.
 *
 * ⚠️ No padding or margin here on purpose: this row sits in the wrapping flex
 * `__meta`, whose row-gap keeps the „Pro samoplátce" tooltip clear of the
 * contact block. Padding would change that clearance at some widths.
 * ------------------------------------------------------------------------- */
.eureko-orto-hero__doctor--link {
	text-decoration: none;
	color: inherit;
	border-radius: var(--eureko-radius-m);
}
.eureko-orto-hero__doctor--link:focus-visible {
	outline: 2px solid var(--eureko-primary);
	outline-offset: 4px;
}
.eureko-orto-hero__doctor--link:hover .eureko-orto-hero__doctor-name,
.eureko-orto-hero__doctor--link:focus-visible .eureko-orto-hero__doctor-name {
	color: var(--eureko-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.eureko-orto-hero__doctor--link .eureko-orto-hero__doctor-avatar {
	transition: box-shadow 0.2s ease;
}
.eureko-orto-hero__doctor--link:hover .eureko-orto-hero__doctor-avatar,
.eureko-orto-hero__doctor--link:focus-visible .eureko-orto-hero__doctor-avatar {
	box-shadow: 0 0 0 3px rgba(99, 157, 33, 0.35);
}
/*
 * The arrow is the only added chrome — it makes „this whole thing goes
 * somewhere" legible without changing the block's height.
 * font-family declared here, not left to the Google Fonts stylesheet's own
 * .material-symbols-outlined rule: inside an <a> that rule loses and the span
 * renders the literal word „arrow_forward" (same trap as the Ceník rows).
 */
.eureko-orto-hero__doctor-arrow {
	font-family: 'Material Symbols Outlined';
	font-variation-settings: 'opsz' 20, 'wght' 400, 'FILL' 0, 'GRAD' 0;
	font-size: 1.125rem;
	line-height: 1;
	flex: none;
	color: var(--eureko-primary);
	opacity: 0;
	transform: translateX(-0.25rem);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.eureko-orto-hero__doctor--link:hover .eureko-orto-hero__doctor-arrow,
.eureko-orto-hero__doctor--link:focus-visible .eureko-orto-hero__doctor-arrow {
	opacity: 1;
	transform: translateX(0);
}
/* Touch has no hover — keep the cue permanently visible below 1024. */
@media (max-width: 1023px) {
	.eureko-orto-hero__doctor-arrow {
		opacity: 0.5;
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.eureko-orto-hero__doctor-arrow,
	.eureko-orto-hero__doctor--link .eureko-orto-hero__doctor-avatar {
		transition: none;
	}
}

/* Ambulance price card — the „why is this list short" line above the rows. */
.eureko-orto-pricing__note {
	margin: -0.5rem 0 1.5rem;
	max-width: 46rem;
	font-size: var(--eureko-fs-base);
	line-height: 1.6;
	color: var(--eureko-muted);
}

/* ---------------------------------------------------------------------------
 * Pro samoplátce — hero gets the shared photo plate (client, 2026-08-18:
 * „what to use the currently large free space for").
 *
 * The Figma frame has no media column, so `.eureko-samoplatce-hero` forced the
 * hero grid to a single column at ≥1024 and the right half sat empty. Now that
 * a plate is rendered, restore the shared 655fr / 804fr split.
 *
 * 🔴 Specificity: the single-column rule is `.eureko-samoplatce-hero
 * .eureko-orto-hero__inner` — two classes — inside its own `min-width: 1024px`
 * query EARLIER in this file. This block repeats the same selector so it wins
 * on source order; a one-class selector would silently lose.
 *
 * ⚠️ `__content` keeps its 655px max-width — that IS the copy column of the
 * shared grid, not a leftover from the one-column layout.
 * ⚠️ `__media` needs no display rule: it is already `block` at ≥1024 and `grid`
 * at ≤1023 from the shared ambulance blocks, so the plate restacks under the
 * copy on phone and tablet for free.
 * ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.eureko-samoplatce-hero .eureko-orto-hero__inner {
		grid-template-columns: 655fr 804fr;
		column-gap: 126px;
		align-items: center;
	}
}

/*
 * Pro samoplátce — same tooltip clearance the Fyzioterapie hero needed.
 * The „Pro samoplátce" badge under the „Ceník služeb" pill is absolutely
 * positioned (it must add no height, or the two pills stop lining up with the
 * contact block). Narrowing the copy column to 655fr for the new photo made
 * `__meta` wrap, so the contact row landed directly under the badge.
 * `row-gap` only applies BETWEEN wrapped lines, so a hero wide enough to keep
 * them side by side is completely unaffected.
 */
@media (min-width: 1024px) {
	.eureko-samoplatce-hero .eureko-orto-hero__meta {
		row-gap: 3.75rem;
	}
}
/*
 * ⚠️⚠️ THE `}` ABOVE WAS MISSING (found 2026-08-24, v1.9.342).
 *
 * Without it this `@media (min-width: 1024px)` never closed, so EVERY rule from
 * here to the end of the file — ~400 lines, including every block appended
 * since — was silently nested inside it and applied at ≥1024 ONLY. A
 * `@media (max-width: 1023px)` block written after it can never match at all:
 * the two conditions cannot both be true, so the rule parses fine, matches its
 * selector, and still does nothing.
 *
 * That is how it was caught: the desktop-only cut-out rule for Rehabilitační
 * lékař matched its element, its media query matched the viewport, and the
 * computed style was still `block`. Injecting the identical rule at runtime
 * worked, which pointed at the file rather than at specificity.
 *
 * 🔴 A missing brace does NOT throw — CSS fails silently, exactly like an
 * undefined custom property. After appending a block, verify in the browser
 * that the LAST rule of the parsed sheet is your own and is not wrapped:
 *   const s = [...document.styleSheets].find(x => x.href?.includes('main.css'))
 *   s.cssRules[s.cssRules.length - 1].cssText
 * A counting script is NOT reliable here — comments in this file contain
 * braces of their own, so they inflate any naive tally.
 */
/* --------------------------------------------------------------------------
   Menu leaves with no page yet — rendered as plain text, never `href="#"`.
   The client read the dead anchors as „the services are not connected".
   -------------------------------------------------------------------------- */
.eureko-mega__leaf.is-inert {
	color: var(--eureko-muted);
	cursor: default;
}
.eureko-mega__services .eureko-mega__leaf.is-inert {
	font-family: var(--eureko-font-heading);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
}
.eureko-mega__list .eureko-mega__leaf.is-inert {
	font-size: 0.875rem;
	line-height: 1.2;
}
.eureko-mm__link.is-inert {
	color: var(--eureko-muted);
	cursor: default;
}

/* ==========================================================================
   Header row — the „Recenze" nav item (Dan, 2026-08-18)
   ==========================================================================
   Reviews only lived in the footer; in this segment they are a marketing
   asset, so „Recenze" is now a normal item in the primary menu (WP menu ID 3,
   item 297) — client-editable, and the mobile drill-down picks it up for free.

   🔴 IT COSTS ~88px OF A ROW THAT WAS ALREADY FULL. Measured at 1536 (content
   box 1425): logo 188 + „Nabídka služeb" 219 + nav 445 + right 572 (phone 275
   + 48 + actions 249) + 3 × 32 inner gaps = 1520. Over by 95.

   So the gaps — and ONLY the gaps — tighten between 1500 and 1639; nothing is
   hidden, shrunk or restyled. Above 1640 the original spacing returns
   untouched. The phone block's breakpoint moves 1480 → 1500 because even
   tightened the row does not fit below ~1494.

   ⛔ Do not add anything else to this row without re-measuring all four
   widths (1500 / 1536 / 1639 / 1640). There is ~10px of slack at 1500.
   ========================================================================== */
@media (min-width: 1500px) and (max-width: 1639px) {
	.eureko-header__inner {
		gap: 1.25rem;
	}
	.eureko-header__right {
		gap: 1.5rem;
	}
	.eureko-header__nav .eureko-nav__list {
		gap: 1rem;
	}
	.eureko-header__actions {
		gap: 1rem;
	}
}

/* ==========================================================================
   usp-about — portrait removed (client, 2026-08-18)
   ==========================================================================
   Daniel Křížek asked that his photo and the „majitel" label appear only on his
   own team profile. `usp-about` carried both on ~14 pages, so the portrait, the
   signature and the leaf that sat behind the portrait are gone from the markup.

   What is left is a two-column band: heading + CTA | 2×2 features. The desktop
   grid was `512fr 292fr 780fr` (heading | portrait region | features) with the
   middle track reserved for the cut-out; it collapses to `512fr 780fr` and the
   features move from column 3 to column 2. The signature/portrait rules further
   up this file are now dead — left in place only so the geometry stays readable
   if a (different) photo is ever reintroduced. ⛔ Never his.
   ========================================================================== */
@media (min-width: 1024px) {
	.eureko-usp__inner {
		grid-template-columns: 512fr 780fr;
		column-gap: 3rem;
	}
	.eureko-usp__inner > .eureko-usp__features {
		grid-column: 2;
	}
	/* The leaf decoration was positioned behind the cut-out; with no portrait
	   it is a stray blob in empty space. */
	.eureko-usp::before {
		content: none;
	}
	/* `min-height: 351px` reserved the cut-out's height, and the section had NO
	   bottom padding because the portrait stood on the bottom border. Both have
	   to go, or the band keeps a dead strip where the photo used to be. */
	.eureko-usp__inner {
		min-height: 0;
	}
	.eureko-usp {
		padding-block: 4rem;
	}
}

/* --- Hero: third CTA "Náš Tým" ------------------------------------------ */
/* The pill sits on its own row under the green button. `.eureko-hero__ctas`
   already wraps, so the row break is a zero-height flex item rather than a
   width on the item itself — the item must keep its natural width so the
   badge stays centred under the pill. */
.eureko-hero__ctas-break {
	flex-basis: 100%;
	height: 0;
	margin: 0;
}
/* The wrap gap (28px) would double the space above the row, and the second
   badge already hangs below its button. Pull the row back up. */
.eureko-hero__cta-item--team {
	margin-top: -0.5rem;
}

@media (max-width: 767px) {
	/* Stacked column — the break element would only add another gap. */
	.eureko-hero__ctas-break {
		display: none;
	}
	.eureko-hero__cta-item--team {
		margin-top: 0;
	}
}

/* Match "Náš Tým" to the width of "Pro samoplátce" rather than letting it
   shrink to its own short label. The second button's label is echoed into
   `data-ghost` by hero.php and rendered as an invisible, zero-height
   copy stacked in the same grid cell, so the button can never be narrower
   than that text — and it follows automatically if the client edits the ACF
   label. */
.eureko-hero__cta-item--team .eureko-hero__btn {
	display: inline-grid;
	grid-template-columns: auto;
	justify-items: center;
}
.eureko-hero__cta-item--team .eureko-hero__btn > * {
	grid-area: 1 / 1;
}
.eureko-hero__cta-item--team .eureko-hero__btn::after {
	grid-area: 1 / 1;
	content: attr(data-ghost);
	height: 0;
	overflow: hidden;
	visibility: hidden;
	white-space: nowrap;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.334 — Google rating sits BESIDE „Náš Tým" on the hero's second row.
 *
 * Client, 2026-08-24: „review block needs to come next to the Náš tým button,
 * in the second row." It previously sat on a row of its own beneath it.
 *
 * The markup move (into `.eureko-hero__ctas`, after the team item) is what puts
 * it on that row — `__ctas` wraps and `__ctas-break` opens row 2. Only two
 * things are needed here.
 * ───────────────────────────────────────────────────────────────────────────── */

/* 1. The 0.75rem stack margin was for a block sitting UNDER the button group.
      Inside the row it would just shove the rating down out of alignment. */
.eureko-hero__ctas .eureko-hero__google-rating {
	margin-top: 0;
}

@media (min-width: 768px) {
	/*
	 * 2. Optically centre the rating on the PILL, not on the whole team item —
	 *    that item is button + badge, so centring against it would drop the
	 *    rating to the badge's height. The pill is 60px (1.25rem padding x2 on a
	 *    ~20px line) and the rating block is 42px (its Google logo), which is a
	 *    9px offset. `--team` carries `margin-top: -0.5rem` to absorb the wrap
	 *    gap, so the rating has to follow it down by the same 8px.
	 *
	 * ⚠️ Both figures are the components' own fixed sizes, not tuned spacing —
	 *    if the pill's padding or the logo size changes, recompute rather than
	 *    nudging by eye.
	 */
	.eureko-hero__ctas .eureko-hero__google-rating {
		align-self: flex-start;
		margin-top: 0.0625rem; /* -0.5rem (row pull) + 0.5625rem (9px centring) */
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * v1.9.335 — the header had NO phone between 1024 and 1499.
 *
 * Client, 2026-08-24: „na menším monitoru zmizí telefonní číslo, ale zároveň se
 * nezobrazí piktogram telefonu, který je vidět na iPhonu."
 *
 * He is right, and it is a gap between two existing stages, not a bug in either:
 *   ≤1023      `__mobile-actions` shows the phone pictogram
 *   1024–1499  `__mobile-actions` is off AND `__phone-block` is not yet on  ← nothing
 *   ≥1500      the full phone block (avatar + label + number + hours)
 *
 * `__phone-block` cannot simply be switched on earlier: the full desktop row
 * needs ~1478px and was giving the page a horizontal scrollbar below that — the
 * reason the three-stage build exists at all. So the gap is filled with the
 * compact 48px circle instead, matching the mobile button he already knows.
 *
 * ⚠️ The upper bound MUST track the `min-width: 1500px` rule that reveals
 * `__phone-block`, or the header shows the number and the icon at once.
 * ───────────────────────────────────────────────────────────────────────────── */
.eureko-header__phone-compact {
	display: none;
}

@media (min-width: 1024px) and (max-width: 1499px) {
	/*
	 * 🔴 IT MUST MATCH `.eureko-header__search`, NOT the mobile button.
	 *
	 * First cut copied the ≤1023 phone button — 48px with a drop shadow — and it
	 * sat beside a search circle that is **65px with a 1px border and no
	 * shadow** (sized to the CTA's height at the user's 2026-08-18 request). Two
	 * circles of different sizes and different chrome side by side read as a
	 * mistake, which is exactly what was reported.
	 *
	 * ⚠️ These four values are COPIED from `.eureko-header__search` (l. 556 and
	 * the 65px override at l. 14406). If that button is ever resized or
	 * restyled, change both — they are siblings in the same row and any
	 * difference between them is visible.
	 */
	.eureko-header__phone-compact {
		/* Local names so the dot below can be positioned from the same numbers
		   instead of repeating hand-computed offsets. */
		--eureko-phone-compact-size: 4.0625rem;  /* 65px — matches __search */
		--eureko-phone-compact-glyph: 1.5rem;    /* 24px — matches __search */

		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--eureko-phone-compact-size);
		height: var(--eureko-phone-compact-size);
		border-radius: 50%;
		background: var(--eureko-white);
		border: 1px solid var(--eureko-border);
		color: var(--eureko-text);
		text-decoration: none;
		flex: none;
		transition: background var(--eureko-transition), color var(--eureko-transition), border-color var(--eureko-transition);
	}
	.eureko-header__phone-compact .material-symbols-outlined {
		font-size: var(--eureko-phone-compact-glyph);
		line-height: 1;
	}
	/* Same hover as the search circle beside it. */
	.eureko-header__phone-compact:hover,
	.eureko-header__phone-compact:focus-visible {
		border-color: var(--eureko-primary);
		color: var(--eureko-primary);
		background: var(--eureko-cream);
	}
	/*
	 * 10px presence dot, white-ringed so it stays legible over the glyph.
	 * Anchored to the GLYPH's top-right corner rather than the circle's, so it
	 * keeps the same relationship it has on mobile: the offset is exactly the
	 * gap between the circle's edge and the glyph's box, which is why it is a
	 * calc and not a tuned number.
	 */
	.eureko-header__phone-compact-dot {
		position: absolute;
		top: calc((var(--eureko-phone-compact-size) - var(--eureko-phone-compact-glyph)) / 2);
		right: calc((var(--eureko-phone-compact-size) - var(--eureko-phone-compact-glyph)) / 2);
		width: 0.625rem;
		height: 0.625rem;
		border-radius: 50%;
		background: var(--eureko-primary);
		box-shadow: 0 0 0 2px var(--eureko-white);
	}
}

/* Therapist the enquiry came through, shown in the drawer when it was opened
   from a medailonek (client, 2026-08-24). Filled by initBookingDrawer(); ships
   `hidden`, so it never renders with JS off. */
.eureko-booking__therapist {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--eureko-radius-s);
	background: var(--eureko-cream);
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-text);
}
.eureko-booking__therapist::before {
	content: "Dotaz na terapeuta: ";
	color: var(--eureko-muted);
}
.eureko-booking__therapist[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * v1.9.338 — Booking drawer: „Zájem o:" context note.
 *
 * Twin of `.eureko-booking__therapist` above (l. ~15199). Same card, different
 * question — that one names the therapist, this one names what the enquiry is
 * about (Naše tělocvičny, a group class …). Both can show at once, so they are
 * separate elements rather than one reused slot.
 * ⚠️ The label lives in `content` — it is decoration, and the value that
 * actually reaches reception is the hidden `booking_context` input.
 * ------------------------------------------------------------------------- */
.eureko-booking__context {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--eureko-radius-s);
	background: var(--eureko-cream);
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-text);
}
.eureko-booking__context::before {
	content: "Zájem o: ";
	color: var(--eureko-muted);
}
.eureko-booking__context[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * v1.9.338 — Ambulance hero: the floating card is now a NOTE, not office hours.
 *
 * Client 2026-08-24 withdrew the published ordinační hodiny from both doctors'
 * heroes and asked for the „vzniklé prázdné rámečky" to carry the copy from the
 * page's own lower band instead. The card keeps its Figma geometry (718:7641 —
 * white, radius 20, drop shadow, floating at left 58% / bottom -7.5%); only the
 * contents change, so all the positioning above still applies.
 *
 * Two things the day-list never needed:
 *   • the title must WRAP — „Kdy navštívit ortopeda" does not fit one line in a
 *     39.8% column once the media side narrows toward 1024;
 *   • a body paragraph, which the list version had no equivalent of.
 * ------------------------------------------------------------------------- */
.eureko-orto-hours--note .eureko-orto-hours__title {
	white-space: normal;
	color: var(--eureko-text);
}
.eureko-orto-hours__note-text {
	margin: 0;
	font-size: var(--eureko-fs-sm);
	line-height: 1.6;
	color: var(--eureko-muted);
}
/* The note runs taller than the 2–5 day rows did, and the card is anchored to
   its BOTTOM, so it grows upward over the plate. Trim the padding below 1280 so
   it does not reach the doctor's face. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.eureko-orto-hours--note {
		padding: 1.5rem;
	}
}

/* ---------------------------------------------------------------------------
 * v1.9.340 — Fyzioterapie hero: the HOMEPAGE's two CTA buttons (point 19).
 *
 * The markup reuses `.eureko-hero__cta-item` / `__btn` / `__badge` verbatim, so
 * the buttons and their white tooltip badges need no styling of their own here.
 * What DOES need overriding is the wrapper: it still carries
 * `.eureko-orto-hero__buttons`, whose fyzio-scoped rules (main.css ~9038 and
 * ~13896) were written for two `.eureko-btn` pills sitting on one line.
 *
 * 🔴 SPECIFICITY: those rules are two classes deep
 * (`.eureko-fyzio-hero .eureko-orto-hero__buttons`), so a one-class selector
 * here would lose regardless of source order — hence the same two-class shape.
 * ------------------------------------------------------------------------- */
.eureko-fyzio-hero .eureko-fyzio-hero__ctas {
	align-items: flex-start;
	gap: 1.75rem;
}
/*
 * ≤1023 the ≥1024 sibling rule forces `flex-direction: row` on the wrapper.
 * Each `.eureko-hero__cta-item` is width:100% there (main.css ~1998, the same
 * rule the homepage uses), so left as a row the two would fight over one line.
 * Stack them, exactly as the homepage does at the same width.
 */
@media (max-width: 1023px) {
	.eureko-fyzio-hero .eureko-fyzio-hero__ctas {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ---------------------------------------------------------------------------
 * v1.9.341 — Rehabilitační lékař: cut-out portrait is DESKTOP-ONLY.
 *
 * Opt-in modifier set by `front_desktop_only` in ambulance.php — currently only
 * Rehabilitační lékař, whose plate is a frame of the same doctor (point 16).
 * At ≥1024 the cut-out sits low and small at the plate's lower-left, so it
 * reads as photo-behind-portrait. At ≤1023 the hero restacks and the cut-out
 * lands right beside her face in the frame, same green polo — two of her.
 *
 * ⚠️ This hides the CUT-OUT ONLY (`--front`), never the plate. Blanket
 * „hero photo display:none below 1024" is the bug that caught seven heroes on
 * this build; every mobile frame keeps its photo, and so does this one.
 * ⛔ Do not unscope: Ortopedická ambulance shares this layout and its cut-out is
 * the only picture of Fejgl on the page.
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.eureko-orto-hero__media--front-desktop-only .eureko-orto-hero__photo--front {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * v1.9.344 — Rehabilitační lékař ≤767: trim the gap under the note card.
 *
 * The hero's 48px bottom padding was clearance for the CUT-OUT, whose base
 * hangs below the note card. With the cut-out hidden here (see
 * `--front-desktop-only` above) that clearance reserves empty cream between the
 * white note card and the white insurer card — 80px of it on a phone.
 *
 * ⚠️ Trim the HERO's padding, never the band's: `.eureko-hero-band`'s
 * padding-bottom is what the floating insurer strip straddles (half the card's
 * height plus clearance), and the card's height changes with width as the logos
 * rewrap. Touching it moves the straddle; touching this does not.
 *
 * 🔴 Scoped with :has() to the hero that actually hides its cut-out. Ortopedická
 * ambulance shares `.eureko-orto-hero` and still shows Fejgl, so it keeps the
 * full 48px — unscoping this would cut into his portrait.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.eureko-orto-hero:has(.eureko-orto-hero__media--front-desktop-only) {
		padding-bottom: 0.5rem;
	}
}

/* ---------------------------------------------------------------------------
 * v1.9.345 — Ambulance hero note card below 1024: shadow + gap.
 *
 * SHADOW. The card inherits `drop-shadow(0 0 20px rgba(0,0,0,0.2))` from the
 * ≥1024 „Ordinační hodiny" card, where it FLOATS OVER A PHOTO and needs that
 * weight to lift off it. At ≤1023 the card drops into flow on cream, directly
 * above `.eureko-insurance-strip__card` — which is also white, also 20px blur,
 * but at **0.1**. Two identical cards, one twice as dark: it read as a mistake.
 * Same blur, same opacity, so they now stack as one family.
 *
 * GAP. The hero's bottom padding is clearance for the cut-out's base. With the
 * cut-out hidden (Rehabilitační lékař only, see `--front-desktop-only`) it is
 * dead space: the stack's own rhythm is 24px (plate → note), and 48px of hero
 * padding made the last gap 80. Zero here leaves 32 — the band's own clearance
 * under the straddling insurer card, which is NOT ours to remove.
 * ⚠️ Trim the HERO's padding, never the band's: the band's padding-bottom is
 * what the floating strip straddles, and the strip's height changes with width
 * as the logos rewrap.
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.eureko-orto-hours--note {
		filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));
	}
}
@media (max-width: 767px) {
	.eureko-orto-hero:has(.eureko-orto-hero__media--front-desktop-only) {
		padding-bottom: 0;
	}
}

/* ==========================================================================
   Kontakt features — single-card fallback (v1.9.347)

   The client removed three of the four cards (2026-08-24, point 26), leaving
   only „Bezbariérový přístup". The grid is otherwise a fixed 4-up / 2-up track,
   so the lone card would sit at a quarter width against three empty columns.

   Keyed on :has() over the item COUNT rather than on a modifier class, so the
   layout follows the data — if the client ever adds a card back, the normal
   track returns on its own with no template change.
   ========================================================================== */
@media (min-width: 768px) {
	.eureko-kontakt-features__grid:has(> .eureko-kontakt-features__item:only-child) {
		grid-template-columns: minmax(0, 32rem);
		justify-content: center;
	}
}

/* ==========================================================================
   Gallery — „Zobrazit více fotek" (v1.9.347)

   Tiles past the limit are collapsed by initGalleryMore(). `display: none`
   rather than the `hidden` attribute, because .eureko-gallery__card sets its
   own display and would win over `[hidden]`'s UA rule.
   ========================================================================== */
.eureko-gallery__card.is-hidden {
	display: none;
}
.eureko-gallery__more {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}
/* The global mobile rule stretches every .eureko-btn to full width; this one is
   a centred pill at every size, like the FAQ's own "show all" control. */
.eureko-gallery__more-btn {
	width: auto !important;
	display: inline-flex !important;
}


/* ==========================================================================
   Kontakt — „Bezbariérový přístup" note in the address column (v1.9.351)

   Sits under „Navigovat" with the address, not in a band of its own. ⛔ Two
   bigger shapes were tried and rejected: the original stranded 4-up tile, and a
   full-width note across the panel. Do not restore either.

   Spacing is deliberate: 2rem clears the „Navigovat" link (which carries its
   own underline offset), and the icon aligns to the title's cap height rather
   than centring against a two-line block.
   ========================================================================== */
.eureko-kontakt-hours__access {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	margin-top: 2rem;
	/* Above the brand mark clipped at the panel's right edge. */
	position: relative;
	z-index: 1;
}
.eureko-kontakt-hours__access-icon {
	flex: 0 0 auto;
	display: inline-flex;
	/* Nudged to sit on the title's baseline block, not the flex line's top. */
	margin-top: 0.125rem;
	/* Near-black, matching the title above it (user, 2026-08-24). The export's
	   own fill is WHITE — authored for the old green disc — so it cannot be
	   used as-is; black is the fallback the user asked for. */
	color: var(--eureko-text);
}
/* 🔴 The export's own <path> carries fill="white" — it was authored to sit
   INSIDE the green disc of the old feature tile. Used bare on the pale green
   panel it is all but invisible, so the path (not just the <svg>) has to be
   recoloured. ⚠️ Setting `fill` on the <svg> alone does nothing here: the
   path's presentation attribute wins over an inherited value. */
.eureko-kontakt-hours__access-glyph {
	width: 2.5rem;
	height: 2.5rem;
	fill: currentColor;
}
.eureko-kontakt-hours__access-glyph path {
	fill: currentColor;
}
.eureko-kontakt-hours__access-text {
	color: var(--eureko-muted);
	font-size: var(--eureko-fs-base);
	line-height: 1.55;
}
.eureko-kontakt-hours__access-title {
	display: block;
	margin-bottom: 0.125rem;
	color: var(--eureko-text);
	font-family: var(--eureko-font-heading);
	font-size: var(--eureko-fs-lg);
	font-weight: 700;
	line-height: 1.35;
}

/* ==========================================================================
   Kontakt — clearance under the straddling insurance card (v1.9.352)

   🔴 Deleting `kontakt-features` removed the section that used to absorb the
   floating strip's overhang. The strip is absolutely positioned and hangs HALF
   its card below the hero band (63px at ≥1024, ~76px at 768–1023), and the
   hours section's own 64px top padding was entirely eaten by it — measured gap
   between the white card and the green panel: **1px**.

   ⚠️ Scoped to Kontakt on purpose. Every other page with a floating strip still
   has its original next section, whose padding already clears the card; an
   unscoped rule would add a second gap to all of them.

   ≤767 is already handled by the `.eureko-hero-band:has(> …) + *` clearance
   further up this file, which targets the next sibling whatever it is — so it
   followed the deletion on its own.
   ========================================================================== */
@media (min-width: 768px) {
	.eureko-page-kontakt .eureko-kontakt-hours {
		padding-top: 8rem;
	}
}

/* ==========================================================================
   „Objednání rehabilitace" — client's four info blocks (v1.9.354)

   ONE component, two homes: the homepage banner above `needs-cards`, and the
   foot of the desktop mega menu. Copy comes from eureko_booking_info(); this is
   only the layout.

   🔴 Mobile-first, as the rest of the file: single column, then 2-up at 768,
   then the design's 4-up + photo at 1024. The photo is LAST in the source so it
   drops to the bottom on a phone rather than pushing the policy text down.
   ========================================================================== */
.eureko-bookinfo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding: 2rem;
	border: 1px solid var(--eureko-border);
	border-radius: var(--eureko-radius-l);
	background: #fff;
}
.eureko-bookinfo__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
}
.eureko-bookinfo__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	flex: 0 0 auto;
	border-radius: var(--eureko-radius-pill);
	background: rgba(99, 157, 33, 0.1);
	color: var(--eureko-primary);
}
.eureko-bookinfo__icon .material-symbols-outlined {
	font-size: 1.5rem;
}
.eureko-bookinfo__title {
	color: var(--eureko-primary);
	font-family: var(--eureko-font-heading);
	font-size: var(--eureko-fs-base);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}
/* Sits inside `__head` next to its icon, like the other two column titles —
   the head owns the bottom margin, so the heading drops its own. */
.eureko-bookinfo__head .eureko-bookinfo__subtitle {
	margin: 0;
}
.eureko-bookinfo__subtitle {
	margin: 0 0 1rem;
	color: var(--eureko-primary);
	font-family: var(--eureko-font-heading);
	font-size: var(--eureko-fs-base);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}
.eureko-bookinfo__text {
	margin: 0 0 1rem;
	color: var(--eureko-muted);
	font-size: var(--eureko-fs-sm);
	line-height: 1.65;
}
.eureko-bookinfo__text:last-child {
	margin-bottom: 0;
}
.eureko-bookinfo__text strong {
	color: var(--eureko-text);
}
.eureko-bookinfo__text a {
	color: var(--eureko-primary);
	text-decoration: underline;
}
.eureko-bookinfo__list {
	margin: 0;
	padding-left: 1.125rem;
	color: var(--eureko-muted);
	font-size: var(--eureko-fs-sm);
	line-height: 1.65;
}
.eureko-bookinfo__list li {
	margin-bottom: 0.625rem;
}
.eureko-bookinfo__list li::marker {
	color: var(--eureko-primary);
}
.eureko-bookinfo__hours-row + .eureko-bookinfo__hours-row {
	margin-top: 1.5rem;
}
.eureko-bookinfo__hours-label {
	margin: 0 0 0.5rem;
	color: var(--eureko-text);
	font-family: var(--eureko-font-heading);
	font-size: var(--eureko-fs-lg);
	font-weight: 700;
	line-height: 1.3;
}
.eureko-bookinfo__hours-value {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--eureko-primary);
	font-weight: 700;
	font-size: var(--eureko-fs-base);
}
.eureko-bookinfo__hours-icon {
	font-size: 1.125rem;
	color: var(--eureko-primary);
}
.eureko-bookinfo__col--photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 20rem;
	object-fit: cover;
	border-radius: var(--eureko-radius-m);
}

/* The section wrapper on the homepage. */
.eureko-bookinfo-section {
	padding-block: 3rem;
}

@media (min-width: 768px) {
	.eureko-bookinfo {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
		padding: 2.5rem;
	}
	.eureko-bookinfo-section {
		padding-block: 4rem;
	}
}

@media (min-width: 1024px) {
	/* The design's row: policy | hours | first visit | phone list | photo.
	   The first column is widest because it carries three paragraphs. */
	.eureko-bookinfo {
		grid-template-columns: 1.35fr 0.9fr 1fr 1fr;
		gap: 0 2.5rem;
		padding: 3rem;
	}
	/* Vertical rules between the columns, as the design draws them. Applied as
	   a left border on every column but the first, so the count follows the
	   markup — an optional photo column cannot leave a dangling rule. */
	.eureko-bookinfo__col + .eureko-bookinfo__col {
		padding-left: 2.5rem;
		border-left: 1px solid var(--eureko-border);
	}
	/* Any variant that carries the photo gets the fifth track — keyed on the
	   photo being PRESENT, not on the variant, so the menu and the banner can
	   never disagree about how many columns there are. */
	.eureko-bookinfo:has(.eureko-bookinfo__col--photo) {
		grid-template-columns: 1.35fr 0.9fr 1fr 1fr 0.9fr;
	}
	/* 🔴 The photo must NOT stretch to the row height (2026-08-25).
	   `height: 100%` + `max-height: none` made the image as tall as the row,
	   and the row is sized by the FIRST column (three paragraphs + the phone
	   list = 486px in the menu, 425px in the banner). A 195×486 box is aspect
	   0.40; `object-fit: cover` then scales the 3:2 source to 729×486 and shows
	   only ~27% of its width — a ~4× zoom on a wide room shot, which is what
	   reads as „stretched".

	   ⚠️ It was never a distortion — `object-fit: cover` was applied correctly
	   the whole time. ⛔ So do not "fix" this by touching object-fit; the box
	   aspect is the bug. Verified in Chrome at 1920: menu showed 27% of the
	   photo, banner 35%.

	   2:3 is the exact inverse of the source's 3:2, so the crop stays a
	   deliberate portrait rather than an accidental sliver — now ~45% of the
	   width in both variants. The client's own PDF draws this photo near-square
	   and his mock row is far shorter than ours, so full height was never the
	   intent.

	   ⚠️ TOP-aligned — the user's call (2026-08-25), overriding the centring
	   this shipped with an hour earlier. It lines the photo up with the three
	   column headings beside it, which centring broke. ⛔ Do not "re-centre" it
	   because of the slack that lands under it: that gap is expected, and the
	   headings winning is the point. */
	.eureko-bookinfo__col--photo {
		display: flex;
		align-items: flex-start;
	}
	.eureko-bookinfo__col--photo img {
		height: auto;
		aspect-ratio: 2 / 3;
		max-height: 100%;
	}
}

/* Inside the mega menu the card has no border of its own — the dropdown already
   supplies a panel, and a second frame reads as a box in a box. */
.eureko-bookinfo--menu {
	border: 0;
	padding: 0;
	background: transparent;
}

/* ==========================================================================
   Mega menu — Vnitřní řád / Informovaný souhlas (v1.9.356)

   The client's approved menu sets these two apart at the foot of the services
   column, below a rule, each with a small icon beside the label.

   ⚠️ The icons are Material Symbols, NOT the `menu-poukaz` / `menu-samoplatce`
   SVGs: those are 48px artwork with their own internal padding and rendered
   oversized and above the label here.
   ========================================================================== */
.eureko-mega__documents {
	margin: 1.5rem 0 0;
	padding: 1.5rem 0 0;
	list-style: none;
	border-top: 1px solid var(--eureko-border);
}
.eureko-mega__documents li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.eureko-mega__documents li + li {
	margin-top: 1rem;
}
.eureko-mega__doc-icon {
	flex: 0 0 auto;
	font-size: 1.375rem;
	color: var(--eureko-primary);
}

/* ==========================================================================
   Mega menu — Procedury columns after the approved rewrite (v1.9.358)

   🔴 The grid was `repeat(4, 1fr)`, sized for the four groups that existed
   before the client's approved menu dropped „Další služby" / „Regenerační
   oddělení". Three groups in four tracks is exactly the empty right-hand
   column — the track was still being reserved.

   The items also got longer: several now wrap to two lines („SM systém /
   Spirální stabilizace (metoda Dr. Smíška)"), and at line-height 1.2 with a
   vertically-centred bullet those read as crumbled. Both are fixed here.
   ========================================================================== */
@media (min-width: 1024px) {
	.eureko-mega__columns {
		/* 🔴 Tracks sized to their CONTENT, not equal thirds.
		 *
		 * With `repeat(3, 1fr)` the grid gaps were exactly equal (64px each) and
		 * the column still LOOKED wrong: the longest label is 190px in column 1
		 * but 327px in column 2, so inside equal 354px tracks the visible
		 * whitespace came out 208px vs 71px. Equal tracks do not mean equal gaps
		 * when the content lengths differ this much.
		 *
		 * max-content + space-between sizes each column to its own longest line
		 * (title or item, whichever is wider) and splits the leftover space
		 * evenly, so the two gutters match optically. `gap` is the FLOOR here,
		 * not the actual gap — space-between only ever adds to it.
		 */
		grid-template-columns: repeat(3, max-content);
		justify-content: space-between;
		gap: 2.5rem;
	}
	/* The three groups now have the full width the fourth track was holding, so
	   the services column can keep its own measure. */
	.eureko-mega__row--top {
		grid-template-columns: 16rem 1fr;
	}
}

/* Wrapped items need real leading and a bullet on the FIRST line, not centred
   against a two-line block. */
.eureko-mega__list {
	gap: 1.125rem;
}
.eureko-mega__list li {
	align-items: flex-start;
}
.eureko-mega__list li::before {
	/* Optical centring against the first line: (1.45em line-box − 8px) / 2. */
	margin-top: 0.3125rem;
}
.eureko-mega__list a,
.eureko-mega__list .eureko-mega__leaf {
	line-height: 1.45;
}
/* ⚠️ No wider-viewport gap override any more — space-between derives the
   gutters from whatever room is left, so a hardcoded larger gap at 1440 would
   just raise the floor and could force a wrap on a narrow laptop. */

/* ==========================================================================
   Mega menu — the four headings sit on ONE level (v1.9.361)

   🔴 The client's approved PDF puts „NABÍDKA SLUŽEB" and the three procedure
   titles on the same line, identically styled: green, uppercase, Catamaran
   ExtraBold, each with the short green rule beneath. There is NO „Procedury"
   group label above them — that came from the older design and has been
   removed from the markup.

   ⚠️ The group titles were dark sentence-case at 1.25rem, i.e. a LOWER level in
   the hierarchy. They are promoted here rather than in a new class, so the two
   selectors can never drift apart visually.
   ========================================================================== */
.eureko-mega__group-title {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.375;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	color: var(--eureko-primary);
}
/* The rule under „NABÍDKA SLUŽEB" too — the design gives all four the same
   underline, and only the group titles had one. */
.eureko-mega__eyebrow::after {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	background: #66b32e;
	margin-top: 1rem;
}
/* With the eyebrow now carrying its own rule, its old 2.6875rem gap would push
   the services list far below the procedure lists. Both sides use the same
   1rem step, so the first row of each column starts level. */
.eureko-mega__eyebrow {
	margin-bottom: 0;
}
.eureko-mega__services {
	margin-top: 1rem;
}

/* ==========================================================================
   Mega menu + booking info — layout corrections against the client's PDFs
   (v1.9.362)

   Diffed block by block against `EurekoFyzio_nabidka_sluzeb_final_korekce.pdf`.
   Five things we were not following:

     1. Every service in the left column sits on its own RULE.
     2. „Vnitřní řád" / „Informovaný souhlas" are larger, with outlined
        rounded-square icons, and the group is separated by a rule.
     3. Procedure bullets are GREEN, not grey-until-hover.
     4. The vertical rule beside the services column runs the FULL height of the
        dropdown, past the info row — not just the top block.
     5. „Provozní doba" has a rule between the two opening-hour blocks.
   ========================================================================== */

/* 1 — a rule under every service. */
.eureko-mega__services {
	gap: 0;
}
.eureko-mega__services li {
	padding-block: 1rem;
	border-bottom: 1px solid var(--eureko-border);
}
.eureko-mega__services li:first-child {
	padding-top: 0.5rem;
}

/* 2 — documents: bigger type, outlined icon tiles. */
.eureko-mega__documents {
	margin-top: 1.75rem;
	padding-top: 1.75rem;
}
.eureko-mega__documents li + li {
	margin-top: 1.25rem;
}
.eureko-mega__doc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.375rem;
	border: 1px solid var(--eureko-border);
	border-radius: var(--eureko-radius-s);
}
.eureko-mega__documents .eureko-mega__leaf,
.eureko-mega__documents a {
	font-family: var(--eureko-font-heading);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--eureko-text);
}

/* 3 — green bullets. ⚠️ The hover rule further up already sets the same green,
   so the dot no longer changes on hover; the LABEL colour still does. */
.eureko-mega__list li::before {
	background: var(--eureko-primary);
}

/* 5 — rule between „Rehabilitační provoz" and „Recepce". */
.eureko-bookinfo__hours-row + .eureko-bookinfo__hours-row {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--eureko-border);
}

/* The nested phone block (menu variant) — set apart from the paragraphs above
   it, the way the PDF spaces it. */
.eureko-bookinfo__phone-block {
	margin-top: 1.75rem;
}
.eureko-bookinfo--menu .eureko-bookinfo__phone-block .eureko-bookinfo__list {
	font-size: 0.8125rem;
}

@media (min-width: 1024px) {
	/* 4 — one rule down the whole dropdown. The services column and the info
	   row are separate grid rows, so the border cannot live on either; it is
	   drawn on the shared inner wrapper instead, positioned at the services
	   column's right edge (16rem track + 2.5rem gutter). */
	.eureko-mega__procedury {
		border-left: 0;
	}
	.eureko-mega__inner {
		position: relative;
	}
	.eureko-mega__inner::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		/* ⚠️ 19rem, not 16rem. An absolutely positioned pseudo-element is placed
		   against the PADDING box, and `.eureko-container` carries 3rem of inline
		   padding from 768 up — at a bare 16rem the rule fell 48px short and cut
		   straight through the services column. 3rem + the 16rem track. */
		left: 19rem;
		width: 1px;
		background: var(--eureko-border);
	}

	/*
	 * 🔴 FOUR columns, no photo (Dan, point 49, 2026-08-26 — „nižší a
	 * kompaktnější … informace vedle sebe … lépe využila šířka prostoru").
	 * The old three-columns-plus-photo layout is what made this row tall: the
	 * photo ate ~25% of the width, so the remaining three columns were narrow
	 * and every paragraph ran long.
	 * ⚠️ Column 1 stays widest — it carries three paragraphs. Column 3 is wider
	 * than 2 because „PŘED PRVNÍ NÁVŠTĚVOU" is the longest heading and wraps to
	 * three lines at equal widths, which his graphic does not.
	 * ⛔ Do not re-add a photo track here.
	 */
	.eureko-bookinfo--menu {
		grid-template-columns: 1.25fr 0.85fr 1.05fr 0.95fr;
		gap: 0 2rem;
	}
	.eureko-bookinfo--menu .eureko-bookinfo__col + .eureko-bookinfo__col {
		padding-left: 2rem;
	}
	/* The info row starts at the procedury column, clearing the full-height
	   rule rather than crossing it. */
	.eureko-bookinfo--menu {
		margin-left: 18.5rem;
	}
	.eureko-mega__divider {
		margin-left: 18.5rem;
	}
}

/* The menu variant runs at a smaller text size than the homepage banner — the
   dropdown has the services column beside it and the client's PDF sets this
   copy noticeably smaller there. Without it the panel overflowed by ~350px. */
.eureko-bookinfo--menu .eureko-bookinfo__text,
.eureko-bookinfo--menu .eureko-bookinfo__list {
	font-size: 0.8125rem;
	line-height: 1.55;
}
.eureko-bookinfo--menu .eureko-bookinfo__icon {
	width: 2.5rem;
	height: 2.5rem;
}
.eureko-bookinfo--menu .eureko-bookinfo__icon .material-symbols-outlined {
	font-size: 1.25rem;
}
.eureko-bookinfo--menu .eureko-bookinfo__hours-label {
	font-size: 1rem;
}
.eureko-bookinfo--menu .eureko-bookinfo__head {
	margin-bottom: 0.75rem;
}

/* ==========================================================================
   Mega menu — two independent columns for the whole dropdown (v1.9.366)

   🔴 The divider and the info row used to be siblings of the top row, so they
   waited for the TALLEST column. The documents block makes the services column
   the tallest (509px vs the procedure columns' 384px), which parked the rule
   165px below where the procedure lists ended. The client's PDF shows the
   opposite: the rule follows the procedure columns and the services column
   simply carries on past it.

   The inner wrapper is now the grid, so `.eureko-mega__main` flows on its own.
   That also lets the services column carry the full-height rule as a plain
   `border-right` — the absolutely-positioned `::before` (and its 19rem padding
   -box correction) is no longer needed, and neither are the margin-left offsets
   that were pushing the divider and the info row clear of it.
   ========================================================================== */
@media (min-width: 1024px) {
	.eureko-mega__inner {
		display: grid;
		grid-template-columns: 16rem 1fr;
		align-items: start;
	}
	.eureko-mega__services-col {
		/* Stretch to the taller of the two columns so the rule always reaches
		   the bottom of the dropdown, whichever side is longer. */
		align-self: stretch;
		border-right: 1px solid var(--eureko-border);
	}
	.eureko-mega__main {
		padding-left: 2.5rem;
	}

	/* Superseded by the border-right above. */
	.eureko-mega__inner::before {
		content: none;
	}
	/* These offsets existed only to clear the old absolute rule. */
	.eureko-bookinfo--menu,
	.eureko-mega__divider {
		margin-left: 0;
	}
}

/* The last service already has the documents block's own rule beneath it —
   keeping its border-bottom drew TWO lines 28px apart under „Dárkové poukazy". */
.eureko-mega__services li:last-child {
	border-bottom: 0;
}

/* The rule above the documents block must sit the same distance below „Dárkové
   poukazy" as every other rule does below its own item. It did not: the last
   item's 16px bottom padding stacked with the block's 28px top margin, so the
   measured text-to-rule distance was 41px against 14px everywhere else.
   The item keeps its padding (it is what makes every row the same height); the
   block's own top margin is what goes. (v1.9.367) */
.eureko-mega__documents {
	margin-top: 0;
}

/* ==========================================================================
   „Zeptejte se…" card — phone and e-mail share ONE row (v1.9.368)

   The design puts them side by side; ours wrapped. Measured cause: the two
   blocks came to 186px + 206px and the 2.5rem gap made 432px inside a 416px
   card body — 16px short.

   ⚠️ Why ours is wider than the design's: the client's own 2026-08-17 rule
   makes every number carry +420, so we print „+420 603 396 250" where the
   design mock-up shows „606 396 250". The prefix is not negotiable, so the
   space has to come from the layout.

   Two columns rather than a flex row that can wrap: `minmax(0, auto)` lets the
   e-mail define its own column and the phone take the rest, and it can never
   silently break to two lines again as the copy changes.
   ========================================================================== */
@media (min-width: 768px) {
	.eureko-contact-cta__contacts {
		display: grid;
		grid-template-columns: minmax(0, auto) minmax(0, auto);
		align-items: start;
		column-gap: 1.5rem;
	}
	/* 22px did not leave room once the phone gained its +420. The label stays
	   at 16px, so the pairing still reads as label-over-value. */
	.eureko-contact-cta__contact-value {
		font-size: 1.25rem;
	}
}

/* ==========================================================================
   Header — „Telefonicky vyřizujeme" hover bubble on the phone number
   (client, 2026-08-25, point 35)

   „Prosím zkuste podobně jako u kategorie O nás vytvořit u telefonního čísla
   rozbalovací bublinu, která se zobrazí po najetí kurzorem myši … přidal bych
   malou šipku … jednoduchý rámeček se zaoblenými rohy. Bublina může klidně
   částečně překrývat fotografii budovy."

   🔴 Deliberately CSS-only — `:hover` / `:focus-within` on the block. The mega
   menu's hover handling is JS and had to be fixed once already (point 33,
   „menu se už neotevírá, když přes něj kurzor jen přejede"); a tooltip does not
   need to join that machinery.

   🔴 The gap between the number and the card is `padding-top` ON THE TIP, not a
   margin or an offset. The tip therefore touches the block, so the pointer never
   crosses dead space on its way down and `:hover` cannot flicker off. ⛔ Do not
   convert it to `top: calc(100% + …)` — that reintroduces the gap.

   ⚠️ The bubble overlaps the hero photo on purpose — his mock-up shows exactly
   that. It needs a z-index above the hero, not `overflow` clipping on the header.

   ⚠️ Scoped to ≥1500 for one reason only: `.eureko-header__phone-block` itself
   does not exist below that width (three-stage header, ~l.680). Nothing here
   applies at tablet or mobile, where the number is a plain tel: icon.
   ========================================================================== */
@media (min-width: 1500px) {

	.eureko-header__phone-block {
		position: relative;
	}

	/* The „malá šipka" he asked for — the affordance that says there is more
	   here. It flips on open, like the nav's own chevrons. */
	.eureko-header__phone-caret {
		font-size: 1.125rem;
		line-height: 1;
		margin-left: 0.125rem;
		color: var(--eureko-muted);
		transition: transform 0.18s ease, color 0.18s ease;
	}
	.eureko-header__phone-block:hover .eureko-header__phone-caret,
	.eureko-header__phone-block:focus-within .eureko-header__phone-caret {
		transform: rotate(180deg);
		color: var(--eureko-primary);
	}

	.eureko-header__phone-tip {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		/* Both the visual gap AND the hover bridge. See the note above. */
		padding-top: 0.75rem;
		width: 32rem;
		max-width: min(32rem, 90vw);
		z-index: 60;

		opacity: 0;
		visibility: hidden;
		translate: 0 -0.375rem;
		transition: opacity 0.18s ease, translate 0.18s ease, visibility 0s linear 0.18s;
	}
	.eureko-header__phone-block:hover .eureko-header__phone-tip,
	.eureko-header__phone-block:focus-within .eureko-header__phone-tip {
		opacity: 1;
		visibility: visible;
		translate: 0 0;
		transition: opacity 0.18s ease, translate 0.18s ease, visibility 0s;
	}

	/* „jednoduchý rámeček se zaoblenými rohy" — 24px, the `l` radius. ⚠️ There
	   is no `--eureko-radius-lg`; an undefined token here would just render a
	   square box with no error. */
	.eureko-header__phone-tip-card {
		position: relative;
		background: var(--eureko-white);
		border: 1px solid var(--eureko-border);
		border-radius: var(--eureko-radius-l);
		box-shadow: 0 1.25rem 2.5rem rgba(61, 72, 86, 0.12);
		padding: 1.75rem 2rem;
	}

	/* The pointer. Two stacked squares rather than one border triangle, so the
	   1px border carries up over the tip and the white fill hides the seam. */
	.eureko-header__phone-tip-card::before,
	.eureko-header__phone-tip-card::after {
		content: '';
		position: absolute;
		left: 50%;
		width: 0.875rem;
		height: 0.875rem;
		rotate: 45deg;
		border-radius: 0.1875rem;
	}
	.eureko-header__phone-tip-card::before {
		top: -0.5rem;
		translate: -50% 0;
		background: var(--eureko-border);
	}
	.eureko-header__phone-tip-card::after {
		top: calc(-0.5rem + 1px);
		translate: -50% 0;
		background: var(--eureko-white);
	}

	.eureko-header__phone-tip-title {
		margin: 0 0 0.875rem;
		font-family: var(--eureko-font-heading);
		font-weight: 700;
		font-size: 1.125rem;
		line-height: 1.3;
		color: var(--eureko-primary);
	}

	.eureko-header__phone-tip-list {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
	}
	.eureko-header__phone-tip-list li {
		position: relative;
		padding-left: 1.5rem;
		font-family: var(--eureko-font-body);
		font-size: 1rem;
		line-height: 1.45;
		color: var(--eureko-text);
	}
	/* Green disc bullets, matching „Telefonicky vyřizujeme" in the mega menu. */
	.eureko-header__phone-tip-list li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0.5rem;
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		background: var(--eureko-primary);
	}

	/* Respect the user's motion setting — the bubble still appears, it just
	   does not slide. */
	@media (prefers-reduced-motion: reduce) {
		.eureko-header__phone-tip,
		.eureko-header__phone-caret {
			transition-duration: 0s;
		}
		.eureko-header__phone-tip {
			translate: 0 0;
		}
	}
}

/* ==========================================================================
   Informovaný souhlas — download row
   Appended at EOF per the house rule. The page is otherwise built entirely
   from `inner-hero` + `content-blocks`, so this is the only bespoke block.
   ========================================================================== */
/*
 * Cream, and flush against the cream panel above it, so the closing note and
 * its download button read as ONE block. White here split them into two bands
 * with a visible seam and the button looked orphaned (user, 2026-08-26).
 */
.eureko-souhlas-download {
	padding-block: 1.5rem 4rem;
	background: var(--eureko-cream);
}
.eureko-souhlas-download__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
}
.eureko-souhlas-download__link {
	color: var(--eureko-primary);
	font-weight: 600;
}
.eureko-souhlas-download__note {
	margin: 0;
	margin-inline-start: auto;
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-muted);
}
/* The global mobile rule forces `.eureko-btn` to full width; the version stamp
   then needs its own line rather than being pushed to a zero-width auto margin. */
@media (max-width: 767px) {
	.eureko-souhlas-download__note {
		margin-inline-start: 0;
	}
}

/* --------------------------------------------------------------------------
   Informovaný souhlas — page scoping
   🔴 Only the HERO is cream (user, 2026-08-26: „you didn't keep the hero beige
   but the whole half block"). `.eureko-content-blocks` has NO background of its
   own, and `body` carries the cream `--eureko-bg`, so every section below the
   hero inherited cream and the whole page came out as one flat beige field with
   no band at all. Painting the content sections white restores the contrast the
   hero band is supposed to have.
   ⚠️ Applied to BOTH legal pages — Vnitřní řád had the identical flat-beige
   problem from the identical cause (user, 2026-08-26). They are the only two
   pages built purely from `content-blocks`, which is why only they show it.
   -------------------------------------------------------------------------- */
.eureko-page-informovany-souhlas .eureko-content-blocks,
.eureko-page-vnitrni-rad .eureko-content-blocks {
	background: var(--eureko-white);
}
.eureko-page-informovany-souhlas .eureko-content-blocks--cream,
.eureko-page-vnitrni-rad .eureko-content-blocks--cream {
	background: var(--eureko-cream);
}
/*
 * The closing cream panel is a standalone note, not an intro to a grid below
 * it, so the 60ch measure + 2.5rem trailing margin left a short wrapped
 * paragraph stranded in a tall beige band. Widen the measure and drop the
 * margin — the panel's own padding is the spacing.
 */
.eureko-page-informovany-souhlas .eureko-content-blocks--cream .eureko-content-blocks__intro,
.eureko-page-vnitrni-rad .eureko-content-blocks--cream .eureko-content-blocks__intro {
	max-width: 80ch;
	margin-bottom: 0;
}

/* The tick-box row — the two companies the paper form chooses between. */
.eureko-souhlas-scope {
	padding-block: 3rem 0;
	background: var(--eureko-white);
}
.eureko-souhlas-scope__lead {
	margin: 0 0 1.25rem;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--eureko-text);
}
.eureko-souhlas-scope__options {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}
.eureko-souhlas-scope__option {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}
/* An empty square, drawn — not the ☐ character, which rendered at body-text
   size and read as an artefact. `flex-shrink: 0` or the label squashes it. */
.eureko-souhlas-scope__box {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	border: 2px solid var(--eureko-primary);
	border-radius: 4px;
	background: var(--eureko-white);
}
.eureko-souhlas-scope__label {
	font-family: var(--eureko-font-heading);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--eureko-text);
}
.eureko-souhlas-scope__note {
	margin: 0;
	font-size: var(--eureko-fs-sm);
	color: var(--eureko-muted);
}

/* Tick-boxes — real inputs, styled (user, 2026-08-26). `appearance: none` then
   draw the box ourselves, so the tick is ours and not the OS default blue.
   ⚠️ `.eureko-souhlas-scope__label` is now a <label>, so it needs `cursor` and
   must stay clickable — the earlier <span> version is gone. */
.eureko-souhlas-scope__input {
	appearance: none;
	-webkit-appearance: none;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	margin: 0;
	border: 2px solid var(--eureko-primary);
	border-radius: 4px;
	background: var(--eureko-white);
	cursor: pointer;
	display: grid;
	place-content: center;
	transition: background-color 0.15s ease;
}
.eureko-souhlas-scope__input::before {
	content: '';
	width: 0.6rem;
	height: 0.35rem;
	border-left: 2px solid var(--eureko-white);
	border-bottom: 2px solid var(--eureko-white);
	transform: rotate(-45deg) translateY(-1px);
	opacity: 0;
}
.eureko-souhlas-scope__input:checked {
	background: var(--eureko-primary);
}
.eureko-souhlas-scope__input:checked::before {
	opacity: 1;
}
.eureko-souhlas-scope__input:focus-visible {
	outline: 2px solid var(--eureko-primary);
	outline-offset: 2px;
}
.eureko-souhlas-scope__option label.eureko-souhlas-scope__label {
	cursor: pointer;
}

/*
 * Legal pages — close the gap between stacked `content-blocks` (user, 2026-08-26).
 * Both pages render the intro and the numbered sections as SEPARATE
 * `content-blocks` calls, so the space between them was three values stacked:
 * the intro section's 3rem padding-bottom + the intro's own 2.5rem
 * margin-bottom (which exists to separate it from a grid that isn't there) +
 * the next section's 3rem padding-top — ~8.5rem of empty page.
 * ⚠️ The cream closing panel is EXCLUDED: it is a coloured band and needs its
 * own top padding, or the text sits on the band's edge.
 */
.eureko-page-informovany-souhlas .eureko-content-blocks__intro:last-child,
.eureko-page-vnitrni-rad .eureko-content-blocks__intro:last-child {
	margin-bottom: 0;
}
.eureko-page-informovany-souhlas .eureko-content-blocks + .eureko-content-blocks:not(.eureko-content-blocks--cream),
.eureko-page-vnitrni-rad .eureko-content-blocks + .eureko-content-blocks:not(.eureko-content-blocks--cream) {
	padding-top: 0;
}

/* --------------------------------------------------------------------------
   Mám poukaz — the client's FT-poukaz explainer graphic (Dan, 2026-08-26)
   ⚠️ The asset is A4 PORTRAIT. Capped at 820px and centred: at full container
   width it would run past two screens tall and dwarf every section around it.
   -------------------------------------------------------------------------- */
.eureko-poukaz-graphic {
	padding-block: 3rem;
	background: var(--eureko-white);
}
.eureko-poukaz-graphic__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--eureko-text);
	text-align: center;
}
.eureko-poukaz-graphic__lead {
	max-width: 60ch;
	margin: 0 auto 2rem;
	color: var(--eureko-muted);
	line-height: 1.65;
	text-align: center;
}
.eureko-poukaz-graphic__figure {
	margin: 0 auto;
	max-width: 820px;
	border: 1px solid var(--eureko-border);
	border-radius: var(--eureko-radius-l);
	overflow: hidden;
	background: var(--eureko-white);
}
.eureko-poukaz-graphic__figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* Pro samoplátce — the „Kdy může být péče samoplátce vhodná?" bullets
   (client copy, 2026-08-26). `.eureko-orto-info` had no list style of its own;
   without this the four items rendered as an unstyled browser-default <ul>. */
.eureko-orto-info__list {
	margin: 0.75rem 0 1rem;
	padding-left: 1.25rem;
	list-style: none;
}
.eureko-orto-info__list li {
	position: relative;
	margin-bottom: 0.5rem;
	color: var(--eureko-muted);
	line-height: 1.65;
}
.eureko-orto-info__list li::before {
	content: '';
	position: absolute;
	left: -1.25rem;
	top: 0.65em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--eureko-primary);
}

/* `content-blocks` outro — the closing paragraph below the sub-blocks
   (added 2026-08-26 for the client's Fyzioterapie copy). Mirrors __intro's
   measure so the section reads as one column of prose top and bottom. */
.eureko-content-blocks__outro {
	max-width: 60ch;
	margin-top: 2rem;
}
.eureko-content-blocks__outro p {
	color: var(--eureko-muted);
	line-height: 1.65;
	margin: 0 0 1rem;
}
.eureko-content-blocks__outro p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Mega menu info row — compact pass (Dan, point 49, 2026-08-26)
   „aby byla celkově nižší a kompaktnější". The row is now four columns with no
   photo; this trims the vertical rhythm so the dropdown stops running so tall.
   ⚠️ MENU VARIANT ONLY — the homepage banner keeps its roomier spacing and its
   reception photo. Do not unscope these.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.eureko-bookinfo--menu .eureko-bookinfo__head {
		margin-bottom: 0.75rem;
	}
	.eureko-bookinfo--menu .eureko-bookinfo__text {
		margin-bottom: 0.6rem;
	}
	.eureko-bookinfo--menu .eureko-bookinfo__text:last-child {
		margin-bottom: 0;
	}
	.eureko-bookinfo--menu .eureko-bookinfo__list li {
		margin-bottom: 0.4rem;
	}
	.eureko-bookinfo--menu .eureko-bookinfo__hours-row {
		margin-bottom: 0.75rem;
	}
	.eureko-bookinfo--menu .eureko-bookinfo__hours-row:last-child {
		margin-bottom: 0;
	}
	/* The phone block is a top-level column now, so it must not keep the inset
	   it carried while nested inside „Objednání rehabilitace". */
	.eureko-bookinfo--menu .eureko-bookinfo__phone-block {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
}

/* ═════════════════════════════════════════════════════════════════════════════
   v1.9.395 — POINT 50 (client, 2026-08-26) + two mobile defects he reported
   with it.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. „Telefonicky vyřizujeme" on touch / narrow screens.

   „V responzivním designu … na telefonu a notebooku se mi nezobrazuje
   informační bublina … aby řešení fungovalo přirozeně i tam, kde není možné
   použít klasické najetí kurzorem."

   🔴 The hover bubble (`.eureko-header__phone-tip`) is a >=1500px affordance BY
   CONSTRUCTION — `.eureko-header__phone-block` does not exist below that width.
   ⛔ Do not try to make the bubble itself responsive; it is anchored to a block
   that is not in the DOM's layout below 1500. This panel is the small-screen
   answer instead, and it is a TAP target, not a hover one.

   It is absolutely positioned against `.eureko-header`, which is
   `position: sticky` and therefore a containing block — the same anchoring the
   mega menu already uses. It rides above the hero on purpose.
   ───────────────────────────────────────────────────────────────────────────── */
.eureko-phone-panel {
	position: absolute;
	top: 100%;
	right: 1rem;
	left: 1rem;
	z-index: 95;
	display: flex;
	justify-content: flex-end;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}
.eureko-phone-panel.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.eureko-phone-panel__card {
	position: relative;
	width: 100%;
	max-width: 22rem;
	background: var(--eureko-white);
	border: 1px solid var(--eureko-border);
	border-radius: var(--eureko-radius-l);
	box-shadow: var(--eureko-shadow-md);
	padding: 1.25rem 1.25rem 1.25rem;
	margin-top: 0.5rem;
}
.eureko-phone-panel__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--eureko-muted);
	cursor: pointer;
	border-radius: 50%;
	padding: 0;
}
.eureko-phone-panel__close:hover,
.eureko-phone-panel__close:focus-visible {
	background: var(--eureko-cream);
	color: var(--eureko-text);
}
.eureko-phone-panel__close .material-symbols-outlined {
	font-size: 1.25rem;
}
.eureko-phone-panel__title {
	margin: 0 0 0.75rem;
	padding-right: 2rem;
	font-family: var(--eureko-font-heading);
	font-size: 1rem;
	font-weight: 600;
	color: var(--eureko-text);
}
/* Same green dot bullets as the desktop bubble, so the two read as one thing. */
.eureko-phone-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.eureko-phone-panel__list li {
	position: relative;
	padding-left: 1.125rem;
	font-family: var(--eureko-font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--eureko-muted);
}
.eureko-phone-panel__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--eureko-primary);
}
/* The call action the pictogram used to perform on its own — one tap away, and
   now the visually dominant control in the panel. */
.eureko-phone-panel__call {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding: 0.875rem 1rem;
	border-radius: var(--eureko-radius-pill);
	background: var(--eureko-primary);
	color: var(--eureko-white);
	font-family: var(--eureko-font-heading);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 0.02em;
}
.eureko-phone-panel__call:hover,
.eureko-phone-panel__call:focus-visible {
	background: var(--eureko-primary-hover);
	color: var(--eureko-white);
}
.eureko-phone-panel__call .material-symbols-outlined {
	font-size: 1.25rem;
}
.eureko-phone-panel__hours {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin: 0.75rem 0 0;
	font-family: var(--eureko-font-body);
	font-size: 0.8125rem;
	color: var(--eureko-muted);
}
.eureko-phone-panel__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--eureko-primary);
	flex-shrink: 0;
}

/* ⛔ Never on the wide desktop header — the hover bubble owns that range, and
   the pictogram this panel belongs to is not rendered there either. */
@media (min-width: 1500px) {
	.eureko-phone-panel {
		display: none;
	}
}

/* The two pictograms are <button> now, not <a>. Reset the chrome a button
   brings so they render exactly as the links did. */
.eureko-header__phone-compact,
.eureko-header__mobile-btn {
	border: 0;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. „prosím text v tlačítku Náš Tým v telefonu zarovnejte do středu"
      — the „Náš Tým" label sat left of centre on the phone.

   🔴 The `data-ghost` trick sizes this button to „Pro samoplátce" by rendering
   an invisible copy of that label from `::after` and STACKING it on the real
   one — which only works because the button is `display: inline-grid` with both
   children in cell 1/1. Below 1024 a global `!important` rule forces
   `.eureko-hero__btn` to `display: flex`, so the stack collapses into a ROW:
   the ghost becomes a second flex item and shoves the visible label left. It is
   invisible and zero-height, so nothing showed up to explain the offset.

   The ghost has no job below 1024 anyway — the same global rule already gives
   the button `width: 100%`. Dropping its content there is the fix; ⛔ do not
   "fix" it by re-centring the label, which would just fight the ghost.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.eureko-hero__cta-item--team .eureko-hero__btn::after {
		content: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. „nevidím kompletní text a je to napříč webem" — usp-about ran 624px wide
      inside a 342px column on the phone, so every line was sliced.

   🔴 CAUSE: `.eureko-usp__cta-btn` is `white-space: nowrap` with
   `letter-spacing: 2px`. Its MIN-CONTENT is therefore the whole label on one
   unbreakable line — 624px. `.eureko-usp__inner` is `grid-template-columns: 1fr`,
   and a `1fr` track is `minmax(auto, 1fr)`: its floor is the item's min-content,
   so the button forced the track to 624px and dragged the heading, the four
   features and their descriptions out with it. `.eureko-usp { overflow: hidden }`
   then clipped the result silently — nothing scrolled, the text was simply gone.

   ⚠️ This is why he saw it „across the whole site": `usp-about` renders on ~14
   pages. It only surfaced now because the descriptions were switched on for
   mobile in v1.9.370 — before that the row was short enough to hide the clip.

   Two changes, both needed: floor the track at 0 so a long child can never set
   the column's width, and let the mobile CTA wrap (its own `text-align: center`
   and `line-height: 1.55` already assume more than one line).
   ⛔ Do not remove the nowrap on the DESKTOP button — it is `width: fit-content`
   there and wrapping would deform the pill.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.eureko-usp__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.eureko-usp__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}
@media (max-width: 1023px) {
	.eureko-usp__cta-btn--mobile {
		white-space: normal;
	}
	.eureko-usp__features,
	.eureko-usp__left,
	.eureko-usp-feature,
	.eureko-usp-feature__body {
		min-width: 0;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   v1.9.397 — usp-about mobile tidy-up (user, 2026-08-26).

   „points alignment looks weird" — with the rows centred, every row started at a
   different left edge because each one's text is a different length, so the four
   icons and the four titles were each on their own ragged line. Left-align the
   whole row instead: one icon column, one text column, four straight edges.

   ⚠️ ≤767 ONLY. Tablet and desktop are untouched.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.eureko-usp-feature {
		justify-content: flex-start;
		align-items: flex-start;
	}
	.eureko-usp-feature__body {
		text-align: left;
	}
	/* The icon is 40px tall and the title 18px — centre the glyph on the title
	   rather than on the icon box's own top edge. */
	.eureko-usp-feature__icon {
		margin-top: -0.3125rem;
	}
	/* „increase the space below the button" — it sat straight on top of the next
	   band. The section's own padding-block is `4rem 0`, so the gap has to come
	   from here. */
	.eureko-usp__cta-btn--mobile {
		margin-bottom: 3rem;
	}
}

/* ⚠️ `.eureko-usp-feature__desc` carries its OWN `text-align: center` (from the
   v1.9.370 block that switched the descriptions on for mobile). A direct rule
   always beats text-align inherited from `__body`, so the paragraphs stayed
   centred while their titles went left. Override the element itself. */
@media (max-width: 767px) {
	.eureko-usp-feature__desc {
		text-align: left;
	}
}

/* ==========================================================================
   Vybavení DETAIL (/vybaveni/<slug>/) — cream hero only, white below
   --------------------------------------------------------------------------
   1. Only the HERO is cream. `body` carries the cream `--eureko-bg`, and
      `.eureko-metoda-about` / `-benefits` / `-related` are all transparent, so
      the page rendered as one flat beige field with no visible hero band.
      (`cenik-faq` and `cenik-reviews` were already white — hence the one white
      band further down.) Mirrors the Tělocvična rule further up this file.
   2. The hero was the only cream hero on the site with NO decor. It draws
      `hero-shapes.php` now, which needs a positioned, clipped band — this beats
      the earlier one-class `.eureko-metoda-hero { overflow: visible }` on class
      count, and nothing overhangs this hero to need visible overflow.
   ========================================================================== */
.eureko-vybaveni-single .eureko-metoda-hero {
	position: relative;
	overflow: hidden;
}
.eureko-vybaveni-single .eureko-metoda-hero__inner {
	position: relative;
	z-index: 1;
}

/*
 * 🔴 The shared `.eureko-hero__shape--*` sizes are authored for the HOMEPAGE
 * hero and DO NOT TRANSFER to a short band. They set the position in % of the
 * band but the SIZE in % of the VIEWPORT, so the shorter the hero, the bigger
 * the mark reads — and the further past the bottom edge it runs.
 *
 * Measured at 1600px: homepage band 804px tall — circle 260px (32% of the
 * band), curve 764→966 (starts at 77%, ends 2% past the bottom, and the
 * homepage hero is `overflow: visible` so that sliver is never cut).
 * This band is 520px: the same rules gave a 262px circle (50% of the band,
 * near enough to touch both edges) and put the curve at 400→604 — 116% of the
 * band — so `overflow: hidden` sliced it flat across its widest point. That
 * hard horizontal edge under a half-band disc is the blob.
 *
 * Fix: size both shapes off the band's HEIGHT using the homepage's own ratios,
 * so the mark keeps the same footprint inside the band at ANY hero height.
 * ⛔ Do not "fix" this by editing the shared rules — the homepage depends on
 * them, and the asset itself is correct.
 */
@media (min-width: 1024px) {
	/*
	 * ⚠️ BOTH Vybavení pages, listing and detail. The listing's band is 589px:
	 * circle 36.7% of it (vs the homepage's 32.3%) and curve 77% → 105.6%, so it
	 * was clipped too — less brutally than the 520px detail band, but the same
	 * bug. `.eureko-page-vybaveni` is on <main>, not <body>.
	 * These are the only two pages besides the homepage that render
	 * hero-shapes.php: Ceník carries the decor scoping but draws no partial, and
	 * Tělocvična draws its own equivalent at identical coordinates.
	 */
	.eureko-page-vybaveni .eureko-hero__shape--circle,
	.eureko-vybaveni-single .eureko-hero__shape--circle {
		height: 32.3%;
		width: auto;
		max-width: none;
		top: 43%;
		left: 35.6%;
	}
	.eureko-page-vybaveni .eureko-hero__shape--curve,
	.eureko-vybaveni-single .eureko-hero__shape--curve {
		height: 25%;
		width: auto;
		max-width: none;
		top: 77%;
		left: 6.4%;
	}
}

.eureko-vybaveni-single .eureko-metoda-about,
.eureko-vybaveni-single .eureko-metoda-benefits,
.eureko-vybaveni-single .eureko-metoda-related {
	background: var(--eureko-white);
}
/*
 * Benefits carried the cream fill + 20px radius on the full-bleed <section>.
 * Invisible on a cream page; on white it became a beige band rounding off the
 * viewport edges. It is a plain section like every other one on this page now —
 * same container, same width, so "Hlavní přínosy" lines up with "Co je …".
 */
.eureko-vybaveni-single .eureko-metoda-benefits {
	border-radius: 0;
	padding: 0 0 3rem;
}

/* ==========================================================================
   Ambulance — doctor's CV moved above „Vystavení poukazu" (client point 59)
   --------------------------------------------------------------------------
   `content-blocks.php` is a FULL-WIDTH section that carries its own
   `.eureko-container` (max-width 1584px + 48px inline padding). Rendered in its
   new home it sits INSIDE `.eureko-orto-main` — itself already inside a
   container — so that padding would indent the doctor's block 48px further than
   the „S čím vám mohu pomoci" and „Vystavení poukazu" sections it now sits
   between, and its own 3rem block padding would fight the column's 40px gap.
   Both are neutralised here; the block keeps its card/cream variants.
   ⛔ Scope stays on `.eureko-orto-main` — the same partial still renders
   full-width at the foot of the page for the other long-copy blocks.
   ========================================================================== */
.eureko-orto-main .eureko-content-blocks {
	padding-block: 0;
}
.eureko-orto-main .eureko-content-blocks > .eureko-container {
	max-width: none;
	padding-inline: 0;
	width: 100%;
}
/* The column's own 40px gap owns the rhythm; stacked CV blocks space themselves. */
.eureko-orto-main__blocks {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

/* ==========================================================================
   Fyzioterapie — „Individuální fyzioterapeutické metody a terapie": 5 → 3
   --------------------------------------------------------------------------
   🔴 CLIENT, point 63, 2026-08-28. He now has three categories, not five, and
   proposed the shape himself: keep ONE existing box for „Fyzikální terapie" and
   give „Fyzioterapeutické metody" and „Léčebné techniky" a LARGER box each,
   replacing the four small ones.

   The two wide boxes hold 14 and 13 items against the narrow box's 9, so each
   runs its list in two sub-columns — 7 rows apiece, which lands all three boxes
   at roughly the same height instead of two towers beside a stub.

   ⚠️ ≥1024 only. Below that the section is the ACCORDION (one column, cards
   collapse) and must stay untouched — `initMethodsAccordion()` is keyed to 1023
   and the base rule is already `grid-template-columns: 1fr`.
   ⚠️ Overrides `repeat(5, 1fr)` further up the file; appended here per the
   house rule, so it wins on source order at equal specificity.
   ========================================================================== */
@media (min-width: 1024px) {
	.eureko-sluzba-methods__columns {
		grid-template-columns: 1fr 1.75fr 1.75fr;
		gap: 1rem;
	}
	/* Boxes 2 and 3 — the long lists. `min-width: 0` because a grid track's
	   floor is its content's min-content, and „PNF – Proprioceptivní
	   neuromuskulární facilitace" is a wide unbreakable-ish phrase. */
	.eureko-sluzba-methods__col:nth-child(n+2) {
		min-width: 0;
	}
	.eureko-sluzba-methods__col:nth-child(n+2) .eureko-sluzba-methods__list {
		columns: 2;
		column-gap: 1.5rem;
	}
	/* A dotted row must never be split across the column break. */
	.eureko-sluzba-methods__col:nth-child(n+2) .eureko-sluzba-methods__item {
		break-inside: avoid;
	}
}

/* ==========================================================================
   Náš tým — seminar video: play button on the group photo + overlay
   --------------------------------------------------------------------------
   Client, 2026-08-28: „video ze školení dejte prosím do kategorie »náš tým« do
   naší společné fotky." The photo stays and the video opens from it.

   ⚠️ His clip is 1080x1920 PORTRAIT — and not one portrait shot, but THREE
   landscape scenes stacked into a 9:16 reel (~1080x640 each). In the 755x536
   hero slot a centre crop shows the middle scene plus slivers of the other two,
   seams and all; a single-panel crop is clean but discards two thirds of the
   video. Hence an overlay at the clip's own aspect. ⛔ Do not "simplify" this
   by dropping the video into the slot.
   ========================================================================== */
.eureko-cenik-hero__image {
	position: relative;
}
.eureko-tym-video-btn {
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 1.25rem;
	border: 0;
	border-radius: var(--eureko-radius-pill);
	background: rgba(255, 255, 255, 0.94);
	color: var(--eureko-text);
	font-family: var(--eureko-font-heading);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
	transition: background 0.2s ease, transform 0.2s ease;
}
.eureko-tym-video-btn:hover,
.eureko-tym-video-btn:focus-visible {
	background: #fff;
	transform: translateX(-50%) translateY(-2px);
}
.eureko-tym-video-btn__icon {
	font-size: 1.5rem;
	line-height: 1;
	color: var(--eureko-primary);
}

/* Overlay */
.eureko-tym-video-modal {
	position: fixed;
	inset: 0;
	/* Matches the booking + programme drawers. Only works because the modal is a
	   direct child of <main>, in the ROOT stacking context — see page-nas-tym.php. */
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
.eureko-tym-video-modal[hidden] {
	display: none;
}
.eureko-tym-video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.78);
}
.eureko-tym-video-modal__inner {
	position: relative;
	z-index: 1;
	/*
	 * 🔴 A DEFINITE WIDTH HERE, and the video is `width: 100%` of it.
	 *
	 * ⛔ Two other shapes were tried and BOTH collapsed the box to 0x0:
	 *   · `max-width` here + `width: 100%` on the video — a shrink-to-fit parent
	 *     and a percentage child size each other in a circle;
	 *   · `width: auto; height: auto` + `aspect-ratio` on the video — with neither
	 *     axis definite and no metadata loaded yet (it ships with no `src`), there
	 *     is nothing for the ratio to derive from.
	 * Compute the width here and let the ratio give the height. Do not "simplify".
	 *
	 * 🔴 THE THIRD TERM USES dvh, NOT vh. `vh` is the LARGEST viewport — it ignores
	 * the phone browser's address bar — so a 9:16 box sized from it is taller than
	 * what the user can actually see and its BOTTOM falls off the screen. `dvh` is
	 * the current visible height. The `vh` line stays first as the fallback for
	 * browsers without `dvh`: do not delete it and do not reorder the two.
	 */
	width: min(92vw, 26rem, calc(85vh * 1080 / 1920));
	width: min(92vw, 26rem, calc(85dvh * 1080 / 1920));
}
.eureko-tym-video-modal__video {
	display: block;
	width: 100%;
	/* The clip's own 9:16 — never letterboxed, never cropped. Also gives the box a
	   ratio before metadata loads, since it ships with no `src`. */
	aspect-ratio: 1080 / 1920;
	object-fit: contain;
	border-radius: var(--eureko-radius-l);
	background: #000;
}
.eureko-tym-video-modal__close {
	position: absolute;
	/*
	 * INSIDE the video's top-right corner, not above it. Parked above (`top:
	 * -3rem`) it landed on the STICKY HEADER at every width — over the search and
	 * phone icons on a phone, beside the reception avatar on desktop. The overlay
	 * outranks the header so it still worked, but it read as a collision.
	 * ⛔ Do not move it back outside the box: the video is centred, so any offset
	 * above it lands on whatever page chrome happens to be at that height.
	 */
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--eureko-text);
	cursor: pointer;
}
/* Sits on the footage, so it needs its own contrast. */
.eureko-tym-video-modal__close {
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	backdrop-filter: blur(4px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.eureko-tym-video-modal__close:hover,
.eureko-tym-video-modal__close:focus-visible {
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
}

@media (max-width: 767px) {
	.eureko-tym-video-btn {
		font-size: 0.875rem;
		padding: 0.625rem 1rem;
	}
}

/* --------------------------------------------------------------------------
   Informovaný souhlas — download row MOVED ABOVE the eight sections
   (client, 2026-08-30). It used to close the page as a cream block flush
   against the cream note panel above it; both that panel and the row's own
   „Vnitřní řád" link and „Verze: 2026/1" stamp are gone on his instruction.
   🔴 It is WHITE now, not cream: it sits directly under the cream hero, and the
   page's rule is that ONLY the hero is cream (see the page-scoping block
   above). Cream here would silently grow the hero band by the height of the
   note + button and the hero would lose its edge entirely.
   ⚠️ `__inner` is `flex-wrap: wrap` with a full-width lead, so the button drops
   to its own line at every width — no separate mobile rule needed, and the
   global `.eureko-btn { width: 100% }` mobile rule still gets what it expects.
   -------------------------------------------------------------------------- */
.eureko-page-informovany-souhlas .eureko-souhlas-download {
	padding-block: 3rem 0;
	background: var(--eureko-white);
}
.eureko-souhlas-download__lead {
	flex: 0 0 100%;
	max-width: 80ch;
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--eureko-text);
}

/* ─────────────────────────────────────────────────────────────────────────────
   v1.9.422 — client point 69, 2026-08-30: „prosím drobný detail zarovnejte
   tlačítka" — „Náš Tým" did not line up with „Pro samoplátce" above it.

   🔴 THE BUTTON WAS NEVER THE WRONG WIDTH. `data-ghost` already sizes it to
   „Pro samoplátce" (see the rule above), and it measures the same. It was the
   COLUMN that moved: `.eureko-hero__ctas` is a WRAPPING FLEX row, and a flex
   line has no memory of the line above it — row 2 opens at the container's left
   edge with `[Google rating][Náš Tým]`, and the rating is ~85px narrower than
   the green „Mám poukaz na terapii" item above it, so everything after it slid
   left by that difference.
   ⛔ Do NOT widen the button to close the gap: it would then be wider than „Pro
   samoplátce" and the LEFT edges would break instead.

   Grid tracks ARE shared between rows, which is exactly the missing property,
   and the four items already sit in the right source order
   ([poukaz][samoplátce][rating][team]) to fall into a 2×2. The `__ctas-break`
   spacer only exists to force the flex wrap, so it goes with the flex.
   ⚠️ `justify-items: start` is required — the default `stretch` would size each
   item to its whole track, and `.eureko-hero__cta-item`'s own `align-items:
   center` would then re-centre the rating inside the wider first column,
   pushing it right by half the slack.
   ⚠️ Scoped to ≥1024 on purpose: the client reports the phone is fine, and the
   ≤767 stack is a single column where none of this applies. The 768–1023 range
   is left on the flex path — he did not report it and it is unverified there.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
	.eureko-hero__ctas {
		display: grid;
		grid-template-columns: max-content max-content;
		justify-content: start;
		justify-items: start;
		align-items: start;
	}
	.eureko-hero__ctas-break {
		display: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   v1.9.423 — TABLET (768–1023) hero CTAs now match the PHONE exactly
   (user, 2026-08-30, pointing at the ≤767 render: „fix the tab style like
   mobile").

   🔴 The stack itself was never missing: `@media (max-width: 1023px)` already
   sets `flex-direction: column` and the full-width buttons, so 768–1023 was a
   single column. What made it look unlike the phone is that FOUR rules that
   shape the phone stack were written `max-width: 767px` — or, worse, `min-width:
   768px` for the desktop ROW, which then leaked into the tablet COLUMN:
     1. the 300px centred item width + 47px gap (≤767 only) — so tablet buttons
        ran the full container, ~950px wide pills;
     2. `__ctas-break`, the zero-height flex spacer that only exists to force the
        desktop wrap, is hidden at ≤767 but was still adding a gap here;
     3. `--team`'s `margin-top: -0.5rem`, which absorbs that wrap gap, is zeroed
        at ≤767 but still pulled the last button up 8px here;
     4. the rating's `align-self: flex-start` + 1px nudge is a `min-width: 768px`
        rule that optically centres it on the desktop PILL — in a column it just
        shoved it off-centre.
   This is the „768–1023 had no owner" pattern from CLAUDE.md again: the mobile
   rules stop at 767, the desktop rules start at 768, and the middle inherits a
   mix of both.
   ⚠️ Every value below is copied from the ≤767 block on purpose — ⛔ do not
   „tune" one without changing the phone to match, or they drift apart again.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
	.eureko-hero__ctas {
		align-items: center;
		gap: 2.9375rem; /* 47px — room for the badge under each button */
	}
	.eureko-hero__cta-item {
		width: 18.75rem; /* 300px */
		max-width: 100%;
	}
	.eureko-hero__ctas-break {
		display: none;
	}
	.eureko-hero__cta-item--team {
		margin-top: 0;
	}
	/*
	 * 🔴 „Náš Tým" ABOVE, the Google rating LAST — the phone's own order
	 * (user, 2026-08-30). The DOM order is [poukaz][samoplátce][rating][team]
	 * because DESKTOP needs the rating bottom-left and the team button
	 * bottom-right (client point 60, 2026-08-28). The ≤767 block therefore
	 * re-orders in CSS with `order: 6` on the rating; this mirrors it, and the
	 * 2rem is the phone's own extra separation above the rating.
	 * ⛔ Do not fix this by moving the markup — that would break the desktop
	 * 2×2 grid, where source order IS the layout.
	 */
	.eureko-hero__ctas .eureko-hero__google-rating {
		align-self: center;
		order: 6;
		margin-top: 2rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   v1.9.426 — „Jsem po operaci" banner: the copy ran UNDER the circular photo.

   🔴 Caused by the longer sub-heading the client supplied on 2026-08-30, not by
   a styling bug: `.eureko-sluzba-banner__photo` is ABSOLUTE, so it takes no
   space in the flow, and `__text` is `max-width: 85%` centred across the WHOLE
   card. 85% leaves ~7.5% of slack on each side — on a ~900px card that is ~67px
   against a photo whose visible part is 220px (264px disc, 44px overhanging the
   right edge). The old one-line sub simply never reached that far.

   The fix reserves the photo's width as `padding-right` on `__inner`, so the
   centred column re-centres inside the green area LEFT of the disc — the copy
   stays optically centred in the space it actually owns, and the 28px title
   still fits on one line.
   ⛔ Do NOT shrink `__text`'s 85% symmetrically instead: reserving 244px on BOTH
   sides would drop the column to ~410px and wrap the title onto two lines.
   ⚠️ ≥1024 only — that is exactly where `__photo` flips to `display: block`.
   Keep the two breakpoints in step: if the photo ever shows earlier, this
   padding has to follow it, or the collision comes straight back.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
	.eureko-sluzba-banner__inner {
		/* 220px of visible disc + a 24px gutter. */
		padding-right: 15.25rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   v1.9.427 — „Proč potřebujeme rodné číslo?" information bubble
   (client, 2026-08-30: „po najetí kurzorem informační bublinku").

   Same contract as the header's „Telefonicky vyřizujeme" bubble:
   🔴 the gap to the trigger is `padding-top` ON THE BUBBLE, never `top: calc(100%
   + n)` — with real dead space between them the pointer leaves the hover area on
   the way down and the bubble flickers shut.
   🔴 It opens on `:hover`, on `:focus-within` (keyboard) AND on `[data-hint-open]`
   (tap — see `initFieldHints()`), because the trigger is a button on a touch
   screen where hover does not exist.
   ⚠️ `.eureko-field__row` must NOT clip: the bubble is absolutely positioned and
   deliberately overhangs the panel edge. It is right-anchored so it can never
   run off the drawer's right side.
   ───────────────────────────────────────────────────────────────────────────── */
.eureko-field__hint-wrap {
	position: relative;
	display: inline-block;
}
/* The trigger is a <button> now — strip the UA chrome so it still reads as the
   small green link it replaced. */
button.eureko-field__hint {
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.85rem;
	line-height: inherit;
	color: var(--eureko-primary);
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
	cursor: pointer;
}
button.eureko-field__hint:hover,
button.eureko-field__hint:focus-visible {
	text-decoration-style: solid;
}
.eureko-field__hint-bubble {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 20;
	display: block;
	width: 20rem;
	max-width: min(20rem, 70vw);
	padding-top: 0.5rem; /* the gap — part of the hover surface, see above */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.25rem);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	pointer-events: none;
}
.eureko-field__hint-wrap:hover .eureko-field__hint-bubble,
.eureko-field__hint-wrap:focus-within .eureko-field__hint-bubble,
.eureko-field__hint-wrap[data-hint-open] .eureko-field__hint-bubble {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
.eureko-field__hint-text,
.eureko-field__hint-link {
	display: block;
	background: var(--eureko-white);
	border: 1px solid var(--eureko-border);
	border-bottom: 0;
	padding: 0.875rem 1rem 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--eureko-muted);
	white-space: normal;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.eureko-field__hint-link {
	border-bottom: 1px solid var(--eureko-border);
	border-radius: 0 0 var(--eureko-radius-s) var(--eureko-radius-s);
	padding: 0 1rem 0.875rem;
	color: var(--eureko-primary);
	font-weight: 600;
}
.eureko-field__hint-text {
	border-radius: var(--eureko-radius-s) var(--eureko-radius-s) 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.9.428 — „Mini videa z naší praxe" (client, 2026-08-30)
   Two blocks: the homepage BANNER and the PAGE's video grid.
   ⚠️ His reference is an AI-generated mockup, not a Figma frame, so the layout
   follows it but every colour, radius and font comes from the theme's tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- Banner --------------------------------------------------------------- */
.eureko-video-banner {
	padding-block: 3rem;
}
.eureko-video-banner__card {
	overflow: hidden;
	background: var(--eureko-white);
	border-radius: var(--eureko-radius-l);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.08);
}
/* Mobile-first: copy, then collage, then the green value strip. */
.eureko-video-banner__main {
	position: relative;
	display: grid;
	gap: 1.5rem;
	padding: 2rem 1.5rem;
}
.eureko-video-banner__title {
	margin: 0;
	font-family: var(--eureko-font-heading);
	font-size: var(--eureko-fs-display-m);
	font-weight: 700;
	line-height: 1.1;
	color: var(--eureko-text);
}
/* The short rule with a dot on its end, straight from his mockup. */
.eureko-video-banner__rule {
	display: block;
	position: relative;
	width: 12rem;
	max-width: 100%;
	height: 2px;
	margin: 1.25rem 0;
	background: var(--eureko-primary);
}
.eureko-video-banner__rule::after {
	content: "";
	position: absolute;
	right: -5px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--eureko-primary);
	transform: translateY(-50%);
}
.eureko-video-banner__lead {
	margin: 0 0 1.75rem;
	max-width: 26ch;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--eureko-muted);
}
/* The CTA is an outlined disc + two-line green label, not a pill button — it is
   drawn that way in his mockup and it keeps the card visually calm. */
.eureko-video-banner__cta {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	color: var(--eureko-primary);
}
.eureko-video-banner__cta-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 4rem;
	height: 4rem;
	border: 2px solid var(--eureko-primary);
	border-radius: 50%;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.eureko-video-banner__cta-icon .material-symbols-outlined {
	font-size: 1.75rem;
}
.eureko-video-banner__cta-label {
	font-family: var(--eureko-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	max-width: 9ch; /* forces his two-line break without a <br> in the markup */
}
.eureko-video-banner__cta:hover .eureko-video-banner__cta-icon,
.eureko-video-banner__cta:focus-visible .eureko-video-banner__cta-icon {
	background: var(--eureko-primary);
	color: var(--eureko-white);
}
/* 2x2 photo grid. The ratio is on the IMG, which is a grid item with an
   explicit box — not the flex-container trap from CLAUDE.md. */
.eureko-video-banner__collage {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}
.eureko-video-banner__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--eureko-radius-s);
}
/* „Since 1993" disc, bottom-right of the collage. */
.eureko-video-banner__since {
	position: absolute;
	right: -0.5rem;
	bottom: -0.5rem;
	display: grid;
	place-content: center;
	justify-items: center;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	background: var(--eureko-primary);
	color: var(--eureko-white);
	font-family: var(--eureko-font-heading);
	line-height: 1.1;
	box-shadow: 0 0 0 6px var(--eureko-white);
}
.eureko-video-banner__since-label {
	font-size: 0.875rem;
}
.eureko-video-banner__since-year {
	font-size: 1.5rem;
	font-weight: 700;
}
/* The play disc is hidden on mobile: it straddles the seam between the two
   columns, and a single-column stack has no seam. */
.eureko-video-banner__play {
	display: none;
}
/* Green value strip. Scrolls sideways rather than cramming four labels into a
   phone width — same treatment as the FAQ filter row. */
.eureko-video-banner__values {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 1.25rem 1.5rem;
	list-style: none;
	background: var(--eureko-primary);
	overflow-x: auto;
	scrollbar-width: none;
}
.eureko-video-banner__values::-webkit-scrollbar {
	display: none;
}
.eureko-video-banner__value {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	flex: 1 0 auto;
	min-width: 8.5rem;
	padding-inline: 1rem;
	color: var(--eureko-white);
	text-align: center;
}
.eureko-video-banner__value + .eureko-video-banner__value {
	border-left: 1px solid rgba(255, 255, 255, 0.35);
}
.eureko-video-banner__value-icon {
	font-size: 2rem;
}
.eureko-video-banner__value-label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.eureko-video-banner__main {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
		gap: 2.5rem;
		padding: 3rem;
	}
	.eureko-video-banner__values {
		padding-inline: 3rem;
		overflow-x: visible;
	}
	.eureko-video-banner__value {
		flex: 1 1 0;
		min-width: 0;
	}
	/* The disc sits ON the column seam, as drawn. Half its own width is removed
	   from the offset so it straddles the line rather than hanging off it. */
	.eureko-video-banner__play {
		display: grid;
		place-items: center;
		position: absolute;
		left: calc(41.6% - 2.75rem);
		top: 50%;
		z-index: 2;
		width: 5.5rem;
		height: 5.5rem;
		border-radius: 50%;
		background: var(--eureko-primary);
		color: var(--eureko-white);
		box-shadow: 0 0 0 8px var(--eureko-white);
		transform: translateY(-50%);
		pointer-events: none;
	}
	.eureko-video-banner__play .material-symbols-outlined {
		font-size: 2.75rem;
	}
}

/* -- Page grid ------------------------------------------------------------ */
.eureko-video-grid {
	padding-block: 4rem;
	background: var(--eureko-white);
}
.eureko-video-grid__title {
	margin: 0 0 2rem;
	font-family: var(--eureko-font-heading);
	font-size: var(--eureko-fs-display-m);
	font-weight: 500;
	color: var(--eureko-text);
}
.eureko-video-grid__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
.eureko-video-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--eureko-radius-m);
	background: var(--eureko-cream);
	aspect-ratio: 16 / 9;
}
.eureko-video-card__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eureko-video-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--eureko-border);
	font-size: 3rem;
}
/* The play button covers the whole media box, so the poster is the tap target. */
.eureko-video-card__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.15);
	color: var(--eureko-white);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.eureko-video-card__play:hover,
.eureko-video-card__play:focus-visible {
	background: rgba(0, 0, 0, 0.3);
}
.eureko-video-card__play .material-symbols-outlined {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--eureko-primary);
	font-size: 2.25rem;
}
.eureko-video-card__title {
	margin: 1rem 0 0.5rem;
	font-family: var(--eureko-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--eureko-text);
}
.eureko-video-card__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--eureko-muted);
}

@media (min-width: 768px) {
	.eureko-video-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.eureko-video-grid__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   v1.9.429 — „Mini videa" lightbox
   The grid's player moved out of the card and into this overlay (user,
   2026-08-30). ⚠️ `[hidden]` is honoured because nothing here sets `display`
   on `.eureko-video-modal` itself — ⛔ do not add one, or the overlay will sit
   on top of the page permanently (the trap the gallery tiles hit).
   -------------------------------------------------------------------------- */
/* 🔴🔴 `[hidden]` MUST be re-asserted here. The rule below sets `display: grid`
   on the modal, and an AUTHOR declaration beats the UA stylesheet's
   `[hidden] { display: none }` — so without this the overlay renders over the
   whole page, permanently, backdrop and all. Shipped broken once (2026-08-30);
   the page looked "not working" because a fixed dark layer sat on top of it.
   ⛔ Never give a `[hidden]` element a `display` without this guard — the same
   trap the gallery tiles hit (they use `.is-hidden`, not `[hidden]`). */
.eureko-video-modal[hidden] {
	display: none !important;
}
.eureko-video-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 1.5rem;
}
.eureko-video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
}
.eureko-video-modal__inner {
	position: relative;
	width: min(60rem, 100%);
}
.eureko-video-modal__close {
	position: absolute;
	top: -3rem;
	right: 0;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: var(--eureko-white);
	cursor: pointer;
}
.eureko-video-modal__close:hover,
.eureko-video-modal__close:focus-visible {
	background: rgba(255, 255, 255, 0.3);
}
.eureko-video-modal__title {
	margin: 0 0 0.75rem;
	font-family: var(--eureko-font-heading);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--eureko-white);
}
.eureko-video-modal__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--eureko-radius-m);
	background: #000;
}
.eureko-video-modal__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --------------------------------------------------------------------------
   v1.9.432 — „Mini videa" lightbox on mobile.

   ⛔ The v1.9.431 block is REVERTED (user: it looked worse). It moved the close
   button into the panel and painted the panel dark, which only made the player
   smaller — and the player's size was the actual complaint.

   ⚠️ What is left here is the minimum: the close button cannot sit at
   `top: -3rem` on a phone (there is no room above the dialog), so it moves to
   the panel's top-right corner, and the video gets the full width of the
   viewport minus a small gutter.

   🔴 The grey bar across the video is DRIVE'S OWN PLAYER CHROME, not our CSS.
   Its controls are a fixed pixel size, so at 390px they cover a third of a 16:9
   frame. No stylesheet can reach inside a cross-origin iframe. The only real
   fix is to stop using Drive's player — see the note in `video-grid.php`.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.eureko-video-modal {
		padding: 0.75rem;
	}
	.eureko-video-modal__close {
		top: 0;
		right: 0;
		z-index: 2;
		background: rgba(0, 0, 0, 0.55);
	}
	.eureko-video-modal__title {
		margin-right: 3rem;
		font-size: 1rem;
	}
}

/* --------------------------------------------------------------------------
   v1.9.434 — guard for the team carousel's negative pull.

   🔴 `.eureko-team .eureko-container` is pulled UP 24.75rem at ≥768 so the
   circular portraits straddle the bottom edge of the cream `about-clinic`
   band. That offset assumes about-clinic is the PREVIOUS SECTION. When the
   „Mini videa" banner was inserted between the two, the team hauled itself
   396px up over it and printed its headline and portraits across the banner's
   photo collage and green value strip.

   The section order is fixed in `front-page.php` (the banner now sits ABOVE
   about-clinic). This rule is the belt-and-braces: whatever ends up in front
   of the team, if it is NOT about-clinic there is no cream band to overlap, so
   there is nothing to pull up into.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.eureko-team:not(.eureko-about-clinic + .eureko-team) .eureko-container {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
   v1.9.435 — „Jak to u nás vypadá" banner: make the whole card the link.

   🔴 Only the small CTA was a link. The photo collage and the big green play
   disc both READ as controls and did nothing, which is what made the banner
   feel broken. The CTA's `::after` is now stretched over the whole card, so a
   click anywhere — photos and disc included — opens the Mini videa page.
   ⚠️ This is why it is done with a pseudo-element rather than wrapping the card
   in an `<a>`: the CTA is already an anchor and anchors cannot nest.
   ⚠️ `__card` therefore needs `position: relative`, and the collage needs a
   z-index of its own or the overlay would sit above the hover transform.


   ⛔ LAYOUT REVERTED (user, 2026-09-02: „keep the design as he shared, dont
   change that"). A first pass also rebalanced the card — 3:2 photos, 4fr/8fr
   columns, top-aligned copy, bigger headline — to close the white gap beside
   the title. That is the CLIENT'S OWN mockup proportion and it stays. ⛔ Do not
   re-derive it: only the missing link was the defect here.
   -------------------------------------------------------------------------- */
.eureko-video-banner__card {
	position: relative;
}
.eureko-video-banner__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}
/* ⛔ `__play` MUST NOT be listed here — it is `position: absolute` from ≥768 and
   a `position: relative` override drops it back into the flow, where it lands
   under the CTA at the card's bottom-left instead of on the column seam. */
.eureko-video-banner__collage {
	position: relative;
	z-index: 1;
}
/* The photos react to a hover anywhere on the card, so the whole thing reads as
   one control rather than four decorative stills. */
.eureko-video-banner__photo {
	transition: transform 0.3s ease, filter 0.3s ease;
}
.eureko-video-banner__card:hover .eureko-video-banner__photo {
	filter: brightness(1.04);
}
.eureko-video-banner__play {
	transition: transform 0.3s ease;
}
.eureko-video-banner__card:hover .eureko-video-banner__play {
	transform: translateY(-50%) scale(1.08);
}


/* --------------------------------------------------------------------------
   v1.9.437 — „Jak to u nás vypadá" banner: match the client's mockup.

   🔴 The first build treated the card as a padded two-column block. His mockup
   is not that (user, 2026-09-02, holding the reference up against the build):
     · the collage is FULL-BLEED — it runs to the card's top, right and bottom
       edges, with only thin white gutters BETWEEN the four photos. Ours sat
       inside 3rem of padding on every side.
     · the headline is large enough to WRAP to two lines („Jak to u nás" /
       „vypadá") and it is the biggest thing on the card.
     · the play disc is large and carries a thick WHITE RING, and it straddles
       the collage's left edge rather than floating in the gap.
     · the „Since 1993" disc is large and hangs off the collage's bottom-right
       so it OVERLAPS the green value strip.
     · the copy column is roughly a THIRD of the card, not 5/12.

   ⚠️ Padding therefore moves off `__main` and onto `__text` alone — `__main`
   must have none, or the collage cannot reach the card edge.
   ⚠️ Everything here is ≥768 only. The mobile stack is a single column, has no
   seam for the play disc and no room for a full-bleed collage; it is untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.eureko-video-banner__main {
		grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
		align-items: stretch;
		gap: 0;
		padding: 0;
	}
	.eureko-video-banner__text {
		align-self: center;
		padding: 3rem 2rem 3rem 3rem;
	}
	.eureko-video-banner__title {
		/* Sized to wrap after „nás", as drawn. */
		font-size: clamp(2.5rem, 4.4vw, 4rem);
		max-width: 8ch;
	}
	.eureko-video-banner__rule {
		width: 15rem;
		margin-block: 2rem;
	}
	.eureko-video-banner__lead {
		max-width: 22ch;
		margin-bottom: 2.5rem;
		font-size: 1.25rem;
	}
	.eureko-video-banner__cta-icon {
		width: 5.5rem;
		height: 5.5rem;
	}
	.eureko-video-banner__cta-icon .material-symbols-outlined {
		font-size: 2.25rem;
	}
	.eureko-video-banner__cta-label {
		font-size: 1.5rem;
	}
	/* Full-bleed 2x2. The gutters are the card's own white showing through. */
	.eureko-video-banner__collage {
		gap: 0.5rem;
		align-content: stretch;
	}
	.eureko-video-banner__photo {
		height: 100%;
		aspect-ratio: auto;
		min-height: 13rem;
		border-radius: 0;
	}
	/* Straddles the seam between the copy column and the collage. ⚠️ It is
	   positioned against `__main`, so the offset is the COLUMN BOUNDARY (34%),
	   never 0 — `left: 0` is the card's own left edge and put the disc half
	   outside the card, where `overflow: hidden` sliced it. */
	.eureko-video-banner__play {
		left: 34%;
		width: 8.5rem;
		height: 8.5rem;
		box-shadow: 0 0 0 0.75rem var(--eureko-white);
		transform: translate(-50%, -50%);
	}
	.eureko-video-banner__play .material-symbols-outlined {
		font-size: 4rem;
	}
	.eureko-video-banner__card:hover .eureko-video-banner__play {
		transform: translate(-50%, -50%) scale(1.06);
	}
	/* Hangs off the bottom-right so it overlaps the green strip below. */
	.eureko-video-banner__since {
		right: 1.5rem;
		bottom: -3.5rem;
		width: 9rem;
		height: 9rem;
		box-shadow: 0 0 0 0.5rem var(--eureko-white);
	}
	.eureko-video-banner__since-label {
		font-size: 1.25rem;
	}
	.eureko-video-banner__since-year {
		font-size: 2.25rem;
	}
	/* The disc must sit ON the strip, so the strip cannot create a new stacking
	   context above the collage. */
	.eureko-video-banner__values {
		position: relative;
		z-index: 0;
		padding-block: 1.75rem;
	}
	.eureko-video-banner__value-icon {
		font-size: 2.5rem;
	}
	.eureko-video-banner__value-label {
		font-size: 0.9375rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   v1.9.444 — team detail: the portrait FILLS the hero band instead of floating
   at the bottom of it (user, 2026-09-07: „some images have empty space above
   them, that looks weird" — Staňková Brzáková).

   🔴 MEASURED IN CHROME, not derived. At 1600px on that page:
   row 1488×778 · box 601×498 · img 601×751 · object-position 50% 0%.
   Three things that the source alone does NOT tell you:
   1. The box's ratio was **640/530, not the 640/620** the ≥1024 rule sets — the
      `:not(--cutout)` plate rule wins, so the „tunable" desktop ratio above has
      never actually applied here.
   2. `--cutout-zoom: 1.45` has never applied either: the rule asks for
      `width: calc(100% * 1.45)` = 871px and the img computes to **601px**,
      because the global `img { max-width: 100% }` clamps it. The negative
      `margin-inline` it pairs with DOES apply, which is why the portrait sits
      off-centre. ⛔ Do not "restore" the zoom by raising the number — raise the
      clamp or nothing happens.
   3. The img is 751px tall inside a 498px box with `overflow: hidden`, so ~253px
      of torso was already being clipped; the box was then `align-self: end` in a
      778px row, dropping all 280px of slack into the cream ABOVE the head.
   The row height comes from the BIO column, so this is a per-member defect:
   long bio ⇒ big gap, short bio ⇒ none. Staňková has one of the longest.

   Fix: stretch the box to the row and size the portrait off the box HEIGHT
   (`height: 100%; width: auto`), bottom-anchored — shoulders flush with the band
   edge, which is the design's intent (Figma 718:15641), and the head can never
   be cut because nothing is scaled past the box any more.
   ⚠️ `width: 100%; min-width: 0` on the box is REQUIRED. Without it the grid
   track sizes to the now-intrinsic image width, the box grew 601 → 1017 and the
   PAGE SCROLLED SIDEWAYS (scrollWidth 1821 vs 1585). Verified both ways.
   ⚠️ `transform: none` is REQUIRED. `--cutout-shift: 16%` pushed the portrait
   96px right, and with the box clipping at its own edge that sliced her right
   shoulder off vertically. The shift only made sense while the image was
   width-driven and centred by a negative margin.
   ⚠️ ≥1024 ONLY — below that the hero is stacked, there is no second column to
   be taller, and the photo is a `cover` crop in its own ratio. Untouched.
   ⚠️ A FIRST ATTEMPT (v1.9.442, reverted in .443) set `height: calc(100% *
   var(--cutout-zoom))` on the theory that `max-width` would cap it. It does not:
   with an explicit height and `width: auto` the height wins, the img overflowed
   its `overflow: hidden` box and the top of the head was cut off. ⛔ Do not
   reintroduce a multiplier here — the box height IS the intended size.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
	.eureko-tym-detail__image--cutout {
		align-self: stretch;
		aspect-ratio: auto;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		overflow: visible;
	}
	.eureko-tym-detail__image--cutout .eureko-tym-detail__photo {
		flex: 0 0 auto;
		height: 100%;
		width: auto;
		max-width: none;
		margin-inline: 0;
		transform: none;
		object-fit: contain;
		object-position: center bottom;
	}
}

/* --------------------------------------------------------------------------
   v1.9.456 — „Jak to u nás vypadá" banner between 768 and 1279.

   🔴 CLIENT, point 88, 2026-09-09: „This banner is distorted on a smaller
   monitor." MEASURED IN CHROME at 1009px, not derived — two separate
   collisions, both invisible at ≥1280 which is why it reads as a
   small-monitor-only fault:

   1. THE PLAY DISC LANDS ON THE LEAD PARAGRAPH. It is centred on the column
      seam (`left: 34%` of `__main`) and is 8.5rem wide with a 0.75rem ring, so
      it reaches 5rem = 80px BACK into the copy column. The copy column is a
      PERCENTAGE of the card, so that 80px is a constant eating a shrinking
      column: at 1280 the text content box ends at 317px and the disc starts at
      317px — exactly flush, no overlap. At 1009 the box ends at 278px and the
      disc starts at 230px, so it covers the last 48px of every line and
      „Nahlédněte pod pokličku naší" is half hidden behind green.
   2. THE „SINCE 1993" DISC LANDS ON THE FOURTH VALUE LABEL. It hangs off the
      collage's bottom-right onto the green strip by design, but the strip's
      four items divide the FULL width with nothing reserved for it. As the
      strip narrows „Příjemné prostředí" wraps to two lines and the second line
      sits under the disc.

   FIX: reserve the space instead of moving anything. The copy column gets a
   right padding wide enough to clear the disc, the strip gets a right padding
   wide enough to clear the „Since" disc, and both discs step down a size so
   the reservations stay affordable in a ~900px card.

   ⚠️ THE UPPER BOUNDS ARE 959.98 / 1279.98, NOT 959 / 1279. A viewport can be a
   FRACTIONAL width (device pixel ratio, browser zoom): at 1279.4px an integer
   `max-width: 1279px` has already stopped matching while nothing else has
   started, and the banner fell back to the unfixed rules in that sliver.
   Caught in Chrome — `matchMedia('(max-width: 1279px)')` was false while
   `(min-width: 1279px)` was true at the same moment. ⛔ Do not tidy the .98 away.

   ⛔ SCOPED TO 768–1279 ON PURPOSE. ≥1280 is the client's own approved mockup
   proportion (user, 2026-09-02: „keep the design as he shared, dont change
   that") and is deliberately untouched — do not widen this block upwards.
   ⚠️ The copy column is `34fr`, so any change to that ratio changes where the
   disc falls. If the ratio is ever retuned, re-measure these paddings.
   -------------------------------------------------------------------------- */
@media (min-width: 960px) and (max-width: 1279.98px) {
	/* 5rem clears the disc's radius + ring; the extra 1rem is breathing room so
	   a long word does not touch the green. */
	.eureko-video-banner__text {
		padding: 2.5rem 6rem 2.5rem 2.5rem;
	}
	.eureko-video-banner__title {
		font-size: clamp(2rem, 3.6vw, 2.75rem);
	}
	.eureko-video-banner__rule {
		width: 11rem;
		margin-block: 1.5rem;
	}
	.eureko-video-banner__lead {
		max-width: none;
		margin-bottom: 1.75rem;
		font-size: 1.0625rem;
	}
	.eureko-video-banner__cta-icon {
		width: 4rem;
		height: 4rem;
	}
	.eureko-video-banner__cta-icon .material-symbols-outlined {
		font-size: 1.75rem;
	}
	.eureko-video-banner__cta-label {
		font-size: 1.125rem;
	}
	.eureko-video-banner__play {
		width: 6.5rem;
		height: 6.5rem;
		box-shadow: 0 0 0 0.625rem var(--eureko-white);
	}
	.eureko-video-banner__play .material-symbols-outlined {
		font-size: 3rem;
	}
	/* Smaller disc, and the strip below keeps a matching gap free for it. */
	.eureko-video-banner__since {
		right: 1rem;
		bottom: -2.5rem;
		width: 7rem;
		height: 7rem;
		box-shadow: 0 0 0 0.375rem var(--eureko-white);
	}
	.eureko-video-banner__since-label {
		font-size: 1rem;
	}
	.eureko-video-banner__since-year {
		font-size: 1.75rem;
	}
	/* 7rem disc + 1rem offset + 1rem clearance. */
	.eureko-video-banner__values {
		padding-inline: 2rem 9rem;
	}
	.eureko-video-banner__value {
		padding-inline: 0.625rem;
	}
	.eureko-video-banner__value-icon {
		font-size: 1.875rem;
	}
	.eureko-video-banner__value-label {
		font-size: 0.75rem;
		letter-spacing: 0.04em;
	}
}

/* --------------------------------------------------------------------------
   v1.9.456 — same banner, 768–959: STACK it, as the phone does.

   🔴 The 34/66 split cannot survive here and never could — this half of the
   defect predates the fix above. MEASURED at 768: the card is 672px, so the
   copy column is 228px and its own padding (3rem + 2rem) leaves 148px of
   content for a 40px headline whose longest word („vypadá") is ~150px wide.
   The word overflowed its column before anything else was considered, and
   reserving room for the play disc — which is what the ≥960 block does — only
   takes the content below 90px.

   So below 960 the banner uses the MOBILE treatment, which is already correct
   and signed off: one column, copy over collage, no play disc (it exists only
   to straddle a seam that a single column does not have), 4:3 photos at their
   natural crop and the small „Since" disc on the collage corner.

   ⚠️ This is a mirror of the base (≤767) rules, not new design — CLAUDE.md's
   rule that most tablet fixes are a resized copy of a ≤767 block that already
   exists. Read that block before changing anything here.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 959.98px) {
	.eureko-video-banner__main {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 1.75rem;
		padding: 2.5rem 2rem;
	}
	.eureko-video-banner__text {
		align-self: auto;
		padding: 0;
	}
	.eureko-video-banner__title {
		font-size: 2.5rem;
		max-width: none;
	}
	.eureko-video-banner__rule {
		width: 12rem;
		margin-block: 1.5rem;
	}
	.eureko-video-banner__lead {
		max-width: 46ch;
		margin-bottom: 1.75rem;
		font-size: 1.0625rem;
	}
	.eureko-video-banner__cta-icon {
		width: 4rem;
		height: 4rem;
	}
	.eureko-video-banner__cta-icon .material-symbols-outlined {
		font-size: 1.75rem;
	}
	.eureko-video-banner__cta-label {
		font-size: 1.25rem;
	}
	/* ⛔ No seam to straddle in one column — same reason it is hidden ≤767. */
	.eureko-video-banner__play {
		display: none;
	}
	.eureko-video-banner__collage {
		gap: 0.75rem;
	}
	.eureko-video-banner__photo {
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 3;
		border-radius: var(--eureko-radius-s);
	}
	.eureko-video-banner__since {
		right: -0.5rem;
		bottom: -0.5rem;
		width: 7rem;
		height: 7rem;
		box-shadow: 0 0 0 0.375rem var(--eureko-white);
	}
	.eureko-video-banner__since-label {
		font-size: 1rem;
	}
	.eureko-video-banner__since-year {
		font-size: 1.75rem;
	}
	.eureko-video-banner__values {
		padding: 1.25rem 2rem;
	}
	.eureko-video-banner__value {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: 0.5rem;
	}
	.eureko-video-banner__value-icon {
		font-size: 1.75rem;
	}
	.eureko-video-banner__value-label {
		font-size: 0.6875rem;
		letter-spacing: 0.04em;
	}
}

/* --------------------------------------------------------------------------
   v1.9.458 — `booking-info` banner: stop the page scrolling sideways at
   1024–1279.

   🔴 MEASURED IN CHROME at 1009px: the whole document scrolled 61px wider than
   the viewport (`scrollWidth` 1070 vs 1009) and the single unclipped offender
   was `.eureko-bookinfo__col--photo`, whose right edge sat at 1069 — 108px past
   the card's own right edge at 961.

   🔴 THE `1fr` MIN-CONTENT TRAP AGAIN (same class of bug as `usp-about`, see
   CLAUDE.md). The row is `1.35fr 0.9fr 1fr 1fr 0.9fr`, and an `Nfr` track is
   `minmax(auto, Nfr)` — its FLOOR is the item's min-content. The four copy
   columns each carry a 2.5rem padding-left and a border on top of their text,
   so their min-content came to 175+186+200+211 = 772px against 657px of
   available track space. Grid honoured the floors, overflowed the container,
   and squeezed the photo track to 41px — a 41px-wide photo, which is why the
   symptom read as „a sliver of image hanging off the page".

   FIX: below 1280 the five-column row simply does not fit, so the PHOTO column
   is dropped and the four copy columns get real `minmax(0, …)` floors plus
   `min-width: 0`, which is what lets them shrink at all. The photo is
   decorative — the reception shot from his mockup — and no information is lost.

   ⛔ ≥1280 is untouched: the row fits there (min-content 813 against 913
   available) and the photo is part of the client's approved banner.
   ⚠️ Keyed on `:has(.eureko-bookinfo__col--photo)` exactly like the rule it
   overrides, so the menu variant and the banner variant can never disagree
   about how many columns there are.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.eureko-bookinfo:has(.eureko-bookinfo__col--photo) {
		grid-template-columns:
			minmax(0, 1.35fr)
			minmax(0, 0.9fr)
			minmax(0, 1fr)
			minmax(0, 1fr);
		gap: 0 1.75rem;
		padding: 2.5rem;
	}
	/* Required — without it each column still floors at its own min-content and
	   the tracks push the container open again. */
	.eureko-bookinfo__col {
		min-width: 0;
	}
	.eureko-bookinfo__col + .eureko-bookinfo__col {
		padding-left: 1.75rem;
	}
	/* Decorative only, and it had collapsed to a 41px sliver here anyway. */
	.eureko-bookinfo__col--photo {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   v1.9.459 — video banner value strip: 2×2 on phones, not a sideways scroller.

   🔴 USER, 2026-09-10: „on smaller screens or say mobile this can be two rows,
   instead of horizontal scroll". The base rule made the strip an
   `overflow-x: auto` flex row with `min-width: 8.5rem` per item — the same
   treatment as the FAQ filter row — so on a 390px phone only „Lidský přístup"
   and „Komplexní péče" were visible and the other two had to be swiped to.
   Four short value words are not a filter row: nothing is gained by hiding half
   of them behind a gesture with no scroll affordance.

   ⚠️ The dividers change shape with the layout. The base rule draws them with
   `.__value + .__value { border-left }`, which in a 2×2 grid would put a left
   border on the THIRD item — i.e. a stray rule under the first column. So the
   left border is cancelled and replaced with a right border on the odd items
   and a bottom border on the first row, which is the grid's real cross.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.eureko-video-banner__values {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		padding: 1.25rem 1rem;
		overflow-x: visible;
	}
	.eureko-video-banner__value {
		min-width: 0;
		padding: 1rem 0.5rem;
	}
	/* ⛔ Cancel the flex-row divider before drawing the grid one. */
	.eureko-video-banner__value + .eureko-video-banner__value {
		border-left: 0;
	}
	.eureko-video-banner__value:nth-child(odd) {
		border-right: 1px solid rgba(255, 255, 255, 0.35);
	}
	.eureko-video-banner__value:nth-child(-n + 2) {
		border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	}
	.eureko-video-banner__value-label {
		font-size: 0.75rem;
		letter-spacing: 0.04em;
	}
}

/* --------------------------------------------------------------------------
   v1.9.461 — „Jak to u nás vypadá" banner: the collage can no longer overflow
   onto the green value strip (client, point 88 REPEATED, 2026-09-10:
   „banner je u mě v Macbooku pořád deformovaný" — still distorted on his Mac).

   🔴 v1.9.456 fixed two REAL collisions at 768–1279 and they are still fixed.
   This is a THIRD, different fault and it is ENGINE-dependent, which is why it
   survives on his machine and cannot be reproduced here: his screenshot shows
   the photo collage painted OVER the green strip, so the strip is visible only
   under the copy column (34%) and „Komplexní péče" is sliced mid-word.

   CAUSE — the photos are `height: 100%` inside a grid row of AUTO height:
     .eureko-video-banner__photo { height: 100%; aspect-ratio: auto }  (≥768)
   A percentage height against an indefinite container is unresolvable. Chrome
   resolves it in a second pass once `align-items: stretch` has given the row a
   height (MEASURED at 1470 and 1280: collage 601/572 = the row, no overflow).
   WebKit does not: the image falls back to its INTRINSIC height (the files are
   1024×683), the collage box keeps the height it got from the copy column, and
   the images spill out of the bottom of it. `__collage` is `z-index: 1` and
   `__values` is `z-index: 0` — by design, so the „Since 1993" disc can sit ON
   the strip — so the spill paints over the strip instead of pushing it down.
   ⚠️ The card is `overflow: hidden`, so nothing scrolls and nothing warns: the
   labels are simply covered. Same silent-failure class as the CSS notes above.

   FIX — make the height DEFINITE instead of percentage-resolved, in any engine:
   the collage is two rows of 3:2 photos in two columns, so the collage itself is
   3:2. Giving it that `aspect-ratio` makes its height definite, and explicit
   `1fr` rows make each row definite, so `height: 100%` on the photos now
   resolves everywhere. ⚠️ If the copy column is ever the taller of the two,
   `align-items: stretch` still hands the collage a definite height and the rows
   stay `1fr` — definite in that direction too.

   ⛔ THE RENDERED LAYOUT IS UNCHANGED — verified in Chrome before/after:
   1470px collage 601 → 598, photos 445×297 → 445×295; 1280px collage 572 → 572,
   photos 425×282. That matters because ≥1280 is the client's own approved
   mockup proportion (user, 2026-09-02: „keep the design as he shared").
   ⚠️ Scoped ≥960: below that the banner uses the stacked mobile treatment, whose
   photos are `aspect-ratio: 4/3; height: auto` — already definite, never
   affected.
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
	.eureko-video-banner__collage {
		aspect-ratio: 3 / 2;
		grid-template-rows: repeat(2, minmax(0, 1fr));
	}
	.eureko-video-banner__photo {
		min-height: 0;
	}
}

/* --------------------------------------------------------------------------
   v1.9.471 — „Jak to u nás vypadá" banner: photos are ABSOLUTELY positioned
   inside a wrapper tile (client, point 99, 2026-09-14 — third report:
   „Tento banner je stále deformovaný").

   🔴 v1.9.461 did NOT fix it on his Mac. Verified 2026-09-15: the live CSS
   carries the .461 block and the ?ver= token had changed, so it was not a cache.
   Playwright WebKit 26.6 renders the banner CORRECTLY at 1084/1280/1470/1920,
   so his Safari is an OLDER engine. His screenshot is the same failure as
   before: every photo drawn at its intrinsic 683px height, the top row cut
   down to its top third, the bottom row painted over the green strip.

   CAUSE — .461 still depended on `height: 100%` on an <img> grid item
   resolving against a grid row whose size comes from `aspect-ratio` /
   `align-items: stretch`. Whether that counts as a DEFINITE height is exactly
   where engines differ, and his does not treat it as one.

   FIX — take percentage-height resolution out of the equation entirely. Each
   <img> is wrapped in `.eureko-video-banner__tile` (the grid item) and is
   `position: absolute; inset: 0` inside it. An absolutely positioned box's
   percentages resolve against its containing block in EVERY engine, and an
   empty tile contributes no content height, so a photo can never inflate its
   row again. The tile takes the grid cell; the photo covers the tile.
   ⚠️ The tile keeps the per-range shape the photo used to carry: 4/3 with a
   small radius on the stacked layouts (≤959), full-bleed cells with no radius
   at ≥960 (sized by the rows, which .461 already defines).
   ⛔ Two-class selectors ON PURPOSE — they must beat the one-class
   `.eureko-video-banner__photo` rules inside the earlier media queries.
   ⛔ Do not unwrap the <img> in video-banner.php.
   -------------------------------------------------------------------------- */
.eureko-video-banner__tile {
	position: relative;
	display: block;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--eureko-radius-s);
}
.eureko-video-banner__tile .eureko-video-banner__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-width: none;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
}
/* ⚠️ `width: 100%` on the collage is REQUIRED once the tiles are empty boxes.
   With no in-flow content, WebKit derived the collage's WIDTH from its 3/2
   `aspect-ratio` and the stretched row height instead of filling its track —
   MEASURED in Playwright WebKit at 1920: a 896px collage in a 982px column,
   leaving a white band down the card's right edge. Chromium was unaffected. */
@media (min-width: 960px) {
	.eureko-video-banner__collage {
		justify-self: stretch;
		width: 100%;
	}
	.eureko-video-banner__tile {
		aspect-ratio: auto;
		border-radius: 0;
	}
}

/* ==========================================================================
   Search type-ahead (client, point 103, 2026-09-15).
   The dropdown hangs under the pill form; the form is its containing block.
   ========================================================================== */
.eureko-search-form {
	position: relative;
}
.eureko-search-suggest {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--eureko-border);
	border-radius: var(--eureko-radius-m);
	box-shadow: 0 12px 32px rgba(61, 72, 86, 0.12);
	text-align: left;
}
.eureko-search-suggest[hidden] {
	display: none;
}
.eureko-search-suggest__item a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--eureko-radius-s);
	color: var(--eureko-text);
	text-decoration: none;
	font-family: var(--eureko-font-body);
	font-size: 1rem;
}
.eureko-search-suggest__item a:hover,
.eureko-search-suggest__item.is-active a {
	background: var(--eureko-cream);
	color: var(--eureko-primary);
}
.eureko-search-suggest__type {
	flex: 0 0 auto;
	font-size: 0.75rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--eureko-muted);
}
.eureko-search-suggest__empty {
	padding: 0.75rem 1rem;
	color: var(--eureko-muted);
	font-size: 0.9375rem;
}

/* ==========================================================================
   Homepage „Zeptejte se, napište nám" card — the receptionist was SQUASHED
   (review round 2026-09-16: „zdeformovaná paní").
   The ≥768 box is 13rem × 15rem (208×240) and the img was `height: 100%;
   width: auto` — so it wanted 234px wide, and the global `img { max-width:
   100% }` clamped it to 208 while the height stayed 240: shown ratio 0.867
   against the file's 0.976, in EVERY browser, not just Safari.
   ⛔ Do not „fix" by raising the width — `contain` keeps the box and the
   proportions; she sits on the card's bottom edge as before.
   ========================================================================== */
@media (min-width: 1024px) {
	.eureko-service-card__cta-photo img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center bottom;
	}
}

/* ==========================================================================
   Homepage booking banner — reception photo FILLS the row height
   (review round 2026-09-16: „obrázek zarovnat tak aby byl z vrchu i zespodu
   stejně odsazený"; user picked „fill the full height").
   🔴 This SUPERSEDES the 2026-08-25 top-aligned 2:3 box above for the BANNER
   only: the empty slack under the photo is what the reviewer flagged. The
   photo now runs from the headings' top line to the columns' bottom edge, so
   top and bottom match the text columns exactly.
   ⚠️ Narrower crop of the room than before — accepted by the user. The MENU
   variant keeps the 2:3 box (its row is taller, the crop would be a sliver).
   ≥1440 only: at 1300 the track is 99px wide and a full-height crop became a
   99×466 sliver, so 1280–1439 keeps the 2:3 box (1024–1279 hides the photo).
   ========================================================================== */
@media (min-width: 1440px) {
	.eureko-bookinfo--banner .eureko-bookinfo__col--photo {
		align-items: stretch;
	}
	.eureko-bookinfo--banner .eureko-bookinfo__col--photo img {
		height: 100%;
		max-height: none;
		aspect-ratio: auto;
		object-fit: cover;
	}
}

/* ==========================================================================
   Non-link menu items are visibly GREY (review round 2026-09-16: „doporučuji
   vizuálně odlišit, co je odkaz a co ne v dropdown" + the same for the footer;
   user: „do it now, grey out the non-links").
   The old „muted" #505460 was indistinguishable from the #3d4856 links.
   Covers the three render sites of unresolved leaves: desktop mega menu,
   mobile drill-down, footer. When a page is built for a leaf it becomes an
   <a> and drops out of these selectors on its own — nothing to undo.
   ========================================================================== */
.eureko-mm__link.eureko-mm__link.is-inert {
	color: #a0a4ab;
	cursor: default;
}
/* Dan, 2026-09-17 („normal fonts"): in the mega menu and footer the DOT alone
   marks a non-link (point 105), so the label keeps the normal text colour.
   The mobile drill-down has no dots, so it keeps the grey above. */
.eureko-mega .eureko-mega__leaf.is-inert,
.eureko-footer .eureko-footer__column-text {
	color: var(--eureko-text);
	cursor: default;
}

/* ==========================================================================
   Review round 2026-09-16 — two layout gaps.
   ========================================================================== */

/* 1) „Informace pro pacienty" (Mám poukaz + Pro samoplátce): the intro sat in
   a narrow left measure with an empty right half („proč tento volný prostor?
   buď roztáhnout text nebo nějak vyplnit"). At desktop the intro now flows in
   TWO columns that line up with the two card columns right under it, so the
   width is used without one 1400px-long reading line. */
@media (min-width: 1024px) {
	.eureko-content-blocks--card.eureko-content-blocks--cols-2 .eureko-content-blocks__intro {
		max-width: none;
		column-count: 2;
		column-gap: 3.5rem;
	}
	.eureko-content-blocks--card.eureko-content-blocks--cols-2 .eureko-content-blocks__intro p {
		break-inside: avoid;
	}
}

/* 2) Vybavení detail pages: „rozhozené odrážky". „Kdy se … používá?" and
   „Hlavní přínosy" are both 2-column grids, but one list is 926px wide and the
   other 1488px, so their second columns started at different x positions and
   the bullets looked scattered. Both now use the SAME fixed column tracks,
   left-aligned — the second column lines up on every device page. */
@media (min-width: 768px) {
	.eureko-vybaveni-single__indications,
	.eureko-metoda-benefits__list {
		grid-template-columns: repeat(2, minmax(0, 24rem));
		justify-content: start;
		column-gap: 3rem;
	}
}

/* Booking banner photo at 1280–1439 (Dan, 2026-09-16: „sjednotit odsazení").
   Fill-height makes a 99px sliver here and the 2:3 box leaves a 367px gap, so
   the photo is hidden in this range — same as 1024–1279. ≥1440 fills. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
	.eureko-bookinfo--banner .eureko-bookinfo__col--photo {
		display: none;
	}
	.eureko-bookinfo--banner:has(.eureko-bookinfo__col--photo) {
		grid-template-columns: 1.35fr 0.9fr 1fr 1fr;
	}
}

/* ==========================================================================
   Point 105 (Dan, 2026-09-16): the DOT tells link from non-link, in the mega
   menu AND the footer. Linked → saturated green; not yet clickable → light
   green. Keyed on the inert span inside the <li>, so a leaf that gains a page
   (becomes an <a>) turns dark green on its own. The grey inert LABEL from the
   2026-09-16 review round stays.
   ========================================================================== */
.eureko-mega__list li::before,
.eureko-footer__column-links li::before {
	background: var(--eureko-primary);
}
.eureko-mega__list li:has(> .is-inert)::before,
.eureko-footer__column-links li:has(> .eureko-footer__column-text)::before {
	background: #b5dc95;
}

/* ==========================================================================
   Complianz cookie banner in the theme's styles (user, 2026-09-17).
   The plugin injects its own defaults CSS from JS, so every rule is keyed on
   #cmplz-cookiebanner-container. Card: white, radius l, bottom-right on
   desktop, a full-width sheet on phones. Buttons use the header pill style.
   ========================================================================== */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
	grid-template-columns: 1fr !important;
	gap: 1rem !important;
	width: 460px !important;
	max-width: calc(100vw - 2rem) !important;
	right: 1.5rem !important;
	left: auto !important;
	bottom: 1.5rem !important;
	top: auto !important;
	transform: none !important;
	padding: 1.75rem !important;
	background: var(--eureko-white) !important;
	border: 1px solid var(--eureko-border) !important;
	border-radius: var(--eureko-radius-l) !important;
	box-shadow: var(--eureko-shadow-lg) !important;
	font-family: var(--eureko-font-body) !important;
	color: var(--eureko-text) !important;
	z-index: 9999 !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links.cmplz-information,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-manage-options {
	display: none !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
	justify-self: start !important;
	text-align: left !important;
	font-family: var(--eureko-font-heading) !important;
	font-size: 1.5rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--eureko-text) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
	display: grid !important;
	place-items: center;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--eureko-border);
	border-radius: 50%;
	color: var(--eureko-text) !important;
	cursor: pointer;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close svg {
	width: 0.75rem !important;
	height: 0.75rem !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:hover {
	border-color: var(--eureko-primary);
	color: var(--eureko-primary) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
	max-height: 50vh;
	overflow-y: auto;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
	margin: 0 !important;
	font-size: 0.9375rem !important;
	line-height: 1.6 !important;
	color: var(--eureko-muted) !important;
	text-align: left !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories {
	margin-top: 1rem !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category {
	margin-bottom: 0.5rem !important;
	background: var(--eureko-cream) !important;
	border-radius: var(--eureko-radius-s) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title {
	font-family: var(--eureko-font-body) !important;
	font-weight: 600 !important;
	color: var(--eureko-text) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-always-active {
	color: var(--eureko-primary) !important;
	font-weight: 600;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description {
	font-size: 0.875rem !important;
	line-height: 1.5 !important;
	color: var(--eureko-muted) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-banner-checkbox input + .cmplz-label::before {
	background-color: #c9ccd1 !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-banner-checkbox input:checked + .cmplz-label::before {
	background-color: var(--eureko-primary) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle {
	width: auto !important;
	height: auto !important;
	margin-left: 0.5rem;
	padding: 0.25rem !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--eureko-text) !important;
	cursor: pointer;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle svg {
	fill: currentColor;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 0.625rem !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
	width: 100% !important;
	height: auto !important;
	min-height: 3rem;
	margin: 0 !important;
	padding: 0.75rem 1.25rem !important;
	font-family: var(--eureko-font-heading) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: 1px;
	line-height: 1.1 !important;
	background: transparent !important;
	color: var(--eureko-text) !important;
	border: 2px solid var(--eureko-text) !important;
	border-radius: var(--eureko-radius-pill) !important;
	cursor: pointer;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:hover {
	border-color: var(--eureko-primary) !important;
	color: var(--eureko-primary) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	background: var(--eureko-primary) !important;
	border-color: var(--eureko-primary) !important;
	color: var(--eureko-white) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
	background: var(--eureko-primary-hover) !important;
	border-color: var(--eureko-primary-hover) !important;
}
/* „Zobrazit předvolby" — a quiet text link across the full width */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
	grid-column: 1 / -1;
	min-height: 0;
	padding: 0.25rem !important;
	border: 0 !important;
	font-family: var(--eureko-font-body) !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	letter-spacing: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
	grid-column: 1 / -1;
}
@media (max-width: 767px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		width: auto !important;
		max-width: none !important;
		left: 0.75rem !important;
		right: 0.75rem !important;
		bottom: 0.75rem !important;
		padding: 1.25rem !important;
	}
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
		display: block !important;
		font-size: 1.25rem !important;
	}
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
		max-height: 40vh;
	}
}
#cmplz-manage-consent .cmplz-manage-consent {
	font-family: var(--eureko-font-body) !important;
	font-weight: 600 !important;
	background: var(--eureko-white) !important;
	color: var(--eureko-text) !important;
	border: 1px solid var(--eureko-border) !important;
	box-shadow: var(--eureko-shadow-md) !important;
}