/*!
Theme Name: Kittler Dent
Theme URI: http://underscores.me/
Author: Gameplan
Author URI: http://underscores.me/
Description: Custom WordPress theme for Kittler Dent dental clinic in Liberec.
Version: 1.0.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kittler-dent
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Kittler Dent is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ==========================================================================
   Design Tokens — extracted from Figma (KittlerDent)
   Breakpoints: 2-tier (desktop + mobile@1024)
   ========================================================================== */

:root {
	/* ----- Colors ----- */
	--color-black: #1c1c1c;
	--color-white: #ffffff;
	--color-bronze: #cc6633;
	--color-bronze-hover: #b8440a;
	--color-ivory: #ebe8e1;
	--color-peroxid: #f6f6f6;
	--color-porcelain: #ebdbce;
	--color-border: #d6d6d6;
	--color-border-dark: #333333;
	--color-text-muted: rgba(255, 255, 255, 0.7);
	--color-text-muted-dark: rgba(0, 0, 0, 0.7);
	--color-text-faded: rgba(0, 0, 0, 0.5);
	--color-border-light: rgba(255, 255, 255, 0.25);
	--color-input-border: rgba(255, 255, 255, 0.1);
	--color-card-dark: #2b2b2b;
	--color-green: #22c55e;
	--color-red: #ef4444;

	/* ----- Font families ----- */
	--font-family-heading: 'Mundial', sans-serif;
	--font-family-base: 'Mundial', sans-serif;

	/* ----- Font sizes ----- */
	--font-size-xs: 13px;
	--font-size-sm: 14px;
	--font-size-base: 16px;
	--font-size-lg: 18px;
	--font-size-xl: 22px;
	--font-size-2xl: 30px;
	--font-size-section-h: 40px;
	--font-size-row-h: 34px;
	--font-size-h4: 25px;
	--font-size-h5: 20px;
	--font-size-h6: 24px;
	--font-size-post-h5: 26px;
	--font-size-3xl: 40px;
	--font-size-4xl: 50px;
	--font-size-5xl: 70px;

	/* ----- Font weights ----- */
	--font-weight-thin: 100;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-bold: 700;

	/* ----- Line heights ----- */
	--line-height-none: 1;
	--line-height-tight: 1.2;
	--line-height-snug: 1.4;
	--line-height-base: 1.7;
	--line-height-medium: 1.6;
	--line-height-relaxed: 1.8;
	--line-height-loose: 2;

	/* ----- Letter spacing ----- */
	--letter-spacing-none: 0;
	--letter-spacing-body: 0.8px;
	--letter-spacing-label: 1.2px;
	--letter-spacing-caps: 1.4px;

	/* ----- Spacing (4px grid) ----- */
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-2xl: 40px;
	--spacing-3xl: 48px;
	--spacing-4xl: 64px;
	--spacing-5xl: 80px;
	--spacing-6xl: 96px;
	--spacing-7xl: 140px;
	--spacing-8xl: 120px;
	--spacing-hero-label-gap: 34px;
	--spacing-hero-title-gap: 50px;

	/* ----- Layout ----- */
	--max-width-boxed: 1460px;
	--max-width-site: 1920px;
	--spacing-section-x: 30px;
	--container-x: max(var(--spacing-section-x), calc((100vw - var(--max-width-boxed)) / 2 + var(--spacing-section-x)));
	--spacing-header-x: 40px;

	/* ----- Radius ----- */
	--radius-none: 0;
	--radius-full: 200px;

	/* ----- Shadows ----- */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);

	/* ----- Header height (for hero padding offset) ----- */
	--header-height: 96px;

	/* ----- Z-index ----- */
	--z-index-header: 100;
	--z-index-modal: 200;
	--z-index-toast: 300;

	/* ----- Transitions ----- */
	--transition-fast: 0.15s ease;
	--transition-base: 0.3s ease;

	/* ----- Overlays ----- */
	--color-overlay-dark: rgba(0, 0, 0, 0.4);
	--color-overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.8) 100%);

	/* ----- Letter spacing (additional) ----- */
	--letter-spacing-sm: 0.65px;
	--letter-spacing-wide: 1.6px;
	--letter-spacing-xl: 2px;
	--letter-spacing-2xl: 2.4px;
}

/* ==========================================================================
   Base Reset
   ========================================================================== */

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

html,
body {
	margin: 0;
	padding: 0;
	background-color: var(--color-peroxid);
}

p {
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

a {
	text-decoration-thickness: 0.5px;
}

/* ==========================================================================
   @font-face — Mundial (self-hosted)
   Drop font files into assets/fonts/ and uncomment relevant formats.
   ========================================================================== */

@font-face {
	font-family: 'Mundial';
	src: url('assets/fonts/MundialThin.woff2') format('woff2');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Mundial';
	src: url('assets/fonts/MundialLight.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Mundial';
	src: url('assets/fonts/MundialRegular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Mundial';
	src: url('assets/fonts/MundialBold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Mundial';
	src: url('assets/fonts/MundialBoldItalic.otf') format('opentype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* ==========================================================================
   Responsive Token Overrides — Mobile (max-width: 1024px)
   Extracted from Figma mobile frame (node 240:17242, canvas 390px)
   ========================================================================== */

@media (max-width: 1024px) {
	:root {
		/* ----- Font sizes (mobile) ----- */
		--font-size-5xl: 40px;
		--font-size-4xl: 30px;
		--font-size-3xl: 28px;
		--font-size-section-h: 26px;
		--font-size-row-h: 22px;
		--font-size-2xl: 24px;
		--font-size-xl: 16px;
		--font-size-lg: 16px;
		--font-size-post-h5: 20px;

		/* ----- Layout (mobile) ----- */
		--spacing-section-x: 16px;
		--spacing-header-x: 16px;
		--header-height: 68px;
	}
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.u-section {
	width: 100%;
	padding-left: var(--spacing-section-x);
	padding-right: var(--spacing-section-x);
}

@media (max-width: 1024px) {
	.u-section {
		padding-left: var(--spacing-section-x);
		padding-right: var(--spacing-section-x);
	}
}

.u-boxed {
	width: 100%;
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
}

.u-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Component: Button (c-btn)
   Figma guide node 292:3932 — 6 variants, all backgrounds
   ========================================================================== */

.c-btn {
	--_btn-py: 20px;
	--_btn-px: var(--spacing-xl);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-md);
	padding: var(--_btn-py) var(--_btn-px);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color var(--transition-fast),
	            border-color var(--transition-fast),
	            color var(--transition-fast);
}

.c-btn:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

/* Primary — bronze fill, white text */
.c-btn--primary {
	background-color: var(--color-bronze);
	color: var(--color-white);
	border-color: var(--color-bronze);
}

.c-btn--primary:hover {
	background-color: var(--color-bronze-hover);
	border-color: var(--color-bronze-hover);
}

/* Primary outline — bronze border, white text (on dark bg) */
.c-btn--primary-outline {
	background-color: transparent;
	color: var(--color-white);
	border-color: var(--color-bronze);
}

.c-btn--primary-outline:hover {
	background-color: var(--color-bronze);
}

/* Outline light — translucent white border (on dark/image bg) */
.c-btn--outline-light {
	background-color: transparent;
	color: var(--color-white);
	border-color: var(--color-border-light);
}

.c-btn--outline-light:hover {
	border-color: var(--color-white);
}

/* Outline — gray border, dark text (on light bg) */
.c-btn--outline {
	background-color: transparent;
	color: var(--color-black);
	border-color: var(--color-border);
}

.c-btn--outline:hover {
	border-color: var(--color-black);
}

/* White — white fill, dark text (on colored/image bg) */
.c-btn--white {
	background-color: var(--color-white);
	color: var(--color-black);
	border-color: var(--color-white);
}

.c-btn--white:hover {
	background-color: var(--color-porcelain);
	border-color: var(--color-porcelain);
}

/* Ghost — no fill/border, underline text */
.c-btn--ghost {
	background-color: transparent;
	color: var(--color-black);
	border-color: transparent;
	text-decoration: underline;
}

.c-btn--ghost:hover {
	color: var(--color-bronze);
}

/* Ghost light — on dark bg */
.c-btn--ghost-light {
	background-color: transparent;
	color: var(--color-white);
	border-color: transparent;
	text-decoration: underline;
}

.c-btn--ghost-light:hover {
	color: var(--color-bronze);
}

/* Button arrow */
.c-btn__arrow {
	width: auto;
	height: 14px;
	flex-shrink: 0;
}

/* Button badge (open-positions count, same visual as header kariéra badge) */
.c-btn__badge {
	position: absolute;
	top: -10px;
	right: -10px;
	min-width: 22px;
	height: 20px;
	padding: 0 5px;
	background-color: var(--color-bronze);
	color: var(--color-white);
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* ==========================================================================
   Component: Hero (c-hero)
   Figma desktop node 161:527 (1920×1000), mobile node 240:17243 (390×619)
   ========================================================================== */

.c-hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	color: var(--color-white);
}

.c-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--bg-pos, center center);
}

@media (max-width: 1024px) {
	.c-hero__bg {
		object-position: var(--bg-pos-mobile, var(--bg-pos, center center));
	}
}

.c-hero__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--color-overlay-dark);
}

/* Background MP4 video — native <video>, object-fit covers the hero. */
.c-hero__video-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.c-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	pointer-events: none;
}

.c-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: 1fr auto;
	grid-template-columns: auto 1fr;
	row-gap: var(--spacing-hero-title-gap);
	height: 100%;
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	padding-bottom: var(--spacing-5xl);
}

/* --- Content block --- */

.c-hero__content {
	grid-row: 1;
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	max-width: 550px;
	gap: 0;
}

.c-hero__label {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	line-height: var(--line-height-none);
	margin-bottom: var(--spacing-hero-label-gap);
}

.c-hero__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-white);
	margin: 0 0 var(--spacing-hero-title-gap);
}

.c-hero__subtitle {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-thin);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-label);
	margin: 0 0 var(--spacing-hero-title-gap);
}

.c-hero__actions {
	display: flex;
	gap: var(--spacing-xl);
}

/* --- Bottom row (badge + meta) --- */

.c-hero__badge {
	--_badge-py: 12px;
	grid-row: 2;
	grid-column: 1;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--_badge-py) var(--spacing-lg);
	background-color: var(--color-ivory);
	border-radius: var(--radius-full);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-caps);
	color: var(--color-black);
}

.c-hero__badge-icon {
	width: var(--spacing-md);
	height: var(--spacing-md);
	flex-shrink: 0;
	color: var(--color-bronze);
}

.c-hero__meta {
	grid-row: 2;
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: var(--spacing-3xl);
	padding-left: var(--spacing-3xl);
}

/* --- Google rating --- */

.c-hero__google {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	text-decoration: none;
	color: var(--color-white);
}

.c-hero__google:hover {
	color: var(--color-white);
}

.c-hero__google-logo {
	--_google-logo-h: calc(var(--font-size-base) + 3px + var(--font-size-sm));
	width: auto;
	height: var(--_google-logo-h);
	flex-shrink: 0;
}

.c-hero__google-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.c-hero__google-rating {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.c-hero__google-score {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-wide);
	line-height: var(--line-height-none);
}

.c-hero__google-stars {
	display: flex;
	gap: 2px;
	color: var(--color-white);
}

.c-hero__google-stars svg {
	width: var(--spacing-md);
	height: var(--spacing-md);
}

.c-hero__google-count {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-thin);
	letter-spacing: var(--letter-spacing-caps);
	text-decoration: underline;
	line-height: var(--line-height-none);
}

/* --- Avatars --- */

.c-hero__avatars {
	display: flex;
}

.c-hero__avatar {
	--_overlap: 14px;
	width: var(--spacing-3xl);
	height: var(--spacing-3xl);
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-white);
}

.c-hero__avatar + .c-hero__avatar {
	margin-left: calc(-1 * var(--_overlap));
}

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

@media (max-width: 1024px) {
	.c-hero {
		height: auto;
		min-height: 100vh;
		min-height: 100svh;
	}

	.c-hero__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		text-align: center;
		min-height: 100svh;
		row-gap: 0;
		padding: var(--spacing-4xl) var(--spacing-section-x) var(--spacing-3xl);
	}

	.c-hero__badge {
		order: -1;
		margin-bottom: var(--spacing-md);
	}

	.c-hero__content {
		max-width: 300px;
		align-items: center;
	}

	.c-hero__label {
		margin-bottom: var(--spacing-md);
	}

	.c-hero__title {
		margin: 0 0 var(--spacing-lg);
	}

	.c-hero__subtitle {
		margin: 0 0 var(--spacing-xl);
	}

	.c-hero__actions {
		flex-direction: column;
		gap: var(--spacing-md);
		width: 100%;
	}

	.c-hero__actions .c-btn {
		width: 100%;
		justify-content: center;
	}

	.c-hero__meta {
		padding-left: 0;
		gap: var(--spacing-lg);
		margin-top: var(--spacing-lg);
		text-align: left;
	}
}

/* ==========================================================================
   Component: Hero Page (c-hero-page)
   Figma desktop node 182:20027, mobile node 240:17562
   Fixed-height hero for interior pages. Breadcrumb at top, content centred,
   badge + meta at bottom. Mobile: left-aligned, breadcrumb collapses to back arrow + home icon.
   ========================================================================== */

.c-hero-page {
	position: relative;
	min-height: 800px;
	height: 800px;
	overflow: hidden;
	color: var(--color-white);
}

.c-hero-page__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--bg-pos, center center);
}

@media (max-width: 1024px) {
	.c-hero-page__bg {
		object-position: var(--bg-pos-mobile, var(--bg-pos, center center));
	}
}

.c-hero-page__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--color-overlay-dark);
}

.c-hero-page__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: auto 1fr;
	row-gap: var(--spacing-hero-title-gap);
	height: 100%;
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: calc(var(--header-height) + var(--spacing-xl)) var(--spacing-section-x) var(--spacing-5xl);
}

/* --- Breadcrumb --- */

.c-hero-page__breadcrumb {
	grid-row: 1;
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.c-hero-page__breadcrumb-back {
	display: none;
	align-items: center;
	color: var(--color-white);
	text-decoration: none;
}

.c-hero-page__breadcrumb-home {
	display: flex;
	align-items: center;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.c-hero-page__breadcrumb-home:hover {
	color: var(--color-white);
}

.c-hero-page__breadcrumb-sep {
	flex-shrink: 0;
	color: var(--color-text-muted);
}

.c-hero-page__breadcrumb-current {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	line-height: var(--line-height-none);
	color: var(--color-white);
}

/* Sluzba single — extra breadcrumb level (always visible) */

.c-hero-page__breadcrumb-sep-parent {
	flex-shrink: 0;
	color: var(--color-text-muted);
}

.c-hero-page__breadcrumb-parent {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	line-height: var(--line-height-none);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.c-hero-page__breadcrumb-parent:hover {
	color: var(--color-white);
}

/* --- Badge (bottom-left on desktop) --- */

.c-hero-page__badge {
	--_badge-py: 12px;
	grid-row: 3;
	grid-column: 1;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--_badge-py) var(--spacing-lg);
	background-color: var(--color-ivory);
	border-radius: var(--radius-full);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-caps);
	color: var(--color-black);
}

.c-hero-page__badge-icon {
	width: var(--spacing-md);
	height: var(--spacing-md);
	flex-shrink: 0;
	color: var(--color-bronze);
}

/* --- Content block --- */

.c-hero-page__content {
	grid-row: 2;
	grid-column: 1 / -1;
	align-self: end;
	display: flex;
	flex-direction: column;
	max-width: 550px;
	gap: 0;
}

.c-hero-page__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-white);
	margin: 0;
}

.c-hero-page__subtitle {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-thin);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-label);
	margin: var(--spacing-hero-title-gap) 0 0;
}

.c-hero-page__actions {
	display: flex;
	gap: var(--spacing-xl);
	margin-top: var(--spacing-hero-title-gap);
}

/* --- Meta (bottom-right on desktop) --- */

.c-hero-page__meta {
	grid-row: 3;
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: var(--spacing-3xl);
	padding-left: var(--spacing-3xl);
}

.c-hero-page__google {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	text-decoration: none;
	color: var(--color-white);
}

.c-hero-page__google:hover {
	color: var(--color-white);
}

.c-hero-page__google-logo {
	--_google-logo-h: calc(var(--font-size-base) + 3px + var(--font-size-sm));
	width: auto;
	height: var(--_google-logo-h);
	flex-shrink: 0;
}

.c-hero-page__google-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.c-hero-page__google-rating {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.c-hero-page__google-score {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-wide);
	line-height: var(--line-height-none);
}

.c-hero-page__google-stars {
	display: flex;
	gap: 2px;
	color: var(--color-white);
}

.c-hero-page__google-stars svg {
	width: var(--spacing-md);
	height: var(--spacing-md);
}

.c-hero-page__google-count {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-thin);
	letter-spacing: var(--letter-spacing-caps);
	text-decoration: underline;
	line-height: var(--line-height-none);
}

.c-hero-page__avatars {
	display: flex;
}

.c-hero-page__avatar {
	--_overlap: 14px;
	width: var(--spacing-3xl);
	height: var(--spacing-3xl);
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-white);
}

.c-hero-page__avatar + .c-hero-page__avatar {
	margin-left: calc(-1 * var(--_overlap));
}

/* --- Hero Page mobile --- */

@media (max-width: 1024px) {
	.c-hero-page {
		height: auto;
		min-height: 700px;
	}

	.c-hero-page__inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		min-height: 700px;
		row-gap: 0;
		padding: var(--header-height) var(--spacing-section-x) var(--spacing-3xl);
	}

	.c-hero-page__breadcrumb {
		gap: var(--spacing-sm);
		margin-bottom: auto;
	}

	.c-hero-page__breadcrumb-back {
		display: flex;
	}

	.c-hero-page__breadcrumb-sep,
	.c-hero-page__breadcrumb-current {
		display: none;
	}

	.c-hero-page__badge {
		align-self: flex-start;
		margin-top: 0;
		margin-bottom: var(--spacing-md);
	}

	.c-hero-page__content {
		align-self: auto;
		padding-bottom: 0;
		max-width: 100%;
		width: 100%;
		align-items: flex-start;
		text-align: left;
	}

	.c-hero-page__subtitle {
		margin-top: var(--spacing-lg);
	}

	.c-hero-page__actions {
		flex-direction: column;
		gap: var(--spacing-md);
		width: 100%;
		margin-top: var(--spacing-xl);
	}

	.c-hero-page__actions .c-btn {
		width: 100%;
		justify-content: center;
	}

	.c-hero-page__meta {
		padding-left: 0;
		gap: var(--spacing-lg);
		margin-top: var(--spacing-lg);
	}
}

/* ==========================================================================
   Modifier: No badge (c-hero-page--no-badge)
   When badge_text is empty — meta spans full bottom row, no left indent.
   ========================================================================== */

.c-hero-page--no-badge .c-hero-page__meta {
	grid-column: 1 / -1;
	padding-left: 0;
}

/* ==========================================================================
   Modifier: Hero Recenze (c-hero-page--recenze)
   Pouze breadcrumb + nadpis + podnadpis (bez CTA, badge, Google, avatarů).
   ========================================================================== */

.c-hero-page--recenze .c-hero-page__badge,
.c-hero-page--recenze .c-hero-page__actions,
.c-hero-page--recenze .c-hero-page__meta {
	display: none;
}

.c-hero-page--recenze .c-hero-page__inner {
	padding-bottom: calc(var(--spacing-5xl) + 10px);
}

@media (max-width: 1024px) {
	.c-hero-page--recenze .c-hero-page__inner {
		padding-bottom: calc(var(--spacing-4xl) + var(--spacing-4xl));
	}
}

/* ==========================================================================
   Reviews Badges (c-reviews-badges)
   Grid 4 karet s ratings, překrývá hranici mezi hero a obsahem pod ním
   (horní polovina v hero, dolní polovina v následující sekci).
   ========================================================================== */

.c-reviews-badges {
	--_badge-pull: 90px;
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * var(--_badge-pull));
	padding: 0 var(--container-x);
}

.c-reviews-badges__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-lg);
	max-width: var(--max-width-boxed);
	margin: 0 auto;
}

.c-reviews-badges__item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	padding: var(--spacing-2xl);
	background-color: var(--color-white);
	color: var(--color-black);
	text-decoration: none;
	transition: box-shadow var(--transition-fast);
}

a.c-reviews-badges__item:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.c-reviews-badges__name {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	color: var(--color-black);
	margin: 0;
}

.c-reviews-badges__row {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	width: 100%;
}

.c-reviews-badges__logo {
	flex-shrink: 0;
	width: var(--spacing-2xl);
	height: var(--spacing-2xl);
	object-fit: contain;
}

.c-reviews-badges__score {
	font-family: var(--font-family-base);
	font-size: var(--font-size-section-h);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-none);
	color: var(--color-black);
	flex-shrink: 0;
}

.c-reviews-badges__meta {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	min-width: 0;
}

.c-reviews-badges__stars {
	display: flex;
	gap: 2px;
	color: var(--color-bronze);
}

.c-reviews-badges__star {
	position: relative;
	display: inline-flex;
	line-height: 0;
}

.c-reviews-badges__star--empty {
	opacity: 0.2;
}

.c-reviews-badges__star--half > svg:first-child {
	opacity: 0.2;
}

.c-reviews-badges__star-fill {
	position: absolute;
	top: 0;
	left: 0;
	clip-path: inset(0 50% 0 0);
}

.c-reviews-badges__count {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	color: var(--color-black);
	text-decoration: underline;
}

/* --- Mobile --- */

@media (max-width: 1024px) {
	.c-reviews-badges {
		--_badge-pull: var(--spacing-4xl);
	}

	.c-reviews-badges__inner {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	.c-reviews-badges__item {
		padding: var(--spacing-xl);
	}
}

/* ==========================================================================
   Modifier: Hero Kariéra (c-hero-page--kariera)
   Desktop: title (flex:1, left) + button (right) in one flex row at bottom.
   Mobile: inherits base hero-page mobile — title full-width, button full-width.
   ========================================================================== */

.c-hero-page--kariera .c-hero-page__inner {
	row-gap: 0;
}

.c-hero-page--kariera .c-hero-page__content {
	flex-direction: column;
	align-items: flex-start;
	max-width: none;
	gap: var(--spacing-xl);
}

.c-hero-page--kariera .c-hero-page__title {
	width: 100%;
}

.c-hero-page--kariera .c-hero-page__actions {
	align-self: flex-end;
	margin-top: 0;
}

@media ( max-width: 1024px ) {

	.c-hero-page--kariera .c-hero-page__content {
		flex-direction: column;
		align-items: flex-start;
		max-width: 100%;
		gap: var(--spacing-lg);
	}

	.c-hero-page--kariera .c-hero-page__actions {
		margin-top: 0;
		width: 100%;
	}
}

/* ==========================================================================
   Modifier: Hero Team (c-hero-page--team)
   Figma desktop nodes 182:20859 (title), 182:20860 (subtitle), 182:21077 (quote box)
   Figma mobile nodes 240:19353 (title), 240:19354 (subtitle), 240:19358 (quote text)
   Desktop: breadcrumb top-left + title + subtitle bottom-left.
            Quote box bottom-right, bleeds into section below.
   Mobile: same layout, quote box narrower (not full-width), bleeds below.
   NOTE: section overflow:visible requires .c-hero-team__bg-clip to clip bg image.
   NOTE: next section needs padding-top ~200px to clear the bleeding quote box.
   ========================================================================== */

.c-hero-page--team {
	overflow: visible; /* Quote box bleeds into section below */
}

/* Inner clip wrapper — keeps bg image/overlay within hero bounds */
.c-hero-team__bg-clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Title + subtitle stack vertically, left 50% of inner */
.c-hero-page--team .c-hero-page__content {
	flex-direction: column;
	max-width: 50%;
}

/* Subtitle: larger than base xl — matches Figma 32px */
.c-hero-page--team .c-hero-page__subtitle {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
}

/* --- Quote box --- */

.c-hero-team__quote {
	position: absolute;
	bottom: -180px;
	right: var(--container-x);
	width: calc(50vw - var(--container-x));
	background-color: var(--color-white);
	padding: var(--spacing-4xl);
	display: flex;
	gap: var(--spacing-lg);
	align-items: flex-start;
	z-index: 2;
}

.c-hero-team__quote-icon {
	flex-shrink: 0;
	color: var(--color-bronze);
	margin-top: 6px;
}

.c-hero-team__quote-body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.c-hero-team__quote-text {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-row-h);
	font-weight: var(--font-weight-bold);
	font-style: italic;
	line-height: var(--line-height-tight);
	color: var(--color-black);
	margin: 0;
	padding: 0;
}

