/*
Theme Name:   Dentera Core
Theme URI:    https://dentera.ro
Description:  Child theme Blocksy. Implementează design system-ul Dentera Core:
              cinci culori, Geist + Inter, scară de spațiere pe 14 pași,
              hairline 1px, fără radius, fără umbre, fără hover translate.
Author:       Dentera
Template:     blocksy
Version:      1.3.0
Text Domain:  dentera-core
*/

/* ============================================================
   CUPRINS

    1. Fonturi
    2. Tokenuri
    3. Bază
    4. Ritm vertical
    5. Structură
    6. Butoane
    7. Imagini
    8. Navigație
    9. Formulare
   10. Suprascrieri Blocksy
   11. Accesibilitate

   COMPONENTE
   12. dt-list        — rânduri cu hairline
   13. dt-cells       — celule în grilă
   14. dt-accordion   — acordeon
   15. dt-price       — preț unitar
   16. dt-compare     — tabel comparativ
   17. dt-hero-split  — antet pe două coloane
   18. dt-cases       — galerie de cazuri
   19. dt-band        — bandă finală
   20. Utilitare (hartă, galerie derulabilă)

   ------------------------------------------------------------
   REGULĂ GENERALĂ, ÎNVĂȚATĂ PE TEREN

   `global-styles-inline-css` declară `body .is-layout-flex
   { display: flex }` cu specificitate 0,1,1 și se încarcă DUPĂ
   stylesheet-ul temei. Orice variantă de componentă care schimbă
   `display` pe un Row trebuie să repete clasa de bază în selector
   (`.dt-list.dt-list--split`), altfel e ignorată în tăcere.
   ============================================================ */


/* ============================================================
   1. FONTURI
   Statice, self-hosted. Doar 400 și 500 — atât cere sistemul.
   Fișierele variabile din arhivele oficiale sunt .ttf; cele
   .woff2 sunt statice, câte unul per greutate. Le folosim pe
   acelea: fără conversie, fără risc de aplatizare a axei.
   ============================================================ */

