/* =========================================================================
   Strojon — hlavní stylopis
   Hodnoty vycházejí z grafického návrhu ve Figmě (desktop 1440, mobil 390).
   ========================================================================= */

/* --- 1. Tokeny --------------------------------------------------------- */

:root {
	/* Barvy */
	--c-red: #e1061a;
	--c-red-dark: #c2050f;
	--c-dark: #211313;
	--c-light: #eeebe4;
	--c-cream: #f7f5f1;
	--c-cream-2: #f3f1ec;
	--c-border: #e5e2da;
	--c-border-strong: #d9d9d9;
	--c-muted: #4a4a4a;
	--c-white: #fff;

	/* Typografie */
	--font: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--fs-hero: clamp(2.125rem, 1.2rem + 3.9vw, 3.5rem);      /* 34 → 56 px */
	--fs-h1: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);            /* 32 → 56 px */
	--fs-h2: clamp(1.75rem, 1.15rem + 2.5vw, 3rem);          /* 28 → 48 px */
	--fs-h3: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);         /* 24 → 36 px */
	--fs-h4: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);        /* 20 → 24 px */
	--fs-stat: clamp(1.75rem, 1.47rem + 1.14vw, 2.5rem);     /* 28 → 40 px */
	--fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.40625rem);   /* 17 → 22.5 px */
	--fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.25rem);        /* 16 → 20 px */
	--fs-small: 1rem;
	--fs-xs: 0.875rem;
	--fs-eyebrow: 0.8125rem;

	/* Rozestupy a rozměry */
	--wrap: 1200px;
	--wrap-wide: 1280px;
	/*
	 * Spočítané tak, aby na 390 px vyšlo 20 px a na 1440 px přesně tolik jako
	 * v návrhu. Díky tomu má .wrap na šířce návrhu skutečných 1440 px a bloky,
	 * které mají doléhat na kraj (fotka u „Navrhneme a vyrobíme"), sedí.
	 */
	--gutter: clamp(1.25rem, -1.07rem + 9.52vw, 7.5rem);     /* 20 → 120 px */
	--gutter-sm: clamp(1.25rem, -0.14rem + 5.71vw, 5rem);    /* 20 → 80 px */
	--section-y: clamp(3rem, 1.8rem + 5vw, 6.25rem);         /* 48 → 100 px */
	--header-h: 100px;

	--radius: 3px;
	--radius-card: 5px;
	--shadow-card: 0 10px 20px rgba(0, 0, 0, 0.1);

	--transition: 0.2s ease;
}

/* --- 2. Základ --------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.4625;
	color: var(--c-dark);
	background: var(--c-white);
	overflow-x: hidden;
}

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

a {
	color: var(--c-red);
	text-decoration: none;
	transition: color var(--transition), opacity var(--transition);
}

a:hover {
	color: var(--c-red-dark);
}

button {
	font: inherit;
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

ul, ol {
	margin: 0 0 1em;
	padding-left: 1.2em;
}

:focus-visible {
	outline: 3px solid var(--c-red);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--c-red);
	color: var(--c-white);
	border-radius: var(--radius);
}

.skip-link:focus {
	top: 1rem;
	color: var(--c-white);
}

/* --- 3. Rozvržení ------------------------------------------------------ */

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--wide {
	max-width: calc(var(--wrap-wide) + 2 * var(--gutter-sm));
	padding-inline: var(--gutter-sm);
}

.section {
	padding-block: var(--section-y);
}

.section--light {
	background: var(--c-light);
}

.section--cream {
	background: var(--c-cream);
}

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

/*
 * Úvodní sekce stránky (Produkty): menší odsazení shora, eyebrow tmavě
 * a s větším odstupem od nadpisu — podle návrhu.
 */
.section--uvodni {
	padding-top: 2.5rem;
}

.section--uvodni .eyebrow {
	color: var(--c-dark);
	margin-bottom: 1.375rem;
}

/* Tečky pod mobilním carouselem. */
.tecky {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 1.5rem;
}

.tecky button {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(225, 6, 26, 0.25);
	cursor: pointer;
	transition: background var(--transition);
}

.tecky button[aria-current='true'] {
	background: var(--c-red);
}

/* Právní odkazy pod čarou v patičce. */
.site-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__legal-menu a {
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Stránkování vyrobených zakázek na mobilu. */
.product-grid > [hidden] {
	/* .product-card má display: flex, který by atribut hidden přebil. */
	display: none !important;
}

.strankovani {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 1.5rem;
}

.strankovani button {
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--c-border-strong);
	border-radius: 4px;
	background: var(--c-white);
	color: var(--c-dark);
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.strankovani button[aria-current='true'] {
	background: var(--c-red);
	border-color: var(--c-red);
	color: var(--c-white);
}

.strankovani button:disabled {
	opacity: 0.4;
	cursor: default;
}

/*
 * Návrh odděluje sousedící světlé sekce vlasovou šedou linkou.
 * Linka je jen mezi dvěma sekcemi, ne na okraji stránky.
 */
main > .section--white + .section--cream,
main > .section--cream + .section--white,
main > .section--white + .section--white {
	border-top: 1px solid var(--c-border);
}

/* --- 4. Typografie ----------------------------------------------------- */

.eyebrow {
	margin: 0;
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--c-red);
}

.eyebrow--plain {
	letter-spacing: 0.7px;
	text-transform: none;
	font-size: 0.875rem;
	font-weight: 500;
}

.eyebrow--lg {
	font-size: 1.125rem;
}

/* „PROČ K NÁM" je v návrhu tmavé, ne červené. */
.eyebrow--dark {
	color: var(--c-dark);
}

.is-red {
	color: var(--c-red);
}

.section__head {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	text-align: center;
	margin-bottom: 2rem;
}

.section__title {
	font-size: var(--fs-h2);
	line-height: 1;
}

.section__title--sm {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.section__subtitle {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.55;
	margin: 0;
}

.lead {
	font-size: var(--fs-lead);
	font-weight: 600;
	line-height: 1.3;
}

/* --- 5. Tlačítka ------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	/* Rajdhani sedí opticky vysoko — obsah posouváme o 1 px dolů. */
	padding: calc(0.75rem + 1px) 1.875rem calc(0.75rem - 1px);
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn .icon svg {
	width: 14px;
	height: 17px;
}

.btn--primary {
	background: var(--c-red);
	color: var(--c-light);
	font-weight: 500;
}

.btn--primary:hover {
	background: var(--c-red-dark);
	color: var(--c-white);
}

.btn--outline {
	border-color: var(--c-red);
	color: var(--c-red);
	background: transparent;
}

.btn--outline:hover {
	background: var(--c-red);
	color: var(--c-light);
}

/* Odkaz na mapu má v návrhu před textem zaměřovač. */
.btn--mapa {
	gap: 12px;
}

.btn--mapa .icon--zamerovac svg {
	width: 20px;
	height: 20px;
}

.btn--outline-light {
	border-color: rgba(238, 235, 228, 0.5);
	color: var(--c-light);
	background: transparent;
}

.btn--outline-light:hover {
	background: var(--c-light);
	color: var(--c-dark);
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 0.5rem + 1.7vw, 2.5rem);
}

.icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--c-red);
}

.link-arrow .icon svg {
	width: 14px;
	height: 17px;
	transition: transform var(--transition);
}

.link-arrow:hover .icon svg {
	transform: translateX(4px);
}

/* Tenká šipka sekundárních odkazů. */
.icon--sipka-tenka svg {
	width: 17px;
	height: 12px;
	transition: transform var(--transition);
}

.link-arrow:hover .icon--sipka-tenka svg,
.btn:hover .icon--sipka-tenka svg {
	transform: translateX(4px);
}

/* --- 6. Hlavička ------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	transition: background var(--transition);
}

.site-header--overlay {
	background: transparent;
	backdrop-filter: none;
}

/* Hlavička splývající s krémovou sekcí (stránka Produkty). */
.site-header--cream {
	background: var(--c-cream);
}

.site-header--overlay.is-stuck {
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(8px);
	box-shadow: 0 2px 12px rgba(33, 19, 19, 0.08);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	min-height: var(--header-h);
	padding-block: 1.25rem;
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-shrink: 0;
}

.site-brand__logo {
	width: 134px;
	height: 42.712px;
}

.site-brand__logo img,
.site-brand__logo svg {
	width: 100%;
	height: 100%;
}

.site-brand__claim {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--c-red);
}

.main-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, -2.39rem + 5.71vw, 2.75rem);
	margin-left: auto;
}

.main-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, -2.39rem + 5.71vw, 2.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-nav a {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--c-red);
	white-space: nowrap;
}

.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

.lang-switch {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lang-switch a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22.444px;
	height: 22.444px;
	border-radius: 999px;
	overflow: hidden;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--c-red);
	border: 1px solid var(--c-border-strong);
	background: var(--c-white);
	transition: opacity var(--transition);
}

