/* PALETA-PORTOCALIU-LUMINAT-27AUG2026 */
/* ═══════════════════════════════════════════════════════════════════════════
 * CAMERA ÎN STRATURI — 3D din CSS pur, pe tokenii Meșteșug.  v0.2.0
 *
 * v0.2.0 (24 aug, după ochii lui Drago pe live): prima versiune a fost
 * înghițită de secțiunea-părinte — inserasem blocul ÎN grupul procesului, deci
 * moștenea coloana îngustă și fotografia de fundal peste care textul se îneca,
 * iar planșele explodate ieșeau peste butoane. Acum blocul e secțiune de
 * nivel 1, iar aici: scena are spațiu real pentru explodare, adâncimile sunt
 * VARIABILE (o singură scară, scalată pe mobil), panoul e OPAC — text pe
 * fundal plin, niciodată pe fotografie.
 *
 * Mecanica: cinci planșe în `preserve-3d` cu `translateZ(var(--z-N))`;
 * radio + `:has()` schimbă DOAR variabilele. Zero JavaScript.
 * ═══════════════════════════════════════════════════════════════════════════ */

.thr-straturi {
	--st-cerneala: #1E1E20;
	--st-fundal:   #19191A;
	--st-panou:    #242526;
	--st-hartie:   #F6F7F7;
	--st-alama:    #F97015;
	--st-gri:      #616367;
	--st-gri-desc: #9B9DA0;

	/* Scara de adâncime: totul derivă din ea. Pe mobil scade — aceleași
	 * proporții, mai puțin spațiu. */
	--st-pas: 30px;
	--st-salt: 46px;

	/* Adâncimile de repaus. Stările :has() le suprascriu mai jos. */
	--z-0: 0px;
	--z-1: calc(var(--st-pas) * 1);
	--z-2: calc(var(--st-pas) * 2);
	--z-3: calc(var(--st-pas) * 3);
	--z-4: calc(var(--st-pas) * 4);
	--op-0: 1; --op-1: 1; --op-2: 1; --op-3: 1; --op-4: 1;

	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(--st-fundal);
	color: var(--st-hartie);
	overflow: hidden;
	isolation: isolate;
}

/* Filigranul semnului (§83 din editorial): marca meșterului pe colțul
 * desenului tehnic. `z-index: -1` + `isolation` pe secțiune → stă Între
 * fundal și text, nu peste nimic interactiv. */
.thr-straturi::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: clamp(18px, 2.6vw, 34px);
	inset-inline-end: clamp(16px, 2.4vw, 32px);
	inline-size: clamp(56px, 6vw, 84px);
	aspect-ratio: 1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='%23C08A4E'%3E%3Crect width='62' height='14'/%3E%3Crect x='24' y='14' width='14' height='82'/%3E%3Crect x='70' width='14' height='96'/%3E%3Crect x='38' y='44' width='32' height='22'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
	opacity: .1;
	pointer-events: none;
}

.thr-straturi::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%);
}

.thr-straturi__cap {
	max-inline-size: 58ch;
	margin-inline: auto;
	text-align: center;
	margin-block-end: clamp(32px, 4vw, 56px);
}

.thr-straturi__titlu {
	color: var(--st-hartie);
	font-size: clamp(28px, 3.4vw, 46px);
	line-height: 1.1;
	letter-spacing: -0.024em;
	margin-block: 6px 12px;
	text-wrap: balance;
}

.thr-straturi__intro {
	margin: 0;
	color: var(--st-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, pe 5 pagini de serviciu.
	 * 63ch ≈ 77 de semne — vezi motivul complet în `meserii/stil.css`. */
	max-inline-size: 63ch;
}

/* ── COMPOZIȚIA ──────────────────────────────────────────────────────────── */

.thr-straturi__masina {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 48px);
	align-items: stretch;
	max-inline-size: 1240px;
	margin-inline: auto;
}

@media (min-width: 920px) {
	.thr-straturi__masina {
		grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr);
	}
}

/* ── SCENA 3D — cu loc pentru explodare ──────────────────────────────────── */

.thr-straturi__scena {
	perspective: 1500px;
	display: grid;
	place-items: end center;
	min-block-size: clamp(420px, 46vw, 560px);
	padding-block-end: clamp(30px, 4vw, 56px);
}