.c-hero-team__quote-author {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	line-height: var(--line-height-none);
	color: var(--color-text-muted-dark);
	font-style: normal;
}

@media (max-width: 1024px) {
	.c-hero-page--team .c-hero-page__content {
		max-width: 100%;
		width: 100%;
	}

	.c-hero-page--team .c-hero-page__subtitle {
		font-size: var(--font-size-lg);
	}

	.c-hero-team__quote {
		right: var(--spacing-section-x);
		left: var(--spacing-section-x);
		width: auto;
		bottom: -100px;
		padding: var(--spacing-xl);
	}
}

/* ==========================================================================
   Component: Kariéra — Informace o pozici (c-kariera-info)
   Figma: node 182-19634 (intro) + 182-19635 (bullet sections)
   Three fixed-heading bullet groups with admin-editable items per post.
   Width: ~80% of max-width-boxed, centered.
   ========================================================================== */

.c-kariera-info {
	padding: var(--spacing-5xl) 0;
	background-color: var(--color-peroxid);
}

.c-kariera-info__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: flex;
	justify-content: center;
}

.c-kariera-info__content {
	width: 100%;
	max-width: calc(var(--max-width-boxed) * 0.8);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2xl);
}

.c-kariera-info__block {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-kariera-info__divider {
	width: 100%;
	height: 2px;
	background-color: var(--color-bronze);
}

.c-kariera-info__intro {
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-xl);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
}

.c-kariera-info__heading {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-section-h);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
}

.c-kariera-info__list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--spacing-3xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-kariera-info__item {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
}

.c-kariera-info__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.c-kariera-info__text {
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-black);
}

/* ==========================================================================
   c-kariera-info — Mobile (max-width: 1024px)
   ========================================================================== */

@media ( max-width: 1024px ) {

	.c-kariera-info {
		padding: var(--spacing-3xl) 0;
	}

	.c-kariera-info__content {
		max-width: 100%;
	}

	.c-kariera-info__list {
		padding-left: 0;
	}

	.c-kariera-info__item {
		align-items: flex-start;
	}
}

/* ==========================================================================
   Component: Kdo je Kittler Dent (c-kdo-jsme)
   Figma: node 182-19710 (heading) + 182-19712/17/22/27 (4 zigzag rows)
   Global section — 4 alternating content+image rows with centred H2 above.
   Width: ~80 % of max-width-boxed, centred. Rows reversed every other.
   ========================================================================== */

.c-kdo-jsme {
	padding: var(--spacing-5xl) 0;
	background-color: var(--color-peroxid);
}

.c-kdo-jsme__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: flex;
	justify-content: center;
}

.c-kdo-jsme__content {
	width: 100%;
	max-width: calc(var(--max-width-boxed) * 0.8);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2xl);
}

.c-kdo-jsme__heading {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-section-h);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	text-align: center;
}

/* --- Rows --- */

.c-kdo-jsme__rows {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2xl);
}

.c-kdo-jsme__row {
	display: flex;
	align-items: center;
}

.c-kdo-jsme__row--reversed {
	flex-direction: row-reverse;
}

/* --- Content col --- */

.c-kdo-jsme__col-content {
	flex: 0 0 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	padding-right: var(--spacing-2xl);
}

.c-kdo-jsme__row--reversed .c-kdo-jsme__col-content {
	padding-right: 0;
	padding-left: var(--spacing-2xl);
}

.c-kdo-jsme__row-title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-row-h);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
}

.c-kdo-jsme__row-text {
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
}

/* --- Image col --- */

.c-kdo-jsme__col-image {
	flex: 0 0 50%;
	min-width: 0;
}

.c-kdo-jsme__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* ==========================================================================
   c-kdo-jsme — Mobile (max-width: 1024px)
   Content always first, image below.
   ========================================================================== */

@media ( max-width: 1024px ) {

	.c-kdo-jsme {
		padding: var(--spacing-3xl) 0;
	}

	.c-kdo-jsme__content {
		max-width: 100%;
		gap: var(--spacing-xl);
	}

	.c-kdo-jsme__rows {
		gap: var(--spacing-xl);
	}

	.c-kdo-jsme__row,
	.c-kdo-jsme__row--reversed {
		flex-direction: column;
		gap: var(--spacing-lg);
	}

	.c-kdo-jsme__col-content,
	.c-kdo-jsme__row--reversed .c-kdo-jsme__col-content {
		gap: var(--spacing-md);
		padding-left: 0;
		padding-right: 0;
	}
}

/* ==========================================================================
   Component: Kariéra — Kontaktní formulář (c-kariera-form)
   Dark-background application form on single-kariera posts.
   Section ID #mam-zajem — anchor from hero CTA.
   Placeholder form — to be replaced with Contact Form 7.
   ========================================================================== */

.c-kariera-form {
	--_field-py: 20px;
	background-color: var(--color-peroxid);
}

.c-kariera-form__inner {
	max-width: calc(var(--max-width-boxed) * 0.8);
	margin: 0 auto;
	padding: var(--spacing-5xl) var(--spacing-3xl);
	background-color: var(--color-black);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

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

.c-kariera-form__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-section-h);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-xl);
	color: var(--color-white);
	margin: 0;
}

.c-kariera-form__title--mobile {
	display: none;
}

.c-kariera-form__subtitle {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-white);
	margin: 0;
}

/* ---- Grid & rows ---- */

.c-kariera-form__grid {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.c-kariera-form__row--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
	align-items: end;
}

.c-kariera-form__row--footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
}

/* ---- Inputs ---- */

.c-kariera-form__input {
	display: block;
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--color-input-border);
	color: var(--color-white);
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	line-height: var(--line-height-none);
	padding: var(--_field-py) 0;
	outline: none;
	transition: border-color var(--transition-fast);
}

.c-kariera-form__input::placeholder {
	color: var(--color-white);
	opacity: 1;
}

.c-kariera-form__input:focus {
	border-bottom-color: var(--color-bronze);
}

.c-kariera-form__input--textarea {
	resize: vertical;
	min-height: 109px;
	line-height: var(--line-height-base);
}

/* ---- File input ---- */

.c-kariera-form__field-wrap--file {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	border-bottom: 1px solid var(--color-input-border);
	padding: var(--_field-py) 0;
}

.c-kariera-form__file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.c-kariera-form__file-name {
	flex: 1;
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	line-height: var(--line-height-none);
	color: var(--color-white);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.c-kariera-form__file-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 38px;
	padding: 0 var(--spacing-xl);
	border: 1px solid var(--color-border-light);
	color: var(--color-white);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}

.c-kariera-form__file-btn:hover {
	border-color: var(--color-bronze);
	color: var(--color-bronze);
}

/* ---- Disclaimer + submit ---- */

.c-kariera-form__disclaimer {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-sm);
	line-height: var(--line-height-base);
	color: var(--color-white);
	text-decoration: none;
}

.c-kariera-form__disclaimer:hover {
	text-decoration: underline;
}

.c-kariera-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: var(--_field-py) var(--spacing-xl);
	background-color: var(--color-bronze);
	color: var(--color-white);
	border: none;
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.c-kariera-form__submit:hover {
	background-color: var(--color-bronze-hover);
}

/* ==========================================================================
   c-kariera-form — Mobile (max-width: 1024px)
   ========================================================================== */

@media ( max-width: 1024px ) {

	.c-kariera-form__inner {
		padding: var(--spacing-3xl) var(--spacing-md);
	}

	.c-kariera-form__title--desktop {
		display: none;
	}

	.c-kariera-form__title--mobile {
		display: block;
	}

	.c-kariera-form__row--2col {
		grid-template-columns: 1fr;
	}

	.c-kariera-form__row--footer {
		flex-direction: column;
		align-items: stretch;
	}

	.c-kariera-form__submit {
		width: 100%;
	}
}

/* ==========================================================================
   Component: Team (c-team)
   Figma desktop node 161:789 (1917×1000), mobile node 240:17498 (390×820)
   Full-height section with directional gradient overlay, badge at top, content at bottom.
   ========================================================================== */

.c-team {
	position: relative;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	color: var(--color-white);
}

.c-team__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-team__overlay {
	position: absolute;
	inset: 0;
	/* Desktop: transparent right (photo visible), dark left (text area) */
	background: linear-gradient(to left, rgba(0, 0, 0, 0) 43.9%, rgba(0, 0, 0, 0.4) 66.3%);
}

.c-team__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: var(--spacing-5xl) var(--spacing-section-x) calc(var(--spacing-5xl) + var(--spacing-3xl));
}

/* --- Badge (top) --- */

.c-team__badge {
	--_badge-py: 12px;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--_badge-py) var(--spacing-lg);
	background-color: var(--color-ivory);
	border-radius: var(--radius-full);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-caps);
	color: var(--color-black);
}

.c-team__badge-icon {
	width: var(--spacing-md);
	height: var(--spacing-md);
	flex-shrink: 0;
	color: var(--color-bronze);
}

/* --- Content (bottom) --- */

.c-team__content {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-hero-title-gap);
	max-width: 540px;
}

.c-team__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-white);
	margin: 0;
}

.c-team__subtitle {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-thin);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-label);
	margin: 0;
}

.c-team__actions {
	display: flex;
	gap: var(--spacing-md);
}

/* --- Team mobile --- */

@media (max-width: 1024px) {
	.c-team__overlay {
		/* Mobile: transparent top, dark bottom (text area) */
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44.2%, rgba(0, 0, 0, 0.4) 68%);
	}

	.c-team__inner {
		padding: var(--spacing-5xl) var(--spacing-section-x) var(--spacing-4xl);
	}

	.c-team__content {
		max-width: 100%;
	}

	.c-team__actions {
		flex-direction: column;
		gap: var(--spacing-md);
	}

	.c-team__title {
		font-size: var(--font-size-3xl);
	}

	.c-team__actions .c-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Component: USP Bar (c-usp)
   Figma node 161:571 — 4 items, icon + text, reusable on any page
   ========================================================================== */

.c-usp {
	width: 100%;
	padding: var(--spacing-4xl) 0;
	  background: var(--Peroxid, #F6F6F6);
}

.c-usp__inner {
	width: 100%;
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
}

.c-usp__list {
	display: flex;
	align-items: center;
	gap: var(--spacing-xl);
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-usp__item {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	flex: 1;
}

.c-usp__icon {
	width: var(--spacing-lg);
	height: var(--spacing-lg);
	flex-shrink: 0;
	color: var(--color-bronze);
}

.c-usp__text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-none);
	color: var(--color-black);
}

/* Dark variant — for use on dark-background sections */
.c-usp--dark {
	background-color: var(--color-black);
}

.c-usp--dark .c-usp__text {
	color: var(--color-white);
}

/* --- USP mobile --- */

@media (max-width: 1024px) {
	.c-usp {
		padding: var(--spacing-2xl) 0;
	}

	.c-usp__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-md);
	}

	.c-usp__item {
		flex: none;
		width: 100%;
	}
}

/* ==========================================================================
   Component: Services Slider (c-services)
   Figma nodes: 161:588 (desktop section), 161:593 (card), 240:17297 (mobile)
   Desktop: 4 cards visible + 1 partial peek. Mobile: 1 card + peek.
   ========================================================================== */

.c-services {
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
	overflow: hidden;
}

/* --- Header --- */

.c-services__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--spacing-4xl);
	padding: 0 var(--spacing-section-x);
}

.c-services__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0;
	max-width: calc(var(--max-width-boxed) / 2);
}

.c-services__all-link {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-md);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--color-black);
	white-space: nowrap;
	flex-shrink: 0;
	transition: color var(--transition-fast);
}

.c-services__all-link:hover {
	color: var(--color-bronze);
}

.c-services__all-arrow {
	flex-shrink: 0;
}

/* --- Track --- */

.c-services__track {
	display: flex;
	gap: var(--spacing-lg);
	padding: 0 0 0 var(--container-x);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--container-x);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.c-services__track::-webkit-scrollbar {
	display: none;
}

/* --- Card --- */

.c-services__item {
	--_card-w: calc((var(--max-width-boxed) - 3 * var(--spacing-lg)) / 4);
	flex: 0 0 var(--_card-w);
	width: var(--_card-w);
	aspect-ratio: 2 / 3;
	position: relative;
	overflow: hidden;
	scroll-snap-align: start;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

.c-services__item:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: -2px;
}

.c-services__image-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.c-services__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-base);
}

.c-services__item:hover .c-services__image {
	transform: scale(1.04);
}

.c-services__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-overlay-gradient);
}

.c-services__content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--spacing-xl);
	color: var(--color-white);
	transition: transform var(--transition-base);
}

.c-services__item:hover .c-services__content,
.c-services__item:focus .c-services__content,
.c-services__item.is-active .c-services__content {
	transform: translateY(calc(-1 * var(--spacing-5xl)));
}

.c-services__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--spacing-md);
}

.c-services__info {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	flex: 1;
}

.c-services__name {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-label);
	margin: 0;
	color: var(--color-white);
}

.c-services__item:hover .c-services__name,
.c-services__item.is-active .c-services__name {
	text-decoration: underline;
}

.c-services__desc {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-body);
	margin: 0;
	color: var(--color-white);
}

/* Small icon button (mouse-only, aria-hidden) */

.c-services__btn-sm {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--spacing-2xl);
	height: var(--spacing-2xl);
	background-color: var(--color-white);
	color: var(--color-black);
	text-decoration: none;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.c-services__btn-sm:hover {
	background-color: var(--color-bronze);
	color: var(--color-white);
}

.c-services__item:hover .c-services__btn-sm,
.c-services__item:focus .c-services__btn-sm,
.c-services__item.is-active .c-services__btn-sm {
	opacity: 0;
	pointer-events: none;
}

/* "Detail služby" button — slides in from below on hover/active (uses c-btn c-btn--white) */

.c-services__btn-lg {
	position: absolute;
	left: var(--spacing-xl);
	right: var(--spacing-xl);
	bottom: var(--spacing-xl);
	justify-content: center;
	transform: translateY(calc(100% + var(--spacing-xl)));
	transition: transform var(--transition-base);
}

.c-services__item:hover .c-services__btn-lg,
.c-services__item:focus .c-services__btn-lg,
.c-services__item.is-active .c-services__btn-lg {
	transform: translateY(0);
}

.c-services__btn-arrow {
	flex-shrink: 0;
}

/* --- Navigation --- */

.c-services__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-lg);
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--spacing-3xl);
	padding: 0 var(--spacing-section-x);
}

.c-services__progress {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1;
}

.c-services__line {
	flex: 1;
	height: calc(var(--spacing-xs) / 2);
	background-color: var(--color-border);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.c-services__line.is-active {
	background-color: var(--color-black);
}

.c-services__line:hover {
	background-color: var(--color-bronze);
}

.c-services__line:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-services__arrows {
	display: flex;
	align-items: center;
}

.c-services__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-black);
	padding: var(--spacing-sm);
	transition: color var(--transition-fast), opacity var(--transition-fast);
}

.c-services__arrow:hover {
	color: var(--color-bronze);
}

.c-services__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.c-services__arrow:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

/* Footer link (mobile only) — hidden on desktop */

.c-services__footer {
	display: none;
}

/* --- Services mobile --- */

@media (max-width: 1024px) {
	.c-services {
		padding: var(--spacing-3xl) 0;
	}

	.c-services__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-md);
		margin-bottom: var(--spacing-xl);
	}

	.c-services__title {
		max-width: none;
		font-size: var(--font-size-5xl);
		text-align: left;
	}

	.c-services__all-link--desktop {
		display: none;
	}

	.c-services__footer {
		display: flex;
		justify-content: center;
		padding: var(--spacing-xl) var(--spacing-section-x) 0;
	}

	.c-services__track {
		padding: 0 0 0 var(--spacing-section-x);
		gap: var(--spacing-md);
	}

	.c-services__item {
		--_card-w: calc(100vw - var(--spacing-section-x) - var(--spacing-5xl));
	}

	.c-services__content {
		transform: translateY(calc(-1 * var(--spacing-4xl)));
	}

	.c-services__btn-sm {
		display: none;
	}

	.c-services__btn-lg {
		transform: translateY(0);
	}

	.c-services__nav {
		margin-top: var(--spacing-xl);
	}
}

/* ==========================================================================
   Component: Team Slider (c-team-slider)
   Horizontální slider kolegů na single-team stránce.
   Identická struktura jako c-services, nadpis vycentrován, bez "všechny" odkazu.
   ========================================================================== */

.c-team-slider {
	background-color: var(--color-peroxid);
	padding: var(--spacing-8xl) 0;
	padding-bottom: var(--spacing-5xl);
	overflow: hidden;
}

/* --- Header --- */

.c-team-slider__header {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--spacing-4xl);
	padding: 0 var(--spacing-section-x);
}

.c-team-slider__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0;
	text-align: center;
}

/* --- Track --- */

.c-team-slider__track {
	display: flex;
	gap: var(--spacing-lg);
	padding: 0 0 0 var(--container-x);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--container-x);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.c-team-slider__track::-webkit-scrollbar {
	display: none;
}

/* --- Card --- */

.c-team-slider__item {
	--_card-w: calc((var(--max-width-boxed) - 3 * var(--spacing-lg)) / 4);
	flex: 0 0 var(--_card-w);
	width: var(--_card-w);
	aspect-ratio: 2 / 3;
	position: relative;
	overflow: hidden;
	scroll-snap-align: start;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

.c-team-slider__item:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: -2px;
}

.c-team-slider__image-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.c-team-slider__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-base);
}

.c-team-slider__item:hover .c-team-slider__image {
	transform: scale(1.04);
}

.c-team-slider__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-overlay-gradient);
}

.c-team-slider__content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--spacing-xl);
	color: var(--color-white);
	transition: transform var(--transition-base);
}

.c-team-slider__item:hover .c-team-slider__content,
.c-team-slider__item:focus .c-team-slider__content,
.c-team-slider__item.is-active .c-team-slider__content {
	transform: translateY(calc(-1 * var(--spacing-5xl)));
}

.c-team-slider__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--spacing-md);
}

.c-team-slider__info {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	flex: 1;
}

.c-team-slider__name {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-label);
	margin: 0;
	color: var(--color-white);
}

.c-team-slider__item:hover .c-team-slider__name,
.c-team-slider__item.is-active .c-team-slider__name {
	text-decoration: underline;
}

.c-team-slider__position {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.7px;
	margin: 0;
	color: #fff;
}

/* Small icon button (mouse-only, aria-hidden) */

.c-team-slider__btn-sm {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--spacing-2xl);
	height: var(--spacing-2xl);
	background-color: var(--color-white);
	color: var(--color-black);
	text-decoration: none;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.c-team-slider__btn-sm:hover {
	background-color: var(--color-bronze);
	color: var(--color-white);
}

.c-team-slider__item:hover .c-team-slider__btn-sm,
.c-team-slider__item:focus .c-team-slider__btn-sm,
.c-team-slider__item.is-active .c-team-slider__btn-sm {
	opacity: 0;
	pointer-events: none;
}

/* "Zobrazit profil" button — slides in from below on hover/active */

.c-team-slider__btn-lg {
	position: absolute;
	left: var(--spacing-xl);
	right: var(--spacing-xl);
	bottom: var(--spacing-xl);
	justify-content: center;
	transform: translateY(calc(100% + var(--spacing-xl)));
	transition: transform var(--transition-base);
}

.c-team-slider__item:hover .c-team-slider__btn-lg,
.c-team-slider__item:focus .c-team-slider__btn-lg,
.c-team-slider__item.is-active .c-team-slider__btn-lg {
	transform: translateY(0);
}

.c-team-slider__btn-arrow {
	flex-shrink: 0;
}

/* --- Navigation --- */

.c-team-slider__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-lg);
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--spacing-3xl);
	padding: 0 var(--spacing-section-x);
}

.c-team-slider__progress {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1;
}

.c-team-slider__line {
	flex: 1;
	height: calc(var(--spacing-xs) / 2);
	background-color: var(--color-border);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.c-team-slider__line.is-active {
	background-color: var(--color-black);
}

.c-team-slider__line:hover {
	background-color: var(--color-bronze);
}

.c-team-slider__line:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-team-slider__arrows {
	display: flex;
	align-items: center;
}

.c-team-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-black);
	padding: var(--spacing-sm);
	transition: color var(--transition-fast), opacity var(--transition-fast);
}

.c-team-slider__arrow:hover {
	color: var(--color-bronze);
}

.c-team-slider__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.c-team-slider__arrow:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

/* --- Team slider mobile --- */

@media (max-width: 1024px) {
	.c-team-slider {
		padding: var(--spacing-4xl) 0 var(--spacing-3xl);
	}

	.c-team-slider__header {
		margin-bottom: var(--spacing-xl);
	}

	.c-team-slider__title {
		font-size: var(--font-size-3xl);
	}

	.c-team-slider__track {
		padding: 0 0 0 var(--spacing-section-x);
		gap: var(--spacing-md);
	}

	.c-team-slider__item {
		--_card-w: calc(100vw - var(--spacing-section-x) - var(--spacing-5xl));
	}

	.c-team-slider__content {
		transform: translateY(calc(-1 * var(--spacing-4xl)));
	}

	.c-team-slider__btn-sm {
		display: none;
	}

	.c-team-slider__btn-lg {
		transform: translateY(0);
	}

	.c-team-slider__nav {
		margin-top: var(--spacing-xl);
	}
}

/* ==========================================================================
   Component: About (c-about)
   Two-part section — light top (badge + heading + photo) + dark bottom (features + CTA)
   Figma nodes: 161:645–161:682
   ========================================================================== */

/* --- Top (light) --- */

.c-about__top {
	padding-top: var(--spacing-5xl);
	padding-bottom: 0;
}

.c-about__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	margin-bottom: var(--spacing-5xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-2xl);
}

.c-about__badge {
	--_badge-py: 12px;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--_badge-py) var(--spacing-lg);
	background-color: var(--color-ivory);
	border-radius: var(--radius-full);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-caps);
	color: var(--color-black);
}

.c-about__badge-icon {
	width: var(--spacing-md);
	height: var(--spacing-md);
	flex-shrink: 0;
	color: var(--color-bronze);
}

.c-about__title {
	max-width: 1100px;
	text-align: center;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	position: relative;
	z-index: 3;
}

/* --- Photo --- */

.c-about__photo-container {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
}

.c-about__photo-wrap {
	padding: 0 var(--spacing-section-x);
	margin-bottom: -240px;
	position: relative;
	z-index: 1;
}

.c-about__photo {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 3;
	object-fit: cover;
}

/* --- Bottom (dark) --- */

.c-about__bottom {
	background-color: var(--color-black);
	padding-top: calc( 260px + var(--spacing-5xl) );
	padding-bottom: var(--spacing-6xl);
	position: relative;
}

.c-about__bottom-inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-5xl);
}

.c-about__features {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var(--spacing-3xl);
	width: 100%;
}

