/* PALETA-PORTOCALIU-LUMINAT-27AUG2026 */
/* ═══════════════════════════════════════════════════════════════════════════
 * REPER DE COST — aspectul.
 *
 * Aici stă DOAR cum arată. Valorile (prețuri, suprafețe) se generează din
 * `render.php`, ca să nu existe niciodată o cifră în PHP și alta, veche, aici.
 *
 * Foaia se încarcă prin `style` din `block.json`, deci WordPress o trimite
 * NUMAI pe paginile care conțin blocul. Restul site-ului n-o vede.
 * ═══════════════════════════════════════════════════════════════════════════ */

@property --thr-mp        { syntax: "<integer>"; initial-value: 0; inherits: true; }
@property --thr-pret-min  { syntax: "<integer>"; initial-value: 0; inherits: true; }
@property --thr-pret-max  { syntax: "<integer>"; initial-value: 0; inherits: true; }
@property --thr-total-min { syntax: "<integer>"; initial-value: 0; inherits: true; }
@property --thr-total-max { syntax: "<integer>"; initial-value: 0; inherits: true; }

.thr-deviz {
	--dz-cerneala:  #1E1E20;
	--dz-hartie:    #F6F7F7;
	--dz-alama:     #F97015;
	--dz-gri-cald:  #616367;
	--dz-gri-desc:  #9B9DA0;

	position: relative;
	margin-block: clamp(56px, 8vw, 104px);
	padding: clamp(28px, 4vw, 56px) clamp(20px, 3.4vw, 48px);
	background: var(--dz-hartie);
	color: var(--dz-cerneala);
	border-radius: 3px;

	/* Cusătura de alamă pe muchia de sus — semnul casei, aceeași ca la banda de
	 * dovadă din hero. Un obiect nou pe site nu-și inventează propriul semn. */
	border-block-start: 2px solid var(--dz-alama);
	box-shadow: 0 22px 60px -34px rgba(30, 30, 32, .32);
}

/* ── CAPUL ───────────────────────────────────────────────────────────────── */

.thr-deviz__cap {
	max-inline-size: 62ch;
	margin-block-end: clamp(28px, 3.6vw, 44px);
}

.thr-deviz__titlu {
	font-size: clamp(27px, 3.4vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.022em;
	margin-block: 6px 12px;
	text-wrap: balance;
}

.thr-deviz__intro {
	font-size: clamp(14.5px, 1.15vw, 16.5px);
	line-height: 1.62;
	color: var(--dz-gri-cald);
	margin: 0;
	text-wrap: pretty;
	/* 68ch: decizia lui Drago (16 sep 2026), luată pe o cifră greșită — rândul real
	 * are 81 de semne, nu 48 (poarta pe rânduri reale, 17 sep). Redeschisă la Drago;
	 * istoria în JURNAL R370 și R372. `ch` se scalează cu fontul fluid. */
	max-inline-size: 68ch;
}

.thr-deviz__intro strong {
	color: var(--dz-cerneala);
	font-weight: 700;
}

/* ── GRUPURILE DE ALEGERE ────────────────────────────────────────────────── */

.thr-deviz__grup {
	border: 0;
	padding: 0;
	margin: 0 0 clamp(22px, 2.8vw, 34px);
}

.thr-deviz__legenda {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	margin-block-end: 12px;

	font-family: "Manrope", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--dz-cerneala);
}

/* Numărul pasului: cifra în cerc de alamă — nu o pictogramă descărcată de
 * undeva, ci reperul de pe rigla brandului. */
.thr-deviz__pas {
	display: inline-grid;
	place-items: center;
	inline-size: 22px;
	block-size: 22px;
	border: 1px solid var(--dz-alama);
	border-radius: 50%;

	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 700;
	color: var(--dz-alama);
}

.thr-deviz__optiuni {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Butoanele radio: ascunse, dar NU cu `display:none` — ăla le-ar scoate din
 * ordinea de tabulare și din arborele de accesibilitate, iar calculatorul ar
 * deveni inutilizabil la tastatură. Rămân pe pagină, invizibile, cu conturul
 * de focalizare mutat pe eticheta lor. */
.thr-deviz__r {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.thr-deviz__buton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	padding: 10px 18px;

	background: transparent;
	border: 1px solid rgba(97, 99, 103, .34);
	border-radius: 2px;
	cursor: pointer;

	font-family: "Manrope", system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--dz-cerneala);

	transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

@media (hover: hover) {
	.thr-deviz__buton:hover {
		border-color: var(--dz-alama);
		background: rgba(249, 112, 21, .07);
	}
}

.thr-deviz__r:checked + .thr-deviz__buton {
	background: var(--dz-cerneala);
	border-color: var(--dz-cerneala);
	color: var(--dz-hartie);
}

.thr-deviz__r:focus-visible + .thr-deviz__buton {
	outline: 2px solid var(--dz-alama);
	outline-offset: 3px;
}

/* Butonul de treaptă poartă și prețul pe metru — omul vede riglă, nu doar nume. */
.thr-deviz__buton--treapta {
	position: relative;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 3px;
	min-inline-size: min(100%, 216px);
	flex: 1 1 216px;
	padding: 15px 18px;
	text-align: start;
}

.thr-deviz__buton-nume {
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.005em;
}

.thr-deviz__buton-pret {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--dz-gri-cald);
}

