/* Centrul Ancora — fișier generat de build.sh. Nu îl editați direct.
   Sursele stau în assets/css/src/ și se concatenează în ordinea numerică a numelor. */
/* =========================================================================
   00 · Reset
   Minimul necesar, nu un reset agresiv. Accesibilitatea intră aici de la
   început, nu printr-o trecere de corectură ulterioară.
   ========================================================================= */

:root {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

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

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
	margin: 0;
}

ul[class],
ol[class] {
	padding-inline-start: 0;
	list-style: none;
}

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

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

button {
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* Cine a cerut sistemului mai puțină mișcare o primește. Regula stă în reset
   tocmai ca să acopere și componentele scrise în fazele următoare. */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
/* =========================================================================
   01 · Jetoane — contractul de brand
   Numele de mai jos sunt un contract: fiecare fază ulterioară le folosește ca
   atare. Se adaugă jetoane noi; nu se redenumesc și nu se șterg cele existente.
   `--wrap` și `--wrap-narrow` trebuie să rămână identice cu `wideSize` și
   `contentSize` din `theme.json` — o nepotrivire acolo este o diferență tăcută
   între ce vede editorul și ce vede vizitatorul.
   ========================================================================= */

:root {
	/* Culoare — violetul este prelevat din logo-ul clientului. */
	/* Nu se mai folosește în UI din Faza 3 — vezi 03-UI-SPEC.md §1. Rămâne doar ca referință de culoare a logo-ului. */
	--c-mov: #840077;
	--c-mov-600: #6B0061;
	--c-mov-100: #F3E6F1;
	--c-mov-050: #FBF5FA;
	--c-text: #2A2230;
	--c-text-mut: #6A6172;
	--c-linie: #E7E0EA;
	--c-alb: #FFFFFF;
	--c-accent: #F2A03D;

	/* Paleta verde-salvie, aprobată de client 2026-08-13 (CONTEXT.md D-23).
	   --c-mov* de mai sus NU se mai folosește în interfață — vezi comentariul de acolo. */
	--sea:        #6E7460;  /* dominant — antet, subsol, bandă orar, fundal erou */
	--sea-d:      #565C4D;  /* bandă fapte, text pe --sea când e nevoie de mai mult contrast */
	--sand:       #F7F1E8;  /* secțiuni alternative, pastile de terapii */
	--shell:      #FCF9F4;  /* fundal implicit al paginii (mai cald decât alb pur) */
	--white:      #FFFFFF;
	--coral:      #C0553D;  /* CTA — vezi corecția din §3 */
	--mint:       #6E9E8E;  /* accent card 2 — decorativ */
	--lilac:      #9B6FA8;  /* accent card 3 — decorativ */
	--gold:       #D9A441;  /* accent card 4 — decorativ */
	--blue:       #4E7EA3;  /* accent card 5 — decorativ */
	--clay:       #B0605F;  /* accent card 6 — decorativ */
	--ink:        #182229;  /* text principal, înlocuiește --c-text în UI nouă */
	--mut:        #5E6C74;  /* text secundar — vezi corecția din §3 */
	--line:       #E7DDD0;  /* borduri, separatoare — nu e text, fără prag AA */
	--cream:      #F0C9B8;  /* accent cald pe fundal --sea (cuvântul italic din H1, cifrele din banda de fapte) */
	--r-card:     18px;      /* rază card — nou, mai mică decât --r-lg (24px) */
	--shadow-2:   0 14px 34px rgba(24, 34, 41, .10); /* umbră la hover pe carduri */

	/* Familii tipografice. Fișierele sunt găzduite local; vezi 02-base.css. */
	--f-titlu: "Lora Variable", Georgia, 'Times New Roman', serif;
	--f-text: "Source Sans 3 Variable", system-ui, -apple-system, sans-serif;
	--f-ui: "Nunito Variable", ui-rounded, system-ui, sans-serif;

	/* Scară tipografică fluidă — fără interogări de media. */
	--t-xs: 0.875rem;
	--t-sm: 1rem;
	--t-md: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
	--t-lg: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
	--t-xl: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
	--t-2xl: clamp(2.2rem, 1.6rem + 2.8vw, 3.4rem);

	/* Spațiere — o singură scară, folosită peste tot. */
	--s-1: .25rem;
	--s-2: .5rem;
	--s-3: .75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;
	--s-9: 6rem;

	/* Formă — rotunjit, pentru că briefingul cere cald și primitor, nu clinic. */
	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 24px;
	--r-pill: 999px;
	--shadow-1: 0 1px 2px rgba(42, 34, 48, .06), 0 4px 16px rgba(42, 34, 48, .06);

	/* Lățimi de conținut. */
	--wrap: 1120px;
	--wrap-narrow: 720px;
}
/* =========================================================================
   02 · Fonturi și baza documentului

   ACESTA ESTE SINGURUL LOC DIN ÎNTREG PROIECTUL ÎN CARE SE DECLARĂ REGULI DE
   FONT. `theme.json` omite deliberat `fontFace`, iar stilul de editor aduce exact
   aceste reguli și în editorul de blocuri. O singură declarație, într-un singur
   fișier.

   Patru surse, nu două: subsetul `latin` conține literele de bază plus `î` și
   `â`, iar `ă`, `ș` și `ț` stau abia în `latin-ext`. Româna le traversează pe
   amândouă. Livrarea unui singur subset ar lăsa pagina fără alfabet. Vezi
   `docs/brand-assets.md` §2 — numele fișierelor sunt un contract, nu le
   redenumiți.
   ========================================================================= */

@font-face {
	font-family: "Nunito Variable";
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url("../fonts/nunito-latin-var.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Nunito Variable";
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url("../fonts/nunito-latin-ext-var.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Sans 3 Variable";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-sans-3-latin-var.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Sans 3 Variable";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-sans-3-latin-ext-var.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Lora Variable";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/lora-latin-var.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Lora Variable";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/lora-latin-ext-var.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Baza documentului -------------------------------------------------- */

html {
	font-family: var(--f-text);
}

body {
	font-family: var(--f-text);
	font-size: var(--t-md);
	line-height: 1.6;
	color: var(--c-text);
	background-color: var(--c-alb);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-titlu);
	font-weight: 700;
	line-height: 1.2;
	color: var(--c-text);
	text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p {
	text-wrap: pretty;
}

a {
	color: var(--c-mov);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	color: var(--c-mov-600);
}

/* Focalizarea de la tastatură se vede din primul șablon, nu dintr-o trecere de
   accesibilitate de la sfârșit. */
:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}

.site-header :focus-visible,
.site-footer :focus-visible,
.contact-band :focus-visible {
	outline-color: var(--white);
}

hr {
	border: 0;
	border-top: 1px solid var(--c-linie);
}

small {
	font-size: var(--t-xs);
	color: var(--c-text-mut);
}
/* =========================================================================
   03 · Primitivele de aranjare
   Patru primitive și atât. Fără cadru de lucru, fără explozie de clase
   utilitare. Fiecare primitivă se reglează printr-o variabilă locală
   (`--flow`, `--gap`, `--min`) setată pe elementul-părinte, nu printr-o
   variantă nouă de clasă.
   ========================================================================= */

.container {
	width: min(100% - 2 * var(--s-5), var(--wrap));
	margin-inline: auto;
}

.container--narrow {
	width: min(100% - 2 * var(--s-5), var(--wrap-narrow));
}

.stack > * + * {
	margin-block-start: var(--flow, var(--s-5));
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap, var(--s-3));
	align-items: center;
}

.grid {
	display: grid;
	gap: var(--gap, var(--s-5));
	grid-template-columns: repeat(auto-fit, minmax(var(--min, 17rem), 1fr));
}

/* Legătura de sărire peste navigație. Planul 01-05 o randează; stilul stă aici
   pentru că o legătură de sărire nestilizată este o legătură invizibilă exact
   în momentul în care cineva are nevoie de ea. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--s-3) var(--s-4);
	background-color: var(--c-alb);
	color: var(--c-mov);
	border-radius: 0 0 var(--r-sm) 0;
	box-shadow: var(--shadow-1);
	text-decoration: underline;
}

.skip-link:focus {
	left: 0;
}

/* Ascuns vizual, dar citit de tehnologiile asistive. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
/* =========================================================================
   10 · Antetul sitului

   Prefixul numeric ESTE ordinea cascadei: acest strat vine după primitivele de
   aranjare (03) și înaintea straturilor de pagină (30+). Numerotarea sare de la
   03 la 10 ca să rămână loc pentru straturi de componente comune.
   ========================================================================= */

.site-header {
	background-color: var(--sea);
	padding-block: var(--s-5);
	border-block-end: 1px solid var(--c-linie);
}

.site-header > .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
}

.site-header .header-actions {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

/* Legătura din jurul logo-ului este `inline-block` cu `line-height: 0`, altfel
   linia de bază a textului adaugă câțiva pixeli sub imagine. */
.site-header .ancora-logo-link,
.site-header .custom-logo-link {
	display: inline-block;
	line-height: 0;
}

/* Imaginea are `width` și `height` explicite în HTML, tocmai ca browserul să
   rezerve spațiul înainte de descărcare. Se constrânge doar lățimea, iar
   `height: auto` păstrează raportul rezervat — altfel constrângerea ar anula
   exact avantajul pentru care atributele există. */
.site-header .ancora-logo,
.site-header .custom-logo {
	display: block;
	width: 160px;
	height: auto;
}

/* Logo-ul livrat nu are o variantă albă randată separat — filtrul îl convertește
   la alb-pe-verde direct în CSS (§8.1). Scopul e limitat la antet: subsolul și
   orice context pe fundal deschis păstrează culoarea originală a mărcii. */
.site-header .ancora-logo,
.site-header .custom-logo {
	filter: brightness(0) invert(1);
}

@media (min-width: 40rem) {
	.site-header .ancora-logo,
	.site-header .custom-logo {
		width: 200px;
	}
}
/* =========================================================================
   11 · Subsolul sitului

   Fundalul trece de la `--sea` (paleta verde-salvie, D-23) — nu mai de la
   `--c-mov-050`. Contrastul e calculat, nu apreciat din ochi: `--white` la
   84% opacitate pe `--sea` rămâne peste pragul WCAG AA pentru corpul de
   text; `.legal`, la o opacitate mai mică, este intenționat mai discret și
   se recalculează dacă vreuna dintre cele două culori se schimbă vreodată.
   ========================================================================= */

.site-footer {
	position: relative;
	background-color: var(--sea);
	padding-block: var(--s-7);
	font-size: var(--t-sm);
	color: color-mix(in srgb, var(--white) 84%, transparent);
	text-align: center;
}

.site-footer .wave {
	display: block;
	width: 100%;
	height: 54px;
}

.site-footer .wave path {
	fill: var(--shell);
}

.site-footer > .container {
	--flow: var(--s-6);
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
	gap: var(--s-6);
	text-align: start;
}

.footer-grid__col > * + * {
	margin-block-start: var(--s-1);
}

.footer-grid__titlu,
.site-footer__nume {
	font-family: var(--f-titlu);
	font-weight: 700;
	color: var(--white);
}

.footer-grid a {
	color: inherit;
}

/* Blocul de identificare juridică. Este separat vizual de identitatea de mai
   sus tocmai ca sediul social să nu poată fi citit drept adresa centrului. */
.site-footer .legal {
	max-width: var(--wrap-narrow);
	margin-inline: auto;
	margin-block-start: var(--s-6);
	padding-block-start: var(--s-5);
	border-block-start: 1px solid rgba(255, 255, 255, .14);
	font-size: var(--t-xs);
	line-height: 1.7;
	color: color-mix(in srgb, var(--white) 68%, transparent);
}

.site-footer__copyright {
	font-size: var(--t-xs);
	color: color-mix(in srgb, var(--white) 68%, transparent);
}
/* =========================================================================
   12 · Navigația mobilă și banda de orar

   Panoul (`.nav-primary`) e ascuns implicit prin atributul HTML `hidden`, nu
   prin CSS — asta e degradarea fără JS: fără script panoul rămâne închis, dar
   pila de telefon din antet tot funcționează (CONV-01 nu depinde de JS).
   `nav.js` comută exact acest atribut pe elementul cu `id="meniu-principal"`.

   La >=900px panoul trebuie să rămână vizibil indiferent de `hidden` — pe
   ecran larg butonul care l-ar comuta e ascuns, deci nimeni nu poate elimina
   atributul din markup. Suprascrierea cu `!important` este singurul mod
   susținut de a învinge regula implicită `[hidden]{display:none}` a
   browserului, exact pentru acest caz documentat.
   ========================================================================= */

.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--white);
	cursor: pointer;
}