.c-about__feature {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-about__feature-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.c-about__feature-icon svg {
	width: 100%;
	height: 100%;
}

.c-about__feature-title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-label);
	color: var(--color-white);
}

.c-about__feature-desc {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-text-muted);
}

/* --- Crosspoints --- */

.c-about .c-deco-crosspoint--about-tr {
	width: 200px;
	height: 200px;
	right: var(--spacing-section-x);
	top: 0;
	transform: translate(75%, -50%);
}

.c-about .c-deco-crosspoint--about-tl {
	width: 500px;
	height: 500px;
	left: var(--spacing-section-x);
	top: 0;
	transform: translate(-35%, -78%);
}

/* --- Responsive (max-width: 1024px) --- */

@media ( max-width: 1024px ) {

	.c-about__top {
		padding-bottom: 0;
	}

	.c-about__title {
		font-size: var(--font-size-5xl);
	}

	.c-about__photo-wrap {
		padding: 0;
		margin-bottom: 0;
	}

	.c-about__bottom {
		padding-top: var(--spacing-5xl);
	}

	.c-about__features {
		grid-template-columns: 1fr;
		gap: var(--spacing-3xl);
	}

	.c-about__inner {
		margin-bottom: var(--spacing-2xl);
	}

}

/* ==========================================================================
   Component: Reviews (c-reviews)
   Figma nodes: 161:684 (heading), 161:685 (Google bar), 302:4930 (desktop), 302:7754 (mobile)
   Dark section — Google rating badge, heading, 2 YouTube videos, review card slider.
   ========================================================================== */

.c-reviews {
	background-color: var(--color-black);
	padding: var(--spacing-8xl) 0;
	overflow: hidden;
	position: relative;
}

/* --- Top: Google rating + heading --- */

.c-reviews__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-xl);
	max-width: var(--max-width-boxed);
	margin: 0 auto var(--spacing-5xl);
	padding: 0 var(--spacing-section-x);
	text-align: center;
}

.c-reviews__google {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-md);
	text-decoration: none;
	color: var(--color-white);
}

.c-reviews__google-logo {
	flex-shrink: 0;
}

.c-reviews__google-info {
	display: flex;
	flex-direction: column;
}

.c-reviews__google-rating {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.c-reviews__google-score {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-wide);
	line-height: var(--line-height-none);
	color: var(--color-white);
}

.c-reviews__google-stars {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	color: var(--color-bronze);
}

.c-reviews__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-white);
	margin: 0;
	max-width: 500px;
}

/* --- Videos --- */

.c-reviews__videos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
	max-width: var(--max-width-boxed);
	margin: 0 auto var(--spacing-4xl);
	padding: 0 var(--spacing-section-x);
}

.c-reviews__video {
	position: relative;
	aspect-ratio: 16 / 9;
	display: block;
	overflow: hidden;
	text-decoration: none;
}

.c-reviews__video-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-base);
}

.c-reviews__video:hover .c-reviews__video-thumb {
	transform: scale(1.03);
}

.c-reviews__video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	pointer-events: none;
	transition: transform var(--transition-base);
}

.c-reviews__video:hover .c-reviews__video-play {
	transform: translate(-50%, -50%) scale(1.1);
}

/* --- Slider wrapper (desktop: contained in max-width box) --- */

.c-reviews__slider {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	overflow: hidden;
	padding: 0 var(--spacing-section-x);
}

/* --- Track --- */

.c-reviews__track {
	display: flex;
	gap: var(--spacing-lg);
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.c-reviews__track::-webkit-scrollbar {
	display: none;
}

/* --- Review card --- */

.c-reviews__item {
	--_card-w: calc((var(--max-width-boxed) - 2 * var(--spacing-section-x) - 2 * var(--spacing-lg)) / 3);
	flex: 0 0 var(--_card-w);
	width: var(--_card-w);
	background-color: var(--color-porcelain);
	padding: var(--spacing-2xl);
	position: relative;
	scroll-snap-align: start;
}

.c-reviews__stars {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	color: var(--color-bronze);
	margin-bottom: var(--spacing-sm);
}

.c-reviews__reviewer {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-relaxed);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0 0 var(--spacing-sm);
}

.c-reviews__text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	color: var(--color-text-muted-dark);
	margin: 0 0 var(--spacing-sm);
}

.c-reviews__date {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-faded);
	margin: 0;
}

.c-reviews__item-google {
	position: absolute;
	top: var(--spacing-lg);
	right: var(--spacing-lg);
	flex-shrink: 0;
}

/* --- Navigation --- */

.c-reviews__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-lg);
	margin-top: var(--spacing-3xl);
}

.c-reviews__progress {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1;
}

.c-reviews__line {
	flex: 1;
	height: calc(var(--spacing-xs) / 2);
	background-color: var(--color-border-light);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.c-reviews__line.is-active {
	background-color: var(--color-white);
}

.c-reviews__line:hover {
	background-color: var(--color-bronze);
}

.c-reviews__line:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-reviews__arrows {
	display: flex;
	align-items: center;
}

.c-reviews__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-white);
	padding: var(--spacing-sm);
	transition: color var(--transition-fast), opacity var(--transition-fast);
}

.c-reviews__arrow:hover {
	color: var(--color-bronze);
}

.c-reviews__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.c-reviews__arrow:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

/* --- Footer: "All reviews" link --- */

.c-reviews__footer {
	display: flex;
	justify-content: center;
	margin-top: var(--spacing-3xl);
	padding: 0 var(--spacing-section-x);
}

.c-reviews__all-link {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-lg);
	padding: var(--spacing-md) var(--spacing-xl);
	border: 1px solid var(--color-border-light);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-white);
	white-space: nowrap;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}

.c-reviews__all-link:hover {
	border-color: var(--color-white);
}

/* --- Deco stars --- */

.c-reviews__deco {
	position: absolute;
	pointer-events: none;
}

.c-reviews__deco svg {
	display: block;
	width: 100%;
	height: auto;
}

.c-reviews__deco--1 {     width: 38px;
    top: 107px;
    left: 10%; }
.c-reviews__deco--2 { width:  75px; top:  35px; left:  35%; }
.c-reviews__deco--3 { width:  65px; top:  80px; right: 280px; }
.c-reviews__deco--4 {    width: 48px;
    top: 25px;
    right: 35%; }
.c-reviews__deco--5 {width: 40px;
    top: 15%;
    left: 25%; }
.c-reviews__deco--6 {     width: 32px;
    top: 15%;
    right: 27%; }
.c-reviews__deco--7 { width: 20px;
    top: 7%;
    left: 29%;}
.c-reviews__deco--8 {    width: 105px;
    top: 440px;
    right: 10%; }

/* --- Reviews mobile (max-width: 1024px) --- */

@media (max-width: 1024px) {

	.c-reviews {
		padding: var(--spacing-4xl) 0;
	}

	/* Larger gap when reviews is the last section before footer. */
	.site-main > .c-reviews:last-child {
		padding-bottom: var(--spacing-6xl);
	}

	.c-reviews__deco {
		display: none;
	}

	.c-reviews__top {
		margin-bottom: var(--spacing-3xl);
		gap: var(--spacing-lg);
	}

	.c-reviews__title {
		font-size: var(--font-size-3xl);
	}

	.c-reviews__videos {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
		margin-bottom: var(--spacing-xl);
	}

	.c-reviews__slider {
		max-width: none;
		padding: 0;
	}

	.c-reviews__track {
		padding: 0 var(--spacing-section-x);
		scroll-padding-left: var(--spacing-section-x);
		gap: var(--spacing-md);
	}

	.c-reviews__item {
		--_card-w: 300px;
		padding: var(--spacing-xl) var(--spacing-lg);
	}

	.c-reviews__item-google {
		top: var(--spacing-md);
		right: var(--spacing-md);
	}

	.c-reviews__nav {
		margin-top: var(--spacing-xl);
		padding: 0 var(--spacing-section-x);
	}

	.c-reviews__footer {
		margin-top: var(--spacing-xl);
	}
}

main > .c-reviews:last-child {
	padding-bottom: 0;
}

/* ==========================================================================
   Component: Reviews Grid (c-reviews-grid)
   Světlá sekce — 2 YouTube videa nahoře, pod nimi 3sloupcový grid recenzí se
   stránkováním (pattern z c-blog-grid). Na /recenze pod hero+badges.
   ========================================================================== */

.c-reviews-grid {
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
	overflow: hidden;
}

/* --- Videos --- */

.c-reviews-grid__videos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
	max-width: var(--max-width-boxed);
	margin: 0 auto var(--spacing-3xl);
	padding: 0 var(--spacing-section-x);
}

.c-reviews-grid__video {
	position: relative;
	aspect-ratio: 16 / 9;
	display: block;
	overflow: hidden;
	text-decoration: none;
}

.c-reviews-grid__video-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-base);
}

.c-reviews-grid__video:hover .c-reviews-grid__video-thumb {
	transform: scale(1.03);
}

.c-reviews-grid__video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	pointer-events: none;
	transition: transform var(--transition-base);
}

.c-reviews-grid__video:hover .c-reviews-grid__video-play {
	transform: translate(-50%, -50%) scale(1.1);
}

/* --- Grid 3 × N --- */

.c-reviews-grid__items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-lg);
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
}

.c-reviews-grid__item {
	background-color: var(--color-porcelain);
	padding: var(--spacing-2xl);
	position: relative;
}

.c-reviews-grid__stars {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	color: var(--color-bronze);
	margin-bottom: var(--spacing-sm);
}

.c-reviews-grid__reviewer {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-relaxed);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0 0 var(--spacing-sm);
}

.c-reviews-grid__text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	color: var(--color-text-muted-dark);
	margin: 0 0 var(--spacing-sm);
}

.c-reviews-grid__date {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-faded);
	margin: 0;
}

.c-reviews-grid__item-google {
	position: absolute;
	top: var(--spacing-lg);
	right: var(--spacing-lg);
	flex-shrink: 0;
}

/* --- Pagination (pattern z c-blog-grid) --- */

.c-reviews-grid__pagination {
	max-width: var(--max-width-boxed);
	margin: var(--spacing-3xl) auto 0;
	padding: 0 var(--spacing-section-x);
	display: flex;
	justify-content: center;
}

.c-reviews-grid__pagination-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
}

.c-reviews-grid__pagination-item {
	display: flex;
}

.c-reviews-grid__pagination-item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 var(--spacing-md);
	border: 1px solid var(--color-ivory);
	background-color: transparent;
	color: var(--color-black);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.c-reviews-grid__pagination-item .page-numbers:hover,
.c-reviews-grid__pagination-item .page-numbers:focus-visible {
	border-color: var(--color-black);
	outline: none;
}

.c-reviews-grid__pagination-item.is-current .page-numbers,
.c-reviews-grid__pagination-item .page-numbers.current {
	border-color: var(--color-black);
	color: var(--color-black);
}

.c-reviews-grid__pagination-item.is-dots .page-numbers,
.c-reviews-grid__pagination-item .page-numbers.dots {
	border-color: transparent;
	pointer-events: none;
}

.c-reviews-grid__pagination-item.is-prev .page-numbers,
.c-reviews-grid__pagination-item.is-next .page-numbers {
	padding: 0 var(--spacing-lg);
}

/* --- Mobile (2-tier: ≤1024px) --- */

@media (max-width: 1024px) {

	.c-reviews-grid {
		padding: var(--spacing-3xl) 0;
	}

	.c-reviews-grid__videos {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
		margin-bottom: var(--spacing-xl);
	}

	.c-reviews-grid__items {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	.c-reviews-grid__item {
		padding: var(--spacing-xl) var(--spacing-lg);
	}

	.c-reviews-grid__item-google {
		top: var(--spacing-md);
		right: var(--spacing-md);
	}

	.c-reviews-grid__pagination {
		margin-top: var(--spacing-xl);
	}

	.c-reviews-grid__pagination-item .page-numbers {
		min-width: 40px;
		height: 40px;
		padding: 0 var(--spacing-sm);
	}

	.c-reviews-grid__pagination-item.is-prev .page-numbers,
	.c-reviews-grid__pagination-item.is-next .page-numbers {
		padding: 0 var(--spacing-md);
	}
}

/* ==========================================================================
   Component: Decorative Crosspoint (c-deco-crosspoint)
   Reusable SVG decoration — always absolute, z-index via inline style.
   Hidden on mobile globally.
   ========================================================================== */

.c-deco-crosspoint {
	position: absolute;
	pointer-events: none;
	width: 262px;
	height: 262px;
}

.c-deco-crosspoint__outer {
	display: block;
	width: 100%;
	height: 100%;
}

.c-deco-crosspoint__inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 35.9%;
	height: 35.9%;
}

@media ( max-width: 1024px ) {
	.c-deco-crosspoint {
		display: none;
	}
}

/* ==========================================================================
   Component: Zig Zag (c-zigzag)
   ========================================================================== */

.c-zigzag {
	padding: var(--spacing-8xl) 0;
	background-color: var(--color-peroxid);
}

.c-zigzag__inner {
	position: relative;
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8xl);
}

/* --- Row --- */

.c-zigzag__row {
	display: flex;
	align-items: center;
}

.c-zigzag__row--reversed {
	flex-direction: row-reverse;
}

/* --- Content --- */

.c-zigzag__content {
	flex: 0 0 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4xl);
	padding-right: var(--spacing-5xl);
}

.c-zigzag__row--reversed .c-zigzag__content {
	padding-right: 0;
	padding-left: var(--spacing-5xl);
}

.c-zigzag__title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-4xl);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
}

.c-zigzag__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xl);
}

/* --- Crosspoint --- */

.c-zigzag .c-deco-crosspoint {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* --- Media --- */

.c-zigzag__media {
	flex: 0 0 50%;
	min-width: 0;
}

.c-zigzag__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 786 / 524;
	object-fit: cover;
}

/* ==========================================================================
   c-zigzag — Mobile (max-width: 1024px)
   ========================================================================== */

@media ( max-width: 1024px ) {

	.c-zigzag {
		padding: var(--spacing-4xl) 0;
	}

	.c-zigzag__inner {
		gap: var(--spacing-4xl);
	}

	.c-zigzag__row,
	.c-zigzag__row--reversed {
		flex-direction: column;
		gap: var(--spacing-xl);
	}

	.c-zigzag__content,
	.c-zigzag__row--reversed .c-zigzag__content {
		gap: var(--spacing-md);
		text-align: center;
		align-items: center;
		padding-right: 0;
		padding-left: 0;
	}

	.c-zigzag__title {
		font-size: var(--font-size-3xl);
	}

	.c-zigzag__actions {
		justify-content: center;
		gap: var(--spacing-md);
		width: 100%;
	}

	.c-zigzag__actions .c-btn {
		flex: 1 1 auto;
		text-align: center;
		justify-content: center;
	}

	.c-zigzag__media {
		flex: none;
		width: 100%;
	}
}

/* ==========================================================================
   Component: Team Info — Zig Zag Info (c-team-info)
   Figma desktop nodes 182:21036 (heading), 182:21038 (body text)
   Figma mobile nodes 240:19451 (heading), 240:19452 (body text)
   Three alternating rows: rows 1 & 3 image-left (--reversed), row 2 content-left.
   Mobile: flex-direction: column on all rows → content always first.
   padding-top accounts for hero-team quote box bleed into this section.
   ========================================================================== */

.c-team-info {
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
	padding-top: calc(var(--spacing-5xl) + 180px); /* clearance for hero-team quote bleed */
}

.c-team-info__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5xl);
}

/* --- Row --- */

.c-team-info__row {
	display: flex;
	align-items: center;
	gap: var(--spacing-5xl);
}

.c-team-info__row--reversed {
	flex-direction: row-reverse;
}

/* --- Content --- */

.c-team-info__content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl);
}

.c-team-info__content p {
	margin: 0;
}

.c-team-info__title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-4xl);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0;
}

.c-team-info__text {
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-base);
	color: var(--color-black);
	margin: 0;
}

/* --- Media --- */

.c-team-info__media {
	flex: 1 1 0;
}

.c-team-info__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 786 / 524;
	object-fit: cover;
}

/* --- Video variant: play icon overlay on thumbnail --- */

.c-team-info__video {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	overflow: hidden;
	font: inherit;
	color: inherit;
}

.c-team-info__video .c-team-info__image {
	transition: transform var(--transition-base);
}

.c-team-info__video:hover .c-team-info__image,
.c-team-info__video:focus-visible .c-team-info__image {
	transform: scale(1.03);
}

.c-team-info__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	pointer-events: none;
	transition: transform var(--transition-base);
}

.c-team-info__video:hover .c-team-info__play,
.c-team-info__video:focus-visible .c-team-info__play {
	transform: translate(-50%, -50%) scale(1.1);
}

.c-team-info__video:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

/* --- Mobile --- */

@media (max-width: 1024px) {
	.c-team-info {
		padding: var(--spacing-3xl) 0;
		padding-top: calc(var(--spacing-3xl) + 100px); /* clearance for hero-team quote bleed mobile */
	}

	.c-team-info__inner {
		gap: var(--spacing-4xl);
	}

	.c-team-info__row,
	.c-team-info__row--reversed {
		flex-direction: column;
		gap: var(--spacing-xl);
	}

	.c-team-info__content {
		gap: var(--spacing-md);
	}

	.c-team-info__media {
		flex: none;
		width: 100%;
	}
}

/* ==========================================================================
   Component: Environment (c-environment)
   ========================================================================== */

.c-environment {
	padding: var(--spacing-8xl) 0;
	background-color: var(--color-peroxid);
	padding-bottom: 0;
}

.c-environment__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
}

/* --- Content --- */

.c-environment__content {
	flex: 0 0 50%;
	min-width: 0;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4xl);
	padding-left: var(--spacing-5xl);
}

.c-environment__title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-4xl);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
}

.c-environment__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-environment__item {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
}

.c-environment__item-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.c-environment__item-text {
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-black);
}

.c-environment__actions {
	display: flex;
}

/* --- Media --- */

.c-environment__media {
	flex: 0 0 50%;
	min-width: 0;
}

.c-environment__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   c-environment — Mobile (max-width: 1024px)
   ========================================================================== */

@media ( max-width: 1024px ) {

	.c-environment {
		padding: var(--spacing-4xl) 0 0;
	}

	.c-environment__inner {
		flex-direction: column;
		gap: var(--spacing-xl);
	}

	.c-environment__content {
		gap: var(--spacing-md);
		text-align: left;
		align-items: stretch;
		align-self: auto;
		padding-left: 0;
		padding-right: 0;
	}

	.c-environment__title {
		font-size: var(--font-size-3xl);
	}

	.c-environment__list {
		gap: var(--spacing-md);
		align-items: flex-start;
		text-align: left;
	}

	.c-environment__item {
		align-items: flex-start;
		gap: var(--spacing-md);
	}

	.c-environment__item-text {
		line-height: var(--line-height-base);
	}

	.c-environment__actions {
		justify-content: flex-start;
		width: 100%;
	}

	.c-environment__actions .c-btn {
		width: 100%;
		justify-content: center;
	}

	.c-environment__media {
		display: none;
	}

	.c-environment__image {
		height: auto;
		aspect-ratio: 786 / 524;
	}
}

/* ==========================================================================
   Component: Gallery (c-gallery)
   ========================================================================== */

.c-gallery {
	padding: var(--spacing-5xl) 0;
	background-color: var(--color-peroxid);
}

.c-gallery__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
}

.c-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-md);
}

.c-gallery__item {
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.c-gallery__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Inline post variant — strips section padding/bg (Gutenberg kd-gallery block) */
.c-gallery--post {
	padding: 0;
	background-color: transparent;
	margin: var(--spacing-2xl) 0;
}

.c-gallery--post .c-gallery__inner {
	max-width: none;
	padding: 0;
}

/* ==========================================================================
   c-gallery — Mobile (max-width: 1024px)
   ========================================================================== */

@media ( max-width: 1024px ) {

	.c-gallery {
		padding: var(--spacing-3xl) 0;
	}

	.c-gallery__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--spacing-md);
	}

	.c-gallery__grid > .c-gallery__item:first-child {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   Component: Latest Posts (c-posts)
   Figma nodes: 161:831 (desktop cards), 240:17511 (mobile)
   Desktop: 2-column grid, content box overlaps image bottom.
   Mobile: 1-column, content box below image.
   ========================================================================== */

.c-posts {
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
	isolation: isolate;
}

/* --- Header --- */

.c-posts__header {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--spacing-4xl);
	padding: 0 var(--spacing-section-x);
	overflow: visible;
}

.c-posts__header .c-deco-crosspoint {
	left: 78%;
	top: 30px;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 600px;
}

.c-posts__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0;
	max-width: calc(var(--max-width-boxed) / 2);
}

.c-posts__all-link {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-md);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--color-black);
	white-space: nowrap;
	flex-shrink: 0;
	transition: color var(--transition-fast);
}

.c-posts__all-link:hover {
	color: var(--color-bronze);
}

.c-posts__all-arrow {
	flex-shrink: 0;
}

/* --- Grid --- */

.c-posts__grid {
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--spacing-section-x);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
}

/* --- Card --- */

.c-posts__item {
	position: relative;
}

.c-posts__image-wrap {
	overflow: hidden;
}

.c-posts__image {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-base);
}

.c-posts__item:hover .c-posts__image {
	transform: scale(1.04);
}

/* --- Content box (overlaps bottom of image on desktop) --- */

.c-posts__content {
	position: relative;
	margin-top: -28%;
	width: 66%;
	background-color: var(--color-white);
	border-left: 2px solid var(--color-bronze);
	padding: var(--spacing-3xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.c-posts__date {
	display: block;
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	color: var(--color-black);
}

.c-posts__item-title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-none);
	margin: 0;
}

.c-posts__item-link {
	color: var(--color-black);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--transition-fast);
}

.c-posts__item-link:hover {
	color: var(--color-bronze);
}

.c-posts__item-link:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-posts__meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-xl);
	flex-wrap: wrap;
}

.c-posts__author,
.c-posts__category {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	color: var(--color-text-faded);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--transition-fast);
}

.c-posts__author:hover,
.c-posts__category:hover {
	color: var(--color-bronze);
}

.c-posts__author:focus-visible,
.c-posts__category:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-posts__read-time {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	color: var(--color-text-faded);
}

/* --- Footer (mobile only) --- */

.c-posts__footer {
	display: none;
}

/* Modifier: centrovaný nadpis bez odkazu na všechny články */
.c-posts--centered .c-posts__header {
	justify-content: center;
}

.c-posts--centered .c-posts__title {
	max-width: none;
	text-align: center;
}

/* Modifier: stacked — 3 sloupce, content box pod obrázkem (identické s c-blog-grid od 3. položky) */
.c-posts--stacked .c-posts__grid {
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-3xl) var(--spacing-lg);
}

.c-posts--stacked .c-posts__content {
	margin-top: 0;
	width: 100%;
	padding: var(--spacing-xl);
}

.c-posts--stacked .c-posts__item-title {
	font-size: var(--font-size-lg);
}

.c-posts--stacked .c-posts__meta {
	gap: var(--spacing-lg);
}

/* --- Responsive (2-tier: ≤1024px) --- */

@media (max-width: 1024px) {
	.c-posts {
		padding: var(--spacing-3xl) 0;
	}

	.c-posts__header {
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-md);
		margin-bottom: var(--spacing-xl);
	}

	.c-posts__title {
		max-width: none;
		font-size: var(--font-size-5xl);
	}

	.c-posts__all-link--desktop {
		display: none;
	}

	.c-posts__grid {
		grid-template-columns: 1fr;
	}

	.c-posts--stacked .c-posts__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}

	.c-posts__content {
		margin-top: 0;
		width: 100%;
		padding: var(--spacing-lg);
	}

	.c-posts__footer {
		display: flex;
		justify-content: center;
		padding: var(--spacing-xl) var(--spacing-section-x) 0;
	}
}

