/* ==========================================================================
   Základ — reset, typografie, mřížka, opakující se prvky maketu
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--bx-cream);
	color: var(--bx-ink);
	font-family: var(--bx-font-text);
	font-size: var(--bx-its-size);
	line-height: var(--bx-its-lh);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6, p, figure, ul, ol, blockquote, dl, dt, dd { margin: 0; }
dd { margin-inline-start: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--bx-yellow); outline-offset: 2px; }
.bx-dark :focus-visible, .bx-yellow-bg :focus-visible { outline-color: var(--bx-ink); }

.bx-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.bx-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--bx-ink); color: var(--bx-cream);
	padding: 12px 20px; font-family: var(--bx-font-head);
}
.bx-skip-link:focus { left: 0; }

/* --- Mřížka --------------------------------------------------------------- */
.bx-container {
	width: 100%;
	max-width: calc(var(--bx-content) + var(--bx-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--bx-gutter);
}

/* --- Typografické třídy dle stylů z Figmy --------------------------------- */
.bx-h1 {
	font-family: var(--bx-font-head); font-weight: 700;
	font-size: var(--bx-h1-size); line-height: var(--bx-h1-lh);
	letter-spacing: var(--bx-h1-ls); text-transform: uppercase;
}
.bx-h2 {
	font-family: var(--bx-font-head); font-weight: 700;
	font-size: var(--bx-h2-size); line-height: var(--bx-h2-lh);
	letter-spacing: var(--bx-h2-ls); text-transform: uppercase;
}
.bx-h3 {
	font-family: var(--bx-font-head); font-weight: 700;
	font-size: var(--bx-h3-size); line-height: var(--bx-h3-lh);
	letter-spacing: var(--bx-h3-ls); text-transform: uppercase;
}
.bx-h4 {
	font-family: var(--bx-font-head); font-weight: 500;
	font-size: var(--bx-h4-size); line-height: var(--bx-h4-lh);
}
.bx-caps {
	font-family: var(--bx-font-head); font-weight: 500;
	font-size: var(--bx-caps-size); line-height: var(--bx-caps-lh);
	letter-spacing: var(--bx-caps-ls); text-transform: uppercase;
}
.bx-menu-item {
	font-family: var(--bx-font-head); font-weight: 500;
	font-size: var(--bx-menu-size); line-height: var(--bx-menu-lh);
	letter-spacing: var(--bx-menu-ls); text-transform: uppercase;
}
/* Staré bloky (BX) — Plus Jakarta Sans */
.bx-text-m {
	font-family: var(--bx-font-bx);
	font-size: var(--bx-textm-size); line-height: var(--bx-textm-lh);
}
.bx-text-s {
	font-family: var(--bx-font-bx);
	font-size: var(--bx-texts-size); line-height: var(--bx-texts-lh);
}
.bx-ui {
	font-family: var(--bx-font-bx); font-weight: 600;
	font-size: var(--bx-ui-size); line-height: var(--bx-ui-lh);
}
/* Nové bloky — Inter */
.bx-it-s { font-family: var(--bx-font-text); font-size: var(--bx-its-size); line-height: var(--bx-its-lh); }
.bx-it-m { font-family: var(--bx-font-text); font-size: var(--bx-itm-size); line-height: var(--bx-itm-lh); }
/* Čísla a ceny — Manrope Bold */
.bx-num {
	font-family: var(--bx-font-num); font-weight: 700;
	font-size: var(--bx-num-size); line-height: var(--bx-num-lh);
	letter-spacing: var(--bx-num-ls);
}

/* --- Hlavička sekce (štítek + nadpis vlevo, popis vpravo) ------------------ */
.bx-sechead {
	display: flex;
	align-items: flex-end;
	gap: 30px;
	width: 100%;
}
.bx-sechead__text {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}
/* Štítek sekce. Žlutý čtvereček má v maketu jen blok „Karty služeb a cen“,
   ostatní bloky mají samotný text. */
.bx-sechead__label {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--bx-yellow-dark);
}
.bx-sechead__label--marker::before {
	content: '';
	width: 9px; height: 9px;
	flex: 0 0 9px;
	background: var(--bx-yellow);
}
.bx-sechead__title { color: var(--bx-ink); font-weight: 400; }
.bx-sechead__title.bx-h2 { font-weight: 700; }
.bx-sechead__lead {
	/* Šířku držíme přes width, ne přes flex-basis: ve svislém uspořádání
	   by se z flex-basis stala výška a v bloku by zůstala díra. */
	flex: none;
	width: 400px;
	max-width: 100%;
	color: var(--bx-text-2);
}
.bx-sechead--dark .bx-sechead__label { color: var(--bx-yellow); }
.bx-sechead--dark .bx-sechead__title { color: var(--bx-text-inv); }
.bx-sechead--dark .bx-sechead__lead { color: var(--bx-text-inv-2); }

@media (max-width: 900px) {
	.bx-sechead { flex-direction: column; align-items: flex-start; gap: 16px; }
	.bx-sechead__lead { width: 100%; }
}

/* --- Tlačítka ------------------------------------------------------------- */
.bx-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 12px; border: 0; cursor: pointer;
	font-family: var(--bx-font-head); font-weight: 500;
	font-size: var(--bx-caps-size); line-height: var(--bx-caps-lh);
	letter-spacing: var(--bx-caps-ls); text-transform: uppercase;
	padding: 20px 28px; border-radius: 0;
	transition: background-color .18s ease, color .18s ease;
}
.bx-btn--dark { background: var(--bx-ink); color: var(--bx-cream); }
.bx-btn--dark:hover { background: #000; }
.bx-btn--yellow { background: var(--bx-yellow); color: var(--bx-ink); }
.bx-btn--yellow:hover { background: #d9a404; }
.bx-btn--ghost { background: transparent; color: var(--bx-white); border: 1px solid var(--bx-white); }
.bx-btn--ghost:hover { background: var(--bx-white); color: var(--bx-ink); }
.bx-btn__icon { width: 16px; height: 16px; flex: 0 0 16px; }
.bx-btn__icon svg { width: 100%; height: 100%; }

/* --- Čtvercová šipková tlačítka ------------------------------------------- */
.bx-sq {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; flex: 0 0 40px;
	transition: background-color .18s ease, color .18s ease;
}
.bx-sq svg { width: 16px; height: 16px; }

/* --- Vložené SVG ikony dědí barvu ---------------------------------------- */
/* Ikony z maketu jsou obtahové: barvu nese stroke="currentColor".
   Výplň schválně nepřepisujeme, jinak by se obrysy zaplnily. */
.bx-icon { display: inline-flex; flex: none; }
.bx-icon svg { width: 100%; height: 100%; display: block; }

/* --- Pomocné ------------------------------------------------------------- */
.bx-dark { background: var(--bx-ink); color: var(--bx-cream); }
.bx-yellow-bg { background: var(--bx-yellow); color: var(--bx-ink); }
.bx-cream-bg { background: var(--bx-cream); color: var(--bx-ink); }

/* Kotva pod fixní hlavičkou */
[id] { scroll-margin-top: calc(var(--bx-header-h) + 20px); }

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