/*
Theme Name: eVizibil
Theme URI: https://evizibil.ro/
Author: AI Creativision SRL — Corneliu Leu, Alexandra Ion
Author URI: https://evizibil.ro/
Description: Temă bloc proprie pentru evizibil.ro. HTML și CSS scrise de mână, fără framework, fără page builder, fără JavaScript obligatoriu. Un singur fișier CSS.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.22.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: evizibil
Tags: block-theme, full-site-editing, one-column, custom-colors, accessibility-ready
*/

/* ==========================================================================
   Tot CSS-ul temei. Tokenurile (culori, spatii, marimi de font) vin din
   theme.json ca variabile --wp--preset--*; aici sunt doar componentele pe
   care theme.json nu le poate exprima.
   ========================================================================== */

/* --- Reset minim ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body > .wp-site-blocks { flex: 1 0 auto; }

img, svg, video { max-width: 100%; height: auto; }

:where(a):focus-visible,
:where(button, .wp-element-button, summary):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

:target { scroll-margin-top: 2rem; }

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

/* Sari la continut — pentru tastatura si cititoare de ecran */
.ev-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--base);
  text-decoration: none;
}
.ev-skip:focus { left: 0.5rem; top: 0.5rem; }

.ev-vizual-ascuns {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Latimi si margini -------------------------------------------------
   Un singur mecanism de layout, al temei. Nu folosim alignfull/alignwide si
   nici useRootPaddingAwareAlignments: fiecare banda ia padding orizontal, iar
   copiii ei directi se centreaza la latimea de continut. Predictibil, si nu
   depinde de CSS-ul de aliniere din core.
   ----------------------------------------------------------------------- */

.ev-antet,
.ev-hero,
.ev-sectiune,
.ev-subsol,
.ev-articol,
.ev-firimituri {
  display: grid;
  grid-template-columns: 1fr min(74rem, 100%) 1fr;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Totul trăiește în coloana centrală, deci toate elementele — titluri, proză,
   grile, tabele — pornesc de pe aceeași margine din stânga. */
.ev-antet > *,
.ev-hero > *,
.ev-sectiune > *,
.ev-subsol > *,
.ev-articol > *,
.ev-firimituri > * { grid-column: 2; min-width: 0; }

/* Spațierea verticală în bandă vine dintr-un singur loc: row-gap-ul grilei.
   Marginile proprii ale blocurilor și cele puse de core (blockGap) se anulează,
   altfel distanțele se adună din trei surse și nu mai sunt previzibile. */
.ev-hero,
.ev-sectiune,
.ev-articol { row-gap: var(--wp--preset--spacing--30); }

.ev-hero > *,
.ev-sectiune > *,
.ev-articol > * { margin-block: 0; }

/* Proza rămâne la o lățime citibilă, aliniată la stânga în coloană. Ce are
   clasă proprie — grile, tabele, liste de pași — folosește toată coloana. */
.ev-hero > :where(p, ul, ol):not([class*="ev-"]),
.ev-sectiune > :where(p, ul, ol):not([class*="ev-"]) { max-width: 46rem; }

/* --- Antet ------------------------------------------------------------- */

.ev-antet {
  border-bottom: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--base);
}

.ev-antet__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 0.9rem;
}

.ev-marca {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  margin-right: auto;
}
.ev-marca:hover { color: var(--wp--preset--color--accent); }
.ev-marca b { color: var(--wp--preset--color--accent); font-weight: 700; }

/* Meniu fara JavaScript: 6 etichete scurte care se rearanjeaza pe mobil */
.ev-meniu { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.15rem; }
.ev-meniu a {
  display: block;
  padding: 0.35rem 0;
  color: var(--wp--preset--color--ink-soft);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 500;
  border-bottom: 2px solid transparent;
}
.ev-meniu a:hover,
.ev-meniu a[aria-current="page"] {
  color: var(--wp--preset--color--ink);
  border-bottom-color: var(--wp--preset--color--accent);
}

/* Telefonul si WhatsApp — A2 din probleme-de-rezolvat.md. Vizibile pe mobil. */
.ev-contact-rapid { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.ev-telefon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--md);
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  white-space: nowrap;
}
.ev-telefon:hover { color: var(--wp--preset--color--accent); }