.nav-primary {
	order: 3;
}

.nav-primary[hidden] {
	display: none;
}

.nav-primary:not([hidden]) {
	width: 100%;
	padding-block: var(--s-4);
}

.nav-primary__list {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-primary__list a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--white);
	font-family: var(--f-ui);
	font-weight: 700;
	font-size: var(--t-sm);
	text-decoration: none;
}

.btn-whatsapp--desktop {
	display: none;
}

.btn-whatsapp--panel {
	display: inline-flex;
	min-height: 44px;
	margin-block-end: var(--s-3);
}

@media (min-width: 56.25rem) {
	/* 900px — nav.nav-primary passes to the desktop inline layout; the
	   mobile disclosure (hamburger + hidden-by-default panel) stops applying. */
	.nav-toggle {
		display: none;
	}

	.btn-whatsapp--panel {
		display: none;
	}

	.btn-whatsapp--desktop {
		display: inline-flex;
	}

	.nav-primary {
		display: flex !important;
		order: 0;
		align-items: center;
		width: auto;
		padding-block: 0;
	}

	.nav-primary__list {
		flex-direction: row;
		align-items: center;
		gap: var(--s-5);
	}

	.nav-primary__list a {
		min-height: auto;
	}
}

/* Banda de orar — pe fiecare pagină, nu doar pe Acasă (CONV-03, §8.1). */
.contact-band {
	background-color: var(--sea-d);
	color: var(--white);
	padding-block: var(--s-3);
	font-size: var(--t-xs);
}

