/* ==========================================================================
   Czechin — Design System
   centrumczechin.cz · vytvořeno 2026-09-09 · odvozeno z mockupu

   ZDROJ HODNOT: https://pure-gorgeous-flow-state.base44.app
   Všechny hodnoty níže jsou MĚŘENÉ (Playwright computed CSS, viewport 1440×960),
   ne odhadnuté. Postup dle docs/… „measurement first".

   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í → `.moje-trida.bricks-lazy-hidden { background: ... !important }`
   - Před novou třídou zkontroluj, jestli už site-wide alternativa neexistuje
   - ⚠️ Bricks nastavuje `html { font-size: 10px }` (technika 62.5 %) → **1rem = 10px**,
     ne 16px. Proto se tu pro rozměry používá px, ne rem. Ověřeno 2026-09-09.
   ========================================================================== */

:root {
	/* ── Barvy ── (měřeno z mockupu) */
	--cz-red: #b30c0c;            /* primární akcent: CTA, eyebrow, čísla, highlight v H1 */
	--cz-red-hover: #8f0a0a;      /* odvozeno (−20 % světlosti), v mockupu neměřitelné */
	--cz-ink: #1a1a1a;            /* nadpisy, hlavní text, tmavý chip */
	--cz-body: #4a4a4a;           /* odstavce, lead */
	--cz-muted: #6b6b6b;          /* popisky, meta, sekundární text */
	--cz-bg: #f9f7f4;             /* základní plocha stránky (teplá bílá) */
	--cz-band: #f3efe8;           /* střídavý pás sekce (postup, o nás, novinky) */
	--cz-surface: #ffffff;        /* karty */
	--cz-surface-soft: rgba(255, 255, 255, .6); /* poloprůhledný panel (statistiky) */
	--cz-border: #e7e1d8;         /* rámeček karet a panelů */
	--cz-border-soft: #eee8df;    /* rámeček plovoucí karty nad obrázkem */

	/* ── Typografie ── */
	--cz-font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
	--cz-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--cz-h1: 72px;                /* ls −1.8px */
	--cz-h2: 48px;                /* ls −1.2px */
	--cz-h3: 24px;
	--cz-h4: 20px;
	--cz-stat: 36px;              /* číslo ve statistice, Fraunces 600, červená */
	--cz-lead: 18px;              /* lh 1.625 */
	--cz-base: 16px;              /* lh 1.5 */
	--cz-small: 14px;
	--cz-eyebrow: 12px;           /* uppercase, ls .2em, w500, červená */

	/* ── Rytmus a plocha ── */
	--cz-container: 1280px;       /* max-w-7xl */
	--cz-gutter: 24px;            /* px-6 */
	--cz-section-y: 80px;         /* py-20 (desktop); mobil 56px, viz @media */
	--cz-hero-top: 160px;         /* pt-40 — kvůli fixed hlavičce */
	--cz-hero-bottom: 96px;
	--cz-grid-gap: 24px;
	--cz-grid-gap-lg: 64px;       /* hero split */

	/* ── Rádiusy a stíny ── */
	--cz-radius-card: 16px;       /* rounded-2xl */
	--cz-radius-panel: 24px;      /* rounded-3xl */
	--cz-radius-pill: 9999px;     /* tlačítka, chipy, přepínač jazyka */
	--cz-radius-input: 6px;       /* formulářová pole a odesílací tlačítko */
	--cz-shadow-float: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

/* ==========================================================================
   Základ
   ========================================================================== */

body.czechin {
	font-family: var(--cz-font-body);
	font-size: var(--cz-base);
	line-height: 1.5;
	color: var(--cz-ink);
	background: var(--cz-bg);
	-webkit-font-smoothing: antialiased;
}

body.czechin h1,
body.czechin h2,
body.czechin h3,
body.czechin h4,
body.czechin h5,
body.czechin h6 {
	font-family: var(--cz-font-display);
	font-weight: 600;
	color: var(--cz-ink);
	line-height: 1.1;
}

body.czechin h1 { font-size: var(--cz-h1); letter-spacing: -.025em; }
body.czechin h2 { font-size: var(--cz-h2); letter-spacing: -.025em; }
body.czechin h3 { font-size: var(--cz-h3); letter-spacing: normal; }
body.czechin h4 { font-size: var(--cz-h4); letter-spacing: normal; }

body.czechin p { color: var(--cz-body); }

body.czechin a { color: inherit; text-decoration: none; }

/* ==========================================================================
   Layout — kontejner a sekce
   ========================================================================== */

.cz-container {
	max-width: var(--cz-container);
	margin-inline: auto;
	padding-inline: var(--cz-gutter);
	width: 100%;

	/* Bricks dává `.brxe-block` `display:flex; flex-direction:column;
	   align-items:flex-start` → potomci se scvrknou na šířku obsahu místo aby
	   vyplnili kontejner. Bez tohohle jsou mřížky i pruhy užší, než mají být.
	   Ověřeno 2026-09-09 (mřížka 987px místo 1232px). */
	align-items: stretch !important;
}

.cz-section { align-items: stretch !important; }

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

/* Pás s teplým pozadím. Lazy-load Bricks stripuje background → nutný duplikát. */
.cz-section--band,
.cz-section--band.bricks-lazy-hidden { background: var(--cz-band) !important; }

.cz-section--hero {
	padding-top: var(--cz-hero-top);
	padding-bottom: var(--cz-hero-bottom);
}

/* ==========================================================================
   Typografické komponenty
   ========================================================================== */

/* Malý červený nadtitulek nad H2 — „COURSE OFFERINGS", „O NÁS" … */
.cz-eyebrow {
	font-family: var(--cz-font-body);
	font-size: var(--cz-eyebrow);
	font-weight: 500;
	line-height: 16px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cz-red) !important;
}