.ev-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  white-space: nowrap;
}
.ev-whatsapp:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

/* Antetul pe telefon. Trei lucruri, toate masurate la 360px:

   1. `order: 3` era pus pe `.ev-meniu`, adica pe <ul> — dar copilul flex e
      <nav>, deci regula nu facea nimic. Meniul ajungea pe rand propriu doar
      pentru ca nu incapea, iar marca ramanea singura pe primul rand cu
      jumatate de ecran gol langa ea. Antetul lua 207px din 760.
   2. Marca si contactul stau acum pe acelasi rand — marca la stanga,
      telefonul si WhatsApp impinse la dreapta cu `margin-left: auto`. Se
      castiga un rand intreg.
   3. Meniul e o grila de trei coloane, nu text care se rupe unde apuca. Cele
      sase etichete intra exact in doua rânduri de trei, fara nicio celula
      goala — de asta „Acasa" a fost scoasa din meniu (marca duce oricum
      acolo). Se citeste ca o bara construita, nu ca o lista zdrentuita la
      stanga. Daca se mai adauga o eticheta, grila iese cu o celula goala.
   ----------------------------------------------------------------------- */

@media (max-width: 46rem) {
  /* Marca + telefon + WhatsApp pe un singur rând la 360px. Măsurat: cu gap de
     1,5rem era nevoie de 314,2px din 313 disponibili — lipseau 1,2px, exact
     cât să arunce marca singură pe un rând propriu. Gap-urile strânse aduc
     necesarul la ~306px, deci ~7px de rezervă. E strâmt intenționat, și se
     rupe elegant: dacă numărul de telefon sau eticheta se lungesc, contactul
     coboară pe al doilea rând, nimic nu iese din ecran. Sub 360px (ex. 320px)
     coboară oricum. */
  .ev-antet__interior { gap: 0.5rem; padding-block: 0.7rem; }
  .ev-contact-rapid { gap: 0.4rem; }
  .ev-whatsapp { padding: 0.4rem 0.6rem; }

  .ev-marca { margin-right: 0; }
  .ev-contact-rapid { margin-left: auto; }

  /* „Scrie pe WhatsApp" → „WhatsApp". Lângă un număr de telefon scris mare,
     verbul nu adaugă nimic, iar cele ~50px economisite sunt diferența între
     un rând și două. Textul complet rămâne în DOM pentru cititoarele de
     ecran? Nu — e ascuns cu display:none, deci dispare și pentru ele; „Scrie
     pe WhatsApp" și „WhatsApp" duc la același loc și al doilea e la fel de
     clar, deci nu se pierde nimic. */
  .ev-whatsapp__lung { display: none; }

  .ev-antet__interior > nav {
    order: 3;
    width: 100%;
    border-top: 1px solid var(--wp--preset--color--line);
    padding-top: 0.4rem;
  }

  .ev-meniu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.1rem 0.5rem;
  }
  .ev-meniu a {
    text-align: center;
    padding: 0.3rem 0.1rem;
    font-size: var(--wp--preset--font-size--sm);
  }
}

/* --- Butoane ----------------------------------------------------------- */

.ev-buton, .ev-buton--fantoma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9em 1.6em;
  border-radius: 6px;
  font-size: var(--wp--preset--font-size--md);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
}
.ev-buton { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }
.ev-buton:hover { background: var(--wp--preset--color--accent-dark); color: var(--wp--preset--color--base); }
.ev-buton--fantoma { background: transparent; color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--line); }
.ev-buton--fantoma:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

.ev-butoane { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --- Hero -------------------------------------------------------------- */

.ev-hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.ev-hero h1 { max-width: 22ch; }
.ev-hero__subtitlu {
  max-width: 52ch;

  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.55;
  color: var(--wp--preset--color--ink-soft);
}

/* Randul de incredere: 13 proiecte, 7.700+ pagini, din 1994 */
.ev-incredere {

  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--ink-soft);
}
.ev-incredere li { display: flex; align-items: center; gap: 0.5rem; }
.ev-incredere li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
  flex: none;
}
.ev-incredere strong { color: var(--wp--preset--color--ink); font-weight: 650; }