/* Vložená SVG nemají vlastní rozměry, nastavujeme je ručně. */
.lang-switch img {
	width: 22.444px;
	height: 22.444px;
	object-fit: cover;
}

.lang-switch .is-current a {
	box-shadow: 0 0 0 2px rgba(225, 6, 26, 0.35);
}

.lang-switch a:hover {
	opacity: 0.75;
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--c-red);
	border-radius: var(--radius);
	background: transparent;
	color: var(--c-red);
}

/* Mobilní menu – v návrhu celoobrazovkové na značkové červené */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	flex-direction: column;
	background: var(--c-red);
	overflow-y: auto;
	color: var(--c-light);
}

.mobile-nav.is-open {
	display: flex;
}

.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	min-height: 64px;
	padding-inline: 20px;
}

.mobile-nav__brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mobile-nav__brand img {
	width: 110px;
	height: 35px;
}

.mobile-nav__claim {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 14px;
	color: var(--c-light);
}

.mobile-nav__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c-white);
}

.mobile-nav__close svg {
	width: 22px;
	height: 22px;
}

.mobile-nav__items {
	padding-block: 32px;
}

.mobile-nav__items ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-nav__items li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.mobile-nav__items li:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.mobile-nav__items a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	padding-inline: 24px;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--c-light);
}

/* Šipka vpravo u položky menu */
.mobile-nav__items a::after {
	content: '→';
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--c-white);
}

/* Vyšší specificita, jinak vyhraje obecné .mobile-nav__items ul { margin: 0 }. */
.mobile-nav__items .mobile-nav__langs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 35.644px;
	margin-top: 48px;
	padding-block: 24px 30px;
	border: 0;
}

.mobile-nav__langs li,
.mobile-nav__langs li:first-child {
	border: 0;
}

.mobile-nav__langs a {
	display: block;
	min-height: 0;
	padding: 0;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	overflow: hidden;
}

.mobile-nav__langs a::after {
	content: none;
}

.mobile-nav__langs img {
	width: 40px;
	height: 40px;
	object-fit: cover;
}

.mobile-nav__langs .is-current a {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.mobile-nav__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 32px 24px;
	text-align: center;
}

.mobile-nav__foot-title {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--c-white);
}

.mobile-nav__phone {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--c-light);
}

.mobile-nav__mail {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--c-white);
}

.social--light {
	gap: 32px;
	margin-top: 24px;
}

.mobile-nav .social--light a {
	width: 48px;
	height: 48px;
	background: var(--c-light);
	color: var(--c-red);
}

.mobile-nav .social--light a:hover {
	background: var(--c-white);
	color: var(--c-red);
}

.social--light svg {
	width: 24px;
	height: 24px;
}

body.nav-open {
	overflow: hidden;
}

/* --- 7. Hero ----------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * Nad 1290 px roste výška se šířkou okna, aby hero drželo poměr
	 * fotky a neplošťovalo se na širokých monitorech. Fotka se ořízne
	 * zhruba v polovině trávníku, celá být vidět nemusí.
	 */
	min-height: clamp(700px, 48.8vw, 940px);
	padding-block: clamp(3rem, 1rem + 8vw, 6.25rem);
	overflow: hidden;
	isolation: isolate;
}

/*
 * Obsah sedí v horní třetině sekce, ne uprostřed — sekce je vyšší než
 * návrh a při svislém centrování by nadpis klesl příliš nízko.
 */
.hero__inner {
	margin-bottom: auto;
}

/*
 * V návrhu je hlavička součástí hero sekce, fotka tedy sahá až pod menu.
 * Hero proto vytáhneme o výšku hlavičky nahoru a o tolik zvětšíme odsazení.
 */
.home .hero {
	margin-top: calc(-1 * var(--header-real, var(--header-h)));
	padding-top: calc(var(--header-real, var(--header-h)) + clamp(3rem, 1rem + 8vw, 6.25rem));
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

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

.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(166.67deg, rgba(255, 255, 255, 0.8) 15.83%, rgba(255, 255, 255, 0) 43.04%);
}

.hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	text-align: center;
}

.hero__title {
	font-size: var(--fs-hero);
	line-height: 1.3;
	max-width: 1000px;
}

.hero__subtitle {
	font-size: var(--fs-lead);
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

/* Silnější linka jen u obrysového tlačítka v úvodním hero. */
.hero .btn--outline {
	border-width: 2px;
}

/* --- 8. Pruh s logy ---------------------------------------------------- */

.logo-bar {
	background: var(--c-red);
}

.logo-bar--light {
	background: var(--c-white);
	padding-block: clamp(2rem, 1.4rem + 2.5vw, 3.75rem);
	text-align: center;
}

.logo-bar--light .logo-bar__inner {
	padding-block: 0;
	margin-top: 1.875rem;
}

.logo-bar__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--c-dark);
}

.logo-bar__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
	align-items: center;
	justify-items: center;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	padding-block: 2.5rem;
}

.logo-bar img {
	height: 60px;
	width: auto;
	max-width: min(180px, 100%);
	object-fit: contain;
	object-position: center;
}

.logo-bar__more {
	color: var(--c-white);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
}

.logo-bar__more span {
	display: block;
	font-size: 1.75rem;
}

.logo-bar__more small {
	font-size: 1rem;
	font-weight: 600;
}

/* --- 9. Blok s obrázkem a parametry (Navrhneme a vyrobíme) ------------- */

/*
 * Fotka v návrhu doléhá na levý okraj plátna, text má odsazení jen zprava.
 * Proto tenhle blok nepoužívá .wrap, ale drží se šířky návrhu sám.
 */
.split {
	display: grid;
	grid-template-columns: 701fr 639fr;
	gap: clamp(2rem, 0.5rem + 5vw, 6.25rem);
	align-items: center;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin-inline: auto;
	padding-block: var(--section-y);
}

.split__media {
	overflow: hidden;
}

/* Fotka nádoby podle návrhu přesahuje přes levý okraj obrazovky. */
.split__media img {
	width: 112%;
	max-width: none;
	margin-left: -12%;
	height: auto;
	mix-blend-mode: darken;
}

.split__body {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 0.8rem + 2.4vw, 3.125rem);
	padding-right: var(--gutter);
}

.split__heading {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.split__eyebrow {
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.7px;
	line-height: 1.2;
	text-transform: uppercase;
	margin: 0;
}

.split__title {
	font-size: var(--fs-h2);
	line-height: 1.25;
}

.split__text {
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.4625;
	margin: 0;
}

/* Parametry oddělené svislou linkou */
.param-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.5rem;
}

.param {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding-left: 22px;
	padding-right: 4px;
	border-left: 2px solid rgba(225, 6, 26, 0.25);
	color: var(--c-red);
}

.param__value {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	white-space: nowrap;
}

.param__label {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0;
}

/* --- 10. Dlaždice kategorií ------------------------------------------- */

/*
 * Návrh dlaždice sází do řádků po třech a poslední neúplný řádek centruje
 * (5 kategorií = 3 + 2 na střed). Grid to neumí, proto flex.
 */
.category-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.category-grid > * {
	flex: 0 1 calc((100% - 2 * 20px) / 3);
	max-width: calc((100% - 2 * 20px) / 3);
}

.category-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	aspect-ratio: 1;
	padding: 0 19.85px 29.775px;
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	background: var(--c-white);
	color: var(--c-red);
	text-align: center;
}

.category-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

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

.category-card__icon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 109px;
	height: 109px;
	background: var(--c-red);
	border-radius: 4px;
}

/* SVG z návrhu obsahuje i červený čtverec — vyplňuje proto celý rám. */
.category-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.category-card__title {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 92px;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--c-red);
}

/*
 * Ikona i název se zmenšují spolu s dlaždicí. Na 1440 px vychází karta
 * 387 px a hodnoty přesně podle návrhu (ikona 109, písmo 24, blok názvu
 * 92 px); na užších oknech drží stejný poměr, takže ikona nepůsobí
 * předimenzovaně. Jednosloupcová mřížka (mobil) má vlastní hodnoty níž.
 */
@supports (container-type: inline-size) {
	.category-card {
		container-type: inline-size;
	}

	.category-card__icon {
		width: min(109px, 31.415cqw);
		height: min(109px, 31.415cqw);
	}

	.category-card__title {
		min-height: min(92px, 26.516cqw);
		font-size: min(1.5rem, 6.917cqw);
	}

	.category-card--all .category-card__title {
		font-size: min(1.375rem, 6.341cqw);
	}
}

.category-card:hover .category-card__media img {
	transform: scale(1.03);
}

.category-card__media img {
	transition: transform 0.4s ease;
}

