/* ==========================================================================
   BeTrue — Design System
   betrue.cz (dev: new.betrue.cz) · vytvořeno 2026-09-12 · odvozeno z mockupu

   ZDROJ HODNOT: podklady/mockup-2026-09-12.html („Jde to i jinak")
   Všechny hodnoty jsou MĚŘENÉ (Playwright computed CSS, 390 / 768 / 1440 px),
   baseline v state/mockup-home.json. Postup „measurement first", žádné odhady.

   Konvence (docs/BRICKS_PATTERNS.md, docs/CSS_COOKBOOK.md):
   - Bricks = struktura, CSS = vzhled. Žádné inline styly.
   - `_cssCustom` v Bricks ignoruje display:flex/grid → vždy CSS class s !important
   - `.brxe-*` mají vlastní default barvy → explicitní selektory + !important
   - `bricks-lazy-hidden` stripuje pozadí → viz blok LAZY-LOAD FIX na konci
   - ⚠️ Bricks nastavuje `html { font-size: 10px }` (62.5 %) → 1rem = 10px.
     Proto se tu všude používá px, ne rem.

   Motiv: ÚSVIT — světlo prostupující tmou. Hero = gradient z noci (--bt-dawn-deep)
   přes petrolejovou do teplé bílé; spirála = slunce.
   ========================================================================== */

:root {
	/* ── Barvy ── (měřeno) */
	--bt-teal: #1F6F78;            /* primární — header, CTA, akcenty, teal sekce */
	--bt-teal-light: #2A8A95;      /* sekundární — rozjasnění v gradientu */
	--bt-teal-deep: #113c41;       /* hlubší — dech sekce, pain banner */
	--bt-teal-darker: #0a2629;     /* nejhlubší — footer, noc v hero gradientu */
	--bt-slate: #4A5568;           /* akcent — Monika sekce, levý border karty termínů */
	--bt-slate-deep: #2D3748;      /* hover stav CTA */

	--bt-cream: #FAF8F5;           /* plocha stránky (teplá bílá) */
	--bt-cream-light: #FFFFFF;     /* karty */
	--bt-cream-border: #E5E1D9;    /* rámečky, dělící linky */
	--bt-cream-border-light: #EFEBE3; /* jemnější linka (soft divider) */

	--bt-black: #050505;
	--bt-ink: #1a1a1a;             /* nadpisy */
	--bt-body: #3a3a3a;            /* odstavce */
	--bt-muted: #5a5a5a;           /* popisky, meta */
	--bt-muted-2: #6a6a6a;         /* nejjemnější meta (kontext u videa) */

	/* Úsvit — gradientní stupnice hero (jen brand barvy) */
	--bt-dawn-deep: #0a2629;
	--bt-dawn-mid: #1F6F78;
	--bt-dawn-light: #2A8A95;
	--bt-dawn-end: #FAF8F5;

	/* ── Typografie ── */
	--bt-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--bt-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* velikosti: mobile → desktop (clamp, měřeno na 390 a 1440) */
	--bt-h1: clamp(44px, 7.2vw, 76px);    /* lh 1.02, ls −1px, w500 */
	--bt-h2: clamp(28px, 4.2vw, 40px);    /* lh 1.18, ls −.4px — intro, pointa sekce */
	--bt-h2-sm: clamp(26px, 3.6vw, 36px); /* lh 1.2 — proces, fotky, video */
	--bt-h3: clamp(28px, 5vw, 40px);      /* lh 1.04, ls −.6px — bannerové citace */
	--bt-quote: clamp(24px, 3.4vw, 34px); /* lh 1.35 — teal reference */
	--bt-quote-sm: clamp(22px, 3.2vw, 30px); /* lh 1.4 — dech */
	--bt-name: clamp(28px, 4.5vw, 36px);  /* Monika */
	--bt-stat: clamp(28px, 4vw, 34px);    /* číslo ve statistice */
	--bt-num: clamp(48px, 8vw, 64px);     /* 01 / 02 / 03 */
	--bt-price: clamp(30px, 4vw, 40px);

	--bt-lead: 18px;               /* intro body (desktop; mobil 16px) */
	--bt-base: 16px;               /* běžný text v sekcích */
	--bt-small: 15px;              /* proces body, banner sub */
	--bt-xs: 13px;                 /* meta, kontext */
	--bt-eyebrow: 12px;            /* uppercase, ls 2.5px, w500 (mobil 11px) */

	/* ── Rytmus a plocha ── */
	--bt-container: 1200px;
	--bt-gutter: 20px;             /* mobil */
	--bt-gutter-lg: 32px;          /* ≥768 */
	--bt-section-y: 40px;          /* mobil */
	--bt-section-y-lg: 60px;       /* ≥768 */

	/* ── Rádiusy ── (mockup je záměrně hranatý) */
	--bt-radius: 0;                /* tlačítka, karty, bannery */
	--bt-radius-chip: 2px;         /* délka videa, drobné chipy */
	--bt-radius-circle: 50%;
}

/* ==========================================================================
   BASE
   ========================================================================== */