.contact-band strong {
	font-family: var(--f-ui);
}

.contact-band p {
	margin: 0;
}
/* =========================================================================
   13 · Butoane și banda CTA de închidere

   Patru clase, o singură regulă de tap-target: fiecare buton de mai jos are
   `min-height: 44px` (A11Y-05). Niciun efect depinde exclusiv de `:hover` —
   toate sunt operabile de la tastatură prin `:focus-visible` (02-base.css
   §3.3 aduce deja inelul de focalizare corect pe fundal `--sea`).
   ========================================================================= */

.btn-primary,
.btn-secondary,
.tel,
.btn-whatsapp {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--f-ui);
	font-weight: 700;
	font-size: var(--t-sm);
	text-decoration: none;
	cursor: pointer;
}

.btn-primary {
	background-color: var(--coral);
	color: var(--white);
	border: 0;
	border-radius: var(--r-pill);
	padding: var(--s-3) var(--s-6);
}

.btn-secondary {
	background: none;
	border: 0;
	border-block-end: 2px solid currentColor;
	border-radius: 0;
	padding: var(--s-1) 0;
	color: var(--ink);
}

.site-header .btn-secondary {
	color: var(--white);
}

.tel {
	background-color: var(--coral);
	color: var(--white);
	border-radius: var(--r-pill);
	padding: var(--s-2) var(--s-5);
}

