@import url("/assets/fonts/fonts.css");

/* ═══════════════════════════════════════════════════════════════════
   EUROEXPO 2.0 — sistem de design
   Direcție: minimalist, negru dominant, albastru pentru navigație și
   linkuri, verde strict ca accent. Referințe: hamburg-messe.com
   (structură, tipografie, breadcrumb) și automechanika.messefrankfurt.com
   (linkuri cu săgeată, combinația albastru-gri-negru).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Negru: culoarea principală. Nu #000 — prea dur pe ecran. ───── */
  --ink:      #1B1C20;
  --ink-80:   #3A3C42;
  --ink-60:   #5F6167;
  --grey:     #8D8F95;   /* text secundar, etichete */
  --line:     #E3E5E8;   /* linii, borduri */
  --wash:     #F4F5F6;   /* fundal de secțiune */
  --white:    #FFFFFF;

  /* ── Albastru: navigație, linkuri, acțiuni ─────────────────────────
     Scara e preluată ca atare de la bauma.de (tokenii lor
     --color-primary-*), decizie luată în septembrie 2026 pentru un
     albastru mai viu decât #0063A4. Logo-ul rămâne pe #0063A5 al lui,
     dar stă pe alb în antet și e alb în footer, deci nu se atinge de
     niciun fundal albastru. */
  --blue-900:  #00243F;  /* mai închis decât treapta lor de jos */
  --blue-dark: #00436E;  /* 700 — fundaluri închise, capătul gradientului */
  --blue-600:  #005A93;  /* 600 */
  --blue:      #0070B8;  /* ★ 500 — linkuri, butoane */
  --blue-mid:  #338DC6;  /* 400 — hover */
  --blue-200:  #99C6E3;  /* 200 */
  --blue-pale: #C4D9E7;  /* 100 — banda de sub hero */
  --blue-wash: #EBF4F9;  /*  50 — fundal foarte deschis */

  /* Gradientul lor, exact: închis la stânga, deschis la dreapta. */
  --blue-grad: linear-gradient(98.94deg, var(--blue-dark), var(--blue));
  /* Aceeași înclinare, un registru mai adânc — pentru secțiunile care
     au text verde peste. Verdele pe treapta 500 dă doar 2.08:1. */
  --blue-grad-adanc: linear-gradient(98.94deg, var(--blue-900), var(--blue-dark));

  /* ── Verde: accent, strict punctual ────────────────────────────── */
  --green:      #89B03F;
  --green-dark: #5E7A2A;
  --green-pale: #EEF4E2;

  --font: "Jakarta", "Helvetica Neue", Arial, system-ui, sans-serif;

  --shell: 1320px;
  --gut:   clamp(1.25rem, 5vw, 4rem);

  /* ritm vertical unic — toate secțiunile derivă din el */
  --sec-y: clamp(3.5rem, 8vw, 7rem);

  /* chevronul dintre treptele de breadcrumb, ca masca — ia culoarea textului */
  --chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg>');
}

/* ────────────────────────────────────────────── reset & bază ────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* `hidden` (folosit de filtrele din Calendar, căutare, formulare) trebuie să
   ascundă orice element, inclusiv pe cele cu display:grid/flex din CSS-ul de
   mai jos — altfel regula clasei bate stilul implicit al browserului. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-mid); }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 2px; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.shell--ingust { max-width: 860px; }

.skip {
  position: absolute; left: -100%; top: 0; z-index: 200;
  background: var(--ink); color: var(--white); padding: .85rem 1.5rem; font-weight: 700;
}
.skip:focus { left: 0; }

/* ══════════════════════════════════════════════ TIPOGRAFIE ═══════
   O singură familie, diferențiată prin greutate și tracking. Titlurile
   sunt strânse (tracking negativ) — de acolo vine aerul „editorial". */

.disp {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--ink);
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }

.t-hero    { font-size: clamp(2.5rem, 6.2vw, 4.5rem); }
.t-sectiune{ font-size: clamp(1.875rem, 3.8vw, 3rem); }
.t-bloc    { font-size: clamp(1.25rem, 2vw, 1.5rem); }

.eyebrow {
  font-size: .8125rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--grey); margin-bottom: .85rem;
}
.lede { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.65; color: var(--ink-80); max-width: 62ch; }
.prose p { margin-bottom: 1.1rem; color: var(--ink-80); max-width: 68ch; }
.prose h3 { font-size: 1.25rem; margin: 2rem 0 .75rem; }
.prose :last-child { margin-bottom: 0; }
/* Listele din paginile de târg: puncte mici albastre, rânduri aerisite. */
.lista-fina { list-style: none; padding: 0; margin: 0; max-width: 68ch; }
.lista-fina li {
  position: relative; padding: .55rem 0 .55rem 1.1rem;
  color: var(--ink-80); line-height: 1.55; border-top: 1px solid var(--line);
}
.lista-fina li:first-child { border-top: 0; padding-top: 0; }
.lista-fina li::before {
  content: ""; position: absolute; left: 0; top: 1.15em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
}
.lista-fina li:first-child::before { top: .6em; }
.lista-fina strong { color: var(--ink); font-weight: 600; }

/* ════════════════════════════════════════════════ SECȚIUNI ═══════ */