body.betrue,
body {
	font-family: var(--bt-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--bt-body);
	background: var(--bt-cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

.bt-container,
.brxe-container.bt-container,
.brxe-block.bt-container {
	max-width: var(--bt-container);
	margin: 0 auto;
	padding: 0 var(--bt-gutter);
	position: relative;
	width: 100%;

	/* Bricks dává `.brxe-block` `display:flex; flex-direction:column;
	   align-items:flex-start`. To působí dvě potíže naráz:
	   1) potomci se scvrknou na šířku obsahu (mřížka 514 px místo 1136 px),
	   2) flex item neumí spočítat výšku z potomka s procentním padding-top —
	      mřížka fotek hlásila 32 px, ačkoli její obsah měl 820 px.
	   Blokový kontejner řeší obojí: šířka se dědí, výška plyne z obsahu.
	   Naměřeno 2026-09-12. */
	display: block !important;
}

/* Totéž pro sekce a vnitřní divy, které nesou mřížky */
.bt-section,
.brxe-section.bt-section { align-items: stretch !important; }

/* Bricks staví kontejner i sekci jako flex column, takže jejich přímé děti jsou
   flex items s `flex-shrink: 1` a smrští se pod vlastní obsah (mřížka fotek
   hlásila výšku 32 px, zatímco její obsah měl 820 px — naměřeno 2026-09-12).
   Ve svislém toku je smršťování pod obsah vždy nežádoucí. */
.bt-container > *,
.bt-section > * { flex-shrink: 0; }

@media (min-width: 768px) {
	.bt-container,
	.brxe-container.bt-container,
	.brxe-block.bt-container { padding: 0 var(--bt-gutter-lg); }
}

/* Sekce je vždy plná šířka, obsah drží container */
.bt-section,
.brxe-section.bt-section {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* ==========================================================================
   TYPOGRAFIE — sdílené třídy
   ========================================================================== */

.bt-eyebrow {
	font-family: var(--bt-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.bt-eyebrow { font-size: var(--bt-eyebrow); }
}

.bt-eyebrow--teal { color: var(--bt-teal) !important; }
.bt-eyebrow--slate { color: var(--bt-slate) !important; }
.bt-eyebrow--muted { color: var(--bt-muted) !important; }
.bt-eyebrow--on-dark { color: var(--bt-cream) !important; opacity: .7; }

/* Nadpisy — .brxe-heading má vlastní default barvy, proto explicitně */
.bt-h1,
.brxe-heading.bt-h1 {
	font-family: var(--bt-font-display);
	font-size: var(--bt-h1);
	line-height: 1.02;
	font-weight: 500;
	letter-spacing: -1px;
	color: var(--bt-cream);
}

.bt-h2,
.brxe-heading.bt-h2 {
	font-family: var(--bt-font-display);
	font-size: var(--bt-h2);
	line-height: 1.18;
	font-weight: 500;
	letter-spacing: -.4px;
	color: var(--bt-ink);
}

/* Menší varianta pro sekce s předsazeným nadpisem (proces, fotky, video) */
.bt-h2--sm,
.brxe-heading.bt-h2--sm {
	font-size: var(--bt-h2-sm);
	line-height: 1.2;
	max-width: 600px;
}

.bt-h3,
.brxe-heading.bt-h3 {
	font-family: var(--bt-font-display);
	font-size: var(--bt-h3);
	line-height: 1.04;
	font-weight: 500;
	letter-spacing: -.6px;
	color: var(--bt-cream);
}

/* Kurzíva jako akcent uvnitř nadpisu (mockup: „i jinak", „ne", „nikdy", „jako") */
.bt-accent {
	font-style: italic;
	font-weight: 400;
}

/* Podtržení akcentu v H1 — linka kopíruje šířku textu.
   Dřív to byl `::after` s `display:block; width:100%`, jenže ten roztáhl linku
   přes celý textový sloupec (o ~170 px za konec slova) a zároveň shodil koncovou
   tečku na samostatný řádek. Gradient na pozadí drží akcent inline. */
.bt-h1 .bt-accent {
	background-image: linear-gradient(var(--bt-cream), var(--bt-cream));
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: .12em;
}

.bt-quote-mark { opacity: .65; }

.bt-body,
.brxe-text.bt-body {
	font-size: var(--bt-base);
	line-height: 1.7;
	color: var(--bt-body);
}

.bt-body p + p { margin-top: 14px; }

@media (min-width: 768px) {
	.bt-body,
	.brxe-text.bt-body { font-size: var(--bt-lead); }
}

/* ==========================================================================
   SECTION MARKER — vertikální graphic prvek vlevo (jemný, dekorativní)
   ========================================================================== */

.bt-marker {
	position: absolute;
	left: 0;
	top: 0;
	writing-mode: vertical-rl;
	font-family: var(--bt-font-display);
	font-size: 11px;
	font-style: italic;
	letter-spacing: 1px;
	color: var(--bt-teal);
	opacity: .35;
	pointer-events: none;
	user-select: none;
	display: none;
}

@media (min-width: 1400px) {
	.bt-marker { display: block; }
}

/* ==========================================================================
   WATERMARK SPIRÁLA — dekorativní podklad (slunce / úsvit)
   ========================================================================== */

.bt-watermark {
	position: absolute;
	width: clamp(560px, 65vw, 1400px);
	aspect-ratio: 1;
	opacity: .07;
	pointer-events: none;
	z-index: 0;
}

.bt-watermark--top-right {
	top: clamp(-200px, -12vw, -340px);
	right: clamp(-300px, -16vw, -560px);
}

.bt-watermark--center-left {
	top: 50%;
	left: clamp(-380px, -20vw, -560px);
	transform: translateY(-50%);
}

/* V hero je spirála slunce — výraznější a ukotvená v pravém horním rohu */
.bt-hero .bt-watermark--top-right {
	opacity: .18;
	width: clamp(280px, 55vw, 480px);
	top: clamp(-60px, -8vw, -40px);
	right: clamp(-60px, -10vw, -50px);
}

@media (min-width: 768px) {
	.bt-hero .bt-watermark--top-right {
		width: clamp(420px, 50vh, 720px);
		top: clamp(-80px, -8vh, -120px);
		right: clamp(-80px, -8vw, -140px);
		opacity: .16;
	}
}

@media (min-width: 1400px) {
	.bt-hero .bt-watermark--top-right {
		width: clamp(520px, 55vh, 820px);
		opacity: .14;
	}
}

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */

.bt-section--header,
.brxe-section.bt-section--header {
	background: var(--bt-teal) !important;
	color: var(--bt-cream);
	/* Hero má z-index 5; bez tohohle se rozbalené mobilní menu schová pod ním. */
	position: relative;
	z-index: 30;
	overflow: visible;
}

.bt-header-inner {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	position: relative;
}

/* Logo se ve flexu scvrkávalo na nulovou šířku a v hlavičce nebylo vidět
   (naměřeno 2026-09-12: 0×26 px). */
.bt-logo-link { flex: 0 0 auto; }

@media (min-width: 768px) {
	.bt-header-inner { padding: 18px 0; }
}

/* ── Mobilní ovládání: CTA + hamburger ── */
.bt-nav-tools {
	display: flex !important;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
	margin-left: auto;
}

.bt-nav-cta {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .2px;
	color: var(--bt-teal) !important;
	background: var(--bt-cream);
	padding: 9px 16px;
	white-space: nowrap;
}

.bt-nav-cta a { color: var(--bt-teal) !important; text-decoration: none; }

.bt-nav-toggle {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 9px 8px;
	background: transparent;
	border: none;
	cursor: pointer;
	flex: 0 0 auto;
}

.bt-nav-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--bt-cream);
	transition: transform .2s, opacity .2s;
}

/* otevřený stav — křížek */
.bt-header-inner.is-open .bt-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bt-header-inner.is-open .bt-nav-toggle span:nth-child(2) { opacity: 0; }
.bt-header-inner.is-open .bt-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 900px) {
	/* na šířku, kde se menu vejde, hamburger ani duplicitní CTA nejsou potřeba */
	.bt-nav-toggle { display: none !important; }
	.bt-nav-cta { display: none !important; }
}

.bt-logo-link { display: inline-flex !important; align-items: center; color: var(--bt-cream); }

/* Logo je bílé PNG 492×150 — šířka podle výšky hlavičky, ne naopak */
.bt-logo-svg,
.bt-logo-link img,
.bt-logo-img img {
	width: auto;
	height: 26px;
	display: block;
}

@media (min-width: 768px) {
	.bt-logo-svg,
	.bt-logo-link img,
	.bt-logo-img img { height: 30px; }
}

/* Nav — .brxe-nav-menu má vlastní defaulty, proto explicitní selektory.
   Do 900 px je menu schované za hamburgerem a rozbaluje se jako panel pod
   hlavičkou; nad 900 px je to obyčejná vodorovná řada. */
.bt-nav,
.bt-nav .bricks-nav-menu {
	display: none !important;
	font-family: var(--bt-font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .3px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bt-header-inner.is-open .bt-nav {
	display: flex !important;
	flex-direction: column;
	gap: 0;
	position: absolute;
	top: 100%;
	/* přes celou šířku, ne jen přes obsahový sloupec — panel je zarovnaný
	   k hlavičce, která sedí uvnitř kontejneru s postranním paddingem */
	left: calc(-1 * var(--bt-gutter));
	right: calc(-1 * var(--bt-gutter));
	z-index: 20;
	background: var(--bt-teal-deep);
	padding: 6px var(--bt-gutter) 10px;
	box-shadow: 0 18px 40px rgba(10, 38, 41, .35);
}

.bt-header-inner.is-open .bt-nav > * {
	padding: 13px 4px;
	font-size: 16px;
	border-bottom: 1px solid rgba(250, 248, 245, .12);
}

.bt-header-inner.is-open .bt-nav > *:last-child { border-bottom: none; }

@media (min-width: 900px) {
	.bt-nav,
	.bt-nav .bricks-nav-menu {
		display: flex !important;
		gap: 22px;
		position: static;
		background: none;
		padding: 0;
		box-shadow: none;
	}
	.bt-nav > * { padding: 0; border-bottom: none; font-size: 14px; }
}

.bt-nav a,
.bt-nav .bricks-nav-menu > li > a {
	color: var(--bt-cream) !important;
	opacity: .85;
	text-decoration: none;
	transition: opacity .2s;
	padding: 0;
}

.bt-nav a:hover,
.bt-nav .bricks-nav-menu > li > a:hover { opacity: 1; }



/* ==========================================================================
   HERO — úsvit: gradient z noci do teplé bílé
   ========================================================================== */

.bt-hero,
.brxe-section.bt-hero {
	position: relative;
	color: var(--bt-cream);
	background: linear-gradient(
		225deg,
		var(--bt-dawn-end) 0%,
		#e8eef0 8%,
		#b8d6da 22%,
		var(--bt-dawn-light) 42%,
		var(--bt-dawn-mid) 64%,
		#11434a 86%,
		var(--bt-dawn-deep) 100%
	) !important;
	/* clip-path místo overflow:hidden — kruh s fotkou smí přesahovat dolů */
	overflow: visible !important;
	clip-path: inset(0 0 -300px 0);
	z-index: 5;
}

/* Slunce za obzorem — bloom v pravém horním rohu */
.bt-hero::before {
	content: '';
	position: absolute;
	top: -25%;
	right: -20%;
	width: 90%;
	aspect-ratio: 1;
	background: radial-gradient(
		circle,
		rgba(255, 253, 248, .75) 0%,
		rgba(250, 248, 245, .4) 25%,
		rgba(250, 248, 245, .15) 50%,
		transparent 70%
	);
	pointer-events: none;
	z-index: 1;
}

.bt-hero-grid {
	display: grid !important;
	grid-template-columns: 1fr;
	min-height: 360px;
	position: relative;
	z-index: 2;
}

@media (min-width: 768px) {
	.bt-hero-grid { grid-template-columns: 1.05fr 1fr; min-height: 380px; }
}

@media (min-width: 1100px) {
	.bt-hero-grid { min-height: 410px; }
}

.bt-hero-text {
	display: flex !important;
	flex-direction: column;
	/* Obsah drží pohromadě a stojí ve svislém středu. `space-between` roztahoval
	   nadpis a CTA do krajů a uprostřed zůstala prázdná díra přes půl obrazovky. */
	justify-content: center;
	gap: 24px;
	padding: 28px 0 34px;
	position: relative;
	z-index: 3;
}

@media (min-width: 768px) {
	.bt-hero-text { padding: 34px 48px 40px 0; }
}

.bt-hero-h1 { margin-bottom: 26px; }

.bt-hero-sub {
	font-size: 18px;
	line-height: 1.6;
	opacity: .9;
	max-width: 440px;
	margin-bottom: 0;
	color: var(--bt-cream);
}

@media (min-width: 768px) {
	.bt-hero-sub { font-size: 19px; }
}

.bt-hero-cta-row {
	display: flex !important;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}

.bt-hero-cta-meta { font-size: 14px; opacity: .82; color: var(--bt-cream); }

/* Foto — kruh stojí na hraně hero a přesahuje do další sekce */
.bt-hero-photo {
	position: relative;
	/* Na mobilu jen tolik, kolik zabere kruh — vyšší blok nechával mezi CTA
	   a fotkou ~250 px prázdna (naměřeno 2026-09-12). */
	min-height: 165px;
	margin: 0 calc(-1 * var(--bt-gutter));
	overflow: visible;
	display: flex !important;
	align-items: flex-end;
	justify-content: flex-end;
	z-index: 2;
}

@media (min-width: 768px) {
	.bt-hero-photo {
		min-height: auto;
		margin: -56px calc(-1 * var(--bt-gutter-lg)) 0 0;
	}
}

.bt-hero-photo-circle {
	position: relative;
	z-index: 4;
	width: clamp(210px, 26vw, 330px);
	aspect-ratio: 1;
	border-radius: var(--bt-radius-circle);
	overflow: hidden;
	flex-shrink: 0;
	margin-right: clamp(-30px, -2vw, -70px);
	/* Kruh smí pod hero zasahovat jen lehce — při 32 % překrýval text
	   následující sekce (Libor, 2026-09-12). */
	transform: translateY(15%);
	box-shadow:
		0 0 0 1px rgba(250, 248, 245, .18),
		0 12px 40px rgba(10, 38, 41, .35);
}

@media (min-width: 768px) {
	.bt-hero-photo-circle { margin-right: clamp(-40px, -3vw, -90px); }
}

.bt-hero-photo-img,
.bt-hero-photo-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	filter: grayscale(1) contrast(1.05) brightness(.96);
	/* Zrcadlově — v originále se Monika dívá doprava, tedy ven z obrazovky.
	   Překlopená se dívá do stránky, k textu. */
	transform: scaleX(-1);
}

/* ==========================================================================
   TLAČÍTKA
   ========================================================================== */

.bt-btn,
.brxe-button.bt-btn,
a.bt-btn {
	display: inline-block;
	font-family: var(--bt-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .2px;
	line-height: 1.4;
	padding: 16px 30px;
	border: none;
	border-radius: var(--bt-radius);
	cursor: pointer;
	text-decoration: none;
	transition: background .2s, transform .2s, color .2s;
}

/* Světlé tlačítko na tmavém podkladu (hero) */
.bt-btn--primary,
.brxe-button.bt-btn--primary,
a.bt-btn--primary {
	background: var(--bt-cream) !important;
	color: var(--bt-teal) !important;
}

.bt-btn--primary:hover {
	background: var(--bt-cream-light) !important;
	transform: translateY(-1px);
}

/* Teal tlačítko na cream podkladu (termíny) */
.bt-btn--cta,
.brxe-button.bt-btn--cta,
a.bt-btn--cta {
	background: var(--bt-teal) !important;
	color: var(--bt-cream) !important;
	padding: 16px 32px;
}

.bt-btn--cta:hover { background: var(--bt-slate-deep) !important; }

/* ==========================================================================
   SEKCE — CREAM (základní plocha obsahu)
   ========================================================================== */

.bt-section--cream,
.brxe-section.bt-section--cream {
	background: var(--bt-cream) !important;
	color: var(--bt-ink);
	padding: var(--bt-section-y) 0;
}

@media (min-width: 768px) {
	.bt-section--cream,
	.brxe-section.bt-section--cream { padding: var(--bt-section-y-lg) 0; }
}

/* Jemná horní linka mezi dvěma cream sekcemi */
.bt-section--divider { border-top: 1px solid var(--bt-cream-border-light); }

/* ==========================================================================
   INTRO + STATISTIKY
   ========================================================================== */

.bt-intro-grid {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

@media (min-width: 768px) {
	.bt-intro-grid { grid-template-columns: 1fr 1.4fr; gap: 48px; }
	/* Text odsazen dolů — nadpis vlevo stojí výš než odstavce vpravo */
	.bt-intro-grid .bt-body { padding-top: 38px; }
}

.bt-stats-row {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 28px;
	padding-top: 26px;
	border-top: 1px solid var(--bt-cream-border);
}

@media (min-width: 768px) {
	.bt-stats-row {
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
		margin-top: 40px;
	}
	.bt-stats-row > * + * {
		border-left: 1px solid var(--bt-cream-border);
		padding-left: 24px;
	}
	.bt-stats-row > *:not(:last-child) { padding-right: 24px; }
}

.bt-stat-num {
	font-family: var(--bt-font-display);
	font-size: var(--bt-stat);
	font-weight: 500;
	color: var(--bt-teal) !important;
	line-height: 1;
}

.bt-stat-label {
	font-size: 11px;
	color: var(--bt-muted) !important;
	margin-top: 8px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	line-height: 1.4;
}

/* ==========================================================================
   BANNER — tmavý moment uvnitř cream sekce (citace + B&W foto)
   ========================================================================== */

.bt-banner {
	display: grid !important;
	grid-template-columns: 1fr;
	min-height: 280px;
	box-shadow: 0 0 0 1px rgba(26, 26, 26, .08);
	margin-top: 28px;
}

@media (min-width: 768px) {
	.bt-banner { grid-template-columns: 1.1fr 1fr; margin-top: 32px; }
	/* Hope banner má foto vlevo, text vpravo (mobil drží text první) */
	.bt-banner--flipped { grid-template-columns: 1fr 1.1fr; }
	.bt-banner--flipped .bt-banner-text { order: 2; }
	.bt-banner--flipped .bt-banner-photo { order: 1; }
}

.bt-banner-text {
	background: var(--bt-teal-deep);   /* pain banner — hlubší tón */
	color: var(--bt-cream);
	padding: 32px 28px 28px;
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	min-height: 280px;
}

@media (min-width: 768px) {
	.bt-banner-text { padding: 36px 32px 32px; }
}

/* Hope banner — brand teal (světlejší než pain) */
.bt-banner--hope .bt-banner-text { background: var(--bt-teal); }

.bt-banner-h3 { margin-bottom: 14px; }

.bt-banner-sub {
	font-size: 16px;
	line-height: 1.6;
	opacity: .85;
	max-width: 320px;
	color: var(--bt-cream);
}

.bt-banner-photo {
	background: var(--bt-black);
	position: relative;
	min-height: 240px;
	overflow: hidden;
}

.bt-banner-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);   /* bannerové portréty jsou záměrně černobílé */
}

/* ==========================================================================
   PROCES 01 / 02 / 03
   ========================================================================== */

.bt-proces-grid {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 768px) {
	.bt-proces-grid { grid-template-columns: repeat(3, 1fr); gap: 36px; }
}

.bt-proces-num {
	font-family: var(--bt-font-display);
	font-size: var(--bt-num);
	line-height: 1;
	color: var(--bt-teal) !important;
	font-weight: 500;
	margin-bottom: 8px;
}

.bt-proces-title {
	font-family: var(--bt-font-display);
	font-size: 21px;
	font-weight: 500;
	color: var(--bt-ink) !important;
	margin-bottom: 8px;
}

.bt-proces-body {
	font-size: var(--bt-small);
	line-height: 1.65;
	color: var(--bt-muted) !important;
}

/* Nadpis sekce s odstupem od mřížky */
.bt-section-head { margin-bottom: 28px; }
.bt-section-head .bt-eyebrow { margin-bottom: 14px; }

@media (min-width: 768px) {
	.bt-section-head--lg { margin-bottom: 32px; }
}

/* ==========================================================================
   FOTKY Z PROCESU — asymetrická mřížka (1 velká + 2 malé)
   ========================================================================== */

/* Mobil: obyčejný blok, dlaždice pod sebou.
   Ani grid, ani flex tu nefungovaly — rozpěrka s procentním padding-top uvnitř
   flex/grid itemu je cyklická závislost, takže rodič počítal výšku dlaždic jako
   nulovou a obsah přetékal přes sekci (32 px místo 820 px, naměřeno 2026-09-12).
   V bloku je šířka známá předem a poměr 4:3 vyjde přesně. */
.bt-photos-grid {
	display: block !important;
}

.bt-photos-grid > * + * { margin-top: 16px; }

@media (min-width: 768px) {
	.bt-photos-grid {
		display: grid !important;
		grid-template-columns: 1.5fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 16px;
		height: 580px;
	}
	.bt-photos-grid > * + * { margin-top: 0; }
	.bt-photo-tile--1 { grid-row: 1 / 3; }
	.bt-photo-tile--2 { grid-row: 1; }
	.bt-photo-tile--3 { grid-row: 2; }
}

/* Poměr stran drží DLAŽDICE (jako v mockupu), obsah ji vyplní výškou.
   Obsah přitom musí zůstat v toku — absolutně pozicovaný placeholder srazil
   řádek mřížky na 0 px, druhý poměr stran na samotném obsahu na 181 px
   (obojí naměřeno 2026-09-12, správně je 262 px). */
/* Mobil: poměr 4:3 drží rozpěrka ::before (padding-top 75 %), ne `aspect-ratio`.
   Aspect-ratio tu Chrome počítal nespolehlivě — dlaždice vycházela 181 px místo
   262 px v gridu i ve flexu, bez ohledu na flex-shrink (naměřeno 2026-09-12).
   Padding-top je deterministický: procento se počítá ze šířky rodiče. */
.bt-photo-tile {
	position: relative;
	overflow: hidden;
	flex: 0 0 auto;
}

.bt-photo-tile::before {
	content: '';
	display: block;
	padding-top: 75%;   /* 4:3 */
}

@media (min-width: 768px) {
	/* Desktop: výšku dává grid-template-rows, rozpěrka by ji rozbila. */
	.bt-photo-tile::before { display: none; }
}

.bt-photo-tile img,
.bt-photo-tile .bt-ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bt-photo-caption {
	position: absolute;
	bottom: 14px;
	left: 16px;
	right: 16px;
	width: fit-content;
	font-family: var(--bt-font-display);
	font-size: 14px;
	font-style: italic;
	color: var(--bt-cream) !important;
	background: rgba(5, 5, 5, .55);
	padding: 4px 10px;
}

/* ==========================================================================
   DECH — atmosférický teal předěl
   ========================================================================== */

.bt-section--dech,
.brxe-section.bt-section--dech {
	background: var(--bt-teal-deep) !important;
	color: var(--bt-cream);
	padding: var(--bt-section-y) 0;
	position: relative;
	overflow: hidden;
	text-align: center;
}

@media (min-width: 768px) {
	.bt-section--dech,
	.brxe-section.bt-section--dech { padding: 64px 0; }
}

.bt-dech-mark {
	font-size: 11px;
	letter-spacing: 3px;
	opacity: .55;
	margin-bottom: 16px;
	color: var(--bt-cream) !important;
}

.bt-dech-quote {
	font-family: var(--bt-font-display);
	font-size: var(--bt-quote-sm);
	line-height: 1.35;
	font-style: italic;
	font-weight: 400;
	max-width: 560px;
	margin: 0 auto;
	color: var(--bt-cream) !important;
}

/* ==========================================================================
   VIDEO REFERENCE — 3 karty
   ========================================================================== */

.bt-video-grid {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 28px;
}

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

.bt-video-card { display: flex !important; flex-direction: column; }

a.bt-video-thumb { text-decoration: none; display: block; }

.bt-video-thumb {
	position: relative;
	aspect-ratio: 16/9;
	background: var(--bt-ink);
	overflow: hidden;
	cursor: pointer;
	transition: opacity .2s;
}

.bt-video-thumb:hover { opacity: .92; }

.bt-video-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bt-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	border-radius: var(--bt-radius-circle);
	background: rgba(248, 235, 213, .95);
	color: var(--bt-teal);
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	pointer-events: none;
	transition: transform .2s;
}

.bt-video-thumb:hover .bt-video-play { transform: translate(-50%, -50%) scale(1.08); }

.bt-video-duration {
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	color: var(--bt-cream);
	background: rgba(5, 5, 5, .75);
	padding: 3px 7px;
	border-radius: var(--bt-radius-chip);
}

.bt-video-meta {
	display: flex !important;
	justify-content: space-between;
	align-items: baseline;
	padding: 16px 0 10px;
	gap: 12px;
}

.bt-video-name {
	font-family: var(--bt-font-display);
	font-size: 19px;
	font-weight: 500;
	color: var(--bt-ink) !important;
}

.bt-video-context { font-size: var(--bt-xs); color: var(--bt-muted-2) !important; }

.bt-video-quote {
	font-family: var(--bt-font-display);
	font-size: 16px;
	line-height: 1.55;
	font-style: italic;
	color: var(--bt-body) !important;
	border-left: 2px solid var(--bt-teal);
	padding-left: 14px;
}

.bt-video-link {
	margin-top: 12px;
	font-family: var(--bt-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .2px;
	color: var(--bt-teal) !important;
}

.bt-video-link a { color: var(--bt-teal) !important; text-decoration: none; }
.bt-video-link:hover { color: var(--bt-slate-deep) !important; }

/* Textová varianta karty — zatím bez videa. Drží stejnou mřížku, ale místo
   náhledu nese delší citaci, tak dostane vzdušnější plochu a odsazení shora,
   aby řádek karet opticky začínal ve stejné výšce jako video náhled. */
.bt-video-card--text {
	background: var(--bt-cream-light);
	box-shadow: inset 0 0 0 1px var(--bt-cream-border);
	padding: 24px 22px 26px;
}

.bt-video-card--text .bt-video-meta { padding-top: 0; }

.bt-video-card--text .bt-video-quote {
	font-size: 15px;
	line-height: 1.6;
	border-left-width: 2px;
}

/* Sekce videa navazuje přímo na fotky — bez horního paddingu */
.bt-section--flush-top,
.brxe-section.bt-section--flush-top { padding-top: 0 !important; }

/* ==========================================================================
   MONIKA — kdo tě tím provede
   ========================================================================== */

.bt-monika-grid {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}

@media (min-width: 768px) {
	.bt-monika-grid { grid-template-columns: .7fr 1fr; gap: 44px; }
}

.bt-monika-photo {
	aspect-ratio: 3/4;
	background: var(--bt-ink);
	position: relative;
	max-width: 360px;
	margin: 0 auto;
	overflow: hidden;
}

@media (min-width: 768px) {
	.bt-monika-photo { max-width: none; margin: 0; }
}

.bt-monika-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	filter: contrast(1.02) brightness(.98);
}

@media (min-width: 768px) {
	.bt-monika-text {
		border-left: 2px solid var(--bt-slate);
		padding-left: 28px;
	}
}

.bt-monika-name {
	font-family: var(--bt-font-display);
	font-size: var(--bt-name);
	line-height: 1.1;
	font-weight: 500;
	color: var(--bt-ink) !important;
	margin-bottom: 14px;
}

.bt-monika-bio {
	font-size: 16px;
	line-height: 1.7;
	color: var(--bt-body) !important;
	margin-bottom: 18px;
}

.bt-monika-quote {
	font-family: var(--bt-font-display);
	font-size: clamp(17px, 2vw, 21px);
	line-height: 1.45;
	color: var(--bt-slate) !important;
	font-style: italic;
}

/* ==========================================================================
   TEXTOVÁ REFERENCE — teal moment
   ========================================================================== */

.bt-section--reference,
.brxe-section.bt-section--reference {
	background: var(--bt-teal) !important;
	color: var(--bt-cream);
	padding: var(--bt-section-y) 0;
	position: relative;
	overflow: hidden;
}

@media (min-width: 768px) {
	.bt-section--reference,
	.brxe-section.bt-section--reference { padding: var(--bt-section-y-lg) 0; }
}

.bt-reference-eyebrow { opacity: .6; margin-bottom: 22px; }

.bt-reference-quote {
	font-family: var(--bt-font-display);
	font-size: var(--bt-quote);
	line-height: 1.32;
	font-style: italic;
	font-weight: 400;
	max-width: 720px;
	margin-bottom: 28px;
	color: var(--bt-cream) !important;
}

.bt-reference-attrib {
	display: flex !important;
	align-items: center;
	gap: 14px;
}

.bt-reference-avatar {
	width: 38px;
	height: 38px;
	border-radius: var(--bt-radius-circle);
	background: var(--bt-black);
	flex-shrink: 0;
	overflow: hidden;
}

.bt-reference-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bt-reference-name { font-size: 15px; font-weight: 500; color: var(--bt-cream) !important; }
.bt-reference-context { font-size: var(--bt-xs); opacity: .7; color: var(--bt-cream) !important; }

/* ==========================================================================
   TERMÍNY + CENA
   ========================================================================== */

.bt-terms-card {
	background: var(--bt-cream-light);
	border: 1px solid var(--bt-cream-border);
	border-left: 4px solid var(--bt-slate);
	padding: 28px 24px;
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 28px;
}

@media (min-width: 768px) {
	.bt-terms-card {
		grid-template-columns: 1.2fr 1fr;
		padding: 36px 40px;
		gap: 36px;
		align-items: center;
	}
}

.bt-terms-list {
	display: flex !important;
	flex-direction: column;
	gap: 10px;
}

.bt-term-row {
	display: flex !important;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bt-cream-border-light);
	gap: 16px;
}

