/* ============================================================================
   PROFILUL 2 — situl ca măsură de informare, publicitate și diseminare.

   Cine citește, în ordinea care contează:
     1. evaluatorul AM/OIR, care verifică dacă obligațiile de vizibilitate sunt
        îndeplinite și dacă rezultatele sunt publicate;
     2. alte primării și consultanți, care caută un model de urmat;
     3. presa locală și de specialitate;
     4. cetățeanul și familia lui.

   Publicul 1 și 2 decid forma paginii. De aceea pagina începe cu teritoriul,
   stadiul și rezultatele, nu cu un apel de recrutare. Partea pentru beneficiar
   rămâne întreagă, dar mai jos, unde îi e locul într-un document de proiect.

   Registrul vizual: DOCUMENT PUBLIC ADNOTAT. O coloană de text cu o margine de
   note în stânga, care poartă metadatele oficiale (SMIS, contract, temei legal)
   fără să întrerupă lectura. E limbajul dosarului administrativ, folosit viu.

   Ce s-a evitat, deliberat, fiindcă apare pe orice pagină generată automat:
   etichete ALL-CAPS deasupra titlurilor, metadate lipite cu puncte mijlocii,
   carduri identice cu aceeași rază și aceeași umbră, apariții cu glisare pe
   fiecare secțiune, săgeți lipite la textul linkurilor.
   ========================================================================== */

/* ------------------------------------------------------------------ fonturi */
/* Găzduite local, nu de la Google Fonts: e sit de instituție publică, iar o
   cerere către un server străin la fiecare încărcare e și o problemă de date cu
   caracter personal, și o dependență care poate dispărea în 40 de luni.
   Subsetate la latina extinsă plus ș/ț cu virgulă (U+0218-021B), fiindcă multe
   fonturi le redau cu sedilă, ceea ce e greșit în română. */
@font-face {
  font-family: "Newsreader";
  src: url("newsreader.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Plex";
  src: url("plexsans.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-display: swap;
  font-style: normal;
}

:root {
  /* Newsreader are axa optică: la corp mic compensează, la titlu mare se
     subțiază și câștigă eleganță. Fără ea, un serif la 56px arată greoi. */
  --p2-titlu: "Newsreader", Georgia, "Times New Roman", serif;
  --p2-text: "Plex", "Segoe UI", system-ui, sans-serif;

  --p2-margine: 15rem;          /* lățimea coloanei de note */
  --p2-coloana: 42rem;          /* sub 80 de caractere pe rând */
  --p2-aer: clamp(3.5rem, 7vw, 6.5rem);
  --p2-rand: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent);
  --p2-rand-tare: 1px solid color-mix(in srgb, var(--c-text) 38%, transparent);
  --p2-scara: 1;
}

html { font-size: calc(100% * var(--p2-scara)); }

body.profil2 {
  font-family: var(--p2-text);
  font-variant-numeric: tabular-nums;
}
body.profil2 h1, body.profil2 h2, body.profil2 h3 {
  font-family: var(--p2-titlu);
  font-weight: 450;
  font-variation-settings: "opsz" 40;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

:root[data-contrast="ridicat"] {
  --c-text: #000; --c-titlu: #000; --c-text-slab: #171717;
  --c-fundal: #fff; --c-suprafata: #fff; --c-fundal-slab: #f0f0f0;
  --c-linie: #000;
  --p2-rand: 2px solid #000;
  --p2-rand-tare: 2px solid #000;
}

/* -------------------------------------------------------------- bara de acces */
/* Rămâne din prima versiune: e cerută de EN 301 549 în spirit, și un evaluator
   care o vede știe imediat că accesibilitatea a fost tratată, nu bifată. */
.p2-acces { border-bottom: var(--p2-rand); background: var(--c-fundal-slab); font-size: .875rem; }
.p2-acces__in {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  padding: .45rem 0; justify-content: flex-end;
}
.p2-acces__et { margin-right: auto; color: var(--c-text-slab); }
.p2-acces button {
  min-height: 40px; min-width: 42px; padding: .25rem .7rem;
  border: 1px solid var(--c-text-slab); border-radius: 2px;
  background: transparent; color: var(--c-text); font: inherit; font-weight: 500;
  cursor: pointer;
}
.p2-acces button:hover,
.p2-acces button[aria-pressed="true"] { background: var(--c-text); color: var(--c-fundal); }
.p2-acces button:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
@media (max-width: 640px) {
  .p2-acces__in { justify-content: flex-start; }
  .p2-acces__et span { display: none; }
  .p2-acces__et::after { content: "Afișare:"; }
}

/* ------------------------------------------------------------------ structura */
.p2-lat { max-width: 78rem; margin: 0 auto; padding: 0 1.5rem; }

/* Grila cu margine de note. Sub 1000px marginea trece deasupra conținutului, ca
   o supra-notă, în loc să se comprime într-o coloană ilizibilă de 6rem. */
.p2-grila {
  display: grid;
  grid-template-columns: var(--p2-margine) minmax(0, var(--p2-coloana));
  gap: 0 3.5rem;
  align-items: start;
}
@media (max-width: 1000px) { .p2-grila { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } }

.p2-nota {
  font-size: .82rem; line-height: 1.55; color: var(--c-text-slab);
  border-top: var(--p2-rand-tare); padding-top: .55rem;
}
.p2-nota dl { margin: 0; display: grid; gap: .45rem; }
.p2-nota dt { font-weight: 600; color: var(--c-text); }
.p2-nota dd { margin: 0 0 .35rem; }
@media (max-width: 1000px) {
  .p2-nota dl { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem 1.5rem; }
}

/* --------------------------------------------------------------- navigatia */
/* baza.css o dimensioneaza pentru varianta 1, unde tipografia e mai mare peste tot.
   Aici, cu Plex si cu un titlu serif care duce greutatea paginii, meniul la aceeasi
   marime tipa mai tare decat titlul si ocupa un sfert din primul ecran. Intr-un
   document, cuprinsul nu se scrie mai mare decat capitolul. */
body.profil2 .navigatie { font-size: .95rem; }
body.profil2 .navigatie__marca { font-family: var(--p2-titlu); font-weight: 500; font-size: 1.05rem; }
body.profil2 .navigatie__lista a { padding: .7rem .85rem; border-radius: 2px; }
body.profil2 .navigatie__lista { gap: 0; }
body.profil2 .fisa-proiect { font-size: .82rem; }

/* ---------------------------------------------------------------------- erou */
/* Fără eyebrow cu majuscule și fără metadate lipite cu puncte mijlocii. Ce e
   caracteristic proiectului nu e sigla, ci TERITORIUL: satele acoperite, scrise
   la scară, fiindcă ele spun dintr-o privire amploarea și sunt diferite la
   fiecare primărie. Numele localităților sunt conținut, nu decor. */
.p2-erou { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); border-bottom: var(--p2-rand); }
.p2-erou h1 {
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.06; margin: 0 0 1.5rem;
  font-variation-settings: "opsz" 60; font-weight: 400;
  color: var(--c-titlu);
}
.p2-erou__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.6;
  color: var(--c-text); margin: 0 0 2.2rem; max-width: 38rem;
}

