/**
 * Subsolul — ambele variante, din machetă.
 *
 * Valorile vin din panourile de inspecție Figma trimise de Seba. Unde a fost
 * nevoie de geometrie, am măsurat pe captură cu scara din logo *(146×32)*.
 *
 * ⚠️ Culorile citite din capturi ies deviate — exportul e în P3. Cele reale sunt
 * din panou: text `#0A435C`, fundal `blue-card-fill-default` **`#E8F8FF`**.
 * *(Nu `#EAF9FF`, cum presupusesem după `light-cyan`.)*
 *
 * 🔑 Ambele variante au ACELEAȘI blocuri. Macheta de telefon are doar trei
 * coloane și nu arată social/badge-uri — Seba: **e o scăpare a designerului**.
 * Diferă doar așezarea și mărimile.
 *
 * 🔴 Ce lipsește încă: **pattern-ul hexagonal** *(lăsat pentru după structură)*
 * și **stările de hover** *(nu le inventez → §4m)*.
 */

.inco-subsol {
	--sub-fundal: #E8F8FF;
	--sub-text:   var(--darker-cyan, #0A435C);
	--sub-linie:  var(--light-gray, #C4D2D7);

	/*
	 * Fagurele — clasa `.inco-hex`, din `assets/css/pattern.css`.
	 *
	 * 🔑 Mărimea NU e din ochi. Pasul se măsoară ca **fracțiune din lățimea
	 * imaginii**, apoi se înmulțește cu lățimea nodului:
	 *
	 *     122,80 / 4096 × 1080 = 32,38px
	 *
	 * Așa, rezoluția la care mi-a ajuns poza nu contează — doar proporția, care
	 * nu se schimbă la redimensionare. *(Nodul `pattern` din Figma: 1080×617,
	 * rotit −180°, peste un subsol de 360.)*
	 *
	 * Culoarea și opacitatea sunt tot din machetă: linia din imaginea sursă e
	 * **`#AEAEAE`** *(mediana minimelor locale)*, iar nodul are **30%**. Peste
	 * `#E8F8FF` iese `#D5E1E6`.
	 *
	 * ── Stingerea, acum măsurată ──────────────────────────────────────────────
	 *
	 * Din exportul la 1x al `Mask group` *(360×617, cu canal alfa)*. Alfa e
	 * **liniară** pe ambele axe, deci gradientul se reconstituie exact:
	 *
	 *     alfa = 0,8240·y − 252,7   →  centru y = 616,2 · rază 309,5
	 *     alfa = 0,4684·x + 170,3   →  centru x = 180,8 · rază 544,4
	 *
	 * Adică: centrul elipsei e la **mijlocul lățimii, pe marginea de jos**, cu
	 * razele **jumătate din nodul de 1080×617**. Verificat în cinci puncte —
	 * diferența maximă față de formulă e **1 din 255**.
	 *
	 * 🔴 Razele sunt în PIXeli, nu în procente.
	 *
	 * Cu procente *(aveam `75% 85%`)*, raza creștea odată cu înălțimea, iar
	 * subsolul nostru pe telefon e mult mai înalt decât cel din machetă — la noi
	 * intră toate cele cinci coloane, în macheta de telefon sunt trei. Fagurele
	 * urca până sus. Seba: *„pe mobile merg prea mult în sus"*.
	 * → **O rază măsurată pe un cadru de o anumită înălțime nu se transcrie în
	 *   procente dintr-un cadru de altă înălțime.**
	 */
	/*
	 * ⚠️ VOALUL ALB e scos INTENȚIONAT, deși e în machetă.
	 *
	 * În export, 89% dintre pixelii cu mască opacă sunt albi — pattern-ul din
	 * Figma deschide fundalul spre alb în partea de jos. Am pus `--hex-voal:
	 * #FFFFFF`, l-a văzut Seba pe site și **nu i-a plăcut** *(10 aug)*.
	 * Subsolul rămâne `#E8F8FF` uniform, cu fagurele peste el.
	 *
	 * Utilitarul păstrează voalul — implicit e `transparent`. Dacă se răzgândește
	 * cineva, se reaprinde cu o singură linie.
	 */
	--hex-marime: 32.3px;
	--hex-culoare: #AEAEAE;
	--hex-opacitate: .3;
	--hex-stingere: radial-gradient(544px 309px at 50% 100%, #000 0%, transparent 100%);

	box-sizing: border-box;
	margin-block-start: 40px;
	/* Telefon: colț 24 doar sus. Desktopul cere 40 — mai jos. */
	border-start-start-radius: 24px;
	border-start-end-radius: 24px;
	padding: 24px 16px 32px;
	background: var(--sub-fundal);
	color: var(--sub-text);
}
.inco-subsol *, .inco-subsol ::before, .inco-subsol ::after { box-sizing: border-box; }

.inco-subsol__interior {
	display: flex;
	flex-direction: column;
	gap: 32px;
	inline-size: 100%;
	max-inline-size: 328px;   /* 360 − 2×16, confirmat de „328 Fill" din Figma */
}

/*
 * 🔑 `fit-content` — de aici vin lățimile diferite ale liniilor de sub titluri.
 *
 * Măsurate pe telefon: 124 · 187 · 112 · 194, fiecare cât cel mai lat element
 * din coloana ei. Cea de 124 se potrivește exact cu grupul „Links" din Figma.
 * Deci linia n-are lățime proprie — o ia pe a blocului, la orice text.
 */
.inco-subsol__bloc {
	inline-size: fit-content;
	max-inline-size: 100%;
}

.inco-subsol__titlu {
	margin: 0 0 8px;
	padding: 0 0 8px;
	border-block-end: 1px solid var(--sub-linie);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--sub-text);
}

/* Opacitatea e pe LISTĂ, nu pe fiecare link — grupul „Links" are 90% în Figma. */
.inco-subsol__lista,
.inco-subsol__contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0; padding: 0;
	list-style: none;
}
.inco-subsol__lista { opacity: .9; }

.inco-subsol__rand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-block-size: 20px;
}
.inco-subsol__icon {
	flex: none;
	inline-size: 20px; block-size: 20px;
	display: inline-flex; align-items: center; justify-content: center;
}

