/* PALETA-PORTOCALIU-LUMINAT-27AUG2026 */
/* ═══════════════════════════════════════════════════════════════════════════
 * VITRINA MESERIILOR — nouă lumi 3D, un selector.  v0.2.0
 *
 * v0.2.0 (2 sep 2026): comutarea FĂRĂ flash. Văzut de Drago pe desktop:
 * „niște flickere când schimb între ele". Două cauze, amândouă tratate:
 * (1) lumea veche și cea nouă făceau cross-fade SIMULTAN (380ms amândouă) —
 *     două straturi semi-opace suprapuse pe fundal închis = fulger de
 *     luminozitate la mijlocul tranziției. Acum ieșirea e scurtă (200ms) și
 *     intrarea începe cu 80ms mai târziu: o respirație spre întuneric, nu
 *     un flash.
 * (2) fișa comuta cu `display: none → flex` — salt INSTANT, imposibil de
 *     tranziționat, cu înălțime variabilă. Acum toate detaliile stau
 *     suprapuse (grid-area 1/1, display permanent) și comută prin
 *     visibility + opacity — fișa nu mai săltă și nu mai clipește; bonus:
 *     înălțimea ei e a celui mai înalt pitch, stabilă la orice comutare.
 *
 * Scena stă pe antracit, ca toate mașinile casei. Fiecare meserie e o „lume":
 * o cutie de plăci cu geometria ei (pardoselile culcate, pereții în picioare,
 * lamela lată — valorile măsurate în straturi v0.4). Lumea activă se ridică
 * și se explodează; restul stau stinse dedesubt. Zero JavaScript.
 * ═══════════════════════════════════════════════════════════════════════════ */

.thr-mes {
	--mes-fundal:   #19191A;
	--mes-panou:    #242526;
	--mes-hartie:   #F6F7F7;
	--mes-alama:    #F97015;
	--mes-gri-desc: #9B9DA0;

	position: relative;
	margin-block: 0;
	padding: clamp(56px, 7vw, 104px) clamp(20px, 3.4vw, 48px);
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(249, 112, 21, .07) 0%, transparent 55%),
		var(--mes-fundal);
	color: var(--mes-hartie);
	overflow: hidden;
}

.thr-mes::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 1px;
	background: linear-gradient(90deg,
		transparent 0%, rgba(249, 112, 21, .7) 18%,
		rgba(249, 112, 21, .7) 82%, transparent 100%);
}

/* Specificitate dublată: pe Acasă, regulile secțiunilor full-bleed calcă
 * max-inline-size pe copiii direcți — măsurat: capul ieșea 1329px și
 * eticheta-flex pacheta în stânga secțiunii. */
.thr-mes .thr-mes__cap {
	max-inline-size: 58ch;
	margin-inline: auto;
	text-align: center;
	margin-block-end: clamp(30px, 4vw, 52px);
}

.thr-mes .thr-mes__cap .thr-eticheta {
	justify-content: center;
}

.thr-mes__titlu {
	color: var(--mes-hartie);
	font-size: clamp(28px, 3.6vw, 48px);
	/* 1,08 → 1,10 (M3-07, 16 sep 2026): poarta din perfectiune §5b cere ≥1,10 pe
	 * titluri. Titlul stă pe un rând la toate lățimile măsurate, deci schimbarea
	 * nu mută nimic vizual — doar scoate singura interlinie sub prag din site. */
	line-height: 1.10;
	letter-spacing: -0.024em;
	margin-block: 6px 12px;
	text-wrap: balance;
}

.thr-mes__intro {
	margin: 0;
	color: var(--mes-gri-desc);
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.6;
	text-wrap: pretty;
	/* MĂSURAT 16 sep 2026 (M3-08): 155 de semne pe rând la 1440 — introducerea
	 * curgea pe toată lățimea secțiunii (1344 px). Poarta din §5b cere ≤80.
	 * Cifra e măsurată, nu aleasă: lățimea medie a semnului pe alfabetul
	 * românesc e 0,814 × lățimea lui „0”, deci 63ch ≈ 77 de semne — și rămâne
	 * adevărată la orice lățime, fiindcă `ch` se scalează cu fontul fluid.
	 * (Propunerea veche de 72ch n-ar fi schimbat nimic: dă tot ~88 de semne.) */
	max-inline-size: 63ch;
}

.thr-mes__masina {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(380px, 1.15fr);
	gap: clamp(24px, 3.4vw, 56px);
	align-items: center;
	max-inline-size: 1220px;
	margin-inline: auto;
}