.p2-teritoriu { margin: 0 0 1.6rem; }
.p2-teritoriu__cap {
  font-size: .82rem; color: var(--c-text-slab); margin: 0 0 .5rem;
  padding-bottom: .4rem; border-bottom: var(--p2-rand);
}
.p2-teritoriu__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .1rem 1.1rem;
  font-family: var(--p2-titlu); font-variation-settings: "opsz" 32;
  font-size: clamp(1.15rem, 2.1vw, 1.7rem); line-height: 1.35;
  color: var(--c-titlu);
}
/* Separatorul e o virgulă tipografică, nu un punct mijlociu: e o enumerare
   de nume de localități, nu o listă de etichete de interfață. */
.p2-teritoriu__lista li:not(:last-child)::after { content: ","; color: var(--c-text-slab); }

.p2-actiuni { display: flex; flex-wrap: wrap; gap: .7rem; }
.p2-buton {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: .7rem 1.4rem; border-radius: 2px; font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 1px solid var(--c-accent); cursor: pointer;
  font-family: var(--p2-text);
}
.p2-buton--plin { background: var(--c-accent); color: var(--c-accent-text); }
.p2-buton--gol { color: var(--c-titlu); border-color: var(--c-text-slab); }
.p2-buton--gol:hover { border-color: var(--c-accent); }
.p2-buton:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

/* ------------------------------------------------------------------- stadiul */
.p2-stadiu { display: grid; gap: .45rem; margin: 0 0 1.8rem; }
.p2-stadiu__cifra {
  font-family: var(--p2-titlu); font-variation-settings: "opsz" 48;
  font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; font-weight: 300;
  color: var(--c-titlu);
}
.p2-stadiu__cifra b { font-weight: 500; }
.p2-stadiu__et { font-size: .9rem; color: var(--c-text-slab); }
.p2-bara { height: 6px; background: color-mix(in srgb, var(--c-text) 12%, transparent); overflow: hidden; }
/* SINGURA mișcare de pe pagină, și una singură pe încărcare: bara de stadiu se
   umple când intră în vedere. Un proiect e, înainte de orice, timp care trece;
   asta merită arătat o dată, nu presărat pe fiecare secțiune. */