/* Pila stă direct pe fundalul --sea al antetului: contrastul marginii nu
   trece pragul WCAG prin luminanță (§3.4), deci umbra desenează limita. */
.site-header .tel {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.btn-whatsapp {
	background: none;
	border: 1.5px solid currentColor;
	border-radius: var(--r-pill);
	padding: var(--s-2) var(--s-4);
	color: inherit;
}

/* --- Banda CTA de închidere (template-parts/cta-band.php) --------------- */

.cta-band {
	background-color: var(--sand);
	padding-block: var(--s-8);
	text-align: center;
}

.cta-band__actions {
	display: flex;
	gap: var(--s-4);
	justify-content: center;
	flex-wrap: wrap;
	margin-block-start: var(--s-5);
}
/* =========================================================================
   14 · Cardul generic (.card) și cardul de serviciu

   `.card` este baza vizuală comună a oricărui tip de card din temă (radius,
   umbră, ridicare la hover) — cardurile de îngrijorare (worry-card) își
   păstrează propriile culori de accent, dar reutilizează aceeași bază.
   `.service-card` este primul consumator: titlu, preț/durată, eticheta
   „Serviciu pentru părinte” și un link de închidere care se citește mereu în
   `var(--ink)`, niciodată într-o culoare de accent per-card (03-UI-SPEC.md
   §3.2 — cinci din cele șase culori de accent eșuează contrastul AA pentru
   text).

   Ridicarea la hover (`translateY`) este mișcare și se suprimă sub
   `prefers-reduced-motion: reduce` (A11Y-04); schimbarea de umbră rămâne
   necondiționată, pentru că nu este mișcare.
   ========================================================================= */

.card {
	display: block;
	background: var(--white);
	border-radius: var(--r-card);
	padding: var(--s-5);
	box-shadow: var(--shadow-1);
	border: 1px solid transparent;
	text-decoration: none;
	color: inherit;
}

.card:hover,
.card:focus-visible {
	box-shadow: var(--shadow-2);
}

@media (prefers-reduced-motion: no-preference) {
	.card:hover,
	.card:focus-visible {
		transform: translateY(-3px);
	}
}

.card h3 {
	font: 400 var(--t-sm) "Source Sans 3 Variable", sans-serif;
	color: var(--ink);
	margin-block-end: var(--s-2);
}

.card .price {
	font-weight: 700;
}

.card .badge--parinte {
	display: inline-block;
	background: var(--coral);
	color: var(--white);
	font-size: var(--t-xs);
	font-weight: 700;
	border-radius: var(--r-pill);
	padding: var(--s-1) var(--s-3);
	margin-inline-start: var(--s-2);
}

.card__go {
	display: inline-block;
	margin-block-start: var(--s-4);
	font: 700 var(--t-sm) var(--f-ui);
	color: var(--ink);
}

/* Cardul întreg deja depășește lățimea minimă de atingere (A11Y-05); regula
   de mai jos documentează intenția, nu schimbă geometria. */
.service-card {
	min-height: 44px;
}

/* -------------------------------------------------------------------------
   Cardul unui membru al echipei (team-card, PAGE-04)

   Numele randează în familia serifă Lora, nu în sans-ul moștenit de la
   `.card h3` mai sus — 03-UI-SPEC.md §2.2 marchează explicit team-card ca
   fiind tratat la fel ca titlul unui blog-card, nu ca tokenul `<h1>` al
   paginii proprii a membrului.
   ------------------------------------------------------------------------- */

.team-card h3 {
	font: 400 var(--t-sm) "Lora Variable", Georgia, serif;
	color: var(--ink);
	margin-block: var(--s-3) var(--s-1);
}

.team-card__rol {
	font-weight: 700;
	color: var(--mut);
	font-size: var(--t-xs);
}

.team-card__credentiale {
	color: var(--mut);
	font-size: var(--t-xs);
	margin-block-start: var(--s-2);
}

/* -------------------------------------------------------------------------
   Cardul de îngrijorare (worry-card, D-27 — „cea mai importantă componentă
   a sitului”, 03-UI-SPEC.md §8.5)

   Nu reutilizează `.card`: șase variante de accent decorativ (bară + fundal
   de iconiță) au nevoie de propriile custom properties `--c`/`--c-bg`, iar
   textul „Vezi ce putem face →” rămâne mereu `var(--ink)`, niciodată
   culoarea de accent a cardului (§3.2 — cinci din cele șase culori de
   accent eșuează contrastul AA de text).

   Ridicarea la hover este mișcare și se suprimă sub
   `prefers-reduced-motion: reduce` (A11Y-04); schimbarea de umbră și de
   culoare a bordurii rămân necondiționate, pentru că nu sunt mișcare.
   ------------------------------------------------------------------------- */

.worry-card {
	position: relative;
	display: block;
	padding: var(--s-6) var(--s-5) var(--s-5);
	background: var(--white);
	border-radius: var(--r-card);
	border: 1px solid transparent;
	box-shadow: var(--shadow-1);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

.worry-card:hover,
.worry-card:focus-visible {
	box-shadow: var(--shadow-2);
	border-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
	.worry-card:hover,
	.worry-card:focus-visible {
		transform: translateY(-3px);
	}
}

.worry-card__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--c);
}