.category-card--all {
	background: var(--c-red);
	justify-content: center;
	/* Bez spodního odsazení karty — text sedí přesně na středu. */
	padding-block: 0;
	color: var(--c-white);
}

.category-card--all::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.1);
}

.category-card--all .category-card__title {
	position: relative;
	z-index: 2;
	gap: 10px;
	color: var(--c-white);
	font-size: 1.375rem;
	font-weight: 600;
	text-transform: uppercase;
}

.category-card--all .category-card__media img {
	opacity: 0.35;
	object-fit: contain;
	padding: 2rem;
}

/* --- 11. Sekce s jednatelem ------------------------------------------- */

.director {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: var(--c-white);
}

.director__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
	padding: var(--section-y) var(--gutter-sm) var(--section-y) var(--gutter);
	min-height: 730px;
}

.director__title {
	font-size: var(--fs-h2);
	line-height: 1.3;
}

.director__text {
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.4625;
	margin: 0;
}

.contact-line {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--c-dark);
	font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
	/* E-mail je v návrhu polotučně, telefon tučně a předvolba obyčejně. */
	font-weight: 500;
	line-height: 1.25;
}

.contact-line--bold {
	font-weight: 700;
}

.contact-line__predvolba {
	font-weight: 400;
}

/* Telefonní číslo u HR kontaktu je v návrhu obyčejným řezem. */
.hr-contact .contact-line--tel {
	font-weight: 400;
}

.contact-line__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 4px;
	background: var(--c-red);
	color: var(--c-white);
}

.contact-line__icon svg {
	width: 32px;
	height: 32px;
}

.contact-line:hover {
	color: var(--c-red);
}

.director__watermark {
	width: 147px;
	/* V návrhu je vodoznak šedý, ne zesvětlená červená. */
	filter: grayscale(1) brightness(1.4);
	opacity: 0.4;
	padding-block: 1.25rem;
}

.director__media {
	position: relative;
	min-height: 100%;
}

.director__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* --- 12. Proč Strojon + certifikace ------------------------------------ */

.features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #f1efe9;
}

.features__col {
	padding: clamp(2.5rem, 1.5rem + 3.5vw, 5rem) clamp(1.25rem, 0.2rem + 4.2vw, 5rem);
}

.features__col--left {
	background: var(--c-cream);
}

.features__col--right {
	background: #f1efe9;
}

.features__title {
	font-size: var(--fs-h3);
	line-height: 1.33;
	/* Eyebrow sedí v návrhu těsně nad nadpisem. */
	margin-block: 0.5rem 1.75rem;
	max-width: 520px;
}

.features__perex {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	max-width: 520px;
	margin-bottom: 2rem;
}

.feature-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 520px;
}

.feature {
	display: grid;
	grid-template-columns: 86px 1fr;
	align-items: start;
	gap: 0 0;
	padding-block: 1.3125rem 2.5rem;
	border-bottom: 1px solid var(--c-red);
}

.feature:first-child {
	padding-top: 0;
}

.feature__num {
	grid-row: span 2;
	font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	color: rgba(225, 6, 26, 0.18);
}

.feature__title {
	font-size: 1.40625rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--c-red);
	margin-bottom: 0.35rem;
}

.feature__text {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.45;
	margin: 0;
}

.features__link {
	display: inline-flex;
	margin-top: 1.75rem;
}

.cert-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: 20px 15.313px;
	margin-top: 2rem;
}

.cert {
	position: relative;
	display: flex;
	align-items: center;
	gap: 15.313px;
	min-height: 96px;
	padding: 15.313px;
	background: var(--c-white);
	border: 1.094px solid var(--c-border);
	border-radius: 6.563px;
}

.cert__thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 61.25px;
	height: 61.25px;
	border: 1px solid #f3caca;
	border-radius: 4.375px;
	overflow: hidden;
	color: var(--c-red);
}

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

.cert__thumb .icon {
	position: relative;
	z-index: 1;
}

.cert__thumb .icon svg {
	width: 24px;
	height: 24px;
}

.cert__name {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.22;
	color: var(--c-red);
	margin: 0;
}

/* Odkaz překrývá celou dlaždici, aby se dala otevřít kliknutím kamkoliv. */
.cert__odkaz {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.cert:has(.cert__odkaz) {
	cursor: pointer;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.cert:has(.cert__odkaz:hover),
.cert:has(.cert__odkaz:focus-visible) {
	border-color: var(--c-red);
	box-shadow: 0 4px 16px rgba(33, 19, 19, 0.1);
}

.cert__odkaz:focus-visible {
	outline: 2px solid var(--c-red);
	outline-offset: 2px;
}

/* --- Okno s dokumentem (certifikáty) ---------------------------------- */

/*
 * Nativní <dialog> se vykresluje v top layeru, takže ho nepřebije ani
 * sticky hlavička s backdrop-filter (ta v Chromiu jinak přes překryv
 * prosvítá).
 */
.lightbox {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: clamp(0.75rem, 0.2rem + 2vw, 2.5rem);
	border: 0;
	background: transparent;
	overflow: hidden;
}

.lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lightbox::backdrop {
	background: rgba(20, 12, 12, 0.82);
}

.lightbox__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: min(1100px, 100%);
	height: 100%;
}

.lightbox__hlava {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: var(--c-white);
}

.lightbox__nazev {
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.lightbox__zavrit {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: var(--c-white);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--transition);
}

.lightbox__zavrit:hover,
.lightbox__zavrit:focus-visible {
	background: var(--c-red);
}

/*
 * Obsah vyplní zbytek okna, hlavička a patička si berou jen svou výšku.
 * Díky pevné výšce se dá obrázku říct max-height: 100 %, takže je vidět
 * celý, a PDF dostane plnou výšku okna.
 */
.lightbox__obsah {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
}

/* Bílý podklad drží samotný dokument, ne celá plocha okna. */
.lightbox__obsah img,
.lightbox__obsah iframe {
	background: var(--c-white);
	border-radius: 6px;
}

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

.lightbox__obsah iframe {
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
	display: block;
}

.lightbox__pata {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9375rem;
}

.lightbox__pata a {
	color: var(--c-white);
	font-weight: 600;
	text-decoration: underline;
}

.lightbox__sipky {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.lightbox__pocitadlo {
	line-height: 1;
}

.lightbox__sipka {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: var(--c-white);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--transition);
}

.lightbox__sipka:hover,
.lightbox__sipka:focus-visible {
	background: var(--c-red);
}

.lightbox__sipka[hidden] {
	display: none;
}

body.lightbox-open {
	overflow: hidden;
}

/* --- 13. Pruh s čísly -------------------------------------------------- */

.stats {
	background: var(--c-red);
}

.stats__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
	gap: clamp(1.5rem, 0.5rem + 3.3vw, 5rem);
	padding-block: var(--section-y);
}

.stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 100px;
	padding-left: 22px;
	padding-right: 20px;
	border-left: 2px solid var(--c-light);
	color: var(--c-light);
}

.stat__value {
	font-size: var(--fs-stat);
	font-weight: 700;
	line-height: 0.85;
	white-space: nowrap;
	margin: 0;
}

.stat__label {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	margin: 0;
}

/* --- 14. Výzva k auditu ------------------------------------------------ */

.audit {
	position: relative;
	display: flex;
	align-items: center;
	/* 624 px na 1440 = poměr fotky; na užších oknech výška klesá s ní. */
	min-height: min(624px, 43.4vw);
	padding-block: clamp(3rem, 1.5rem + 6vw, 5rem);
	overflow: hidden;
	isolation: isolate;
	background: var(--c-dark);
}

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

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

.audit__inner {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	align-items: flex-start;
}

.audit__title {
	font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
	line-height: 1.3;
	color: var(--c-light);
}

.audit__text {
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.4625;
	color: var(--c-white);
	margin: 0;
}

/* --- 15. Patička ------------------------------------------------------- */

.site-footer {
	position: relative;
	background: var(--c-light);
	padding-block: var(--section-y);
	overflow: hidden;
	isolation: isolate;
}

/* Kresba už má sníženou sytost přímo v souboru, další ztlumení by ji smazalo. */
.site-footer__pattern {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	z-index: -1;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	object-position: bottom;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(2rem, 0.5rem + 3.3vw, 5rem);
	color: var(--c-red);
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	text-align: center;
}

.site-footer__logo {
	width: 239.694px;
	max-width: 100%;
}

.site-footer__claim {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.site-footer__title {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.17;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin: 0 0 1.875rem;
	color: var(--c-red);
}

.footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu li {
	border-bottom: 1px solid var(--c-red);
}

.footer-menu li + li {
	margin-top: 1.875rem;
}

.footer-menu a {
	display: block;
	padding-block: 4px;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
}

.site-footer__address {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
}

.site-footer__address p {
	margin: 0;
}

.site-footer__legal {
	font-size: 0.875rem;
}

.site-footer__contacts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
}