/* --- Sectiuni ---------------------------------------------------------- */

.ev-sectiune { padding-block: var(--wp--preset--spacing--60); }
.ev-sectiune--surface { background: var(--wp--preset--color--surface); }
.ev-sectiune__titlu { max-width: 30ch; }
.ev-sectiune__intro { max-width: 60ch; color: var(--wp--preset--color--ink-soft); font-size: var(--wp--preset--font-size--md); }

/* --- Carduri de serviciu ---------------------------------------------- */

.ev-carduri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem;
}

.ev-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.75rem;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
}
.ev-card h3 { margin: 0; font-size: var(--wp--preset--font-size--lg); }
.ev-card p { margin: 0; color: var(--wp--preset--color--ink-soft); }
.ev-card__pret {
  font-weight: 650;
  color: var(--wp--preset--color--highlight) !important;
  font-size: var(--wp--preset--font-size--base);
}
.ev-card__link { margin-top: auto; padding-top: 0.5rem; font-weight: 600; text-decoration: none; }
.ev-card__link::after { content: " \2192"; }
.ev-card__link:hover { text-decoration: underline; }

/* --- Dovada: citat + trei cifre --------------------------------------- */

/* --- Dovada: proza, concluzia sub o linie, apoi cifrele -----------------
   Layout luat din macheta Stitch (../../stitch/README.md, decizia 2). Fara
   caseta colorata si fara carduri: ierarhia vine din marime si din linii de
   1px. Prima cifra are rigla de accent, celelalte doua rigla obisnuita, ca
   randul sa se citeasca drept progresie, nu ca trei casete egale. */

.ev-dovada {
  max-width: 46rem;
  font-size: var(--wp--preset--font-size--md);
  color: var(--wp--preset--color--ink-soft);
}
.ev-dovada > p { margin: 0; }
.ev-dovada > p + p { margin-top: 1rem; }
.ev-dovada strong { font-weight: 650; color: var(--wp--preset--color--ink); }

.ev-dovada > p.ev-dovada__concluzie {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wp--preset--color--line);
  font-family: var(--wp--preset--font-family--titlu);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--wp--preset--color--ink);
}

.ev-cifre {
  display: grid;
  gap: 2rem;
  margin: 0;
  padding-top: 2rem;
  border-top: 1px solid var(--wp--preset--color--line);
}
@media (min-width: 52rem) {
  .ev-cifre { grid-template-columns: repeat(3, 1fr); }
}

.ev-cifra {
  border-left: 2px solid var(--wp--preset--color--line);
  padding-left: 1.5rem;
}
.ev-cifra:first-child { border-left-color: var(--wp--preset--color--accent); }

.ev-cifra dt {
  font-family: var(--wp--preset--font-family--titlu);
  font-size: var(--wp--preset--font-size--xxxl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--wp--preset--color--ink);
}
.ev-cifra dd {
  margin: 0.5rem 0 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.5;
  color: var(--wp--preset--color--ink-soft);
}

.ev-oameni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;

}
.ev-om h3 { margin: 0 0 0.15rem; font-size: var(--wp--preset--font-size--lg); }
.ev-om__rol { margin: 0 0 0.6rem; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--accent); font-weight: 600; }
.ev-om p { margin: 0; color: var(--wp--preset--color--ink-soft); }

/* --- Pasi -------------------------------------------------------------- */