@font-face {
	font-family: "Geist";
	src: url("assets/fonts/geist-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Geist";
	src: url("assets/fonts/geist-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}


/* ============================================================
   2. TOKENURI
   Culorile sunt legate de paleta Blocksy, ca să poată fi
   ajustate din Customizer. Fallback-urile țin sistemul în
   picioare dacă variabilele lui lipsesc sau se mută pe body.
   ============================================================ */

:root {
	/* --- Culori --- */
	--dt-contrast:  var(--theme-palette-color-1, #171717); /* text, butoane   */
	--dt-muted:     var(--theme-palette-color-4, #666666); /* text secundar   */
	--dt-base:      var(--theme-palette-color-5, #F8F8F8); /* fundal          */
	--dt-surface:   var(--theme-palette-color-6, #FFFFFF); /* fundal secundar */
	--dt-hairline:  var(--theme-palette-color-7, #E2E2E2); /* linii, borduri  */
	--dt-underline: var(--theme-palette-color-9, #CFCFCF); /* subliniere link */

	/* --- Tipografie --- */
	--dt-font-display: "Geist", system-ui, -apple-system, sans-serif;
	--dt-font-body:    "Inter", system-ui, -apple-system, sans-serif;
	
	/* --- Formulare (variabile Blocksy) --- */
	--theme-form-field-border-initial-color: var(--dt-muted);
	--theme-form-field-border-focus-color: var(--dt-contrast);
	--theme-form-field-border-radius: 0;
	--theme-form-field-background-initial-color: var(--dt-base);
	--theme-form-text-initial-color: var(--dt-contrast);
	--theme-form-field-height: 48px;

	/* Scară fluidă, interpolată 390px → 1440px.
	   Fără media query pe tipografie. */
	--dt-h1:    clamp(2.5rem,    1.571rem + 3.810vw, 5rem);      /* 40 → 80 */
	--dt-h2:    clamp(2rem,      1.629rem + 1.524vw, 3rem);      /* 32 → 48 */
	--dt-h3:    clamp(1.625rem,  1.486rem + 0.571vw, 2rem);      /* 26 → 32 */
	--dt-h4:    clamp(1.3125rem, 1.243rem + 0.286vw, 1.5rem);    /* 21 → 24 */
	--dt-lead:  clamp(1.1875rem, 1.141rem + 0.190vw, 1.3125rem); /* 19 → 21 */
	--dt-body:  1.0625rem;  /* 17 */
	--dt-sm:    0.9375rem;  /* 15 */
	--dt-label: 0.8125rem;  /* 13 */

	/* Tracking optic — compensează strângerea la corp mare */
	--dt-track-h1:       -0.035em;
	--dt-track-h2:       -0.030em;
	--dt-track-h3:       -0.022em;
	--dt-track-h4:       -0.015em;
	--dt-track-lead:     -0.010em;
	--dt-track-label:     0.100em;
	--dt-track-wordmark:  0.180em;

	/* --- Spațiere: 14 pași, bază 8 --- */
	--dt-1:  4px;   --dt-2:  8px;   --dt-3:  12px;  --dt-4:  16px;
	--dt-5:  24px;  --dt-6:  32px;  --dt-7:  40px;  --dt-8:  48px;
	--dt-9:  64px;  --dt-10: 80px;  --dt-11: 96px;  --dt-12: 120px;
	--dt-13: 160px; --dt-14: 200px;

	--dt-section: var(--dt-12);   /* distanță între secțiuni */
	--dt-gutter:  100px;          /* padding lateral pagină  */

	/* --- Ritm vertical ---
	   Roluri mapate pe pași ai scării, la fel ca --dt-section.
	   Pașii rămân imuabili; doar rolurile se remapează pe breakpoint. */
	--dt-flow:        var(--dt-5);   /* 24 — între frați            */
	--dt-flow-h2:     var(--dt-9);   /* 64 — deasupra unui H2       */
	--dt-flow-h3:     var(--dt-7);   /* 40 — deasupra unui H3       */
	--dt-flow-h4:     var(--dt-6);   /* 32 — deasupra unui H4/H5/H6 */
	--dt-flow-major:  var(--dt-8);   /* 48 — SUB un H1 sau H2       */
	--dt-flow-after:  var(--dt-4);   /* 16 — sub un H3              */
	--dt-flow-close:  var(--dt-3);   /* 12 — sub un H4/H5/H6        */

	/* --- Structură --- */
	--dt-content: 720px;   /* coloană de text */
	--dt-wide:    1200px;  /* container       */
	--dt-navbar:  76px;    /* TODO: Etapa 4 a decis 88px — de confirmat */
	--dt-btn-h:   40px;

	--dt-transition: 200ms cubic-bezier(.4, 0, .2, 1);
}

@media (max-width: 1024px) {
	:root {
		--dt-section: var(--dt-11);
		--dt-gutter: 48px;
		--dt-flow-h2: var(--dt-8);      /* 64 → 48 */
	}
}

@media (max-width: 767px) {
	:root {
		--dt-section: var(--dt-9);
		--dt-gutter: 24px;
		--dt-flow-h2: var(--dt-7);      /* 48 → 40 */
		--dt-flow-h3: var(--dt-6);      /* 40 → 32 */
		--dt-flow-h4: var(--dt-5);      /* 32 → 24 */
		--dt-flow-major: var(--dt-6);   /* 48 → 32 */
		--dt-btn-h: 48px;
	}
}


/* ============================================================
   3. BAZĂ
   ============================================================ */

body {
	font-family: var(--dt-font-body);
	font-size: var(--dt-body);
	font-weight: 400;
	line-height: 1.6;
	color: var(--dt-contrast);
	background: var(--dt-base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Blochează fals-bold. Dacă ceva cere 700, primește 500 real,
	   nu o versiune îngroșată sintetic de browser. */
	font-synthesis: none;
}

/* Geist doar peste 40px. Sub acest prag, Geist și Inter sunt
   indistinctibile, iar perechea nu ar face nicio muncă. */
h1, h2, .dt-wordmark {
	font-family: var(--dt-font-display);
	font-weight: 500;
}

h3, h4, h5, h6 {
	font-family: var(--dt-font-body);
	font-weight: 500;
}

h1 { font-size: var(--dt-h1); line-height: .98;  letter-spacing: var(--dt-track-h1); }
h2 { font-size: var(--dt-h2); line-height: 1.05; letter-spacing: var(--dt-track-h2); }
h3 { font-size: var(--dt-h3); line-height: 1.15; letter-spacing: var(--dt-track-h3); }
h4 { font-size: var(--dt-h4); line-height: 1.25; letter-spacing: var(--dt-track-h4); }

/* Browserele dau <th> greutatea 700, pe care sistemul nu o are. */
th { font-weight: 500; }

/* H5 și H6 nu au corp declarat: cad pe 17px al body-ului și devin
   indistinctibile de un paragraf la 500. Nu se folosesc în proiect.
   Dacă apar, primesc întâi o treaptă proprie în scară. */

/* Frază-cheie: accentul dintr-un antet. Mai mare decât corpul,
   mai mic decât titlul. Un singur exemplar per pagină. */
.dt-claim {
	max-width: 26ch;
	font-size: var(--dt-h4);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--dt-track-h4);
}

.dt-label {
	font-size: var(--dt-label);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--dt-track-label);
	text-transform: uppercase;
	color: var(--dt-muted);
}

.dt-small { font-size: var(--dt-sm); }
.dt-muted { color: var(--dt-muted); }

.dt-2r-title > span {
  display: block;
}
@media (max-width: 767px) {
  .dt-2r-title > span {
    display: inline;
  }
}

/* opțional, dacă vreți a doua linie altfel stilizată */
.dt-2r-title > span:last-child {
  /* font-weight: 400; */
  /* opacity: .8;      */
}

a {
	color: var(--dt-contrast);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--dt-underline);
	transition: text-decoration-color var(--dt-transition);
}

a:hover { text-decoration-color: var(--dt-contrast); }


/* ============================================================
   4. RITM VERTICAL

   Blocksy și WP core aplică margini în `em`, care nu cad pe
   grila de 8. Le anulăm și declarăm noi, din scară.

   DOMENIU: regulile se aplică în orice container de blocuri,
   nu doar în .entry-content. Fără asta, ritmul dispare în
   momentul în care conținutul e grupat — adică aproape mereu.

   Lista de containere e repetată în fiecare regulă; CSS nu
   permite extragerea unui selector în variabilă. Dacă adaugi
   un container nou, trebuie adăugat peste tot.

   Regulile 4.2–4.6 au specificitate identică (0,1,0), deci
   cascada decide. ORDINEA CONTEAZĂ — nu rearanja subblocurile.
   ============================================================ */

/* 4.1 — Reset. `:where()` menține specificitatea la 0, ca orice
   clasă proprie să câștige fără !important. */
:where(
	.entry-content,
	.wp-block-group,
	.wp-block-cover__inner-container,
	.wp-block-column,
	.wp-block-columns
) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, table, pre, hr) {
	margin-block: 0;
}

/* 4.2 — Distanța implicită între frați */
:where(
	.entry-content,
	.wp-block-group,
	.wp-block-cover__inner-container,
	.wp-block-column,
	.wp-block-columns
) > * + * {
	margin-block-start: var(--dt-flow);
}

/* 4.3 — Deasupra titlurilor. Mai mult decât dedesubt: titlul se
   leagă vizual de conținutul pe care îl introduce, nu de cel pe
   care îl încheie. */
:where(
	.entry-content,
	.wp-block-group,
	.wp-block-cover__inner-container,
	.wp-block-column,
	.wp-block-columns
) > * + :where(h2) {
	margin-block-start: var(--dt-flow-h2);
}

:where(
	.entry-content,
	.wp-block-group,
	.wp-block-cover__inner-container,
	.wp-block-column,
	.wp-block-columns
) > * + :where(h3) {
	margin-block-start: var(--dt-flow-h3);
}

:where(
	.entry-content,
	.wp-block-group,
	.wp-block-cover__inner-container,
	.wp-block-column,
	.wp-block-columns
) > * + :where(h4, h5, h6) {
	margin-block-start: var(--dt-flow-h4);
}

/* 4.4 — Sub titluri. H1 și H2 deschid o secțiune, deci primesc
   mai mult aer decât un H3, care doar introduce un paragraf. */
:where(
	.entry-content,
	.wp-block-group,
	.wp-block-cover__inner-container,
	.wp-block-column,
	.wp-block-columns
) > :where(h1, h2) + * {
	margin-block-start: var(--dt-flow-major);
}

:where(
	.entry-content,
	.wp-block-group,
	.wp-block-cover__inner-container,
	.wp-block-column,
	.wp-block-columns
) > :where(h3) + * {
	margin-block-start: var(--dt-flow-after);
}

:where(
	.entry-content,
	.wp-block-group,
	.wp-block-cover__inner-container,
	.wp-block-column,
	.wp-block-columns
) > :where(h4, h5, h6) + * {
	margin-block-start: var(--dt-flow-close);
}

/* 4.5 — Titlu direct după titlu: o singură unitate */
:where(
	.entry-content,
	.wp-block-group,
	.wp-block-cover__inner-container,
	.wp-block-column,
	.wp-block-columns
) > :where(h1, h2, h3, h4) + :where(h2, h3, h4, h5, h6) {
	margin-block-start: var(--dt-flow);
}

/* 4.6 — Liste și separatoare */
:where(
	.entry-content,
	.wp-block-group,
	.wp-block-cover__inner-container,
	.wp-block-column,
	.wp-block-columns
) > :where(p) + :where(ul, ol) {
	margin-block-start: var(--dt-flow-after);
}

:where(.entry-content, .wp-block-group) :where(li + li) {
	margin-block-start: var(--dt-2);
}

:where(
	.entry-content,
	.wp-block-group,
	.wp-block-cover__inner-container,
	.wp-block-column,
	.wp-block-columns
) > * + :where(hr),
:where(
	.entry-content,
	.wp-block-group,
	.wp-block-cover__inner-container,
	.wp-block-column,
	.wp-block-columns
) > :where(hr) + * {
	margin-block-start: var(--dt-flow-h2);
}

/* 4.7 — Fără margine reziduală la începutul niciunui container */
:where(
	.entry-content,
	.wp-block-group,
	.wp-block-cover__inner-container,
	.wp-block-column,
	.wp-block-columns
) > :first-child {
	margin-block-start: 0;
}

/* 4.8 — Evadare. Pe orice container cu clasa `dt-flow-off`,
   ritmul automat se oprește și spațierea revine la ce setezi
   din editor. Necesar pentru grile, rânduri de butoane și
   orice layout unde marginile verticale nu au sens. */
.dt-flow-off > * + * {
	margin-block-start: 0;
}


/* ============================================================
   5. STRUCTURĂ
   ============================================================ */

.dt-section { padding-block: var(--dt-section); }

/* Două secțiuni consecutive: padding-ul nu colapsează, spre
   deosebire de margin. Fără regula asta obții 240px pe desktop. */
.dt-section + .dt-section { padding-block-start: 0; }

.dt-container {
	max-width: var(--dt-wide);
	margin-inline: auto;
	padding-inline: var(--dt-gutter);
}

/* Coloană de lectură. `margin-inline: 0` o ține la stânga —
   fără ea, layout-ul Constrained al WP o centrează. */
.dt-measure {
	max-width: var(--dt-content);
	margin-inline: 0;
}

@media (max-width: 767px) {
	.dt-measure { max-width: 100%; }
}


/* ============================================================
   6. BUTOANE
   Selectorul cere clasa .dt-btn explicit, ca să nu prindă
   controalele Blocksy (hamburger, toggle căutare, acordeon).
   Pe blocul Button nativ nu se pune nicio clasă — el e deja
   acoperit prin .wp-block-button__link.
   ============================================================ */

.wp-block-button__link,
.dt-btn,
button.dt-btn,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--dt-btn-h);
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: var(--dt-contrast);
	color: var(--dt-base);
	font-family: var(--dt-font-body);
	font-size: 0.875rem;   /* 14 */
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--dt-transition);
}

.wp-block-button__link:hover,
.dt-btn:hover,
button.dt-btn:hover,
input[type="submit"]:hover {
	background: #000000;
	color: var(--dt-base);
	transform: none;   /* fără lift */
}

/* Butonul secundar: fără fundal, fără bordură. Sublinierea există
   dintotdeauna, transparentă — la hover își schimbă doar culoarea,
   deci nu apare salt de layout.

   Selectorul include `.wp-block-buttons` pentru că regula Blocksy
   pe care o depășește are specificitate 0,3,1. */

.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link,
.dt-btn--secondary {
	min-height: var(--dt-btn-h);
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--dt-contrast);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--dt-transition);
}

.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.dt-btn--secondary:hover,
.dt-btn--secondary:focus-visible {
	background-color: transparent;
	color: var(--dt-contrast);
	text-decoration-color: var(--dt-contrast);
}


/* ============================================================
   7. IMAGINI
   Fără radius, fără bordură, fără overlay, fără filtru.
   Aspect-ratio explicit elimină CLS.

   Clasele se pun pe blocul Image. Perechea înainte/după e în
   secțiunea 18 (dt-cases).
   ============================================================ */

.dt-img img {
	display: block;
	width: 100%;
	border-radius: 0;
	object-fit: cover;
}

.dt-img--band      img { aspect-ratio: 21 / 9; }  /* bandă hero */
.dt-img--portrait  img { aspect-ratio: 4 / 5;  }  /* portret    */
.dt-img--editorial img { aspect-ratio: 3 / 2;  }  /* editorial  */


/* ============================================================
   8. NAVIGAȚIE
   ============================================================ */

.dt-wordmark {
	font-size: 1.125rem;   /* 18 */
	font-weight: 500;
	letter-spacing: var(--dt-track-wordmark);
	text-transform: uppercase;
	text-decoration: none;
}

[data-header] .ct-header-row { border-block-end: 1px solid var(--dt-hairline); }
[data-header] .ct-header-row[data-row="middle"] { min-height: var(--dt-navbar); }

.ct-header-nav .ct-menu-link {
	border-block-end: 1px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--dt-contrast);
	font-family: var(--dt-font-body);
	font-size: var(--dt-sm);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Starea curentă: linie sub text, nu pastilă. */
.ct-header-nav .current-menu-item > .ct-menu-link,
.ct-header-nav .current-menu-ancestor > .ct-menu-link {
	background: transparent;
	border-block-end-color: var(--dt-contrast);
}

.ct-header-nav .sub-menu {
	padding-block: var(--dt-2);
	border: 1px solid var(--dt-hairline);
	border-radius: 0;
	background: var(--dt-surface);
	box-shadow: none;
}

.ct-header-nav .sub-menu .ct-menu-link {
	padding-block: var(--dt-2);
	border-block-end: 0;
}

@media (hover: hover) {
	.ct-header-nav .ct-menu-link:hover {
		background: transparent;
		color: var(--dt-contrast);
		border-block-end-color: var(--dt-hairline);
	}
}


/* ============================================================
   9. FORMULARE
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
	padding: var(--dt-3) var(--dt-4);
	border: 1px solid var(--dt-hairline);
	border-radius: 0;
	background: var(--dt-base);
	color: var(--dt-contrast);
	font-family: var(--dt-font-body);
	font-size: var(--dt-body);
	transition: border-color var(--dt-transition);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--dt-contrast);
	outline: none;
}

/* Formularul Fluent Forms: linie de contrast deasupra, ca la
   celelalte componente. Câmpurile au bordură proprie, deci nu
   e nevoie de chenar în jurul întregului bloc. */
.fluentform {
	border-block-start: 0;
}

.fluentform form {
	padding-block-start: var(--dt-5);
	border-block-start: 1px solid var(--dt-contrast);
}

/* ============================================================
   10. SUPRASCRIERI BLOCKSY
   Blocksy adaugă radius, umbre și hover translate implicit.

   TODO: `[class*="ct-"]:hover` este o plasă foarte largă — anulează
   orice transform, inclusiv unele legitime (rotirea săgeții de
   dropdown). De restrâns la clasele concrete problematice.
   ============================================================ */

.entry-card,
.ct-media-container,
.wp-block-image img,
.ct-image-container img {
	border-radius: 0 !important;
	box-shadow: none !important;
}

.entry-card:hover,
.ct-image-container:hover img,
[class*="ct-"]:hover {
	transform: none !important;
}


/* ============================================================
   11. ACCESIBILITATE
   ============================================================ */

:focus-visible {
	outline: 2px solid var(--dt-contrast);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

.dt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* ============================================================
   12. LISTĂ DE RÂNDURI

   În editor: Group cu clasa `dt-list dt-flow-off`.
   Înăuntru, Row-uri sau Group-uri cu două blocuri fiecare.
   Rândurile NU primesc clase — componenta stilizează prin poziție.

   ATENȚIE 1: pe Row-uri lasă „Allow to wrap" ACTIVAT. Cu `is-nowrap`,
   WordPress generează flex-wrap: nowrap și rândurile nu se mai
   stivuiesc pe mobil.

   ATENȚIE 2: variantele care schimbă `display` repetă clasa de bază
   în selector (`.dt-list.dt-list--split`), ca să depășească regula
   `body .is-layout-flex` din global-styles (specificitate 0,1,1).

   Variante, cumulabile:
     --split   coloană fixă la stânga, explicație la dreapta
     --lg      textul din stânga mai mare (rutare pe situații)
     --num     valoarea din dreapta e cifră (tarife)
     --3col    denumire, descriere, preț
     --plain   un singur bloc per rând (liste simple)
     --stack   etichetă deasupra, valoare dedesubt (contact)
     --link    tot rândul e clicabil, cu săgeată în dreapta
   ============================================================ */

.dt-list {
	border-block-start: 1px solid var(--dt-contrast);
}

/* Rândul */
.dt-list > * {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dt-5);
	margin-block: 0;
	padding-block: var(--dt-5);
	border-block-end: 1px solid var(--dt-hairline);
}

.dt-list > :last-child {
	border-block-end: 0;
}

/* Blocul din stânga */
.dt-list > * > :first-child {
	min-width: 0;
	margin-block: 0;
}

/* Blocul din dreapta.
   Fără `flex` declarat: valoarea implicită 0 1 auto se
   dimensionează după conținut și se poate micșora la nevoie. */
.dt-list > * > :last-child {
	margin-block: 0;
	color: var(--dt-muted);
	font-size: var(--dt-sm);
	text-align: right;
	transition: color var(--dt-transition);
}

/* --- Variantă: coloană fixă la stânga --- */

.dt-list.dt-list--split > * {
	display: grid;
	grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
	gap: var(--dt-6);
	align-items: center;
}

.dt-list--split > * > :first-child {
	font-weight: 500;
}

.dt-list--split > * > :last-child {
	justify-self: start;
	max-width: 60ch;
	text-align: left;
}

/* --- Variantă: text mare la stânga --- */

.dt-list--lg > * > :first-child {
	font-size: var(--dt-lead);
	font-weight: 500;
	letter-spacing: var(--dt-track-lead);
}

/* --- Variantă: valoare numerică la dreapta --- */

.dt-list--num > * > :last-child {
	color: var(--dt-contrast);
	font-size: var(--dt-body);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- Variantă: denumire, descriere, preț --- */

.dt-list.dt-list--3col > * {
	display: grid;
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 9rem);
	gap: var(--dt-6);
	align-items: baseline;
}

.dt-list--3col > * > :first-child {
	font-weight: 500;
}

.dt-list--3col > * > :nth-child(2) {
	justify-self: start;
	max-width: 52ch;
	color: var(--dt-muted);
	font-size: var(--dt-sm);
	text-align: left;
}

.dt-list--3col > * > :last-child {
	color: var(--dt-contrast);
	font-size: var(--dt-body);
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- Variantă: un singur bloc per rând --- */

.dt-list--plain > * > :only-child {
	color: var(--dt-contrast);
	font-size: var(--dt-body);
	text-align: left;
}

/* --- Variantă: etichetă deasupra, valoare dedesubt --- */

.dt-list.dt-list--stack > * {
	display: block;
}

.dt-list--stack > * > :first-child {
	color: var(--dt-muted);
	font-size: var(--dt-sm);
	font-weight: 500;
}

.dt-list--stack > * > :last-child {
	color: var(--dt-contrast);
	font-size: var(--dt-body);
	text-align: left;
}

/* Zonă de atingere extinsă: padding pozitiv, margine negativă egală. */
.dt-list--stack a {
	display: block;
	padding-block: var(--dt-5);
	margin-block: calc(var(--dt-5) * -1);
	color: inherit;
	text-decoration: none;
}

/* --- Variantă: rând clicabil ---
   Linkul se pune pe textul din STÂNGA, în editor. Pseudo-elementul
   lui acoperă tot rândul, deci ținta de click e rândul întreg. */

.dt-list--link > * {
	position: relative;
}

.dt-list--link a {
	color: inherit;
	text-decoration: none;
}

.dt-list--link > * > :first-child a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.dt-list--link > * > :last-child::after {
	content: "→";
	margin-inline-start: var(--dt-2);
}

/* Rând cu două destinații: iese din comportamentul --link.
   Clasa se pune pe Row, iar linkurile stau pe destinații. */

.dt-list--link > .dt-list__row--multi > :first-child a::after,
.dt-list--link > .dt-list__row--multi > :last-child::after {
	content: none;
}

.dt-list__row--multi {
	align-items: center;
}

.dt-list__row--multi > :not(:first-child) {
	color: var(--dt-muted);
	font-size: var(--dt-sm);
	text-align: right;
}

.dt-list__row--multi > :not(:first-child) a::after {
	content: "→";
	margin-inline-start: var(--dt-2);
}

/* --- Stări --- */

@media (hover: hover) {
	.dt-list--link > *:hover > :last-child,
	.dt-list__row--multi a:hover {
		color: var(--dt-contrast);
	}

	.dt-list--stack a:hover {
		color: var(--dt-muted);
	}
}

/* --- Mobil --- */

@media (max-width: 767px) {
	.dt-list.dt-list > *,
	.dt-list.dt-list--split > * {
		display: block;
		padding-block: var(--dt-4);
	}

	.dt-list > * > :last-child {
		max-width: none;
		margin-block-start: var(--dt-2);
		text-align: left;
	}

	.dt-list--lg > * > :first-child {
		font-size: var(--dt-body);
		line-height: 1.35;
		letter-spacing: 0;
	}

	.dt-list--num > * > :last-child {
		font-size: var(--dt-sm);
	}

	/* Trei coloane devin două: denumire și preț pe primul rând,
	   descrierea pe rând propriu dedesubt. */
	.dt-list.dt-list--3col > * {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 7rem);
		gap: var(--dt-2) var(--dt-4);
		padding-block: var(--dt-4);
	}

	.dt-list--3col > * > :nth-child(2) {
		grid-column: 1 / -1;
	}

	.dt-list--3col > * > :last-child {
		margin-block-start: 0;
		font-size: var(--dt-sm);
	}
}


/* ============================================================
   13. CELULE ÎN GRILĂ

   În editor: Group cu clasa `dt-cells dt-flow-off`, layout Grid.
   Numărul de coloane vine din CSS, nu din editor — altfel apar
   celule goale la reflow.

   Liniile sunt BORDURI, nu gap-uri. Trucul cu `gap: 1px` peste
   fundal hairline funcționează doar pe alb; pe --dt-base (#F8F8F8)
   contrastul e prea mic și liniile dispar, mai ales pe mobil.

   ATENȚIE: variantele --3 și --4 resetează întâi bordurile puse de
   regula de bază (calculată pe două coloane), apoi le repun pe
   pozițiile corecte. ORDINEA CONTEAZĂ — dacă muți blocurile,
   liniile orizontale dispar fără eroare.

   Variante: --3 (trei coloane) · --4 (patru coloane)
   ============================================================ */

.dt-cells {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin-block: 0;
	border-block-start: 1px solid var(--dt-contrast);
}

.dt-cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dt-cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dt-cells > * {
	margin-block: 0;
	padding: var(--dt-6) var(--dt-6) var(--dt-6) 0;
}

.dt-cells > * > * {
	margin-block-start: 0;
}

/* Două coloane */

.dt-cells > :nth-child(2n) {
	padding-inline: var(--dt-6) 0;
	border-inline-start: 1px solid var(--dt-hairline);
}

.dt-cells > :nth-child(n + 3) {
	border-block-start: 1px solid var(--dt-hairline);
}

/* Trei coloane */

.dt-cells--3 > * {
	padding-inline: 0 var(--dt-6);
	border-inline-start: 0;
	border-block-start: 0;
}

.dt-cells--3 > :not(:nth-child(3n + 1)) {
	padding-inline-start: var(--dt-6);
	border-inline-start: 1px solid var(--dt-hairline);
}

.dt-cells--3 > :nth-child(3n) { padding-inline-end: 0; }

.dt-cells--3 > :nth-child(n + 4) {
	border-block-start: 1px solid var(--dt-hairline);
}

/* Patru coloane */

.dt-cells--4 > * {
	padding-inline: 0 var(--dt-6);
	border-inline-start: 0;
	border-block-start: 0;
}

.dt-cells--4 > :not(:nth-child(4n + 1)) {
	padding-inline-start: var(--dt-6);
	border-inline-start: 1px solid var(--dt-hairline);
}

.dt-cells--4 > :nth-child(4n) { padding-inline-end: 0; }

.dt-cells--4 > :nth-child(n + 5) {
	border-block-start: 1px solid var(--dt-hairline);
}

/* Conținutul celulei */

.dt-cells .dt-num {
	display: block;
	margin-block-end: var(--dt-5);
	color: var(--dt-hairline);
	font-family: var(--dt-font-display);
	font-size: var(--dt-h3);
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--dt-track-h3);
}