.sec { padding-block: var(--sec-y); }
.sec--wash { background: var(--wash); }
.sec--pal  { background: var(--blue-wash); }
.sec--ink  { background: var(--ink); color: #C9CBD0; }
.sec--ink .disp, .sec--ink h2, .sec--ink h3 { color: var(--white); }
.sec--ink .eyebrow { color: var(--grey); }
.sec--ink .lede { color: #C9CBD0; }
.sec--stramt { padding-block: clamp(2rem, 4vw, 3rem); }

/* Aceleași reguli de contrast ca pe negru, doar fundalul se schimbă —
   de aceea se pune peste `sec--ink`, nu în locul ei. Aici merge varianta
   adâncă a gradientului: secțiunea are cifrele scrise cu verde. */
.sec--azur { background: var(--blue-900); background-image: var(--blue-grad-adanc); color: #C6D6E6; }
.sec--azur .lede { color: #C6D6E6; }
.sec--azur .eyebrow { color: #8FB0CD; }

/* ══════════════════════════════════ MOTIVUL CERCULUI (ghid p.2) ══
   Cercuri decupate de marginea secțiunii — unul plin verde, unul
   conturat. Foarte transparente: e textură, nu decor care se vede.
   Se pune pe orice secțiune închisă: class="… cercuri". */

.cercuri { position: relative; overflow: hidden; isolation: isolate; }
.cercuri > * { position: relative; z-index: 1; }
.cercuri::before, .cercuri::after {
  content: ""; position: absolute; z-index: 0;
  border-radius: 50%; pointer-events: none;
}
/* plin, verde — colțul din dreapta sus, tăiat de margine */
.cercuri::before {
  width: clamp(320px, 38vw, 620px); aspect-ratio: 1;
  right: -8%; top: -32%;
  background: var(--green); opacity: .14;
}
/* conturat, alb — jos-stânga, contrapunct la primul */
.cercuri::after {
  width: clamp(260px, 30vw, 500px); aspect-ratio: 1;
  left: -6%; bottom: -42%;
  border: 1.5px solid rgba(255,255,255,.16);
}
@media (max-width: 720px) {
  .cercuri::before { right: -22%; top: -14%; }
  .cercuri::after  { display: none; }
}

/* capul de secțiune: titlu stânga, link „vezi toate" dreapta */
.sec__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ═══════════════════════════ BARA UTILITARĂ + ANTET ═════════════
   Două niveluri, ca la hamburg-messe: sus o bandă subțire cu emailul
   la stânga și social + limbă la dreapta; dedesubt logo + titulatură,
   meniu și căutare. Bara de sus se derulează, antetul rămâne fix. */

.utilbar { background: var(--white); border-bottom: 1px solid var(--line); }
.utilbar__in {
  max-width: var(--shell); margin-inline: auto; padding: 0 var(--gut);
  min-height: 44px; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem 1.5rem;
}
.utilbar__stg { font-size: .8125rem; margin: 0; }
.utilbar__stg a { color: var(--ink-60); text-decoration: none; }
.utilbar__stg a:hover { color: var(--blue); text-decoration: underline; }
.utilbar__drt { display: flex; align-items: center; gap: .1rem; }
.utilbar .hdr__social { display: flex; gap: .1rem; }
.utilbar .hdr__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; color: var(--ink); border-radius: 2px;
  transition: color .15s, background .15s;
}
.utilbar .hdr__social a:hover { color: var(--blue); background: var(--blue-wash); }
.utilbar__lang {
  margin-left: .5rem; padding: .3rem .6rem; border-radius: 2px;
  font-size: .8125rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink); text-decoration: none;
}
.utilbar__lang:hover { color: var(--blue); background: var(--blue-wash); }

.hdr {
  position: sticky; top: 0; z-index: 90;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.hdr__in {
  max-width: var(--shell); margin-inline: auto; padding: 0 var(--gut);
  min-height: 88px; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
}

/* logo + titulatură, despărțite de o linie subțire */
.hdr__marca { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.hdr__logo { flex-shrink: 0; display: block; }
.hdr__logo img { width: clamp(104px, 11vw, 138px); height: auto; }
/* Titulatura stă pe exact două rânduri, cum e scrisă în site.json —
   fiecare rând e un bloc care nu se rupe, iar bara verticală e desenată. */
.hdr__titulatura {
  font-size: .8125rem; font-weight: 600; line-height: 1.45; color: var(--ink-60);
  padding-left: 1rem; border-left: 1px solid var(--line);
  margin: 0;
}
.hdr__rand { display: block; white-space: nowrap; }
.hdr__sep {
  display: inline-block; width: 1px; height: .85em; margin: 0 .55em;
  vertical-align: -.08em; background: var(--grey);
}

.nav { display: flex; align-items: center; gap: clamp(.75rem, 1.4vw, 1.35rem); margin-left: auto; }
.nav a {
  font-size: .875rem; font-weight: 500; color: var(--ink); text-decoration: none;
  padding: .4rem 0; position: relative; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--blue); }

/* ─────────────────────────────────────────────── submeniuri ─────
   Intrarea principală rămâne link (merge la clic, merge fără JS).
   Săgeata de lângă ea deschide lista: pe desktop și la hover, pe
   mobil doar la apăsare. */

.nav__grup { position: relative; display: flex; align-items: center; gap: .3rem; }
.nav__sageata {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 2px;
  background: none; color: var(--ink-60); cursor: pointer;
  transform: rotate(90deg); transition: color .15s, transform .2s;
}
.nav__sageata:hover { color: var(--blue); }
.nav__grup:hover .nav__sageata,
.nav__sageata[aria-expanded="true"] { transform: rotate(90deg) translateX(2px); color: var(--blue); }

.nav__sub {
  position: absolute; top: 100%; left: -1rem; z-index: 60;
  min-width: 218px; margin: 0; padding: 0; list-style: none;
  background: var(--white); border: 1px solid var(--line);
  border-top: 2px solid var(--blue);
  box-shadow: 0 10px 26px rgba(27,28,32,.10);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav__grup:hover .nav__sub,
.nav__grup:focus-within .nav__sub,
.nav__sub[data-deschis] { opacity: 1; visibility: visible; transform: translateY(0); }

.nav__sub a {
  display: block; padding: .5rem 1rem; font-size: .8125rem; font-weight: 400;
  color: var(--ink-80); white-space: nowrap;
}
.nav__sub a::after { display: none; }
/* La hover doar textul se face albastru; fundalul rămâne un gri discret. */
.nav__sub a:hover { background: var(--wash); color: var(--blue); }
/* Separator subțire între intrări — pe li, ca fundalul de hover să nu-l acopere. */
.nav__sub li + li { border-top: 1px solid var(--line); }

/* fără JS săgeata n-are ce comanda — lista rămâne pe hover/focus */
.no-js .nav__sageata { display: none; }

.hdr__cauta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 2px;
  color: var(--ink); background: none; border: 0; cursor: pointer;
  transition: color .15s, background .15s;
}
.hdr__cauta:hover { color: var(--blue); background: var(--blue-wash); }

.nav-toggle {
  display: none; margin-left: auto; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; padding: 10px;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .22s, opacity .22s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* titulatura dispare prima — meniul are prioritate pe spațiu */
@media (max-width: 1240px) { .hdr__titulatura { display: none; } }

@media (max-width: 1080px) {
  .hdr__in { min-height: 72px; flex-wrap: wrap; }
  .nav-toggle { display: block; order: 3; margin-left: .25rem; }
  .hdr__cauta { order: 2; margin-left: auto; }
  .nav {
    order: 4; width: 100%; margin: 0; flex-direction: column; align-items: stretch;
    gap: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav[data-deschis] { max-height: 80vh; overflow-y: auto; padding-bottom: 1rem; }
  .nav a { padding: .9rem .25rem; border-top: 1px solid var(--line); font-size: 1.0625rem; }
  .nav a::after { display: none; }

  /* Pe mobil lista nu mai plutește — se desface sub intrarea ei, iar
     hover-ul nu mai deschide nimic (pe touch n-ar avea cum să închidă). */
  .nav__grup { display: grid; grid-template-columns: 1fr auto; align-items: stretch; gap: 0; }
  .nav__grup > a { grid-column: 1; }
  .nav__sageata {
    grid-column: 2; width: 48px; height: auto; border-radius: 0;
    border-top: 1px solid var(--line);
  }
  .nav__sub {
    grid-column: 1 / -1; position: static; min-width: 0;
    border: 0; border-top: 1px solid var(--line); box-shadow: none;
    padding: 0; background: var(--wash);
    display: none; opacity: 1; visibility: visible; transform: none;
  }
  .nav__grup:hover .nav__sub, .nav__grup:focus-within .nav__sub { display: none; }
  .nav__sub[data-deschis] { display: block; }
  /* Separatorul vine din regula de pe `li`, comună cu desktopul — dacă l-am
     pune și aici pe `a`, ar ieși linie dublă. */
  .nav__sub a { padding: .7rem 1.25rem; border-top: 0; font-size: .875rem; }
}
@media (max-width: 560px) {
  .utilbar__stg { font-size: .75rem; }
  .utilbar .hdr__social a { width: 30px; height: 30px; }
}

/* panoul de căutare — ascuns până la clic pe iconiță */
.cauta {
  display: none; background: var(--wash);
  border-bottom: 1px solid var(--line); padding-block: 1.25rem;
}
.cauta[data-deschis] { display: block; }
.cauta__form {
  display: flex; gap: .5rem; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--gut);
}
.cauta__form input {
  flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: .85rem 1rem;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--white); color: var(--ink);
}
.cauta__form input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-wash); }
.cauta__form--pagina { padding-inline: 0; }

/* rezultatele căutării: listă sub câmp (panou) și pagina /cauta/ */
.cauta__rez {
  max-width: var(--shell); margin: .6rem auto 0; padding-inline: var(--gut);
  max-height: min(60vh, 28rem); overflow-y: auto;
}
.cauta__rez:not([hidden]) { display: block; }
.rez { display: grid; gap: .15rem; padding: .8rem 1rem; background: var(--white); border: 1px solid var(--line); border-top-width: 0; color: var(--ink); text-decoration: none; }
.cauta__rez .rez:first-child, .rez__lista .rez:first-child { border-top-width: 1px; }
.rez:hover, .rez--activ { background: var(--blue-wash); border-color: var(--blue-200); }
.rez__g { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.rez__t { font-weight: 700; letter-spacing: -.01em; }
.rez__d { font-size: .875rem; color: var(--ink-60); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rez--toate { text-align: center; font-weight: 700; color: var(--blue); border-top-width: 1px; margin-top: .5rem; }
.rez__gol { padding: 1rem; color: var(--ink-60); background: var(--white); border: 1px solid var(--line); }
.rez__pagina { margin-top: 2rem; }
.rez__nr { color: var(--ink-60); margin-bottom: 1rem; }
.rez__grup { font-size: 1.25rem; margin: 2rem 0 .75rem; }
.rez__grup small { font-size: .875rem; color: var(--ink-60); font-weight: 400; }

/* ═════════════════════════════════════════════════ HERO ══════════
   Fără voal colorat peste imagine. Doar un degradeu întunecat jos,
   cât să se citească textul alb — imaginea rămâne curată sus. */

.hero {
  position: relative; isolation: isolate;
  /* Înălțimea urmează LĂȚIMEA, nu înălțimea ecranului: imaginile sunt 2:1,
     iar o casetă legată de vh devine foarte turtită pe monitoare late și
     decupează jumătate din poză. Cu vw, decupajul rămâne constant. */
  min-height: clamp(400px, 44vw, 700px);
  display: flex; align-items: flex-end;
  background: var(--ink); color: var(--white); overflow: hidden;
}
.hero--mic { min-height: clamp(280px, 32vw, 620px); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
/* Imaginile sunt 2:1, caseta e mai lată pe ecran mare — `cover` decupează
   pe verticală. Ancorăm spre partea de sus, unde stau capetele oamenilor;
   partea de jos e oricum acoperită de degradeu. */
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 50% 14%);
}
.hero__media .ph { height: 100%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Două straturi. Degradeul îngroașă baza, unde stă textul. Peste el, un
     voal uniform de 20% pe toată suprafața.

     Voalul a fost adăugat pentru că doar degradeul nu ajungea: măsurat pe
     cadrele videoului, contrastul minim al textului alb era 3,52 — sub pragul
     WCAG AA de 4,5 cerut pentru subtitlu, care e text normal de 19px, nu text
     mare. Cu voalul urcă la 5,0, iar imaginea păstrează 82% din luminozitate,
     deci nu se închide vizibil. */
  background:
    linear-gradient(to top,
      rgba(10,11,13,.88) 0%,
      rgba(10,11,13,.74) 20%,
      rgba(10,11,13,.42) 42%,
      rgba(10,11,13,.12) 60%,
      rgba(10,11,13,0)   72%),
    rgba(10,11,13,.20);
}
.hero__in { position: relative; z-index: 2; width: 100%; max-width: var(--shell); margin-inline: auto; padding: 0 var(--gut) clamp(2.5rem, 5vw, 4rem); }
.hero__eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--white); margin-bottom: 1rem; }
.hero__title { color: var(--white); max-width: 20ch; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero__sub { margin-top: 1.25rem; max-width: 56ch; font-size: clamp(1rem, 1.4vw, 1.1875rem); color: rgba(255,255,255,.94); text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* banda îngustă albastru pal de sub hero */
/* Înălțimea benzii e un token: footerul își ia jumătate din ea, ca cele
   două accente să rămână legate dacă se schimbă vreodată valoarea. */
:root { --banda-h: clamp(10px, 1.6vw, 18px); }
.banda-pal { background: var(--blue-pale); height: var(--banda-h); }

/* ═══════════════════════════════════════ BANDA DE ROLURI ═════════
   Ține locul benzii palide pe homepage. Trei intrări după ce caută
   omul — expozant, vizitator, presă — pe albastrul de brand. */

/* Banda stă strâns în jurul cardurilor — aerul de dinainte o făcea să pară
   o secțiune în toată regula, nu o punte între hero și restul paginii. */
.roluri {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--blue-dark); background-image: var(--blue-grad);
  padding-block: clamp(1.5rem, 2.6vw, 2.5rem);
}

/* Cercurile concentrice — textura de fundal. Depășesc secțiunea și sunt
   tăiate de marginile ei, cum cere ghidul de brand: se văd arcele. */
/* Ținute mici intenționat: pe o bandă joasă, cercurile mari s-ar vedea doar
   prin fâșia lor de mijloc, unde arcul e aproape drept și nu se mai citește
   ca cerc. La dimensiunea asta se vede curbura. */
.roluri .cerc-decor {
  position: absolute; z-index: 0; pointer-events: none;
  right: 2%; top: 50%; transform: translateY(-50%);
  width: clamp(300px, 30vw, 440px); height: auto;
  color: rgba(255,255,255,.24);
}

.roluri__grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(3, 1fr);
}

/* Cardurile sunt albastrul de brand peste gradient, iar la hover coboară
   o treaptă — nu devin albe. Text centrat, doar supratitlu și titlu. */
.rol {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; text-align: center;
  padding: clamp(1.4rem, 2.2vw, 1.85rem) clamp(1.25rem, 2vw, 1.5rem);
  background: var(--blue); border-radius: 3px;
  color: var(--white); text-decoration: none;
  transition: background .18s, transform .18s;
}
.rol:hover { background: var(--blue-600); transform: translateY(-2px); }
.rol:active { background: var(--blue-dark); transform: translateY(0); }
.rol__sup {
  font-size: .75rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.82);
}
.rol__t { font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-weight: 700; letter-spacing: -.01em; }