/* Druhý řádek H1 („Czech" / „česky") v červené */
.cz-highlight { color: var(--cz-red) !important; }

.cz-lead {
	font-size: var(--cz-lead);
	line-height: 1.625;
	color: var(--cz-body) !important;
	max-width: 512px;   /* pozor: html má font-size 10px (Bricks 62.5%), rem tu NENÍ 16px */
}

.cz-muted { color: var(--cz-muted) !important; }

/* Číslo ve statistickém pruhu — „od 1997", „A1–C1" */
.cz-stat-number {
	font-family: var(--cz-font-display);
	font-weight: 600;
	font-size: var(--cz-stat);
	line-height: 40px;
	color: var(--cz-red) !important;
}

.cz-stat-label {
	font-size: var(--cz-small);
	color: var(--cz-muted) !important;
}

/* ==========================================================================
   Tlačítka
   ========================================================================== */

.cz-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-family: var(--cz-font-body);
	font-weight: 500;
	border-radius: var(--cz-radius-pill);
	padding: 8px 16px;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}

.cz-btn--primary {
	background: var(--cz-red) !important;
	color: #fff !important;
}
.cz-btn--primary:hover { background: var(--cz-red-hover) !important; }

.cz-btn--secondary {
	background: var(--cz-surface) !important;
	color: var(--cz-ink) !important;
	border: 1px solid var(--cz-border);
}

/* Hero CTA — větší plocha než tlačítka v kartách */
.cz-btn--lg { padding: 14px 24px; font-size: var(--cz-base); }

/* Odesílací tlačítko formuláře — jediné hranaté (radius 6px, ne pilulka) */
.cz-btn--form {
	border-radius: var(--cz-radius-input);
	width: 100%;
	justify-content: center;
	background: var(--cz-red) !important;
	color: #fafafa !important;
}

/* ==========================================================================
   Chipy — filtr kurzů (Vše / Dospělí / Děti / Individuální)
   ========================================================================== */

.cz-chip {
	display: inline-flex !important;
	align-items: center;
	font-size: var(--cz-small);
	font-weight: 500;
	padding: 8px 20px;
	border-radius: var(--cz-radius-pill);
	background: var(--cz-surface) !important;
	color: var(--cz-body) !important;
	border: 1px solid var(--cz-border);
	cursor: pointer;
}

.cz-chip.is-active {
	background: var(--cz-ink) !important;
	color: #fff !important;
	border-color: var(--cz-ink);
}