.thr-straturi {
	/* Geometria implicită: pardoseală văzută de sus (tema „baie"). Temele o
	 * suprascriu — pereții stau în picioare, lamela e lată, panoul e înalt. */
	--rot-x: 62deg;
	--rot-y: 0deg;
	--rot-z: -38deg;
	--raport-placa: 1;
	--latime-cutie: clamp(240px, 27vw, 340px);
}

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

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

.thr-straturi__placa--0 { transform: translateZ(var(--z-0)); opacity: var(--op-0); }
.thr-straturi__placa--1 { transform: translateZ(var(--z-1)); opacity: var(--op-1); }
.thr-straturi__placa--2 { transform: translateZ(var(--z-2)); opacity: var(--op-2); }
.thr-straturi__placa--3 { transform: translateZ(var(--z-3)); opacity: var(--op-3); }
.thr-straturi__placa--4 { transform: translateZ(var(--z-4)); opacity: var(--op-4); }

.thr-straturi__cota {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: rgba(246, 247, 247, .8);
	/* Contra-rotirea cotei = inversul cutiei, în ordine inversă — altfel
	 * numărul stă culcat odată cu planșa. */
	transform: rotateZ(calc(var(--rot-z) * -1))
	           rotateY(calc(var(--rot-y) * -1))
	           rotateX(calc(var(--rot-x) * -1));
}


/* ── MATERIALELE — clase, nu indecși: aceeași planșă poate fi beton într-o
 * temă și tencuială în alta. `mat-erou` e SINGURA planșă de alamă din orice
 * temă: stratul pe care graba îl sare și meseria îl face. */

.thr-straturi__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-straturi__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-straturi__placa--mat-sapa {
	background:
		repeating-linear-gradient(0deg, rgba(30, 30, 32, .25) 0 1px, transparent 1px 9px),
		#4C4E51;
}

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

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