.bt-term-row:last-child { border-bottom: none; padding-bottom: 0; }

.bt-term-date {
	font-family: var(--bt-font-display);
	font-size: 19px;
	font-weight: 500;
	color: var(--bt-ink) !important;
}

.bt-term-place { font-size: 13px; color: var(--bt-muted) !important; }

@media (min-width: 768px) {
	.bt-price-block {
		border-left: 1px solid var(--bt-cream-border-light);
		padding-left: 32px;
	}
}

.bt-price-num {
	font-family: var(--bt-font-display);
	font-size: var(--bt-price);
	font-weight: 500;
	color: var(--bt-ink) !important;
	line-height: 1;
	margin-bottom: 4px;
}

.bt-price-extra {
	font-size: 13px;
	color: var(--bt-muted) !important;
	margin-bottom: 20px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.bt-section--footer,
.brxe-section.bt-section--footer {
	background: var(--bt-teal-darker) !important;
	color: var(--bt-cream);
	padding: 28px 0;
	font-size: 14px;
}

.bt-footer-inner {
	display: flex !important;
	flex-direction: column;
	gap: 16px;
	justify-content: space-between;
	align-items: flex-start;
}

@media (min-width: 768px) {
	.bt-footer-inner { flex-direction: row; align-items: center; }
}

.bt-footer-contact { opacity: .85; color: var(--bt-cream) !important; }
.bt-footer-contact a { color: var(--bt-cream) !important; text-decoration: none; }
.bt-footer-contact a:hover { text-decoration: underline; }

.bt-footer-copy {
	opacity: .55;
	font-size: 12px;
	margin-top: 4px;
	color: var(--bt-cream) !important;
}

.bt-footer-we { text-align: left; opacity: .7; }

@media (min-width: 768px) {
	.bt-footer-we { text-align: right; }
}

.bt-footer-we-label {
	font-size: 10px;
	letter-spacing: 1.5px;
	margin-bottom: 4px;
	text-transform: uppercase;
	color: var(--bt-cream) !important;
}

.bt-footer-we-name {
	font-family: var(--bt-font-display);
	font-style: italic;
	font-size: 17px;
	color: var(--bt-cream) !important;
}

/* Právní odkazy v patičce — povinné (obchodní podmínky, GDPR, souhlas) */
.bt-footer-legal {
	display: flex !important;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 12px;
	opacity: .6;
	margin-top: 6px;
}

.bt-footer-legal a { color: var(--bt-cream) !important; text-decoration: none; }
.bt-footer-legal a:hover { text-decoration: underline; }

/* ==========================================================================
   LAZY-LOAD FIX
   `bricks-lazy-hidden` stripuje pozadí → tmavé sekce musí barvu držet
   i před doloadováním (docs/BRICKS_PATTERNS.md §3)
   ========================================================================== */

.bt-section--header.bricks-lazy-hidden { background: var(--bt-teal) !important; }
.bt-section--dech.bricks-lazy-hidden { background: var(--bt-teal-deep) !important; }
.bt-section--reference.bricks-lazy-hidden { background: var(--bt-teal) !important; }
.bt-section--footer.bricks-lazy-hidden { background: var(--bt-teal-darker) !important; }
.bt-section--cream.bricks-lazy-hidden { background: var(--bt-cream) !important; }
.bt-banner-text.bricks-lazy-hidden { background: var(--bt-teal-deep) !important; }
.bt-banner--hope .bt-banner-text.bricks-lazy-hidden { background: var(--bt-teal) !important; }
.bt-hero.bricks-lazy-hidden {
	background: linear-gradient(
		225deg,
		var(--bt-dawn-end) 0%, #e8eef0 8%, #b8d6da 22%,
		var(--bt-dawn-light) 42%, var(--bt-dawn-mid) 64%,
		#11434a 86%, var(--bt-dawn-deep) 100%
	) !important;
}

/* ==========================================================================
   EDITOR — v Bricks builderu vypnout transformace, které brání klikání
   ========================================================================== */

body.bricks-is-frontend .bt-hero-photo-circle { /* frontend beze změny */ }

.bricks-builder-iframe .bt-hero-photo-circle,
body:not(.bricks-is-frontend) .bt-hero-photo-circle { transform: none; }

/* ==========================================================================
   PLACEHOLDERY — dokud nejsou dodané fotky
   Záměrně vypadají jako placeholder (šrafovaný rám + popisek), aby bylo
   na první pohled vidět, co ještě chybí. Po dodání fotek zmizí.
   ========================================================================== */

.bt-ph {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	background:
		repeating-linear-gradient(
			45deg,
			rgba(31, 111, 120, .07) 0 10px,
			rgba(31, 111, 120, .02) 10px 20px
		),
		var(--bt-cream-border-light);
	box-shadow: inset 0 0 0 1px var(--bt-cream-border);
	overflow: hidden;
}

.bt-ph--16-9 { aspect-ratio: 16/9; }
.bt-ph--4-3  { aspect-ratio: 4/3; }
.bt-ph--3-4  { aspect-ratio: 3/4; }
.bt-ph--1-1  { aspect-ratio: 1/1; }

.bt-ph__label {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--bt-muted) !important;
	text-align: center;
	padding: 8px 12px;
	max-width: 90%;
}