/*
 * 🔴 `color` declarată și pe hover, deși nu se schimbă.
 *
 * `a:active, a:hover { color: #333366 }` din `reset.css`-ul temei valorează
 * (0,1,1) și prinde orice link al nostru care nu-și declară culoarea. M-a costat
 * o versiune la butonul „Vezi tot". → §4n
 *
 * ⚠️ Ce FACE linkul la hover nu e încă din machetă. Nu inventez. → §4m
 */
.inco-subsol__link,
.inco-subsol__text {
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--sub-text);
	text-decoration: none;
}
.inco-subsol__link:hover,
.inco-subsol__link:focus-visible { color: var(--sub-text); }

/* ---------------------------------------------------------------- brand -----*/
.inco-subsol__brand {
	display: flex;
	flex-direction: column;
	gap: 32px;
	inline-size: fit-content;
	max-inline-size: 100%;
}

.inco-subsol__logo {
	inline-size: 146px; block-size: 32px;
	object-fit: contain;
	display: block;
}

/* Iconițele de social: 32×32, din machetă. */
.inco-subsol__social {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0; padding: 0;
	list-style: none;
}
.inco-subsol__social-link {
	display: inline-flex;
	inline-size: 32px; block-size: 32px;
	color: var(--sub-text);
}
.inco-subsol__social-link:hover,
.inco-subsol__social-link:focus-visible { color: var(--sub-text); }
.inco-subsol__social-link svg { inline-size: 100%; block-size: 100%; display: block; }

/*
 * Badge-urile ANPC — **130 lat**, cerut de Seba pe 9 aug.
 *
 * ⚠️ `height: auto`, nu o înălțime fixă: fișierele declară 175×50 dar au
 * `viewBox` de 165,4×41, deci raportul nu e 175/50. Scrisă fix, înălțimea le-ar
 * fi turtit.
 */
.inco-subsol__badges {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0; padding: 0;
	list-style: none;
}
.inco-subsol__badge {
	inline-size: 130px;
	block-size: auto;
	display: block;
}

/* ------------------------------------------------------------- partea de jos */
.inco-subsol__jos {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-block-start: 32px;
	text-align: center;
}
.inco-subsol__credit,
.inco-subsol__copyright {
	margin: 0;
	font-weight: 400;
	line-height: 1;
	color: var(--sub-text);
}

/*
 * ⚠️ Pe TELEFON cele două rânduri sunt **Roboto**; pe desktop sunt **Inter**.
 * Nu e o scăpare de-a mea — așa scrie în cele două panouri Figma, confirmat de
 * Seba pentru varianta de telefon. De aceea fontul se declară în fiecare
 * breakpoint, nu o dată.
 */
.inco-subsol__credit,
.inco-subsol__copyright { font-family: Roboto, Inter, system-ui, sans-serif; }
.inco-subsol__credit    { font-size: 14px; letter-spacing: 0; }
.inco-subsol__copyright { font-size: 12px; letter-spacing: .01em; opacity: .6; }

/*
 * 🔴 Numele din credit — îngroșat și în culoarea textului, la ORICE lățime.
 *
 * Regulile astea erau scrise doar în blocul de desktop, deci pe telefon numele
 * rămânea subțire și roșu: `a:active, a:hover { color: #333366 }` și culoarea
 * implicită de link din `reset.css`-ul temei își făceau treaba nestingherite.
 *
 * → Ce ține de ASPECTUL unei componente se scrie o dată, în afara oricărui
 *   `@media`. În breakpoint intră doar ce chiar diferă între lățimi. §4n
 */
.inco-subsol__credit-link {
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}
.inco-subsol__credit-link:hover,
.inco-subsol__credit-link:focus-visible {
	color: inherit;
	text-decoration: underline;
}

/*
 * Ordinea pe TELEFON, din machetă: coloanele de linkuri, apoi contactul, apoi
 * logoul, apoi rândurile de jos. Blocul de brand e un singur element în DOM,
 * deci îl mut la coadă și îi rearanjez copiii — fără marcaj dublat.
 */