.dt-cells h3 {
	margin-block-end: var(--dt-2);
	font-size: var(--dt-h4);
	line-height: 1.25;
	letter-spacing: var(--dt-track-h4);
}

.dt-cells p:not(.dt-num) {
	color: var(--dt-muted);
	font-size: var(--dt-sm);
}

.dt-cells .dt-label {
	display: block;
	margin-block-start: var(--dt-3);
}

/* --- Mobil: o coloană, doar linii orizontale --- */

@media (max-width: 767px) {
	.dt-cells,
	.dt-cells.dt-cells--3,
	.dt-cells.dt-cells--4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.dt-cells > *,
	.dt-cells > :nth-child(2n),
	.dt-cells--3 > *,
	.dt-cells--3 > :not(:nth-child(3n + 1)),
	.dt-cells--4 > *,
	.dt-cells--4 > :not(:nth-child(4n + 1)) {
		padding-block: var(--dt-6);
		padding-inline: 0;
		border-inline-start: 0;
		border-block-start: 1px solid var(--dt-hairline);
	}

	.dt-cells > :first-child,
	.dt-cells--3 > :first-child,
	.dt-cells--4 > :first-child {
		border-block-start: 0;
	}

	.dt-cells .dt-num {
		margin-block-end: var(--dt-3);
	}
}