/* Placeholder na tmavém podkladu (banner, hero kruh, video náhled) */
.bt-ph--dark {
	background:
		repeating-linear-gradient(
			45deg,
			rgba(250, 248, 245, .06) 0 10px,
			rgba(250, 248, 245, .02) 10px 20px
		),
		linear-gradient(135deg, #2a2a2a 0%, var(--bt-ink) 100%);
	box-shadow: inset 0 0 0 1px rgba(250, 248, 245, .12);
}

.bt-ph--dark .bt-ph__label { color: var(--bt-muted-2) !important; }

/* Placeholder uvnitř kruhu (hero) a v bannerech vyplní celou plochu.
   Rodič tam má vlastní výšku (kruh, banner, poměr stran), takže absolutní
   pozicování nic nerozbije. */
.bt-hero-photo-circle .bt-ph,
.bt-banner-photo .bt-ph,
.bt-monika-photo .bt-ph,
.bt-video-thumb .bt-ph {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	height: 100%;
}

/* Dlaždice fotek jsou grid items. Na mobilu se výška řádku počítá z obsahu —
   absolutně pozicovaný placeholder žádný obsah netvoří, takže řádek spadne na
   0 px a mřížka se zhroutí (naměřeno 2026-09-12: sekce 265 px místo 1055 px).
   Proto tu placeholder zůstává v toku a nese poměr stran sám. */


/* ==========================================================================
   PODSTRÁNKY — obsahové stránky (o metodě, kurz, FAQ, reference…)
   Landing page má vlastní kompozici, tohle je čtecí šablona.
   ========================================================================== */

/* Hlavička stránky — užší varianta hero gradientu */
.bt-page-hero,
.brxe-section.bt-page-hero {
	background: linear-gradient(
		225deg,
		var(--bt-dawn-end) 0%,
		#cfe0e3 14%,
		var(--bt-dawn-light) 44%,
		var(--bt-dawn-mid) 72%,
		var(--bt-dawn-deep) 100%
	) !important;
	color: var(--bt-cream);
	padding: 38px 0 42px;
	position: relative;
	overflow: hidden;
}

@media (min-width: 768px) {
	.bt-page-hero,
	.brxe-section.bt-page-hero { padding: 52px 0 56px; }
}

.bt-page-hero.bricks-lazy-hidden {
	background: linear-gradient(
		225deg, var(--bt-dawn-end) 0%, #cfe0e3 14%, var(--bt-dawn-light) 44%,
		var(--bt-dawn-mid) 72%, var(--bt-dawn-deep) 100%) !important;
}

.bt-page-h1,
.brxe-heading.bt-page-h1 {
	max-width: 100%;
	font-family: var(--bt-font-display);
	font-size: clamp(34px, 5vw, 54px);
	line-height: 1.08;
	font-weight: 500;
	letter-spacing: -.6px;
	color: var(--bt-cream) !important;
}

.bt-page-lead {
	font-size: 18px;
	line-height: 1.65;
	color: var(--bt-cream) !important;
	opacity: .92;
	max-width: 100%;
	margin-top: 20px;
}

.bt-page-lead p + p { margin-top: 14px; }

@media (min-width: 768px) {
	.bt-page-lead { font-size: 19px; }
}

/* Drobečky */
.bt-crumbs {
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	opacity: .72;
	margin-bottom: 16px;
	color: var(--bt-cream) !important;
}

.bt-crumbs a { color: var(--bt-cream) !important; text-decoration: none; }
.bt-crumbs a:hover { text-decoration: underline; }

/* Tělo stránky */
.bt-page-body,
.brxe-section.bt-page-body {
	background: var(--bt-cream) !important;
	padding: var(--bt-section-y) 0;
}

@media (min-width: 768px) {
	.bt-page-body,
	.brxe-section.bt-page-body { padding: var(--bt-section-y-lg) 0; }
}

.bt-page-body.bricks-lazy-hidden { background: var(--bt-cream) !important; }

/* Čtecí stránky mají užší, vystředěný kontejner. Dřív byl obsah zarovnaný
   doleva v plné šířce 1136 px a vpravo zbývalo 376 px prázdna, které vypadalo
   jako nedodělaný sloupec (Libor, 2026-09-12). */
.bt-page-hero .bt-container,
.bt-page-body .bt-container,
.bt-page-cta .bt-container {
	max-width: 880px;
}

/* Reference potřebují plnou šířku — jsou to karty ve dvou sloupcích */
.bt-page-body--wide .bt-container { max-width: var(--bt-container); }

.bt-prose { max-width: 100%; }

.bt-prose-h2,
.brxe-heading.bt-prose-h2 {
	font-family: var(--bt-font-display);
	font-size: clamp(24px, 3vw, 30px);
	line-height: 1.22;
	font-weight: 500;
	letter-spacing: -.3px;
	color: var(--bt-ink) !important;
	margin-top: 32px;
	margin-bottom: 12px;
}

/* První nadpis v těle stránky nemá odsazovat od hlavičky — padding sekce stačí.
   Selektor musí sáhnout i do prvního bloku, nadpisy jsou zanořené v .bt-prose-block. */
.bt-prose > .bt-prose-h2:first-child,
.bt-prose > .bt-prose-block:first-child > .bt-prose-h2:first-child { margin-top: 0; }

.bt-prose-p {
	font-size: 17px;
	line-height: 1.75;
	color: var(--bt-body) !important;
}

.bt-prose-p + .bt-prose-p { margin-top: 14px; }

.bt-prose-p a {
	color: var(--bt-teal) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bt-prose-p a:hover { color: var(--bt-slate-deep) !important; }

/* Zvýrazněný blok — text, který má nést váhu (např. „jestli ti bude líp“).
   Není to disclaimer, proto plná velikost písma, ne drobné. */
.bt-prose-block--highlight {
	background: var(--bt-cream-light);
	border-left: 4px solid var(--bt-teal);
	padding: 22px 24px;
	margin-top: 26px;
}

.bt-prose-block--highlight .bt-prose-h2 { margin-top: 0; }

/* Blok čekající na doplnění majitelem — ať je na první pohled vidět */
.bt-prose-block--todo {
	background: repeating-linear-gradient(45deg,
		rgba(31,111,120,.05) 0 10px, rgba(31,111,120,.015) 10px 20px);
	box-shadow: inset 0 0 0 1px var(--bt-cream-border);
	padding: 20px 22px;
	margin-top: 26px;
}

.bt-prose-block--todo .bt-prose-h2 { margin-top: 0; }
.bt-prose-block--todo .bt-prose-p { color: var(--bt-muted) !important; }

/* Citace lektora */
.bt-prose-quote {
	font-family: var(--bt-font-display);
	font-size: clamp(18px, 2.2vw, 22px);
	line-height: 1.45;
	font-style: italic;
	color: var(--bt-slate) !important;
	border-left: 2px solid var(--bt-slate);
	padding-left: 20px;
	margin-top: 18px;
}

/* CTA pás na konci stránky */
.bt-page-cta,
.brxe-section.bt-page-cta {
	background: var(--bt-teal) !important;
	color: var(--bt-cream);
	padding: 32px 0;
}

.bt-page-cta.bricks-lazy-hidden { background: var(--bt-teal) !important; }

@media (min-width: 768px) {
	.bt-page-cta,
	.brxe-section.bt-page-cta { padding: 40px 0; }
}

.bt-cta-row {
	display: flex !important;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

.bt-btn--ghost,
a.bt-btn--ghost {
	background: transparent !important;
	color: var(--bt-cream) !important;
	box-shadow: inset 0 0 0 1px rgba(250, 248, 245, .55);
}

.bt-btn--ghost:hover {
	background: rgba(250, 248, 245, .1) !important;
}

/* ── FAQ ── */
.bt-faq { max-width: 100%; }

.bt-faq-item {
	border-bottom: 1px solid var(--bt-cream-border);
	padding: 22px 0;
}

.bt-faq-item:first-child { padding-top: 0; }

.bt-faq-q,
.brxe-heading.bt-faq-q {
	font-family: var(--bt-font-display);
	font-size: clamp(19px, 2.2vw, 23px);
	line-height: 1.3;
	font-weight: 500;
	color: var(--bt-ink) !important;
	margin-bottom: 10px;
}

.bt-faq-a {
	font-size: 16px;
	line-height: 1.7;
	color: var(--bt-body) !important;
}

.bt-faq-a a {
	color: var(--bt-teal) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Reference ── */
.bt-ref-group { margin-top: 40px; }
.bt-ref-group:first-child { margin-top: 0; }

.bt-ref-group-title,
.brxe-heading.bt-ref-group-title {
	font-family: var(--bt-font-display);
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.25;
	font-weight: 500;
	color: var(--bt-ink) !important;
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bt-cream-border);
}

.bt-ref-grid {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 768px) {
	.bt-ref-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

.bt-ref-card {
	background: var(--bt-cream-light);
	box-shadow: inset 0 0 0 1px var(--bt-cream-border);
	padding: 22px 24px 24px;
}

.bt-ref-quote {
	font-family: var(--bt-font-display);
	font-size: 16px;
	line-height: 1.6;
	font-style: italic;
	color: var(--bt-body) !important;
}

.bt-ref-author {
	font-size: 13px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--bt-teal) !important;
	margin-top: 14px;
}

/* ── Kontaktní karta ── */
.bt-contact-card {
	background: var(--bt-cream-light);
	box-shadow: inset 0 0 0 1px var(--bt-cream-border);
	border-left: 4px solid var(--bt-slate);
	padding: 26px 28px;
	max-width: 100%;
	font-size: 16px;
	line-height: 1.75;
	color: var(--bt-body) !important;
}

.bt-contact-card strong { color: var(--bt-ink); }
.bt-contact-card a { color: var(--bt-teal) !important; text-decoration: none; }
.bt-contact-card a:hover { text-decoration: underline; }

/* Upozornění na pracovní verzi textu (právní stránky před kontrolou advokátky) */
.bt-notice {
	background: rgba(31, 111, 120, .07);
	border-left: 4px solid var(--bt-teal);
	padding: 16px 20px;
	margin-bottom: 28px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--bt-body) !important;
}

/* Stránkování archivu referencí */
.bt-pagination { margin-top: 36px; }

.bt-pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 9px 12px;
	margin-right: 6px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--bt-teal) !important;
	background: var(--bt-cream-light);
	box-shadow: inset 0 0 0 1px var(--bt-cream-border);
	text-decoration: none;
}