/* ── SCENA: nouă lumi suprapuse, una vie ─────────────────────────────────── */

.thr-mes__scena {
	display: grid;
	place-items: center;
	perspective: 1400px;
	min-block-size: clamp(340px, 34vw, 460px);
}

.thr-mes__lume {
	grid-area: 1 / 1;
	opacity: 0;
	transform: scale(.9);
	/* IEȘIREA e scurtă și fără întârziere — lumea veche se stinge înainte să
	 * se aprindă cea nouă (anti-flash, v0.2.0). */
	transition: opacity 200ms ease, transform 480ms cubic-bezier(.2, .7, .3, 1);
	pointer-events: none;

	/* Geometria implicită: pardoseală văzută de sus (referința „baie"). */
	--rot-x: 62deg;
	--rot-y: 0deg;
	--rot-z: -38deg;
	--raport: 1;
	--latime: clamp(220px, 21vw, 300px);
	--pas: 30px;
}

.thr-mes__cutie {
	inline-size: var(--latime);
	aspect-ratio: var(--raport);
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(var(--rot-x)) rotateY(var(--rot-y)) rotateZ(var(--rot-z));
}

.thr-mes__placa {
	position: absolute;
	inset: 0;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(246, 247, 247, .1);
	transform: translateZ(0);
	transition: transform 460ms cubic-bezier(.2, .7, .3, 1);
}

/* Lumea ACTIVĂ: se aprinde și își explodează plăcile, în cascadă. */
.thr-mes:has(.thr-mes__r--apartament:checked) .thr-mes__lume--apartament,
.thr-mes:has(.thr-mes__r--casa:checked)       .thr-mes__lume--casa,
.thr-mes:has(.thr-mes__r--baie:checked)       .thr-mes__lume--baie,
.thr-mes:has(.thr-mes__r--bucatarie:checked)  .thr-mes__lume--bucatarie,
.thr-mes:has(.thr-mes__r--rigips:checked)     .thr-mes__lume--rigips,
.thr-mes:has(.thr-mes__r--zugraveli:checked)  .thr-mes__lume--zugraveli,
.thr-mes:has(.thr-mes__r--gresie:checked)     .thr-mes__lume--gresie,
.thr-mes:has(.thr-mes__r--electrice:checked)  .thr-mes__lume--electrice,
.thr-mes:has(.thr-mes__r--sanitare:checked)   .thr-mes__lume--sanitare {
	opacity: 1;
	transform: scale(1);
	/* INTRAREA așteaptă 80ms — până atunci lumea veche a apucat să se stingă. */
	transition: opacity 340ms ease 80ms, transform 480ms cubic-bezier(.2, .7, .3, 1) 80ms;
}

.thr-mes__lume .thr-mes__placa--0 { transition-delay: 0ms; }
.thr-mes__lume .thr-mes__placa--1 { transition-delay: 50ms; }
.thr-mes__lume .thr-mes__placa--2 { transition-delay: 100ms; }
.thr-mes__lume .thr-mes__placa--3 { transition-delay: 150ms; }
.thr-mes__lume .thr-mes__placa--4 { transition-delay: 200ms; }

.thr-mes:has(.thr-mes__r--apartament:checked) .thr-mes__lume--apartament .thr-mes__placa,
.thr-mes:has(.thr-mes__r--casa:checked)       .thr-mes__lume--casa .thr-mes__placa,
.thr-mes:has(.thr-mes__r--baie:checked)       .thr-mes__lume--baie .thr-mes__placa,
.thr-mes:has(.thr-mes__r--bucatarie:checked)  .thr-mes__lume--bucatarie .thr-mes__placa,
.thr-mes:has(.thr-mes__r--rigips:checked)     .thr-mes__lume--rigips .thr-mes__placa,
.thr-mes:has(.thr-mes__r--zugraveli:checked)  .thr-mes__lume--zugraveli .thr-mes__placa,
.thr-mes:has(.thr-mes__r--gresie:checked)     .thr-mes__lume--gresie .thr-mes__placa,
.thr-mes:has(.thr-mes__r--electrice:checked)  .thr-mes__lume--electrice .thr-mes__placa,
.thr-mes:has(.thr-mes__r--sanitare:checked)   .thr-mes__lume--sanitare .thr-mes__placa {
	transform: translateZ(calc(var(--pas) * var(--idx, 0)));
}