/* ============================================================
   14. ACORDEON

   Clasa .dt-accordion pe Group-ul care conține blocul Accordion.
   Titlul e într-un <span> în interiorul butonului — dimensiunea
   se declară acolo, altfel moștenește --dt-h3 de la <h3>.
   ============================================================ */

.dt-accordion .wp-block-accordion-item {
	border-block-end: 1px solid var(--dt-hairline);
}

.dt-accordion .wp-block-accordion-item:first-child {
	border-block-start: 1px solid var(--dt-contrast);
}

.dt-accordion .wp-block-accordion-heading {
	margin: 0;
}

/* --- Butonul --- */

.dt-accordion .wp-block-accordion-heading__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dt-4);
	width: 100%;
	min-height: 0;
	padding: var(--dt-5) 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--dt-contrast);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.dt-accordion .wp-block-accordion-heading__toggle-title {
	font-family: var(--dt-font-body);
	font-size: var(--dt-body);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
}

.dt-accordion .wp-block-accordion-heading__toggle:focus-visible {
	outline: 2px solid var(--dt-contrast);
	outline-offset: -2px;
	border-radius: 4px;
}

/* --- Iconiță: două bare desenate, fără dependență de font --- */

.dt-accordion .wp-block-accordion-heading__toggle-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--dt-muted);
	font-size: 0;
}