/* Bez vynulování marginu odstavce vznikala mezera 26 px místo 10. */
.site-footer__contacts p {
	margin: 0;
}

.site-footer__contacts strong {
	font-weight: 700;
}

.social {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 1.875rem 0 0;
	padding: 0;
	list-style: none;
}

.social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 999px;
	background: var(--c-red);
	color: var(--c-white);
}

.social a:hover {
	background: var(--c-red-dark);
	color: var(--c-white);
}

.social svg {
	width: 30px;
	height: 30px;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 1.875rem;
	padding-block: 1.25rem;
	margin-top: 2.5rem;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--c-red);
}

/* --- 16. Záhlaví podstránky ------------------------------------------- */

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--c-dark);
}

.breadcrumbs a {
	color: var(--c-dark);
}

.breadcrumbs a:hover {
	color: var(--c-red);
}

.breadcrumbs__sep {
	opacity: 0.5;
}

.page-hero {
	background: var(--c-light);
	padding-block: var(--section-y);
}

/*
 * Tlačítko je samostatná buňka mřížky — na desktopu sedí pod nadpisem,
 * na mobilu podle návrhu až pod červeným pruhem s parametry.
 */
.page-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		'telo media'
		'cta media';
	column-gap: clamp(2rem, 0.5rem + 5vw, 5rem);
	row-gap: 0;
	/* Návrh lícuje oba sloupce k hornímu okraji sekce. */
	align-items: start;
}

.page-hero__body {
	grid-area: telo;
}

.page-hero__media {
	grid-area: media;
}

.page-hero__cta {
	grid-area: cta;
	align-self: start;
	margin-top: 2.5rem;
}

.page-hero__cta:empty {
	display: none;
}

.page-hero__body {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 0.8rem + 2.2vw, 2.875rem);
	align-items: flex-start;
}

.page-hero__title {
	font-size: var(--fs-h1);
	line-height: 1.15;
	margin: 0;
}

.page-hero__media {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.page-hero__image {
	width: 100%;
	object-fit: contain;
}

/* Červený pruh s parametry — v návrhu záměrně lehce překrývá fotku. */
.hero-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
	padding: 1.25rem;
	margin-top: -7.5%;
	background: var(--c-red);
	color: var(--c-white);
}

.hero-stats__icon {
	display: block;
	width: 51px;
	flex-shrink: 0;
}

/* SVG nemá vlastní rozměry, proto je nastavujeme ručně. */
.hero-stats__icon img {
	width: 51px;
	height: 44px;
	object-fit: contain;
}

.hero-stats__item {
	padding-left: 16px;
	border-left: 2px solid rgba(255, 255, 255, 0.3);
}

.hero-stats__value {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.hero-stats__label {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1.2;
	margin: 0;
}

/* --- 17. Výpis produktů ------------------------------------------------ */

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: 16px;
}

.product-card {
	display: flex;
	flex-direction: column;
	background: var(--c-white);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.product-card__media {
	/*
	 * Rám drží poměr z návrhu i tehdy, když je zdrojová fotka menší než
	 * generovaný ořez a WordPress ji pustí v původním poměru.
	 */
	position: relative;
	aspect-ratio: 308 / 220;
	overflow: hidden;
	background: var(--c-border-strong);
}

.product-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
}

.product-card__title {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.product-card__params {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.875rem;
}

.product-card__param {
	display: flex;
	gap: 8px;
}

.product-card__param dt {
	font-weight: 600;
	letter-spacing: 0.4px;
	color: var(--c-muted);
	text-transform: uppercase;
}

.product-card__param dd {
	margin: 0;
	font-weight: 700;
	color: var(--c-dark);
}

/* --- 18. Textové sloupce (Co umíme) ----------------------------------- */

.text-columns {
	background: var(--c-white);
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
}

.text-columns__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(2rem, 0.5rem + 3.3vw, 5rem);
	margin-top: 1.25rem;
}

.text-column__title {
	font-size: var(--fs-h3);
	line-height: 1.15;
	margin-bottom: 1.5rem;
}

.text-column__text {
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
}

/* --- 19. Karty klíčových parametrů ------------------------------------ */

.process-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 24px;
}

.process-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 36px 32px;
	background: var(--c-white);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--radius-card);
}

.process-card__num {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	color: var(--c-red);
	margin: 0;
}

.process-card__title {
	font-size: 1.40625rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--c-red);
	text-transform: uppercase;
	margin: 0;
}

.process-card__text {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 4px 0 0;
	list-style: none;
}

.tags li {
	padding: 4px 10px;
	background: var(--c-cream);
	border-radius: var(--radius);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	line-height: 1.4;
}

/* --- 20. Obsah stránek ------------------------------------------------- */

.entry-content {
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.55;
}

.entry-content h2 {
	font-size: var(--fs-h3);
	margin-block: 2rem 1rem;
}

.entry-content h3 {
	font-size: var(--fs-h4);
	margin-block: 1.75rem 0.75rem;
}

.entry-content a {
	text-decoration: underline;
}

.entry-content img {
	border-radius: var(--radius-card);
}

/* --- 21. Kariéra ------------------------------------------------------- */

.job-list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.job {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.75rem 2rem;
	background: var(--c-white);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--radius-card);
}

.job__title {
	font-size: var(--fs-h4);
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

.job__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--c-muted);
	margin: 0;
}

/* --- 21b. Kontakty ----------------------------------------------------- */

.page-hero--simple {
	padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

/* Popisek nad nadpisem je jen v mobilním návrhu, na desktopu jsou drobečky. */
.page-hero__eyebrow {
	display: none;
}

.page-hero__perex {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
	max-width: 620px;
}

.people-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 30px;
}

.person {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-bottom: 28px;
	background: var(--c-cream);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.person__photo {
	aspect-ratio: 1;
	border-bottom: 4px solid var(--c-red);
	background: var(--c-white);
}

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

.person__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-inline: 28px;
}

.person__name {
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0;
}

.person__role {
	font-size: 1rem;
	font-weight: 600;
	color: var(--c-red);
	margin: 0;
}

.person__text {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.375;
	margin: 0 0 0.5rem;
}

.person__phone {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0;
}

.person__phone a {
	color: var(--c-dark);
}

.person__mail {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	overflow-wrap: anywhere;
}

.person--more {
	grid-column: 1 / -1;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 60px 40px;
	text-align: center;
}

.person--more .person__text {
	margin: 0;
}

.person__link {
	font-size: 1rem;
	text-decoration: underline;
}

.address {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: var(--c-light);
}

.address__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
	padding: 80px var(--gutter-sm) 80px var(--gutter);
}

.address__title {
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
	line-height: 1.15;
	margin: 0;
}

.address__rule {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--c-border-strong);
}

.detail-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	margin: 0;
}

.detail-list__row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	align-items: baseline;
}

.detail-list dt {
	flex: 0 0 160px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #808080;
}

.detail-list dd {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.45;
}

.detail-list dd a {
	color: inherit;
}

.detail-list dd.is-red a {
	color: var(--c-red);
}

.address__map {
	background: var(--c-border-strong);
	min-height: 320px;
}

.address__map a,
.address__map img,
.address__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.address__map--embed {
	min-height: 480px;
}

.address__map img {
	object-fit: cover;
}

/* --- 21e. Výrobní možnosti --------------------------------------------- */

.param-row--hero {
	margin-top: 1.5rem;
}

.tech {
	padding-block: clamp(2rem, 1.4rem + 2.5vw, 3.75rem);
	background: var(--c-white);
}

.tech__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* Na 1440 px dá mezera přesně 80 px, tedy sloupce 560 px jako v návrhu. */
	gap: clamp(2rem, -1rem + 6.67vw, 5rem);
	align-items: start;
}

.tech--foto-vpravo .tech__media {
	order: 2;
}

.tech__media {
	/*
	 * Návrh rámuje všechny fotky stejně, 560 × 384 px. Ořez se bere
	 * z plné fotky – dřív šel z odvozeniny strojon-wide (16:9), takže
	 * ze zdrojů na výšku zbýval jen úzký proužek ze středu.
	 */
	align-self: start;
	aspect-ratio: 560 / 385;
	border-right: 10px solid var(--c-red);
	overflow: hidden;
}

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

.tech__body {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
}

.tech__title {
	font-size: var(--fs-h3);
	line-height: 1.15;
	margin: 0;
}

.tech__text {
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.5;
}

.tech__text p + p {
	margin-top: 1rem;
}

.tech__list-title {
	font-size: var(--fs-body);
	font-weight: 700;
	margin: 0;
}

.marked-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.marked-list li {
	padding-left: 22px;
	padding-right: 20px;
	border-left: 2px solid rgba(225, 6, 26, 0.25);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-red);
}