/* ==========================================================================
   Karty a panely
   ========================================================================== */

.cz-card,
.cz-card.bricks-lazy-hidden {
	background: var(--cz-surface) !important;
	border: 1px solid var(--cz-border);
	border-radius: var(--cz-radius-card);
	padding: 24px;
}

/* Plovoucí citace přes hero obrázek */
.cz-card--float {
	border-color: var(--cz-border-soft);
	padding: 20px;
	box-shadow: var(--cz-shadow-float);
}

/* Panel se statistikami pod hero — poloprůhledný, větší rádius */
.cz-panel,
.cz-panel.bricks-lazy-hidden {
	background: var(--cz-surface-soft) !important;
	border: 1px solid var(--cz-border);
	border-radius: var(--cz-radius-panel);
}

/* Mřížka karet */
.cz-grid { display: grid !important; gap: var(--cz-grid-gap); }
.cz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Hero split 2/1 s velkou mezerou */
.cz-split {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cz-grid-gap-lg);
	align-items: center;
}

/* ==========================================================================
   Formulář
   ========================================================================== */

.cz-input,
.cz-textarea {
	width: 100%;
	font-family: var(--cz-font-body);
	font-size: var(--cz-small);
	line-height: 20px;
	color: var(--cz-ink);
	background: transparent;
	border: 1px solid #e5e5e5;
	border-radius: var(--cz-radius-input);
	padding: 8px 12px;
}

.cz-input:focus,
.cz-textarea:focus { outline: 2px solid var(--cz-red); outline-offset: 1px; }

.cz-label {
	display: block;
	font-size: var(--cz-small);
	font-weight: 500;
	color: var(--cz-ink);
	margin-bottom: 6px;
}

/* ==========================================================================
   Responsivita — breakpointy dle Bricks (docs/BRICKS_GUIDE.md)
   ========================================================================== */

@media (max-width: 991px) {
	:root {
		--cz-h1: 44px;
		--cz-h2: 34px;
		--cz-h3: 22px;
		--cz-section-y: 56px;
		--cz-hero-top: 112px;
		--cz-hero-bottom: 64px;
		--cz-grid-gap-lg: 40px;
	}

	.cz-split,
	.cz-grid--2,
	.cz-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 478px) {
	:root {
		--cz-h1: 36px;
		--cz-h2: 28px;
	}

	.cz-lead { font-size: var(--cz-base); }
}

/* ==========================================================================
   Komponenty homepage — přidáno při stavbě podle mockupu (2026-09-09)

   Pozn.: Bricks obaluje elementy vlastními třídami (`.brxe-*`, `.bricks-button`),
   které nesou defaultní barvy a display. Proto jsou tu explicitní selektory
   a místy `!important` — viz docs/BRICKS_PATTERNS.md.
   ========================================================================== */

/* ── Placeholder místo obrázku ──
   Záměrně vypadá jako placeholder, ať je na první pohled vidět, co chybí. */
.cz-placeholder,
.cz-placeholder.bricks-lazy-hidden {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	background: repeating-linear-gradient(
		45deg, #efe9e1, #efe9e1 10px, #e9e2d8 10px, #e9e2d8 20px
	) !important;
	border: 1px dashed #cfc5b6;
	border-radius: var(--cz-radius-card);
}

.cz-placeholder__label {
	font-size: var(--cz-small);
	color: #8b8073 !important;
	max-width: 24ch;
	line-height: 1.4;
}

/* Poměry stran — modifikátory (aspect-ratio přes _cssCustom nefunguje) */
.cz-placeholder--16-9 { aspect-ratio: 16 / 9; }
.cz-placeholder--4-3  { aspect-ratio: 4 / 3; }
.cz-placeholder--4-5  { aspect-ratio: 4 / 5; }
.cz-placeholder--1-1  { aspect-ratio: 1 / 1; }

/* ── Sekce ── */
.cz-section--tight { padding-block: 0 var(--cz-section-y); }

.cz-section-head { margin-bottom: 40px; }
.cz-section-head .brxe-heading { margin-top: 8px; }
.cz-lead--wide { max-width: 46ch; margin-top: 12px; }