.thr-deviz__r:checked + .thr-deviz__buton--treapta .thr-deviz__buton-pret {
	color: var(--dz-gri-desc);
}

.thr-deviz__insemn {
	position: absolute;
	inset-block-start: -9px;
	inset-inline-end: 12px;
	padding: 2px 8px;

	background: var(--dz-alama);
	color: #1E1E20;
	border-radius: 2px;

	font-family: "JetBrains Mono", ui-monospace, monospace;
	/* 9,5px → 11px (M3-06, 16 sep 2026): era cel mai mic text din tot site-ul,
	 * sub pragul de 11px din §5b. Plăcuța „cel mai des ales” stă pe un rând
	 * scurt, cu `padding` neschimbat, deci creșterea nu mută treapta de sub ea. */
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.thr-deviz__buton--mp {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 13.5px;
	min-inline-size: 76px;
}

.thr-deviz__lamurire {
	flex: 1 0 100%;
	margin: 4px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--dz-gri-cald);
	font-style: italic;
}

/* Grupurile de suprafață: doar cel al treptei alese e vizibil. Regula care le
 * aprinde se generează în `render.php`, fiindcă depinde de datele treptei. */
.thr-deviz__arii {
	display: none;
}

/* ── REZULTATUL ──────────────────────────────────────────────────────────── */

.thr-deviz__masina {
	--thr-total-min: calc(var(--thr-mp) * var(--thr-pret-min));
	--thr-total-max: calc(var(--thr-mp) * var(--thr-pret-max));
}

.thr-deviz__rezultat {
	margin-block: clamp(26px, 3.4vw, 40px);
	padding: clamp(22px, 3vw, 34px) clamp(20px, 2.6vw, 32px);

	background: var(--dz-cerneala);
	color: var(--dz-hartie);
	border-radius: 2px;

	/* Cusătura de alamă, de data asta ca reper pe muchia din stânga: e locul
	 * unde se citește cifra, deci acolo cade semnul. */
	border-inline-start: 3px solid var(--dz-alama);
}

.thr-deviz__rezultat-eticheta {
	margin: 0 0 10px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dz-gri-desc);
}

/* Cifra. NU se animă — regula de onestitate nr. 3. Se schimbă instantaneu,
 * ca într-un tabel de devize, fiindcă asta e. */
.thr-deviz__cifra {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;

	font-family: "Archivo", system-ui, sans-serif;
	font-weight: 800;
	font-stretch: 110%;
	font-size: clamp(30px, 4.6vw, 56px);
	line-height: 1.04;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.thr-deviz__suma--min { counter-reset: dzmin var(--thr-total-min); }
.thr-deviz__suma--max { counter-reset: dzmax var(--thr-total-max); }

.thr-deviz__suma--min::after { content: counter(dzmin); }
.thr-deviz__suma--max::after { content: counter(dzmax); }

.thr-deviz__linie {
	padding-inline: .28em;
	color: var(--dz-alama);
	font-weight: 500;
}

/* Plusul apare doar la treapta deschisă la capăt („180–250+"). Regula care îl
 * aprinde se generează în `render.php`. */
.thr-deviz__plus {
	display: none;
	color: var(--dz-alama);
}

.thr-deviz__moneda {
	padding-inline-start: .22em;
	font-size: .52em;
	font-weight: 700;
	color: var(--dz-gri-desc);
	letter-spacing: 0;
}

/* Regiunea vie pentru cititoarele de ecran. Nu se vede, dar se aude — și e
 * singurul motiv pentru care blocul are JavaScript. */
.thr-deviz__crainic {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.thr-deviz__separat {
	margin: 14px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--dz-gri-desc);
	max-inline-size: 56ch;
}

.thr-deviz__separat strong {
	color: var(--dz-hartie);
	font-weight: 700;
}

/* ── CE INTRĂ ȘI CE NU ───────────────────────────────────────────────────── */

.thr-deviz__treapta {
	display: none;
}

.thr-deviz__treapta-titlu {
	font-size: clamp(19px, 2vw, 25px);
	line-height: 1.2;
	letter-spacing: -0.014em;
	margin: 0 0 6px;
}

.thr-deviz__treapta-rezumat {
	margin: 0 0 22px;
	font-size: clamp(14.5px, 1.15vw, 16px);
	line-height: 1.6;
	color: var(--dz-gri-cald);
	max-inline-size: 64ch;
	text-wrap: pretty;
}

.thr-deviz__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(20px, 2.6vw, 40px);
}

.thr-deviz__lista-titlu {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;

	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--dz-gri-cald);
}

/* Semnul dinaintea titlului: o linie de alamă pentru ce intră, una goală
 * pentru ce nu. Fără bifă verde și X roșu — culorile alea sunt din altă
 * paletă și din alt site. */
.thr-deviz__lista-titlu::before {
	content: "";
	inline-size: 18px;
	block-size: 2px;
	background: var(--dz-alama);
}