.dt-accordion .wp-block-accordion-heading__toggle-icon::before,
.dt-accordion .wp-block-accordion-heading__toggle-icon::after {
	content: "";
	grid-area: 1 / 1;
	background: currentColor;
}

.dt-accordion .wp-block-accordion-heading__toggle-icon::before {
	width: 14px;
	height: 1.5px;
}

.dt-accordion .wp-block-accordion-heading__toggle-icon::after {
	width: 1.5px;
	height: 14px;
}

.dt-accordion [aria-expanded="true"] .wp-block-accordion-heading__toggle-icon::after {
	display: none;
}

/* --- Panou --- */

.dt-accordion .wp-block-accordion-panel > p {
	max-width: 68ch;
	margin-block: 0;
	padding-block-end: var(--dt-5);
	color: var(--dt-muted);
	font-size: var(--dt-sm);
	line-height: 1.6;
	text-indent: 0;
}

/* Listă de tarife în panou: rânduri mai strânse decât în afara lui. */
.dt-accordion .dt-list > * {
	margin-block: 0;
	padding-block: var(--dt-3);
}

.dt-accordion .dt-list--num > * > :last-child {
	color: var(--dt-muted);
}

/* --- Stări --- */

@media (hover: hover) {
	.dt-accordion .wp-block-accordion-heading__toggle:hover
		.wp-block-accordion-heading__toggle-icon {
		color: var(--dt-contrast);
	}
}