.bt-pagination .page-numbers:hover { background: var(--bt-cream-border-light); }

.bt-pagination .page-numbers.current {
	background: var(--bt-teal);
	color: var(--bt-cream) !important;
	box-shadow: none;
}

/* Odkaz na celou skupinu referencí */
.bt-ref-more {
	margin-top: 18px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .2px;
}

.bt-ref-more a { color: var(--bt-teal) !important; text-decoration: none; }
.bt-ref-more a:hover { text-decoration: underline; }

/* ==========================================================================
   PŘIHLÁŠKA — formulář
   Struktura podle nogames.cz, pole podle starého betrue.cz/prihlaska/.
   ========================================================================== */

.bt-form-wrap { max-width: 100%; }

.bt-form {
	background: var(--bt-cream-light);
	box-shadow: inset 0 0 0 1px var(--bt-cream-border);
	padding: 26px 26px 30px;
}

@media (min-width: 768px) {
	.bt-form { padding: 32px 34px 36px; }
}

.bt-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 600px) {
	.bt-field-row { grid-template-columns: 1fr 1fr; gap: 20px; }
}

.bt-field { margin-bottom: 16px; }
.bt-field-row .bt-field { margin-bottom: 0; }

.bt-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--bt-ink);
	margin-bottom: 7px;
}