.ev-pasi { counter-reset: pas; margin: 0; padding: 0; list-style: none; display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .ev-pasi { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.ev-pasi li { counter-increment: pas; padding-top: 3.25rem; position: relative; }
.ev-pasi li::before {
  content: counter(pas);
  position: absolute;
  top: 0; left: 0;
  width: 2.35rem; height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--base);
}
.ev-pasi strong { display: block; margin-bottom: 0.35rem; font-size: var(--wp--preset--font-size--lg); font-weight: 650; letter-spacing: -0.02em; }
.ev-pasi p { margin: 0; color: var(--wp--preset--color--ink-soft); }

/* --- Preturi ----------------------------------------------------------- */

.ev-preturi { width: 100%; border-collapse: collapse; }
.ev-preturi caption { text-align: left; margin-bottom: 0.75rem; color: var(--wp--preset--color--ink-soft); font-size: var(--wp--preset--font-size--sm); }
.ev-preturi th, .ev-preturi td { padding: 0.9rem 0.5rem; text-align: left; border-bottom: 1px solid var(--wp--preset--color--line); }
.ev-preturi thead th { font-size: var(--wp--preset--font-size--sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--ink-soft); font-weight: 600; }
.ev-preturi tbody th { font-weight: 500; }
.ev-preturi thead th:last-child,
.ev-preturi td:last-child { text-align: right; }
.ev-preturi td:last-child { font-weight: 650; color: var(--wp--preset--color--highlight); }

/* nowrap pe coloana de sume e o îmbunătățire pe ecran larg și un bug pe
   telefon: un tabel nu se micșorează sub lățimea lui min-content, iar
   "fee de management + buget" pe un singur rând împingea pagina cu 37px în
   afara ecranului la 345px. Deci se aplică doar acolo unde există loc. */
@media (min-width: 40rem) {
  .ev-preturi td:last-child { white-space: nowrap; }
}
@media (max-width: 39.999rem) {
  .ev-preturi th, .ev-preturi td { padding: 0.8rem 0.25rem; }
  .ev-preturi thead th { letter-spacing: 0.04em; }
}
.ev-nota { max-width: 62ch; color: var(--wp--preset--color--ink-soft); font-size: var(--wp--preset--font-size--base); }

/* --- FAQ: <details>, deci zero JavaScript ----------------------------- */

.ev-faq { max-width: 46rem; }
.ev-faq details { border-bottom: 1px solid var(--wp--preset--color--line); }
.ev-faq summary {
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-size: var(--wp--preset--font-size--md);
  font-weight: 600;
  letter-spacing: -0.015em;
  list-style: none;
}
.ev-faq summary::-webkit-details-marker { display: none; }
.ev-faq summary::after {
  content: "";
  position: absolute;
  right: 0.5rem; top: 50%;
  width: 0.6rem; height: 0.6rem;
  border-right: 2px solid var(--wp--preset--color--accent);
  border-bottom: 2px solid var(--wp--preset--color--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s ease;
}
.ev-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.ev-faq summary:hover { color: var(--wp--preset--color--accent); }
.ev-faq details > div { padding: 0 2.5rem 1.25rem 0; color: var(--wp--preset--color--ink-soft); }
.ev-faq details > div p { margin: 0; }

/* --- CTA final --------------------------------------------------------- */

.ev-cta { background: var(--wp--preset--color--ink); color: #e7eaee; }
.ev-cta h2 { color: var(--wp--preset--color--base); max-width: 34ch; }
.ev-cta__text { max-width: 58ch; font-size: var(--wp--preset--font-size--md); color: #b9c1cc; }
.ev-cta .ev-buton { background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); }
.ev-cta .ev-buton:hover { background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent-dark); }
.ev-cta .ev-buton--fantoma { color: var(--wp--preset--color--base); border-color: rgba(255, 255, 255, 0.28); }
.ev-cta .ev-buton--fantoma:hover { border-color: var(--wp--preset--color--base); color: var(--wp--preset--color--base); }

/* --- Formular ---------------------------------------------------------- */

.ev-formular { max-width: 34rem; display: grid; gap: 1rem; }
.ev-camp { display: grid; gap: 0.35rem; }
.ev-camp label { font-size: var(--wp--preset--font-size--sm); font-weight: 600; }
.ev-camp input, .ev-camp textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 6px;
}
.ev-camp input:focus, .ev-camp textarea:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; border-color: transparent; }
.ev-camp textarea { min-height: 7rem; resize: vertical; }
.ev-camp--capcana { position: absolute; left: -9999px; }
.ev-formular__nota { margin: 0; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-soft); }

/* Starea de eroare pe câmp, luată din macheta Stitch. Marginea roșie singură
   nu spune nimic cuiva care nu distinge culorile, de asta vine cu text
   dedesubt, legat de câmp prin aria-describedby. */
.ev-camp--eroare input,
.ev-camp--eroare textarea { border-color: var(--wp--preset--color--eroare); }
.ev-camp--eroare input:focus,
.ev-camp--eroare textarea:focus { outline-color: var(--wp--preset--color--eroare); }
.ev-camp__eroare {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--eroare);
  font-weight: 500;
}