@media (max-width: 860px) {
  .roluri__grid { grid-template-columns: 1fr; }
  .roluri .cerc-decor { right: -22%; width: 320px; }
}

/* ══════════════════════════════════════════════ BREADCRUMB ═══════
   Ca la hamburg-messe: schema.org, chevron între trepte, ultima
   treaptă nu e link. Intră cu o alunecare scurtă la încărcare. */

.bc { border-bottom: 1px solid var(--line); }
.bc ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem;
  list-style: none; padding: 1rem 0; margin: 0;
  font-size: .875rem;
}
.bc li { display: inline-flex; align-items: center; opacity: 0; transform: translateX(-6px); animation: bc-intra .38s cubic-bezier(.22,.61,.36,1) forwards; }
.bc li + li::before {
  content: ""; width: 16px; height: 16px; margin-inline: .35rem; flex-shrink: 0;
  background: currentColor; color: var(--grey);
  -webkit-mask: var(--chevron) center/12px no-repeat; mask: var(--chevron) center/12px no-repeat;
}
.bc a { color: var(--ink-60); text-decoration: none; }
.bc a:hover { color: var(--blue); text-decoration: underline; }
.bc [aria-current="page"] { color: var(--ink); font-weight: 600; }
.bc li:nth-child(1) { animation-delay: .02s } .bc li:nth-child(2) { animation-delay: .09s }
.bc li:nth-child(3) { animation-delay: .16s } .bc li:nth-child(4) { animation-delay: .23s }
@keyframes bc-intra { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bc li { animation: none; opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════ BUTOANE ════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-size: .9375rem; font-weight: 700; letter-spacing: .01em;
  padding: .9rem 1.6rem; border-radius: 2px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
/* Săgeți mari, ca la automechanika — ele poartă „mai departe", nu textul. */
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn--primar { background: var(--blue); color: var(--white); }
.btn--primar:hover { background: var(--blue-dark); color: var(--white); }
.btn--contur { border-color: currentColor; color: var(--ink); }
.btn--contur:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--accent { background: var(--green); color: var(--ink); }
.btn--accent:hover { background: var(--green-dark); color: var(--white); }
.btn--bloc { display: flex; width: 100%; }
.hero .btn--contur { color: var(--white); }
.hero .btn--contur:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── link cu săgeată, în stilul automechanika ──────────────────────
   Textul are o linie care crește de la stânga, săgeata alunecă la dreapta. */

.link-sageata {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .9375rem; font-weight: 700; color: var(--blue);
  text-decoration: none; padding-block: .25rem;
}
.link-sageata span { position: relative; }
.link-sageata span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .26s cubic-bezier(.22,.61,.36,1);
}
.link-sageata svg { width: 24px; height: 24px; flex-shrink: 0; transition: transform .26s cubic-bezier(.22,.61,.36,1); }
.link-sageata:hover span::after { transform: scaleX(1); }
.link-sageata:hover svg { transform: translateX(5px); }
.link-sageata--ink { color: var(--ink); }
.link-sageata--alb { color: var(--white); }
@media (prefers-reduced-motion: reduce) {
  .link-sageata span::after, .link-sageata svg { transition: none; }
}

/* ════════════════════════════════════ CASETE DE PLACEHOLDER ═════
   Gri neutru cu eticheta scrisă în clar. Se elimină când vine media. */

.ph {
  position: relative; aspect-ratio: var(--ph-ratie, 16 / 10);
  display: grid; place-items: center; overflow: hidden;
  background: #E8EAEC; color: var(--ink-60);
  border: 1px solid var(--line);
}
.ph__eticheta {
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-align: center; padding: .75rem 1rem; line-height: 1.5;
}
.ph--logo { background: var(--white); aspect-ratio: 3 / 2; }
.ph--logo .ph__eticheta { color: var(--grey); }
.ph--pe-inchis { background: #26282D; color: #9A9CA2; border-color: #34363C; }
.hero .ph { border: 0; aspect-ratio: auto; }

/* ═══════════════════════════════════════════ CALENDAR / TÂRGURI ══
   Un rând = o ediție. Sigla în casetă de aceeași dimensiune peste tot,
   apoi titlu, locație, perioadă. Structura din hamburg-messe/events. */

/* ═════════════════════════ FIȘA TÂRGULUI (coloana din dreapta) ═══
   Sigla sus, apoi ediția următoare, apoi datele seci. Etichetele mici
   deasupra valorilor, ca într-o fișă tehnică. */

.fisa__logo {
  display: flex; align-items: center; min-height: 68px;
  margin-bottom: 1.75rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.fisa__logo img { max-width: 190px; max-height: 68px; width: auto; height: auto; object-fit: contain; }
.fisa__data {
  font-size: clamp(1.375rem, 2.2vw, 1.625rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.15; margin-bottom: .6rem;
}
.fisa__loc { color: var(--ink-80); line-height: 1.5; }
.fisa__oras { color: var(--ink-60); }
.fisa__public {
  font-size: .8125rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--grey); margin: .75rem 0 1.5rem;
}
.fisa__date { margin: 0; padding-top: 1.75rem; }
.fisa__date:not(:has(dt)) { padding-top: 0; }
.fisa__date dt {
  font-size: .8125rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--grey);
  margin-bottom: .35rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.fisa__date dt:first-child { padding-top: 0; border-top: 0; }
.fisa__date dd { margin: 0 0 1.25rem; color: var(--ink-80); }
.fisa__date dd:last-child { margin-bottom: 0; }

/* ══════════════════════════ GRUPAREA PE ANI (calendar) ═══════════ */

.an-grup__titlu { margin: 0 0 1.25rem; }
.an-grup + .an-grup, .an-grup--sep {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
.an-grup:first-child { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.cal { border-top: 1px solid var(--line); }
.cal__rand {
  display: grid;
  /* 5 coloane pentru 5 copii: siglă · nume+descriere · locație · perioadă · săgeată */
  grid-template-columns: 148px minmax(0, 1fr) minmax(0, 14rem) minmax(0, 11rem) auto;
  gap: 1.5rem clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background .16s;
}
.cal__rand:hover { background: var(--wash); }
/* Pe pagina târgului rândul nu duce nicăieri — fără hover, fără cursor. */
.cal__rand--simplu:hover { background: transparent; }
.cal__logo {
  width: 148px; height: 99px; border: 1px solid var(--line); background: var(--white);
  display: grid; place-items: center; padding: .75rem; flex-shrink: 0;
}
.cal__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cal__logo .ph { width: 100%; height: 100%; aspect-ratio: auto; border: 0; }
/* toate sunt <span> în interiorul unui grid item, deci trebuie
   blocificate explicit — altfel numele și descrierea curg pe același rând */
.cal__nume { display: block; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 700; letter-spacing: -.015em; margin-bottom: .3rem; }
.cal__desc { display: block; font-size: .9375rem; color: var(--ink-60); line-height: 1.5; }
/* Orașul e mai stins decât complexul, dar nu până la --grey: acela dă 3,2:1
   pe alb, sub pragul de citire. Diferența vine din coborârea rândului de sus. */
.cal__loc  { display: block; font-size: .9375rem; color: var(--ink-80); line-height: 1.5; }
.cal__oras { color: var(--ink-60); }
.cal__cand { display: block; font-size: 1rem; font-weight: 700; color: var(--ink); }
.cal__stare { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-top: .3rem; }
.cal__stare--activ  { color: var(--green-dark); }
.cal__stare--trecut { color: var(--grey); }
.cal__rand--trecut { opacity: .62; }
.cal__sageata { color: var(--blue); }
.cal__sageata svg { width: 22px; height: 22px; transition: transform .24s cubic-bezier(.22,.61,.36,1); }
.cal__rand:hover .cal__sageata svg { transform: translateX(5px); }

@media (max-width: 900px) {
  .cal__rand { grid-template-columns: 96px minmax(0, 1fr); gap: .75rem 1.25rem; }
  .cal__logo { width: 96px; height: 64px; }
  .cal__loc, .cal__cand { grid-column: 2; }
  .cal__sageata { display: none; }
}

/* filtre */
.filtre { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filtre__pill {
  font-size: .875rem; font-weight: 700; padding: .55rem 1.1rem; border-radius: 2px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink-60); cursor: pointer;
  transition: all .15s;
}
.filtre__pill:hover { border-color: var(--ink); color: var(--ink); }
.filtre__pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ══════════════════════════════════════════════════ ȘTIRI ═══════
   3–4 pe rând: imagine, titlu, intro scurt. Clic pe tot cardul. */

.stiri { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem); }
.stire { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.stire__media { margin-bottom: 1.1rem; overflow: hidden; background: var(--wash); }
/* Mai înalte decât 16/10, dar clar dreptunghiulare — pozele existente nu
   sunt pătrate și n-are rost să le tăiem ca să semene cu modelul. */
.stire__media img, .stire__media .ph { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.stire__media img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.stire:hover .stire__media img { transform: scale(1.04); }
.stire__data { font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--grey); margin-bottom: .5rem; }
.stire__titlu { font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; margin-bottom: .5rem; }
.stire:hover .stire__titlu { color: var(--blue); }
.stire__intro { font-size: .9375rem; color: var(--ink-60); line-height: 1.6; }

/* ════════════════════════════════════════════ GRILE GENERICE ════ */

.puncte { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(1.75rem, 3vw, 2.75rem); }
@media (min-width: 900px) { .puncte { grid-template-columns: repeat(var(--col, 3), minmax(0, 1fr)); } }
.puncte__i { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.sec--ink .puncte__i { border-top-color: var(--green); }
.puncte__t { font-size: 1.0625rem; font-weight: 700; margin-bottom: .5rem; letter-spacing: -.01em; }
/* pre-line: un „\n" din text devine rând nou (la Contact, emailul sub târguri) */
.puncte__d { font-size: .9375rem; color: var(--ink-60); line-height: 1.6; white-space: pre-line; }
.sec--ink .puncte__d { color: #A8AAB0; }
.puncte--num { counter-reset: p; }
.puncte--num .puncte__i { counter-increment: p; }
.puncte--num .puncte__t::before { content: counter(p, decimal-leading-zero); display: block; font-size: .8125rem; color: var(--blue); margin-bottom: .4rem; letter-spacing: .06em; }
.sec--ink .puncte--num .puncte__t::before { color: var(--green); }

.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.cifre__n { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.sec--ink .cifre__n { color: var(--green); }
.cifre__l { font-size: .9375rem; font-weight: 700; margin-top: .5rem; }
.cifre__c { font-size: .8125rem; color: var(--grey); margin-top: .2rem; line-height: 1.5; }
/* Coloana îngustă de lângă formularul de ofertă: la 1920 px „15.000+" nu
   încăpea în coloana de 218 px și „+" cădea pe rândul următor. Cifra rămâne
   pe un rând și se micșorează după lățimea coloanei (24cqi ≈ 7 caractere). */
.oferta-lateral .cifre > * { container-type: inline-size; }
.oferta-lateral .cifre__n { white-space: nowrap; font-size: min(clamp(2.25rem, 4.5vw, 3.5rem), 24cqi); }

/* banda de sigle */
.sigle { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.sigle__i { background: var(--white); display: grid; place-items: center; min-height: 108px; padding: 1.25rem 1rem; }
.sigle__i img { max-width: 100%; max-height: 58px; width: auto; height: auto; object-fit: contain; }
.sigle__i .ph { width: 100%; border: 0; background: none; }

/* etichete */
.tag { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .35rem .7rem; border: 1px solid var(--line); color: var(--ink-60); }
.taguri { display: flex; flex-wrap: wrap; gap: .5rem; }

/* citat */
.citat { border-left: 3px solid var(--green); padding-left: clamp(1.25rem, 3vw, 2rem); display: grid; grid-template-columns: auto 1fr; gap: 1.75rem; align-items: start; }
.citat__foto { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.citat__text { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--ink); margin-bottom: .9rem; }
.citat__by { font-size: .875rem; color: var(--ink-60); }
.citat__by b { color: var(--ink); }
@media (max-width: 620px) { .citat { grid-template-columns: 1fr; gap: 1rem; } }

/* ═══════════════════════════════════════════════ ACORDEON (FAQ) ══ */

.faq { border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 700;
  letter-spacing: -.01em; color: var(--ink);
}
.faq__q:hover { color: var(--blue); }
.faq__q svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--blue); transition: transform .26s cubic-bezier(.22,.61,.36,1); }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.22,.61,.36,1); }
.faq__a[data-deschis] { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 1.35rem; color: var(--ink-80); max-width: 70ch; }
.faq__a p:first-child { padding-top: .1rem; }
@media (prefers-reduced-motion: reduce) { .faq__a { transition: none; } }

/* ════════════════════════════════════════════════ FORMULARE ═════ */

.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.25rem; }
.camp { display: flex; flex-direction: column; gap: .4rem; }
.camp--full { grid-column: 1 / -1; }
.camp label { font-size: .875rem; font-weight: 700; }
.camp input, .camp select, .camp textarea {
  font: inherit; font-size: 1rem; padding: .85rem 1rem;
  border: 1px solid var(--line); border-radius: 2px; background: var(--white); color: var(--ink);
  transition: border-color .15s;
}
.camp input:focus, .camp select:focus, .camp textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-wash); }
.camp small { font-size: .8125rem; color: var(--grey); }
.camp--check { flex-direction: row; align-items: start; gap: .7rem; }
.camp--check input { margin-top: .25rem; flex-shrink: 0; }
.camp--check span { font-size: .9375rem; color: var(--ink-80); }
.camp__eroare { font-size: .8125rem; font-weight: 700; color: #B3261E; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.form__status { font-size: .9375rem; font-weight: 700; }
.form__status.ok { color: var(--green-dark); }
.form__status.rau { color: #B3261E; }
.grecaptcha-badge { visibility: hidden; }
.recaptcha-nota { margin-top: 1rem; font-size: .75rem; color: var(--ink-60); line-height: 1.5; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ══════════════════════════════════════════════════ FOOTER ══════ */

/* Footerul ia gradientul bauma: închis în stânga, mai deschis în dreapta.
   Plin, în albastrul de brand, ieșea prea deschis pentru o zonă atât de
   mare. Accentul de sus e verde — pe albastru, o dungă albastră nu s-ar
   mai vedea, iar verdele închide pagina cu a doua culoare a mărcii. */
.foot {
  background: var(--blue-dark);
  background-image: var(--blue-grad);
  color: rgba(255,255,255,.88);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: .9375rem;
  border-top: calc(var(--banda-h) / 2) solid var(--green);
}
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 2.5rem; }
.foot__logo { width: 132px; height: auto; margin-bottom: 1.25rem; }
.foot h3 { font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--white); margin-bottom: 1rem; }
.foot ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.foot a { color: rgba(255,255,255,.88); text-decoration: none; }
.foot a:hover { color: var(--white); text-decoration: underline; }
.foot__social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.foot__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.34); border-radius: 2px;
  color: var(--white);
  transition: all .15s;
}
.foot__social a:hover { background: var(--white); border-color: var(--white); color: var(--blue); }
.foot__jos {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.26);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-size: .8125rem;
}
.foot__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.foot__cookie { background: none; border: 0; padding: 0; font: inherit; color: rgba(255,255,255,.88); cursor: pointer; }
.foot__cookie:hover { color: var(--white); text-decoration: underline; }