.bt-req { color: var(--bt-teal); }

.bt-field input,
.bt-field textarea,
.bt-field select {
	width: 100%;
	font-family: var(--bt-font-body);
	font-size: 16px;          /* 16px, aby iOS při psaní nezoomoval */
	line-height: 1.5;
	color: var(--bt-ink);
	background: var(--bt-cream);
	border: 1px solid var(--bt-cream-border);
	border-radius: 0;
	padding: 12px 14px;
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none;
	appearance: none;
}

.bt-field select {
	background-image: linear-gradient(45deg, transparent 50%, var(--bt-teal) 50%),
		linear-gradient(135deg, var(--bt-teal) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

.bt-field textarea { resize: vertical; min-height: 88px; }

.bt-field input:focus,
.bt-field textarea:focus,
.bt-field select:focus {
	outline: none;
	border-color: var(--bt-teal);
	box-shadow: 0 0 0 3px rgba(31, 111, 120, .12);
}

.bt-field input::placeholder,
.bt-field textarea::placeholder { color: var(--bt-muted-2); opacity: .75; }

/* Souhlasy */
.bt-checks { margin: 22px 0 24px; }

.bt-check {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.55;
	color: var(--bt-body);
	margin-bottom: 12px;
	cursor: pointer;
}

.bt-check input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--bt-teal);
}