.ev-mesaj { padding: 1rem 1.25rem; border-radius: 8px; margin-bottom: 1.5rem; font-size: var(--wp--preset--font-size--md); }
.ev-mesaj--ok { background: var(--wp--preset--color--accent-soft); border-left: 3px solid var(--wp--preset--color--accent); }
.ev-mesaj--eroare { background: #fdecea; border-left: 3px solid var(--wp--preset--color--eroare); }

/* --- Subsol ------------------------------------------------------------ */

.ev-subsol {
  background: var(--wp--preset--color--surface);
  border-top: 1px solid var(--wp--preset--color--line);
  padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--base);
}
.ev-subsol__coloane {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 2rem;
}
.ev-subsol h2 {
  font-size: var(--wp--preset--font-size--sm);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--wp--preset--color--ink-soft);
  margin: 0 0 0.9rem;
  font-weight: 600;
}
.ev-subsol p { margin: 0 0 0.5rem; color: var(--wp--preset--color--ink-soft); line-height: 1.55; }
.ev-subsol a { color: var(--wp--preset--color--ink-soft); }
.ev-subsol a:hover { color: var(--wp--preset--color--accent); }
.ev-subsol ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.ev-subsol__persoana { margin-bottom: 1rem; }
.ev-subsol__persoana strong { display: block; color: var(--wp--preset--color--ink); font-weight: 650; }
.ev-subsol__persoana span { display: block; font-size: var(--wp--preset--font-size--sm); }
.ev-subsol__jos {
  margin-top: var(--wp--preset--spacing--40);
  padding-top: 1.25rem;
  border-top: 1px solid var(--wp--preset--color--line);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--ink-soft);
}

/* --- Continut editorial ------------------------------------------------ */

.ev-articol { padding-block: var(--wp--preset--spacing--50); }
.ev-articol__meta { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-soft); margin-bottom: 1.5rem; }
.ev-proza :where(h2) { margin-top: 2.75rem; }
.ev-proza :where(h3) { margin-top: 2rem; }
/* Aceeași regulă ca la benzi: ce are clasă proprie — liste de pași, tabele de
   prețuri, grile — nu e proză și nu se strânge la lățimea textului. */
.ev-proza :where(p, ul, ol):not([class*="ev-"]) { max-width: 42rem; }
.ev-proza :where(ul, ol):not([class*="ev-"]) { padding-left: 1.35rem; }
.ev-proza :where(li) { margin-bottom: 0.4rem; }
.ev-proza :where(table):not([class*="ev-"]) { width: 100%; border-collapse: collapse; }
.ev-proza :where(table):not([class*="ev-"]) :where(th, td) { padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--wp--preset--color--line); text-align: left; }

/* Tabelul de cookie-uri are patru coloane și un token care nu se rupe
   (_ga_D55PH496BG); împreună împingeau pagina cu 68px în afara ecranului la
   345px. Codul are voie să se rupă oriunde și padding-ul scade — așa tabelul
   rămâne tabel, cu asocierea rând/coloană intactă pentru cititoarele de
   ecran, fără să fie transformat în blocuri și fără derulare orizontală. */
.ev-proza :where(table) :where(code) { overflow-wrap: anywhere; }

@media (max-width: 39.999rem) {
  .ev-proza :where(table):not([class*="ev-"]) { font-size: var(--wp--preset--font-size--sm); }
  .ev-proza :where(table):not([class*="ev-"]) :where(th, td) { padding: 0.6rem 0.3rem; }
}

.ev-lista-articole { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.ev-lista-articole h2 { font-size: var(--wp--preset--font-size--xl); margin: 0 0 0.3rem; }
.ev-lista-articole h2 a { text-decoration: none; }
.ev-lista-articole h2 a:hover { text-decoration: underline; }

/* --- Firimituri -------------------------------------------------------- */

.ev-firimituri { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-soft); padding-top: 1.5rem; }
.ev-firimituri ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ev-firimituri li:not(:last-child)::after { content: " /"; color: var(--wp--preset--color--line); margin-left: 0.4rem; }