.worry-card__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-block-end: var(--s-5);
	border-radius: var(--r-md);
	background: var(--c-bg);
}

.worry-card__icon svg {
	width: 26px;
	height: 26px;
	stroke: var(--c);
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.worry-card h3 {
	font: 400 var(--t-sm) "Source Sans 3 Variable", sans-serif;
	line-height: 1.3;
	color: var(--ink);
	margin-block-end: var(--s-2);
}

.worry-card p {
	color: var(--mut);
	font-size: var(--t-sm);
}

.worry-card__go {
	display: inline-block;
	margin-block-start: var(--s-4);
	font: 700 var(--t-sm) var(--f-ui);
	color: var(--ink);
}

.worry-card--1 { --c: var(--coral); --c-bg: #FBEDE8; }
.worry-card--2 { --c: var(--mint);  --c-bg: #E8F1ED; }
.worry-card--3 { --c: var(--lilac); --c-bg: #F1EAF4; }
.worry-card--4 { --c: var(--gold);  --c-bg: #FBF1DD; }
.worry-card--5 { --c: var(--blue);  --c-bg: #E9F0F6; }
.worry-card--6 { --c: var(--clay);  --c-bg: #F7E9E9; }

/* -------------------------------------------------------------------------
   Cardul unui articol de blog (blog-card, 03-UI-SPEC.md §9.9)

   Nu este un `<a>` întreg: fotografia și titlul leagă spre articol, dar
   eticheta de categorie leagă separat spre arhiva „nevoie” — două legături
   imbricate ar fi marcare nevalidă, de-aia `.card`-ul de aici e un
   `<article>`, nu un `<a>` (template-parts/blog-card.php).
   ------------------------------------------------------------------------- */

.blog-card__poza {
	display: block;
	margin-block-end: var(--s-4);
}

.blog-card__poza img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-sm);
}

.blog-card h3 {
	font: 400 var(--t-sm) "Lora Variable", Georgia, serif;
	color: var(--ink);
}

.blog-card h3 a {
	color: inherit;
	text-decoration: none;
}

.blog-card .tag {
	display: inline-block;
	margin-block-end: var(--s-2);
	font-size: var(--t-xs);
	letter-spacing: .09em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--coral);
	text-decoration: none;
}

.blog-card__byline {
	color: var(--mut);
	font-size: var(--t-xs);
}
/* =========================================================================
   20 · Pagina principală (Acasă)

   Fiecare secțiune își gestionează singură lățimea (propriul `.container`),
   nu `main`-ul întreg — vezi inc/template-acasa.php. Fără interogare de
   media pentru vreo lățime maximă de secțiune sub 900px (A11Y-06); singura
   interogare de aici privește ritmul vertical (`.sectiune`) și trecerea la
   două coloane a secțiunii echipei.
   ========================================================================= */

/* --- Ritmul vertical comun al secțiunilor (03-UI-SPEC.md §4) ------------ */

.sectiune {
	padding-block: var(--s-6);
}

@media (min-width: 900px) {
	.sectiune {
		padding-block: var(--s-8);
	}
}

/* --- Eticheta „kicker” și textul introductiv (lede) ---------------------
   Prima secțiune din temă care are nevoie de ele; §2.2's „Label” treatment. */

.k {
	display: block;
	margin-block-end: var(--s-2);
	font: 700 var(--t-xs) var(--f-ui);
	text-transform: uppercase;
	letter-spacing: .13em;
	color: var(--coral);
}

.lede {
	color: var(--mut);
	max-width: 56ch;
}

/* --- Legătura „more” („Vezi toate serviciile…”, „Cunoașteți echipa →”) -- */

.more {
	display: inline-block;
	margin-block-start: var(--s-5);
	font: 700 var(--t-sm) var(--f-ui);
	color: var(--ink);
	text-decoration: none;
}

.more:hover,
.more:focus-visible {
	text-decoration: underline;
}

/* --- Eroul ---------------------------------------------------------------
   Placeholder-tolerant (D-29): fără fotografie, secțiunea rămâne un panou
   plin `var(--sea)`; cu fotografie, degradeul o topește în același
   `var(--sea)` ca să nu existe niciodată text peste o față (regulă
   permanentă a proiectului). */

.hero-acasa {
	position: relative;
	background: var(--sea);
	overflow: hidden;
}

.hero-acasa__poza {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.hero-acasa__degrade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(110, 116, 96, 0) 0%, var(--sea) 100%);
}

.hero-acasa__continut {
	position: relative;
	z-index: 1;
}

.hero-acasa h1 {
	max-width: 20ch;
	font-weight: 400;
	color: var(--white);
}

.hero-acasa h1 em {
	font-style: italic;
	color: var(--cream);
}

.hero-acasa .sub {
	max-width: 56ch;
	margin-block-start: var(--s-4);
	font-size: var(--t-sm);
	color: var(--white);
}

.hero-acasa__cta {
	--gap: var(--s-6);
	margin-block-start: var(--s-6);
}

.hero-acasa .btn-secondary {
	color: var(--white);
}

/* --- Banda de fapte (Home only, D-26) ------------------------------------ */

.facts {
	background: var(--sea-d);
	color: var(--white);
}

.facts__rand {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-6);
}

.facts__rand > div {
	flex: 1 1 168px;
}

.facts b {
	display: block;
	font: 400 var(--t-xl) var(--f-titlu);
	line-height: 1;
	color: var(--cream);
}

.facts span {
	display: block;
	margin-block-start: var(--s-1);
	font-size: var(--t-xs);
	color: color-mix(in srgb, white 68%, transparent);
}

/* --- Grila cardurilor de îngrijorare -------------------------------------
   `.grid` (03-layout.css) dă deja `display:grid`/`gap`; aici doar lățimea
   minimă de coloană specifică acestei grile (D-12: toate cele șase carduri
   deodată, fără carusel). */

.worry {
	grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
	gap: var(--s-5);
}

/* --- Pastilele de terapii (teaser, fără preț, D-26) ---------------------- */

.ther {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	margin-block-start: var(--s-5);
}

.ther span {
	display: inline-flex;
	align-items: center;
	padding: var(--s-2) var(--s-4);
	background: var(--sand);
	border-radius: var(--r-pill);
	font: 700 var(--t-sm) var(--f-ui);
	color: var(--ink);
}

/* --- Secțiunea echipei ---------------------------------------------------- */

.team {
	background: var(--sand);
}

.team__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-6);
	align-items: center;
}