/* ==========================================================================
   Component: FAQ (c-faq)
   Figma: 231-2588 (desktop), 240-17537 (mobile), 292-3951 (item states)
   Desktop: Two-column — heading + CTA left, accordion right.
   Mobile: Stacked — heading → accordion → CTA button full width.
   ========================================================================== */

.c-faq {
	background-color: var(--color-peroxid);
	padding: var(--spacing-8xl) 0;
}

.c-faq__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-5xl);
}

/* --- Left: Content --- */

.c-faq__content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4xl);
}

.c-faq__title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-5xl);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0;
}

.c-faq__actions {
	display: flex;
}

/* --- Right: Accordion --- */

.c-faq__accordion {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

/* --- FAQ Item --- */

.c-faq__item {
	background-color: var(--color-white);
}

.c-faq__question {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	width: 100%;
	padding: 20px var(--spacing-xl);
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
}

.c-faq__question-text {
	flex: 1 0 0;
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	color: var(--color-black);
}

.c-faq__icon {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.c-faq__item.is-open .c-faq__question {
	background-color: var(--color-porcelain);
}

.c-faq__item.is-open .c-faq__answer {
	background-color: var(--color-porcelain);
}

/* --- Answer --- */

.c-faq__answer {
	padding: 0 var(--spacing-xl) 20px;
}

.c-faq__answer-text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-base);
	color: var(--color-black);
	margin: 0;
}

.c-faq__answer-text > p {
	margin: 0 0 var(--spacing-md);
}

.c-faq__answer-text > p:last-child {
	margin-bottom: 0;
}

.c-faq__answer-text table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.c-faq__answer-text table td {
	padding: 8px 12px 8px 0;
	vertical-align: top;
	border-bottom: 1px solid var(--color-porcelain);
}

.c-faq__answer-text table tr:last-child td {
	border-bottom: none;
}

.c-faq__answer-text table td:first-child {
	width: 110px;
	white-space: nowrap;
	font-weight: var(--font-weight-medium);
}

.c-faq__answer-text table td p {
	margin: 0;
}

.c-faq__answer-text table tr:has(td.c-faq__year) td {
	padding-top: 16px;
	padding-bottom: 4px;
	border-bottom: none;
	background: transparent;
}

.c-faq__answer-text table td.c-faq__year {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	color: var(--color-bronze);
	width: auto;
}

/* --- c-faq--full: stacked layout, accordion full-width container --- */

.c-faq--full .c-faq__inner {
	flex-direction: column;
	gap: var(--spacing-2xl);
}

.c-faq--full .c-faq__content,
.c-faq--full .c-faq__accordion {
	width: 100%;
	flex: 0 0 auto;
}

/* ==========================================================================
   c-faq — Mobile (max-width: 1024px)
   Order: heading (1) → accordion (2) → CTA button (3).
   display:contents unwraps c-faq__content so title + actions become
   direct flex children of c-faq__inner and can be individually ordered.
   ========================================================================== */

@media ( max-width: 1024px ) {

	.c-faq {
		padding: var(--spacing-4xl) 0;
	}

	.c-faq__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing-xl);
	}

	.c-faq__content {
		display: contents;
	}

	.c-faq__title {
		font-size: var(--font-size-5xl);
		order: 1;
	}

	.c-faq__accordion {
		order: 2;
	}

	.c-faq__actions {
		order: 3;
		width: 100%;
	}

	.c-faq__actions .c-btn {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* ==========================================================================
   Component: FAQ Page (c-faq-page)
   Single-column variant of c-faq — full-width accordion only, no left column.
   Reuses .c-faq__item / .c-faq__question / .c-faq__answer styles.
   ========================================================================== */

.c-faq-page {
	background-color: var(--color-peroxid);
	padding: var(--spacing-8xl) 0;
}

.c-faq-page__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4xl);
}

.c-faq-page__section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl);
}

.c-faq-page__section-title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-3xl);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0;
}

.c-faq-page__accordion {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

@media ( max-width: 1024px ) {

	.c-faq-page {
		padding: var(--spacing-4xl) 0;
	}

	.c-faq-page__inner {
		gap: var(--spacing-2xl);
	}

	.c-faq-page__section {
		gap: var(--spacing-md);
	}
}

/* ==========================================================================
   Component: Footer CTA (c-footer-cta)
   Figma desktop node 231:2791, mobile node 240:17558.
   Diamond-clipped image right side sticking ~50% above dark background.
   Avatars + heading + phone / email / CTA button.
   ========================================================================== */

.c-footer-cta {
	position: relative;
}

/* --- Diamond image (absolutely positioned, overlaps section above) --- */

.c-footer-cta__image-wrap {
	position: absolute;
	top: -230px;
	right: calc(var(--container-x) - 30px);
	width: 460px;
	height: 460px;
	z-index: 2;
	pointer-events: none;
}

.c-footer-cta__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* --- Dark body (starts halfway down the image) --- */

.c-footer-cta__body {
	position: relative;
	z-index: 1;
	background-color: var(--color-black);
	border-bottom: 1px solid var(--color-border-dark);
	margin-top: 230px;
	padding: var(--spacing-5xl) 0;
}

.c-footer-cta__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
}

/* --- Content (left ~55%, image occupies right side) --- */

.c-footer-cta__content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-xl) var(--spacing-lg);
}

/* Avatars + title on first row; contacts on second row */
.c-footer-cta__avatars {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.c-footer-cta__avatar {
	width: var(--spacing-3xl);
	height: var(--spacing-3xl);
	border-radius: var(--radius-full);
	object-fit: cover;
	margin-right: calc( -1 * var(--spacing-sm) );
	border: 2px solid var(--color-black);
	flex-shrink: 0;
}

.c-footer-cta__avatar:last-child {
	margin-right: 0;
}

/* --- Heading --- */

.c-footer-cta__title {
	flex: 1;
	min-width: 0;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-white);
	margin: 0;
}

/* --- Contacts row (full width — wraps to second line) --- */

.c-footer-cta__contacts {
	flex-basis: 100%;
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-8xl);
	flex-wrap: wrap;
}

.c-footer-cta__contact {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.c-footer-cta__contact-primary {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.c-footer-cta__dot {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background-color: var(--color-green);
	flex-shrink: 0;
}

.c-footer-cta__dot.is-closed {
	background-color: var(--color-red);
}

.c-footer-cta__phone,
.c-footer-cta__email {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-2xl);
	line-height: var(--line-height-none);
	color: var(--color-white);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.c-footer-cta__phone:hover,
.c-footer-cta__email:hover {
	color: var(--color-bronze);
}

.c-footer-cta__contact-sub {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	line-height: var(--line-height-none);
	color: var(--color-text-muted);
	text-align: right;
}

.c-footer-cta__contact--phone .c-footer-cta__contact-sub {
	text-align: right;
}

/* --- CTA button --- */

.c-footer-cta__btn {
	align-self: flex-start;
	flex-shrink: 0;
}

/* ==========================================================================
   c-footer-cta — Mobile (max-width: 1024px)
   Image centered at top, dark body overlaps bottom half via negative margin.
   Content stacked + centered.
   ========================================================================== */

@media ( max-width: 1024px ) {

	.c-footer-cta__image-wrap {
		position: relative;
		top: auto;
		right: auto;
		width: 200px;
		height: 200px;
		margin: 0 auto;
		display: block;
		z-index: 2;
	}

	.c-footer-cta__body {
		margin-top: -100px;
		padding: calc( var(--spacing-xl) + 100px ) 0 var(--spacing-3xl);
	}

	.c-footer-cta__content {
		flex-direction: column;
		max-width: 100%;
		align-items: center;
		text-align: center;
	}

	.c-footer-cta__avatars {
		justify-content: center;
	}

	.c-footer-cta__contacts {
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-lg);
		width: 100%;
	}

	.c-footer-cta__contact {
		align-items: center;
	}

	.c-footer-cta__phone,
	.c-footer-cta__email {
		font-size: var(--font-size-2xl);
	}

	.c-footer-cta__contact-sub {
		font-size: var(--font-size-base);
	}

	.c-footer-cta__btn {
		align-self: stretch;
		justify-content: center;
		text-align: center;
		width: 100%;
	}
}

/* ==========================================================================
   Page override: sluzby — body background for footer gap
   c-footer-cta__body has margin-top: 230px which collapses OUT through
   c-footer-cta and site-footer (CSS margin collapsing). This creates a
   230px gap between </main> and <footer> that belongs to body/page, NOT
   to any footer element. Setting body bg to dark covers that gap.
   All sections on this page have explicit backgrounds, so this is safe.
   ========================================================================== */

.page-template-template-sluzby {
	background-color: var(--color-black);
}

/* ==========================================================================
   Component: CTA Box (c-cta-box)
   Figma desktop node 182:17749, mobile node 240:18067.
   Content-width porcelain background. Avatars + heading + phone / email / button.
   Universal — used across all pages. Data from kittler_dent_footer_cta_* options.
   ========================================================================== */

.c-cta-box {
	padding: var(--spacing-5xl) var(--container-x);
	background-color: var(--color-peroxid);
}

.c-cta-box__inner {
	position: relative;
	background-color: var(--color-porcelain);
	padding: var(--spacing-4xl);
	overflow: hidden;
}

/* --- Decorative diamond ornament (right side, clipped by overflow:hidden) --- */

.c-cta-box__ornament {
	position: absolute;
	top: 50%;
	right: -60px;
	transform: translateY(-50%);
	width: 600px;
	height: 600px;
	pointer-events: none;
	z-index: 0;
}

.c-cta-box__ornament svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- Content layer (above ornament) --- */

.c-cta-box__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-xl) var(--spacing-lg);
}

/* Avatars + title on first row */

.c-cta-box__avatars {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.c-cta-box__avatar {
	width: var(--spacing-3xl);
	height: var(--spacing-3xl);
	border-radius: var(--radius-full);
	object-fit: cover;
	margin-right: calc( -1 * var(--spacing-sm) );
	border: 2px solid var(--color-porcelain);
	flex-shrink: 0;
}

.c-cta-box__avatar:last-child {
	margin-right: 0;
}

/* --- Heading --- */

.c-cta-box__title {
	flex: 1;
	min-width: 0;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0;
}

/* --- Contacts row (full width — wraps to second line) --- */

.c-cta-box__contacts {
	flex-basis: 100%;
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-5xl);
	flex-wrap: wrap;
}

.c-cta-box__contact {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.c-cta-box__contact-primary {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.c-cta-box__dot {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background-color: var(--color-green);
	flex-shrink: 0;
}

.c-cta-box__dot.is-closed {
	background-color: var(--color-red);
}

.c-cta-box__phone {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-2xl);
	line-height: var(--line-height-none);
	color: var(--color-bronze);
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--transition-fast);
}

.c-cta-box__email {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-2xl);
	line-height: var(--line-height-none);
	color: var(--color-bronze);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.c-cta-box__phone:hover,
.c-cta-box__email:hover {
	color: var(--color-bronze-hover);
}

.c-cta-box__contact-sub {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	line-height: var(--line-height-none);
	color: var(--color-text-muted-dark);
}

.c-cta-box__contact--phone .c-cta-box__contact-sub {
	text-align: right;
}

/* --- CTA button --- */

.c-cta-box__btn {
	align-self: flex-start;
	flex-shrink: 0;
	border-radius: 0;
}

/* ==========================================================================
   c-cta-box — Mobile (max-width: 1024px)
   Avatars centered, content stacked + centered.
   ========================================================================== */

@media ( max-width: 1024px ) {

	.c-cta-box {
		padding: 0 var(--spacing-section-x);
	}

	.c-cta-box__inner {
		padding: var(--spacing-2xl) var(--spacing-xl);
	}

	.c-cta-box__ornament {
		top: -30px;
		right: -40px;
		width: 280px;
		height: 280px;
	}

	.c-cta-box__content {
		align-items: center;
		text-align: center;
	}

	.c-cta-box__avatars {
		flex-basis: 100%;
		justify-content: center;
	}

	.c-cta-box__title {
		flex-basis: 100%;
	}

	.c-cta-box__contacts {
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-lg);
		width: 100%;
	}

	.c-cta-box__contact {
		align-items: center;
	}

	.c-cta-box__phone,
	.c-cta-box__email {
		font-size: var(--font-size-2xl);
	}

	.c-cta-box__contact-sub {
		font-size: var(--font-size-base);
	}

	.c-cta-box__contact--phone .c-cta-box__contact-sub {
		text-align: center;
	}

	.c-cta-box__btn {
		align-self: stretch;
		justify-content: center;
		text-align: center;
		width: 100%;
	}
}

/* ==========================================================================
   Component: Footer Navigation (c-footer-nav)
   Figma desktop node 231:2791, mobile node 240:17558.
   4 columns: address+hours+Google | O Kittlerdent | Nabídka (2 sub-lists).
   Full-width separator + copyright bar.
   Mobile: columns 2–4 are JS accordion (is-open class).
   ========================================================================== */

.c-footer-nav {
	background-color: var(--color-black);
	padding: var(--spacing-5xl) 0 0;
}

/* --- Columns grid --- */

.c-footer-nav__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: grid;
	grid-template-columns: 220px 160px 1fr 1fr;
	gap: var(--spacing-5xl);
	align-items: start;
}

/* Services column spans last two grid tracks */
.c-footer-nav__col--services {
	grid-column: 3 / 5;
}

/* --- Column heading (shared: <p> for col-1 address, <button> for accordions) --- */

.c-footer-nav__col-title {
	display: block;
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	line-height: var(--line-height-none);
	color: var(--color-white);
	text-transform: uppercase;
	margin: 0 0 var(--spacing-xl);
	padding: 0;
	background: none;
	border: none;
	cursor: default;
	text-align: left;
	width: 100%;
}

/* Accordion button — chevron + pointer only on mobile */
.c-footer-nav__accordion-btn {
	display: flex;
	align-items: center;
	cursor: default;
}

.c-footer-nav__chevron {
	display: none;
	flex-shrink: 0;
	color: var(--color-text-muted);
	margin-left: auto;
	transition: transform var(--transition-fast);
}

/* --- Address block --- */

.c-footer-nav__address-block {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	margin-bottom: var(--spacing-xl);
}

.c-footer-nav__address-line {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	line-height: var(--line-height-loose);
	color: var(--color-text-muted);
	margin: 0;
}

.c-footer-nav__map-link {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	line-height: var(--line-height-none);
	color: var(--color-bronze);
	text-decoration: underline;
	transition: color var(--transition-fast);
}

.c-footer-nav__map-link:hover {
	color: var(--color-bronze-hover);
}

/* --- Hours --- */

.c-footer-nav__hours {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--spacing-xl);
}

.c-footer-nav__hours-row {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	line-height: var(--line-height-loose);
	color: var(--color-text-muted);
	margin: 0;
}

/* --- Google rating --- */

.c-footer-nav__google {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	text-decoration: none;
	color: var(--color-white);
	transition: opacity var(--transition-fast);
}

.c-footer-nav__google:hover {
	opacity: 0.8;
}

.c-footer-nav__google-logo {
	flex-shrink: 0;
}

.c-footer-nav__google-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.c-footer-nav__google-rating {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.c-footer-nav__google-score {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-wide);
	line-height: var(--line-height-none);
	color: var(--color-white);
}

.c-footer-nav__google-stars {
	display: flex;
	gap: 2px;
	color: var(--color-bronze);
}

.c-footer-nav__google-count {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-thin);
	letter-spacing: var(--letter-spacing-caps);
	line-height: var(--line-height-none);
	color: var(--color-white);
	text-decoration: underline;
}

/* --- Nav lists --- */

.c-footer-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.c-footer-nav__link {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	line-height: var(--line-height-loose);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.c-footer-nav__link:hover {
	color: var(--color-white);
}

.c-footer-nav__link--highlight {
	color: var(--color-bronze);
	text-decoration: underline;
}

.c-footer-nav__link--highlight:hover {
	color: var(--color-bronze-hover);
}

/* Services two sub-columns */
.c-footer-nav__services-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--spacing-xl);
}

/* --- Separator --- */

.c-footer-nav__separator {
	max-width: var(--max-width-boxed);
	margin: var(--spacing-5xl) auto 0;
	padding: 0 var(--spacing-section-x);
	height: 1px;
	background-color: var(--color-border-dark);
}

/* --- Copyright bar --- */

.c-footer-nav__copyright-wrap {
	padding: var(--spacing-4xl) 0;
}

.c-footer-nav__copyright-inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
}

.c-footer-nav__copyright {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-thin);
	letter-spacing: var(--letter-spacing-caps);
	line-height: var(--line-height-none);
	color: var(--color-white);
	text-align: center;
	margin: 0;
}

.c-footer-nav__legal-sep {
	margin: 0 var(--spacing-md);
	opacity: 0.4;
}

.c-footer-nav__legal-link {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-thin);
	letter-spacing: var(--letter-spacing-caps);
	color: var(--color-white);
	text-decoration: none;
	margin-left: var(--spacing-xl);
	transition: color var(--transition-fast);
}

.c-footer-nav__legal-link:first-child {
	margin-left: 0;
}

.c-footer-nav__legal-link:hover {
	color: var(--color-bronze);
}

/* ==========================================================================
   c-footer-nav — Mobile (max-width: 1024px)
   Single-column layout. Col 2 + col 3+4 accordion (is-open toggles visibility).
   ========================================================================== */

@media ( max-width: 1024px ) {

	.c-footer-nav {
		padding-top: var(--spacing-5xl);
	}

	.c-footer-nav__inner {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.c-footer-nav__col--services {
		grid-column: 1;
	}

	.c-footer-nav__col--about {
		margin-top: var(--spacing-xl);
	}

	/* Show chevron on mobile, make button pointer */
	.c-footer-nav__accordion-btn {
		cursor: pointer;
	}

	.c-footer-nav__chevron {
		display: block;
	}

	/* Accordion: lists hidden by default, visible when .is-open */
	.c-footer-nav__col--about .c-footer-nav__list,
	.c-footer-nav__col--services .c-footer-nav__services-wrap {
		display: none;
	}

	.c-footer-nav__col--about.is-open .c-footer-nav__list,
	.c-footer-nav__col--services.is-open .c-footer-nav__services-wrap {
		display: flex;
		flex-direction: column;
	}

	.c-footer-nav__col--services.is-open .c-footer-nav__services-wrap {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
	}

	.c-footer-nav__accordion-btn[aria-expanded="true"] .c-footer-nav__chevron {
		transform: rotate( 180deg );
	}

	/* Column titles become full-width separator rows */
	.c-footer-nav__col-title {
		margin-bottom: 0;
		padding: var(--spacing-lg) 0;
	}

	.c-footer-nav__col--address .c-footer-nav__col-title {
		padding-top: 0;
		border-top: none;
	}

	/* Address and hours lists stay visible on mobile */
	.c-footer-nav__address-block {
		margin-bottom: var(--spacing-md);
	}

	.c-footer-nav__hours {
		margin-bottom: var(--spacing-md);
	}

	.c-footer-nav__services-wrap {
		grid-template-columns: 1fr;
	}

	/* Separator */
	.c-footer-nav__separator {
		margin-top: var(--spacing-3xl);
	}

	.c-footer-nav__copyright-wrap {
		padding: var(--spacing-xl) 0;
	}

	/* Copyright stack on mobile */
	.c-footer-nav__copyright {
		text-align: center;
	}

	.c-footer-nav__legal-sep {
		display: none;
	}

	.c-footer-nav__legal-link {
		display: block;
		margin-left: 0;
		margin-top: var(--spacing-xs);
	}
}

/* ==========================================================================
   Component: Site Header (c-header)
   Figma desktop node 161:911, mobile node 240:21074
   ========================================================================== */

.c-header {
	/* Component-local tokens */
	--_header-dot: var(--color-green);
	--_header-phone-sub-size: 12px;
	--_header-badge-size: 11px;
	--_header-badge-tracking: 1.1px;
	--_header-mob-height: 68px; /* approx bar height on mobile: logo 29px + 2×20px padding */

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-index-header);
	transition: background-color var(--transition-base);
}

.c-header.is-scrolled {
	background-color: var(--color-black);
}

/* --- Inner bar (always visible) --- */
.c-header__inner {
	position: relative;
	z-index: 1; /* above overlay within the header stacking context */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-3xl);
	padding: var(--spacing-xl) var(--spacing-header-x);
}

/* --- Logo --- */
.c-header__logo {
	flex-shrink: 0;
	line-height: 0;
}

.c-header__logo .custom-logo-link,
.c-header__logo-link {
	display: block;
	line-height: 0;
}

.c-header__logo .custom-logo {
	width: 94px;
	height: auto;
	display: block;
}

.c-header__logo-text {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	color: var(--color-white);
	text-decoration: none;
}

/* --- Desktop nav --- */
.c-header__nav {
	flex: 1;
}

.c-header__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-3xl);
}

.c-header__nav-item {
	list-style: none;
	position: relative;
}

.c-header__nav-link {
	display: inline-block;
	position: relative;
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	color: var(--color-white);
	text-decoration: none;
	line-height: var(--line-height-none);
	white-space: nowrap;
	transition: opacity var(--transition-fast);
}

.c-header__nav-link:hover,
.c-header__nav-link.is-active {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Kariéra badge --- */
.c-header__nav-badge {
	position: absolute;
	top: -10px;
	left: 100%;
	margin-left: var(--spacing-xs);
	min-width: 17px;
	height: 16px;
	padding: 0 3px;
	background-color: var(--color-bronze);
	color: var(--color-white);
	font-family: var(--font-family-base);
	font-size: var(--_header-badge-size);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--_header-badge-tracking);
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- Desktop CTA group --- */
.c-header__cta {
	display: flex;
	align-items: center;
	gap: var(--spacing-xl);
	flex-shrink: 0;
}

.c-header__phone-block {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--spacing-xs);
}

.c-header__phone-row {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.c-header__dot {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--_header-dot);
	flex-shrink: 0;
}

.c-header__dot.is-closed {
	--_header-dot: var(--color-red);
}

.c-header__phone {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-white);
	text-decoration: none;
	line-height: var(--line-height-none);
	white-space: nowrap;
}

.c-header__phone:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.c-header__phone-sub {
	font-family: var(--font-family-base);
	font-size: var(--_header-phone-sub-size);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-label);
	color: var(--color-text-muted);
	line-height: var(--line-height-none);
	white-space: nowrap;
}

/* --- CTA button (desktop) --- */
.c-header__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 20px var(--spacing-xl);
	border: 1px solid var(--color-bronze);
	color: var(--color-white);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	text-decoration: none;
	line-height: var(--line-height-none);
	white-space: nowrap;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.c-header__btn:hover {
	background-color: var(--color-bronze);
}

/* --- Mobile toggle button (hidden on desktop) --- */
.c-header__toggle {
	display: none;
	align-items: center;
	gap: var(--spacing-sm);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--color-white);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	line-height: var(--line-height-none);
	white-space: nowrap;
	flex-shrink: 0;
}

.c-header__toggle-close {
	display: none;
}

.c-header.is-open .c-header__toggle-open {
	display: none;
}

.c-header.is-open .c-header__toggle-close {
	display: block;
}

/* --- Mobile full-screen overlay --- */
.c-header__mobile {
	position: fixed;
	inset: 0;
	z-index: 0; /* below .c-header__inner (z-index 1) within the header stacking context */
	display: flex;
	flex-direction: column;
	padding: var(--spacing-xl) var(--spacing-header-x);
	padding-top: calc(var(--_header-mob-height) + var(--spacing-xl));
	background-color: rgba(28, 28, 28, 0.9);
	backdrop-filter: blur(2.5px);
	-webkit-backdrop-filter: blur(2.5px);
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-base), visibility var(--transition-base);
}