.ev-dovada__link { margin: 0 !important; padding-top: 0.35rem; }

/* --- Portofoliu: grila de lucrari -------------------------------------- */
/* Reutilizeaza .ev-carduri si .ev-card. Ce se adauga: lista fara buline
   (grila e un <ul>, pentru ca e o enumerare), titlu h2 in loc de h3 — pagina
   are h1 propriu, deci cardurile sunt al doilea nivel — si randul de cifra. */

.ev-lucrari { margin: 0; padding: 0; list-style: none; }

.ev-lucrare { gap: 0.5rem; }

/* Captura iese pana la marginile cardului, cu marja negativa egala cu
   padding-ul lui (1,75rem) — o captura de site incadrata cu spatiu alb de jur
   imprejur arata ca o greseala, nu ca o vitrina. Raza de sus e 9px si nu 10:
   cardul are 10px plus o bordura de 1px, deci interiorul e cu un pixel mai
   mic. `aspect-ratio` plus `width`/`height` in HTML tin locul imaginii inainte
   sa se descarce, deci nu exista salt de layout. */
.ev-lucrare__captura {
  display: block;
  width: calc(100% + 3.5rem);
  max-width: calc(100% + 3.5rem);
  height: auto;
  margin: -1.75rem -1.75rem 0.25rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-radius: 9px 9px 0 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--surface);
}

.ev-lucrare__tip {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--accent) !important;
}

.ev-lucrare h2 {
  margin: 0;
  font-size: var(--wp--preset--font-size--lg);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.ev-lucrare h2 a { text-decoration: none; color: var(--wp--preset--color--ink); }
.ev-lucrare h2 a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }

.ev-lucrare__cifra {
  margin: 0.35rem 0 0 !important;
  padding-top: 0.65rem;
  border-top: 1px solid var(--wp--preset--color--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.ev-lucrare__cifra strong {
  font-family: var(--wp--preset--font-family--titlu);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--ink);
}
.ev-lucrare__cifra span {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--ink-soft);
}

/* Detaliul se lipeste de baza cardului, ca randurile de jos sa se alinieze
   intre carduri de inaltimi diferite. */
.ev-lucrare__detaliu {
  margin-top: auto !important;
  padding-top: 0.5rem;
  font-size: var(--wp--preset--font-size--sm);
}
.ev-lucrare__detaliu a { color: var(--wp--preset--color--accent); }

/* --- Bannerul de consimtamant ------------------------------------------ */
/* A4. Atentie la regulile [hidden]: elementele astea au `display` propriu,
   iar o clasa bate atributul `hidden` din foaia de stil a browserului — fara
   ele bannerul s-ar vedea mereu, inclusiv la cine a raspuns deja. */

.ev-consimtamant {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr min(74rem, 100%) 1fr;
  background: var(--wp--preset--color--base);
  border-top: 1px solid var(--wp--preset--color--line);
  box-shadow: 0 -6px 24px rgba(16, 21, 28, 0.09);
}
.ev-consimtamant[hidden] { display: none; }

.ev-consimtamant__interior {
  grid-column: 2;
  min-width: 0;
  padding: 1.25rem var(--wp--preset--spacing--20) 1.35rem;
  display: grid;
  gap: 0.7rem;
}

.ev-consimtamant h2 {
  margin: 0;
  font-size: var(--wp--preset--font-size--md);
  letter-spacing: -0.02em;
}
.ev-consimtamant p {
  margin: 0;
  max-width: 66ch;
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--ink-soft);
}

.ev-consimtamant__categorii summary {
  cursor: pointer;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: var(--wp--preset--color--accent);
  width: fit-content;
}
.ev-consimtamant__categorii summary:hover { color: var(--wp--preset--color--accent-dark); }
.ev-consimtamant__categorii > div {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  padding: 0.9rem 0 0.25rem;
}
.ev-consimtamant__bifa label { display: flex; gap: 0.55rem; align-items: flex-start; cursor: pointer; }
.ev-consimtamant__bifa input { margin: 0.15rem 0 0; accent-color: var(--wp--preset--color--accent); }
.ev-consimtamant__categorii .ev-buton--fantoma {
  font-size: var(--wp--preset--font-size--sm);
  padding: 0.55em 1.1em;
}

