/**
 * Core Base — komponenti.
 *
 * LIETO TIKAI 2. slāņa tokenus no tokens.css (--cb-text-*, --cb-surface-*,
 * --cb-space-*). Šeit NAV neviena hex koda un neviena "brīvā" px vērtības.
 *
 * DIVI NOTEIKUMI, kas padara sistēmu paredzamu:
 *
 *   1. NEVIENS komponents neliek sev ārējo margin. Atstarpi starp blokiem
 *      nosaka vecāks (.cb-flow vai .cb-grid gap). Ja komponents nestu savu
 *      margin, tas saskaitītos ar vecāka gap un rezultāts būtu nevienāds.
 *
 *   2. MINIMĀLĀ ANATOMIJA: satura elementam jābūt vismaz 3 no 5 slāņiem —
 *      marķieris (ikona/numurs), mazais virsraksts, teksts, mērs (skaitlis/
 *      svītra/žetons), vizuālais. Virsraksts + rindkopa vien NAV sekcija.
 *      Zemāk esošie komponenti ir šīs anatomijas gatavās formas.
 */

/* ══ TIPOGRĀFIJAS PALĪGI ════════════════════════════════════════════════ */

.cb-display-xl,
.cb-display-lg,
.cb-display-md,
.cb-display-sm {
	font-family: var( --cb-font-display );
	font-weight: var( --cb-weight-display );
	line-height: var( --cb-lh-display );
	color: var( --cb-text-strong );
}

.cb-display-xl { font-size: var( --cb-display-xl ); }
.cb-display-lg { font-size: var( --cb-display-lg ); }
.cb-display-md { font-size: var( --cb-display-md ); }
.cb-display-sm { font-size: var( --cb-display-sm ); }

.cb-h {
	font-family: var( --cb-font-display );
	font-weight: var( --cb-weight-ui );
	line-height: var( --cb-lh-heading );
	color: var( --cb-text-strong );
	font-size: var( --cb-heading-md );
}

.cb-h--lg { font-size: var( --cb-heading-lg ); }
.cb-h--sm { font-size: var( --cb-heading-sm ); }
.cb-h--xs { font-size: var( --cb-heading-xs ); }

/* Ievadteksts zem virsraksta. Ierobežots platums — citādi rinda kļūst
   par 120 zīmēm un lasāmība krīt. */
.cb-lead {
	font-size: var( --cb-body-lg );
	line-height: var( --cb-lh-body );
	color: var( --cb-text-muted );
	max-width: var( --cb-measure );
}

/* Mazais lielo burtu uzraksts virs virsraksta.
   UZMANĪBU: maks. 1 uz 3 sekcijām. Ja tas ir virs katras sekcijas, lapa
   iegūst templeta ritmu — tā ir viena no biežākajām AI pazīmēm. */
.cb-eyebrow {
	font-family: var( --cb-font-display );
	font-size: var( --cb-eyebrow-size );
	letter-spacing: var( --cb-eyebrow-tracking );
	text-transform: uppercase;
	font-weight: var( --cb-weight-ui );
	color: var( --cb-text-accent );
}

.cb-muted { color: var( --cb-text-muted ); }
.cb-quiet { color: var( --cb-text-quiet ); }


/* ══ IKONAS ═════════════════════════════════════════════════════════════ */

/* Ikonas nāk no lokāla SVG sprite (assets/svg/icons.svg, sk. inc/icons.php).
   Nekad no npm, nekad no CDN, nekad emoji. currentColor nozīmē, ka ikona
   pārmanto teksta krāsu — nav jākrāso atsevišķi. */
.cb-icon {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cb-icon--sm { width: 1em; height: 1em; }
.cb-icon--lg { width: 1.75em; height: 1.75em; }
.cb-icon--xl { width: 2.5em; height: 2.5em; }

/* Ikona aplītī — marķiera slānis kartītēm */
.cb-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --cb-space-7 );
	height: var( --cb-space-7 );
	border-radius: var( --cb-radius-md );
	background: var( --cb-accent-100 );
	color: var( --cb-text-accent );
}


/* ══ POGAS ══════════════════════════════════════════════════════════════ */

.cb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --cb-space-2 );
	font-family: var( --cb-font-display );
	font-size: var( --cb-body-sm );
	font-weight: var( --cb-weight-ui );
	letter-spacing: var( --cb-label-tracking );
	padding: var( --cb-space-3 ) var( --cb-space-5 );
	border: var( --cb-border-w ) solid transparent;
	border-radius: var( --cb-radius-sm );
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	/* Vienmēr vienā rindā — pogas teksts, kas pārlūzt divās, izskatās salauzts.
	   Ja neietilpst, teksts ir par garu, nevis poga par šauru. */
	white-space: nowrap;
	transition:
		background var( --cb-dur-base ) var( --cb-ease-out ),
		border-color var( --cb-dur-base ) var( --cb-ease-out ),
		color var( --cb-dur-base ) var( --cb-ease-out ),
		transform var( --cb-dur-fast ) var( --cb-ease-out );
}

