/* ==========================================================================
   pages.css — STILURI SPECIFICE PAGINILOR
   --------------------------------------------------------------------------
   Depinde de: tokens.css, base.css, layout.css, components.css
   Index: 1. Landing (hero, „ce facem”, transparență verificabilă, alegeri)
          2. Listare noutăți   3. Articol   4. Documente   5. Contact
          6. Pagina 404 / portal
   Selectorii au prefixul paginii pentru a nu intra în conflict cu
   componentele generale (specificitate egală, ordine de încărcare ulterioară).
   ========================================================================== */

/* 1. LANDING ------------------------------------------------------------
   HERO: elementul memorabil al site-ului — o singură idee: fulgerul care
   devine flacără (din blazon), desenat ca linie de aur pe navy, în spatele
   titlului. Restul paginii rămâne calm. Nicio altă animație decorativă. */
.hero { background: var(--ale-navy); color: var(--fg-on-dark); position: relative; overflow: hidden; border-bottom: 4px solid var(--ale-aur); }
.hero__inner { position: relative; padding: clamp(3rem, 9vw, 7rem) 0; display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60em) { .hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }
.hero__kicker { font-family: var(--font-display); font-weight: 500; color: var(--ale-aur-300); margin-bottom: var(--sp-4); }
.hero h1 { font-size: clamp(var(--fs-4), 6vw, var(--fs-6)); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--sp-5); max-width: 18ch; }
.hero__lead { font-size: var(--fs-1); color: var(--fg-on-dark-muted); max-width: 52ch; margin-bottom: var(--sp-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__motto { margin-top: var(--sp-6); font-family: var(--font-display); font-size: var(--fs--1); color: var(--ale-argint); letter-spacing: 0.08em; }
.hero__emblem { justify-self: center; width: min(100%, 22rem); }
.hero__emblem svg { width: 100%; }
/* Animație unică, la încărcare: fulgerul se „aprinde” o singură dată */
.hero__bolt { stroke-dasharray: 600; stroke-dashoffset: 600; animation: ale-strike 1.4s var(--ease) 0.2s forwards; }
@keyframes ale-strike { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__bolt { animation: none; stroke-dashoffset: 0; } }

/* Cele trei principii (integritate / transparență / protecție) */
.principles { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elevated); }
.principles > div { padding: var(--sp-6); border-bottom: 1px solid var(--border); }
@media (min-width: 48em) { .principles > div { border-bottom: 0; border-right: 1px solid var(--border); } .principles > div:last-child { border-right: 0; } }
.principles h3 { font-size: var(--fs-1); margin-bottom: var(--sp-2); }
.principles p { color: var(--fg-muted); margin: 0; }
.principles .card__icon { color: var(--ale-aur); }

/* Transparență verificabilă — listă cu data ultimei actualizări (informație!) */
.verify-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.verify-list a { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); text-decoration: none; color: var(--fg); }
.verify-list a:hover { border-color: var(--ale-azur); }
.verify-list strong { font-family: var(--font-display); color: var(--ale-azur); }
.verify-list time { font-size: var(--fs--1); color: var(--fg-muted); }

/* Modul „Alegeri și consultări” — două stări, comutate de JS (data-state) */
.election-module[data-state="inactive"] .election-module__active,
.election-module[data-state="active"] .election-module__inactive { display: none; }

/* Noutăți pe landing — 3-6 elemente, tip vizibil prin badge */
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.news-list article { display: flex; flex-direction: column; gap: var(--sp-2); }
.news-list time { font-size: var(--fs--1); color: var(--fg-muted); }
.news-list h3 { font-size: var(--fs-1); margin: 0; }
.news-list h3 a { color: var(--fg); text-decoration: none; }
.news-list h3 a:hover { color: var(--ale-azur); text-decoration: underline; }

/* 2. LISTARE NOUTĂȚI (pagină) — filtre pe tip */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.filters button { border: 1px solid var(--border-strong); background: var(--bg-elevated); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: var(--fs--1); }
.filters button[aria-pressed="true"] { background: var(--ale-navy); color: var(--ws-white); border-color: var(--ale-navy); }
.pagination { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-7); }

/* 3. ARTICOL --------------------------------------------------------------
   Articolul poartă vizibil: tipul (badge), data, organul emitent (pentru
   comunicate), data actualizării. Textul folosește .prose. */
.article-head { padding: var(--sp-7) 0 var(--sp-5); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-6); }
.article-head .badge { margin-bottom: var(--sp-4); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs--1); color: var(--fg-muted); }
.article-meta dt { display: inline; }
.article-meta dd { display: inline; margin: 0; font-weight: 600; color: var(--fg); }
.article-foot { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--border); font-size: var(--fs--1); color: var(--fg-muted); }

/* 4. DOCUMENT OFICIAL — vizualizare HTML + bară de acțiuni (PDF, tipărire) */
.doc-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.doc-body article { counter-reset: art; }
.doc-body h2 { font-size: var(--fs-2); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.doc-body h3 { font-size: var(--fs-1); }
.doc-body ol.alin { padding-left: 2.2em; }           /* alineate numerotate (1), (2) */
.doc-body ol.alin > li::marker { content: "(" counter(list-item) ") "; font-weight: 600; }

/* 5. CONTACT — date instituționale + formular, fără date personale */
.contact-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.contact-block { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); }
.contact-block h2 { font-size: var(--fs-1); }
.contact-block dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.contact-block dd { margin: 0; }

/* 6. 404 și portal (poartă de autentificare) */
.status-page { text-align: center; padding: var(--sp-9) 0; }
.status-page h1 { font-size: var(--fs-5); }
.status-page .code { font-family: var(--font-display); font-size: var(--fs-6); font-weight: 800; color: var(--ale-argint); line-height: 1; }
.portal-gate { max-width: 28rem; margin-inline: auto; }