.bt-check a { color: var(--bt-teal); text-decoration: underline; text-underline-offset: 2px; }

.bt-form button[type="submit"] { width: 100%; cursor: pointer; }

@media (min-width: 600px) {
	.bt-form button[type="submit"] { width: auto; }
}

.bt-form-note {
	margin-top: 14px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--bt-muted);
}

/* Past na roboty — musí zůstat v DOM, jen mimo dohled */
.bt-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Hláška po odeslání */
.bt-form-notice {
	padding: 16px 20px;
	margin-bottom: 22px;
	font-size: 16px;
	line-height: 1.6;
	border-left: 4px solid var(--bt-teal);
	background: rgba(31, 111, 120, .08);
	color: var(--bt-ink);
}

.bt-form-notice--err {
	border-left-color: #a3452f;
	background: rgba(163, 69, 47, .08);
}

.bt-form-notice a { color: var(--bt-teal); }

/* ── Karty termínů (sekce „Vyber si svůj termín") ── */
.bt-term-cards {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 26px;
}

@media (min-width: 700px) {
	.bt-term-cards { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}

.bt-term-card {
	position: relative;
	background: rgba(250, 248, 245, .07);
	box-shadow: inset 0 0 0 1px rgba(250, 248, 245, .18);
	padding: 22px 22px 24px;
}

.bt-term-card--first { box-shadow: inset 0 0 0 2px var(--bt-cream); }

.bt-term-card__badge {
	position: absolute;
	top: -10px;
	left: 20px;
	font-size: 10px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	background: var(--bt-cream);
	color: var(--bt-teal-deep);
	padding: 4px 9px;
}

.bt-term-card__date {
	font-family: var(--bt-font-display);
	font-size: 21px;
	line-height: 1.2;
	color: var(--bt-cream);
	margin-bottom: 6px;
}

.bt-term-card__place { font-size: 14px; color: var(--bt-cream); opacity: .8; }

.bt-term-card__meta {
	font-size: 13px;
	color: var(--bt-cream);
	opacity: .65;
	margin-top: 10px;
}

/* Nadpis nad kartami termínů — v tmavém pásu není kurzíva na místě */
.bt-term-section .bt-dech-quote {
	font-style: normal;
	margin: 8px 0 0;
	text-align: left;
}

.bt-term-section { text-align: left; }

/* FAQ k přihlášení navazuje na formulář, proto menší odstup */
.bt-faq--signup { margin-top: 44px; }
.bt-faq--signup .bt-prose-h2 { margin-top: 0; margin-bottom: 6px; }

/* Fakturační údaje — strukturovaná pole, firemní část se rozbaluje */
.bt-fieldset {
	border: none;
	padding: 0;
	margin: 4px 0 0;
}

.bt-fieldset legend {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--bt-ink);
	padding: 0;
	margin-bottom: 10px;
}