@media (min-width: 900px) {
	.team__grid {
		grid-template-columns: 1fr 1.06fr;
		gap: var(--s-7);
	}
}

.team__photo {
	aspect-ratio: 4 / 3;
	border-radius: var(--r-lg);
	background: var(--white);
}

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

.team__motive li + li {
	margin-block-start: var(--s-2);
}

/* --- Pașii colaborării (teaser) -------------------------------------------
   Cercurile numerotate se desenează cu `counter()`: niciun șir „1”/„2”/„3”
   scris de mână, ca numărul afișat să rămână corect indiferent câți pași
   are lista (03-UI-SPEC.md §8.8). */

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--s-6);
	counter-reset: pas;
}

.steps > div {
	position: relative;
	padding-inline-start: 60px;
	counter-increment: pas;
}

.steps > div::before {
	content: counter(pas);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: var(--r-pill);
	background: var(--sea);
	color: var(--white);
	font: 400 var(--t-sm) var(--f-titlu);
}

.steps h3 {
	font: 400 var(--t-sm) "Source Sans 3 Variable", sans-serif;
	color: var(--ink);
	margin-block-end: var(--s-2);
}

.steps p {
	color: var(--mut);
}

/* --- Teaser-ul de blog ----------------------------------------------------
   `.arts` e reutilizată identic de arhiva Blog și de arhiva Nevoi mai
   târziu în această fază — vezi template-parts/blog-card.php. */