/* ── Hero ── */
.cz-hero__body { display: flex !important; flex-direction: column; align-items: flex-start; }

.cz-badge {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: var(--cz-radius-pill);
	background: #efe9e1 !important;
	font-size: var(--cz-small);
	color: var(--cz-ink) !important;
}

.cz-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cz-red);
}

.cz-hero__title { margin: 24px 0 0; }
.cz-hero__body .cz-lead { margin-top: 24px; }

.cz-btn-row {
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.cz-hero__media { position: relative; }
.cz-hero__image { border-radius: var(--cz-radius-panel); }

.cz-hero__media .cz-quote {
	position: absolute;
	left: -24px;
	bottom: -28px;
	width: 320px;
	max-width: calc(100% - 24px);
}

/* ── Citace ── */
.cz-quote__mark {
	font-family: var(--cz-font-display);
	font-size: 32px;
	line-height: 1;
	color: var(--cz-red) !important;
	margin-bottom: 12px;
}

.cz-quote__text {
	font-family: var(--cz-font-display);
	font-size: var(--cz-base);
	line-height: 1.5;
	color: var(--cz-ink) !important;
}

.cz-quote__author {
	display: block;
	margin-top: 12px;
	font-size: var(--cz-small);
	color: var(--cz-muted) !important;
}

/* ── Statistiky ── */
.cz-stats {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cz-stat {
	padding: 32px 24px;
	text-align: center;
	border-left: 1px solid var(--cz-border);
}
.cz-stat:first-child { border-left: 0; }

/* ── Karty ── */
.cz-card__label {
	font-size: var(--cz-eyebrow);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cz-red) !important;
	margin-bottom: 10px;
}

.cz-card .brxe-heading { margin: 0 0 10px; }

/* Textový odkaz se šipkou (místo pilulky) */
.cz-link.brxe-button,
.cz-link {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	padding: 0 !important;
	background: transparent !important;
	border: 0;
	border-radius: 0;
	font-size: var(--cz-small);
	font-weight: 500;
	color: var(--cz-ink) !important;
}
.cz-link::after { content: "→"; }
.cz-link:hover { color: var(--cz-red) !important; }

/* ── Kroky přihlášení ── */
.cz-step__number {
	font-family: var(--cz-font-display);
	font-size: var(--cz-stat);
	font-weight: 600;
	line-height: 1;
	color: var(--cz-red) !important;
	margin-bottom: 16px;
}

/* ── Filtr a karty kurzů ── */
.cz-chips {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.cz-course__schedule { margin-bottom: 20px; }

.cz-course__foot {
	display: flex !important;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
}

.cz-course__start {
	font-family: var(--cz-font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--cz-ink) !important;
}

.cz-course__spots {
	font-size: var(--cz-small);
	color: var(--cz-red) !important;
	margin-top: 2px;
}

.cz-course { display: flex !important; flex-direction: column; }

/* ── Pruh „nenašli jste termín" ── */
.cz-empty {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 24px;
	margin-top: 24px;
}

.cz-empty__title { font-size: var(--cz-h4); margin: 0 0 6px; }

/* ── O nás ── */
.cz-onas__body .brxe-text-basic { margin-bottom: 16px; }
.cz-values { margin-top: 32px; }
.cz-value { padding: 20px; }
.cz-value__title { font-size: var(--cz-base); }
.cz-value__text { font-size: var(--cz-small); }

/* ── Novinky ── */
.cz-news { padding: 0 !important; overflow: hidden; }
.cz-news__image { border-radius: 0; border: 0; }
.cz-news__body { padding: 24px; }

/* ── Kontakt ── */
.cz-contacts { margin-top: 32px; }
.cz-info { padding: 20px; }
.cz-info__value { font-family: var(--cz-font-display); font-weight: 600; }
.cz-formcard { padding: 28px; }

.cz-formcard .cz-form .form-group { margin-bottom: 16px; }

.cz-formcard .cz-form input[type="text"],
.cz-formcard .cz-form input[type="email"],
.cz-formcard .cz-form textarea {
	width: 100%;
	font-family: var(--cz-font-body);
	font-size: var(--cz-small);
	color: var(--cz-ink);
	background: transparent;
	border: 1px solid #e5e5e5;
	border-radius: var(--cz-radius-input);
	padding: 9px 12px;
}

.cz-formcard .cz-form label {
	display: block;
	font-size: var(--cz-small);
	font-weight: 500;
	color: var(--cz-ink);
	margin-bottom: 6px;
	text-transform: none;   /* Bricks dává popiskům uppercase, mockup je má větnou */
	letter-spacing: normal;
}

.cz-formcard .cz-form .submit-button-wrapper { width: 100%; }

.cz-formcard .cz-form .bricks-button {
	width: 100%;
	justify-content: center;
	background: var(--cz-red) !important;
	color: #fafafa !important;
	border-radius: var(--cz-radius-input) !important;
	font-weight: 500;
	padding: 10px 16px;
}

/* Honeypot — Bricks ho renderuje jako normální pole, musíme ho schovat sami. */
.cz-form input[name="form-field-hp"] { position: absolute !important; left: -9999px; }
.cz-form input[name="form-field-hp"] + label,
.cz-form .form-group:has(input[name="form-field-hp"]) { display: none !important; }

/* ── Responsivita komponent ── */
@media (max-width: 991px) {
	.cz-stats { grid-template-columns: minmax(0, 1fr); }
	.cz-stat { border-left: 0; border-top: 1px solid var(--cz-border); }
	.cz-stat:first-child { border-top: 0; }

	.cz-hero__media .cz-quote { position: static; max-width: none; margin-top: 16px; }

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

@media (max-width: 478px) {
	.cz-course__foot { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Header a footer (Bricks šablony, po jedné sadě na jazyk — DEC-001 §2.6)
   ========================================================================== */

.cz-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding-block: 20px;
	background: transparent;
}

.cz-header__inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;   /* Bricks dává .brxe-block wrap → hlavička se lámala */
	align-items: center !important;
	justify-content: space-between;
	gap: 24px;
}

/* ── Logo ──
   PLACEHOLDER: mockup má PNG z base44 CDN, čekáme na SVG. */
.cz-logo {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
}

.cz-logo__mark {
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 3px;
	background: var(--cz-red) !important;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.cz-logo__text {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--cz-ink) !important;
}

.cz-logo--small .cz-logo__mark { width: 22px; height: 22px; }

/* ── Navigace ── */
.cz-nav {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 28px;
}

.cz-navlink.brxe-button,
.cz-navlink {
	padding: 0 !important;
	background: transparent !important;
	border: 0;
	border-radius: 0;
	font-size: var(--cz-small);
	font-weight: 400;
	color: var(--cz-ink) !important;
}
.cz-navlink:hover { color: var(--cz-red) !important; }

.cz-header__right {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 12px;
}

/* ── Přepínač jazyka (shortcode [czechin_lang_switch]) ── */
.cz-langswitch {
	display: inline-flex;
	align-items: center;
	padding: 2px;
	border: 1px solid var(--cz-border);
	border-radius: var(--cz-radius-pill);
	background: var(--cz-surface);
}

.cz-langswitch__item {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: var(--cz-radius-pill);
	font-size: var(--cz-small);
	line-height: 1.2;
	color: var(--cz-ink);
}

.cz-langswitch__item.is-active {
	background: var(--cz-ink);
	color: #fff;
}

/* ── Footer ── */
.cz-footer {
	padding-block: 40px;
	border-top: 1px solid var(--cz-border);
}

.cz-footer__inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.cz-footer__note {
	font-size: var(--cz-small);
	color: var(--cz-muted) !important;
}

@media (max-width: 991px) {
	/* Na mobilu se navigace zatím schová — plnohodnotné mobilní menu přijde
	   s podstránkami, dokud je to one-pager s kotvami, stačí CTA a přepínač. */
	.cz-nav { display: none !important; }

	.cz-header__inner { gap: 12px; }
	.cz-header__right { gap: 8px; }
	.cz-header .cz-btn--primary { padding: 8px 12px; font-size: 13px; }
	.cz-langswitch__item { padding: 4px 9px; }

	.cz-footer__inner { flex-direction: column !important; align-items: flex-start; }
}