.thr-mes__placa--0 { --idx: 0; }
.thr-mes__placa--1 { --idx: 1; }
.thr-mes__placa--2 { --idx: 2; }
.thr-mes__placa--3 { --idx: 3; }
.thr-mes__placa--4 { --idx: 4; }

/* ── GEOMETRIILE — aceleași unghiuri măsurate în straturi v0.4 ───────────── */

/* Apartamentul: etapele, culcate, pas mare — se citește stiva. */
.thr-mes__lume--apartament { --pas: 36px; }

/* Casa: pardoseală oglindită, cinci straturi. */
.thr-mes__lume--casa { --rot-x: 58deg; --rot-z: 32deg; --pas: 30px; --raport: 1.1; }

/* Bucătăria: planul blatului, cu triunghiul de lucru desenat pe el. */
.thr-mes__lume--bucatarie { --raport: 1.25; --latime: clamp(250px, 24vw, 340px); }

/* Rigipsul: panou înalt în secțiune, pas gros. */
.thr-mes__lume--rigips { --rot-x: 5deg; --rot-y: 44deg; --rot-z: 0deg; --raport: .66; --latime: clamp(180px, 17vw, 240px); --pas: 38px; }

/* Zugrăvelile: portret, straturi subțiri. */
.thr-mes__lume--zugraveli { --rot-x: 6deg; --rot-y: -46deg; --rot-z: 0deg; --raport: .78; --latime: clamp(190px, 18vw, 250px); --pas: 22px; }

/* Gresia/parchetul: lamelă lată, pas fin. */
.thr-mes__lume--gresie { --rot-x: 58deg; --rot-z: 32deg; --raport: 1.5; --latime: clamp(250px, 25vw, 350px); --pas: 24px; }

/* Electricele: adâncimea peretelui, cu firul de alamă pe stratul-erou. */
.thr-mes__lume--electrice { --rot-x: 9deg; --rot-y: -40deg; --rot-z: 0deg; --raport: .82; --latime: clamp(190px, 18vw, 250px); }

/* Sanitarele: planșa traseului, în picioare. */
.thr-mes__lume--sanitare { --rot-x: 7deg; --rot-y: -42deg; --rot-z: 0deg; --raport: .8; --latime: clamp(200px, 19vw, 260px); }

/* ── MATERIALELE — paleta din straturi v0.4 (copie declarată: dacă se
 * schimbă una, se schimbă amândouă — notat în jurnal) ────────────────────── */

.thr-mes__placa--mat-beton {
	background:
		radial-gradient(circle at 30% 40%, rgba(246, 247, 247, .07) 1px, transparent 1.6px),
		radial-gradient(circle at 70% 80%, rgba(246, 247, 247, .05) 1px, transparent 1.6px),
		#333436;
	background-size: 14px 14px, 22px 22px, auto;
}

.thr-mes__placa--mat-tencuiala {
	background:
		radial-gradient(circle at 50% 50%, rgba(30, 30, 32, .3) 1px, transparent 1.8px),
		#414244;
	background-size: 9px 9px, auto;
}

.thr-mes__placa--mat-sapa {
	background:
		repeating-linear-gradient(0deg, rgba(30, 30, 32, .25) 0 1px, transparent 1px 9px),
		#4C4E51;
}