@media (min-width: 600px) {
	.bt-field-row--city { grid-template-columns: 2fr 1fr 1fr; }
}

.bt-toggle { margin: 4px 0 14px; }

.bt-firma-fields {
	padding: 16px 18px 2px;
	margin-bottom: 16px;
	background: var(--bt-cream);
	box-shadow: inset 0 0 0 1px var(--bt-cream-border);
}

.bt-firma-fields[hidden] { display: none !important; }

/* ==========================================================================
   PLATEBNÍ ÚDAJE po odeslání přihlášky (odpověď z n8n / Účta)
   ========================================================================== */

.bt-pay-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	background: var(--bt-cream-light);
	box-shadow: inset 0 0 0 1px var(--bt-cream-border);
	padding: 24px 26px;
	margin-bottom: 20px;
}

@media (min-width: 620px) {
	.bt-pay-grid { grid-template-columns: 1fr auto; align-items: center; }
}

.bt-pay-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid var(--bt-cream-border-light);
	font-size: 15px;
	line-height: 1.5;
}

.bt-pay-row:last-child { border-bottom: none; }
.bt-pay-row span { color: var(--bt-muted); }
.bt-pay-row strong { color: var(--bt-ink); text-align: right; }

.bt-pay-qr { text-align: center; }

.bt-pay-qr img {
	width: 168px;
	height: 168px;
	display: block;
	margin: 0 auto 8px;
	background: var(--bt-cream);
}

.bt-pay-qr span {
	font-size: 12px;
	letter-spacing: .4px;
	color: var(--bt-muted);
}

.bt-pay-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.bt-pay-link {
	font-size: 15px;
	font-weight: 600;
	color: var(--bt-teal) !important;
	text-decoration: none;
}

.bt-pay-link:hover { text-decoration: underline; }

/* Název navazujícího kurzu na kartě termínu (dvojka, vztahy) */
.bt-term-card__kurz {
	font-size: 13px;
	letter-spacing: .4px;
	color: var(--bt-cream);
	opacity: .7;
	margin-top: 4px;
}

/* Není vypsaný žádný termín — na světlém i tmavém podkladu */
.bt-no-terms {
	background: var(--bt-cream-light);
	border-left: 4px solid var(--bt-teal);
	padding: 20px 24px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--bt-body);
}

.bt-no-terms strong { color: var(--bt-ink); }
.bt-no-terms a { color: var(--bt-teal); text-decoration: underline; text-underline-offset: 3px; }

.bt-no-terms--dark {
	background: rgba(250, 248, 245, .07);
	border-left-color: var(--bt-cream);
	color: var(--bt-cream);
	margin-top: 22px;
}

.bt-no-terms--dark strong,
.bt-no-terms--dark a { color: var(--bt-cream); }

/* ==========================================================================
   MEDAILONKY LIDÍ na /o-nas/ — kulatá fotka vedle jména
   ========================================================================== */

.bt-person { margin-top: 40px; }
.bt-prose > .bt-prose-block:first-child.bt-person { margin-top: 0; }

.bt-person__head {
	display: flex !important;
	align-items: center;
	gap: 18px;
	margin-bottom: 14px;
}

.bt-person__foto {
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	border-radius: var(--bt-radius-circle);
	overflow: hidden;
	background: var(--bt-cream-border-light);
	box-shadow: 0 0 0 1px var(--bt-cream-border);
}

@media (min-width: 600px) {
	.bt-person__foto { width: 104px; height: 104px; }
}

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

/* uvnitř medailonku nemá nadpis držet vlastní horní odsazení */
.bt-person__jmeno,
.brxe-heading.bt-person__jmeno { margin-top: 0 !important; margin-bottom: 0; }

/* ==========================================================================
   TABULKA v právním textu (přehled zpracovávaných údajů)
   Bricks nemá tabulkový element, skládá se z divů — na mobilu se řádek rozpadá
   pod sebe a před každou hodnotou se vypíše název sloupce.
   ========================================================================== */

.bt-table {
	margin-top: 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--bt-body);
}

.bt-table__head { display: none !important; }

.bt-table__row {
	display: block !important;
	background: var(--bt-cream-light);
	box-shadow: inset 0 0 0 1px var(--bt-cream-border);
	padding: 14px 16px;
	margin-bottom: 10px;
}

.bt-table__cell { display: block; padding: 5px 0; }

.bt-table__row .bt-table__cell::before {
	content: attr(data-label);
	display: block;
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--bt-teal);
	margin-bottom: 2px;
}

@media (min-width: 880px) {
	.bt-table__head,
	.bt-table__row {
		display: grid !important;
		grid-template-columns: 1.15fr 1.1fr 1.2fr 1fr;
		gap: 18px;
		padding: 12px 4px;
		margin-bottom: 0;
		background: none;
		box-shadow: none;
		border-bottom: 1px solid var(--bt-cream-border-light);
	}
	.bt-table__head {
		font-size: 11px;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: var(--bt-teal);
		border-bottom-color: var(--bt-cream-border);
	}
	.bt-table__row .bt-table__cell::before { display: none; }
	.bt-table__cell { padding: 0; }
}