/* Accept si Refuz: aceeasi clasa, aceeasi dimensiune. Vezi inc/consimtamant.php. */
.ev-consimtamant__butoane { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ev-consimtamant__butoane .ev-buton {
  font-size: var(--wp--preset--font-size--base);
  padding: 0.7em 1.5em;
  flex: 1 1 8rem;
  max-width: 14rem;
}

/* Pe telefon bannerul e cel mai scump: masurat, ajungea la 353px pe un ecran
   de 360x800 — aproape jumatate din pagina acoperita. Aici se strange la ~250. */
@media (max-width: 32rem) {
  .ev-consimtamant__interior { padding-block: 0.9rem 1rem; gap: 0.5rem; }
  .ev-consimtamant p { font-size: var(--wp--preset--font-size--sm); }
  .ev-consimtamant h2 { font-size: var(--wp--preset--font-size--base); }
  .ev-consimtamant__butoane .ev-buton { padding: 0.6em 1.1em; }
}

@media (min-width: 52rem) {
  .ev-consimtamant__interior {
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: 2.5rem;
    padding-block: 1.35rem 1.5rem;
  }
  .ev-consimtamant h2,
  .ev-consimtamant p,
  .ev-consimtamant__categorii { grid-column: 1; }
  .ev-consimtamant__butoane { grid-column: 2; grid-row: 1 / span 3; align-self: center; flex-wrap: nowrap; }
  /* In coloana ingusta din dreapta, flex-basis-ul de 8rem le-ar pune unul sub
     altul; aici incap alaturi, si alaturi se citesc ca doua alegeri egale. */
  .ev-consimtamant__butoane .ev-buton { flex: 0 0 auto; max-width: none; }
}

/* Linkul „Setari cookie-uri" din subsol: un buton, pentru ca deschide un
   panou, nu navigheaza. Ascuns pana cand JavaScript il aprinde — altfel ar fi
   un control mort la cine are JS oprit. */
.ev-subsol__cookie {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--wp--preset--color--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}
.ev-subsol__cookie[hidden] { display: none; }
.ev-subsol__cookie:hover { color: var(--wp--preset--color--accent); }

/* --- Tipar ------------------------------------------------------------- */

@media print {
  .ev-antet__interior .ev-meniu, .ev-contact-rapid, .ev-cta, .ev-formular,
  .ev-consimtamant { display: none; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* Patru carduri: 2×2 pe ecran lat citește mai bine decât 3+1. */
@media (min-width: 62rem) {
  .ev-carduri--doua { grid-template-columns: repeat(2, 1fr); }
}

/* --- Faza 3: componente din paginile de conținut ----------------------- */
/* Toate trăiesc în interiorul `.ev-proza`, adică deja în coloana centrală a
   unei benzi. Niciuna nu e `.ev-sectiune`: o bandă în bandă și-ar adăuga
   propriul padding și propria grilă de trei coloane, iar fundalul n-ar mai
   ajunge la marginile ferestrei. */

/* Exemplul real de pe fiecare pagină de serviciu — cerința 3 din plan §6.
   Captura are width/height în HTML și `aspect-ratio` aici, deci locul ei e
   rezervat înainte să se descarce: zero deplasare de layout, ca la portofoliu.
   Clasa e `ev-exemplu` și nu `ev-dovada` pentru că a doua e deja blocul de
   dovadă de pe pagina principală, cu alt rol și alt aspect. */
/* 40rem = 640px, exact lățimea capturilor din imagini/portofoliu/. Fără
   plafon, figura ar lua toată coloana de 74rem și captura s-ar mări de la 640
   la 1184px — vizibil pixelată, și dominând pagina în loc s-o susțină. */
.ev-exemplu {
  margin: 2rem 0;
  padding: 0;
  max-width: 40rem;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--wp--preset--color--surface);
}
.ev-exemplu img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.ev-exemplu figcaption { padding: 1.25rem 1.5rem 1.4rem; }
.ev-exemplu figcaption p { margin: 0 0 0.6rem; max-width: 46rem; }
.ev-exemplu figcaption p:last-child { margin-bottom: 0; }
.ev-exemplu__domeniu {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--ink-soft);
}
.ev-exemplu__domeniu a { color: var(--wp--preset--color--accent); }
.ev-exemplu__cifra strong {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--ink);
}
.ev-exemplu__cifra span { color: var(--wp--preset--color--ink-soft); font-size: var(--wp--preset--font-size--sm); }
.ev-exemplu__dece { color: var(--wp--preset--color--ink-soft); }