.spec-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.spec-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--c-white);
	border: 1px solid var(--c-red);
	border-radius: 4px;
}

.spec-badge strong {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--c-red);
}

.spec-badge span {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--c-muted);
}

/* --- 21d. O nás -------------------------------------------------------- */

.story-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 618px;
	padding: clamp(3rem, 1.5rem + 6vw, 7.5rem) 0;
	overflow: hidden;
	isolation: isolate;
	background: var(--c-dark);
	text-align: center;
}

.story-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

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

.story-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(213.86deg, rgba(0, 0, 0, 0.88) 11.53%, rgba(0, 0, 0, 0.406) 26.2%, rgba(0, 0, 0, 0.106) 63.71%);
}

.story-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.875rem;
}

.story-hero__eyebrow {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--c-white);
}

.story-hero__title {
	max-width: 1100px;
	font-size: clamp(2.25rem, 1.1rem + 4.8vw, 4.5rem);
	line-height: 1.1;
	color: var(--c-white);
	margin: 0;
}

.story-hero__text {
	font-size: var(--fs-lead);
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-white);
	margin: 0;
}

.story__block {
	background: var(--c-white);
	padding-block: clamp(2rem, 1.4rem + 2.5vw, 2.5rem);
}

/* Návrh nechává všechny éry na bílé — bez střídání podkladů. */
.story__block--alt {
	background: var(--c-white);
}

.story__inner {
	display: grid;
	/* Poměr sloupců podle návrhu: koláž 634 px, text 520 px. */
	grid-template-columns: 634fr 520fr;
	gap: clamp(2rem, 0.5rem + 3.3vw, 5rem);
	align-items: center;
}

.story__block--foto-vpravo .story__inner {
	grid-template-columns: 520fr 634fr;
}

.story__block--foto-vpravo .story__media {
	order: 2;
}

.story__body {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
}

.story__title {
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
	line-height: 1.15;
	margin: 0;
}

.story__text {
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.5;
}

.story__text p + p {
	margin-top: 1rem;
}

/*
 * Koláž fotografií v bílém rámečku. Rozměry i posuny odpovídají návrhu
 * (skupina 634 × 508 px), proto jsou v procentech téhle plochy.
 */
.collage {
	position: relative;
	aspect-ratio: 634 / 508;
}

.collage__item {
	background: var(--c-white);
	border-radius: 4px;
	border: 8px solid var(--c-white);
	border-bottom-width: 28px;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

/*
 * Návrh každou fotku sází do přesně daného rámu (rounded-rectangle ve
 * Figmě) a výplň ořezává na cover — geometrie níže jsou 1:1 z návrhu.
 */
.collage__item img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 2px;
}

/* Výchozí dvojice (bloky „Ve světě" a „Výměna"): hlavní vpravo nahoře. */
.collage {
	aspect-ratio: 587 / 456;
}

.collage__item--main {
	position: absolute;
	right: 0;
	top: 0;
	width: 94.5%;
}

.collage__item--main img {
	aspect-ratio: 555 / 398;
}

.collage__item--second {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44.6%;
}

.collage__item--second img {
	aspect-ratio: 262 / 184;
}

/* Blok 1 — Historie, tři fotky (skupina 634 × 508). */
.collage--tri {
	aspect-ratio: 634 / 508;
}

.collage--tri .collage__item--main {
	width: 87.5%;
	top: 11.2%;
}

.collage--tri .collage__item--second {
	top: 0;
	bottom: auto;
	width: 52.2%;
}

.collage--tri .collage__item--second img {
	aspect-ratio: 331 / 221;
}

.collage__item--third {
	position: absolute;
	left: 3.9%;
	bottom: 0;
	width: 31.7%;
}

.collage__item--third img {
	aspect-ratio: 201 / 268;
}

/* Blok 3 — Výměna (587 × 507): menší fotka je širší. */
.story__block:nth-of-type(3) .collage {
	aspect-ratio: 587 / 507;
}

.story__block:nth-of-type(3) .collage__item--second {
	width: 62.7%;
}

.story__block:nth-of-type(3) .collage__item--second img {
	aspect-ratio: 368 / 294;
}

/* Blok 4 — Přístup (609 × 556): hlavní vlevo, menší vpravo dole. */
.story__block:nth-of-type(4) .collage {
	aspect-ratio: 609 / 556;
}

.story__block:nth-of-type(4) .collage__item--main {
	right: auto;
	left: 0;
	top: 0;
	width: 90.5%;
}

.story__block:nth-of-type(4) .collage__item--main img {
	aspect-ratio: 551 / 470;
}

.story__block:nth-of-type(4) .collage__item--second {
	left: auto;
	right: 0;
	bottom: 0;
	width: 57.2%;
}

.story__block:nth-of-type(4) .collage__item--second img {
	aspect-ratio: 348 / 252;
}

/* V návrhu fotka bloku Přístup začíná nad úrovní textu. */
.story__block:nth-of-type(4) .story__inner {
	align-items: start;
}

.story__block:nth-of-type(4) .story__body {
	margin-top: clamp(2rem, 6.4vw, 5.75rem);
}

/* Jemné najetí fotek při scrollování. */
.collage__item {
	will-change: transform;
	transition: transform 0.1s linear;
}

.principle-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 24px;
}

.principle {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 40px 32px;
	background: var(--c-cream);
	border-radius: var(--radius-card);
}

.principle__num {
	font-size: clamp(2.5rem, 1.8rem + 2.8vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--c-red);
	margin: 0;
}

.principle__title {
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0;
}

.principle__text {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.45;
	margin: 0;
}

.section__foot {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

/* --- 21c. Kariéra ------------------------------------------------------ */

.dark-hero {
	position: relative;
	display: flex;
	align-items: center;
	padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 3.75rem);
	overflow: hidden;
	isolation: isolate;
	background: var(--c-dark);
	color: var(--c-light);
}

.dark-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.dark-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dark-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(33, 19, 19, 0.7);
}

.dark-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.dark-hero .breadcrumbs,
.dark-hero .breadcrumbs a {
	color: var(--c-light);
}

.dark-hero__title {
	font-size: var(--fs-h1);
	line-height: 1.15;
	color: var(--c-light);
	margin: 0;
}

.dark-hero__text {
	font-size: var(--fs-lead);
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-light);
	margin: 0;
}

.dark-hero .btn {
	margin-top: 1rem;
}

.benefit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 24px;
}

.benefit {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px 28px;
	background: var(--c-cream);
	border-radius: var(--radius-card);
}

.benefit__value {
	font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.375rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--c-red);
	margin: 0;
}

.benefit__title {
	font-size: 1.40625rem;
	line-height: 1.15;
	margin: 0;
}

.benefit__text {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
}

.job-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 30px;
}

.job-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 40px 36px;
	background: var(--c-white);
	border-radius: var(--radius-card);
}

.job-card__title {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	line-height: 1.2;
	margin: 0;
}

.job-card__title a {
	color: var(--c-dark);
}

.job-card__title a:hover {
	color: var(--c-red);
}

.job-card__text {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
}

/* Tlačítko v kartě pozice jde podle návrhu přes celou šířku karty. */
.job-card__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
	width: 100%;
	padding-top: 0.75rem;
}

.job-card__actions .btn {
	width: 100%;
	justify-content: center;
	font-weight: 700;
}

.job-card__pdf {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--c-red);
}

.tags--light li {
	background: var(--c-light);
	padding: 6px 12px;
}

/* Detail inzerátu */
.job-detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 0.5rem + 3.3vw, 5rem);
	align-items: start;
}

.job-detail__body {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
}

.job-detail__title {
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
	line-height: 1.15;
	margin: 0;
}

.job-detail__perex {
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
}

.job-detail__group {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
}

.job-detail__group-title {
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}