.cb-btn:active { transform: scale( var( --cb-press-scale ) ); }

.cb-btn:focus-visible {
	outline: var( --cb-border-w-thick ) solid var( --cb-focus-ring );
	outline-offset: 2px;
}

.cb-btn--primary {
	background: var( --cb-accent-500 );
	border-color: var( --cb-accent-500 );
	color: var( --cb-text-inverse );
}

.cb-btn--primary:hover {
	background: var( --cb-accent-600 );
	border-color: var( --cb-accent-600 );
	color: var( --cb-text-inverse );
}

.cb-btn--dark {
	background: var( --cb-surface-dark );
	border-color: var( --cb-surface-dark );
	color: var( --cb-text-inverse );
}

.cb-btn--outline {
	background: transparent;
	border-color: var( --cb-border-strong );
	color: var( --cb-text-strong );
}

.cb-btn--outline:hover {
	border-color: var( --cb-accent-500 );
	color: var( --cb-text-accent );
}

.cb-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var( --cb-text-accent );
	padding-inline: var( --cb-space-2 );
}

.cb-btn--sm { font-size: var( --cb-caption ); padding: var( --cb-space-2 ) var( --cb-space-4 ); }
.cb-btn--lg { font-size: var( --cb-body-md ); padding: var( --cb-space-4 ) var( --cb-space-6 ); }
.cb-btn--block { display: flex; width: 100%; }


/* ══ FORMU LAUKI ════════════════════════════════════════════════════════ */

.cb-field {
	display: flex;
	flex-direction: column;
	gap: var( --cb-space-2 );
}

.cb-field > label {
	font-size: var( --cb-body-sm );
	font-weight: var( --cb-weight-body-strong );
	color: var( --cb-text-body );
}

.cb-input,
.cb-select,
.cb-textarea {
	width: 100%;
	font-family: var( --cb-font-body );
	font-size: var( --cb-body-md );
	line-height: var( --cb-lh-body );
	color: var( --cb-text-strong );
	background: var( --cb-surface-page );
	border: var( --cb-border-w ) solid var( --cb-border-strong );
	border-radius: var( --cb-radius-sm );
	padding: var( --cb-space-3 ) var( --cb-space-4 );
	transition: border-color var( --cb-dur-base ) var( --cb-ease-out );
}

.cb-textarea { min-height: calc( var( --cb-space-9 ) + var( --cb-space-6 ) ); resize: vertical; }

.cb-input::placeholder,
.cb-textarea::placeholder {
	/* Nevis --cb-text-quiet: vietturis uz baltas virsmas citādi nesasniedz
	   WCAG AA 4.5:1 kontrastu. */
	color: var( --cb-text-muted );
}

.cb-input:focus-visible,
.cb-select:focus-visible,
.cb-textarea:focus-visible {
	outline: var( --cb-border-w-thick ) solid var( --cb-focus-ring );
	outline-offset: 1px;
	border-color: var( --cb-accent-500 );
}

.cb-field--invalid .cb-input,
.cb-field--invalid .cb-textarea,
.cb-field--invalid .cb-select {
	border-color: var( --cb-danger );
}

.cb-field-error {
	font-size: var( --cb-body-sm );
	color: var( --cb-danger );
}


/* ══ KARTĪTE — pamata "boksis" ══════════════════════════════════════════ */

/* Minimālā anatomija praksē: marķieris + mazais virsraksts + teksts.
   Ceturto slāni (mērs vai vizuālais) pieliek pēc vajadzības. */
.cb-card {
	display: flex;
	flex-direction: column;
	gap: var( --cb-space-3 );
	padding: var( --cb-space-5 );
	background: var( --cb-surface-page );
	border: var( --cb-border-w ) solid var( --cb-border-default );
	border-radius: var( --cb-radius-md );
	box-shadow: var( --cb-shadow-card );
	transition:
		transform var( --cb-dur-base ) var( --cb-ease-out ),
		box-shadow var( --cb-dur-base ) var( --cb-ease-out );
}

.cb-card__title {
	font-family: var( --cb-font-display );
	font-size: var( --cb-heading-sm );
	font-weight: var( --cb-weight-ui );
	line-height: var( --cb-lh-heading );
	color: var( --cb-text-strong );
}