.p2-bara__umplut { height: 100%; background: var(--c-accent); width: 0; }
@media (prefers-reduced-motion: no-preference) {
  .p2-bara__umplut { transition: width 1.1s cubic-bezier(.22,.61,.36,1); }
}

/* ---------------------------------------------------------------- secțiuni */
.p2-sectiune { padding: var(--p2-aer) 0; border-bottom: var(--p2-rand); }
.p2-sectiune:last-of-type { border-bottom: 0; }
.p2-sectiune h2 {
  font-size: clamp(1.5rem, 2.9vw, 2.15rem); margin: 0 0 .6rem;
  font-variation-settings: "opsz" 40; color: var(--c-titlu);
}
.p2-sectiune > .p2-lat > .p2-grila > .p2-corp > p:first-of-type { margin-top: 0; }
.p2-corp > p { max-width: var(--p2-coloana); line-height: 1.7; }
.p2-intro { color: var(--c-text-slab); font-size: 1.05rem; margin: 0 0 2rem; }

/* ------------------------------------------------------------- indicatori */
/* Un tabel, nu carduri. Indicatorii sunt date comparabile: țintă față de
   realizat. Un tabel se citește pe coloane, se tipărește și intră în dosar;
   patru cutii rotunjite nu fac niciunul din lucrurile astea. */