/* --- Mobil ---
   Listele de prețuri rămân pe un rând: denumire stânga, sumă
   dreapta. Stivuirea ar dubla inutil înălțimea listei. */

@media (max-width: 767px) {
	.dt-accordion .dt-list.dt-list > * {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--dt-4);
	}

	.dt-accordion .dt-list > * > :first-child {
		flex: 1 1 auto;
		hyphens: none;
	}

	.dt-accordion .dt-list > * > :last-child {
		margin-block-start: 0;
		font-size: var(--dt-sm);
		text-align: right;
	}
}


/* ============================================================
   15. PREȚ UNITAR
   Group cu clasa `dt-price dt-flow-off`, două paragrafe.
   Singurul accent tipografic dintr-o secțiune de tarife.
   ============================================================ */

.dt-price  {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dt-5);
	padding-block: var(--dt-5);
	border-block: 1px solid var(--dt-contrast);
}

.dt-price > * {
	margin-block: 0;
}

.dt-price > :first-child {
	flex: 1 1 auto;
}

.dt-price > :last-child {
	flex: 0 0 auto;
	font-size: var(--dt-h4);
	font-weight: 500;
	letter-spacing: var(--dt-track-h4);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}


/* ============================================================
   16. TABEL COMPARATIV

   Blocul Table cu clasa .dt-compare, cu rând de antet ACTIVAT
   din setările blocului — fără el nu există <thead> și regulile
   de antet nu au ce stiliza.

   Blocksy declară border-color pe td/th, iar WP core pune o
   bordură de 3px pe <thead>. Le resetăm pe amândouă și păstrăm
   doar linii orizontale.
   ============================================================ */