.c-header.is-open .c-header__mobile {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* Mobile nav items */
.c-header__mobile-nav {
	flex: 1;
}

.c-header__mobile-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl);
}

.c-header__mobile-list .c-header__nav-item {
	list-style: none;
}

.c-header__mobile-list .c-header__nav-link {
	font-size: var(--font-size-xl);
	letter-spacing: var(--letter-spacing-2xl);
}

.c-header__mobile-list .c-header__nav-badge {
	top: -8px;
}

/* Mobile CTA */
.c-header__mobile-cta {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	padding-top: var(--spacing-xl);
}

.c-header__mobile-cta .c-header__phone-block {
	align-items: flex-start;
}

.c-header__mobile-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 20px var(--spacing-xl);
	border: 1px solid var(--color-bronze);
	color: var(--color-white);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	text-decoration: none;
	line-height: var(--line-height-none);
	white-space: nowrap;
	transition: background-color var(--transition-fast);
}

.c-header__mobile-btn:hover {
	background-color: var(--color-bronze);
}

/* --- Header mobile --- */
@media (max-width: 1024px) {
	.c-header__nav,
	.c-header__cta {
		display: none;
	}

	.c-header__toggle {
		display: flex;
	}

	.c-header__inner {
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

/* ==========================================================================
   c-services-grid — Services grid section (template-sluzby)
   ========================================================================== */

.c-services-grid {
	background-color: var(--color-black);
	padding: var(--spacing-8xl) 0;
	scroll-margin-top: var(--header-height);
}

.c-services-grid__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
}

/* --- Mobile tabs (hidden on desktop) --- */

.c-services-grid__tabs {
	display: none;
}

.c-services-grid__tab {
	flex: 1;
	background-color: var(--color-porcelain);
	border: none;
	color: var(--color-bronze);
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-sm);
	letter-spacing: var(--letter-spacing-caps);
	line-height: var(--line-height-none);
	text-transform: uppercase;
	padding: var(--spacing-md);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.c-services-grid__tab.is-active {
	background-color: var(--color-black);
	color: var(--color-white);
}

/* --- Group (category) --- */

.c-services-grid__group {
	margin-bottom: var(--spacing-5xl);
}

.c-services-grid__group:last-child {
	margin-bottom: 0;
}

.c-services-grid__group-title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-4xl);
	color: var(--color-white);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	margin-bottom: var(--spacing-lg);
}

/* --- Grid --- */

.c-services-grid__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--spacing-lg);
}

/* --- Card --- */

.c-services-grid__card {
	position: relative;
	aspect-ratio: 1;
	background-color: var(--color-card-dark);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-xl);
	text-decoration: none;
	overflow: hidden;
	transition: var(--transition-base);
}

.c-services-grid__card-bg {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--transition-base);
}

.c-services-grid__card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-services-grid__card-overlay {
	position: absolute;
	inset: 0;
	background-color: var(--color-overlay-dark);
}

.c-services-grid__card:hover .c-services-grid__card-bg {
	opacity: 1;
}

.c-services-grid__card:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: -2px;
}

.c-services-grid__card-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-lg);
	width: 100%;
}

.c-services-grid__card-title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-xl);
	color: var(--color-white);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	text-align: center;
	display: block;
}

.c-services-grid__card:hover .c-services-grid__card-title {
	text-decoration: underline;
}

.c-services-grid__card-arrow {
	display: block;
	line-height: 0;
}

/* --- Responsive (mobile: max-width 1024px) --- */

@media (max-width: 1024px) {
	.c-services-grid {
		background-color: transparent;
		padding: var(--spacing-xl) 0;
	}

	.c-services-grid__inner {
		padding: 0;
	}

	.c-services-grid__tabs {
		display: flex;
		gap: var(--spacing-sm);
		padding: 0 var(--spacing-md);
		margin-bottom: 0;
	}

	.c-services-grid__group-title {
		display: none;
	}

	.c-services-grid__group {
		background-color: var(--color-black);
		margin-bottom: 0;
		padding: var(--spacing-md);
	}

	.c-services-grid__group.is-hidden {
		display: none;
	}

	.c-services-grid__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-sm);
	}

	.c-services-grid__card {
		padding: var(--spacing-xl) var(--spacing-md);
	}

	.c-services-grid__card-title {
		font-size: var(--font-size-lg);
	}
}

/* ==========================================================================
   Component: Treatment (c-treatment)
   ========================================================================== */

.c-treatment {
	padding: var(--spacing-5xl) 0;
	    background-color: var(--color-peroxid);
}

.c-treatment__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

/* --- Content --- */

.c-treatment__content {
	flex: 0 0 50%;
	min-width: 0;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4xl);
	padding-right: var(--spacing-5xl);
}

.c-treatment--reversed .c-treatment__content {
	padding-right: 0;
	padding-left: var(--spacing-5xl);
}

.c-treatment__title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-4xl);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
}

.c-treatment__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-treatment__item {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
}

.c-treatment__item-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.c-treatment__item-text {
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-black);
}

.c-treatment__item-link {
	color: var(--color-bronze);
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-left: var(--spacing-sm);
	transition: color var(--transition-fast);
}

.c-treatment__item-link:hover {
	color: var(--color-bronze-hover);
}

.c-treatment__text {
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-black);
	margin: 0;
}

.c-treatment__actions {
	display: flex;
}

/* --- Media --- */

.c-treatment__media {
	flex: 0 0 50%;
	min-width: 0;
}

.c-treatment__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   c-treatment — Mobile (max-width: 1024px)
   ========================================================================== */

@media ( max-width: 1024px ) {

	.c-treatment {
		padding: var(--spacing-3xl) 0;
	}

	.c-treatment__inner {
		flex-direction: column;
		gap: var(--spacing-xl);
	}

	.c-treatment__content,
	.c-treatment--reversed .c-treatment__content {
		gap: var(--spacing-md);
		text-align: left;
		align-items: stretch;
		align-self: auto;
		padding-left: 0;
		padding-right: 0;
	}

	.c-treatment__title {
		font-size: var(--font-size-3xl);
	}

	.c-treatment__list {
		gap: var(--spacing-md);
		align-items: flex-start;
		text-align: left;
	}

	.c-treatment__item {
		align-items: flex-start;
		gap: var(--spacing-md);
	}

	.c-treatment__item-text {
		line-height: var(--line-height-base);
	}

	.c-treatment__actions {
		justify-content: flex-start;
		width: 100%;
	}

	.c-treatment__actions .c-btn {
		width: 100%;
		justify-content: center;
	}

	.c-treatment__media {
		flex: none;
		width: 100%;
	}

	.c-treatment__image {
		height: auto;
		aspect-ratio: 786 / 524;
	}

	.c-treatment--reversed .c-treatment__content {
		order: -1;
	}
}

/* Page-specific override: treatment bottom padding on Sluzby page */
.page-template-template-sluzby .c-treatment {
	padding-bottom: var(--spacing-8xl);
}

@media (max-width: 1024px) {
	.page-template-template-sluzby .c-treatment {
		padding-bottom: var(--spacing-5xl);
	}

	.single-sluzba .c-treatment {
		padding-top: 0;
	}
}

/* ==========================================================================
   Component: Kariéra Infoboxy (c-kariera-boxes)
   Three alternating zigzag rows. Rows 1 & 3: content left, image right.
   Row 2: --reversed (image left, content right).
   Mobile: all rows stack — content first, image below.
   ========================================================================== */

.c-kariera-boxes {
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
}

.c-kariera-boxes__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5xl);
}

/* --- Row --- */

.c-kariera-boxes__row {
	display: flex;
	align-items: center;
	gap: var(--spacing-5xl);
}

.c-kariera-boxes__row--reversed {
	flex-direction: row-reverse;
}

/* --- Content --- */

.c-kariera-boxes__content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4xl);
}

.c-kariera-boxes__title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-4xl);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0;
}

.c-kariera-boxes__text {
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-black);
	margin: 0;
}

/* --- Bullet list --- */

.c-kariera-boxes__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-kariera-boxes__item {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
}

.c-kariera-boxes__item-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.c-kariera-boxes__item-text {
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-black);
}

/* --- CTA --- */

.c-kariera-boxes__actions {
	display: flex;
	margin-top: var(--spacing-md);
}

/* --- Media --- */

.c-kariera-boxes__media {
	flex: 1 1 0;
}

.c-kariera-boxes__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 786 / 524;
	object-fit: cover;
}

/* ==========================================================================
   c-kariera-boxes — Mobile (max-width: 1024px)
   ========================================================================== */

@media ( max-width: 1024px ) {

	.c-kariera-boxes {
		padding: var(--spacing-3xl) 0;
	}

	.c-kariera-boxes__inner {
		gap: var(--spacing-4xl);
	}

	.c-kariera-boxes__row,
	.c-kariera-boxes__row--reversed {
		flex-direction: column;
		gap: var(--spacing-xl);
	}

	.c-kariera-boxes__content {
		gap: var(--spacing-md);
	}

	.c-kariera-boxes__title {
		font-size: var(--font-size-3xl);
	}

	.c-kariera-boxes__item {
		align-items: flex-start;
	}

	.c-kariera-boxes__item-text {
		line-height: var(--line-height-base);
	}

	.c-kariera-boxes__media {
		flex: none;
		width: 100%;
	}

	.c-kariera-boxes__actions {
		width: 100%;
	}

	.c-kariera-boxes__actions .c-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Component: Service Grid (c-service-grid)
   ========================================================================== */

.c-service-grid {
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
	overflow: hidden;
}

/* --- Track (4-col grid on desktop) --- */

.c-service-grid__track {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-lg);
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-section-x);
	padding-right: var(--spacing-section-x);
}

/* --- Card --- */

.c-service-grid__item {
	background-color: var(--color-white);
	padding: var(--spacing-2xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-service-grid__icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.c-service-grid__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-label);
	color: var(--color-black);
	margin: 0;
}

.c-service-grid__text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-black);
	margin: 0;
}

/* --- Nav (progress lines + arrows — hidden on desktop, shown on mobile) --- */

.c-service-grid__nav {
	display: none;
}

.c-service-grid__progress {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1;
}

.c-service-grid__line {
	flex: 1;
	height: calc(var(--spacing-xs) / 2);
	background-color: var(--color-border);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.c-service-grid__line.is-active {
	background-color: var(--color-black);
}

.c-service-grid__line:hover {
	background-color: var(--color-bronze);
}

.c-service-grid__line:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-service-grid__arrows {
	display: flex;
	align-items: center;
}

.c-service-grid__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-black);
	padding: var(--spacing-sm);
	transition: color var(--transition-fast), opacity var(--transition-fast);
}

.c-service-grid__arrow:hover {
	color: var(--color-bronze);
}

.c-service-grid__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.c-service-grid__arrow:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

/* --- Service Grid mobile --- */

@media (max-width: 1024px) {
	.c-service-grid {
		padding: var(--spacing-3xl) 0;
	}

	.c-service-grid__track {
		display: flex;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: var(--spacing-section-x);
		padding-right: 0;
		gap: var(--spacing-md);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--spacing-section-x);
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.c-service-grid__track::-webkit-scrollbar {
		display: none;
	}

	.c-service-grid__item {
		flex: 0 0 calc(100vw - var(--spacing-section-x) - var(--spacing-5xl));
		scroll-snap-align: start;
	}

	.c-service-grid__nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: var(--spacing-xl);
		padding: 0 var(--spacing-section-x);
	}
}

/* ==========================================================================
   Component: Kariera Related (c-kariera-related)
   ========================================================================== */

.c-kariera-related {
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
}

.c-kariera-related__inner {
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-section-x);
	padding-right: var(--spacing-section-x);
}

.c-kariera-related__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0 0 var(--spacing-4xl);
}

/* --- Grid --- */

.c-kariera-related__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-lg);
}

/* --- Card --- */

.c-kariera-related__item {
	background-color: var(--color-white);
	padding: var(--spacing-2xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-kariera-related__icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.c-kariera-related__content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	flex: 1;
}

.c-kariera-related__name {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-label);
	color: var(--color-black);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.c-kariera-related__name:hover {
	color: var(--color-bronze);
	text-decoration: underline;
}

.c-kariera-related__meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	flex-wrap: wrap;
}

.c-kariera-related__location,
.c-kariera-related__type {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-sm);
	color: var(--color-bronze);
	white-space: nowrap;
}

/* --- Mobile --- */

@media (max-width: 1024px) {
	.c-kariera-related {
		padding: var(--spacing-3xl) 0;
	}

	.c-kariera-related__title {
		margin-bottom: var(--spacing-xl);
	}

	.c-kariera-related__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
	}

	.c-kariera-related__item {
		padding: var(--spacing-lg);
		gap: var(--spacing-sm);
	}

	.c-kariera-related__icon,
	.c-kariera-related__btn {
		display: none;
	}
}

/* ==========================================================================
   Component: Kariéra — Volné pozice (c-kariera-pozice)
   ========================================================================== */

.c-kariera-pozice {
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
	padding-bottom: var(--spacing-8xl);
	scroll-margin-top: var(--header-height);
}

.page-template-template-kariera .c-kariera-pozice {
	padding-bottom: var(--spacing-5xl);
}

.page-template-template-kariera .c-team-slider {
	padding-top: var(--spacing-5xl);
	padding-bottom: var(--spacing-8xl);
}

@media (max-width: 1024px) {
	.page-template-template-kariera .c-kariera-pozice {
		padding-bottom: var(--spacing-3xl);
	}

	.page-template-template-kariera .c-team-slider {
		padding-top: var(--spacing-3xl);
		padding-bottom: var(--spacing-4xl);
	}
}

.c-kariera-pozice__inner {
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-section-x);
	padding-right: var(--spacing-section-x);
}

.c-kariera-pozice__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	text-align: center;
	margin: 0 0 var(--spacing-2xl);
	margin-bottom: var(--spacing-4xl);
}

/* --- Grid --- */

.c-kariera-pozice__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-lg);
}

/* --- Card --- */

.c-kariera-pozice__item {
	background-color: var(--color-white);
	padding: var(--spacing-2xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-kariera-pozice__icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.c-kariera-pozice__content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	flex: 1;
}

.c-kariera-pozice__name {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-label);
	color: var(--color-black);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.c-kariera-pozice__name:hover {
	color: var(--color-bronze);
	text-decoration: underline;
}

.c-kariera-pozice__meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	flex-wrap: wrap;
}

.c-kariera-pozice__location,
.c-kariera-pozice__type {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-sm);
	color: var(--color-bronze);
	white-space: nowrap;
}

/* --- Mobile --- */

@media (max-width: 1024px) {
	.c-kariera-pozice {
		padding: var(--spacing-3xl) 0 var(--spacing-4xl);
	}

	.c-kariera-pozice__title {
		margin-bottom: var(--spacing-xl);
	}

	.c-kariera-pozice__grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
	}

	.c-kariera-pozice__item {
		padding: var(--spacing-lg);
		gap: var(--spacing-sm);
	}

	.c-kariera-pozice__icon,
	.c-kariera-pozice__btn {
		display: none;
	}
}

/* ==========================================================================
   Component: Kariéra — Galerie (c-kariera-galerie)
   ========================================================================== */

.c-kariera-galerie {
	padding: var(--spacing-5xl) 0;
	background-color: var(--color-peroxid);
}

.c-kariera-galerie__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
}

.c-kariera-galerie__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-md);
}

.c-kariera-galerie__item {
	overflow: hidden;
}

.c-kariera-galerie__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.c-kariera-galerie {
		padding: var(--spacing-4xl) 0;
	}

	.c-kariera-galerie__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--spacing-md);
	}

	.c-kariera-galerie__grid > .c-kariera-galerie__item:nth-child(3n+1) {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   Component: Employee Testimonials (c-employee-testimonials)
   Kariéra page — testimonial slider. Photo left, quote overlapping bottom-right.
   ========================================================================== */

.c-employee-testimonials {
	position: relative;
	overflow: hidden;
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
}

/* --- Header --- */

.c-employee-testimonials__header {
	max-width: var(--max-width-boxed);
	margin: 0 auto var(--spacing-4xl);
	padding: 0 var(--spacing-section-x);
}

.c-employee-testimonials__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	color: var(--color-black);
	margin: 0;
}

/* --- Slider wrapper --- */

.c-employee-testimonials__slider {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	overflow: hidden;
}

/* --- Track --- */

.c-employee-testimonials__track {
	display: flex;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.c-employee-testimonials__track::-webkit-scrollbar {
	display: none;
}

/* --- Slide item: photo top-left, quote absolute bottom-right overlapping photo corner --- */

.c-employee-testimonials__item {
	flex: 0 0 100%;
	scroll-snap-align: start;
	position: relative;
	padding-bottom: var(--spacing-4xl);
}

/* --- Photo --- */

.c-employee-testimonials__media {
	width: 40%;
	overflow: hidden;
}

.c-employee-testimonials__photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* --- Quote box: top-left corner overlaps photo bottom-right, extends below photo --- */

.c-employee-testimonials__quote {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 68%;
	background-color: var(--color-white);
	padding: var(--spacing-4xl);
	display: flex;
	gap: var(--spacing-lg);
	align-items: flex-start;
	z-index: 2;
}

.c-employee-testimonials__quote-icon {
	flex-shrink: 0;
	color: var(--color-bronze);
	margin-top: 6px;
}

.c-employee-testimonials__quote-body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.c-employee-testimonials__quote-text {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-row-h);
	font-weight: var(--font-weight-bold);
	font-style: italic;
	line-height: var(--line-height-tight);
	color: var(--color-black);
	margin: 0;
	padding: 0;
}

.c-employee-testimonials__quote-author {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	line-height: var(--line-height-none);
	color: var(--color-text-muted-dark);
}

/* --- Navigation --- */

.c-employee-testimonials__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-lg);
	margin-top: var(--spacing-3xl);
}

.c-employee-testimonials__progress {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1;
}

.c-employee-testimonials__line {
	flex: 1;
	height: calc(var(--spacing-xs) / 2);
	background-color: var(--color-border);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.c-employee-testimonials__line.is-active {
	background-color: var(--color-black);
}

.c-employee-testimonials__line:hover {
	background-color: var(--color-bronze);
}

.c-employee-testimonials__line:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-employee-testimonials__arrows {
	display: flex;
	align-items: center;
}

.c-employee-testimonials__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-black);
	padding: var(--spacing-sm);
	transition: color var(--transition-fast), opacity var(--transition-fast);
}

.c-employee-testimonials__arrow:hover {
	color: var(--color-bronze);
}

.c-employee-testimonials__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.c-employee-testimonials__arrow:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

/* --- Mobile (max-width: 1024px) --- */

@media (max-width: 1024px) {
	.c-employee-testimonials {
		padding: var(--spacing-3xl) 0;
	}

	.c-employee-testimonials__header {
		margin-bottom: var(--spacing-xl);
	}

	.c-employee-testimonials__slider {
		padding: 0;
	}

	.c-employee-testimonials__item {
		flex: 0 0 100%;
		display: block;
		position: relative;
		padding-bottom: 0;
	}

	.c-employee-testimonials__media {
		width: 100%;
	}

	.c-employee-testimonials__photo {
		aspect-ratio: 4 / 5;
		object-position: center top;
	}

	.c-employee-testimonials__quote {
		position: relative;
		width: auto;
		margin: -100px var(--spacing-section-x) 0;
		padding: var(--spacing-xl);
		z-index: 2;
	}

	.c-employee-testimonials__quote-icon svg {
		width: 32px;
		height: auto;
	}

	.c-employee-testimonials__nav {
		margin-top: var(--spacing-xl);
		padding: 0 var(--spacing-section-x);
		/* mobile: nav needs own padding since slider wrapper has padding: 0 */
	}
}

/* ==========================================================================
   Modifier: c-employee-testimonials--o-nas
   Static single testimonial on the O nás page — no slider nav, 4 deco shapes.
   ========================================================================== */

.c-employee-testimonials--o-nas {
	position: relative;
	overflow-x: clip;
}

.c-et__deco {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

.c-et__deco svg {
	display: block;
	width: 100%;
	height: auto;
}

.c-employee-testimonials--o-nas .c-employee-testimonials__slider {
	position: relative;
	z-index: 1;
}

.c-et__deco--1 {
    width: 101px;
    bottom: 17px;
    left: 34%;
}

.c-et__deco--2 {
    width: 600px;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
	
}

.c-et__deco--3 {
    width: 101px;
    top: 10%;
    right: 40%;
}

.c-et__deco--4 {
    width: 400px;
    bottom: -52%;
    left: 15%;
}

.c-employee-testimonials--o-nas .c-et__deco--3,
.c-employee-testimonials--technologie .c-et__deco--3 {
	width: 103px;
	top: 24%;
	right: 40%;
}

.page-template-template-kariera .c-et__deco--1,
.page-template-template-kariera .c-et__deco--4 {
	display: none;
}

.page-template-template-kariera .c-et__deco--3 {
	top: 20%;
}

@media (max-width: 1024px) {
	.c-et__deco {
		display: none;
	}
}

/* ==========================================================================
   Component: Photo Grid (c-photo-grid)
   ========================================================================== */

.c-photo-grid {
	background-color: var(--color-white);
	padding: var(--spacing-5xl) 0;
	overflow: hidden;
}

/* --- Header --- */

.c-photo-grid__header {
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--spacing-section-x);
	text-align: center;
	margin-bottom: var(--spacing-3xl);
}

.c-photo-grid__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0;
}

/* --- Track (3-col grid on desktop) --- */

.c-photo-grid__track {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-lg);
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-section-x);
	padding-right: var(--spacing-section-x);
}

/* --- Card --- */

.c-photo-grid__item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2xl);
}

.c-photo-grid__image-wrap {
	aspect-ratio: 786 / 524;
	overflow: hidden;
}

.c-photo-grid__image-wrap--empty {
	background-color: var(--color-peroxid);
}

.c-photo-grid__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-photo-grid__content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-photo-grid__item-title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-label);
	color: var(--color-black);
	margin: 0;
}

.c-photo-grid__text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-black);
	margin: 0;
}

/* --- Nav (hidden on desktop, shown on mobile) --- */

.c-photo-grid__nav {
	display: none;
}

.c-photo-grid__progress {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1;
}

.c-photo-grid__line {
	flex: 1;
	height: calc(var(--spacing-xs) / 2);
	background-color: var(--color-border);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.c-photo-grid__line.is-active {
	background-color: var(--color-black);
}

.c-photo-grid__line:hover {
	background-color: var(--color-bronze);
}

.c-photo-grid__line:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-photo-grid__arrows {
	display: flex;
	align-items: center;
}

.c-photo-grid__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-black);
	padding: var(--spacing-sm);
	transition: color var(--transition-fast), opacity var(--transition-fast);
}

.c-photo-grid__arrow:hover {
	color: var(--color-bronze);
}

.c-photo-grid__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.c-photo-grid__arrow:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

/* --- Photo Grid mobile --- */

@media (max-width: 1024px) {
	.c-photo-grid {
		padding: var(--spacing-3xl) 0;
	}

	.c-photo-grid__header {
		margin-bottom: var(--spacing-xl);
	}

	.c-photo-grid__track {
		display: flex;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: var(--spacing-section-x);
		padding-right: 0;
		gap: var(--spacing-md);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--spacing-section-x);
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.c-photo-grid__track::-webkit-scrollbar {
		display: none;
	}

	.c-photo-grid__item {
		flex: 0 0 calc(100vw - var(--spacing-section-x) - var(--spacing-5xl));
		scroll-snap-align: start;
	}

	.c-photo-grid__nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: var(--spacing-xl);
		padding: 0 var(--spacing-section-x);
	}
}

/* ==========================================================================
   Component: O nás — Intro nadpis (c-o-nas-intro)
   ========================================================================== */

.c-o-nas-intro {
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
}