.blog {
	background: var(--white);
}

.arts {
	grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
	gap: var(--s-6);
}

/* --- Conținutul obișnuit al editorului (plasă de siguranță, nu o secțiune
   proiectată — vezi comentariul din inc/template-acasa.php) -------------- */

.acasa-continut-editor {
	padding-block: var(--s-6);
}
/* =========================================================================
   21 · Pagina Servicii

   Grila reutilizează primitiva `.grid` (03-layout.css), doar cu o lățime
   minimă de coloană specifică serviciilor. Fără interogare de media: modelul
   `auto-fit`/`minmax` colapsează deja la o singură coloană sub lățimea
   minimă disponibilă (A11Y-06).
   ========================================================================= */

.servicii-grid {
	grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
	gap: var(--s-5);
	margin-block-start: var(--s-6);
}

.servicii-nota {
	font-size: var(--t-xs);
	color: var(--mut);
	margin-block-start: var(--s-4);
}

/* =========================================================================
   Pagina unui serviciu (single-ancora_serviciu.php)

   Lățimea paginii vine din primitiva `.container--narrow` aplicată direct pe
   `<main>` în șablon (RESEARCH.md, D-08) — nicio regulă de lățime nu se
   duplică aici.
   ========================================================================= */

.detalii-suplimentare {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--s-2) var(--s-4);
	margin-block-start: var(--s-6);
}

.detalii-suplimentare dt {
	font-weight: 700;
	color: var(--ink);
}

.detalii-suplimentare dd {
	color: var(--mut);
	margin: 0;
}
/* =========================================================================
   22 · Echipa — grila paginii și pagina individuală a membrului

   `.echipa-grid` reutilizează primitivul `.grid` din 03-layout.css, la fel
   ca `.servicii-grid` — un singur `repeat(auto-fit, minmax(...))` fără nicio
   media query, mobile-first (A11Y-06).
   ========================================================================= */

.echipa-grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--s-5);
	margin-block-start: var(--s-6);
}

/* -------------------------------------------------------------------------
   Pagina individuală a unui membru (single-ancora_membru.php)
   ------------------------------------------------------------------------- */

.membru-rol {
	font-weight: 700;
	color: var(--mut);
	margin-block-start: var(--s-2);
}

.membru-specializari,
.membru-varste {
	margin-block-start: var(--s-5);
}
/* =========================================================================
   23 · Arhiva unei „nevoi" (taxonomy-ancora_nevoie.php)

   `.nevoi-servicii` și `.nevoi-articole` reutilizează primitiva `.grid`
   (03-layout.css) pentru `display:grid`/`gap`; aici doar lățimea minimă de
   coloană. `.nevoi-gol` este starea de rezervă cerută de SEO-08, atunci
   când niciun serviciu și niciun articol nu sunt încă etichetate cu
   termenul curent.
   ========================================================================= */

.nevoi-servicii,
.nevoi-articole {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--s-5);
	margin-block: var(--s-6);
}

.nevoi-gol {
	text-align: center;
	padding-block: var(--s-8);
}
/* ------------------------------------------------------------------------
   24-blog.css — indexul blogului (home.php) și articolul individual
   (single.php). PAGE-06, CONV-04.
   ------------------------------------------------------------------------ */

.filtru-nevoi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-block-end: var(--s-6);
}

.filtru-nevoi a {
	border-radius: var(--r-pill);
	padding: var(--s-1) var(--s-4);
	background: var(--sand);
	font-size: var(--t-xs);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.byline {
	color: var(--mut);
	font-size: var(--t-xs);
	margin-block: var(--s-2) var(--s-5);
}

article .nevoi-tags {
	margin-block-start: var(--s-6);
	font-size: var(--t-xs);
}
/* =========================================================================
   25 · Pagina Cum începe colaborarea — lista integrală de pași

   Fișier de sine stătător, nu extinde `.steps` din `14-cards.css` (teaser-ul
   de pe Acasă) — evită un conflict de fișier în același val de plan cu
   Blog/Nevoi. Numerotarea circulară vine exclusiv din `counter()`, fără
   nicio cifră scrisă de mână, ca numărul afișat să rămână corect indiferent
   câți pași conține repetorul.
   ========================================================================= */

.steps--full {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
	gap: var(--s-6);
	counter-reset: pas;
	margin-block-start: var(--s-6);
}

.steps--full > div {
	counter-increment: pas;
	position: relative;
	padding-block-start: var(--s-8);
}

.steps--full > div::before {
	content: counter(pas);
	position: absolute;
	top: 0;
	left: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--sea);
	color: var(--white);
	font-family: "Lora Variable", Georgia, serif;
	display: grid;
	place-items: center;
}
/* =========================================================================
   26 · Pagina Implică-te — identitatea ONG, donație, sponsorizare

   `.ong-identitate` este deliberat simplă: fără card, fără umbră, fără
   accent de brand — vizual distinctă de `.legal` din footer (11-footer.css),
   ca datele asociației să nu se citească niciodată drept identitatea
   juridică a centrului (T-02-24).
   ========================================================================= */