.thr-straturi__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-straturi__placa--mat-gresie .thr-straturi__cota { color: #616367; }

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

.thr-straturi__placa--mat-vopsea .thr-straturi__cota { color: #616367; }

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

.thr-straturi__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-straturi__placa--mat-rigips .thr-straturi__cota { color: #616367; }

.thr-straturi__placa--mat-parchet {
	background:
		repeating-linear-gradient(90deg, rgba(30, 30, 32, .3) 0 1px, transparent 1px 17%),
		repeating-linear-gradient(0deg, rgba(30, 30, 32, .12) 0 1px, transparent 1px 8px),
		linear-gradient(145deg, #6D6F74 0%, #5D5F63 100%);
}

.thr-straturi__placa--mat-lemn {
	background:
		repeating-linear-gradient(0deg, rgba(30, 30, 32, .16) 0 1px, transparent 1px 7px),
		#75787D;
}

.thr-straturi__placa--mat-erou {
	background:
		repeating-linear-gradient(45deg, rgba(30, 30, 32, .22) 0 2px, transparent 2px 11px),
		linear-gradient(135deg, #F97A26 0%, #F97015 55%, #DF5F09 100%);
	box-shadow: 0 0 0 1px rgba(249, 112, 21, .5),
	            0 18px 44px -18px rgba(249, 112, 21, .38);
}

.thr-straturi__placa--mat-erou .thr-straturi__cota { color: #1E1E20; }

/* ── EXPLODAREA: stările schimbă DOAR variabilele ────────────────────────── */

.thr-straturi:has(.thr-straturi__r--0:checked) {
	--z-1: calc(var(--st-pas) * 1 + var(--st-salt) * 2.4);
	--z-2: calc(var(--st-pas) * 2 + var(--st-salt) * 3.2);
	--z-3: calc(var(--st-pas) * 3 + var(--st-salt) * 4.0);
	--z-4: calc(var(--st-pas) * 4 + var(--st-salt) * 4.8);
	--op-1: .14; --op-2: .14; --op-3: .14; --op-4: .14;
}

.thr-straturi:has(.thr-straturi__r--1:checked) {
	--z-2: calc(var(--st-pas) * 2 + var(--st-salt) * 2.6);
	--z-3: calc(var(--st-pas) * 3 + var(--st-salt) * 3.4);
	--z-4: calc(var(--st-pas) * 4 + var(--st-salt) * 4.2);
	--op-2: .14; --op-3: .14; --op-4: .14;
}

.thr-straturi:has(.thr-straturi__r--2:checked) {
	--z-3: calc(var(--st-pas) * 3 + var(--st-salt) * 2.8);
	--z-4: calc(var(--st-pas) * 4 + var(--st-salt) * 3.6);
	--op-3: .14; --op-4: .14;
}

.thr-straturi:has(.thr-straturi__r--3:checked) {
	--z-4: calc(var(--st-pas) * 4 + var(--st-salt) * 3.0);
	--op-4: .14;
}

/* Stratul ales: conturul de alamă. */
.thr-straturi:has(.thr-straturi__r--0:checked) .thr-straturi__placa--0,
.thr-straturi:has(.thr-straturi__r--1:checked) .thr-straturi__placa--1,
.thr-straturi:has(.thr-straturi__r--2:checked) .thr-straturi__placa--2,
.thr-straturi:has(.thr-straturi__r--3:checked) .thr-straturi__placa--3,
.thr-straturi:has(.thr-straturi__r--4:checked) .thr-straturi__placa--4 {
	box-shadow: 0 0 0 2px var(--st-alama),
	            0 26px 64px -24px rgba(249, 112, 21, .6);
}

/* ── PANOUL — OPAC, textul niciodată pe fotografie sau pe scenă ──────────── */

.thr-straturi__panou {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: clamp(20px, 2.6vw, 32px);
	background: var(--st-panou);
	border-radius: 3px;
	border-block-start: 2px solid var(--st-alama);
	box-shadow: var(--umbra-scena, 26px 33px 80px -24px rgba(4, 6, 10, .6));
}

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

.thr-straturi__butoane {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.thr-straturi__buton {
	display: grid;
	grid-template-columns: 34px 1fr;
	grid-template-areas: "numar nume" "numar scurt";
	column-gap: 12px;
	align-items: baseline;
	min-block-size: 52px;
	padding: 10px 14px;
	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-straturi__buton:hover { background: rgba(246, 247, 247, .06); }
}

.thr-straturi__r:checked + .thr-straturi__buton {
	background: rgba(249, 112, 21, .13);
	border-inline-start-color: var(--st-alama);
}

.thr-straturi__r:focus-visible + .thr-straturi__buton {
	outline: 2px solid var(--st-alama);
	outline-offset: 2px;
}

.thr-straturi__buton-numar {
	grid-area: numar;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 700;
	color: var(--st-alama);
}

.thr-straturi__buton-nume {
	grid-area: nume;
	font-family: "Manrope", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--st-hartie);
}

.thr-straturi__buton-scurt {
	grid-area: scurt;
	font-size: 13px;
	color: var(--st-gri-desc);
}

.thr-straturi__descrieri {
	padding: 18px 20px;
	background: rgba(30, 30, 32, .55);
	border-inline-start: 2px solid var(--st-alama);
	border-radius: 0 2px 2px 0;
	min-block-size: 120px;
	display: grid;
	align-items: center;
}

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

.thr-straturi:has(.thr-straturi__r--0:checked) .thr-straturi__descriere--0,
.thr-straturi:has(.thr-straturi__r--1:checked) .thr-straturi__descriere--1,
.thr-straturi:has(.thr-straturi__r--2:checked) .thr-straturi__descriere--2,
.thr-straturi:has(.thr-straturi__r--3:checked) .thr-straturi__descriere--3,
.thr-straturi:has(.thr-straturi__r--4:checked) .thr-straturi__descriere--4 {
	display: block;
}

/* ── FĂRĂ :has(): scena statică, toate descrierile ───────────────────────── */

@supports not (selector(:has(input))) {
	.thr-straturi__descriere { display: block; margin-block-end: 10px; }
}

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

/* ── SUB 920px: scara de adâncime scade odată cu scena ───────────────────── */

@media (max-width: 919px) {
	.thr-straturi {
		--st-pas: 20px;
		--st-salt: 30px;
	}

	.thr-straturi__scena {
		min-block-size: clamp(320px, 92vw, 400px);
		padding-block-end: 20px;
	}

	.thr-straturi__cutie {
		inline-size: clamp(190px, 54vw, 250px);
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
 * GEOMETRIA FIECĂREI MESERII — „diferențiate, să se distingă" (Drago, 24 aug).
 *
 * Aceeași familie, alt unghi: pardoselile stau CULCATE (privite de sus),
 * pereții stau ÎN PICIOARE (secțiune văzută din unghi). Explodarea rămâne
 * identică — translateZ e mereu normala planșei, indiferent de rotația cutiei.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* BAIA — referința: pardoseală pătrată, de sus. (implicită, nimic de scris) */

/* PARCHETUL — tot pardoseală, dar LAMELĂ: lată, unghi oglindit, pas fin
 * (straturile parchetului sunt subțiri). */
.thr-straturi--pardoseala-parchet {
	--rot-x: 58deg;
	--rot-z: 32deg;
	--raport-placa: 1.5;
	--latime-cutie: clamp(280px, 30vw, 400px);
	--st-pas: 24px;
}

/* PERETELE ZUGRĂVIT — stă în picioare: planșe portret, văzute din unghi.
 * Straturile de finisaj sunt subțiri — pas mic, explodare amplă. */
.thr-straturi--perete-zugravit {
	--rot-x: 6deg;
	--rot-y: -46deg;
	--rot-z: 0deg;
	--raport-placa: 0.78;
	--latime-cutie: clamp(220px, 24vw, 300px);
	--st-pas: 22px;
	--st-salt: 52px;
}

/* RIGIPSUL — panou ÎNALT în secțiune: straturile peretelui sunt groase —
 * pas mare, să se vadă grosimea. */
.thr-straturi--perete-rigips {
	--rot-x: 5deg;
	--rot-y: 44deg;
	--rot-z: 0deg;
	--raport-placa: 0.66;
	--latime-cutie: clamp(200px, 22vw, 280px);
	--st-pas: 38px;
}

/* ELECTRICELE — adâncimea peretelui, cu FIRUL: singura temă cu o semnătură
 * grafică în plus — linia de alamă care iese din stratul cablului, ca un
 * traseu care intră și pleacă din cadru. */
.thr-straturi--perete-electric {
	--rot-x: 9deg;
	--rot-y: -40deg;
	--rot-z: 0deg;
	--raport-placa: 0.82;
	--latime-cutie: clamp(220px, 24vw, 300px);
	--st-pas: 30px;
}

.thr-straturi--perete-electric .thr-straturi__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);
}

/* Pereții în picioare stau CENTRAȚI în scenă, nu la baza ei — un perete
 * așezat pe fundul scenei arată căzut. */
.thr-straturi--perete-zugravit .thr-straturi__scena,
.thr-straturi--perete-rigips .thr-straturi__scena,
.thr-straturi--perete-electric .thr-straturi__scena {
	place-items: center;
	padding-block-end: 0;
}

/* Glow-ul de fundal migrează per temă — aceeași lumină, alt colț. */
.thr-straturi--perete-zugravit { background: radial-gradient(110% 90% at 18% 10%, rgba(249, 112, 21, .08) 0%, transparent 55%), var(--st-fundal); }
.thr-straturi--perete-rigips   { background: radial-gradient(110% 90% at 82% 10%, rgba(249, 112, 21, .08) 0%, transparent 55%), var(--st-fundal); }
.thr-straturi--perete-electric { background: radial-gradient(110% 90% at 50% 100%, rgba(249, 112, 21, .09) 0%, transparent 55%), var(--st-fundal); }
.thr-straturi--pardoseala-parchet { background: radial-gradient(110% 90% at 30% 0%, rgba(249, 112, 21, .07) 0%, transparent 55%), var(--st-fundal); }

/* Pe mobil, pereții își strâng lățimea odată cu scena. */
@media (max-width: 919px) {
	.thr-straturi--perete-zugravit,
	.thr-straturi--perete-rigips,
	.thr-straturi--perete-electric {
		--latime-cutie: clamp(170px, 46vw, 220px);
	}

	.thr-straturi--pardoseala-parchet {
		--latime-cutie: clamp(210px, 58vw, 270px);
	}
}

/* ── PE HÂRTIE ───────────────────────────────────────────────────────────── */

@media print {
	.thr-straturi { background: transparent; color: #1E1E20; }
	.thr-straturi__scena { display: none; }
	.thr-straturi__panou { background: transparent; box-shadow: none; }
	.thr-straturi__descriere { display: block !important; color: #1E1E20; }
	.thr-straturi__titlu, .thr-straturi__buton-nume { color: #1E1E20; }
	.thr-straturi__descrieri { background: transparent; }
}