.p2-indicatori { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.p2-indicatori th, .p2-indicatori td { text-align: left; padding: .85rem .6rem; border-bottom: var(--p2-rand); }
.p2-indicatori thead th { border-bottom: var(--p2-rand-tare); font-size: .82rem; color: var(--c-text-slab); font-weight: 600; }
.p2-indicatori td.cifra, .p2-indicatori th.cifra { text-align: right; white-space: nowrap; width: 7rem; }
.p2-indicatori tbody th { font-weight: 400; color: var(--c-text); }
.p2-necunoscut { color: var(--c-text-slab); font-style: italic; }
@media (max-width: 620px) {
  .p2-indicatori thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .p2-indicatori tbody th, .p2-indicatori td { display: block; padding: .3rem .1rem; border: 0; }
  .p2-indicatori tbody th { padding-top: .9rem; font-weight: 600; }
  .p2-indicatori tr { display: block; border-bottom: var(--p2-rand); padding-bottom: .7rem; }
  .p2-indicatori td.cifra { text-align: left; width: auto; }
  .p2-indicatori td.cifra::before { content: attr(data-et) ": "; color: var(--c-text-slab); }
}

/* --------------------------------------------------------------- servicii */
/* Listă descriptivă cu linii de separare, nu grilă de cutii identice. Cele trei
   servicii nu sunt o secvență și nu sunt egale ca greutate, deci nu primesc
   numere și nici aceeași ramă. */
.p2-servicii { margin: 0; }
.p2-serviciu { padding: 1.6rem 0; border-top: var(--p2-rand); }
.p2-serviciu:first-child { border-top: var(--p2-rand-tare); }
.p2-serviciu h3 { margin: 0 0 .5rem; font-size: 1.3rem; font-variation-settings: "opsz" 28; }
.p2-serviciu p { margin: 0 0 .7rem; max-width: var(--p2-coloana); line-height: 1.65; }
.p2-serviciu ul { margin: 0; padding-left: 1.1rem; color: var(--c-text-slab); }
.p2-serviciu li { margin: .25rem 0; }

/* --------------------------------------------------------------- cronologie */
.p2-jurnal { list-style: none; margin: 0; padding: 0; }
.p2-jalon {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 1.3rem;
  padding: .85rem 0; border-top: var(--p2-rand); align-items: baseline;
}
.p2-jalon:first-child { border-top: var(--p2-rand-tare); }
.p2-jalon__data { font-size: .86rem; color: var(--c-text-slab); font-variant-numeric: tabular-nums; }
.p2-jalon--viitor .p2-jalon__text { color: var(--c-text-slab); }
.p2-jalon--viitor .p2-jalon__data::after { content: " (planificat)"; }
@media (max-width: 620px) { .p2-jalon { grid-template-columns: 1fr; gap: .15rem; } }

/* ----------------------------------------------------------------- resurse */
.p2-resurse { list-style: none; margin: 0; padding: 0; }
.p2-resursa { border-top: var(--p2-rand); padding: 1rem 0; }
.p2-resursa:first-child { border-top: var(--p2-rand-tare); }
.p2-resursa a { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.p2-resursa p { margin: .3rem 0 0; color: var(--c-text-slab); font-size: .95rem; }

/* ------------------------------------------------------- pentru beneficiari */
/* Blocul pentru cetățean rămâne întreg, dar e marcat ca o inserție în document,
   nu ca pagina însăși: fundal plin și o ramă groasă în stânga. */
.p2-beneficiar {
  background: var(--c-fundal-slab);
  border-left: 4px solid var(--c-accent);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.p2-beneficiar h2 { margin-top: 0; }
.p2-pasi { list-style: none; counter-reset: pas; margin: 1.4rem 0 0; padding: 0; }
.p2-pas { counter-increment: pas; display: grid; grid-template-columns: 2rem 1fr; gap: 0 1rem; padding: .8rem 0; border-top: var(--p2-rand); }
.p2-pas:first-child { border-top: 0; padding-top: 0; }
.p2-pas::before {
  content: counter(pas) "."; font-family: var(--p2-titlu); font-size: 1.15rem;
  color: var(--c-accent); font-weight: 600;
}
.p2-pas h3 { margin: 0 0 .2rem; font-size: 1.08rem; font-family: var(--p2-text); font-weight: 600; }
.p2-pas p { margin: 0; color: var(--c-text-slab); }

.p2-telefon {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: var(--p2-rand-tare);
}
.p2-telefon a {
  font-family: var(--p2-titlu); font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 500; text-decoration: none; color: var(--c-titlu);
  border-bottom: 2px solid var(--c-accent); white-space: nowrap;
}

/* --------------------------------------------------------------------- faq */
.p2-faq { margin: 0; }
.p2-faq details { border-top: var(--p2-rand); }
.p2-faq details:first-of-type { border-top: var(--p2-rand-tare); }
.p2-faq summary {
  cursor: pointer; padding: .95rem 0; font-weight: 600; min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  list-style: none;
}
.p2-faq summary::-webkit-details-marker { display: none; }
.p2-faq summary::after { content: "+"; font-family: var(--p2-titlu); font-size: 1.5rem; color: var(--c-accent); }
.p2-faq details[open] summary::after { content: "\2212"; }
.p2-faq summary:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -2px; }
.p2-faq__corp { padding: 0 0 1.1rem; color: var(--c-text-slab); max-width: var(--p2-coloana); }
.p2-faq__corp p { margin: 0; line-height: 1.7; }

/* ----------------------------------------------------------------- verificare */
.p2-verificare { margin: 1.5rem 0 0; }
.p2-verificare fieldset { border: 0; margin: 0 0 1.2rem; padding: 0; }
.p2-verificare legend { font-weight: 600; margin-bottom: .55rem; padding: 0; }
.p2-optiuni { display: flex; flex-wrap: wrap; gap: .5rem; }
.p2-optiuni input { position: absolute; opacity: 0; width: 0; height: 0; }
.p2-optiuni label {
  display: inline-flex; align-items: center; min-height: 48px; padding: .5rem 1.2rem;
  border: 1px solid var(--c-text-slab); border-radius: 2px; cursor: pointer;
  font-weight: 500; background: var(--c-fundal);
}
.p2-optiuni input:checked + label { background: var(--c-accent); color: var(--c-accent-text); border-color: var(--c-accent); }
.p2-optiuni input:focus-visible + label { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.p2-raspuns { border-left: 3px solid var(--c-accent); padding: .9rem 1.1rem; background: var(--c-fundal); }
.p2-raspuns h3 { margin: 0 0 .35rem; font-size: 1.05rem; font-family: var(--p2-text); font-weight: 600; }
.p2-raspuns p { margin: 0; }

/* -------------------------------------------------------------- bara lipită */
.p2-lipita { display: none; }
@media (max-width: 860px) {
  .p2-lipita {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 40; gap: .4rem;
    background: var(--c-fundal); border-top: var(--p2-rand-tare);
    padding: .45rem .7rem calc(.45rem + env(safe-area-inset-bottom, 0px));
  }
  .p2-lipita a {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; border-radius: 2px; font-weight: 600; text-decoration: none; padding: .4rem;
  }
  .p2-lipita a:first-child { background: var(--c-accent); color: var(--c-accent-text); }
  .p2-lipita a:last-child { border: 1px solid var(--c-text-slab); color: var(--c-text); }
  body.profil2 { padding-bottom: 4.4rem; }
  .navigatie__lista { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .15rem; padding-bottom: .3rem; }
  .navigatie__lista li { flex: 0 0 auto; }
  .navigatie__lista a { white-space: nowrap; }
}

/* -------------------------------------------------------------------- tipar */
@media print {
  .p2-acces, .p2-lipita, .navigatie { display: none !important; }
  .p2-grila { grid-template-columns: 1fr; }
  .p2-sectiune { padding: 1.2rem 0; break-inside: avoid; }
  .p2-bara__umplut { width: var(--p2-procent, 0%) !important; transition: none; }
  .p2-faq details[open] summary::after { content: ""; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}