.thr-mes__placa--mat-glet { background: linear-gradient(145deg, #6D6F73 0%, #616367 100%); }

.thr-mes__placa--mat-adeziv {
	background:
		repeating-linear-gradient(90deg, rgba(30, 30, 32, .3) 0 4px, transparent 4px 12px),
		#616367;
}

.thr-mes__placa--mat-gresie {
	background:
		repeating-linear-gradient(0deg, rgba(97, 99, 103, .5) 0 1px, transparent 1px 25%),
		repeating-linear-gradient(90deg, rgba(97, 99, 103, .5) 0 1px, transparent 1px 25%),
		linear-gradient(145deg, #F6F7F7 0%, #E7E8E9 100%);
}

.thr-mes__placa--mat-vopsea { background: linear-gradient(145deg, #F6F7F7 0%, #ECECED 100%); }

.thr-mes__placa--mat-profil {
	background:
		repeating-linear-gradient(90deg, rgba(246, 247, 247, .14) 0 3px, transparent 3px 21%),
		#292A2B;
}

.thr-mes__placa--mat-rigips {
	background:
		repeating-linear-gradient(90deg, rgba(97, 99, 103, .35) 0 1px, transparent 1px 33%),
		linear-gradient(145deg, #D1D2D3 0%, #C4C5C8 100%);
}

.thr-mes__placa--mat-parchet {
	background:
		repeating-linear-gradient(32deg, rgba(30, 30, 32, .35) 0 1px, transparent 1px 14px),
		linear-gradient(145deg, #76787D 0%, #616367 100%);
}

.thr-mes__placa--mat-lemn {
	background:
		repeating-linear-gradient(90deg, rgba(30, 30, 32, .22) 0 1px, transparent 1px 11px),
		linear-gradient(145deg, #6C6E72 0%, #57595D 100%);
}

.thr-mes__placa--mat-erou {
	background: linear-gradient(135deg, #FB9C5D 0%, #F97015 55%, #DE5E08 100%);
	box-shadow: 0 0 0 1px rgba(251, 156, 93, .5), 0 0 26px rgba(249, 112, 21, .3);
}

/* Semnăturile grafice: firul electric și traseul de apă. */
.thr-mes__lume--electrice .thr-mes__placa--mat-erou::after {
	content: "";
	position: absolute;
	inset-block-start: 46%;
	inset-inline-start: -14%;
	inline-size: 128%;
	block-size: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg,
		transparent 0%, #FB9C5D 8%, #F97015 50%, #FB9C5D 92%, transparent 100%);
	box-shadow: 0 0 12px rgba(251, 156, 93, .5);
}

.thr-mes__lume--sanitare .thr-mes__placa--mat-beton::before {
	content: "";
	position: absolute;
	inset-block: 8% 8%;
	inset-inline-start: 50%;
	inline-size: 3px;
	margin-inline-start: -1.5px;
	border-radius: 2px;
	background: linear-gradient(180deg, #FB9C5D 0%, #F97015 100%);
	box-shadow: 0 0 12px rgba(251, 156, 93, .45);
}

.thr-mes__lume--sanitare .thr-mes__placa--mat-beton::after {
	content: "";
	position: absolute;
	inset-block-start: 62%;
	inset-inline: 16% 16%;
	block-size: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg,
		transparent 0%, #F97015 18%, #FB9C5D 50%, #F97015 82%, transparent 100%);
}

.thr-mes__lume--bucatarie .thr-mes__placa--mat-lemn::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom right, transparent calc(50% - 1.5px), rgba(251, 156, 93, .9) 50%, transparent calc(50% + 1.5px)) no-repeat 6% 4% / 44% 66%,
		linear-gradient(to bottom left,  transparent calc(50% - 1.5px), rgba(251, 156, 93, .9) 50%, transparent calc(50% + 1.5px)) no-repeat 94% 4% / 44% 66%,
		linear-gradient(0deg, transparent calc(50% - 1.5px), rgba(251, 156, 93, .9) 50%, transparent calc(50% + 1.5px)) no-repeat 50% 78% / 64% 3px;
	background-origin: content-box;
	padding: 8%;
	box-sizing: border-box;
	filter: drop-shadow(0 0 8px rgba(251, 156, 93, .35));
}

/* ── PANOUL ──────────────────────────────────────────────────────────────── */

.thr-mes__panou {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(20px, 2.4vw, 30px);
	background: var(--mes-panou);
	border-radius: 3px;
	border-block-start: 2px solid var(--mes-alama);
	box-shadow: var(--umbra-scena, 26px 33px 80px -24px rgba(4, 6, 10, .6));
}

.thr-mes__r {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.thr-mes__butoane {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
}

.thr-mes__buton {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-block-size: 74px;
	padding: 10px 12px;
	cursor: pointer;
	border-inline-start: 2px solid transparent;
	border-radius: 0 2px 2px 0;
	transition: background-color 160ms ease, border-color 160ms ease;
}

@media (hover: hover) {
	.thr-mes__buton:hover { background: rgba(246, 247, 247, .06); }
}

.thr-mes__r:checked + .thr-mes__buton {
	/* .13 dadea un fundal compus de #402F24, pe care numarul portocaliu
	   masura 4,45:1 — sub pragul de 4,5 (axe-core, 10 sep 2026). .10 il
	   duce la 5,1:1. Semnalul de selectie ramane: bordura din stanga il
	   poarta oricum. */
	background: rgba(249, 112, 21, .10);
	border-inline-start-color: var(--mes-alama);
}

.thr-mes__r:focus-visible + .thr-mes__buton {
	outline: 2px solid var(--mes-alama);
	outline-offset: 2px;
}

.thr-mes__buton-numar {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 700;
	color: var(--mes-alama);
}

.thr-mes__buton-nume {
	font-family: "Manrope", system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--mes-hartie);
}

.thr-mes__buton-scurt {
	font-size: 12px;
	line-height: 1.3;
	color: var(--mes-gri-desc);
}

/* ── FIȘA: pitch + link + telefon ────────────────────────────────────────── */

.thr-mes__fisa {
	padding: 18px 20px;
	background: rgba(30, 30, 32, .55);
	border-inline-start: 2px solid var(--mes-alama);
	border-radius: 0 2px 2px 0;
	min-block-size: 148px;
	display: grid;
}

.thr-mes__detaliu {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	visibility: hidden;
	opacity: 0;
	transition: opacity 160ms ease, visibility 0s linear 200ms;
}

.thr-mes:has(.thr-mes__r--apartament:checked) .thr-mes__detaliu--apartament,
.thr-mes:has(.thr-mes__r--casa:checked)       .thr-mes__detaliu--casa,
.thr-mes:has(.thr-mes__r--baie:checked)       .thr-mes__detaliu--baie,
.thr-mes:has(.thr-mes__r--bucatarie:checked)  .thr-mes__detaliu--bucatarie,
.thr-mes:has(.thr-mes__r--rigips:checked)     .thr-mes__detaliu--rigips,
.thr-mes:has(.thr-mes__r--zugraveli:checked)  .thr-mes__detaliu--zugraveli,
.thr-mes:has(.thr-mes__r--gresie:checked)     .thr-mes__detaliu--gresie,
.thr-mes:has(.thr-mes__r--electrice:checked)  .thr-mes__detaliu--electrice,
.thr-mes:has(.thr-mes__r--sanitare:checked)   .thr-mes__detaliu--sanitare {
	visibility: visible;
	opacity: 1;
	transition: opacity 240ms ease 70ms, visibility 0s linear 0s;
}

.thr-mes__pitch {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.62;
	color: rgba(246, 247, 247, .92);
	text-wrap: pretty;
}

.thr-mes__link {
	align-self: flex-start;
	font-family: "Manrope", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mes-alama);
	border-block-end: 1px solid color-mix(in srgb, var(--mes-alama) 55%, transparent);
	padding-block-end: 3px;
	transition: color 160ms ease, border-color 160ms ease;
}

.thr-mes__link:hover,
.thr-mes__link:focus-visible {
	color: var(--mes-hartie);
	border-color: var(--mes-hartie);
}

.thr-mes__suna {
	margin: 14px 0 0;
	padding-block-start: 14px;
	border-block-start: 1px solid rgba(246, 247, 247, .12);
	font-size: 14px;
	color: var(--mes-gri-desc);
}

.thr-mes__suna a {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--mes-hartie);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: color-mix(in srgb, var(--mes-alama) 65%, transparent);
	white-space: nowrap;
}

.thr-mes__suna a:hover,
.thr-mes__suna a:focus-visible {
	color: var(--mes-alama);
}

/* ── FĂRĂ :has(): prima lume vizibilă, toate fișele desfăcute ────────────── */

@supports not (selector(:has(input))) {
	.thr-mes__lume--apartament { opacity: 1; transform: scale(1); }
	.thr-mes__detaliu {
		grid-area: auto;
		visibility: visible;
		opacity: 1;
		position: static;
		margin-block-end: 14px;
	}
}

/* ── SUB 920px: coloană, scena mai strânsă, butoane compacte ─────────────── */

@media (max-width: 919px) {
	.thr-mes__masina {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.thr-mes__scena {
		min-block-size: clamp(280px, 74vw, 360px);
	}

	.thr-mes__lume { --latime: clamp(190px, 52vw, 250px); }

	.thr-mes__buton {
		min-block-size: 64px;
		padding: 8px 10px;
	}

	.thr-mes__buton-nume { font-size: 13px; }
	.thr-mes__buton-scurt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.thr-mes__lume,
	.thr-mes__placa { transition: none; }
}

@media print {
	.thr-mes { background: transparent; color: #1E1E20; }
	.thr-mes__scena { display: none; }
	.thr-mes__panou { background: transparent; box-shadow: none; }
	.thr-mes__detaliu { grid-area: auto; visibility: visible !important; opacity: 1 !important; position: static; }
	.thr-mes__titlu, .thr-mes__buton-nume { color: #1E1E20; }
	.thr-mes__pitch { color: #1E1E20; }
}