.c-o-nas-intro__inner {
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--spacing-section-x);
}

.c-o-nas-intro__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
}

@media (max-width: 1024px) {
	.c-o-nas-intro {
		padding: var(--spacing-3xl) 0;
	}
}

/* ==========================================================================
   Component: O nás — Feature row (c-o-nas-feature)
   Single zigzag row: content left, image right.
   ========================================================================== */

.c-o-nas-feature {
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
	padding-bottom: var(--spacing-8xl);
}

.c-o-nas-feature__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: flex;
	align-items: center;
	gap: var(--spacing-5xl);
}

.c-o-nas-feature__content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl);
}

.c-o-nas-feature__title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-4xl);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0;
}

.c-o-nas-feature__text {
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-black);
	margin: 0;
}

.c-o-nas-feature__actions {
	display: flex;
	margin-top: var(--spacing-md);
}

.c-o-nas-feature__media {
	flex: 1 1 0;
}

.c-o-nas-feature__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 786 / 524;
	object-fit: cover;
}

/* --- Video variant: play icon overlay on thumbnail --- */

.c-o-nas-feature__video {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	overflow: hidden;
	font: inherit;
	color: inherit;
}

.c-o-nas-feature__video .c-o-nas-feature__image {
	transition: transform var(--transition-base);
}

.c-o-nas-feature__video:hover .c-o-nas-feature__image,
.c-o-nas-feature__video:focus-visible .c-o-nas-feature__image {
	transform: scale(1.03);
}

.c-o-nas-feature__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	pointer-events: none;
	transition: transform var(--transition-base);
}

.c-o-nas-feature__video:hover .c-o-nas-feature__play,
.c-o-nas-feature__video:focus-visible .c-o-nas-feature__play {
	transform: translate(-50%, -50%) scale(1.1);
}

.c-o-nas-feature__video:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

@media (max-width: 1024px) {
	.c-o-nas-feature {
		padding: var(--spacing-3xl) 0 var(--spacing-4xl);
	}

	.c-o-nas-feature__inner {
		flex-direction: column;
		gap: var(--spacing-xl);
	}

	.c-o-nas-feature__content {
		gap: var(--spacing-md);
	}

	.c-o-nas-feature__title {
		font-size: var(--font-size-3xl);
	}

	.c-o-nas-feature__media {
		flex: none;
		width: 100%;
	}

	.c-o-nas-feature__actions {
		width: 100%;
	}

	.c-o-nas-feature__actions .c-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Component: O nás — Banner (c-o-nas-banner)
   Full-width background photo, centred white heading + text.
   ========================================================================== */

.c-o-nas-banner {
	position: relative;
	display: flex;
	align-items: center;
	/* overflow: visible — deco musí přesahovat nad sekci, bg/overlay jsou inset:0 takže nepřetékají */
	min-height: 800px;
	z-index: 1;
}

/* Deco: centered at top, half above banner / half below into banner. */
.c-o-nas-banner .c-et__deco--1 {
	width: 160px;
	top: -80px;
	bottom: auto;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

.c-o-nas-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.c-o-nas-banner__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.45);
}

.c-o-nas-banner__inner {
	position: relative;
	z-index: 1;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--spacing-section-x);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-xl);
	text-align: center;
}

.c-o-nas-banner__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-white);
	margin: 0;
}

.c-o-nas-banner__text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-white);
	margin: 0;
}

@media (max-width: 1024px) {
	.c-o-nas-banner {
		padding: var(--spacing-5xl) 0;
		min-height: 480px;
	}

	.c-o-nas-banner__inner {
		max-width: 420px;
		text-align: center;
		align-items: center;
	}

	.c-o-nas-banner__title {
		width: 100%;
		text-align: center;
	}

	.c-o-nas-banner .c-et__deco--1 {
		display: block;
		width: 80px;
		top: -40px;
		z-index: 2;
	}
}

/* ==========================================================================
   Component: O nás — Timeline Slider (c-o-nas-timeline)
   Horizontální slider s kartami — fotkana pozadí, bronze badge, nadpis + text.
   ========================================================================== */

.c-o-nas-timeline {
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
	overflow-x: clip;
	position: relative;
	z-index: 1;
}

/* --- Deco shapes --- */

.c-o-nas-timeline__deco {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

.c-o-nas-timeline__deco svg {
	display: block;
	width: 100%;
	height: auto;
}

.c-o-nas-timeline__deco--1 {
	width: 450px;
	top: -27px;
	left: calc(var(--container-x) - 233px);
}

.c-o-nas-timeline__deco--2 {
	width: 100px;
	top: -20px;
	left: calc(var(--container-x) + 270px);
}

/* --- Header --- */

.c-o-nas-timeline__header {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--spacing-4xl);
	padding: 0 var(--spacing-section-x);
}

.c-o-nas-timeline__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0;
	text-align: center;
}

/* --- Track --- */

.c-o-nas-timeline__track {
	display: flex;
	gap: var(--spacing-lg);
	padding: 0 0 0 var(--container-x);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--container-x);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.c-o-nas-timeline__track::-webkit-scrollbar {
	display: none;
}

/* --- Card --- */

.c-o-nas-timeline__item {
	--_card-w: calc((var(--max-width-boxed) - 3 * var(--spacing-lg)) / 4);
	flex: 0 0 var(--_card-w);
	width: var(--_card-w);
	aspect-ratio: 2 / 3;
	position: relative;
	overflow: hidden;
	scroll-snap-align: start;
}

.c-o-nas-timeline__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.c-o-nas-timeline__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 38%, rgba(0, 0, 0, 0.8) 100%);
}

/* --- Badge --- */

.c-o-nas-timeline__badge {
	position: absolute;
	top: 20px;
	left: 20px;
	background-color: var(--color-bronze);
	color: var(--color-white);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	line-height: 1;
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	padding: 12px 24px;
	border-radius: 200px;
}

/* --- Content --- */

.c-o-nas-timeline__content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.c-o-nas-timeline__heading {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-label);
	color: var(--color-white);
	margin: 0;
}

.c-o-nas-timeline__text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-sm);
	color: var(--color-white);
	margin: 0;
}

/* --- Navigation --- */

.c-o-nas-timeline__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-lg);
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--spacing-3xl);
	padding: 0 var(--spacing-section-x);
}

.c-o-nas-timeline__progress {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1;
}

.c-o-nas-timeline__line {
	flex: 1;
	height: calc(var(--spacing-xs) / 2);
	background-color: var(--color-border);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.c-o-nas-timeline__line.is-active {
	background-color: var(--color-black);
}

.c-o-nas-timeline__line:hover {
	background-color: var(--color-bronze);
}

.c-o-nas-timeline__line:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-o-nas-timeline__arrows {
	display: flex;
	align-items: center;
}

.c-o-nas-timeline__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-black);
	padding: var(--spacing-sm);
	transition: color var(--transition-fast), opacity var(--transition-fast);
}

.c-o-nas-timeline__arrow:hover {
	color: var(--color-bronze);
}

.c-o-nas-timeline__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.c-o-nas-timeline__arrow:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

/* --- Mobile --- */

@media (max-width: 1024px) {
	.c-o-nas-timeline {
		padding: var(--spacing-3xl) 0;
	}

	.c-o-nas-timeline__deco {
		display: none;
	}

	.c-o-nas-timeline__header {
		margin-bottom: var(--spacing-xl);
	}

	.c-o-nas-timeline__track {
		padding: 0 0 0 var(--spacing-section-x);
		gap: var(--spacing-md);
	}

	.c-o-nas-timeline__item {
		--_card-w: calc(100vw - var(--spacing-section-x) - var(--spacing-5xl));
	}

	.c-o-nas-timeline__nav {
		margin-top: var(--spacing-xl);
	}
}

/* ==========================================================================
   Component: Technologie — Zigzag info sekce (c-technologie-zigzag)
   Dva střídané řady: nadpis + text + obrázek. Bez tlačítek.
   ========================================================================== */

.c-technologie-zigzag {
	background-color: var(--color-peroxid);
	padding: var(--spacing-8xl) 0;
}

.c-technologie-zigzag__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8xl);
}

/* --- Row --- */

.c-technologie-zigzag__row {
	display: flex;
	align-items: center;
}

.c-technologie-zigzag__row--reversed {
	flex-direction: row-reverse;
}

/* --- Content --- */

.c-technologie-zigzag__content {
	flex: 0 0 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4xl);
	padding-right: var(--spacing-5xl);
}

.c-technologie-zigzag__row--reversed .c-technologie-zigzag__content {
	padding-right: 0;
	padding-left: var(--spacing-5xl);
}

.c-technologie-zigzag__title {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-4xl);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0;
}

.c-technologie-zigzag__text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-text);
	margin: 0;
}

/* --- Media --- */

.c-technologie-zigzag__media {
	flex: 0 0 50%;
}

.c-technologie-zigzag__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 786 / 524;
	object-fit: cover;
}

/* --- Mobile --- */

@media (max-width: 1024px) {
	.c-technologie-zigzag {
		padding: var(--spacing-4xl) 0;
	}

	.c-technologie-zigzag__inner {
		gap: var(--spacing-4xl);
	}

	.c-technologie-zigzag__row,
	.c-technologie-zigzag__row--reversed {
		flex-direction: column;
		gap: var(--spacing-xl);
	}

	.c-technologie-zigzag__content,
	.c-technologie-zigzag__row--reversed .c-technologie-zigzag__content {
		gap: var(--spacing-md);
		text-align: left;
		align-items: flex-start;
		padding-left: 0;
		padding-right: 0;
	}

	.c-technologie-zigzag__title {
		font-size: var(--font-size-3xl);
	}

	.c-technologie-zigzag__media {
		flex: none;
		width: 100%;
	}
}

/* ==========================================================================
   Component: Technologie — Slider (c-technologie-slider)
   Horizontální slider — karty foto + podnadpis + text (design jako photo-grid).
   ========================================================================== */

.c-technologie-slider {
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
	overflow: hidden;
}

/* --- Header --- */

.c-technologie-slider__header {
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--spacing-section-x);
	text-align: center;
	margin-bottom: var(--spacing-4xl);
}

.c-technologie-slider__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0;
}

/* --- Track --- */

.c-technologie-slider__track {
	display: flex;
	gap: var(--spacing-lg);
	padding: 0 0 0 var(--container-x);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--container-x);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.c-technologie-slider__track::-webkit-scrollbar {
	display: none;
}

/* --- Card --- */

.c-technologie-slider__item {
	--_card-w: calc((var(--max-width-boxed) - 2 * var(--spacing-lg)) / 3);
	flex: 0 0 var(--_card-w);
	width: var(--_card-w);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2xl);
	scroll-snap-align: start;
}

.c-technologie-slider__image-wrap {
	aspect-ratio: 786 / 524;
	overflow: hidden;
}

.c-technologie-slider__image-wrap--empty {
	background-color: var(--color-peroxid);
}

.c-technologie-slider__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-technologie-slider__content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-technologie-slider__subtitle {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-label);
	color: var(--color-black);
	margin: 0;
}

.c-technologie-slider__text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-black);
	margin: 0;
}

/* --- Navigation --- */

.c-technologie-slider__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-lg);
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--spacing-3xl);
	padding: 0 var(--spacing-section-x);
}

.c-technologie-slider__progress {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1;
}

.c-technologie-slider__line {
	flex: 1;
	height: calc(var(--spacing-xs) / 2);
	background-color: var(--color-border);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.c-technologie-slider__line.is-active {
	background-color: var(--color-black);
}

.c-technologie-slider__line:hover {
	background-color: var(--color-bronze);
}

.c-technologie-slider__line:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-technologie-slider__arrows {
	display: flex;
	align-items: center;
}

.c-technologie-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-black);
	padding: var(--spacing-sm);
	transition: color var(--transition-fast), opacity var(--transition-fast);
}

.c-technologie-slider__arrow:hover {
	color: var(--color-bronze);
}

.c-technologie-slider__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.c-technologie-slider__arrow:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

/* --- Mobile --- */

@media (max-width: 1024px) {
	.c-technologie-slider {
		padding: var(--spacing-3xl) 0;
	}

	.c-technologie-slider__header {
		margin-bottom: var(--spacing-xl);
	}

	.c-technologie-slider__track {
		padding: 0 0 0 var(--spacing-section-x);
		gap: var(--spacing-md);
	}

	.c-technologie-slider__item {
		--_card-w: calc(100vw - var(--spacing-section-x) - var(--spacing-5xl));
	}

	.c-technologie-slider__nav {
		margin-top: var(--spacing-xl);
	}
}

/* ==========================================================================
   Component: Objednávka — Rezervační sekce (c-objednavka-form)
   Figma desktop node 240-20811, mobile 240-20817.
   Full-page dark section: badge + H1 + subtitle + contact info + form box.
   Placeholder form — to be replaced with Contact Form 7.
   ========================================================================== */

.c-objednavka-form {
	--_field-py: 20px;
	--_dot-color: var(--color-green);
	background-color: var(--color-black);
	padding: var(--spacing-7xl) var(--spacing-section-x);
	position: relative;
	overflow-x: clip;
}

.c-objednavka-form__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-5xl);
	position: relative;
	z-index: 1;
}

/* ---- Deco shapes ---- */

.c-objednavka-form__deco {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

.c-objednavka-form__deco svg {
	display: block;
	width: 100%;
	height: auto;
}

.c-objednavka-form__deco--1 {
	width: 400px;
	top: 20%;
	left: 20%;
}

.c-objednavka-form__deco--2 {
	width: 150px;
	bottom: 250px;
	right: 20%;
}

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

.c-objednavka-form__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-4xl);
	text-align: center;
}

.c-objednavka-form__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: 12px var(--spacing-lg);
	background-color: var(--color-ivory);
	border-radius: var(--radius-full);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-caps);
	color: var(--color-black);
}

.c-objednavka-form__badge-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--color-bronze);
}

.c-objednavka-form__headline {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-2xl);
}

.c-objednavka-form__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-white);
	text-align: center;
	margin: 0;
}

.c-objednavka-form__subtitle {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-white);
	text-align: center;
	margin: 0;
	max-width: 560px;
}

/* ---- Contact info ---- */

.c-objednavka-form__contacts {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--spacing-5xl);
}

.c-objednavka-form__contact {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.c-objednavka-form__contact-primary {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.c-objednavka-form__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--_dot-color);
	flex-shrink: 0;
}

.c-objednavka-form__dot.is-closed {
	--_dot-color: var(--color-red);
}

.c-objednavka-form__phone,
.c-objednavka-form__email {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-2xl);
	text-transform: uppercase;
	color: var(--color-white);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.c-objednavka-form__phone:hover,
.c-objednavka-form__email:hover {
	color: var(--color-bronze);
}

.c-objednavka-form__contact-sub {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-caps);
	color: var(--color-text-muted);
}

/* ---- Form box ---- */

.c-objednavka-form__form-wrap {
	width: 100%;
	max-width: 800px;
	border: 1px solid var(--color-porcelain);
	padding: var(--spacing-5xl) var(--spacing-3xl);
}

/* ---- Grid & rows ---- */

.c-objednavka-form__grid {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.c-objednavka-form__row--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
}

.c-objednavka-form__row--footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
}

/* ---- Inputs ---- */

.c-objednavka-form__input {
	display: block;
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--color-input-border);
	color: var(--color-white);
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	line-height: var(--line-height-none);
	padding: var(--_field-py) 0;
	outline: none;
	transition: border-color var(--transition-fast);
}

.c-objednavka-form__input::placeholder {
	color: var(--color-white);
	opacity: 1;
}

.c-objednavka-form__input:focus {
	border-bottom-color: var(--color-bronze);
}

.c-objednavka-form__input--textarea {
	resize: vertical;
	min-height: 109px;
	line-height: var(--line-height-base);
}

/* ---- Select ---- */

.c-objednavka-form__select-wrap {
	position: relative;
}

.c-objednavka-form__select {
	display: block;
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--color-input-border);
	color: var(--color-white);
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	line-height: var(--line-height-none);
	padding: var(--_field-py) var(--spacing-xl) var(--_field-py) 0;
	outline: none;
	appearance: none;
	cursor: pointer;
	transition: border-color var(--transition-fast);
}

.c-objednavka-form__select:focus {
	border-bottom-color: var(--color-bronze);
}

.c-objednavka-form__select option {
	background-color: var(--color-black);
	color: var(--color-white);
	text-transform: uppercase;
}

.c-objednavka-form__select-arrow {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: var(--color-white);
	pointer-events: none;
}

/* ---- Disclaimer + submit ---- */

.c-objednavka-form__disclaimer {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-sm);
	line-height: var(--line-height-base);
	color: var(--color-white);
	text-decoration: none;
}

.c-objednavka-form__disclaimer:hover {
	text-decoration: underline;
}

.c-objednavka-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: var(--_field-py) var(--spacing-xl);
	background-color: var(--color-bronze);
	color: var(--color-white);
	border: none;
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.c-objednavka-form__submit:hover {
	background-color: var(--color-bronze-hover);
}

.c-objednavka-form__message {
	margin: 0 0 var(--spacing-lg);
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: 8px;
	font-size: var(--font-size-sm);
	line-height: 1.5;
}

.c-objednavka-form__message--error {
	background-color: rgba(220, 53, 69, 0.12);
	border: 1px solid rgba(220, 53, 69, 0.4);
	color: #ffd1d6;
}

/* Honeypot — visually hidden but still in the tab order off-screen so bots fill it. */
.c-objednavka-form__honeypot {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   c-objednavka-form — Mobile (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {

	.c-objednavka-form {
		padding: var(--spacing-5xl) var(--spacing-section-x);
	}

	.c-objednavka-form__deco {
		display: none;
	}

	.c-objednavka-form__inner {
		gap: var(--spacing-3xl);
	}

	.c-objednavka-form__header {
		gap: var(--spacing-lg);
	}

	.c-objednavka-form__contacts {
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-xl);
	}

	.c-objednavka-form__contact {
		align-items: center;
		text-align: center;
	}

	.c-objednavka-form__form-wrap {
		padding: var(--spacing-3xl) var(--spacing-md);
	}

	.c-objednavka-form__row--2col {
		grid-template-columns: 1fr;
	}

	.c-objednavka-form__row--footer {
		flex-direction: column;
		align-items: stretch;
	}

	.c-objednavka-form__submit {
		width: 100%;
	}
}

/* ==========================================================================
   c-hero-blog
   Hero section pro stránku Blog. Pozadí (PC + mobil) s dark overlayem,
   v levém horním rohu drobečková navigace, uprostřed/dole nadpis a
   podnadpis, pod ním řada filtrovacích tlačítek (kategorie blogu).
   Tlačítka filtrují c-blog-grid pod sebou — viz assets/js/blog-grid.js.
   ========================================================================== */

.c-hero-blog {
	position: relative;
	height: 1000px;
	overflow: hidden;
	color: var(--color-white);
}

.c-hero-blog__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--bg-pos, center center);
}

@media (max-width: 1024px) {
	.c-hero-blog__bg {
		object-position: var(--bg-pos-mobile, var(--bg-pos, center center));
	}
}

.c-hero-blog__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--color-overlay-dark);
}

.c-hero-blog__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	/* Bottom padding = grid pull (160px) + gap above grid (40px) so filters stay above the overlap zone. */
	padding: calc(var(--header-height) + var(--spacing-xl)) var(--spacing-section-x) 200px;
}

/* --- Breadcrumb --- */

.c-hero-blog__breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.c-hero-blog__breadcrumb-back {
	display: none;
	align-items: center;
	color: var(--color-white);
	text-decoration: none;
}

.c-hero-blog__breadcrumb-home {
	display: flex;
	align-items: center;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.c-hero-blog__breadcrumb-home:hover {
	color: var(--color-white);
}

.c-hero-blog__breadcrumb-sep {
	flex-shrink: 0;
	color: var(--color-text-muted);
}

.c-hero-blog__breadcrumb-current {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	line-height: var(--line-height-none);
	color: var(--color-white);
}

/* --- Content (title + subtitle) --- */

.c-hero-blog__content {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 700px;
}

.c-hero-blog__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-white);
	margin: 0;
}

.c-hero-blog__subtitle {
	font-family: var(--font-family-base);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-white);
	margin: var(--spacing-hero-title-gap) 0 0;
}

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

.c-hero-blog__filters {
	scroll-margin-top: var(--header-height);
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-lg);
	margin-top: var(--spacing-4xl);
}

.c-hero-blog__filter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-lg) var(--spacing-xl);
	background-color: transparent;
	border: 1px solid var(--color-border-light);
	color: var(--color-white);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.c-hero-blog__filter:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: var(--color-white);
}

.c-hero-blog__filter:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-hero-blog__filter.is-active {
	background-color: var(--color-porcelain);
	border-color: var(--color-porcelain);
	color: var(--color-black);
}

.c-hero-blog__filter.is-active:hover {
	background-color: var(--color-porcelain);
	color: var(--color-black);
}

/* --- Hero Blog mobile --- */

@media (max-width: 1024px) {
	.c-hero-blog {
		height: auto;
		min-height: 700px;
	}

	.c-hero-blog__inner {
		min-height: 700px;
		/* Bottom padding = mobile grid pull (80px) + gap (40px). */
		padding: var(--header-height) var(--spacing-section-x) 120px;
	}

	.c-hero-blog__breadcrumb {
		gap: var(--spacing-sm);
	}

	.c-hero-blog__breadcrumb-back {
		display: flex;
	}

	.c-hero-blog__breadcrumb-sep,
	.c-hero-blog__breadcrumb-current {
		display: none;
	}

	.c-hero-blog__content {
		max-width: 100%;
		gap: var(--spacing-lg);
	}

	.c-hero-blog__subtitle {
		margin-top: 0;
	}

	.c-hero-blog__filters {
		flex-wrap: nowrap;
		gap: var(--spacing-sm);
		margin-top: var(--spacing-xl);
		margin-left: calc(-1 * var(--spacing-section-x));
		margin-right: calc(-1 * var(--spacing-section-x));
		padding: 0 var(--spacing-section-x);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-left: var(--spacing-section-x);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.c-hero-blog__filters::-webkit-scrollbar {
		display: none;
	}

	.c-hero-blog__filter {
		flex-shrink: 0;
		scroll-snap-align: start;
		padding: var(--spacing-md) var(--spacing-lg);
	}
}

/* ==========================================================================
   c-blog-grid
   Grid článků pod c-hero-blog. První řádek 2 velké karty, další řádky
   po 3. Karty mají identický vizuál jako c-posts (přesah obsahového
   boxu přes obrázek). Filtrace probíhá v JS — viz assets/js/blog-grid.js.
   ========================================================================== */

.c-blog-grid {
	/* Transparent for the first 160px so the hero background shows through the
	   overlap zone. Hard edge at 160px = where the hero would normally end. */
	background: linear-gradient(to bottom, transparent 160px, var(--color-peroxid) 160px);
	margin-top: -160px;
	position: relative;
	z-index: 1;
	padding: var(--spacing-3xl) 0 var(--spacing-5xl);
}

.c-blog-grid__items {
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--spacing-section-x);
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--spacing-3xl) var(--spacing-lg);
}

.c-blog-grid__item {
	position: relative;
	grid-column: span 2;
}

.c-blog-grid__item.is-large {
	grid-column: span 3;
	display: flex;
	flex-direction: column;
}

.c-blog-grid__item[hidden] {
	display: none;
}

.c-blog-grid__image-wrap {
	display: block;
	overflow: hidden;
}

.c-blog-grid__image {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-base);
}

.c-blog-grid__item:hover .c-blog-grid__image {
	transform: scale(1.04);
}