.ong-identitate {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--s-2) var(--s-4);
	background: var(--sand);
	padding: var(--s-5);
	border-radius: var(--r-md);
}

.ong-identitate dt {
	font-weight: 700;
	color: var(--mut);
}
/* =========================================================================
   27 · Pagina Contact — cochilia informativă (harta e doar un dreptunghi
   „apăsați pentru a încărca" — LEGAL-04, cablarea reală vine în Faza 4)
   ========================================================================= */

.harta-placeholder {
	aspect-ratio: 16 / 9;
	background: var(--sand);
	display: grid;
	place-items: center;
	border-radius: var(--r-md);
	text-align: center;
	padding: var(--s-4);
}

.contact-program {
	display: grid;
	gap: var(--s-1);
}

.contact-program dt {
	font-weight: 700;
	color: var(--mut);
}

.contact-form-slot {
	background: var(--sand);
	border-radius: var(--r-md);
	padding: var(--s-5);
}
/* =========================================================================
   28 · Pagina Despre noi

   Lista de valori nu reutilizează `.grid` (03-layout.css), pentru că este o
   listă simplă, verticală, nu un tablou de carduri — o singură coloană,
   fără `minmax`.
   ========================================================================= */

.valori {
	display: grid;
	gap: var(--s-4);
	margin-block-start: var(--s-5);
}

.valori li strong {
	display: block;
	color: var(--ink);
}
/* =========================================================================
   29 · Pagina 404 — trei ieșiri garantate dintr-o adresă inexistentă (PAGE-11)
   ========================================================================= */

.pagina-404 {
	text-align: center;
	padding-block: var(--s-9);
}

.pagina-404__exits {
	display: flex;
	gap: var(--s-4);
	justify-content: center;
	flex-wrap: wrap;
	margin-block-start: var(--s-6);
}
/* =========================================================================
   30 · Pagina de așteptare

   Violetul de brand ajunge în această pagină NUMAI prin `var(--c-mov)`.
   Jetonul este contractul; o culoare scrisă de mână a doua oară este o culoare
   care o ia razna la prima schimbare de brand. Nicio valoare hexazecimală în
   acest fișier.

   Ritmul vertical vine din primitiva `.stack`, reglată printr-o singură
   suprascriere de `--flow`. Fără margini punctuale pe elemente.
   ========================================================================= */

.holding {
	--flow: var(--s-6);

	max-width: var(--wrap-narrow);
	margin-inline: auto;
	padding-block: var(--s-9);
	text-align: center;
}

/* Pe un telefon, logo-ul nu trebuie să ocupe tot ecranul înainte ca vizitatorul
   să ajungă la text. `min()` îl ține sub 280px pe orice ecran și sub 70% din
   lățime pe cele mici. */
.holding .ancora-logo,
.holding .custom-logo {
	display: block;
	width: min(280px, 70vw);
	height: auto;
	margin-inline: auto;
}

.holding .ancora-logo-link,
.holding .custom-logo-link {
	display: inline-block;
	line-height: 0;
}

/* `h1` NU primește stil aici. Pe pagina de așteptare poartă
   `screen-reader-text`, pentru că marca de deasupra tipărește deja aceleași
   cuvinte; o regulă de mărime pentru el ar fi cod mort care sugerează
   următorului cititor că titlul se vede. Dacă Faza 3 îl scoate din ascundere,
   stilul se scrie atunci, împreună cu motivul. */

/* Propoziția de introducere este acum primul text vizibil din pagină, imediat
   după marcă. Preia rolul pe care îl avea titlul: dimensiunea de titlu și
   violetul de brand — prin jeton, niciodată printr-o valoare hexazecimală. */
.holding__lead {
	font-size: var(--t-xl);
	line-height: 1.25;
	text-wrap: balance;
	color: var(--c-mov);
}

.holding__constructie {
	font-size: var(--t-md);
	color: var(--c-text-mut);
}

/* Lista de terapii se rupe pe mai multe rânduri pe un telefon; interlinierea
   mai mare o face lizibilă acolo, nu doar pe desktop. */
.holding__terapii {
	font-size: var(--t-sm);
	line-height: 1.9;
	color: var(--c-text-mut);
}