.thr-deviz__lista--nu .thr-deviz__lista-titlu::before {
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(97, 99, 103, .5);
}

.thr-deviz__lista ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.thr-deviz__lista li {
	position: relative;
	padding-inline-start: 20px;
	margin-block-end: 9px;
	max-inline-size: 63ch; /* măsura casei: 81–83 de semne la 1440 fără ea */

	font-size: 14.5px;
	line-height: 1.55;
	color: var(--dz-cerneala);
	text-wrap: pretty;
}

/* Cu măsura, `pretty` lăsa coade („…din / prima zi”); pe telefon măsura nu lucrează. */
@media (min-width: 700px) {
	.thr-deviz__lista li { text-wrap: balance; }
}

.thr-deviz__lista li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .62em;
	inline-size: 9px;
	block-size: 1px;
	background: var(--dz-alama);
}

/* Ce NU intră se scrie cu ACEEAȘI mărime ca ce intră — regula de onestitate
 * nr. 4. Se deosebește prin culoare, nu prin a fi făcut mai mic. */
.thr-deviz__lista--nu li {
	color: var(--dz-gri-cald);
}

.thr-deviz__lista--nu li::before {
	background: rgba(97, 99, 103, .45);
}

/* ── FINALUL ─────────────────────────────────────────────────────────────── */

.thr-deviz__final {
	margin-block-start: clamp(28px, 3.6vw, 44px);
	padding-block-start: clamp(22px, 2.8vw, 32px);
	border-block-start: 1px solid rgba(97, 99, 103, .22);
}

.thr-deviz__final-text {
	margin: 0 0 20px;
	max-inline-size: 66ch;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--dz-gri-cald);
	text-wrap: pretty;
}

.thr-deviz__final-text strong {
	color: var(--dz-cerneala);
	font-weight: 700;
}

.thr-deviz__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-block-size: 48px;
	padding: 13px 26px;

	background: var(--dz-cerneala);
	color: var(--dz-hartie);
	border-radius: 2px;
	text-decoration: none;

	font-family: "Manrope", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;

	transition: background-color 180ms ease, transform 180ms cubic-bezier(.2,.7,.3,1);
}

.thr-deviz__cta::after {
	content: "";
	inline-size: 18px;
	block-size: 1px;
	background: var(--dz-alama);
	transition: inline-size 180ms cubic-bezier(.2,.7,.3,1);
}

@media (hover: hover) {
	.thr-deviz__cta:hover {
		background: #28292A;
		transform: translateY(-2px);
	}

	.thr-deviz__cta:hover::after {
		inline-size: 28px;
	}
}

.thr-deviz__cta:focus-visible {
	outline: 2px solid var(--dz-alama);
	outline-offset: 3px;
}

.thr-deviz__final-nota {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--dz-gri-cald);
	/* Măsura casei (`editorial.css` §128.5): rândul real 83 → 42 la 1440 (R373). */
	max-inline-size: 63ch;
}

/* (0,2,0): `.entry-content p { text-wrap: pretty }` (0,1,1) bate o clasă (R373). */
.thr-deviz .thr-deviz__final-nota {
	text-wrap: balance;
}

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

/* Cine tipărește pagina ia cu el reperul de cost — dar și avertismentul, ca
 * foaia scoasă din context să nu poată fi citită drept ofertă. */
@media print {
	.thr-deviz {
		box-shadow: none;
		border: 1px solid #1E1E20;
		break-inside: avoid;
	}

	.thr-deviz__rezultat {
		background: transparent;
		color: #1E1E20;
		border: 1px solid #1E1E20;
	}

	.thr-deviz__rezultat-eticheta,
	.thr-deviz__separat,
	.thr-deviz__moneda {
		color: #1E1E20;
	}

	.thr-deviz__cta {
		display: none;
	}

	/* Pe hârtie se tipăresc TOATE treptele, nu doar cea bifată: foaia nu are
	 * butoane, deci n-ai cum să comuți. */
	.thr-deviz__treapta {
		display: block;
		break-inside: avoid;
		margin-block-end: 18px;
	}

	.thr-deviz__final-text::after {
		content: " Tipărit de pe tophomerenov.ro — interval orientativ, nu ofertă.";
		font-weight: 700;
	}
}

/* ── MIȘCARE REDUSĂ ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.thr-deviz__buton,
	.thr-deviz__cta,
	.thr-deviz__cta::after {
		transition: none;
	}
}

/* ── Termenul orientativ (cifrele clientului, 26 aug 2026 — sursa în
 * inc/date-deviz.php). Textul vine din variabila-șir `--thr-termen`,
 * scrisă de aceleași reguli generate care duc prețul. */
/* Plăcuța de rezultat e ANTRACIT — paleta „pe închis”, nu cea de hârtie
 * (prima versiune avea valoarea cerneală-pe-cerneală: exact R153, recidivat
 * de autor în aceeași zi; prins la captura de control). */
.thr-deviz__termen {
	margin: 10px 0 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9B9DA0;
}

.thr-deviz__termen-text::after {
	content: var(--thr-termen, 'se confirmă la vizionare');
	color: #F6F7F7;
	font-weight: 700;
}