.c-blog-grid__content {
	position: relative;
	margin-top: 0;
	width: 100%;
	background-color: var(--color-white);
	border-left: 2px solid var(--color-bronze);
	padding: var(--spacing-xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.c-blog-grid__item.is-large .c-blog-grid__content {
	flex: 1 1 auto;
	margin-top: -22%;
	width: 66%;
	padding: var(--spacing-3xl);
}

.c-blog-grid__date {
	display: block;
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	color: var(--color-black);
}

.c-blog-grid__item-title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-none);
	margin: 0;
}

.c-blog-grid__item.is-large .c-blog-grid__item-title {
	font-size: var(--font-size-xl);
}

.c-blog-grid__item-link {
	color: var(--color-black);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--transition-fast);
}

.c-blog-grid__item-link:hover {
	color: var(--color-bronze);
}

.c-blog-grid__item-link:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-blog-grid__meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	flex-wrap: wrap;
}

.c-blog-grid__author,
.c-blog-grid__category {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	color: var(--color-text-faded);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--transition-fast);
}

.c-blog-grid__author:hover,
.c-blog-grid__category:hover {
	color: var(--color-bronze);
}

.c-blog-grid__author:focus-visible,
.c-blog-grid__category:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-blog-grid__read-time {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	color: var(--color-text-faded);
}

.c-blog-grid__empty {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: var(--spacing-3xl) var(--spacing-section-x);
	text-align: center;
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	color: var(--color-black);
}

/* --- Blog Grid pagination --- */

.c-blog-grid__pagination {
	max-width: var(--max-width-boxed);
	margin: var(--spacing-3xl) auto 0;
	padding: 0 var(--spacing-section-x);
	display: flex;
	justify-content: center;
}

.c-blog-grid__pagination-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
}

.c-blog-grid__pagination-item {
	display: flex;
}

.c-blog-grid__pagination-item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 var(--spacing-md);
	border: 1px solid var(--color-ivory);
	background-color: transparent;
	color: var(--color-black);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.c-blog-grid__pagination-item .page-numbers:hover,
.c-blog-grid__pagination-item .page-numbers:focus-visible {
	border-color: var(--color-black);
	outline: none;
}

.c-blog-grid__pagination-item.is-current .page-numbers,
.c-blog-grid__pagination-item .page-numbers.current {
	border-color: var(--color-black);
	color: var(--color-black);
}

.c-blog-grid__pagination-item.is-dots .page-numbers,
.c-blog-grid__pagination-item .page-numbers.dots {
	border-color: transparent;
	pointer-events: none;
}

.c-blog-grid__pagination-item.is-prev .page-numbers,
.c-blog-grid__pagination-item.is-next .page-numbers {
	padding: 0 var(--spacing-lg);
}

/* --- Blog Grid mobile (2-tier: ≤1024px) --- */

@media (max-width: 1024px) {
	.c-blog-grid {
		background: linear-gradient(to bottom, transparent 80px, var(--color-peroxid) 80px);
		margin-top: -80px;
		padding-top: var(--spacing-xl);
		padding-bottom: var(--spacing-3xl);
	}

	/* First card uses the same container padding as all other cards. */
	.c-blog-grid__item:first-child {
		margin-left: 0;
		margin-right: 0;
	}

	.c-blog-grid__items {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}

	.c-blog-grid__item,
	.c-blog-grid__item.is-large {
		grid-column: span 1;
	}

	.c-blog-grid__item.is-large {
		display: block;
	}

	.c-blog-grid__content,
	.c-blog-grid__item.is-large .c-blog-grid__content {
		flex: none;
		margin-top: 0;
		width: 100%;
		padding: var(--spacing-xl);
	}

	.c-blog-grid__item-title,
	.c-blog-grid__item.is-large .c-blog-grid__item-title {
		font-size: var(--font-size-xl);
	}

	.c-blog-grid__pagination {
		margin-top: var(--spacing-xl);
	}

	.c-blog-grid__pagination-item .page-numbers {
		min-width: 40px;
		height: 40px;
		padding: 0 var(--spacing-sm);
	}

	.c-blog-grid__pagination-item.is-prev .page-numbers,
	.c-blog-grid__pagination-item.is-next .page-numbers {
		padding: 0 var(--spacing-md);
	}
}

/* ==========================================================================
   c-hero-basic — slim dark hero for text/legal pages.
   Breadcrumb + H1 only, no image, no CTA, no admin.
   ========================================================================== */

.c-hero-basic {
	background-color: var(--color-black);
	color: var(--color-white);
	min-height: 300px;
	display: flex;
	align-items: flex-end;
	padding: calc(var(--header-height) + var(--spacing-5xl)) 0 var(--spacing-4xl);
	position: relative;
	overflow: hidden;
}

.c-hero-basic__inner {
	width: 100%;
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2xl);
	position: relative;
	z-index: 1;
}

/* ---- Deco shapes ---- */

.c-hero-basic__deco {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

.c-hero-basic__deco svg {
	display: block;
	width: 100%;
	height: auto;
}

.c-hero-basic__deco--1 {
	width: 600px;
	bottom: -300px;
	right: 8%;
}

.c-hero-basic__deco--2 {
	width: 128px;
	top: 30px;
	left: calc(var(--container-x) - 40px);
}

.c-hero-basic__deco--3 {
	width: 51px;
	top: calc(50% + 75px);
	left: calc(var(--container-x) - 240px);
}

.c-hero-basic__breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.c-hero-basic__breadcrumb-back,
.c-hero-basic__breadcrumb-home {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	transition: color var(--transition-fast);
}

.c-hero-basic__breadcrumb-back:hover,
.c-hero-basic__breadcrumb-home:hover {
	color: var(--color-bronze);
}

.c-hero-basic__breadcrumb-sep {
	color: var(--color-text-muted);
}

.c-hero-basic__breadcrumb-current {
	color: var(--color-white);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
}

.c-hero-basic__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-white);
	margin: 0;
	max-width: 700px;
}

@media (max-width: 1024px) {
	.c-hero-basic {
		padding: calc(var(--header-height) + var(--spacing-4xl)) 0 var(--spacing-3xl);
	}

	.c-hero-basic__deco {
		display: none;
	}

	.c-hero-basic__inner {
		gap: var(--spacing-xl);
	}

	.c-hero-basic__title {
		font-size: var(--font-size-3xl);
	}
}

/* ==========================================================================
   c-page-content — Gutenberg content typography for basic pages.
   Mirrors the Figma "basic page" type ramp (H2–H5, body, links).
   ========================================================================== */

.c-page-content {
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
}

.c-page-content__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	color: var(--color-black);
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-none);
}

.c-page-content__inner > * + * {
	margin-top: var(--spacing-lg);
}

.c-page-content__inner > h2,
.c-page-content__inner > h3,
.c-page-content__inner > h4,
.c-page-content__inner > h5,
.c-page-content__inner > h6 {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
}

.c-page-content__inner > h2 {
	font-size: var(--font-size-section-h);
	margin-top: var(--spacing-4xl);
}

.c-page-content__inner > h3 {
	font-size: var(--font-size-row-h);
	margin-top: var(--spacing-3xl);
}

.c-page-content__inner > h4 {
	font-size: var(--font-size-h4);
	margin-top: var(--spacing-3xl);
}

.c-page-content__inner > h5,
.c-page-content__inner > h6 {
	font-size: var(--font-size-h5);
	margin-top: var(--spacing-2xl);
}

.c-page-content__inner > *:first-child {
	margin-top: 0;
}

.c-page-content__inner p {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-base);
}

.c-page-content__inner a {
	color: var(--color-bronze);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--transition-fast);
}

.c-page-content__inner a:hover {
	color: var(--color-bronze-hover);
}

.c-page-content__inner a:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-page-content__inner strong,
.c-page-content__inner b {
	font-weight: var(--font-weight-bold);
}

.c-page-content__inner ul,
.c-page-content__inner ol {
	padding-left: var(--spacing-xl);
	margin-top: var(--spacing-lg);
}

.c-page-content__inner li {
	margin-top: var(--spacing-sm);
}

.c-page-content__inner li::marker {
	color: var(--color-bronze);
}

.c-page-content__inner blockquote {
	border-left: 2px solid var(--color-bronze);
	padding: var(--spacing-md) var(--spacing-xl);
	margin: var(--spacing-2xl) 0;
	font-style: italic;
	font-size: var(--font-size-xl);
	line-height: var(--line-height-snug);
}

.c-page-content__inner img,
.c-page-content__inner figure img {
	max-width: 100%;
	height: auto;
	display: block;
}

.c-page-content__inner figure {
	margin: var(--spacing-2xl) 0;
}

.c-page-content__inner figcaption {
	margin-top: var(--spacing-sm);
	font-size: var(--font-size-sm);
	color: var(--color-text-faded);
}

.c-page-content__inner hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: var(--spacing-3xl) 0;
}

.c-page-content__inner table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--spacing-lg);
}

.c-page-content__inner th,
.c-page-content__inner td {
	padding: var(--spacing-md);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

.c-page-content__inner th {
	font-weight: var(--font-weight-bold);
}

@media (max-width: 1024px) {
	.c-page-content {
		padding: var(--spacing-3xl) 0;
	}

	.c-page-content__inner {
		font-size: var(--font-size-base);
	}

	.c-page-content__inner > h2 {
		font-size: var(--font-size-2xl);
		margin-top: var(--spacing-3xl);
	}

	.c-page-content__inner > h3 {
		font-size: var(--font-size-xl);
		margin-top: var(--spacing-2xl);
	}

	.c-page-content__inner > h4 {
		font-size: var(--font-size-xl);
		margin-top: var(--spacing-2xl);
	}

	.c-page-content__inner > h5,
	.c-page-content__inner > h6 {
		font-size: var(--font-size-lg);
		margin-top: var(--spacing-xl);
	}

	.c-page-content__inner p {
		font-size: var(--font-size-base);
	}

	.c-page-content__inner blockquote {
		font-size: var(--font-size-lg);
		padding: var(--spacing-sm) var(--spacing-lg);
	}
}

/* ==========================================================================
   Modifier: Hero Kontakt (c-hero-page--kontakt)
   Figma desktop nodes 182:18333 (banner), banner = bronze strip from
   left edge to ~62 % width, sits at the bottom of the hero. Hero __content
   has no CTAs (banner replaces them) and __meta sits in bottom-right.
   Mobile: section overflow visible, banner moves under all content,
   horizontally centered, bleeds DOWN ~120px into the next section.
   The next section needs padding-top compensation to clear the banner.
   ========================================================================== */

.c-hero-page--kontakt {
	overflow: visible; /* Banner bleeds into section below on mobile */
}

/* Inner clip wrapper — keeps bg image/overlay within hero bounds */
.c-hero-kontakt__bg-clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

/* --- Banner (bronze strip) — sits inside __content where __actions would.
   Breaks out of content max-width and bleeds left to viewport edge. --- */

.c-hero-kontakt__banner {
	width: 65vw;
	margin-top: var(--spacing-hero-title-gap);
	margin-left: calc(-1 * var(--container-x));
	background-color: var(--color-bronze);
	z-index: 2;
}

.c-hero-kontakt__banner-inner {
	display: flex;
	align-items: center;
	gap: var(--spacing-5xl);
	padding: var(--spacing-xl) var(--spacing-3xl) var(--spacing-xl) var(--container-x);
	min-height: 118px;
}

.c-hero-kontakt__contact {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	flex-shrink: 0;
}

.c-hero-kontakt__contact-primary {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	white-space: nowrap;
}

.c-hero-kontakt__dot {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background-color: var(--color-green);
	flex-shrink: 0;
}

.c-hero-kontakt__dot.is-closed {
	background-color: var(--color-red);
}

.c-hero-kontakt__phone,
.c-hero-kontakt__email {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-2xl);
	line-height: var(--line-height-none);
	color: var(--color-white);
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--transition-fast);
}

.c-hero-kontakt__phone:hover,
.c-hero-kontakt__email:hover {
	color: var(--color-black);
}

.c-hero-kontakt__contact-sub {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-caps);
	line-height: var(--line-height-none);
	color: var(--color-white);
	opacity: 0.7;
}

.c-hero-kontakt__btn {
	flex-shrink: 0;
	margin-left: auto;
}

/* --- Hero Kontakt mobile --- */

@media ( max-width: 1024px ) {

	.c-hero-page--kontakt {
		margin-bottom: 200px; /* room for the banner that bleeds below */
		background-color: var(--color-peroxid);
	}

	/* Reserve room at the bottom of the hero so the absolute banner does not
	   overlap content (badge/meta/text) once breadcrumb's margin-bottom:auto
	   pushes everything to the bottom of the section. */
	.c-hero-page--kontakt .c-hero-page__inner {
		padding-bottom: calc(var(--spacing-4xl) + 40px);
	}

	.c-hero-page--kontakt .c-hero-page__content {
		align-items: center;
		text-align: center;
	}

	.c-hero-page--kontakt .c-hero-page__badge {
		align-self: center;
	}

	.c-hero-page--kontakt .c-hero-page__meta {
		justify-content: center;
	}

	/* Banner: positioned absolutely below the hero, bleeds into next section */
	.c-hero-kontakt__banner {
		position: absolute;
		left: var(--spacing-section-x);
		right: var(--spacing-section-x);
		width: auto;
		min-width: 0;
		bottom: -160px; /* bleeds into next section */
		margin: 0;
	}

	.c-hero-kontakt__banner-inner {
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-lg);
		padding: var(--spacing-xl) var(--spacing-lg);
		min-height: 0;
		text-align: center;
	}

	.c-hero-kontakt__contact {
		align-items: center;
	}

	.c-hero-kontakt__btn {
		margin-left: 0;
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Component: Kontakt Info Grid (c-kontakt-info-grid)
   ========================================================================== */

.c-kontakt-info-grid {
	background-color: var(--color-peroxid);
	padding: var(--spacing-5xl) 0;
}

.c-kontakt-info-grid__track {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-lg);
	max-width: var(--max-width-boxed);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-section-x);
	padding-right: var(--spacing-section-x);
}

/* --- Content box --- */

.c-kontakt-info-grid__item {
	background-color: var(--color-white);
	padding: var(--spacing-2xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-kontakt-info-grid__icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.c-kontakt-info-grid__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-label);
	color: var(--color-black);
	margin: 0;
}

.c-kontakt-info-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.c-kontakt-info-grid__line {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-black);
	margin: 0;
}

/* --- Photo cell --- */

.c-kontakt-info-grid__photo {
	position: relative;
	overflow: hidden;
	min-height: 100%;
	background-color: var(--color-peroxid);
}

.c-kontakt-info-grid__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Mobile --- */

@media (max-width: 1024px) {
	.c-kontakt-info-grid {
		padding: var(--spacing-3xl) 0;
	}

	.c-kontakt-info-grid__track {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-md);
	}

	.c-kontakt-info-grid__item {
		grid-column: 1 / -1;
		order: 2;
	}

	.c-kontakt-info-grid__photo {
		order: 1;
		aspect-ratio: 1 / 1;
		min-height: 0;
	}
}

/* ==========================================================================
   Component: Kontakt Form + Map (c-kontakt-form-map)
   Section má standardní peroxid bg; dark bg je aplikován pouze na form box.
   Form inputy reusují .c-objednavka-form__input / __select / __submit třídy.
   Figma: node 182-18376 (desktop), box padding 64px, title 40px.
   ========================================================================== */

.c-kontakt-form-map {
	background-color: var(--color-peroxid);
	padding: 0 0 var(--spacing-5xl);
}

.c-kontakt-form-map__inner {
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-lg);
	align-items: stretch;
}

/* --- Form box (dark container) --- */

.c-kontakt-form-map__form-col {
	--_field-py: 20px;
	background-color: var(--color-black);
	padding: var(--spacing-4xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-kontakt-form-map__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-section-h);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-xl);
	color: var(--color-white);
	margin: 0;
}

.c-kontakt-form-map__form {
	display: block;
}

/* --- Map column --- */

.c-kontakt-form-map__map-col {
	position: relative;
	min-height: 480px;
	overflow: hidden;
}

.c-kontakt-form-map__map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.c-kontakt-form-map__apple-link {
	position: absolute;
	top: var(--spacing-md);
	right: var(--spacing-md);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-md) var(--spacing-lg);
	background-color: var(--color-bronze);
	color: var(--color-white);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-none);
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.c-kontakt-form-map__apple-link:hover,
.c-kontakt-form-map__apple-link:focus-visible {
	background-color: var(--color-bronze-hover);
	color: var(--color-white);
}

.c-kontakt-form-map__apple-icon {
	flex-shrink: 0;
}

/* --- Mobile --- */

@media (max-width: 1024px) {
	.c-kontakt-form-map {
		padding: 0;
	}

	.c-kontakt-form-map__inner {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
		padding: 0;
	}

	.c-kontakt-form-map__form-col {
		order: 2;
		padding: var(--spacing-3xl) var(--spacing-section-x);
		gap: var(--spacing-xl);
	}

	.c-kontakt-form-map__map-col {
		order: 1;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.c-kontakt-form-map__title {
		font-size: var(--font-size-3xl);
		letter-spacing: var(--letter-spacing-wide);
	}
}

/* ==========================================================================
   Component: 404 — Error page (c-error-404)
   Figma node 182:19808 — dark full-bleed section, "404" with bronze diamond
   replacing the middle "0" and overlapping both digits.
   ========================================================================== */

.c-error-404 {
	position: relative;
	height: 100vh;
	background-color: var(--color-black);
	color: var(--color-white);
	overflow: hidden;
}

.c-error-404__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: auto 1fr;
	max-width: var(--max-width-boxed);
	height: 100%;
	margin: 0 auto;
	padding: calc(var(--header-height) + var(--spacing-xl)) var(--spacing-section-x) var(--spacing-5xl);
}

/* --- Breadcrumb (mirrors c-hero-page) --- */

.c-error-404__breadcrumb {
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.c-error-404__breadcrumb-back {
	display: none;
	align-items: center;
	color: var(--color-white);
	text-decoration: none;
}

.c-error-404__breadcrumb-home {
	display: flex;
	align-items: center;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.c-error-404__breadcrumb-home:hover {
	color: var(--color-white);
}

.c-error-404__breadcrumb-sep {
	flex-shrink: 0;
	color: var(--color-text-muted);
}

.c-error-404__breadcrumb-current {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	line-height: var(--line-height-none);
	color: var(--color-white);
}

/* --- Centered content --- */

.c-error-404__content {
	grid-row: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--spacing-2xl);
}

.c-error-404__number {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
}

.c-error-404__digit {
	position: relative;
	z-index: 1;
	font-family: var(--font-family-heading);
	font-size: 220px;
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-xl);
	color: var(--color-white);
}

.c-error-404__diamond {
	position: relative;
	z-index: 2;
	width: 150px;
	height: 150px;
	margin: 0 -56px;
	display: block;
}

.c-error-404__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-xl);
	color: var(--color-white);
	margin: 0;
}

.c-error-404__text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: 1.6;
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-white);
	max-width: 520px;
	margin: 0;
}

.c-error-404__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--spacing-md);
}

/* --- Mobile (≤1024px) --- */

@media (max-width: 1024px) {
	.c-error-404__inner {
		padding: calc(var(--header-height) + var(--spacing-lg)) var(--spacing-section-x) var(--spacing-3xl);
	}

	.c-error-404__breadcrumb {
		gap: var(--spacing-sm);
	}

	.c-error-404__breadcrumb-back {
		display: flex;
	}

	.c-error-404__breadcrumb-sep,
	.c-error-404__breadcrumb-current {
		display: none;
	}

	.c-error-404__content {
		gap: var(--spacing-xl);
	}

	.c-error-404__digit {
		font-size: 120px;
	}

	.c-error-404__diamond {
		width: 80px;
		height: 80px;
		margin: 0 -28px;
	}

	.c-error-404__title {
		font-size: var(--font-size-3xl);
		letter-spacing: var(--letter-spacing-wide);
	}

	.c-error-404__text {
		font-size: var(--font-size-base);
	}

	.c-error-404__actions {
		width: 100%;
	}

	.c-error-404__actions .c-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Component: Thank You (c-thank-you)
   Figma desktop 182:22300 / mobile 240:20928 — dark full-bleed section,
   centered layout with bronze check icon, heading, text, avatars and CTA.
   ========================================================================== */

.c-thank-you {
	position: relative;
	min-height: 100vh;
	background-color: var(--color-black);
	color: var(--color-white);
	overflow: hidden;
}

.c-thank-you__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	max-width: var(--max-width-boxed);
	min-height: 100vh;
	margin: 0 auto;
	padding: calc(var(--header-height) + var(--spacing-xl)) var(--spacing-section-x) var(--spacing-5xl);
	gap: var(--spacing-xl);
}

.c-thank-you__icon {
	width: 64px;
	height: 64px;
	display: block;
}

.c-thank-you__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-xl);
	color: var(--color-white);
	margin: 0;
}

.c-thank-you__text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: 1.7;
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-white);
	max-width: 520px;
	margin: 0;
}

.c-thank-you__signature {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: 1.7;
	letter-spacing: var(--letter-spacing-body);
	color: var(--color-white);
	margin: 0;
}

.c-thank-you__avatars {
	display: flex;
	justify-content: center;
}

.c-thank-you__avatar {
	--_overlap: 10px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-white);
}

.c-thank-you__avatar + .c-thank-you__avatar {
	margin-left: calc(-1 * var(--_overlap));
}

.c-thank-you__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--spacing-md);
}

/* --- Mobile (≤1024px) --- */

@media (max-width: 1024px) {
	.c-thank-you__inner {
		padding: calc(var(--header-height) + var(--spacing-lg)) var(--spacing-section-x) var(--spacing-3xl);
		gap: var(--spacing-lg);
	}

	.c-thank-you__icon {
		width: 48px;
		height: 48px;
	}

	.c-thank-you__title {
		font-size: var(--font-size-3xl);
		letter-spacing: var(--letter-spacing-wide);
	}

	.c-thank-you__text,
	.c-thank-you__signature {
		font-size: var(--font-size-base);
	}

	.c-thank-you__avatar {
		width: 40px;
		height: 40px;
	}

	.c-thank-you__actions {
		width: 100%;
	}

	.c-thank-you__actions .c-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Modifier: Hero Cenik (c-hero-page--cenik)
   Content + meta stay on the left half; right half is reserved for the
   overlapping pricelist card that lives in the next section.
   ========================================================================== */

.c-hero-page--cenik .c-hero-page__content {
	max-width: 50%;
}

.c-hero-page--cenik .c-hero-page__meta {
	grid-column: 1;
	padding-left: 0;
}

@media (max-width: 1024px) {
	.c-hero-page--cenik .c-hero-page__content {
		max-width: 100%;
	}
}

/* ==========================================================================
   Component: Cenik Intro (c-cenik-intro, c-pricelist)
   Figma desktop nodes 182:21764, 182:21828–21856
   Two-column section after the Cenik hero. Left: body text. Right: white
   pricelist card that visually bleeds upward into the hero. Mobile: pricelist
   sits on top (≈100 px above the section start, bleeding into the hero), text
   below.
   ========================================================================== */

.c-cenik-intro {
	position: relative;
	padding-bottom: var(--spacing-5xl);
}

.c-cenik-intro__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--spacing-5xl);
	max-width: var(--max-width-boxed);
	margin: 0 auto;
	padding: 0 var(--spacing-section-x);
}

.c-cenik-intro__text {
	grid-column: 1;
	grid-row: 1;
	max-width: 560px;
	padding-top: var(--spacing-5xl);
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	color: var(--color-black);
}

.c-cenik-intro__text p {
	margin: 0 0 var(--spacing-lg);
}

.c-cenik-intro__text p:last-child {
	margin-bottom: 0;
}

.c-cenik-intro__card {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	margin-top: -400px;
	position: relative;
	z-index: 2;
}

.c-pricelist {
	background-color: var(--color-white);
	padding: var(--spacing-3xl);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-pricelist__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-section-h);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin: 0 0 var(--spacing-md);
}