.dt-compare.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.dt-compare.wp-block-table table th,
.dt-compare.wp-block-table table td {
	padding: var(--dt-4) var(--dt-4) var(--dt-4) 0;
	border: 0;
	border-block-end: 1px solid var(--dt-hairline);
	font-size: var(--dt-sm);
	line-height: 1.5;
	text-align: left;
	vertical-align: middle;
}

.dt-compare.wp-block-table table th:first-child,
.dt-compare.wp-block-table table td:first-child {
	width: 14rem;
	padding-inline-start: 0;
}

.dt-compare.wp-block-table table thead {
	border-block-end: 1px solid var(--dt-contrast);
}

.dt-compare.wp-block-table table thead th {
	color: var(--dt-contrast);
	font-weight: 500;
}

.dt-compare.wp-block-table table tbody td:first-child {
	color: var(--dt-muted);
}

.dt-compare.wp-block-table table tbody tr:last-child td {
	border-block-end: 0;
}

/* Pe mobil se derulează orizontal — patru coloane la 390px ar fi
   ilizibile. Prima coloană se îngustează ca ultima să fie parțial
   vizibilă, ceea ce semnalează că mai urmează conținut. */

@media (max-width: 767px) {
	.dt-compare.wp-block-table {
		overflow-x: auto;
		margin-inline: calc(var(--dt-gutter) * -1);
		padding-inline: var(--dt-gutter);
	}

	.dt-compare.wp-block-table table {
		min-width: 34rem;
	}

	.dt-compare.wp-block-table table th:first-child,
	.dt-compare.wp-block-table table td:first-child {
		width: 8rem;
	}
}