/* Bannerul de cookie-uri (vanilla-cookieconsent) în culorile site-ului. */
#cc-main {
  --cc-font-family: var(--font);
  --cc-btn-primary-bg: var(--blue);
  --cc-btn-primary-border-color: var(--blue);
  --cc-btn-primary-hover-bg: var(--blue-600);
  --cc-btn-primary-hover-border-color: var(--blue-600);
  --cc-btn-secondary-bg: #fff;
  --cc-btn-secondary-color: var(--ink);
  --cc-btn-secondary-border-color: var(--ink);
  --cc-btn-secondary-hover-bg: var(--blue-wash);
  --cc-btn-secondary-hover-border-color: var(--blue);
  --cc-toggle-on-bg: var(--blue);
  --cc-link-color: var(--blue);
  --cc-btn-border-radius: 2px;
  --cc-modal-border-radius: 2px;
}
/* Compact, ca pe greenenergyexpo-romenvirotec.ro: doar „Accept" e albastru, restul
   sunt doar contur, iar textul e mic — bannerul nu mai acoperă jumătate de ecran.
   Cele trei butoane stau pe un rând (Setări · Refuz · Accept); .cm__btn-group
   devine display: contents ca să le putem ordona direct. */
#cc-main .cm { max-width: 34rem; }
#cc-main .cm__body { padding: .85rem 0 .1rem; }
#cc-main .cm__title, #cc-main .cm__desc { padding-left: 1.1rem; padding-right: 1.1rem; }
#cc-main .cm__title { font-size: .9375rem; line-height: 1.3; margin-bottom: .35rem; }
#cc-main .cm__desc { font-size: .8125rem; line-height: 1.5; }
#cc-main .cm__btns { flex-direction: row; gap: .5rem; padding: .65rem 1.1rem .85rem; }
#cc-main .cm__btn-group { display: contents; }
#cc-main .cm__btn { flex: 1 1 0; min-width: 0; min-height: 36px; padding: .45rem .5rem; font-size: .8125rem; }
#cc-main .cm__btn[data-role="show"] { order: 1; }
#cc-main .cm__btn[data-role="necessary"] { order: 2; }
#cc-main .cm__btn[data-role="all"] { order: 3; }
#cc-main .cm__footer { padding: .35rem 1.1rem; font-size: .75rem; }
/* Refuz, Setări, Doar necesare, Salvează: doar contur */
#cc-main .cm__btn[data-role="necessary"], #cc-main .cm__btn[data-role="show"],
#cc-main .pm__btn[data-role="necessary"], #cc-main .pm__btn[data-role="save"] {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
#cc-main .cm__btn[data-role="necessary"]:hover, #cc-main .cm__btn[data-role="show"]:hover,
#cc-main .pm__btn[data-role="necessary"]:hover, #cc-main .pm__btn[data-role="save"]:hover {
  background: var(--blue-wash); color: var(--blue-dark); border-color: var(--blue);
}
/* Biblioteca stivuiește butoanele pe ecrane mici, cu !important; le aducem înapoi pe un rând. */
@media screen and (max-width: 640px) {
  #cc-main .cm__btns { flex-direction: row !important; gap: .4rem; padding-top: .6rem !important; padding-bottom: .75rem !important; }
  #cc-main .cm__btn-group { display: contents !important; }
  #cc-main .cm__btn + .cm__btn, #cc-main .cm__btn-group + .cm__btn-group { margin: 0 !important; }
  #cc-main .cm__btn { flex: 1 1 0 !important; padding: .45rem .25rem; }
}
.form__status button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ═══════════════════════════════════════ ÎNAPOI SUS (buton) ═════ */