.c-pricelist__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.c-pricelist__item {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-lg);
	padding: var(--spacing-md) 0;
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	color: var(--color-black);
}

.c-pricelist__item:last-child {
	border-bottom: 0;
}

.c-pricelist__name {
	flex: 1;
}

.c-pricelist__price {
	flex-shrink: 0;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.9px;
	text-align: right;
	white-space: nowrap;
}

.c-pricelist__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--spacing-md);
}

/* --- Cenik Intro mobile --- */

@media (max-width: 1024px) {
	.c-cenik-intro {
		padding-bottom: 0;
	}

	.c-cenik-intro__inner {
		grid-template-columns: 1fr;
		column-gap: 0;
		padding: 0 var(--spacing-section-x);
	}

	.c-cenik-intro__card {
		grid-column: 1;
		grid-row: 1;
		margin-top: -100px;
	}

	.c-cenik-intro__text {
		grid-column: 1;
		grid-row: 2;
		max-width: 100%;
		padding-top: var(--spacing-3xl);
	}

	.c-pricelist {
		padding: var(--spacing-xl);
		gap: var(--spacing-md);
	}

	.c-pricelist__title {
		font-size: var(--font-size-section-h);
	}

	.c-pricelist__item {
		font-size: var(--font-size-base);
		gap: var(--spacing-md);
		padding: var(--spacing-sm) 0;
	}

	.c-pricelist__actions {
		justify-content: stretch;
	}

	.c-pricelist__actions .c-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Modifier: c-treatment__item-link--inline
   Odkaz uprostřed textu bullet položky — bez levého odsazení, aby text
   plynule navazoval.
   ========================================================================== */

.c-treatment__item-link--inline {
	margin-left: 0;
}

/* ==========================================================================
   Modifier: c-team-info--cenik
   Znovupoužití c-team-info layoutu mimo single-team.php — resetuje
   padding-top (není tu žádný hero-team quote bleed) a povoluje víceodstavcové
   texty (`.c-team-info__text + .c-team-info__text`).
   ========================================================================== */

.c-team-info--cenik {
	padding: var(--spacing-5xl) 0;
}

@media (max-width: 1024px) {
	.c-team-info--cenik {
		padding: var(--spacing-4xl) 0;
	}
}

/* ==========================================================================
   Modifier: c-service-grid--cenik
   Varianta service-gridu na stránce Ceník — má vycentrovaný nadpis nad
   gridem a 5sloupcový layout na desktopu. Mobil přebírá slider chování
   z výchozí komponenty.
   ========================================================================== */

.c-service-grid__heading {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	text-align: center;
	max-width: var(--max-width-boxed);
	margin: 0 auto var(--spacing-2xl);
	padding: 0 var(--spacing-section-x);
	margin-bottom: var(--spacing-4xl);
}

.c-service-grid--cenik .c-service-grid__track {
	grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1024px) {
	.c-service-grid__heading {
		font-size: var(--font-size-2xl);
		margin-bottom: var(--spacing-xl);
	}

	.c-service-grid--cenik .c-service-grid__track {
		display: flex;
	}
}

/* ==========================================================================
   Page-specific: body background black on pages where .c-reviews is last in <main>
   Ensures no white gap between reviews bottom edge and footer.
   ========================================================================== */

.page-template-template-basic,
.page-template-template-o-nas,
.page-template-template-sluzby,
.page-template-template-objednavka,
.page-template-template-kontakt,
.page-template-template-kariera,
.page-template-template-technologie,
.page-template-template-blog,
.page-template-template-faq,
.single-sluzba,
.single-kariera,
.single-team {
	background-color: var(--color-black);
}

.page-template-template-basic .c-hero-basic__title {
	width: 80%;
	max-width: none;
}

.page-template-template-basic .c-page-content__inner {
	max-width: calc(var(--max-width-boxed) * 0.8);
}

/*--------------------------------------------------------------
# c-hero-page--post (single blog post hero)
--------------------------------------------------------------*/

/* Single-post hero: title + meta on full width (no 550px cap). */
.c-hero-page--post .c-hero-page__content {
	max-width: none;
}

/* Post metadata bar — author · category · read time · date (Figma 182:18890) */
.c-hero-page__post-meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-xl);
	margin-top: var(--spacing-md);
	flex-wrap: wrap;
}

.c-hero-page__post-meta-author,
.c-hero-page__post-meta-category,
.c-hero-page__post-meta-time,
.c-hero-page__post-meta-date {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	color: var(--color-white);
	white-space: nowrap;
}

.c-hero-page__post-meta-author {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.c-hero-page__post-meta-category {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.c-hero-page__post-meta-category:hover,
.c-hero-page__post-meta-category:focus {
	color: var(--color-white);
	opacity: 0.8;
}

/*--------------------------------------------------------------
# c-post-content (single blog post body)
   Figma: desktop 182:19085 / mobile perex 240:20236
--------------------------------------------------------------*/
.c-post-content {
	padding: var(--spacing-5xl) var(--spacing-section-x);
	background-color: var(--color-peroxid);
}

.c-post-content__inner {
	max-width: 800px;
	margin-inline: auto;
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	color: var(--color-black);
}

/* Perex block — excerpt below hero, kariera-info pattern (bold text + bronze divider) */
.c-post-content__perex {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2xl);
	margin-bottom: var(--spacing-2xl);
}

.c-post-content__inner .c-post-content__perex-text {
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-xl);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-none);
	color: var(--color-black);
	margin-bottom: 0;
}

.c-post-content__perex-divider {
	width: 100%;
	height: 2px;
	background-color: var(--color-bronze);
}

/* ==========================================================================
   c-post-content — Typography (Figma 182:19085)
   ========================================================================== */

/* Paragraphs */
.c-post-content__inner p {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	color: var(--color-black);
	margin-top: 0;
	margin-bottom: var(--spacing-lg);
}

/* Headings */
.c-post-content__inner h2,
.c-post-content__inner h3,
.c-post-content__inner h4,
.c-post-content__inner h5 {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	color: var(--color-black);
	margin-top: var(--spacing-2xl);
	margin-bottom: var(--spacing-lg);
}

.c-post-content__inner h2 { font-size: var(--font-size-section-h); }  /* 40px */
.c-post-content__inner h3 { font-size: var(--font-size-row-h); }       /* 34px */
.c-post-content__inner h4 { font-size: var(--font-size-2xl); }         /* 30px */
.c-post-content__inner h5 { font-size: var(--font-size-post-h5); }     /* 26px */

/* Suppress top margin from the first heading/block inside inner */
.c-post-content__inner > :first-child { margin-top: 0; }

/* Inline formatting */
.c-post-content__inner strong { font-weight: var(--font-weight-bold); }
.c-post-content__inner em     { font-style: italic; }

/* Links */
.c-post-content__inner a {
	color: var(--color-bronze);
	text-underline-offset: 3px;
}

.c-post-content__inner a:hover { color: var(--color-bronze-hover); }

/* Lists */
.c-post-content__inner ul,
.c-post-content__inner ol {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	color: var(--color-black);
	margin-top: 0;
	margin-bottom: var(--spacing-lg);
}

.c-post-content__inner ol {
	padding-left: var(--spacing-3xl);
}

/* Bronze star icons for unordered lists */
.c-post-content__inner ul {
	list-style: none;
	padding-left: 0;
}

.c-post-content__inner ul > li {
	position: relative;
	padding-left: calc(18px + var(--spacing-md));
	min-height: 18px;
}

.c-post-content__inner ul > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9976 7.75378C12.9552 10.2673 13.731 11.0439 16.2423 12.0022C13.7314 12.9606 12.9552 13.7372 11.9976 16.2507C11.0401 13.7376 10.2642 12.9606 7.75293 12.0022C10.2642 11.0439 11.0401 10.2673 11.9976 7.75378Z' fill='%23CC6633'/%3E%3Cpath d='M2.15005 12.0022C2.15005 12.4184 2.36632 12.7776 2.72758 12.9626C6.68556 14.9821 9.014 17.3085 11.0321 21.2639C11.219 21.6296 11.5799 21.8481 11.9978 21.8481C12.4156 21.8481 12.7769 21.6296 12.9638 21.2639C14.984 17.3065 17.3124 14.978 21.2724 12.9606C21.6337 12.7755 21.8499 12.4184 21.8499 12.0022C21.8499 11.586 21.6337 11.231 21.2724 11.0459C17.3083 9.02645 14.9774 6.69554 12.9598 2.73406V2.73203C12.7728 2.36841 12.4136 2.15195 11.9982 2.15195C11.5827 2.15195 11.2235 2.36841 11.0366 2.73203C9.01889 6.6935 6.69004 9.024 2.73002 11.0439C2.36672 11.2289 2.15046 11.5881 2.15046 12.0022M24 12.0022C24 13.2252 23.328 14.3266 22.2466 14.8773C18.6898 16.691 16.6929 18.6876 14.8789 22.2435C14.3266 23.3278 13.2221 24.0004 11.9982 24.0004C10.7743 24.0004 9.66973 23.3278 9.11745 22.2435C7.30545 18.6896 5.30853 16.693 1.75173 14.8794C0.672018 14.3287 0 13.2252 0 12.0022C0 10.7793 0.672018 9.67786 1.75336 9.12713C5.31016 7.31149 7.30707 5.31282 9.12152 1.7549C9.67339 0.672611 10.7755 0 11.9978 0C13.22 0 14.3221 0.672611 14.8744 1.7549C16.6884 5.31485 18.6874 7.31353 22.2466 9.12917C23.328 9.67745 24 10.7789 24 11.9998V12.0018V12.0022Z' fill='%23CC6633'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.c-post-content__inner li { margin-bottom: var(--spacing-sm); }
.c-post-content__inner li:last-child { margin-bottom: 0; }

/* Images */
.c-post-content__inner img {
	max-width: 100%;
	height: auto;
	display: block;
}

.c-post-content__inner figure,
.c-post-content__inner .wp-block-image {
	margin: var(--spacing-2xl) 0;
	width: 100%;
}

.c-post-content__inner figure img,
.c-post-content__inner .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

.c-post-content__inner figcaption {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-light);
	color: var(--color-text-muted-dark);
	text-align: center;
	margin-top: var(--spacing-sm);
}

/* Blockquote — large opening quotemark + bold italic text (Figma 182:19145) */
.c-post-content__inner blockquote {
	display: flex;
	gap: var(--spacing-lg);
	align-items: flex-start;
	margin: var(--spacing-2xl) 0;
}

.c-post-content__inner blockquote::before {
	content: '\201C';
	font-family: var(--font-family-base);
	font-size: 80px;
	font-weight: var(--font-weight-bold);
	font-style: italic;
	line-height: 0.72;
	color: var(--color-black);
	flex-shrink: 0;
	width: 71px;
	text-align: left;
}

.c-post-content__inner blockquote p {
	font-size: var(--font-size-row-h);
	font-weight: var(--font-weight-bold);
	font-style: italic;
	line-height: var(--line-height-tight);
	color: var(--color-black);
	margin-bottom: 0;
}

/* ==========================================================================
   c-post-content — Special content blocks
   ========================================================================== */

/* Callout box — light (porcelain) and dark (black) variants (Figma 182:19102 / 182:19113) */
.c-post-callout {
	display: flex;
	gap: var(--spacing-lg);
	align-items: flex-start;
	padding: var(--spacing-3xl);
	margin: var(--spacing-2xl) 0;
	width: 100%;
}

.c-post-callout--light { background-color: var(--color-porcelain); }
.c-post-callout--dark  { background-color: var(--color-black); }

.c-post-callout__icon {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
}

.c-post-callout__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-post-callout__heading {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-tight);
	margin: 0;
}

.c-post-callout__text {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	margin: 0;
}

.c-post-callout--light .c-post-callout__heading,
.c-post-callout--light .c-post-callout__text { color: var(--color-black); }

.c-post-callout--dark .c-post-callout__heading,
.c-post-callout--dark .c-post-callout__text { color: var(--color-white); }

/* Checklist — icon bullets (Figma 182:19120) */
.c-post-checklist {
	list-style: none;
	padding: 0 0 0 var(--spacing-3xl);
	margin: var(--spacing-2xl) 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.c-post-checklist li {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: normal;
	color: var(--color-black);
	letter-spacing: var(--letter-spacing-body);
	margin-bottom: 0;
}

.c-post-checklist li::before {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	/* SVG icon placeholder — bronze circle dot; replace with actual icon */
	background-color: var(--color-bronze);
	border-radius: 50%;
}

.c-post-checklist li img {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	display: block;
}

/* Two-column media block: text | image (Figma 182:19148) */
.c-post-media {
	display: flex;
	gap: var(--spacing-2xl);
	align-items: flex-start;
	margin: var(--spacing-2xl) 0;
}

.c-post-media--reversed { flex-direction: row-reverse; }

.c-post-media__text,
.c-post-media__image {
	flex: 1;
	min-width: 0;
}

.c-post-media__image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.c-post-media__text p {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	color: var(--color-black);
}

/* Author box — porcelain card at end of post (Figma 182:19158) */
.c-post-author {
	display: flex;
	gap: var(--spacing-lg);
	align-items: flex-start;
	padding: var(--spacing-3xl);
	background-color: var(--color-porcelain);
	margin-top: var(--spacing-2xl);
	max-width: 800px;
	margin-inline: auto;
}

.c-post-author__avatar {
	width: 80px;
	height: 80px;
	border-radius: 12px;
	flex-shrink: 0;
	object-fit: cover;
}

.c-post-author__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.c-post-author__meta {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.c-post-author__label {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	color: var(--color-bronze);
}

.c-post-author__name {
	font-family: var(--font-family-base);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-snug);
	color: var(--color-black);
}

.c-post-author__bio {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-light);
	line-height: var(--line-height-base);
	color: var(--color-black);
}

/* ==========================================================================
   c-post-content — Legacy Bootstrap classes (scraped content)
   Scoped to .c-post-content__inner, maps to our design tokens.
   ========================================================================== */

/* Utility */
.c-post-content__inner .text-center,
.c-post-content__inner .align-center {
	text-align: center;
}

.c-post-content__inner .d-none { display: none; }
.c-post-content__inner .d-inline-block { display: inline-block; }

/* Bootstrap grid — simplified to centering wrapper */
.c-post-content__inner .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.c-post-content__inner .col-md-8 { width: 100%; }
.c-post-content__inner .offset-md-2 { margin-left: 0; }

/* Buttons — map to c-btn--primary values */
.c-post-content__inner .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 20px var(--spacing-xl);
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-none);
	letter-spacing: var(--letter-spacing-caps);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color var(--transition-fast),
	            border-color var(--transition-fast),
	            color var(--transition-fast);
}

.c-post-content__inner .btn-primary {
	background-color: var(--color-bronze);
	color: var(--color-white);
	border-color: var(--color-bronze);
}

.c-post-content__inner .btn-primary:hover {
	background-color: var(--color-bronze-hover);
	border-color: var(--color-bronze-hover);
	color: var(--color-white);
}

/* Gallery — scraped .gallery-default restyled to match c-gallery__grid */
.c-post-content__inner .gallery-default > br {
	display: none; /* stray <br> between <a> tags become ghost grid items */
}

.c-post-content__inner .gallery-default {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: var(--spacing-md) !important;
	margin: var(--spacing-2xl) 0 !important;
	padding: 0 !important;
	justify-content: unset;
	flex-wrap: unset;
	background: none !important;
}

.c-post-content__inner .gallery-default a.d-inline-block {
	display: block !important;
	width: 100% !important;
	height: 0 !important;
	padding-bottom: 66.67% !important; /* 3:2 ratio */
	overflow: hidden !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	border: none !important;
	margin: 0 !important;
	cursor: zoom-in;
	position: relative !important;
	transition: opacity var(--transition-fast);
}

.c-post-content__inner .gallery-default a.d-inline-block:hover {
	opacity: 0.85;
}

@media (max-width: 1024px) {
	.c-post-content__inner .gallery-default {
		grid-template-columns: 1fr 1fr !important;
	}

	.c-post-content__inner .gallery-default a.d-inline-block:first-child {
		grid-column: 1 / -1;
		padding-bottom: 56.25% !important; /* 16:9 for full-width first item */
	}
}

/* ==========================================================================
   Mobile: unify all section h2 titles — 3xl + left-aligned
   ========================================================================== */

@media (max-width: 1024px) {
	h2.c-about__title,
	h2.c-employee-testimonials__title,
	h2.c-environment__title,
	h2.c-faq__title,
	h2.c-kariera-boxes__title,
	h2.c-kariera-form__title,
	h2.c-kariera-info__heading,
	h2.c-kariera-pozice__title,
	h2.c-kariera-related__title,
	h2.c-kdo-jsme__heading,
	h2.c-kontakt-form-map__title,
	h2.c-kontakt-info-grid__title,
	h2.c-o-nas-feature__title,
	h2.c-o-nas-intro__title,
	h2.c-o-nas-timeline__title,
	h2.c-photo-grid__title,
	h2.c-posts__title,
	h2.c-service-grid__heading,
	h2.c-service-grid__title,
	h2.c-services__title,
	h2.c-team__title,
	h2.c-team-info__title,
	h2.c-technologie-slider__title,
	h2.c-technologie-zigzag__title,
	h2.c-treatment__title,
	h2.c-zigzag__title {
		font-size: var(--font-size-3xl);
		text-align: left;
		width: 100%;
		align-self: flex-start;
	}
}

/* ==========================================================================
   Mobile: c-post-content — Figma 240:20236 (perex) + responsive blocks
   ========================================================================== */

@media (max-width: 1024px) {
	/* Perex — mobile: larger bold text (Figma 240:20236) */
	.c-post-content__inner .c-post-content__perex-text {
		font-size: var(--font-size-h6);         /* 24px stays fixed (no mobile token override) */
		line-height: var(--line-height-medium); /* 1.6 */
		letter-spacing: 0;
	}

	/* H4 override: keep proper hierarchy (h4 < h3 = 22px) */
	.c-post-content__inner h4 { font-size: var(--font-size-h5); }     /* 20px */
	.c-post-content__inner h5 { font-size: var(--font-size-post-h5); } /* 20px via token */

	/* Blockquote: scale down text */
	.c-post-content__inner blockquote::before {
		font-size: 56px;
		width: 44px;
	}

	.c-post-content__inner blockquote p { font-size: var(--font-size-row-h); } /* 22px */

	/* Callout boxes: column layout, tighter padding */
	.c-post-callout {
		flex-direction: column;
		gap: var(--spacing-md);
		padding: var(--spacing-xl);
	}

	.c-post-callout__icon {
		width: 40px;
		height: 40px;
	}

	/* Two-column media: stack vertically */
	.c-post-media,
	.c-post-media--reversed {
		flex-direction: column;
	}

	/* Checklist: remove left indent on mobile */
	.c-post-checklist { padding-left: 0; }

	/* Author box: keep row but tighter padding */
	.c-post-author { padding: var(--spacing-xl); }

	.c-post-author__name { font-size: var(--font-size-2xl); } /* 24px at mobile */
}

/* ==========================================================================
   Component: Video Modal (c-video-modal)
   Global YouTube popup. Dark 90% backdrop, click-outside / X / ESC to close.
   ========================================================================== */

.c-video-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-xl);
	background: rgba(0, 0, 0, 0.9);
	animation: c-video-modal-fade 200ms ease-out;
}

.c-video-modal[hidden] {
	display: none;
}

@keyframes c-video-modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.c-video-modal__inner {
	position: relative;
	width: 100%;
	max-width: 1280px;
	aspect-ratio: 16 / 9;
	max-height: 85vh;
}

.c-video-modal__player {
	width: 100%;
	height: 100%;
	background: #000;
}

.c-video-modal__player iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.c-video-modal__close {
	position: absolute;
	top: var(--spacing-lg);
	right: var(--spacing-lg);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	color: var(--color-white);
	cursor: pointer;
	transition: opacity var(--transition-base);
}

.c-video-modal__close:hover,
.c-video-modal__close:focus-visible {
	opacity: 0.7;
}

.c-video-modal__close:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 2px;
}

/* Lock body scroll while modal is open. */
html.is-video-modal-open,
html.is-video-modal-open body {
	overflow: hidden;
}

@media (max-width: 1024px) {
	.c-video-modal {
		padding: var(--spacing-md);
	}

	.c-video-modal__inner {
		max-height: 70vh;
	}

	.c-video-modal__close {
		top: var(--spacing-sm);
		right: var(--spacing-sm);
	}
}

/* ==========================================================================
   Component: Popup (c-popup) — globální generický modal
   Tmavý 70% backdrop, bílý centrovaný panel s obrázkem, nadpisem, volitelným
   sub-textem (např. termín dovolené z IS) a textem. Zavírá se křížkem, klikem
   mimo panel nebo klávesou ESC.
   Varianty:
     .c-popup--dovolena   — termín dovolené/školení z IS endpointu (sub = datum)
     .c-popup--rate-limit — upozornění o překročení limitu odeslání formuláře
   ========================================================================== */

.c-popup {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-xl);
	background: rgba(0, 0, 0, 0.7);
	animation: c-popup-fade 250ms ease-out;
}

.c-popup[hidden] {
	display: none;
}

@keyframes c-popup-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.c-popup__inner {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 2 * var(--spacing-xl));
	overflow-y: auto;
	padding: var(--spacing-3xl) var(--spacing-2xl);
	background: var(--color-white);
	text-align: center;
	box-shadow: var(--shadow-md);
	animation: c-popup-pop 300ms ease-out;
}

@keyframes c-popup-pop {
	from { transform: scale(0.96); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}

.c-popup__close {
	position: absolute;
	top: var(--spacing-md);
	right: var(--spacing-md);
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	color: var(--color-black);
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.c-popup__close:hover,
.c-popup__close:focus-visible {
	opacity: 0.6;
}

.c-popup__close:focus-visible {
	outline: 2px solid var(--color-bronze);
	outline-offset: 2px;
}

.c-popup__image {
	margin: 0 0 var(--spacing-xl);
}

.c-popup__image img {
	max-width: 200px;
	height: auto;
	display: inline-block;
}

.c-popup__title {
	margin: 0 0 var(--spacing-md);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-black);
}

.c-popup__sub {
	margin: 0 0 var(--spacing-lg);
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-sm);
	color: var(--color-bronze);
}

.c-popup__text {
	margin: 0;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-base);
	color: var(--color-text-muted-dark);
}

/* Scroll-lock pravidla — pouze pro skutečné modaly (video, rate-limit popup, mobile menu).
   `html.is-popup-open` přidávají jen popupy s `lock_scroll: true` (default).
   Body NEZAMYKÁME — Usercentrics banner i info popupy umí žít vedle scrollu. */
html.is-popup-open {
	overflow: hidden;
}

/* Force body scroll vždy. Usercentrics (Wall variant) přidá class `overflowHidden` na <body>
   a injectne `.overflowHidden { overflow: hidden }`. Naše pravidlo má vyšší specificity
   (`body.overflowHidden` = 0,0,1,1) než UC (`.overflowHidden` = 0,0,1,0) — vyhrává.
   Banner se tak zobrazuje normálně, ale body scroll zůstává volný. */
html body,
body.overflowHidden {
	overflow: visible !important;
}

@media (max-width: 1024px) {
	.c-popup {
		padding: var(--spacing-md);
	}

	.c-popup__inner {
		padding: var(--spacing-2xl) var(--spacing-lg);
		max-height: calc(100vh - 2 * var(--spacing-md));
	}

	.c-popup__close {
		top: var(--spacing-sm);
		right: var(--spacing-sm);
	}

	.c-popup__image img {
		max-width: 160px;
	}

	.c-popup__title {
		font-size: var(--font-size-h5);
	}

	.c-popup__sub {
		font-size: var(--font-size-base);
	}
}