/* ============================================================
   17. ANTET PE DOUĂ COLOANE
   Group cu clasa `dt-hero-split dt-flow-off`, două Group-uri:
   titlul stânga, argumentul dreapta.

   Breakpoint 900px, nu 767px — cu un titlu la 80px, stivuirea
   trebuie să se producă mai devreme decât la componentele
   obișnuite.
   ============================================================ */

.dt-hero-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--dt-10);
	align-items: start;
}

.dt-hero-split > * > * + * {
	margin-block-start: var(--dt-5);
}

@media (max-width: 900px) {
	.dt-hero-split {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dt-8);
	}
}


/* ============================================================
   18. GALERIE DE CAZURI

   Group cu clasa `dt-cases dt-flow-off`, layout Grid. Înăuntru,
   Group-uri cu clasa `dt-case`.

   Perechea înainte/după e un bloc Columns cu clasa
   `dt-case__pair`, cu „Stack on mobile" DEZACTIVAT — comparația
   simultană e singurul motiv pentru care galeria există.
   ============================================================ */

.dt-cases {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dt-10) var(--dt-6);
	padding-block-start: var(--dt-8);
	border-block-start: 1px solid var(--dt-contrast);
}

.dt-case > * + * {
	margin-block-start: 0;
}

.dt-case__pair.wp-block-columns {
	--wp--style--block-gap: 1px;
	gap: 1px;
	margin-block: 0 var(--dt-5);
	background: var(--dt-hairline);
}

.dt-case__pair .wp-block-column { margin-block: 0; }

.dt-case__pair img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.dt-case .dt-label { display: block; margin-block-end: var(--dt-2); }
.dt-case h3 { margin-block-end: var(--dt-3); }
.dt-case p { max-width: 48ch; }

.dt-case__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dt-2) var(--dt-5);
	margin-block-start: var(--dt-4);
	padding-block-start: var(--dt-3);
	border-block-start: 1px solid var(--dt-hairline);
	color: var(--dt-muted);
	font-size: var(--dt-sm);
}

.dt-case__meta > * { margin-block: 0; }

@media (max-width: 767px) {
	.dt-cases {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dt-9);
	}
}


/* ============================================================
   19. BANDĂ FINALĂ
   Group cu clasa `dt-band dt-flow-off`: text stânga, buton dreapta.
   ============================================================ */

.dt-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dt-9);
	padding: var(--dt-8);
	background: var(--dt-surface);
}

.dt-band > * { margin-block: 0; }

@media (max-width: 767px) {
	.dt-band {
		display: block;
		padding: var(--dt-6) var(--dt-5);
	}

	.dt-band > * + * { margin-block-start: var(--dt-5); }
	.dt-band .wp-block-button__link { width: 100%; }
}


/* ============================================================
   20. UTILITARE DE CONȚINUT
   ============================================================ */

/* --- Hartă Google --- */

.dt-map {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 2;
	margin-block: 0;
	border: 1px solid var(--dt-hairline);
}

.dt-map iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 767px) {
	.dt-map { aspect-ratio: 3 / 2; }
}

/* --- Galerie derulabilă pe mobil --- */

@media (max-width: 767px) {
	.wp-block-gallery.has-nested-images.dt-scroller {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--dt-5);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(50% - 50vw);
		padding-inline: var(--dt-5);
	}

	.wp-block-gallery.has-nested-images.dt-scroller::-webkit-scrollbar {
		display: none;
	}

	.wp-block-gallery.has-nested-images.dt-scroller figure.wp-block-image {
		flex: 0 0 82%;
		width: 82%;
		max-width: none;
		margin: 0;
		scroll-snap-align: start;
	}
}
/* --- Contact Info în footer ---
   Iconițele generate de Blocksy sunt singurele glife din site.
   Etichetele „Adresa", „Telefon" spun oricum ce urmează. */

.ct-contact-info-block .ct-icon-container {
	display: none;
}

.ct-contact-info-block li {
	gap: 0;
}

/* ============================================================
   21. TELEFON ÎN HEADER
   Element Text/HTML în rândul de header. Programul stă deasupra
   numărului; hairline-ul vertical îl separă de meniu.
   ============================================================ */

.dt-phone {
	display: inline-block;
	margin-inline-start: var(--dt-8);
	padding-inline-start: var(--dt-8);
	border-inline-start: 1px solid var(--dt-hairline);
	color: var(--dt-contrast);
	font-size: var(--dt-sm);
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dt-transition);
}

.dt-phone__hours {
	display: block;
	margin-block-end: 2px;
	color: var(--dt-muted);
	font-size: var(--dt-label);
	font-weight: 500;
	letter-spacing: var(--dt-track-label);
	text-transform: uppercase;
}

@media (hover: hover) {
	.dt-phone:hover { color: var(--dt-muted); }
}

/* Sub 1200px numărul dispare — meniul și butonul au prioritate. */
@media (max-width: 1200px) {
	.dt-phone { display: none; }
}

.dt-legal .dt-list--split > * > :first-child {
	color: var(--dt-muted);
	font-weight: 400;
}

.dt-legal .dt-list--split > * > :last-child {
	color: var(--dt-contrast);
	font-size: var(--dt-body);
}