.sus {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 80;
  width: 48px; height: 48px; border: 0; border-radius: 2px; cursor: pointer;
  background: var(--ink); color: var(--white);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s, background .15s;
}
.sus[data-vizibil] { opacity: 1; visibility: visible; transform: none; }
.sus:hover { background: var(--blue); }
.sus svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .sus { transition: opacity .01s, visibility .01s; } }

/* ═════════════════════════════════════════ APARIȚIE LA DERULARE ══ */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; } }

/* ══════════════════════════════════════════════════ DIVERSE ═════ */

.media-box { background: var(--wash); }
.galerie {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(.75rem, 1.6vw, 1.5rem);
}
.galerie > * { background: var(--wash); }
/* height:auto — vezi nota de la .ban img: atributele din HTML ar anula aspect-ratio */
.galerie img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; }

/* ══════════════════════════════════════════════════ PARTENERI ════
   Ca pe greenenergyexpo-romenvirotec.ro/parteneri-2: casete mici 200×130
   cu chenar fin, șase pe rând, ultimul rând centrat, titlul grupului centrat
   cu o linie dedesubt. Siglele de acolo sunt deja desenate pe 200×130. */

.parteneri-grup + .parteneri-grup { margin-top: clamp(3rem, 6vw, 4.5rem); }
.parteneri-grup__titlu {
  text-align: center; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 600; color: var(--ink);
  padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin: 0;
}
.parteneri {
  --n: 2; --g: clamp(.75rem, 2.4vw, 2.5rem);
  list-style: none; padding: 0; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g);
}
@media (min-width: 560px) { .parteneri { --n: 3; } }
@media (min-width: 820px) { .parteneri { --n: 4; } }
@media (min-width: 1100px) { .parteneri { --n: 6; } }
.partener { flex: 0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); max-width: 200px; }
.partener__caseta {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 200 / 130; padding: .375rem;
  border: 1px solid var(--line); background: var(--white);
  transition: border-color .16s, box-shadow .16s;
}
a.partener__caseta:hover { border-color: var(--blue-200); box-shadow: 0 8px 22px rgba(0,67,110,.08); }
.partener__caseta img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Poza e buton, nu link: deschide o fereastră, nu duce în altă pagină. */
.galerie__item {
  display: block; padding: 0; border: 0; overflow: hidden;
  background: var(--wash); cursor: zoom-in;
}
.galerie__item img { transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.galerie__item:hover img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .galerie__item img, .galerie__item:hover img { transition: none; transform: none; }
}