.job-detail__media {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.job-gallery__main {
	aspect-ratio: 462 / 340;
	overflow: hidden;
	border-radius: var(--radius);
}

.job-gallery__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.job-gallery__item {
	aspect-ratio: 462 / 340;
	overflow: hidden;
	border-radius: var(--radius);
}

.job-gallery__main img,
.job-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hr-contact {
	display: grid;
	grid-template-columns: 376px 1fr;
	gap: clamp(2rem, 0.5rem + 3.3vw, 5rem);
	align-items: center;
}

.hr-contact__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

.hr-contact__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.hr-contact__name {
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
	line-height: 1.15;
	margin: 0;
}

.hr-contact__role {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0;
}

.entry-content--narrow {
	max-width: 760px;
}

/*
 * Mapa čekající na souhlas: místo šedé plochy ukážeme statický náhled,
 * ať je poznat, co se pod souhlasem skrývá.
 */
.address__map--embed:has(.cmplz-placeholder-element:not(.cmplz-activated)) {
	position: relative;
	background-image: var(--mapa-nahled);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* Náhled mírně ztlumíme, ať je poznat, že mapa ještě není živá. */
.address__map--embed:has(.cmplz-placeholder-element:not(.cmplz-activated))::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(247, 245, 241, 0.5);
	pointer-events: none;
}

/* Výzva k souhlasu má nad mapou držet čitelnost. */
.address__map .cmplz-blocked-content-notice {
	z-index: 2;
	max-width: min(420px, 80%);
	padding: 14px 18px;
	border: 0;
	border-radius: 4px;
	background: rgba(33, 19, 19, 0.88);
	color: var(--c-light);
	font-family: var(--font);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

.address__map .cmplz-blocked-content-notice:hover {
	background: var(--c-red);
}

/* Lišta souhlasu se nasvěcuje 2 s, což je zbytečně pomalé. */
.cmplz-cookiebanner,
.cmplz-cookiebanner .cmplz-categories.cmplz-fade-in {
	animation-duration: 250ms !important;
}

/*
 * Dokumenty generované Complianzem si nesou vlastní drobné písmo
 * (14 px) a cílí přes ID, proto i tady musí být ID selektor.
 */
#cmplz-document {
	font-size: var(--fs-body);
	line-height: 1.55;
	max-width: 760px;
}

#cmplz-document h2,
#cmplz-document h3 {
	font-size: var(--fs-h3);
	line-height: 1.25;
	margin-block: 2.5rem 0.75rem;
	padding-bottom: 0;
}

#cmplz-document h3 {
	font-size: 1.375rem;
}

#cmplz-document h4 {
	font-size: 1.125rem;
	margin-block: 1.5rem 0.5rem;
}

#cmplz-document > h2:first-child,
#cmplz-document > h3:first-child {
	margin-top: 0;
}

#cmplz-document p,
#cmplz-document li,
#cmplz-document td {
	font-size: var(--fs-body);
	line-height: 1.55;
}

#cmplz-document p {
	margin-block: 0 1rem;
}

#cmplz-document ul {
	margin-left: 1.25rem;
	margin-bottom: 1.25rem;
}

#cmplz-document li + li {
	margin-top: 0.35rem;
}

#cmplz-document .cmplz-dropdown summary h3 {
	font-size: 1.25rem;
}

#cmplz-document .cmplz-dropdown p,
#cmplz-document .cmplz-dropdown a,
#cmplz-document .cmplz-dropdown h4 {
	font-size: 1rem;
}

#cmplz-document .cmplz-dropdown .name-header strong,
#cmplz-document .cmplz-dropdown .retention-header strong,
#cmplz-document .cmplz-dropdown .function-header strong {
	font-size: 1rem;
}

#cmplz-document a {
	color: var(--c-red);
}

/* --- 23. Responzivita -------------------------------------------------- */

@media (max-width: 1200px) {
	.site-brand__claim {
		display: none;
	}

	.main-nav a {
		font-size: 1.0625rem;
	}
}

@media (max-width: 1024px) {
	.director {
		grid-template-columns: 1fr;
	}

	.director__body {
		min-height: 0;
		padding-inline: var(--gutter);
	}

	.director__media {
		min-height: 420px;
	}

	.features {
		/* minmax(0, …) dovolí sloupci zúžit se pod min-content obsahu. */
		grid-template-columns: minmax(0, 1fr);
	}

	.split {
		grid-template-columns: 1fr;
	}

	.split__body {
		padding-inline: var(--gutter);
	}

	.page-hero__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			'telo'
			'media'
			'cta';
	}

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

	.address,
	.hr-contact,
	.job-detail {
		grid-template-columns: 1fr;
	}

	.story__inner {
		grid-template-columns: 1fr;
	}

	/* V úzkém sloupci jde podle návrhu nejdřív koláž, pak text. */
	.story__media {
		order: -1;
	}

	.story__block--foto-vpravo .story__media {
		order: -1;
	}

	.story__block--foto-vpravo .story__inner {
		grid-template-columns: 1fr;
	}

	/* Koláž drží překryvy i na mobilu — návrh ji tak kreslí. */
	.collage__item {
		border-width: 6px;
		border-bottom-width: 20px;
	}

	.tech__inner {
		grid-template-columns: 1fr;
	}

	/* V úzkém sloupci je fotka podle návrhu až na konci bloku. */
	.tech .tech__media {
		order: 2;
	}

	/* Typografie technologických bloků je v mobilním návrhu větší. */
	.tech .eyebrow {
		font-size: 1rem;
	}

	.tech__title {
		font-size: 2.125rem;
		line-height: 1.25;
	}

	.tech__text,
	.tech__list-title,
	.tech .marked-list li {
		font-size: 1.125rem;
	}

	.address__body {
		padding-inline: var(--gutter);
	}
}

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

	.nav-toggle {
		display: flex;
		width: auto;
		height: auto;
		border: 0;
	}

	.header-tools {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	/* Vlaječky jsou na mobilu podle návrhu až v otevřeném menu. */
	.header-tools .lang-switch {
		display: none;
	}

	/* Claim je v mobilní hlavičce vidět. */
	.site-brand__claim {
		display: block;
		font-size: 0.875rem;
	}
}

@media (max-width: 1024px) {
	.category-grid > * {
		flex-basis: calc((100% - 20px) / 2);
		max-width: calc((100% - 20px) / 2);
	}
}

/*
 * Užší okna: šikmý přechod přes fotku už perex neudrží čitelný – text by
 * ležel na trávě a na budově. Od 1290 px dolů proto přebíráme mobilní
 * řešení z návrhu: fotka klesne k dolní hraně, nahoře zůstane plná barva
 * a text sedí na ní.
 */
/*
 * Záhlaví kategorie mezi 1025 a 1440 px.
 *
 * Na 1440 px vychází sloupec s fotkou na 600 px jako v návrhu a pruh
 * s parametry se tam vejde na jednu řádku. Níž se sloupec zužuje a
 * parametry se lámaly na dva řádky. Pruh se tu proto plynule zmenšuje
 * tak, aby na 1440 px navázal na plnou velikost beze skoku. Sloupce
 * zůstávají půl na půl jako v návrhu.
 */
@media (min-width: 1025px) and (max-width: 1439px) {
	.hero-stats {
		flex-wrap: nowrap;
		gap: clamp(1rem, -1.47rem + 3.86vw, 2rem);
		padding-inline: clamp(0.75rem, -0.49rem + 1.93vw, 1.25rem);
	}

	.hero-stats__icon,
	.hero-stats__icon img {
		width: clamp(38px, 0.6rem + 2.88vw, 51px);
	}

	.hero-stats__icon img {
		height: clamp(33px, 0.5rem + 2.5vw, 44px);
	}

	.hero-stats__item {
		min-width: 0;
		padding-left: clamp(10px, -0.3rem + 1.45vw, 16px);
	}

	.hero-stats__value {
		font-size: clamp(1.375rem, -0.17rem + 2.41vw, 2rem);
		white-space: nowrap;
	}

	.hero-stats__label {
		font-size: clamp(0.9375rem, 0.475rem + 0.72vw, 1.125rem);
	}
}

@media (max-width: 1290px) {
	.hero {
		min-height: 0;
		background: var(--c-white);
		padding-bottom: clamp(250px, 25vw, 470px);
	}

	/* Fotka se nahoře rozplývá do podkladu, žádná tvrdá hrana. */
	.hero__media {
		top: auto;
		bottom: 0;
		height: clamp(260px, 38vw, 500px);
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
	}

	/* Posun dolů, ať je vidět hala i trávník před ní. */
	.hero__media img {
		object-position: center 55%;
	}

	.hero::after {
		content: none;
	}
}

/*
 * Ultrawide. Nad ~1926 px se výška hero zastropuje (clamp výše), takže
 * s rostoucí šířkou okna ubývá svislý výřez a hala postupně vyjíždí ze
 * záběru – při 3440 px by z fotky zůstala skoro jen obloha. Těžiště proto
 * posouváme níž, aby hala zůstala tam, kam ji dal návrh: v 68 % výšky hero.
 *
 * Hodnoty jsou dopočítané z poměru fotky (1,226:1), ne odhadnuté. Tentýž
 * výpočet dá pro 1920 px hodnotu 30 %, což je přesně to, co je nastavené
 * výše – proto mu věříme i nad tím. Pozor: pod 1290 px platí jiná sestava
 * hero (fotka jako spodní pruh), té se tohle netýká.
 */
@media (min-width: 2100px) {
	.hero__media img {
		object-position: center 36%;
	}
}

@media (min-width: 2400px) {
	.hero__media img {
		object-position: center 40%;
	}
}

@media (min-width: 2900px) {
	.hero__media img {
		object-position: center 45%;
	}
}