.cb-card__text {
	font-size: var( --cb-body-sm );
	line-height: var( --cb-lh-body );
	color: var( --cb-text-muted );
}

/* Uzsvērtā kartīte — lieto VIENU režģī, lai lauztu "visas vienādas" ritmu */
.cb-card--feature {
	background: var( --cb-surface-subtle );
	border-color: var( --cb-border-strong );
}

.cb-card--dark {
	background: var( --cb-surface-dark );
	border-color: var( --cb-border-dark );
	--cb-text-strong: var( --cb-text-inverse );
	--cb-text-muted: var( --cb-text-inverse-muted );
}

.cb-card--link:hover {
	transform: translateY( -2px );
	box-shadow: var( --cb-shadow-raised );
}


/* ══ SOĻI (process) ═════════════════════════════════════════════════════ */

/* Numurs + savienojoša līnija + virsraksts + rinda teksta.
   Procesu NEKAD nerāda kā <ul> — secība ir informācija, un to jāredz. */
.cb-steps {
	display: grid;
	gap: var( --cb-space-6 );
	counter-reset: cb-step;
	list-style: none;
	padding: 0;
}

.cb-step {
	position: relative;
	display: grid;
	grid-template-columns: var( --cb-space-7 ) 1fr;
	gap: var( --cb-space-4 );
	counter-increment: cb-step;
}

.cb-step__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --cb-space-7 );
	height: var( --cb-space-7 );
	border-radius: var( --cb-radius-pill );
	background: var( --cb-accent-500 );
	color: var( --cb-text-inverse );
	font-family: var( --cb-font-display );
	font-weight: var( --cb-weight-display );
	font-size: var( --cb-body-md );
}

.cb-step__marker::before { content: counter( cb-step ); }

/* Savienojošā līnija starp soļiem. Pēdējam nav — citādi tā karājas gaisā. */
.cb-step:not( :last-child ) .cb-step__marker::after {
	content: "";
	position: absolute;
	top: var( --cb-space-7 );
	left: calc( var( --cb-space-7 ) / 2 );
	width: var( --cb-border-w );
	height: calc( 100% + var( --cb-space-6 ) - var( --cb-space-7 ) );
	background: var( --cb-border-strong );
}

.cb-step__body { display: flex; flex-direction: column; gap: var( --cb-space-2 ); }

/* Horizontāli platā ekrānā, ja soļu ir 3–4 */
.cb-steps--row { grid-auto-flow: column; grid-auto-columns: 1fr; }

@media ( max-width: 860px ) {
	.cb-steps--row { grid-auto-flow: row; }
}


/* ══ SKAITĻI / REZULTĀTI ════════════════════════════════════════════════ */

/* Liels skaitlis + apzīmējums + augoša svītra. Skaitlis animējas ar
   data-cb-count, svītra ar data-cb-grow (assets/js/reveal.js). */
.cb-stat {
	display: flex;
	flex-direction: column;
	gap: var( --cb-space-2 );
}

.cb-stat__value {
	font-family: var( --cb-font-display );
	font-size: var( --cb-display-md );
	font-weight: var( --cb-weight-display );
	line-height: 1;
	color: var( --cb-text-accent );
	font-variant-numeric: tabular-nums;
}

.cb-stat__label {
	font-size: var( --cb-body-sm );
	color: var( --cb-text-muted );
}

.cb-stat__bar {
	height: var( --cb-space-1 );
	border-radius: var( --cb-radius-pill );
	background: var( --cb-surface-sunken );
	overflow: hidden;
}

.cb-stat__bar > span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var( --cb-accent-500 );
	transition: width var( --cb-dur-slow ) var( --cb-ease-out );
}


/* ══ PARAMETRI (specifikācijas) ═════════════════════════════════════════ */

/* Tehniskie dati NAV kartītes — tie ir pāri "apzīmējums / vērtība".
   dl/dt/dd ir arī pareizā semantika, ne tikai pareizais izskats. */
.cb-specs {
	display: grid;
	gap: 0;
}

.cb-specs > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var( --cb-space-4 );
	padding-block: var( --cb-space-3 );
	border-bottom: var( --cb-border-w ) solid var( --cb-border-default );
}

.cb-specs > div:last-child { border-bottom: none; }

.cb-specs dt {
	font-size: var( --cb-body-sm );
	color: var( --cb-text-muted );
}

.cb-specs dd {
	font-family: var( --cb-font-display );
	font-weight: var( --cb-weight-ui );
	color: var( --cb-text-strong );
	font-variant-numeric: tabular-nums;
	text-align: right;
}


/* ══ AKORDEONS (biežie jautājumi) ═══════════════════════════════════════ */