/* ═══════════════════════════════════════════ LIGHTBOX GALERIE ════
   Construit din JS la prima deschidere — fără JS, pozele rămân o grilă
   obișnuită și nu se încarcă markup nefolosit. */

.lb {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  background: rgba(11, 12, 15, .93);
  padding: clamp(1rem, 4vw, 3rem);
}
.lb[data-deschis] { display: flex; }
.lb__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 1rem; }
.lb__img {
  max-width: min(1200px, 92vw); max-height: 78vh;
  width: auto; height: auto; object-fit: contain;
  margin-inline: auto; background: #16171B;
}
.lb__cap {
  color: rgba(255,255,255,.92); font-size: .9375rem; line-height: 1.5;
  text-align: center; max-width: 68ch; margin-inline: auto;
}
.lb__nr {
  display: block; margin-top: .35rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}

/* Comenzile: aceeași formă rotundă, ca să nu concureze cu fotografia. */
.lb__btn {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: var(--white); transition: background .16s, border-color .16s, transform .16s;
}
.lb__btn:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.5); }
.lb__btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.lb__btn svg { width: 26px; height: 26px; }
.lb__inchide { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb__prev { left: clamp(.5rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb__next { right: clamp(.5rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb__prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb__next:hover { transform: translateY(-50%) translateX(3px); }
.lb__prev[disabled], .lb__next[disabled] { opacity: .3; cursor: default; }
.lb__prev[disabled]:hover, .lb__next[disabled]:hover { background: rgba(255,255,255,.12); transform: translateY(-50%); }

@media (max-width: 620px) {
  .lb__btn { width: 44px; height: 44px; }
  .lb__btn svg { width: 22px; height: 22px; }
  .lb__img { max-height: 66vh; }
  .lb__prev { left: .5rem; } .lb__next { right: .5rem; }
}

.contact-bloc { line-height: 1.8; }

/* Echipele de proiect (Contact): card alb, funcția în albastru, târgurile ca etichete, emailul link. */
.echipa { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; }
@media (min-width: 900px) { .echipa { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.echipa__card { background: #fff; border-top: 3px solid var(--blue); padding: 1.5rem 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.echipa__nume { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.echipa__rol { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.echipa__targuri { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.echipa__targuri li { font-size: .8125rem; font-weight: 600; color: var(--ink); background: var(--blue-wash); padding: .3rem .65rem; border-radius: 999px; line-height: 1.3; }
.echipa__mail { margin-top: auto; padding-top: .25rem; font-size: .875rem; }
.echipa__mail a { display: inline-flex; align-items: flex-start; gap: .5rem; color: var(--blue); font-weight: 600; text-decoration: none; }
.echipa__mail a svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .15em; }
.echipa__mail a span { overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.echipa__mail a:hover { color: var(--blue-600); }
.echipa__mail a:hover span { text-decoration-thickness: 2px; }
.contact-bloc a { overflow-wrap: anywhere; }

.mocknote {
  background: var(--green-pale); border-bottom: 1px solid var(--green);
  color: var(--green-dark); font-size: .8125rem; font-weight: 600;
  text-align: center; padding: .6rem 1rem;
}
.mocknote b { background: var(--green); color: var(--ink); padding: .15rem .5rem; border-radius: 2px; margin-right: .5rem; }


/* ═══════════════════════ PROTECȚIE LA DEPĂȘIRE PE ORIZONTALĂ ════
   Itemii de grid au implicit `min-width: auto`, deci nu se strâng sub
   lățimea minimă a conținutului. Un <select> cu opțiuni lungi sau un
   cuvânt lung împing atunci toată coloana în afara ecranului. */

.split > *, .cal__rand > *, .form__grid > *, .puncte > *, .stiri > *, .cifre > * { min-width: 0; }
/* fara checkbox/radio — acolo 100%% ar impinge eticheta in afara ecranului */
.camp input:not([type="checkbox"]):not([type="radio"]),
.camp select, .camp textarea { width: 100%; min-width: 0; max-width: 100%; }
.camp--check > span { min-width: 0; }
.camp select { text-overflow: ellipsis; }
.puncte__d, .cal__desc, .stire__intro, .lede, .prose p { overflow-wrap: break-word; }

/* Cifrele mari pot primi și un cuvânt lung („SUTE", „11.000+") — pe coloane
   înguste trebuie să se poată rupe, altfel ies din ecran. */
.cifre__n { overflow-wrap: break-word; hyphens: auto; }

/* Punct de focalizare per imagine, dacă o poză anume are subiectul altundeva.
   Se setează din JSON: la târguri `imagine_hero_focus`, la pagini
   media.json → hero_focus.{pagina} = "50% 40%". Ajunge ca --hero-focus pe .hero. */

/* ══════════════════════════════════ VIDEO YOUTUBE (facadă) ══════
   Miniatura stă la noi; iframe-ul apare abia la clic. */

.vid { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.vid img, .vid iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.vid__play {
  position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer;
  background: linear-gradient(to top, rgba(10,11,13,.72) 0%, rgba(10,11,13,.15) 55%, rgba(10,11,13,.05) 100%);
  display: flex; align-items: flex-end; gap: .9rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--white); text-align: left;
  transition: background .2s;
}
.vid__play:hover { background: linear-gradient(to top, rgba(10,11,13,.82) 0%, rgba(10,11,13,.3) 55%, rgba(10,11,13,.1) 100%); }
.vid__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  transition: transform .2s, background .2s, color .2s;
}
.vid__icon svg { margin-left: 3px; }
.vid__play:hover .vid__icon { transform: scale(1.07); background: var(--blue); color: var(--white); }
.vid__et { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.vid__et small { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .8; margin-top: .25rem; }
@media (prefers-reduced-motion: reduce) { .vid__icon, .vid__play { transition: none; } }
@media (max-width: 480px) { .vid__et { font-size: .875rem; } .vid__icon { width: 46px; height: 46px; } }

/* ════════════════════════════════════ PAVILIOANE (Expozanți) ════
   Două casete egale: aceeași lățime, aceeași înălțime, ambele 16:9.
   Legendele se aliniază pe același rând de bază, indiferent cât ocupă. */

.pav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
.pav__i { margin: 0; display: flex; flex-direction: column; }
.pav__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.pav__media > * { width: 100%; height: 100%; }
.pav__media img, .pav__media video { object-fit: cover; }
.pav__media .vid { aspect-ratio: auto; height: 100%; }
.pav__media .ph { aspect-ratio: auto; height: 100%; }
.pav__cap { font-size: .875rem; line-height: 1.55; color: var(--ink-60); margin-top: .85rem; }

@media (max-width: 720px) { .pav { grid-template-columns: 1fr; } }

/* ═════════════════════════════════════════ HARTA COMPLEXULUI ════ */

.harta { margin: 0; }
/* `>` e esențial: fără el regula prindea și linkul din legendă, care
   primea chenar și devenea bloc — textul și săgeata ajungeau pe rânduri
   diferite. Chenarul e doar pentru imagine. */
.harta > a { display: block; background: var(--white); border: 1px solid var(--line); }
.harta img { width: 100%; height: auto; display: block; }
.harta > a:hover { border-color: var(--blue); }
.harta__cap .link-sageata { white-space: nowrap; }
.harta__cap { margin-top: .85rem; }
/* Pe Vizitatori harta e doar o previzualizare — se deschide mare la clic. */
.harta-wrap { max-width: 380px; }

/* ═══════════════════════ CARD MARE DE EVENIMENT (Calendar) ══════
   Vizual pătrat 800×800 la stânga, informația la dreapta. Structura
   de la romexpo.ro/calendar, în tipografia și culorile noastre. */

.evenimente { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

.ev {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
.evenimente > .ev:last-child { border-bottom: 0; padding-bottom: 0; }

.ev__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--wash); border: 1px solid var(--line); }
.ev__media img { width: 100%; height: 100%; object-fit: cover; }
.ev__media .ph { width: 100%; height: 100%; aspect-ratio: auto; border: 0; }

.ev__cand {
  font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); margin-bottom: .6rem;
}
.ev__nume { font-size: clamp(1.5rem, 2.6vw, 2.125rem); margin-bottom: .7rem; }
.ev__desc { color: var(--ink-80); max-width: 62ch; margin-bottom: 1.1rem; }

/* lista de detalii practice — marcaj cu săgeată, ca la modelul romexpo */
/* strâns, ca informația să încapă în înălțimea vizualului de 800×800 */
.ev__lista { list-style: none; padding: 0; display: grid; gap: .4rem; margin-bottom: 1.25rem; }
.ev__lista li {
  position: relative; padding-left: 1.5rem;
  font-size: .9375rem; line-height: 1.45; color: var(--ink-80);
}
.ev__lista li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 14px; height: 14px; background: var(--blue);
  -webkit-mask: var(--chevron) center/10px no-repeat; mask: var(--chevron) center/10px no-repeat;
}
.ev__cta { margin: 0; }

.ev--trecut .ev__media { opacity: .55; }
.ev--trecut .ev__cand { color: var(--grey); }

@media (max-width: 760px) {
  .ev { grid-template-columns: 1fr; }
  .ev__media { max-width: 420px; }
}

/* ══════════════════ LISTĂ COMPACTĂ PE 2 COLOANE (Home) ══════════ */

.ecal-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 860px) { .ecal-grid { grid-template-columns: 1fr; } }

.ecal {
  /* sigla crește odată cu numele — la 34px titlu, 96px arăta subdimensionată */
  display: grid; grid-template-columns: clamp(96px, 9vw, 128px) minmax(0, 1fr);
  gap: 1.25rem; align-items: start;
  padding: 1.5rem 0; border-top: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
/* prima intrare din fiecare coloană nu are linie deasupra */
.ecal-grid > .ecal:nth-child(-n + 2) { border-top: 0; padding-top: 0; }
@media (max-width: 860px) {
  .ecal-grid > .ecal:nth-child(2) { border-top: 1px solid var(--line); padding-top: 1.5rem; }
  .ecal-grid > .ecal:first-child { border-top: 0; padding-top: 0; }
}

.ecal__logo {
  width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--white);
  display: grid; place-items: center; padding: .5rem;
}
.ecal__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ecal__logo .ph { width: 100%; height: 100%; aspect-ratio: auto; border: 0; }

.ecal__corp { display: block; }
.ecal__loc  { display: block; font-size: .75rem; color: var(--grey); margin-bottom: .35rem; }
/* aceeași mărime ca numele de pe pagina Calendar (.ev__nume) — coloana
   e mai îngustă aici, deci numele lungi trec pe două rânduri */
.ecal__nume {
  display: block; font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
}
.ecal:hover .ecal__nume { color: var(--blue); }
.ecal__desc { display: block; font-size: .9375rem; color: var(--ink-60); line-height: 1.5; margin-top: .3rem; }
.ecal__cand { display: block; font-size: .9375rem; font-weight: 700; margin-top: .7rem; }
.ecal--trecut { opacity: .6; }

/* ══════════════════════════ BANNERE DE CAMPANIE (400×218) ═══════ */

.bannere {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.ban { display: block; border: 1px solid var(--line); background: var(--wash); overflow: hidden; }
/* `height:auto` e obligatoriu: atributele width/height din HTML (puse ca să nu
   sară layoutul la încărcare) devin înălțime explicită și anulează
   aspect-ratio — bannerul s-ar afișa la înălțimea lui nativă, deformat. */
.ban img {
  width: 100%; height: auto; aspect-ratio: 400 / 218; object-fit: cover;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.ban:hover { border-color: var(--blue); }
.ban:hover img { transform: scale(1.03); }
.ban .ph { aspect-ratio: 400 / 218; border: 0; }
@media (prefers-reduced-motion: reduce) { .ban img { transition: none; } }

/* ═════════════════════════════════ ICONIȚA ACASĂ DIN MENIU ══════ */

.nav__acasa { display: inline-flex; align-items: center; }
.nav__acasa svg { width: 18px; height: 18px; }
/* moștenește culoarea și linia de sub, ca restul intrărilor din meniu */

/* ══════════════════════════════ BADGE DE EDIȚIE (discret) ═══════ */

.badge-ed {
  display: inline-block; vertical-align: middle;
  margin-left: .6rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--ink-60); background: var(--wash);
  border: 1px solid var(--line); border-radius: 2px;
  padding: .2rem .5rem;
  /* nu urmează tracking-ul negativ al titlului */
  letter-spacing: .05em;
}
.ev__nume .badge-ed, .ecal__nume .badge-ed { position: relative; top: -.15em; }
.sec--ink .badge-ed { color: #A8AAB0; background: transparent; border-color: #34363C; }
/* Gri-ul badge-ului dispare pe albastrul pal — devine alb ca să rămână badge. */
.sec--pal .badge-ed { background: var(--white); }

/* ══════════════════════ CARUSEL DE BANNERE (rulare continuă) ════
   Pista conține setul de două ori; animația o mută cu exact 50%, deci
   bucla se închide fără salt. Se oprește sub mouse și la focus. */

.carusel { overflow: hidden; position: relative; }
.carusel::before, .carusel::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(24px, 5vw, 72px);
  z-index: 2; pointer-events: none;
}
.carusel::before { left: 0;  background: linear-gradient(to right, var(--wash), transparent); }
.carusel::after  { right: 0; background: linear-gradient(to left,  var(--wash), transparent); }

.carusel__pista {
  display: flex; width: max-content;
  animation: carusel-ruleaza calc(var(--n, 6) * 6s) linear infinite;
}
.carusel:hover .carusel__pista,
.carusel:focus-within .carusel__pista { animation-play-state: paused; }

.carusel__set { display: flex; gap: clamp(1rem, 2vw, 1.5rem); padding-right: clamp(1rem, 2vw, 1.5rem); }
.carusel__set .ban { flex: 0 0 clamp(240px, 26vw, 320px); }

@keyframes carusel-ruleaza { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  /* fără animație — rămâne o bandă derulabilă cu degetul/trackpad-ul */
  .carusel { overflow-x: auto; scrollbar-width: thin; }
  .carusel__pista { animation: none; }
  .carusel__set:last-child { display: none; }
}

/* ═══════════════════ TESTIMONIALE PE PAGINA EXPOZANȚI ═══════════
   Grilă proprie: trei coloane egale, citate aliniate sus, foto și nume
   lipite de baza cardului ca să stea pe același rând. */

.citate {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}


/* varianta „card" a citatului — citat sus, atribuirea lipită de bază */
.citate .citat--card {
  display: flex; flex-direction: column; gap: 1.25rem; height: 100%;
  padding: 1.75rem; padding-left: calc(1.75rem - 3px);
  background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--green);
}
.citate .citat--card .citat__text { flex: 1; font-size: 1rem; line-height: 1.6; margin: 0; }
.citate .citat--card .citat__by {
  display: flex; align-items: center; gap: .9rem;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.citate .citat--card .citat__foto { width: 56px; height: 56px; flex-shrink: 0; }
.citate .citat--card .citat__by > span { display: grid; gap: .1rem; min-width: 0; }
.citate .citat--card .citat__by b { font-size: .9375rem; color: var(--blue); }
.citate .citat--card .citat__by small { font-size: .8125rem; color: var(--ink-60); }
.citate .citat--card .citat__by em {
  font-style: normal; font-size: .6875rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--grey);
}

/* ═══════════════════════════ PORTRETUL DIN PAGINA DESPRE NOI ════
   Plafonat ca lățime: la lățimea plină a coloanei ieșea 478×638 și
   lăsa 336 px de gol sub textul de alături. La 4:5 și 300 px, înălțimea
   ajunge aproape de a textului. */

.portret {
  width: 100%; height: auto; max-width: 300px;
  aspect-ratio: 4 / 5; object-fit: cover;
  display: block; border: 1px solid var(--line);
}
.portret.ph { border: 1px solid var(--line); }
.portret__nume { font-size: 1.125rem; margin-top: .9rem; }
.portret__rol { font-size: .8125rem; color: var(--grey); line-height: 1.5; max-width: 300px; }

/* ═══════════════════════════════ harta Google (facadă click-to-load) ═ */
.hgm { margin: 0; }
/* butonul acoperă doar harta, nu și legenda de dedesubt (altfel linkul
   „Deschide în Google Maps” rămânea sub buton și nu se putea apăsa) */
.hgm__media { position: relative; }
.hgm__media > img,
.hgm__media > iframe,
.hgm__fundal { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 0; display: block; background: var(--wash); }
.hgm__fundal {
  background:
    linear-gradient(90deg, rgba(0, 67, 110, .06) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(rgba(0, 67, 110, .06) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--blue-wash);
}
.hgm__play {
  position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer;
  background: linear-gradient(to top, rgba(10,11,13,.72) 0%, rgba(10,11,13,.15) 55%, rgba(10,11,13,.05) 100%);
  display: flex; align-items: flex-end; gap: .9rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--white); text-align: left;
  transition: background .2s;
}
.hgm__play:hover { background: linear-gradient(to top, rgba(10,11,13,.82) 0%, rgba(10,11,13,.3) 55%, rgba(10,11,13,.1) 100%); }
.hgm__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  transition: transform .2s, background .2s, color .2s;
}
.hgm__play:hover .hgm__icon { transform: scale(1.07); background: var(--blue); color: var(--white); }
.hgm__et { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.hgm__et small { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .8; margin-top: .25rem; }
/* legenda sta sub hartă și rămâne acolo și după ce iframe-ul înlocuiește fațada */
.hgm__cap { margin-top: .75rem; }
.hgm__media:has(iframe) .hgm__play { display: none; }

/* ═══════════════════════════ pagina Contact: două panouri gri ═══════
   Stânga: harta, dreapta: formularul. Câmpurile au eticheta ca placeholder
   (eticheta reală rămâne în DOM, ascunsă vizual, pentru cititoare de ecran). */
.contact-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.3rem); align-items: stretch; }
@media (max-width: 900px) { .contact-duo { grid-template-columns: 1fr; } }
.contact-card { background: var(--wash); padding: clamp(1.4rem, 2.6vw, 2.4rem); display: flex; flex-direction: column; }
.contact-card__titlu { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 800; line-height: 1.15; margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.contact-card .hgm { flex: 1; display: flex; flex-direction: column; }
.contact-card .hgm__media { flex: 1; min-height: 360px; border-radius: 10px; overflow: hidden; }
.contact-card .hgm__media > img,
.contact-card .hgm__media > iframe,
.contact-card .hgm__fundal { aspect-ratio: auto; position: absolute; inset: 0; }
.contact-card__date { font-size: 1rem; margin-top: 1.25rem; }

.form-pill .camp label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form-pill .camp--check label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: inline; font-weight: 400; font-size: inherit; }
.form-pill .camp input:not([type="checkbox"]),
.form-pill .camp textarea {
  background: var(--white); border: 1px solid var(--blue); border-radius: 10px;
  padding: .9rem 1.1rem; font-size: 1rem; color: var(--ink);
}
.form-pill .camp textarea { min-height: 13rem; resize: vertical; }
.form-pill ::placeholder { color: var(--ink-60); opacity: 1; }
.form-pill .camp input[type="checkbox"] { accent-color: var(--blue); width: 1.05rem; height: 1.05rem; }
.form-pill .camp--check span { font-size: 1rem; line-height: 1.6; }
.form-pill .camp--check a { color: var(--blue); text-decoration: underline; }
.form-pill .camp--check a:hover { color: var(--blue-dark); }
.form__nota { margin-top: 1.1rem; font-style: italic; color: var(--ink-60); font-size: 1rem; }
.form-pill .form__actions { margin-top: 1.25rem; }
.form-pill .form__trimite { border-radius: 10px; padding: 1rem 1.6rem; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .02em; }

/* ══════════════════════════════════ bara de distribuire articol ═══ */
.share {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1rem clamp(1rem, 2.5vw, 1.5rem);
  background: var(--wash); border-top: 2px solid var(--blue);
}
.share__et { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-80); }
.share__lista { display: flex; align-items: center; gap: .25rem; }
.share__b {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ink-80); border-radius: 50%;
  transition: background .18s, color .18s;
}
.share__b:hover, .share__b:focus-visible { background: var(--blue); color: var(--white); }
/* confirmarea copierii, fără să mute nimic din layout */
.share { position: relative; }
.share::after {
  content: 'Link copiat'; position: absolute; right: clamp(1rem, 2.5vw, 1.5rem); bottom: calc(100% + .4rem);
  background: var(--ink); color: var(--white); font-size: .75rem; font-weight: 700;
  padding: .3rem .6rem; border-radius: 3px;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.share--copiat::after { opacity: 1; }

@media (max-width: 520px) {
  .share { flex-direction: column; align-items: flex-start; gap: .5rem; }
}