@media (max-width: 899.98px) {
	.inco-subsol__brand { order: 9; gap: 24px; }

	.inco-subsol__brand > .inco-subsol__bloc--contact { order: 1; }
	.inco-subsol__brand > .inco-subsol__social        { order: 2; }
	.inco-subsol__brand > .inco-subsol__badges        { order: 3; }
	/* Logoul închide pagina, centrat — ca în machetă. */
	.inco-subsol__brand > .inco-subsol__logo-loc      { order: 4; align-self: center; }

	.inco-subsol__brand,
	.inco-subsol__social,
	.inco-subsol__badges { align-items: flex-start; }

	/*
	 * 🔴 Brandul se întinde pe toată lățimea — altfel logoul n-are unde să se
	 * centreze.
	 *
	 * Toate blocurile sunt `fit-content`, ca linia de sub titlu să fie exact cât
	 * coloana ei. Dar brandul e și cutia în care se centrează logoul, așa că
	 * `align-self: center` îl punea la mijlocul celor ~208px ai badge-ului ANPC,
	 * nu la mijlocul celor 328 ai paginii. Ieșea *aproape* centrat — de aia a
	 * trecut de verificarea mea și l-a prins ochiul lui Seba.
	 *
	 * Copiii rămân pe `flex-start`, deci nimic altceva nu se mută.
	 */
	.inco-subsol__brand { inline-size: 100%; }
}

/* ═══════════════════════════════════════════════ DESKTOP, de la 900 în sus ══
 *
 * Din panourile Figma *(nodul `18050:3921`)*:
 *
 *   Footer     1440 fix × 464 hug · colț sus 40 · padding 48 sus / 24 jos
 *   Container  fill 1440 × 392 hug · gap 40
 *   titlu      Inter 600 · 18 · lh 100% · ls −2%      ← 18, nu 16 ca pe telefon
 *   link       Inter 400 · 16 · lh 100% · ls 0        ← 400 și 16, nu 500 și 14
 *   contact    Inter 500 · 16 · lh 100% · ls 0
 *   grup Links hug 137 × 212 · gap 12 · opacitate 90% ← 8×16 + 7×12 = 212 ✅
 *   social     32×32
 *   credit     Inter 400 · 16 · centrat · opacitate 80%
 *   copyright  Inter 400 · 16 · opacitate 60%
 */
@media (min-width: 900px) {
	.inco-subsol {
		border-start-start-radius: 40px;
		border-start-end-radius: 40px;
		padding: 48px clamp(1.5rem, -1.5rem + 5vw, 3rem) 24px;
	}

	/*
	 * 🔑 CINCI coloane cât conținutul lor, cu golul împărțit egal. Cerut de Seba.
	 *
	 * `repeat(5, auto)` + `space-between`: fiecare coloană își ia lățimea din
	 * text, iar tot ce rămâne se împarte în cele patru goluri dintre ele. Prima
	 * atinge marginea din stânga, ultima pe cea din dreapta — mereu, la orice
	 * lungime de text.
	 *
	 * Măsurat la 1440: coloane `218 · 137 · 229 · 90 · 248`, **patru goluri de
	 * 106**, de la 48 la 1392.
	 *
	 * ⚠️ `gap: 40px` rămâne ca MINIM. `space-between` adaugă peste el, deci la
	 * lățimi mici coloanele nu se lipesc.
	 *
	 * Două variante încercate și lăsate:
	 * · `repeat(4, 1fr)` — coloanele ieșeau egale *(241)*, nu cât textul.
	 * · `inline-size: fit-content` — grupul se strângea la 1081 și stătea centrat,
	 *   dar atunci creditul rămânea cu 131px în afara ultimei coloane.
	 */
	.inco-subsol__interior {
		display: grid;
		grid-template-columns: repeat(5, auto);
		justify-content: space-between;
		align-items: start;
		gap: 40px;
		inline-size: 100%;
		max-inline-size: 1344px;
		margin-inline: auto;
	}

	.inco-subsol__brand { gap: 24px; }

	.inco-subsol__titlu { font-size: 18px; margin-block-end: 8px; padding-block-end: 8px; }

	.inco-subsol__link,
	.inco-subsol__text { font-size: 16px; font-weight: 400; letter-spacing: 0; }

	/* Contactul rămâne Medium; doar linkurile din coloane sunt Regular. */
	.inco-subsol__contact .inco-subsol__link,
	.inco-subsol__contact .inco-subsol__text { font-weight: 500; }

	/* Aceeași cutie ca interiorul, ca să cadă creditul fix sub ultima coloană. */
	.inco-subsol__jos {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		max-inline-size: 1344px;
		margin: 40px auto 0;
	}

	/* Creditul la dreapta, copyrightul centrat — așa e în machetă. */
	.inco-subsol__credit,
	.inco-subsol__copyright { font-family: Inter, system-ui, sans-serif; font-size: 16px; letter-spacing: 0; }
	.inco-subsol__credit    { text-align: right; opacity: .8; }
	.inco-subsol__copyright { text-align: center; opacity: .6; }
}