/*
 * Střední šířky: loga i čísla o firmě mají v návrhu jeden řádek. Jakmile se
 * nevejdou, chceme rovnoměrné rozdělení (3 + 3, respektive 2 + 2), ne
 * osamocenou položku na druhém řádku.
 */
@media (max-width: 1200px) {
	.logo-bar__inner {
		grid-template-columns: repeat(3, 1fr);
	}

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

@media (max-width: 1024px) {
	/* Claim v patičce má ruční zalomení jen pro široký sloupec návrhu. */
	.site-footer__claim br {
		display: none;
	}

	/*
	 * V užší mřížce se sloupec s logem natahuje na výšku sousedního;
	 * claim pak odplouvá dolů. Návrh ho má hned pod logem.
	 */
	.site-footer__brand {
		justify-content: flex-start;
		gap: 0.875rem;
	}
}

@media (max-width: 720px) {
	:root {
		--header-h: 64px;
		/* Mobilní návrh pracuje s okraji 24 px. */
		--gutter: 24px;
		--gutter-sm: 24px;
	}

	/* Mobilní návrh používá v tlačítkách tenkou šipku. */
	.btn {
		justify-content: center;
	}

	.btn .icon--arrow svg {
		display: none;
	}

	.btn .icon--arrow::after {
		content: '';
		display: block;
		width: 17px;
		height: 12px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12' fill='none' stroke='%23f7f5f1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.2 6h13.4'/%3E%3Cpath d='M10.2 1.6 14.8 6l-4.6 4.4'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	.btn--outline .icon--arrow::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12' fill='none' stroke='%23e1061a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.2 6h13.4'/%3E%3Cpath d='M10.2 1.6 14.8 6l-4.6 4.4'/%3E%3C/svg%3E");
	}

	.site-header__inner {
		padding-block: 0.75rem;
	}

	.site-brand__logo {
		width: 110px;
		height: 35px;
	}

	/* Mobilní hero: krémový podklad, velkorysejší odstup nahoře i dole;
	   fotka sedí pod obsahem a nahoru se rozplývá do podkladu. */
	.hero {
		/*
		 * Fotka drží poměr k šířce okna — s pevnou výškou 260 px z ní
		 * na širších mobilech zbývala jen obloha a hala se uřízla.
		 */
		--hero-foto: clamp(260px, 66.7vw, 480px);
		background: var(--c-cream);
		/* Podle návrhu: obsah 76 px pod hlavičkou, pod ním kus fotky. */
		padding-top: calc(var(--header-real, 64px) + 76px);
		padding-bottom: clamp(114px, 29.2vw, 220px);
	}

	.hero__media {
		top: auto;
		bottom: 0;
		height: var(--hero-foto);
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
	}

	/* Výřez jako v návrhu: nebe a hala, tráva jen u spodní hrany. */
	.hero__media img {
		object-position: center top;
	}

	.hero__inner {
		gap: 20px;
	}

	.hero__title {
		max-width: none;
		font-size: 2rem;
		line-height: 1.25;
	}

	.hero__subtitle {
		font-size: 1rem;
		line-height: 1.375;
	}

	.hero .btn-row {
		flex-direction: column;
		gap: 12px;
		width: min(280px, 100%);
	}

	/* Menší tlačítka podle mobilního návrhu. */
	.btn {
		min-height: 46px;
		padding: 13px 24px 12px;
		font-size: 1.125rem;
		border-radius: 3px;
	}

	/* Blok „Navrhneme a vyrobíme" podle mobilního návrhu. */
	.split {
		padding-block: 48px;
		gap: 24px;
	}

	.split__body {
		gap: 24px;
	}

	.split__heading {
		gap: 24px;
	}

	.split__text {
		font-size: 1rem;
		line-height: 1.5;
	}

	.param-row {
		flex-wrap: nowrap;
		gap: 18px;
		padding-top: 8px;
	}

	.param {
		flex: 0 0 auto;
		min-width: 0;
		padding-left: 10px;
		padding-right: 0;
	}

	/* Na užších displejích se parametry plynule zmenší, ať drží řádek. */
	.param__value {
		font-size: clamp(1.0625rem, -0.37rem + 7.14vw, 1.375rem);
		line-height: 1.45;
		white-space: nowrap;
	}

	.param__label {
		font-size: clamp(0.6875rem, -0.17rem + 4.29vw, 0.875rem);
		letter-spacing: 0.5px;
		white-space: nowrap;
	}

	.split .btn {
		width: min(280px, 100%);
		margin-block: 16px;
	}

	/* Loga referencí: tři sloupce a menší loga. */
	.logo-bar__inner {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px 12px;
		padding-block: 22px;
	}

	.logo-bar img {
		height: 46px;
		max-width: 100%;
	}

	.logo-bar__more span {
		font-size: 1.5rem;
	}

	.logo-bar__more small {
		font-size: 0.875rem;
	}

	/* Ruční zalomení nadpisu platí jen pro desktop. */
	.hero__title br,
	.split__title br,
	.audit__title br {
		display: none;
	}

	/*
	 * Popisky nad nadpisy jsou v mobilním návrhu menší, v užším řezu
	 * a s menším prostrkáním. Tmavé jsou na bílé i krémové ploše, na
	 * béžové zůstávají červené jako v návrhu.
	 */
	.eyebrow--lg,
	.split__eyebrow,
	.story-hero__eyebrow {
		font-size: 0.875rem;
	}

	.eyebrow:not(.eyebrow--plain) {
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: 0.7px;
		color: var(--c-dark);
	}

	.section--light .eyebrow:not(.eyebrow--plain) {
		color: var(--c-red);
	}

	.split__eyebrow,
	.story-hero__eyebrow {
		letter-spacing: 0.7px;
	}

	/*
	 * Dlaždice kategorie je v mobilním návrhu stejná jako na desktopu,
	 * ale ikona a písmo drží plnou velikost (109 px / 24 px) a text smí
	 * sahat téměř ke krajům karty, aby se dlouhý název nelámal.
	 */
	.category-card {
		padding-inline: 6px;
	}

	/* Sekce: nadpis větší, popisek menší a víc vzduchu nahoře i dole. */
	.section {
		padding-block: 64px;
	}

	.section__head {
		gap: 0.75rem;
		margin-bottom: 24px;
	}

	/* Víceřádkové nadpisy mají v mobilním návrhu volnější řádkování. */
	.section__title {
		font-size: 2.125rem;
		line-height: 1.25;
	}

	.page-hero__title,
	.features__title,
	.story__title,
	.dark-hero__title {
		line-height: 1.3;
	}

	/* Záhlaví stránky: víc vzduchu mezi nadpisem a fotkou. */
	.page-hero__inner {
		row-gap: 28px;
	}

	/*
	 * Kontakty mají v mobilním návrhu obsah na střed, popisek místo
	 * drobečků a perex pod nadpisem.
	 */
	.page-hero--stred {
		padding-block: 56px;
	}

	.page-hero--stred .page-hero__body {
		align-items: center;
		text-align: center;
		gap: 16px;
	}

	.page-hero--stred .breadcrumbs {
		display: none;
	}

	.page-hero--stred .page-hero__eyebrow {
		display: block;
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: 0.7px;
		text-transform: uppercase;
		margin: 0;
	}

	.page-hero--stred .page-hero__title {
		font-size: 2.25rem;
		line-height: 1.1;
	}

	/* Výzva k auditu je v mobilním návrhu podstatně vyšší. */
	.audit {
		min-height: 608px;
	}

	.page-hero__cta {
		margin-top: 0;
	}

	/* Parametry: hodnota a popisek těsněji u sebe. */
	.param {
		gap: 2px;
	}

	.param__value {
		line-height: 1.25;
	}

	.section__subtitle {
		font-size: 1rem;
	}

	/* „Všechny produkty" jsou na mobilu tlačítko 280 px na středu. */
	/* Vyšší specificita než .category-grid > * v bloku 560 px. */
	.category-grid > .category-card--all {
		aspect-ratio: auto;
		align-self: center;
		flex: 0 0 auto;
		width: min(280px, 100%);
		min-height: 46px;
		justify-content: center;
		padding: 13px 24px;
		margin-top: 1.25rem;
		border-radius: 3px;
		box-shadow: none;
	}

	.category-card--all .category-card__media {
		display: none;
	}

	.category-card--all .category-card__title {
		min-height: 0;
		padding: 0;
		font-size: 1.125rem;
		text-transform: none;
	}

	.category-grid > .category-card--all {
		margin-block: 24px 0;
	}

	/* Sekce s jednatelem: nejdřív fotka (s okraji a zaoblením), pak text. */
	.director__media {
		order: -1;
		min-height: 0;
		margin: 24px var(--gutter) 0;
	}

	.director__media img {
		position: static;
		height: auto;
		border-radius: 5px;
	}

	.director__body {
		min-height: 0;
		padding-block: 24px 48px;
		gap: 1.25rem;
	}

	.contact-line {
		font-size: 1.25rem;
		gap: 12px;
	}

	.contact-line__icon {
		width: 40px;
		height: 40px;
	}

	.contact-line__icon svg {
		width: 22px;
		height: 22px;
	}

	.director__watermark {
		width: 107px;
	}

	/*
	 * HR kontakt na Kariéře má v mobilním návrhu jinou hierarchii než
	 * jednatel na úvodní stránce: jméno 24, pozice 14, kontakty 32 px
	 * s ikonou 56 px a větším logem.
	 */
	.hr-contact__name {
		font-size: 1.5rem;
	}

	.hr-contact__role {
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 1.57;
	}

	.hr-contact .contact-line {
		font-size: clamp(1.5rem, 8.2vw, 2rem);
		gap: 16px;
	}

	.hr-contact .contact-line__icon {
		width: 56px;
		height: 56px;
	}

	.hr-contact .contact-line__icon svg {
		width: 32px;
		height: 32px;
	}

	.hr-contact .director__watermark {
		width: 147px;
	}

	/* Body 01–04 v Proč Strojon jsou na mobilu drobnější. */
	.feature {
		grid-template-columns: 56px 1fr;
		padding-block: 1rem 1.75rem;
	}

	.feature__num {
		font-size: 2.25rem;
	}

	.feature__title {
		font-size: 1.125rem;
	}

	/* Mobilní návrh nemá linku pod posledním bodem a odkaz je tmavý. */
	.feature:last-child {
		border-bottom: 0;
		padding-bottom: 0.5rem;
	}

	.features__link {
		color: var(--c-dark);
	}

	/*
	 * Na Výrobních možnostech řadí mobilní návrh Certifikace před
	 * Naše silné stránky (na úvodní stránce a kategoriích je to naopak).
	 */
	.page-template-page-vyrobni-moznosti .features__col--right {
		order: -1;
	}

	.features__title {
		margin-block: 20px 24px;
	}

	/* Výzva k auditu má v mobilním návrhu velkorysé odsazení. */
	.audit {
		padding-block: 96px;
	}

	/* Menu v patičce: linka těsně pod položkou, menší rozestupy. */
	.footer-menu li + li {
		margin-top: 1.375rem;
	}

	.audit__inner {
		gap: 2rem;
	}

	/* Certifikace jsou na mobilu dvě vedle sebe. */
	.cert-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.cert {
		gap: 10px;
		min-width: 0;
		min-height: 0;
		padding: 12px;
	}

	.cert__name {
		overflow-wrap: anywhere;
	}

	.cert__thumb {
		width: 48px;
		height: 48px;
	}

	.cert__name {
		font-size: 0.9375rem;
		line-height: 1.2;
	}

	/* Tmavé hero na O nás má v mobilním návrhu velkorysé odsazení. */
	.story-hero {
		min-height: 0;
		padding: 6rem 0 7rem;
	}

	/* Fotka je v návrhu o něco víc přiblížená. */
	.story-hero__media img {
		object-position: center 65%;
		transform: scale(1.18);
	}

	/* Popisek nad logy je stejně velký jako eyebrow u sekcí příběhu. */
	.logo-bar__title {
		font-size: 0.875rem;
		letter-spacing: 0.7px;
	}

	.story-hero__title {
		font-size: 1.75rem;
	}

	.story-hero__text {
		font-size: 1rem;
	}

	/* „Dodáváme do těchto firem": jeden řádek drobných log. */
	.logo-bar--light .logo-bar__inner {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin-top: 1.25rem;
		padding-block: 0;
	}

	.logo-bar--light img {
		height: 20px;
		max-width: 60px;
	}

	.logo-bar--light .logo-bar__more span {
		font-size: 1rem;
	}

	.logo-bar--light .logo-bar__more small {
		font-size: 0.6875rem;
	}

	/* Vyrobené zakázky: dvě karty na řádek s drobnějším písmem. */
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.product-card__title {
		font-size: 1rem;
		line-height: 1.2;
	}

	.product-card__body {
		padding: 12px;
		gap: 8px;
	}

	.product-card__param {
		font-size: 0.6875rem;
	}

	/* Karty klíčových parametrů jsou v návrhu carousel s tečkami. */
	.process-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
	}

	.process-grid::-webkit-scrollbar {
		display: none;
	}

	.process-grid > * {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}

	/* Benefity na kariéře jsou na mobilu dva na řádek. */
	.benefit-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.benefit {
		padding: 20px 16px;
	}

	.benefit__value {
		font-size: 1.375rem;
	}

	.benefit__title {
		font-size: 1.0625rem;
	}

	.benefit__text {
		font-size: 0.875rem;
	}

	/* Parametry v záhlaví kategorie se musí vejít na jednu řádku. */
	.hero-stats {
		flex-wrap: nowrap;
		gap: 0.75rem;
		padding: 14px 16px;
	}

	.hero-stats__icon,
	.hero-stats__icon img {
		width: 34px;
		height: 30px;
	}

	.hero-stats__item {
		min-width: 0;
		padding-left: 10px;
	}

	.hero-stats__value {
		font-size: 1rem;
		white-space: nowrap;
	}

	.hero-stats__label {
		font-size: 0.625rem;
		letter-spacing: 0.3px;
	}

	.hero .btn,
	.audit .btn {
		width: 100%;
		justify-content: center;
	}

	.btn-row {
		width: 100%;
		flex-direction: column;
		gap: 1rem;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
		text-align: left;
	}

	/* Návrh dává na mobilu logo s claimem na střed, zbytek patičky doleva. */
	.site-footer__brand {
		align-items: center;
		text-align: center;
		gap: 1rem;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		margin-top: 1.5rem;
		padding-top: 1.5rem;
		border-top: 1px solid rgba(225, 6, 26, 0.25);
		text-align: center;
	}

	/* Čísla o firmě: v návrhu je popisek hned pod hodnotou, ne roztažený. */
	.stat {
		min-height: 0;
		justify-content: flex-start;
		gap: 0.5rem;
	}

	/* Hodnota se nesmí zalomit, ale ani roztlačit sloupec na úzkém displeji. */
	.stat__value {
		font-size: clamp(1.5rem, 0.53rem + 4.83vw, 2rem);
		line-height: 1.1;
		white-space: nowrap;
	}

	.stat__label {
		font-size: 0.8125rem;
		line-height: 1.25;
	}



	.feature {
		grid-template-columns: 60px 1fr;
	}

	.stats__inner {
		grid-template-columns: 1fr 1fr;
	}

	.hero-stats {
		gap: 1rem;
	}

	.job {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * Kontakty na mobilu: návrh má lidi ve dvou sloupcích (karta 165 px při
 * šířce 390 px), ne pod sebou. Typografie je uvnitř karty odpovídajícím
 * způsobem menší.
 */
@media (max-width: 720px) {
	.people-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.person {
		gap: 16px;
		padding-bottom: 24px;
		border-radius: 5px;
	}

	.person__body {
		gap: 4px;
		padding-inline: 14px;
	}

	.person__name {
		font-size: 1rem;
		line-height: 1.15;
	}

	.person__role {
		font-size: 0.75rem;
	}

	.person__text {
		font-size: 0.75rem;
		line-height: 1.667;
		margin-bottom: 0.5rem;
	}

	.person__phone {
		font-size: 0.875rem;
	}

	.person__mail {
		font-size: 0.75rem;
		color: var(--c-red);
	}

	.person--more {
		padding: 40px 20px;
	}
}

@media (max-width: 560px) {
	/* Jednosloupcová mřížka: rozměry z mobilního návrhu, bez škálování. */
	.category-card__icon {
		width: 109px;
		height: 109px;
	}

	.category-card__title {
		min-height: 92px;
		font-size: 1.5rem;
	}

	.category-card--all .category-card__title {
		font-size: 1.125rem;
	}

	.process-grid {
		grid-template-columns: 1fr;
	}

	.category-grid > * {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* Nejužší displeje (320 px): obsah se nesmí protlačit přes okraj okna. */
@media (max-width: 400px) {
	.param-row {
		gap: 10px;
	}

	.param {
		padding-left: 8px;
	}

	.stat {
		padding-left: 14px;
		padding-right: 8px;
	}

	/*
	 * Položky mřížky mají implicitně min-width: auto, takže dlouhý obsah
	 * roztlačí sloupec přes okraj okna. Na úzkých displejích jim to
	 * dovolíme zmenšit a text raději zalomíme.
	 */
	.job-card,
	.page-hero__body,
	.page-hero__media,
	.hero-stats {
		min-width: 0;
		overflow-wrap: break-word;
	}

	.job-card {
		padding: 28px 20px;
	}
}

@media (max-width: 480px) {

	.social a {
		width: 52px;
		height: 52px;
	}
}

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