/* Al doilea dintre cele trei îndemnuri. Deliberat mai discret decât închiderea
   de la finalul paginii, ca să nu concureze cu ea. */
.ev-cta-mijloc {
  margin: 2.5rem 0;
  padding: 1.4rem 1.6rem;
  border-left: 3px solid var(--wp--preset--color--accent);
  border-radius: 0 8px 8px 0;
  background: var(--wp--preset--color--surface);
}
.ev-cta-mijloc p { margin: 0 0 1rem; max-width: 46rem; }

/* Lista „ce urcă costul" de pe /preturi/ — secțiunea principală a paginii,
   nu o notă de subsol: cu praguri de intrare sub piață, filtrarea se face
   aici, nu prin cifra afișată. */
.ev-factori { display: grid; gap: 1rem; margin: 1.5rem 0 2rem; }
.ev-factor {
  padding: 1rem 1.2rem;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 8px;
}
.ev-factor p { margin: 0; max-width: 46rem; }
.ev-factor p + p { margin-top: 0.4rem; color: var(--wp--preset--color--ink-soft); }
.ev-factor__cap { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.ev-factor__cap strong { font-weight: 650; color: var(--wp--preset--color--ink); }
.ev-factor__efect {
  font-size: var(--wp--preset--font-size--sm);
  padding: 0.1em 0.6em;
  border-radius: 999px;
  background: var(--wp--preset--color--accent-soft);
  color: var(--wp--preset--color--accent-dark);
  white-space: nowrap;
}
.ev-factor__efect--ambele { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink-soft); }

/* Tabelul înainte/după de pe /refacere-site-existent/. Pe telefon derulează
   în propriul container, ca pagina să nu iasă lateral. */
.ev-inaintedupa { width: 100%; border-collapse: collapse; margin: 1.5rem 0 0.75rem; }
.ev-inaintedupa caption {
  caption-side: bottom;
  padding-top: 0.75rem;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--ink-soft);
  text-align: left;
}
.ev-inaintedupa th, .ev-inaintedupa td {
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--wp--preset--color--line);
  text-align: left;
  vertical-align: top;
}
.ev-inaintedupa thead th { font-size: var(--wp--preset--font-size--sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--ink-soft); }
.ev-inaintedupa tbody th { font-weight: 500; }
.ev-inaintedupa td:last-child { color: var(--wp--preset--color--ink); }

/* Cei doi oameni de pe /despre-noi/ — pagina de E-E-A-T. */
.ev-echipa { display: grid; gap: 2rem; margin: 2rem 0; }
.ev-persoana { display: grid; gap: 1.25rem; align-items: start; }
.ev-persoana__foto {
  width: 100%;
  max-width: 160px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--wp--preset--color--line);
}
.ev-persoana__text > * { margin: 0 0 0.6rem; max-width: 46rem; }
.ev-persoana__text h2 { font-size: var(--wp--preset--font-size--xl); margin-top: 0; }
.ev-persoana__rol { color: var(--wp--preset--color--accent); font-weight: 600; }
.ev-persoana__pentru, .ev-persoana__legaturi { font-size: var(--wp--preset--font-size--sm); }
.ev-persoana__legaturi { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0; }

/* Data articolului, sub titlu, în lista de pe /blog/. */
.ev-lista-articole .wp-block-post-date {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--ink-soft);
  margin: 0 0 0.4rem;
}
.ev-articol__inapoi { margin: 0; }

@media (min-width: 48rem) {
  .ev-factori { grid-template-columns: repeat(2, 1fr); }
  /* Doar cu fotografie: fără ea, singurul copil ar cădea în coloana de 160px
     și textul ar ieși pe patru cuvinte pe rând. */
  .ev-persoana--cu-foto { grid-template-columns: 160px 1fr; gap: 1.75rem; }
}