/* Uz <details>/<summary> — strādā bez JS, saturs ir HTML-ā (Google to redz),
   un der FAQPage schema. */
.cb-accordion { display: grid; gap: var( --cb-space-2 ); }

.cb-accordion__item {
	border: var( --cb-border-w ) solid var( --cb-border-default );
	border-radius: var( --cb-radius-md );
	background: var( --cb-surface-page );
}

.cb-accordion__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --cb-space-4 );
	padding: var( --cb-space-4 ) var( --cb-space-5 );
	cursor: pointer;
	list-style: none;
	font-family: var( --cb-font-display );
	font-weight: var( --cb-weight-ui );
	font-size: var( --cb-heading-sm );
	color: var( --cb-text-strong );
}

.cb-accordion__item > summary::-webkit-details-marker { display: none; }

.cb-accordion__item > summary:focus-visible {
	outline: var( --cb-border-w-thick ) solid var( --cb-focus-ring );
	outline-offset: -2px;
}

.cb-accordion__item > summary .cb-icon {
	transition: transform var( --cb-dur-base ) var( --cb-ease-out );
	color: var( --cb-text-muted );
}

.cb-accordion__item[open] > summary .cb-icon { transform: rotate( 180deg ); }

.cb-accordion__body {
	padding: 0 var( --cb-space-5 ) var( --cb-space-5 );
	font-size: var( --cb-body-md );
	line-height: var( --cb-lh-body );
	color: var( --cb-text-muted );
	max-width: var( --cb-measure );
}


/* ══ ŽETONS ═════════════════════════════════════════════════════════════ */

.cb-badge {
	display: inline-flex;
	align-items: center;
	gap: var( --cb-space-1 );
	padding: var( --cb-space-1 ) var( --cb-space-3 );
	border-radius: var( --cb-radius-pill );
	background: var( --cb-accent-100 );
	color: var( --cb-text-accent );
	font-size: var( --cb-caption );
	font-weight: var( --cb-weight-ui );
	letter-spacing: var( --cb-label-tracking );
}

.cb-badge--success { background: color-mix( in srgb, var( --cb-success ) 14%, var( --cb-neutral-0 ) ); color: var( --cb-success ); }
.cb-badge--danger  { background: color-mix( in srgb, var( --cb-danger ) 14%, var( --cb-neutral-0 ) ); color: var( --cb-danger ); }


/* ══ ATTĒLA VIETTURIS ═══════════════════════════════════════════════════ */

/* Kamēr klienta īsto bilžu nav, vieta REZERVĒJAS un uzraksts pasaka, kāda
   bilde te vajadzīga. Tā izkārtojums ir gatavs jau pirms fotosesijas un
   nesabrūk, kad bildi ieliek. Nekad negaidīt bildes, lai sāktu. */
.cb-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var( --cb-surface-sunken );
	border: var( --cb-border-w ) dashed var( --cb-border-strong );
	border-radius: var( --cb-radius-md );
	overflow: hidden;
}

.cb-media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cb-media__note {
	padding: var( --cb-space-4 );
	text-align: center;
	font-size: var( --cb-body-sm );
	color: var( --cb-text-quiet );
	max-width: 40ch;
}

.cb-media--wide { aspect-ratio: 16 / 9; }
.cb-media--tall { aspect-ratio: 3 / 4; }


/* ══ PARĀDĪŠANĀS RITINOT ════════════════════════════════════════════════ */

/* Elements ar data-cb-reveal sākumā ir nobīdīts un caurspīdīgs; JS pieliek
   .is-revealed, kad tas nonāk ekrānā (assets/js/reveal.js).

   KĀPĒC .cb-js: slēpšana notiek TIKAI tad, kad reveal.js jau darbojas un pats
   ir uzlicis .cb-js klasi uz <html>. Bez šī nosacījuma jebkura JS problēma —
   bloķēts skripts, kļūda, vai pārlūka konteksts, kas nezīmē kadrus un tāpēc
   nepalaiž IntersectionObserver — atstātu saturu neredzamu uz visiem laikiem.
   Tieši tas testēšanas laikā vienreiz arī notika.

   Bez JS noklusējums ir: viss redzams. Animācija ir uzlabojums, ne nosacījums. */
@media ( prefers-reduced-motion: no-preference ) {
	.cb-js [data-cb-reveal] {
		opacity: 0;
		transform: translateY( var( --cb-space-4 ) );
		transition:
			opacity var( --cb-dur-slow ) var( --cb-ease-out ),
			transform var( --cb-dur-slow ) var( --cb-ease-out );
	}

	.cb-js [data-cb-reveal].is-revealed {
		opacity: 1;
		transform: none;
	}
}