/**
 * ConstructInfo - Stiluri Temă GeneratePress
 * Versiune: 3.4
 * Data: Aprilie 2026
 * 
 * Changelog v3.4 — Redesign section headers (universal pill)
 * - ⭐ NEW §13b: Clasă universală .ci-section-pill (full-width, roșu solid,
 *   capete rotunjite, text alb centrat) care înlocuiește header-ele
 *   heterogene din 6 template-uri PHP (homepage-stats-widget, homepage-news-grid,
 *   homepage-video-grid, homepage-forum-recent, page-video, page-cifre).
 * - Markup nou: .ci-section-pill-wrap > .ci-section-pill + .ci-section-pill__sub
 * - Link „Toate X →" mutat sub conținut: .ci-section-pill-link
 * - Mobile responsive (≤768px): font 15px, padding redus
 * - Dark mode support inclus
 *
 * Changelog v3.2 — Audit in-depth: 2 fix-uri CSS (1🟡, 1🟢)
 * - 🟡 FIX B-WP116: .video-latest-grid .video-grid__loading — template-ul page-video.php
 *   (§14.1) folosește containerul .video-latest-grid (§16b, linia 2053) pentru secțiunea 1,
 *   dar mesajele de loading/empty state/error folosesc clasa .video-grid__loading care este
 *   definită CSS doar sub .video-grid (§15, linia 1391). Clasa funcționează ca copil al
 *   oricărui grid (grid-column: 1/-1 e universal), dar la modificări viitoare pe
 *   .video-grid__loading specifice contextului .video-grid, efectele nu se propagă corect.
 *   Fix: adăugat regulă explicită .video-latest-grid .video-grid__loading cu aceleași
 *   proprietăți, asigurând consistență la extensii viitoare.
 * - 🟢 FIX B-WP118: .youtube-cta-link:hover dark mode — hover color #cc0000 pe background
 *   var(--ci-gray-100) = #1F2937 → contrast ~3.8:1 (sub WCAG AA 4.5:1). Link-ul CTA
 *   "Vezi filmarea completă pe YouTube" pe hover este greu de citit pe dark mode.
 *   Aceeași clasă de bug ca B-WP108 (.section-link, .ci-map-widget__link) dar omisă
 *   pentru .youtube-cta-link. Fix: override dark mode cu color: #FCA5A5 (contrast ~8:1).
 *
 * Changelog v3.1 — Audit in-depth: 1 fix CSS (1🟡)
 * - 🟡 FIX B-WP113: .ci-bottom-nav__item / __item--active dark mode — background-ul
 *   bottom nav fusese fixat la #1F2937, dar culorile text nu fuseseră adaptate.
 *   Active: var(--ci-red-700) = #B91C1C pe fundal #1F2937 → contrast ~1.5:1 (aproape
 *   invizibil). Inactive: var(--ci-gray-400) remapată la #6B7280 pe #1F2937 → ~2.9:1
 *   (sub WCAG AA 4.5:1). Fix: active → #FCA5A5 (contrast ~8:1), inactive remapat la
 *   var(--ci-gray-500) = #9CA3AF (contrast ~5:1, > WCAG AA).
 *
 * Changelog v3.0 — Audit in-depth: 2 fix-uri CSS (1🔴, 1🟡)
 * - 🔴 FIX B-WP110: STRUCTURAL — Blocul @media (prefers-color-scheme: dark) era poziționat
 *   la secțiunea 14 (linia ~1289), dar componentele adăugate în v1.4+ (secțiunile 15-18)
 *   erau definite DUPĂ el (liniile 1555-2705). CSS cascade: la specificitate egală, declarația
 *   ulterioară câștigă. Rezultat: TOATE override-urile dark mode pentru componente cu
 *   `background: #FFFFFF` hardcoded erau suprascrise de CSS-ul normal.
 *   Componente afectate (12): .video-filter-btn, .video-grid-card, .youtube-card, .video-card,
 *   .ci-featured-video-wrapper, .ci-stats-cta, .cifre-kpi-card, .cifre-chart-container,
 *   .cifre-progress-item, .ci-related-video-card, .ci-stat-item__value, .ci-featured-video-badge.
 *   Fix-uri anterioare invalidate: B-WP57 (v2.1), B-WP89 (v2.5), B-WP102 (v2.7),
 *   B-WP107 (v2.9). Fix: mutat blocul dark mode complet la SFÂRȘITUL fișierului (după
 *   secțiunea Print), asigurând că toate override-urile au prioritate prin ordine sursă.
 * - 🟡 FIX B-WP111: .section-link dark mode — B-WP108 (v2.9) a adăugat override generic
 *   `.section-link { color: var(--ci-red-100); }` (specificitate 0,1,0), dar selectorii
 *   scoped din B-WP53 (v2.1): `.ci-homepage-latest-news .section-link`,
 *   `.ci-homepage-featured-video .section-link`, `.video-page .section-link`
 *   (specificitate 0,2,0) suprascriu fix-ul cu `color: var(--ci-red-700)` = #B91C1C
 *   (neremapat). Link-urile "Toate știrile →", "Toate videoclipurile →" pe homepage și
 *   /video rămâneau cu contrast ~2.5:1 în dark mode. Fix: adăugat override-uri scoped
 *   cu specificitate identică în blocul dark mode.
 *
 * Changelog v2.9 — Audit in-depth: 2 fix-uri CSS (2🟡)
 * - 🟡 FIX B-WP107: .ci-stat-item__value dark mode — color: var(--ci-red-700) = #B91C1C
 *   pe fundal var(--ci-gray-100) = #1F2937 → contrast ~2.5:1 (sub WCAG AA 4.5:1).
 *   Numerele KPI ("45", "1.032", "28") aproape invizibile pe dark mode. B-WP57 (v2.1)
 *   a fixat background-urile containerelor dar nu și culoarea text a valorilor.
 *   Fix: override dark mode cu color: #FCA5A5 (contrast ~8:1).
 * - 🟡 FIX B-WP108: .section-link și .ci-map-widget__link dark mode — ambele au
 *   color: var(--ci-red-700) = #B91C1C nereremapat în dark mode. Pe fundal întunecat
 *   → contrast ~2.5:1. B-WP105 (v2.8) a fixat .ci-btn--ghost cu aceeași problemă, dar
 *   aceste link-uri au fost omise. Afectează: "Toate știrile →", "Toate videoclipurile →"
 *   pe homepage, "Vezi harta →" în widget sidebar. Fix: override dark mode cu
 *   color: var(--ci-red-100) (#FCA5A5, contrast ~8:1).
 *
 * Changelog v2.8 — Audit in-depth: 2 fix-uri CSS (2🟡)
 * - 🟡 FIX B-WP104: .ci-btn--secondary dark mode lipsă — background: #FFFFFF hardcoded
 *   → buton alb strident pe fundal întunecat. Folosit de homepage-stats-widget.php (§13.5)
 *   CTA „Vezi toate cifrele". Aceeași clasă de bug ca B-WP27 (.btn-outline, fixat v1.4)
 *   dar pentru varianta BEM introdusă la v2.0. Hover var(--ci-red-50) neremapată → roz.
 *   Fix: override dark mode identic cu strategia .btn-outline.
 * - 🟡 FIX B-WP105: .ci-btn--ghost dark mode lipsă — color: var(--ci-red-700) = #B91C1C
 *   pe fundal #1F2937 → contrast ~2.5:1 (sub WCAG AA 4.5:1, text aproape invizibil).
 *   Hover: background var(--ci-red-50) neremapată → roz strident pe dark. Folosit de
 *   page-cifre.php (§18.4) butonul „Export CSV". Fix: color var(--ci-red-100) (#FCA5A5,
 *   contrast ~8:1) și hover rgba semi-transparent.
 *
 * Changelog v2.7 — Audit in-depth: 1 fix CSS (1🟡)
 * - 🟡 FIX B-WP102: .ci-related-video-card dark mode — B-WP89 (v2.5) a schimbat
 *   background de la var(--ci-gray-100) la var(--ci-gray-200) pentru contrast cu
 *   containerul. Dar border-color: var(--ci-gray-200) e acum IDENTIC cu noul background
 *   → border-ul e invizibil, cardurile pierd conturul vizual. Comparativ, .ci-article-card
 *   are border-color: var(--ci-gray-200) pe background: var(--ci-gray-100) → vizibil.
 *   Fix: border-color schimbat la var(--ci-gray-400) pentru contrast minimal vizibil.
 *
 * Changelog v2.6 — Audit in-depth: 1 fix CSS (1🟡)
 * - 🟡 FIX B-WP93: CSS-ul YouTube embed din §3.6 (youtube-embed-container,
 *   youtube-embed-wrapper, youtube-lazy-embed, youtube-play-btn, youtube-embed-footer,
 *   youtube-cta-link, youtube-subscribe-btn) NU fusese portat în tema CSS. Articolele cu
 *   video embed se randau complet nestiilizate. Adițional, NICIO regulă CSS pentru iframe
 *   nu exista — nici pentru youtube-embed-wrapper (articole) nici pentru
 *   ci-featured-video-embed (homepage). După click pe play (lazy embed → iframe),
 *   iframe-ul YouTube nu umplea containerul. Fix: adăugat CSS complet §3.6 + iframe rules
 *   în secțiunea 3b + regula iframe pentru homepage featured video.
 *
 * Changelog v2.5 — Audit in-depth: 2 fix-uri CSS (1🟡, 1🟢)
 * - 🟡 FIX B-WP89: .ci-related-video-card — dark mode background era var(--ci-gray-100),
 *   identic cu containerul .ci-related-videos (ambele #1F2937). Cardurile erau complet
 *   invizibile (zero contrast card-container). Fix: schimbat la var(--ci-gray-200) (#374151)
 *   pentru contrast vizibil, consistent cu .ci-article-card care are override separat.
 * - 🟢 FIX B-WP91: .ci-homepage-featured-video și .ci-homepage-stats-widget setau
 *   background: #F9FAFB hardcoded, dar dark mode override-urile foloseau var(--ci-gray-50).
 *   Dacă variabila se schimbă în viitor, light mode nu se actualizează. Fix: înlocuit
 *   #F9FAFB cu var(--ci-gray-50) în ambele clase.
 *
 * Changelog v2.4 — Audit in-depth: 3 fix-uri CSS (2🟡, 1🟢)
 * - 🟡 FIX B-WP83: .ci-map-widget__preview și .ci-map-widget__legend — dark mode lipsă.
 *   .ci-map-widget__preview avea background: var(--ci-red-50) (#FEF2F2) neremapată în dark
 *   mode → dreptunghi roz deschis pe fundal întunecat. .ci-map-widget__legend avea
 *   background: #FFFFFF hardcoded → casetă albă pe dark. Aceeași clasă de bug ca B-WP57
 *   dar omisă pentru aceste elemente. Adăugat overrides dark mode.
 * - 🟢 FIX B-WP84: .video-group__header — duplicat în dark mode block (o dată în blocul
 *   B-WP57 la ~line 1220 și o dată standalone la ~line 1264, cu valori identice). Eliminat
 *   duplicatul standalone, păstrat doar instanța din blocul B-WP57.
 * - 🟢 FIX B-WP85: .ci-featured-video-badge — clasă nouă dedicată pentru badge-ul obiectiv
 *   în homepage featured video (§13.3). Anterior se folosea .video-card__badge (2px 8px,
 *   11px font) care era prea mic în contextul featured cu heading 18px. Badge-ul dedicat
 *   are padding și font-size adaptate.
 *
 * Changelog v2.3 — Audit in-depth: 3 fix-uri CSS (2🟡, 1🟢)
 * - 🟡 FIX B-WP74: .ci-featured-article__image — template-ul homepage-featured-news.php
 *   (§13.1) include <div class="ci-featured-article__image"><img></div> dar CSS-ul
 *   nu avea NICIO regulă definită (doar dark mode override la line 1214). <img>
 *   se randa la dimensiune naturală fără constrângeri → overflow pe mobile, layout
 *   inconsistent. Adăugat: width 100%, aspect-ratio 16:9, overflow hidden, border-radius.
 * - 🟡 FIX B-WP75: Badge-uri categorii noi (.ci-badge--drumuri-expres, --centuri,
 *   --alte-proiecte, --politica) foloseau hex hardcoded (#DBEAFE, #D1FAE5 etc.) dar
 *   .ci-badge--autostrazi folosea var(--ci-cat-autostrazi-bg). Lipseau complet variabilele
 *   CSS pentru cele 4 categorii noi. Adăugat variabile --ci-cat-drumuri-expres-*,
 *   --ci-cat-centuri-*, --ci-cat-alte-proiecte-*, --ci-cat-politica-* în :root și
 *   dark mode. Badge-uri actualizate să folosească variabilele.
 * - 🟢 FIX B-WP77: Variabile CSS pentru 8 categorii VECHI deprecate (--ci-cat-cai-ferate-*,
 *   --ci-cat-licitatii-*, etc.) rămâneau active în :root și dark mode deși niciun selector
 *   CSS activ nu le folosea (~30 linii CSS mort). Comentat blocurile de variabile vechi.
 *
 * Changelog v2.2 — Audit in-depth: 1 fix CSS (1🟡)
 * - 🟡 FIX B-WP67: .ci-related-videos, .ci-related-videos__grid, .ci-related-video-card,
 *   .ci-related-video-card__title — template-ul §20.4 (single.php) le folosește dar
 *   NICIUNA nu avea CSS definit. Secțiunea video-uri relevante per articol se randa
 *   complet nestiilizată. Adăugat stiluri complete cu grid 3 coloane desktop / 1 coloană
 *   mobile, thumbnail aspect-ratio 16:9, hover states, dark mode.
 *
 * Changelog v2.1 — Audit in-depth: 5 fix-uri CSS (1🔴, 3🟡, 1🟢)
 * - 🔴 FIX B-WP60: .ci-featured-article — template-ul homepage-featured-news.php (§13.1)
 *   randează ca element <a>, dar CSS-ul nu seta display:block, text-decoration:none,
 *   color:inherit. <a> implicit e display:inline → layout complet spart, text cu underline.
 *   Adăugat proprietăți + hover state.
 * - 🟡 FIX B-WP53: .section-header și .section-link scoped doar la .homepage-latest-videos
 *   dar folosite și de homepage-latest-news (§13.2), homepage-featured-video (§13.3),
 *   page-video (§14.1) care NU au acest parent → headere fără flex, linkuri nestiilizate.
 *   Adăugat variante unscoped pentru .ci-homepage-latest-news, .ci-homepage-featured-video,
 *   .video-page.
 * - 🟡 FIX B-WP54: Badge-uri categorii noi v2.0 (.ci-badge--drumuri-expres, --centuri,
 *   --alte-proiecte, --politica) foloseau hex hardcoded (#DBEAFE, #D1FAE5, etc.) fără
 *   override prefers-color-scheme:dark → pete luminoase pe fundal întunecat. Adăugat
 *   override semi-transparent identic cu badge-urile vechi.
 * - 🟡 FIX B-WP57: Dark mode lipsă COMPLET pentru secțiunile homepage v2.0 + pagina Cifre:
 *   ci-featured-video-wrapper, ci-stats-cta, cifre-kpi-card, cifre-chart-container,
 *   cifre-progress-item, video-group__header, cifre-filter-btn, cifre-table — toate cu
 *   background #FFFFFF hardcoded. Adăugat override complet prefers-color-scheme:dark.
 * - 🟢 FIX B-WP61: .ci-article-card — aceeași clasă de bug ca B-WP60: randat ca <a> în
 *   homepage-latest-news.php dar fără display:flex, text-decoration:none. Adăugat.
 *
 * Changelog v2.0 — Restructurare majoră:
 * - Categorii badges: de la 8 la 5 (autostrazi, drumuri-expres, centuri, alte-proiecte, politica)
 * - Adăugat §2b: Feature Tabs (.ci-feature-tab) — stil pill pentru Harta, Forum, Video
 * - Adăugat §13: Homepage secțiuni noi (featured-video, map-widget, stats-widget, subscribe-bar)
 * - Adăugat §14b: Video page grupare pe proiecte (.video-group, .video-latest-grid)
 * - Adăugat §18: Pagina Cifre (KPI cards, progress bars, chart containers, tabel sortabil)
 * - Categorii vechi păstrate commented out pentru referință migrare
 *
 * Changelog v1.7:
 * - 🔴 FIX B-WP45: Widget YouTube — template-ul PHP (§5.2) generează clase
 *   `youtube-widget-*` (youtube-widget-videos, youtube-widget-item, youtube-widget-thumb,
 *   youtube-widget-info, youtube-widget-title, youtube-widget-views, youtube-widget-subscribe).
 *   Dar CSS §9 definea selectori `ci-youtube-widget__*` (structură diferită: single-video
 *   cu header vs. multi-video list). Widget-ul se randa COMPLET nestiilizat — fără fundal
 *   întunecat, fără layout, fără stil subscribe. Adăugat secțiune completă 9b cu stiluri
 *   pentru clasele reale, inclusiv dark mode.
 * - 🟡 FIX B-WP50: .youtube-card-title (§6.2) — lipsea proprietatea color explicită.
 *   În dark mode, titlul nu primea var(--ci-gray-900) remapat, rămânând invizibil.
 * - 🟢 FIX B-WP51: .video-subfilters CSS comentat — elementul HTML a fost dezactivat
 *   la B-WP43 dar regulile CSS rămâneau active, creând un gap invizibil de 20px.
 *
 * Changelog v1.6:
 * - 🟡 FIX B-WP38: .section-header, .section-header h2, .section-link lipseau
 *   din tema consolidată — existau doar în css/youtube-homepage.css (§13.2).
 *   B-WP34 (v1.5) a omis aceste clase deși homepage-latest-videos.php (§13.1)
 *   le folosește. Fără ele: header fără flex layout, link "Vezi toate" nestiilizat,
 *   heading fără culoare dark mode. Adăugat cu scope .homepage-latest-videos
 *   pentru a evita conflicte cu alte .section-header pe site.
 * - 🟡 FIX B-WP42: .video-card__badge și .video-grid-card__badge lipseau din
 *   dark mode. var(--ci-red-100)/var(--ci-red-800) nu sunt remapate → badge roz
 *   aprins (#FEE2E2) pe card întunecat. Adăugat override semi-transparent identic
 *   cu badge-urile de categorii.
 *
 * Changelog v1.5:
 * - 🟡 FIX B-WP34: Stilurile .video-card* (§13.1 homepage-latest-videos.php) erau
 *   doar în css/youtube-homepage.css (fișier separat), nu în tema principală.
 *   §13.1 este template-ul RECOMANDAT (§6.2 deprecat), dar stilurile sale
 *   nu erau consolidate. Adăugat: .video-card, .video-card--featured,
 *   .video-card__thumb, .video-card__play, .video-card__info, .video-card__badge,
 *   .video-card__title, .video-card__meta, .video-card__channel, .video-card__date,
 *   .latest-videos-grid, .latest-videos-cta, .homepage-latest-videos.
 *   Adăugat dark mode pentru .video-card (lipsea complet — card alb pe fundal întunecat,
 *   text invizibil). Adăugat mobile responsive (carousel horizontal).
 *
 * Changelog v1.4:
 * - 🔴 FIX B-WP17: Adăugat stiluri lipsă pentru pagina /video — .video-page,
 *   .video-filters, .video-filter-btn, .video-grid, .video-grid-card (§14).
 *   Pagina era complet nestilizată (filtre fără aspect, grid fără layout, carduri
 *   fără spacing). Adăugat și .video-grid__loading pentru starea de încărcare.
 * - 🟡 FIX B-WP27: .btn-outline hover în dark mode — background trecea de la
 *   #FFFFFF la #111827 (var(--ci-red-50) reinterpretat). Fix: override explicit
 *   dark mode pe .btn-outline cu background și culori adaptate.
 * - 🟡 FIX B-WP28: .video-card__badge hardcoded #DBEAFE/#1D4ED8 (mereu albastru).
 *   Schimbat cu var(--ci-red-100)/var(--ci-red-800) consistent cu brandul.
 * - 🟢 FIX B-WP29: .homepage-youtube (§6.2) nu avea stiluri definite în CSS —
 *   adăugat .youtube-grid, .youtube-card, .youtube-card-thumb etc.
 *
 * Changelog v1.3:
 * - 🟡 FIX: Adăugat clase .btn, .btn-youtube, .btn-outline — folosite de template-urile
 *   homepage-youtube.php (§6.2) și homepage-latest-videos.php (§13.1) dar nedefinite
 *   anterior. Butonul Subscribe și Load More erau fără stil.
 *
 * Changelog v1.2:
 * - 🔴 FIX BUG: Badge slug „poduri" → „poduri-pasaje" (aliniere la WordPress slug din 04-wordpress-spec.md)
 *   Variabile CSS: --ci-cat-poduri-* → --ci-cat-poduri-pasaje-*
 *   Clasă CSS: .ci-badge--poduri → .ci-badge--poduri-pasaje
 *   Dark mode: variabile actualizate
 * - Referință: vezi 10-audit-bugs-compatibilitate.md BUG 3
 *
 * Changelog v1.1:
 * - Adăugat badge-uri lipsă: drumuri-nationale, analize
 * - Adăugat statusuri lipsă: contract-semnat, suspendat, anulat
 * - Fix touch targets 44px pe category pills și bottom nav
 * - Fix body padding safe-area iPhone
 * - Dark mode: badge-uri și statusuri semi-transparente
 * 
 * Acest fișier conține variabilele CSS și stilurile custom
 * pentru tema ConstructInfo bazată pe GeneratePress Pro.
 * 
 * Instrucțiuni de instalare:
 * 1. Appearance → Customize → Additional CSS
 * 2. Sau: child theme style.css
 * 3. Sau: Simple Custom CSS plugin
 */

/* ==========================================================================
   1. VARIABILE CSS - CULORI PRINCIPALE
   ========================================================================== */

:root {
  /* Roșu Principal - Brand Color */
  --ci-red-900: #7F1D1D;    /* Text pe fundal roșu deschis */
  --ci-red-800: #991B1B;    /* Hover states, gradient end */
  --ci-red-700: #B91C1C;    /* PRIMARY - Header, butoane, accente */
  --ci-red-600: #DC2626;    /* Gradient start, hover light */
  --ci-red-500: #EF4444;    /* Alerts, notificări */
  --ci-red-100: #FEE2E2;    /* Background cards, badges */
  --ci-red-50: #FEF2F2;     /* Background categorii, fundal subtil */
  
  /* Roșu Border */
  --ci-red-border: #FECACA; /* Borduri subtile pe fundal roșu */
  
  /* Neutral - Text & Backgrounds */
  --ci-gray-900: #111827;   /* Text principal */
  --ci-gray-700: #374151;   /* Text secundar */
  --ci-gray-500: #6B7280;   /* Text muted */
  --ci-gray-400: #9CA3AF;   /* Placeholder, icons inactive */
  --ci-gray-200: #E5E7EB;   /* Borduri */
  --ci-gray-100: #F3F4F6;   /* Background cards */
  --ci-gray-50: #F9FAFB;    /* Background page */
  
  /* Status Colors - Proiecte Infrastructură */
  --ci-status-executie: #B91C1C;    /* În execuție - Roșu */
  --ci-status-licitatie: #F59E0B;   /* În licitație - Galben/Amber */
  --ci-status-contract-semnat: #D97706; /* Contract semnat - Amber închis */
  --ci-status-finalizat: #22C55E;   /* Finalizat - Verde */
  --ci-status-planificat: #3B82F6;  /* Planificat - Albastru */
  --ci-status-suspendat: #DC2626;   /* Suspendat - Roșu aprins */
  --ci-status-anulat: #6B7280;      /* Anulat - Gri */
  
  /* Category Badge Colors */
  --ci-cat-autostrazi-bg: #FEE2E2;
  --ci-cat-autostrazi-text: #991B1B;
  
  /* ⚠️ v2.3 FIX B-WP75: Variabile CSS pentru categoriile noi v5.0 —
     anterior, badge-urile drumuri-expres/centuri/alte-proiecte/politica
     foloseau hex hardcoded în loc de variabile (inconsistent cu autostrazi). */
  --ci-cat-drumuri-expres-bg: #DBEAFE;
  --ci-cat-drumuri-expres-text: #1E40AF;
  
  --ci-cat-centuri-bg: #D1FAE5;
  --ci-cat-centuri-text: #065F46;
  
  --ci-cat-alte-proiecte-bg: #FEF3C7;
  --ci-cat-alte-proiecte-text: #92400E;
  
  --ci-cat-politica-bg: #F1F5F9;
  --ci-cat-politica-text: #475569;
  
  /* ⚠️ v2.3 FIX B-WP77: Categorii VECHI deprecate — variabile nefolosite de niciun
     selector activ (badge-urile vechi sunt comentate la §7). ~30 linii CSS mort.
  --ci-cat-cai-ferate-bg: #DBEAFE;
  --ci-cat-cai-ferate-text: #1E40AF;
  
  --ci-cat-licitatii-bg: #FEF3C7;
  --ci-cat-licitatii-text: #92400E;
  
  --ci-cat-aeroporturi-bg: #E0E7FF;
  --ci-cat-aeroporturi-text: #3730A3;
  
  --ci-cat-transport-urban-bg: #D1FAE5;
  --ci-cat-transport-urban-text: #065F46;
  
  --ci-cat-poduri-pasaje-bg: #FEE2E2;
  --ci-cat-poduri-pasaje-text: #991B1B;
  
  --ci-cat-drumuri-nationale-bg: #F3E8FF;
  --ci-cat-drumuri-nationale-text: #6B21A8;
  
  --ci-cat-analize-bg: #F1F5F9;
  --ci-cat-analize-text: #475569;
  */
  
  /* YouTube */
  --ci-youtube-red: #FF0000;
  --ci-youtube-dark: #0F0F0F;
  
  /* Shadows */
  --ci-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ci-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --ci-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  /* Border Radius */
  --ci-radius-sm: 4px;
  --ci-radius-md: 8px;
  --ci-radius-lg: 12px;
  --ci-radius-xl: 16px;
  --ci-radius-full: 9999px;
  
  /* Transitions */
  --ci-transition-fast: 150ms ease;
  --ci-transition-normal: 250ms ease;

  /* ==== CIFRE v2 — paletă funcțională (spec 22 §0) ====
     Folosită pe /cifre/ și widget homepage. Coexistă cu paleta brand
     (--ci-red-*, --ci-cat-*) — namespace distinct (.tip-badge.* vs .ci-badge--*). */
  --ci-blue-600: #2563EB;     /* Autostrăzi — bars, progress, badges */
  --ci-emerald-600: #059669;  /* Drumuri Expres — bars, progress, finalizat */
  --ci-orange-600: #EA580C;   /* Centuri — bars, progress, badges */
  --ci-yellow-500: #F59E0B;   /* Bracket 0–25% — execuție start recent */
  --ci-lime-500: #84CC16;     /* Bracket 50–80% — execuție avansat */
  --ci-emerald-700: #047857;  /* Bracket 80–100% — aproape finalizat */

  /* Tip-badge bg/text per categorie — independent de --ci-cat-* (brand) */
  --ci-tip-autostrazi-bg: #DBEAFE;
  --ci-tip-autostrazi-text: #1E3A8A;
  --ci-tip-expres-bg: #D1FAE5;
  --ci-tip-expres-text: #059669;
  --ci-tip-centuri-bg: #FFEDD5;
  --ci-tip-centuri-text: #EA580C;

  /* Display fonts /cifre/ + widget — încărcate condițional via wp_enqueue_style */
  --ci-font-display: 'Fraunces', Georgia, serif;
  --ci-font-sans: 'Manrope', -apple-system, system-ui, sans-serif;
}


/* ==========================================================================
   2. GENERATEPRESS OVERRIDES - HEADER
   ========================================================================== */

/* Site Header Background */
.site-header {
  background-color: var(--ci-red-700) !important;
}

/* Logo Text Color */
.main-title a,
.site-description {
  color: #FFFFFF !important;
}

/* Navigation Links */
.main-navigation a {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
  transition: var(--ci-transition-fast);
}

.main-navigation a:hover {
  color: #FFFFFF !important;
}

/* Current Menu Item */
.main-navigation .current-menu-item > a {
  border-bottom: 2px solid #FFFFFF;
  padding-bottom: 2px;
}

/* Mobile Menu Toggle */
.menu-toggle {
  color: #FFFFFF !important;
}


/* ==========================================================================
   3. YOUTUBE BUTTON IN HEADER
   ========================================================================== */

.ci-youtube-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: var(--ci-radius-md);
  color: #FFFFFF;
  font-weight: 500;
  text-decoration: none;
  transition: var(--ci-transition-fast);
}

.ci-youtube-header-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.ci-youtube-header-btn svg {
  width: 24px;
  height: 18px;
}


/* ==========================================================================
   3b. YOUTUBE EMBED IN ARTICLES — §3.6 ⚠️ v2.6 FIX B-WP93
   CSS-ul din §3.6 nu fusese portat în tema CSS — articolele cu video embed
   se randau complet nestiilizate (fără rounded corners, fără footer layout,
   fără stil subscribe button, fără iframe positioning).
   ========================================================================== */

.youtube-embed-container {
  margin: 1.5rem 0;
  background: var(--ci-gray-100);
  border-radius: var(--ci-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ci-gray-200);
}

.youtube-embed-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.youtube-embed-wrapper .youtube-lazy-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.youtube-embed-wrapper .youtube-lazy-embed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.youtube-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.youtube-lazy-embed:hover .youtube-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
}

.youtube-play-btn .youtube-play-bg {
  transition: fill 0.2s ease;
}

.youtube-lazy-embed:hover .youtube-play-bg {
  fill: #cc0000;
}

.youtube-embed-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
}

.youtube-cta-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ci-gray-900);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.youtube-cta-link:hover {
  color: #cc0000;
}

.youtube-icon {
  color: #cc0000;
}

.youtube-subscribe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #cc0000;
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--ci-radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
  min-height: 44px;
}

.youtube-subscribe-btn:hover {
  background: #aa0000;
  color: #fff;
}

@media (min-width: 768px) {
  .youtube-embed-container {
    margin: 2rem 0;
  }

  .youtube-embed-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
  }

  .youtube-subscribe-btn {
    padding: 10px 20px;
  }
}

/* ⚠️ v2.6 FIX B-WP93: Reguli iframe — CRITICE. youtube-lazy.js înlocuiește
   thumbnail-ul cu un <iframe> via wrapper.innerHTML = ''; wrapper.appendChild(iframe).
   Fără aceste reguli, iframe-ul se randează la dimensiune default, nu umple containerul
   responsive (padding-bottom: 56.25%). Aplicate pe AMBELE contexte: articol + homepage. */
.youtube-embed-wrapper iframe,
.ci-featured-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ==========================================================================
   4. CATEGORY BAR / FILTER PILLS
   ========================================================================== */

.ci-category-bar {
  background: var(--ci-red-50);
  padding: 12px 24px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ci-red-border);
}

.ci-category-pill {
  padding: 8px 16px;
  border-radius: var(--ci-radius-full);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: var(--ci-transition-fast);
  white-space: nowrap;
  min-height: 44px; /* ⚠️ v1.1 — Touch target minim conform branding §10.3 */
  display: inline-flex;
  align-items: center;
}

.ci-category-pill--active {
  background: var(--ci-red-700);
  color: #FFFFFF;
}

.ci-category-pill--inactive {
  background: #FFFFFF;
  color: var(--ci-red-800);
  border: 1px solid var(--ci-red-border);
}

.ci-category-pill--inactive:hover {
  background: var(--ci-red-100);
  border-color: var(--ci-red-700);
}


/* ==========================================================================
   5. ARTICLE CARDS
   ========================================================================== */

/* ⚠️ v2.1 FIX B-WP61: Template homepage-latest-news.php randează .ci-article-card ca <a>.
   Fără display:flex, <a> e inline → layout spart. Fără text-decoration:none → underline pe tot. */
.ci-article-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #FFFFFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  overflow: hidden;
  transition: var(--ci-transition-normal);
}

.ci-article-card:hover {
  box-shadow: var(--ci-shadow-md);
  transform: translateY(-2px);
}

.ci-article-card__image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: var(--ci-gray-100);
}

.ci-article-card__content {
  padding: 16px;
}

.ci-article-card__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin: 10px 0 8px;
  color: var(--ci-gray-900);
}

.ci-article-card__meta {
  font-size: 12px;
  color: var(--ci-gray-500);
}


/* ==========================================================================
   6. FEATURED ARTICLE (BREAKING NEWS)
   ========================================================================== */

/* ⚠️ v2.1 FIX B-WP60: Template-ul homepage-featured-news.php (§13.1) randează
   .ci-featured-article ca element <a>. Fără display:block, <a> e inline (layout spart).
   Fără text-decoration:none, browser-ul adaugă underline pe tot conținutul. */
.ci-featured-article {
  display: block;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(135deg, var(--ci-red-800) 0%, var(--ci-red-600) 100%);
  border-radius: var(--ci-radius-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: var(--ci-transition-normal);
}

.ci-featured-article:hover {
  box-shadow: var(--ci-shadow-lg);
  text-decoration: none;
  color: inherit;
}

.ci-featured-article::before {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.ci-featured-article__badge {
  display: inline-block;
  background: #FFFFFF;
  color: var(--ci-red-700);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--ci-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ci-featured-article__title {
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 600;
  margin: 16px 0 12px;
  line-height: 1.35;
}

.ci-featured-article__excerpt {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.ci-featured-article__meta {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

/* ⚠️ v2.3 FIX B-WP74: .ci-featured-article__image lipsea complet din CSS normal.
   Template-ul homepage-featured-news.php (§13.1) include <div><img></div> dar
   fără stiluri, <img> se randa la dimensiune naturală, overflow pe mobile. */
.ci-featured-article__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ci-radius-md);
  margin-bottom: 16px;
}

.ci-featured-article__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   7. CATEGORY BADGES
   ========================================================================== */

.ci-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--ci-radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ci-badge--autostrazi {
  background: var(--ci-cat-autostrazi-bg);
  color: var(--ci-cat-autostrazi-text);
}

/* ⚠️ v2.0 — Categorii noi */
/* ⚠️ v2.3 FIX B-WP75: Înlocuit hex hardcoded cu variabile CSS (consistent cu autostrazi) */
.ci-badge--drumuri-expres {
  background: var(--ci-cat-drumuri-expres-bg);
  color: var(--ci-cat-drumuri-expres-text);
}

.ci-badge--centuri {
  background: var(--ci-cat-centuri-bg);
  color: var(--ci-cat-centuri-text);
}

.ci-badge--alte-proiecte {
  background: var(--ci-cat-alte-proiecte-bg);
  color: var(--ci-cat-alte-proiecte-text);
}

.ci-badge--politica {
  background: var(--ci-cat-politica-bg);
  color: var(--ci-cat-politica-text);
}

/* ⚠️ v2.0 — Categorii vechi (deprecated, păstrate pentru migrare) */
/*
.ci-badge--cai-ferate { background: var(--ci-cat-cai-ferate-bg); color: var(--ci-cat-cai-ferate-text); }
.ci-badge--licitatii { background: var(--ci-cat-licitatii-bg); color: var(--ci-cat-licitatii-text); }
.ci-badge--aeroporturi { background: var(--ci-cat-aeroporturi-bg); color: var(--ci-cat-aeroporturi-text); }
.ci-badge--transport-urban { background: var(--ci-cat-transport-urban-bg); color: var(--ci-cat-transport-urban-text); }
.ci-badge--poduri-pasaje { background: var(--ci-cat-poduri-pasaje-bg); color: var(--ci-cat-poduri-pasaje-text); }
.ci-badge--drumuri-nationale { background: var(--ci-cat-drumuri-nationale-bg); color: var(--ci-cat-drumuri-nationale-text); }
.ci-badge--analize { background: var(--ci-cat-analize-bg); color: var(--ci-cat-analize-text); }
*/


/* ==========================================================================
   7b. FEATURE TABS (Harta, Forum, Video) ✨ v2.0
   ========================================================================== */

.ci-feature-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--ci-radius-md);
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--ci-transition-fast);
  min-height: 44px;
}

.ci-feature-tab:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.ci-feature-tab--active {
  background: #FFFFFF;
  color: var(--ci-red-700);
}

.ci-feature-tab svg {
  width: 18px;
  height: 18px;
}


/* ==========================================================================
   8. STATUS BADGES (PROIECTE)
   ========================================================================== */

.ci-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ci-radius-sm);
  font-size: 11px;
  font-weight: 600;
}

.ci-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ci-status--executie {
  background: #FEE2E2;
  color: #991B1B;
}
.ci-status--executie::before {
  background: var(--ci-status-executie);
}

.ci-status--licitatie {
  background: #FEF3C7;
  color: #92400E;
}
.ci-status--licitatie::before {
  background: var(--ci-status-licitatie);
}

.ci-status--finalizat {
  background: #D1FAE5;
  color: #065F46;
}
.ci-status--finalizat::before {
  background: var(--ci-status-finalizat);
}

.ci-status--planificat {
  background: #DBEAFE;
  color: #1E40AF;
}
.ci-status--planificat::before {
  background: var(--ci-status-planificat);
}

/* ⚠️ v1.1 — Statusuri lipsă adăugate */
.ci-status--contract-semnat {
  background: #FFFBEB;
  color: #92400E;
}
.ci-status--contract-semnat::before {
  background: var(--ci-status-contract-semnat);
}

.ci-status--suspendat {
  background: #FEE2E2;
  color: #991B1B;
}
.ci-status--suspendat::before {
  background: var(--ci-status-suspendat);
}

.ci-status--anulat {
  background: #F3F4F6;
  color: #374151;
}
.ci-status--anulat::before {
  background: var(--ci-status-anulat);
}


/* ==========================================================================
   9. YOUTUBE SIDEBAR WIDGET
   ========================================================================== */

.ci-youtube-widget {
  background: var(--ci-youtube-dark);
  border-radius: var(--ci-radius-lg);
  padding: 16px;
}

.ci-youtube-widget__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.ci-youtube-widget__logo {
  width: 28px;
  height: 20px;
}

.ci-youtube-widget__title {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
}

.ci-youtube-widget__video {
  background: #1a1a1a;
  border-radius: var(--ci-radius-md);
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 12px;
}

.ci-youtube-widget__play {
  width: 48px;
  height: 48px;
  background: rgba(255, 0, 0, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--ci-transition-fast);
}

.ci-youtube-widget__play:hover {
  transform: scale(1.1);
}

.ci-youtube-widget__video-title {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 4px;
}

.ci-youtube-widget__video-meta {
  color: #888888;
  font-size: 12px;
  margin: 0;
}

.ci-youtube-widget__subscribe {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: #CC0000;
  color: #FFFFFF;
  border: none;
  padding: 12px;
  border-radius: var(--ci-radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ci-transition-fast);
}

.ci-youtube-widget__subscribe:hover {
  background: #AA0000;
}


/* ==========================================================================
   9b. YOUTUBE WIDGET — TEMPLATE PHP CLASSES ⚠️ v1.7 FIX B-WP45
   Template-ul PHP (§5.2) generează clase youtube-widget-* (multi-video list).
   §9 definea ci-youtube-widget__* (structură diferită, single-video cu header).
   Widget-ul se randa COMPLET nestiilizat fără aceste reguli.
   ========================================================================== */

.youtube-widget-videos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.youtube-widget-item {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: var(--ci-radius-md);
  text-decoration: none;
  color: #FFFFFF;
  transition: background var(--ci-transition-fast);
}

.youtube-widget-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.youtube-widget-thumb {
  position: relative;
  width: 120px;
  min-width: 120px;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  background: #1a1a1a;
}

.youtube-widget-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.youtube-widget-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.8);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 3px;
}

.youtube-widget-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.youtube-widget-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 4px;
  color: #FFFFFF;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.youtube-widget-views {
  font-size: 11px;
  color: #888888;
}

.youtube-widget-subscribe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  background: #CC0000;
  color: #FFFFFF;
  border: none;
  padding: 10px;
  border-radius: var(--ci-radius-md);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ci-transition-fast);
  min-height: 44px;
}

.youtube-widget-subscribe:hover {
  background: #AA0000;
  color: #FFFFFF;
}


/* ==========================================================================
   10. MAP WIDGET
   ========================================================================== */

.ci-map-widget {
  background: #FFFFFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  padding: 16px;
}

.ci-map-widget__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.ci-map-widget__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ci-gray-900);
}

.ci-map-widget__link {
  font-size: 13px;
  color: var(--ci-red-700);
  text-decoration: none;
  font-weight: 500;
}

.ci-map-widget__link:hover {
  text-decoration: underline;
}

.ci-map-widget__preview {
  background: var(--ci-red-50);
  border-radius: var(--ci-radius-md);
  height: 140px;
  position: relative;
  overflow: hidden;
}

.ci-map-widget__legend {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: #FFFFFF;
  padding: 6px 10px;
  border-radius: var(--ci-radius-sm);
  font-size: 11px;
  display: flex;
  gap: 12px;
}


/* ==========================================================================
   11. BOTTOM NAVIGATION (MOBILE)
   ========================================================================== */

.ci-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-top: 1px solid var(--ci-gray-200);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-around;
  z-index: 1000;
}

.ci-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--ci-gray-400);
  font-size: 11px;
  gap: 4px;
  transition: var(--ci-transition-fast);
  min-height: 44px; /* ⚠️ v1.1 — Touch target minim 44px */
  min-width: 44px;
  justify-content: center;
}

.ci-bottom-nav__item--active {
  color: var(--ci-red-700);
}

.ci-bottom-nav__item svg {
  width: 24px;
  height: 24px;
}

/* ⚠️ v1.1 — padding calculat dinamic: nav height (~54px) + safe-area */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px) + 16px);
  }
}


/* ==========================================================================
   12. BUTTONS
   ========================================================================== */

.ci-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--ci-radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ci-transition-fast);
  border: none;
}

.ci-btn--primary {
  background: var(--ci-red-700);
  color: #FFFFFF;
}

.ci-btn--primary:hover {
  background: var(--ci-red-800);
}

.ci-btn--secondary {
  background: #FFFFFF;
  color: var(--ci-red-700);
  border: 2px solid var(--ci-red-700);
}

.ci-btn--secondary:hover {
  background: var(--ci-red-50);
}

.ci-btn--ghost {
  background: transparent;
  color: var(--ci-red-700);
}

.ci-btn--ghost:hover {
  background: var(--ci-red-50);
}


/* ==========================================================================
   13. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ⚠️ v1.3 FIX: Clasele .btn și .btn-youtube folosite de template-urile homepage (§6.2, §13.1)
   dar nedefinite anterior. ci-btn--* rămân pentru componentele BEM ale temei. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--ci-radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ci-transition-fast);
  border: none;
}

.btn-youtube {
  background: #CC0000;
  color: #FFFFFF;
  min-height: 44px;  /* Touch target minim */
}

.btn-youtube:hover {
  background: #AA0000;
  color: #FFFFFF;
}

.btn-outline {
  background: #FFFFFF;
  color: var(--ci-red-700);
  border: 2px solid var(--ci-red-700);
}

.btn-outline:hover {
  background: var(--ci-red-50);
}


/* Tablet */
@media (max-width: 1024px) {
  .ci-featured-article__title {
    font-size: 20px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .ci-category-bar {
    padding: 10px 16px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  .ci-featured-article {
    padding: 20px;
  }
  
  .ci-featured-article__title {
    font-size: 18px;
  }
  
  .ci-article-card__image {
    height: 120px;
  }
}

/* Small Mobile */
@media (max-width: 375px) {
  .ci-category-pill {
    padding: 6px 12px;
    font-size: 12px;
  }
}





/* ==========================================================================
   15. VIDEO PAGE — /video (§14) ⚠️ v1.4
   ========================================================================== */

.video-page {
  padding: 32px 0 48px;
}

.video-page__header {
  margin-bottom: 24px;
}

.video-page__header h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--ci-gray-900);
  margin: 0 0 8px;
}

.video-page__header p {
  font-size: 15px;
  color: var(--ci-gray-500);
  margin: 0;
}

/* Filtre */
.video-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.video-filter-btn {
  padding: 8px 18px;
  border-radius: var(--ci-radius-full);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--ci-gray-200);
  background: #FFFFFF;
  color: var(--ci-gray-700);
  cursor: pointer;
  transition: var(--ci-transition-fast);
  min-height: 44px; /* Touch target minim */
}

.video-filter-btn:hover {
  border-color: var(--ci-red-700);
  color: var(--ci-red-700);
}

.video-filter-btn.active {
  background: var(--ci-red-700);
  color: #FFFFFF;
  border-color: var(--ci-red-700);
}

/* ⚠️ v1.7 FIX B-WP51: Comentat — elementul HTML a fost dezactivat la B-WP43 (§14.1).
   Regulile CSS creeau un gap invizibil de 20px dacă elementul era accidental readăugat.
.video-subfilters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
*/

/* Grid videoclipuri */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.video-grid__loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--ci-gray-500);
  font-size: 14px;
}

/* ⚠️ v3.2 FIX B-WP116: page-video.php (§14.1) secțiunea 1 folosește containerul
   .video-latest-grid (§16b), dar mesajele loading/empty/error folosesc .video-grid__loading
   definit doar sub .video-grid. Regulă explicită pentru context .video-latest-grid. */
.video-latest-grid .video-grid__loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: var(--ci-gray-500);
  font-size: 14px;
}

.video-grid-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--ci-transition-normal), transform var(--ci-transition-normal);
}

.video-grid-card:hover {
  box-shadow: var(--ci-shadow-md);
  transform: translateY(-2px);
}

.video-grid-card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ci-gray-100);
}

.video-grid-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-grid-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  font-size: 28px;
  color: white;
  opacity: 0;
  transition: opacity 0.2s;
}

.video-grid-card:hover .video-grid-card__play {
  opacity: 1;
}

.video-grid-card__info {
  padding: 12px 14px;
  flex: 1;
}

.video-grid-card__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--ci-radius-sm);
  font-size: 11px;
  font-weight: 600;
  background: var(--ci-red-100);
  color: var(--ci-red-800);
  margin-bottom: 6px;
}

.video-grid-card__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--ci-gray-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-grid-card__meta {
  font-size: 12px;
  color: var(--ci-gray-500);
  display: flex;
  justify-content: space-between;
}

/* Load More */
.video-load-more {
  text-align: center;
  margin-top: 32px;
}

@media (max-width: 768px) {
  .video-page {
    padding: 20px 0 40px;
  }
  
  .video-page__header h1 {
    font-size: 22px;
  }
  
  .video-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  
  .video-filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .video-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* ==========================================================================
   16. HOMEPAGE YOUTUBE — §6.2 ⚠️ v1.4
   ========================================================================== */

.homepage-youtube {
  padding: 48px 0;
  background: var(--ci-gray-50);
}

.youtube-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.youtube-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: var(--ci-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--ci-transition-normal);
}

.youtube-card:hover {
  box-shadow: var(--ci-shadow-md);
}

.youtube-card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ci-gray-100);
}

.youtube-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.youtube-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  font-size: 28px;
  color: white;
  opacity: 0;
  transition: opacity 0.2s;
}

.youtube-card:hover .youtube-card-play {
  opacity: 1;
}

.youtube-card-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 3px;
}

.youtube-card-title {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  /* ⚠️ v1.7 FIX B-WP50: Lipsea color explicit — în dark mode titlul era invizibil
     deoarece moștenirea CSS nu propagă var(--ci-gray-900) remapat. */
  color: var(--ci-gray-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.youtube-cta {
  text-align: center;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .youtube-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
  }
  
  .youtube-card {
    min-width: 260px;
    scroll-snap-align: start;
  }
}


/* ==========================================================================
   17. HOMEPAGE LATEST VIDEOS — §13.1 ⚠️ v1.5
   Stiluri consolidate din css/youtube-homepage.css.
   Acesta este template-ul RECOMANDAT (§6.2 este deprecat).
   ========================================================================== */

.homepage-latest-videos {
  padding: 48px 0;
  background: var(--ci-gray-50);
}

/* ⚠️ v1.6 FIX B-WP38: Stilurile .section-header și .section-link erau doar în
   css/youtube-homepage.css (§13.2), nu în tema consolidată. §13.1 homepage-latest-videos.php
   le folosește dar B-WP34 (v1.5) le-a omis. Fără ele: header fără flex layout,
   linkul "Vezi toate" complet nestiilizat, culoarea heading-ului lipsă în dark mode. */
.homepage-latest-videos .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.homepage-latest-videos .section-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ci-gray-900);
  margin: 0;
}

.homepage-latest-videos .section-link {
  font-size: 14px;
  color: var(--ci-red-700);
  text-decoration: none;
  font-weight: 500;
}

.homepage-latest-videos .section-link:hover {
  text-decoration: underline;
}

/* ⚠️ v2.1 FIX B-WP53: §13.2 (homepage-latest-news.php), §13.3 (homepage-featured-video.php)
   și §14.1 (page-video.php) folosesc .section-header și .section-link, dar NU au
   .homepage-latest-videos ca parent → stilurile scoped de mai sus nu se aplică.
   Rezultat: header fără flex layout, link-ul "Toate videoclipurile →" nestiilizat.
   Fix: versiuni unscoped pentru toate template-urile v5.0 care folosesc aceste clase. */
.ci-homepage-latest-news .section-header,
.ci-homepage-featured-video .section-header,
.video-page .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.ci-homepage-latest-news .section-header h2,
.ci-homepage-featured-video .section-header h2,
.video-page .section-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ci-gray-900);
  margin: 0;
}

.ci-homepage-latest-news .section-link,
.ci-homepage-featured-video .section-link,
.video-page .section-link {
  font-size: 14px;
  color: var(--ci-red-700);
  text-decoration: none;
  font-weight: 500;
}

.ci-homepage-latest-news .section-link:hover,
.ci-homepage-featured-video .section-link:hover,
.video-page .section-link:hover {
  text-decoration: underline;
}

/* Desktop: 1 featured (stânga, înalt) + 4 mici (dreapta, stivuite) */
.latest-videos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  gap: 16px;
}

.video-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: var(--ci-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--ci-transition-normal);
  border: 1px solid var(--ci-gray-200);
}

.video-card:hover {
  box-shadow: var(--ci-shadow-md);
}

.video-card--featured {
  grid-row: 1 / 5;
}

.video-card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ci-gray-100);
}

.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  font-size: 32px;
  color: white;
  opacity: 0;
  transition: opacity 0.2s;
}

.video-card:hover .video-card__play {
  opacity: 1;
}

.video-card__info {
  padding: 12px;
  flex: 1;
}

.video-card__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--ci-radius-sm);
  font-size: 11px;
  font-weight: 600;
  /* ⚠️ v1.5: Variabile brand (B-WP28 applied) */
  background: var(--ci-red-100);
  color: var(--ci-red-800);
  margin-bottom: 6px;
}

.video-card__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--ci-gray-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card--featured .video-card__title {
  font-size: 18px;
  -webkit-line-clamp: 3;
}

.video-card__meta {
  font-size: 12px;
  color: var(--ci-gray-500);
}

.video-card__channel {
  font-weight: 500;
}

.video-card__date::before {
  content: '·';
  margin: 0 4px;
}

.latest-videos-cta {
  text-align: center;
  margin-top: 24px;
}

/* Mobile: carousel horizontal */
@media (max-width: 768px) {
  .latest-videos-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .video-card {
    min-width: 280px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .video-card--featured {
    min-width: 300px;
  }
}


/* ==========================================================================
   16. HOMEPAGE SECTIONS ✨ v2.0
   ========================================================================== */

/* --- Latest News Grid --- */
.ci-homepage-latest-news { padding: 32px 0; }

.ci-latest-news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .ci-latest-news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ci-latest-news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Featured Video --- */
/* ⚠️ v2.5 FIX B-WP91: Era #F9FAFB hardcoded, dar dark mode override folosea var(--ci-gray-50).
   Inconsistență mentenanță — dacă variabila se schimbă, light mode nu se actualizează. */
.ci-homepage-featured-video { padding: 32px 0; background: var(--ci-gray-50); }

.ci-featured-video-wrapper {
  border-radius: var(--ci-radius-lg);
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--ci-gray-200);
}

.ci-featured-video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.ci-featured-video-embed .youtube-lazy-embed {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  cursor: pointer;
}

.ci-featured-video-embed .youtube-lazy-embed img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.ci-featured-video-info {
  padding: 16px 20px;
}

.ci-featured-video-info h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 8px 0 4px;
  color: var(--ci-gray-900);
}

.ci-featured-video-date {
  font-size: 13px;
  color: var(--ci-gray-500);
}

/* ⚠️ v2.4 FIX B-WP85: Badge obiectiv dedicat featured video (§13.3).
   Anterior: .video-card__badge (2px 8px, 11px) — prea mic în contextul featured
   cu heading 18px. Badge-ul dedicat are dimensiuni proporționale. */
.ci-featured-video-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--ci-radius-sm);
  font-size: 13px;
  font-weight: 600;
  background: var(--ci-red-100);
  color: var(--ci-red-800);
}

/* --- Map Widget CTA --- */
.ci-homepage-map-widget { padding: 32px 0; }

.ci-map-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: linear-gradient(135deg, var(--ci-red-800) 0%, var(--ci-red-600) 100%);
  border-radius: var(--ci-radius-lg);
  padding: 32px;
  color: #FFFFFF;
  overflow: hidden;
}

@media (min-width: 768px) {
  .ci-map-cta {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.ci-map-cta__content h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #FFFFFF;
}

.ci-map-cta__content p {
  color: rgba(255,255,255,0.85);
  margin: 0 0 20px;
  line-height: 1.6;
}

.ci-map-cta__content .ci-btn--primary {
  background: #FFFFFF;
  color: var(--ci-red-700);
}

.ci-map-cta__preview img {
  width: 100%;
  border-radius: var(--ci-radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* --- Stats Widget CTA --- */
/* ⚠️ v2.5 FIX B-WP91: Era #F9FAFB hardcoded (identic cu B-WP91 la featured video). */
.ci-homepage-stats-widget { padding: 32px 0; background: var(--ci-gray-50); }

.ci-stats-cta {
  background: #FFFFFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  padding: 32px;
  text-align: center;
}

.ci-stats-cta__header h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
}

.ci-stats-cta__header p {
  color: var(--ci-gray-500);
  margin: 0 0 24px;
}

.ci-stats-cta__numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .ci-stats-cta__numbers {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ci-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ci-stat-item__value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ci-red-700);
}

.ci-stat-item__label {
  font-size: 13px;
  color: var(--ci-gray-500);
}

/* --- Forum Recent Widget (Homepage) --- ⚠️ v3.3 FIX B-F53 (cross-module) */
/* Stiluri pentru secțiunea „Discuții recente" pe homepage.
   Widget generat de shortcode [ci_forum_recent] din plugin constructinfo-forum.
   Template part: homepage-forum-recent.php (§13.6b). */
.ci-homepage-forum-recent { padding: 32px 0; }

.ci-forum-recent-widget {
  background: #FFFFFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  overflow: hidden;
}

.ci-forum-recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ci-gray-200);
}

.ci-forum-recent-header h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.ci-forum-recent-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--ci-red-700);
  text-decoration: none;
}

.ci-forum-recent-link:hover { text-decoration: underline; }

.ci-forum-recent-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ci-gray-100);
  text-decoration: none;
  color: inherit;
  transition: var(--ci-transition-fast);
}

.ci-forum-recent-item:last-child { border-bottom: none; }
.ci-forum-recent-item:hover { background: var(--ci-gray-50); }

.ci-forum-recent-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--ci-radius-sm);
  font-size: 11px;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
}

.ci-forum-recent-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ci-gray-900);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-forum-recent-meta {
  font-size: 12px;
  color: var(--ci-gray-500);
  white-space: nowrap;
}

.ci-forum-recent-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--ci-gray-500);
  font-size: 14px;
}

@media (max-width: 767px) {
  .ci-forum-recent-title { white-space: normal; }
  .ci-forum-recent-meta { width: 100%; }
}

@media (prefers-color-scheme: dark) {
  .ci-forum-recent-widget {
    background: var(--ci-gray-800);
    border-color: var(--ci-gray-700);
  }
  .ci-forum-recent-header { border-color: var(--ci-gray-700); }
  .ci-forum-recent-item { border-color: var(--ci-gray-700); }
  .ci-forum-recent-item:hover { background: var(--ci-gray-700); }
  .ci-forum-recent-title { color: var(--ci-gray-100); }
  .ci-forum-recent-link { color: #FCA5A5; }
}

/* --- Subscribe Bar --- */
.ci-homepage-subscribe { padding: 24px 0; }

.ci-subscribe-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #0F0F0F;
  border-radius: var(--ci-radius-lg);
  color: #FFFFFF;
  font-size: 14px;
  text-align: center;
}

@media (min-width: 768px) {
  .ci-subscribe-bar {
    flex-direction: row;
    text-align: left;
    justify-content: space-between;
  }
}


/* ==========================================================================
   16b. VIDEO PAGE — GROUPED BY PROJECT ✨ v2.0
   ========================================================================== */

.video-page__latest {
  margin-bottom: 48px;
}

.video-latest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  gap: 16px;
}

@media (max-width: 768px) {
  .video-latest-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .video-latest-grid .video-card {
    min-width: 280px;
    scroll-snap-align: start;
  }
}

.video-latest-grid .video-card--featured {
  grid-row: 1 / 5;
}

.video-page__by-project {
  margin-bottom: 32px;
}

.video-page__subscribe {
  text-align: center;
  padding: 32px 0;
}

/* Video Group (collapsible) */
/* ⚠️ FIX B-WP262: Layout header — titlu stânga, contor dreapta, săgeată dreapta cu gap.
   Anterior: justify-content:space-between cu count în interiorul title → totul lipit stânga.
   Acum: flex+gap, title flex:1 împinge restul la dreapta, gap între elemente.
   ⚠️ FIX B-WP263: Titlu bold (700), contor roșu bold, fix stare :hover/:focus/:active
   (text invizibil pe mobil din cauza tap highlight + lipsă reguli explicite). */
.video-group {
  margin-bottom: 16px;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-md);
  overflow: hidden;
}

.video-group__header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  background: var(--ci-gray-50);
  border: none;
  cursor: pointer;
  font-size: 16px;
  text-align: left;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

.video-group__header:hover {
  background: var(--ci-gray-100);
}

.video-group__header:focus,
.video-group__header:focus-visible {
  outline: 2px solid var(--ci-red-700);
  outline-offset: -2px;
  background: var(--ci-gray-100);
}

.video-group__header:active {
  background: var(--ci-gray-100);
}

/* ⚠️ FIX B-WP262: .video-group__title lipsea complet din CSS — span-ul folosit în
   page-video.php (după B-WP261) nu primea stiluri → text faded/invizibil în light mode.
   Adăugat reguli identice cu h3 (păstrat h3 pentru fallback dacă există variante vechi).
   ⚠️ FIX B-WP263: font-weight 600 → 700 (bold cerut). */
.video-group__header h3,
.video-group__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ci-gray-900);
  flex: 1;
  min-width: 0;
}

/* ⚠️ FIX B-WP263: Contor roșu + bold (anterior gri 400). */
.video-group__count {
  font-weight: 700;
  font-size: 14px;
  color: var(--ci-red-700);
  flex-shrink: 0;
}

.video-group__toggle {
  transition: transform 0.2s;
  color: var(--ci-gray-400);
  flex-shrink: 0;
}

/* ⚠️ FIX B-WP263: Buton "Încarcă toate" — apare sub grid când grupul are >6 video-uri. */
.video-group__load-more {
  display: block;
  margin: 0 16px 16px;
  padding: 10px 20px;
  background: #FFFFFF;
  color: var(--ci-red-700);
  border: 1px solid var(--ci-red-700);
  border-radius: var(--ci-radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: var(--ci-transition-fast);
  -webkit-tap-highlight-color: transparent;
}

/* ⚠️ FIX B-WP264: Buton "Încarcă toate" ascuns când grupul e colapsat. */
.video-group[data-expanded="false"] .video-group__load-more {
  display: none;
}

.video-group__load-more:hover,
.video-group__load-more:focus-visible {
  background: var(--ci-red-700);
  color: #FFFFFF;
  outline: none;
}

.video-group[data-expanded="true"] .video-group__toggle {
  transform: rotate(180deg);
}

.video-group__grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 16px;
}

.video-group[data-expanded="true"] .video-group__grid {
  display: grid;
}


/* ==========================================================================
   17. PAGINA CIFRE — DASHBOARD STATISTICI ✨ v2.0
   ========================================================================== */

.cifre-page { padding: 32px 0; }

.cifre-page__header {
  text-align: center;
  margin-bottom: 32px;
}

.cifre-page__header h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
}

.cifre-page__header p {
  color: var(--ci-gray-500);
  max-width: 600px;
  margin: 0 auto;
}

/* Filtre Cifre */
.cifre-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 32px;
}

.cifre-filter-btn {
  padding: 8px 20px;
  border-radius: 999px;
  border: 2px solid var(--ci-gray-200);
  background: #FFFFFF;
  color: var(--ci-gray-700);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--ci-transition-fast);
  min-height: 44px;
}

.cifre-filter-btn.active,
.cifre-filter-btn:hover {
  border-color: var(--ci-red-700);
  background: var(--ci-red-700);
  color: #FFFFFF;
}

/* KPI Cards */
.cifre-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .cifre-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cifre-kpi-card {
  background: #FFFFFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  padding: 24px;
  text-align: center;
  border-top: 4px solid var(--ci-red-700);
}

.cifre-kpi-card--green { border-top-color: #22C55E; }
.cifre-kpi-card--blue { border-top-color: #3B82F6; }
.cifre-kpi-card--amber { border-top-color: #F59E0B; }

.cifre-kpi-card__value {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: var(--ci-gray-900);
  margin-bottom: 4px;
}

.cifre-kpi-card__label {
  font-size: 13px;
  color: var(--ci-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Sections */
.cifre-section {
  margin-bottom: 40px;
}

.cifre-section h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
}

.cifre-chart-container {
  background: #FFFFFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  padding: 24px;
}

.cifre-chart-container--small {
  max-width: 400px;
  margin: 0 auto;
}

/* Progress bars */
.cifre-progress-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cifre-progress-item {
  background: #FFFFFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-md);
  padding: 16px;
}

.cifre-progress-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.cifre-progress-item__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ci-gray-900);
}

.cifre-progress-item__percent {
  font-weight: 700;
  font-size: 16px;
}

.cifre-progress-item__bar {
  height: 12px;
  background: var(--ci-gray-100);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
}

.cifre-progress-item__fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.6s ease;
}

.cifre-progress-item__km {
  font-size: 12px;
  color: var(--ci-gray-500);
}

/* Table */
.cifre-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.cifre-table-header h2 {
  margin: 0;
}

.cifre-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
}

.cifre-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.cifre-table th {
  background: var(--ci-gray-50);
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--ci-gray-700);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid var(--ci-gray-200);
}

.cifre-table th:hover {
  background: var(--ci-gray-100);
}

.cifre-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ci-gray-100);
  color: var(--ci-gray-900);
}

.cifre-table tr:hover td {
  background: var(--ci-gray-50);
}

.cifre-table-progress {
  display: inline-block;
  width: 60px;
  height: 6px;
  background: var(--ci-gray-100);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 6px;
}

.cifre-table-progress__fill {
  height: 100%;
  background: #22C55E;
  border-radius: 3px;
}

/* CTA Hartă */
.cifre-map-cta {
  text-align: center;
  padding: 32px;
  background: var(--ci-gray-50);
  border-radius: var(--ci-radius-lg);
  margin-top: 32px;
}

.cifre-map-cta p {
  font-size: 16px;
  color: var(--ci-gray-700);
  margin: 0 0 16px;
}


/* ==========================================================================
   17b. RELATED VIDEOS PER ARTICOL (§20.4) ⚠️ v2.2 FIX B-WP67
   Template-ul single.php folosește clasele ci-related-videos* dar CSS-ul
   nu era definit — secțiunea se randa complet nestiilizată.
   ========================================================================== */

.ci-related-videos {
  margin: 32px 0;
  padding: 24px;
  background: var(--ci-gray-50);
  border-radius: var(--ci-radius-lg);
  border: 1px solid var(--ci-gray-200);
}

.ci-related-videos h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ci-gray-900);
  margin: 0 0 16px;
}

.ci-related-videos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .ci-related-videos__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .ci-related-videos {
    padding: 16px;
    margin: 24px 0;
  }
}

.ci-related-video-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--ci-radius-md);
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--ci-gray-200);
  transition: box-shadow var(--ci-transition-normal), transform var(--ci-transition-normal);
}

.ci-related-video-card:hover {
  box-shadow: var(--ci-shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.ci-related-video-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--ci-gray-100);
}

.ci-related-video-card__title {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ci-gray-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ==========================================================================
   17.7 PAGINA CIFRE v2 — DASHBOARD CU 10 SECȚIUNI (spec 22 §0.1, §5.1)
   ========================================================================== */

/* Wrapper pagină nouă — namespace izolat de .cifre-page (v1 pentru rollback) */
.cifre-v2 {
  font-family: var(--ci-font-sans);
  background: var(--ci-gray-50);
  color: var(--ci-gray-900);
  padding: 32px 0 64px;
}

.cifre-v2 .container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* Header */
.cifre-v2__header { margin-bottom: 32px; }

.cifre-v2__breadcrumb {
  font-size: 13px;
  color: var(--ci-gray-500);
  margin-bottom: 12px;
}
.cifre-v2__breadcrumb a { color: var(--ci-red-700); text-decoration: none; }
.cifre-v2__breadcrumb a:hover { text-decoration: underline; }

.cifre-v2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ci-red-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.cifre-v2__eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--ci-red-700);
}

.cifre-v2__title {
  font-family: var(--ci-font-display);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ci-gray-900);
  margin: 0 0 8px;
}
.cifre-v2__title .accent {
  font-style: italic;
  color: var(--ci-red-700);
}

.cifre-v2__subtitle {
  font-size: 15px;
  color: var(--ci-gray-500);
  margin: 0 0 20px;
}

.cifre-v2__sync-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ci-gray-500);
  background: #FFF;
  border: 1px solid var(--ci-gray-200);
  padding: 6px 12px;
  border-radius: var(--ci-radius-full);
}
.cifre-v2__sync-info .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ci-emerald-600);
  box-shadow: 0 0 0 3px rgba(5,150,105,0.15);
}

/* Filter tabs globale */
.cifre-v2__tabs {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 20px 0 0;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.cifre-v2__tab {
  flex: 0 0 auto;
  padding: 10px 18px;
  border-radius: var(--ci-radius-full);
  border: 1.5px solid var(--ci-gray-200);
  background: #FFF;
  color: var(--ci-gray-700);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ci-transition-fast);
  white-space: nowrap;
}
.cifre-v2__tab:hover { border-color: var(--ci-red-600); color: var(--ci-red-700); }
.cifre-v2__tab.active {
  background: var(--ci-red-700);
  border-color: var(--ci-red-700);
  color: #FFF;
}
.cifre-v2__tab .label-mobile { display: none; }
@media (max-width: 480px) {
  .cifre-v2__tab .label-desktop { display: none; }
  .cifre-v2__tab .label-mobile { display: inline; }
}

/* Generic section + section title */
.cifre-v2__section { margin-top: 40px; }
.cifre-v2__section-title {
  font-family: var(--ci-font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ci-gray-900);
  margin: 0 0 16px;
}
.cifre-v2__section-sub {
  font-size: 14px;
  color: var(--ci-gray-500);
  margin: -8px 0 16px;
}

/* §2 — KPI Overview */
.cifre-v2__kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 768px) {
  .cifre-v2__kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

.cifre-v2__kpi-card {
  background: #FFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  padding: 18px 16px 16px;
  position: relative;
  overflow: hidden;
}
.cifre-v2__kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--kpi-color, var(--ci-red-700));
}
.cifre-v2__kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ci-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cifre-v2__kpi-value {
  font-family: var(--ci-font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--ci-gray-900);
  line-height: 1;
  margin: 6px 0 4px;
}
.cifre-v2__kpi-value .unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--ci-gray-500);
}
.cifre-v2__kpi-delta {
  font-size: 12px;
  font-weight: 600;
}
.cifre-v2__kpi-delta.up { color: var(--ci-emerald-600); }
.cifre-v2__kpi-delta.down { color: var(--ci-red-600); }
.cifre-v2__kpi-delta.flat { color: var(--ci-gray-400); }

/* §3 — Year strip */
.cifre-v2__year-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .cifre-v2__year-strip { grid-template-columns: repeat(4, 1fr); }
}
.cifre-v2__year-card {
  background: #FFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  padding: 14px;
  position: relative;
}
.cifre-v2__year-card .year {
  font-family: var(--ci-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ci-gray-700);
}
.cifre-v2__year-card .km-total {
  font-size: 20px;
  font-weight: 700;
  color: var(--ci-gray-900);
}
.cifre-v2__year-card .split {
  font-size: 12px;
  color: var(--ci-gray-500);
  margin-top: 4px;
}
.cifre-v2__year-card .badge {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--ci-radius-full);
  letter-spacing: 0.04em;
}
.cifre-v2__year-card .badge--now {
  background: var(--ci-red-700);
  color: #FFF;
}
.cifre-v2__year-card .badge--est {
  background: transparent;
  color: var(--ci-yellow-500);
  border: 1px dashed var(--ci-yellow-500);
}

/* Chart container generic */
.cifre-v2__chart-card {
  background: #FFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  padding: 20px 16px;
}
.cifre-v2__chart-card h3 {
  font-family: var(--ci-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ci-gray-900);
  margin: 0 0 4px;
}
.cifre-v2__chart-card .chart-sub {
  font-size: 13px;
  color: var(--ci-gray-500);
  margin: 0 0 16px;
  font-style: italic;
  font-family: var(--ci-font-display);
}
.cifre-v2__canvas-wrap {
  position: relative;
  height: 300px;
}
.cifre-v2__canvas-wrap canvas { max-width: 100% !important; height: auto !important; }

/* §4 — Ce ne așteaptă: filtru local */
.cifre-v2__chart-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cifre-v2__chart-filter button {
  padding: 6px 12px;
  border-radius: var(--ci-radius-full);
  border: 1.5px solid var(--ci-gray-200);
  background: #FFF;
  color: var(--ci-gray-700);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cifre-v2__chart-filter button .chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--chip-color, var(--ci-gray-400));
}
.cifre-v2__chart-filter button[data-tip="autostrazi"] { --chip-color: var(--ci-blue-600); }
.cifre-v2__chart-filter button[data-tip="drumuri-expres"] { --chip-color: var(--ci-emerald-600); }
.cifre-v2__chart-filter button[data-tip="centuri"] { --chip-color: var(--ci-orange-600); }
.cifre-v2__chart-filter button.active {
  background: var(--ci-gray-900);
  border-color: var(--ci-gray-900);
  color: #FFF;
}

/* §5 — Charts row */
.cifre-v2__charts-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .cifre-v2__charts-row { grid-template-columns: 1fr 1fr; }
  .cifre-v2__chart-full { grid-column: 1 / -1; }
}

/* Exec legend */
.cifre-v2__exec-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  font-size: 12px;
}
.cifre-v2__exec-legend .item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ci-gray-500);
}
.cifre-v2__exec-legend .item::before {
  content: '';
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--ex-color, var(--ci-gray-400));
}
.cifre-v2__exec-legend .item-label { font-weight: 600; color: var(--ci-gray-700); }

/* §6 — Progress bars */
.cifre-v2__progress-list {
  background: #FFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  padding: 16px;
}
.cifre-v2__progress-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--ci-gray-100);
}
.cifre-v2__progress-row:last-child { border-bottom: none; }
.cifre-v2__progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 12px;
}
.cifre-v2__progress-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ci-gray-900);
}
.cifre-v2__progress-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--progress-color, var(--ci-gray-700));
  white-space: nowrap;
}
.cifre-v2__progress-bar {
  height: 8px;
  background: var(--ci-gray-100);
  border-radius: var(--ci-radius-full);
  overflow: hidden;
  position: relative;
}
.cifre-v2__progress-fill {
  height: 100%;
  background: var(--progress-color, var(--ci-gray-400));
  border-radius: var(--ci-radius-full);
  transition: width 0.8s ease;
  width: 0;
}
.cifre-v2__progress-row[data-tip="autostrazi"] { --progress-color: var(--ci-blue-600); }
.cifre-v2__progress-row[data-tip="drumuri-expres"] { --progress-color: var(--ci-emerald-600); }
.cifre-v2__progress-row[data-tip="centuri"] { --progress-color: var(--ci-orange-600); }

/* §7 — Tabel */
.cifre-v2__table-wrap {
  background: #FFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  overflow: hidden;
}
.cifre-v2__table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ci-gray-200);
  flex-wrap: wrap;
  gap: 8px;
}
.cifre-v2__table-search {
  flex: 1;
  min-width: 180px;
  padding: 8px 12px;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-md);
  font-size: 13px;
}
.cifre-v2__table-export {
  padding: 8px 14px;
  background: var(--ci-red-700);
  color: #FFF;
  border: none;
  border-radius: var(--ci-radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cifre-v2__table-export:hover { background: var(--ci-red-800); }
.cifre-v2__table-scroll { overflow-x: auto; }
.cifre-v2__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}
.cifre-v2__table th,
.cifre-v2__table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--ci-gray-100);
}
.cifre-v2__table th {
  background: var(--ci-gray-50);
  font-weight: 700;
  color: var(--ci-gray-700);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.cifre-v2__table th:hover { background: var(--ci-gray-100); }
.cifre-v2__table th .sort-arrow {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.4;
}
.cifre-v2__table th.sorted .sort-arrow { opacity: 1; }
.cifre-v2__table tbody tr:hover { background: var(--ci-gray-50); }

/* Tip badges /cifre/ — paletă funcțională (NU brand --ci-cat-*) */
.tip-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--ci-radius-full);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tip-badge.autostrazi {
  background: var(--ci-tip-autostrazi-bg);
  color: var(--ci-tip-autostrazi-text);
}
.tip-badge.drumuri-expres {
  background: var(--ci-tip-expres-bg);
  color: var(--ci-tip-expres-text);
}
.tip-badge.centuri {
  background: var(--ci-tip-centuri-bg);
  color: var(--ci-tip-centuri-text);
}

/* §8, §9 — secțiuni „de hârtie" */
.cifre-v2__paper-section .cifre-v2__section-title {
  color: var(--ci-red-900);
}
.cifre-v2__paper-section .cifre-v2__section-title::before {
  content: '📜 ';
  margin-right: 4px;
}
.cifre-v2__paper-section .cifre-v2__kpi-card { --kpi-color: var(--ci-red-700); }

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--ci-radius-full);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.status-badge.planificat { background: var(--ci-gray-100); color: var(--ci-gray-700); }
.status-badge.in-licitatie { background: #FEF3C7; color: #92400E; }
.status-badge.contract-semnat { background: var(--ci-red-100); color: var(--ci-red-800); }

/* §10 — CTA hartă */
.cifre-v2__cta {
  margin-top: 48px;
  background: linear-gradient(135deg, var(--ci-red-700), var(--ci-red-800));
  color: #FFF;
  border-radius: var(--ci-radius-xl);
  padding: 32px 24px;
  text-align: center;
}
.cifre-v2__cta h3 {
  font-family: var(--ci-font-display);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #FFF;
}
.cifre-v2__cta p {
  margin: 0 0 16px;
  opacity: 0.9;
}
.cifre-v2__cta .ci-btn {
  display: inline-block;
  background: #FFF;
  color: var(--ci-red-700);
  padding: 12px 24px;
  border-radius: var(--ci-radius-md);
  font-weight: 700;
  text-decoration: none;
  transition: var(--ci-transition-fast);
}
.cifre-v2__cta .ci-btn:hover {
  background: var(--ci-gray-100);
  transform: translateY(-1px);
}

/* Empty + error states */
.cifre-v2__empty,
.cifre-v2__error {
  background: #FFF;
  border: 1px dashed var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  padding: 48px 24px;
  text-align: center;
  color: var(--ci-gray-500);
}
.cifre-v2__error { border-color: var(--ci-red-600); color: var(--ci-red-700); }


/* ==========================================================================
   17.8 HOMEPAGE WIDGET CIFRE v2 — 2 chart-uri compacte (spec 22 §5.2)
   ========================================================================== */

.ci-homepage-stats-widget {
  font-family: var(--ci-font-sans);
  background: #FFF;
  padding: 40px 0;
  position: relative;
}
.ci-homepage-stats-widget::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--ci-blue-600) 0%, var(--ci-blue-600) 33.33%,
    var(--ci-emerald-600) 33.33%, var(--ci-emerald-600) 66.66%,
    var(--ci-orange-600) 66.66%, var(--ci-orange-600) 100%);
}
.ci-homepage-stats-widget .container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

.ci-hsw-header { text-align: center; margin-bottom: 24px; }
.ci-hsw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ci-red-50);
  border: 1px solid var(--ci-red-border);
  color: var(--ci-red-700);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: var(--ci-radius-full);
  margin-bottom: 12px;
}
.ci-hsw-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ci-emerald-600);
  animation: ci-hsw-pulse 1.6s ease-in-out infinite;
}
@keyframes ci-hsw-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5,150,105,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(5,150,105,0); }
}

.ci-hsw-title {
  font-family: var(--ci-font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--ci-gray-900);
  margin: 0 0 8px;
  line-height: 1.15;
}
.ci-hsw-title .emoji { margin-right: 4px; }
.ci-hsw-title .accent { color: var(--ci-red-700); font-style: italic; }
.ci-hsw-subtitle {
  font-size: 15px;
  color: var(--ci-gray-500);
  margin: 0 auto;
  max-width: 600px;
}

.ci-hsw-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}
@media (min-width: 768px) {
  .ci-hsw-charts { grid-template-columns: 1fr 1fr; gap: 20px; }
}

.ci-hsw-chart-card {
  background: var(--ci-gray-50);
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  padding: 18px 16px;
}
.ci-hsw-chart-card h3 {
  font-family: var(--ci-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ci-gray-900);
  margin: 0 0 4px;
}
.ci-hsw-chart-sub {
  font-family: var(--ci-font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ci-gray-500);
  margin: 0 0 12px;
}

.ci-hsw-canvas-wrap {
  position: relative;
  height: 220px;
}
.ci-hsw-canvas-wrap--tall { height: 300px; }
@media (max-width: 767px) {
  .ci-hsw-canvas-wrap { height: 200px; }
  .ci-hsw-canvas-wrap--tall { height: 240px; }
}
.ci-hsw-canvas-wrap canvas { max-width: 100% !important; height: auto !important; }

/* Filter local widget */
.ci-hsw-local-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ci-hsw-local-filter button {
  padding: 5px 10px;
  border-radius: var(--ci-radius-full);
  border: 1.5px solid var(--ci-gray-200);
  background: #FFF;
  color: var(--ci-gray-700);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ci-hsw-local-filter button .chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--chip-color, var(--ci-gray-400));
}
.ci-hsw-local-filter button[data-tip="autostrazi"] { --chip-color: var(--ci-blue-600); }
.ci-hsw-local-filter button[data-tip="drumuri-expres"] { --chip-color: var(--ci-emerald-600); }
.ci-hsw-local-filter button[data-tip="centuri"] { --chip-color: var(--ci-orange-600); }
.ci-hsw-local-filter button.active {
  background: var(--ci-gray-900);
  border-color: var(--ci-gray-900);
  color: #FFF;
}

/* Exec legend widget */
.ci-hsw-exec-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  font-size: 11px;
}
.ci-hsw-exec-legend .item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ci-gray-500);
  font-weight: 600;
}
.ci-hsw-exec-legend .item::before {
  content: '';
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--ex-color, var(--ci-gray-400));
}

/* CTA widget */
.ci-hsw-cta { text-align: center; margin-top: 24px; }
.ci-btn--outline-red {
  display: inline-block;
  position: relative;
  padding: 12px 28px;
  border: 2px solid var(--ci-red-700);
  border-radius: var(--ci-radius-md);
  color: var(--ci-red-700);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  background: transparent;
  overflow: hidden;
  z-index: 1;
  transition: color var(--ci-transition-fast);
}
.ci-btn--outline-red::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ci-red-700);
  transform: translateX(-100%);
  transition: transform var(--ci-transition-normal);
  z-index: -1;
}
.ci-btn--outline-red:hover { color: #FFF; }
.ci-btn--outline-red:hover::before { transform: translateX(0); }

/* Empty state widget */
.ci-hsw-empty {
  background: var(--ci-gray-50);
  border: 1px dashed var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  padding: 32px 16px;
  text-align: center;
  color: var(--ci-gray-500);
  font-size: 14px;
  margin-top: 16px;
}


/* ==========================================================================
   17b. SINGLE ARTICLE — BREADCRUMBS, SHARE, RELATED ✨ FIX B-AP100/101/102
   ⚠️ Aceste clase erau folosite în template-uri dar NU aveau CSS definit
   → randare browser default oribilă (ol cu numere, butoane gri default).
   ========================================================================== */

/* --- Breadcrumbs (B-AP100) --- */
.ci-single-breadcrumbs {
  margin: 16px 0 12px;
  font-size: 13px;
  color: var(--ci-gray-500);
}

.ci-single-breadcrumbs ol,
.ci-single-breadcrumbs ul,
.ci-breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ci-single-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.ci-single-breadcrumbs a {
  color: var(--ci-red-700);
  text-decoration: none;
}

.ci-single-breadcrumbs a:hover {
  text-decoration: underline;
}

.ci-breadcrumb-sep {
  color: var(--ci-gray-400);
}

.ci-breadcrumb-current {
  color: var(--ci-gray-700);
}

/* --- Share Buttons (B-AP102) --- */
.ci-share-buttons {
  margin: 32px 0;
  padding: 16px;
  background: var(--ci-gray-50);
  border-radius: var(--ci-radius-md);
  border: 1px solid var(--ci-gray-200);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ci-share-buttons__label {
  font-weight: 600;
  font-size: 14px;
  color: var(--ci-gray-900);
  margin-right: 8px;
}

.ci-share-buttons__fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ci-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 40px;
  border-radius: var(--ci-radius-md);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  color: #FFFFFF;
}

.ci-share-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  text-decoration: none;
  color: #FFFFFF;
}

.ci-share-btn__icon {
  flex-shrink: 0;
}

.ci-share-btn--whatsapp { background: #25D366; }
.ci-share-btn--facebook { background: #1877F2; }
.ci-share-btn--twitter  { background: #000000; }
.ci-share-btn--native   { background: var(--ci-red-700); }

.ci-share-btn--copy {
  background: var(--ci-gray-700);
}

.ci-share-btn--copied {
  background: #059669 !important;
}

@media (max-width: 480px) {
  .ci-share-buttons { padding: 12px; }
  .ci-share-buttons__label { width: 100%; margin-bottom: 4px; }
  .ci-share-btn { padding: 8px 10px; font-size: 12px; }
  .ci-share-btn__label { display: none; }
  .ci-share-btn { padding: 10px; min-width: 40px; justify-content: center; }
}

/* --- Related Articles Text-Only (B-AP101) --- */
.ci-related-articles {
  margin: 40px 0 24px;
}

.ci-related-articles__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ci-gray-900);
  margin: 0 0 16px;
}

.ci-related-articles--text .ci-related-articles__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .ci-related-articles--text .ci-related-articles__grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

.ci-related-card-text {
  display: block;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-md);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, transform 0.15s;
}

.ci-related-card-text:hover {
  box-shadow: var(--ci-shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.ci-related-card-text__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ci-gray-900);
  margin: 8px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ci-related-card-text__excerpt {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ci-gray-700);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ci-related-card-text__meta {
  font-size: 12px;
  color: var(--ci-gray-500);
}

/* --- Dark mode pentru cele de mai sus --- */
@media (prefers-color-scheme: dark) {
  .ci-share-buttons {
    background: var(--ci-gray-100);
    border-color: var(--ci-gray-200);
  }
  .ci-share-buttons__label { color: var(--ci-gray-900); }

  .ci-related-card-text {
    background: var(--ci-gray-100);
    border-color: var(--ci-gray-200);
  }
  .ci-related-card-text__title { color: var(--ci-gray-900); }
  .ci-related-card-text__excerpt { color: var(--ci-gray-700); }

  .ci-breadcrumb-current { color: var(--ci-gray-700); }
}


/* ==========================================================================
   18. PRINT STYLES
   ========================================================================== */

@media print {
  .ci-bottom-nav,
  .ci-youtube-widget,
  .ci-map-widget {
    display: none !important;
  }
  
  .ci-featured-article {
    background: none !important;
    color: #000000 !important;
    border: 2px solid #000000;
  }
  
  .ci-featured-article__title,
  .ci-featured-article__excerpt {
    color: #000000 !important;
  }
}


/* ==========================================================================
   13b. SECTION PILL HEADER (universal, full-width) — v3.4 redesign
   --------------------------------------------------------------------------
   Înlocuiește header-ele heterogene de secțiuni cu un pill roșu uniform
   pe toată lățimea containerului. Folosit în:
   - homepage-stats-widget.php (în loc de .ci-hsw-header)
   - homepage-news-grid.php (în loc de .ci-news-section__header)
   - homepage-video-grid.php (în loc de .ci-video-grid-section__header)
   - homepage-forum-recent.php (în loc de .ci-forum-recent-header)
   - page-video.php (în loc de .section-header — 2 instanțe)
   - page-cifre.php (în loc de .cifre-v2__section-title — 7 instanțe)
   
   Markup standard:
     <div class="ci-section-pill-wrap">
       <span class="ci-section-pill">📊 Titlu secțiune</span>
       <span class="ci-section-pill__sub">Subtitlu opțional</span>
     </div>
     [...conținut secțiune...]
     <div class="ci-section-pill-link"><a href="...">Toate X →</a></div>
   ========================================================================== */

.ci-section-pill-wrap {
  margin: 48px 0 28px;
}

.ci-section-pill {
  display: block;
  width: 100%;
  background: var(--ci-red-700);
  color: #FFFFFF;
  padding: 18px 32px;
  border-radius: 9999px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.3px;
  box-shadow: 0 3px 16px rgba(185, 28, 28, 0.3);
  box-sizing: border-box;
  margin: 0;
}

.ci-section-pill__sub {
  display: block;
  color: var(--ci-gray-500);
  font-size: 14px;
  font-weight: 400;
  margin-top: 12px;
  text-align: center;
  line-height: 1.5;
}

.ci-section-pill-link {
  text-align: center;
  margin: 20px 0 8px;
}

.ci-section-pill-link a {
  color: var(--ci-red-700);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.ci-section-pill-link a:hover {
  text-decoration: underline;
}

/* Mobile (≤768px): pill mai compact */
@media (max-width: 768px) {
  .ci-section-pill-wrap {
    margin: 28px 0 18px;
  }
  .ci-section-pill {
    padding: 12px 18px;
    font-size: 15px;
    line-height: 1.3;
    box-shadow: 0 2px 12px rgba(185, 28, 28, 0.3);
  }
  .ci-section-pill__sub {
    font-size: 12px;
    margin: 8px 16px 0;
  }
  .ci-section-pill-link {
    margin: 14px 0 4px;
  }
  .ci-section-pill-link a {
    font-size: 13px;
  }
}


/* ==========================================================================
   14. DARK MODE SUPPORT (OPTIONAL)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --ci-gray-900: #F9FAFB;
    --ci-gray-700: #E5E7EB;
    --ci-gray-500: #9CA3AF;
    --ci-gray-400: #6B7280;
    --ci-gray-200: #374151;
    --ci-gray-100: #1F2937;
    --ci-gray-50: #111827;
    
    /* ⚠️ v1.1 — Badge-uri categorii adaptate dark mode */
    --ci-cat-autostrazi-bg: rgba(254, 226, 226, 0.15);
    --ci-cat-autostrazi-text: #FCA5A5;
    
    /* ⚠️ v2.3 FIX B-WP75: Dark mode variabile noi categorii (consistent cu autostrazi) */
    --ci-cat-drumuri-expres-bg: rgba(219, 234, 254, 0.15);
    --ci-cat-drumuri-expres-text: #93C5FD;
    --ci-cat-centuri-bg: rgba(209, 250, 229, 0.15);
    --ci-cat-centuri-text: #6EE7B7;
    --ci-cat-alte-proiecte-bg: rgba(254, 243, 199, 0.15);
    --ci-cat-alte-proiecte-text: #FCD34D;
    --ci-cat-politica-bg: rgba(241, 245, 249, 0.15);
    --ci-cat-politica-text: #94A3B8;
    
    /* ⚠️ v2.3 FIX B-WP77: Categorii VECHI dark mode — nefolosite, comentat.
    --ci-cat-cai-ferate-bg: rgba(219, 234, 254, 0.15);
    --ci-cat-cai-ferate-text: #93C5FD;
    --ci-cat-licitatii-bg: rgba(254, 243, 199, 0.15);
    --ci-cat-licitatii-text: #FCD34D;
    --ci-cat-aeroporturi-bg: rgba(224, 231, 255, 0.15);
    --ci-cat-aeroporturi-text: #A5B4FC;
    --ci-cat-transport-urban-bg: rgba(209, 250, 229, 0.15);
    --ci-cat-transport-urban-text: #6EE7B7;
    --ci-cat-poduri-pasaje-bg: rgba(254, 226, 226, 0.15);
    --ci-cat-poduri-pasaje-text: #FCA5A5;
    --ci-cat-drumuri-nationale-bg: rgba(243, 232, 255, 0.15);
    --ci-cat-drumuri-nationale-text: #C4B5FD;
    --ci-cat-analize-bg: rgba(241, 245, 249, 0.15);
    --ci-cat-analize-text: #94A3B8;
    */
  }
  
  /* ⚠️ v2.1 FIX B-WP54: Categorii noi v2.0 (drumuri-expres, centuri, alte-proiecte, politica)
     foloseau hex hardcoded, nu variabile CSS → nu se adaptau la dark mode.
     ⚠️ v2.3 FIX B-WP75: Acum badge-urile folosesc variabile CSS (--ci-cat-drumuri-expres-bg etc.)
     care se remapează automat în dark mode → override-urile explicite nu mai sunt necesare.
     Blocul de mai jos este păstrat comentat pentru referință.
  .ci-badge--drumuri-expres { background: rgba(...); color: #93C5FD; }
  .ci-badge--centuri { background: rgba(...); color: #6EE7B7; }
  .ci-badge--alte-proiecte { background: rgba(...); color: #FCD34D; }
  .ci-badge--politica { background: rgba(...); color: #94A3B8; }
  */
  
  .ci-article-card,
  .ci-map-widget {
    background: var(--ci-gray-100);
    border-color: var(--ci-gray-200);
  }
  
  /* ⚠️ v2.4 FIX B-WP83: Dark mode lipsă pentru .ci-map-widget__preview și __legend.
     var(--ci-red-50) (#FEF2F2) nu e remapată → roz deschis pe dark background.
     .ci-map-widget__legend avea #FFFFFF hardcoded → casetă albă pe dark. */
  .ci-map-widget__preview {
    background: var(--ci-gray-200);
  }
  
  .ci-map-widget__legend {
    background: var(--ci-gray-100);
    color: var(--ci-gray-700);
  }
  
  .ci-category-pill--inactive {
    background: var(--ci-gray-100);
    color: var(--ci-red-100);
  }
  
  /* Status badges: fundal semi-transparent în dark mode */
  .ci-status--executie { background: rgba(254, 226, 226, 0.15); color: #FCA5A5; }
  .ci-status--licitatie { background: rgba(254, 243, 199, 0.15); color: #FCD34D; }
  .ci-status--finalizat { background: rgba(209, 250, 229, 0.15); color: #6EE7B7; }
  .ci-status--planificat { background: rgba(219, 234, 254, 0.15); color: #93C5FD; }
  .ci-status--contract-semnat { background: rgba(255, 251, 235, 0.15); color: #FCD34D; }
  .ci-status--suspendat { background: rgba(254, 226, 226, 0.15); color: #FCA5A5; }
  .ci-status--anulat { background: rgba(243, 244, 246, 0.15); color: #9CA3AF; }
  
  .ci-bottom-nav {
    background: #1F2937;
    border-color: var(--ci-gray-200);
  }
  
  /* ⚠️ v3.1 FIX B-WP113: Bottom nav text colors dark mode — background-ul fusese fixat
     (#1F2937) dar culorile text nu. Active: var(--ci-red-700) = #B91C1C pe #1F2937
     → contrast ~1.5:1 (aproape invizibil). Inactive: var(--ci-gray-400) remapată la
     #6B7280 pe #1F2937 → contrast ~2.9:1 (sub WCAG AA 4.5:1).
     Fix: active → #FCA5A5 (contrast ~8:1), inactive → var(--ci-gray-500) (#9CA3AF, ~5:1). */
  .ci-bottom-nav__item {
    color: var(--ci-gray-500);
  }
  
  .ci-bottom-nav__item--active {
    color: #FCA5A5;
  }
  
  /* ⚠️ v1.4 FIX B-WP27: .btn-outline dark mode — background și hover adaptate */
  .btn-outline {
    background: var(--ci-gray-100);
    color: var(--ci-red-100);
    border-color: var(--ci-red-100);
  }
  
  .btn-outline:hover {
    background: var(--ci-gray-200);
  }
  
  /* ⚠️ v2.8 FIX B-WP104: .ci-btn--secondary dark mode — background #FFFFFF hardcoded
     → buton alb strident pe fundal întunecat. Aceeași clasă de bug ca B-WP27 (.btn-outline)
     dar pentru varianta BEM introdusă la v2.0. Hover var(--ci-red-50) neremapată → roz. */
  .ci-btn--secondary {
    background: var(--ci-gray-100);
    color: var(--ci-red-100);
    border-color: var(--ci-red-100);
  }
  
  .ci-btn--secondary:hover {
    background: var(--ci-gray-200);
  }
  
  /* ⚠️ v2.8 FIX B-WP105: .ci-btn--ghost dark mode — color var(--ci-red-700) = #B91C1C
     pe fundal #1F2937 → contrast ~2.5:1 (sub WCAG AA 4.5:1). Hover: var(--ci-red-50)
     neremapată → roz strident. */
  .ci-btn--ghost {
    color: var(--ci-red-100);
  }
  
  .ci-btn--ghost:hover {
    background: rgba(254, 226, 226, 0.15);
  }
  
  /* ⚠️ v2.9 FIX B-WP107: .ci-stat-item__value dark mode — color: var(--ci-red-700) = #B91C1C
     pe fundal var(--ci-gray-100) = #1F2937 → contrast ~2.5:1 (sub WCAG AA 4.5:1).
     Numerele KPI aproape invizibile. B-WP57 a fixat background-urile containerelor dar nu
     și culorile text. Fix: #FCA5A5 (contrast ~8:1 pe #1F2937). */
  .ci-stat-item__value {
    color: #FCA5A5;
  }
  
  /* ⚠️ v2.9 FIX B-WP108: .section-link și .ci-map-widget__link dark mode — ambele au
     color: var(--ci-red-700) nereremapat → contrast ~2.5:1 pe fundal întunecat.
     Aceeași clasă de bug ca B-WP105 (.ci-btn--ghost), dar omisă pentru link-uri.
     Afectează: "Toate știrile →", "Toate videoclipurile →", "Vezi harta →". */
  .section-link,
  .ci-map-widget__link {
    color: var(--ci-red-100);
  }
  
  .section-link:hover,
  .ci-map-widget__link:hover {
    color: #FFFFFF;
  }
  
  /* ⚠️ v1.4: Video page dark mode */
  .video-filter-btn {
    background: var(--ci-gray-100);
    color: var(--ci-gray-700);
    border-color: var(--ci-gray-200);
  }
  
  .video-filter-btn.active {
    background: var(--ci-red-700);
    color: #FFFFFF;
  }
  
  .video-grid-card,
  .youtube-card,
  .video-card {
    background: var(--ci-gray-100);
    border-color: var(--ci-gray-200);
  }
  
  /* ⚠️ v1.6 FIX B-WP42: Badge-uri video lipseau din dark mode —
     var(--ci-red-100) (#FEE2E2) și var(--ci-red-800) (#991B1B) nu sunt remapate,
     rezultând badge roz aprins pe fundal întunecat. Folosim aceeași strategie
     semi-transparentă ca și badge-urile de categorii. */
  .video-card__badge,
  .video-grid-card__badge,
  .ci-featured-video-badge {
    background: rgba(254, 226, 226, 0.15);
    color: #FCA5A5;
  }
  
  /* ⚠️ v1.7 FIX B-WP45: Dark mode pentru clasele reale ale widget-ului YouTube (§5.2).
     Widget-ul are deja fundal întunecat (#0F0F0F), dar pe teme cu dark mode forțat,
     bordurile și tranzițiile trebuie adaptate. */
  .youtube-widget-item:hover {
    background: rgba(255, 255, 255, 0.12);
  }
  
  .youtube-widget-thumb {
    background: #2a2a2a;
  }
  
  /* ⚠️ v2.1 FIX B-WP57: Dark mode lipsă pentru TOATE secțiunile homepage v2.0 și pagina Cifre.
     Componentele folosesc background hardcoded #FFFFFF și #F9FAFB — pe dark mode
     apar ca dreptunghiuri albe stridente pe fundal întunecat. */
  .ci-featured-video-wrapper,
  .ci-stats-cta,
  .cifre-kpi-card,
  .cifre-chart-container,
  .cifre-progress-item,
  .video-group__header {
    background: var(--ci-gray-100);
    border-color: var(--ci-gray-200);
  }
  
  .ci-homepage-featured-video,
  .ci-homepage-stats-widget {
    background: var(--ci-gray-50);
  }
  
  .cifre-filter-btn {
    background: var(--ci-gray-100);
    color: var(--ci-gray-700);
    border-color: var(--ci-gray-200);
  }
  
  .cifre-filter-btn.active,
  .cifre-filter-btn:hover {
    background: var(--ci-red-700);
    color: #FFFFFF;
    border-color: var(--ci-red-700);
  }
  
  .cifre-table th {
    background: var(--ci-gray-100);
    border-color: var(--ci-gray-200);
  }
  
  .cifre-table td {
    border-color: var(--ci-gray-200);
  }
  
  .cifre-table-wrapper {
    border-color: var(--ci-gray-200);
  }
  
  .cifre-map-cta {
    background: var(--ci-gray-100);
  }
  
  .video-group {
    border-color: var(--ci-gray-200);
  }
  
  /* ⚠️ v2.4 FIX B-WP84: .video-group__header duplicat eliminat — exista deja
     în blocul B-WP57 (line ~1246) cu valori identice. */
  
  /* ⚠️ FIX B-WP263: Dark mode pentru stări hover/focus + buton "Încarcă toate". */
  .video-group__header:hover,
  .video-group__header:focus,
  .video-group__header:focus-visible,
  .video-group__header:active {
    background: var(--ci-gray-200);
  }
  
  .video-group__load-more {
    background: var(--ci-gray-100);
    border-color: var(--ci-red-700);
    color: var(--ci-red-100);
  }
  
  .video-group__load-more:hover,
  .video-group__load-more:focus-visible {
    background: var(--ci-red-700);
    color: #FFFFFF;
  }
  
  .ci-featured-article__image {
    background: var(--ci-gray-200);
  }
  
  /* ⚠️ v2.2 FIX B-WP67: Dark mode pentru video-uri relevante per articol (§20.4) */
  .ci-related-videos {
    background: var(--ci-gray-100);
    border-color: var(--ci-gray-200);
  }
  
  /* ⚠️ v2.5 FIX B-WP89: Era var(--ci-gray-100), identic cu containerul .ci-related-videos
     (ambele #1F2937) → cardurile erau invizibile (zero contrast). Schimbat la var(--ci-gray-200)
     (#374151) pentru contrast vizibil, consistent cu strategia .ci-article-card. */
  /* ⚠️ v2.7 FIX B-WP102: border-color era var(--ci-gray-200), IDENTIC cu noul background
     var(--ci-gray-200) → border invizibil. Schimbat la var(--ci-gray-400) pentru contur vizibil. */
  .ci-related-video-card {
    background: var(--ci-gray-200);
    border-color: var(--ci-gray-400);
  }

  /* ⚠️ v3.0 FIX B-WP111: Scoped .section-link dark mode — B-WP108 (v2.9) adăugase
     override generic pe .section-link (specificity 0,1,0), dar selectorii scoped din
     B-WP53 (v2.1) au specificity 0,2,0 și suprascriu fix-ul. "Toate știrile →" /
     "Toate videoclipurile →" pe homepage și /video rămâneau cu contrast ~2.5:1.
     Fix: override-uri scoped cu aceeași specificity ca regulile normale. */
  .ci-homepage-latest-news .section-link,
  .ci-homepage-featured-video .section-link,
  .video-page .section-link,
  .homepage-latest-videos .section-link {
    color: var(--ci-red-100);
  }
  
  .ci-homepage-latest-news .section-link:hover,
  .ci-homepage-featured-video .section-link:hover,
  .video-page .section-link:hover,
  .homepage-latest-videos .section-link:hover {
    color: #FFFFFF;
  }

  /* ⚠️ v3.2 FIX B-WP118: .youtube-cta-link:hover dark mode — hover color #cc0000 pe
     background var(--ci-gray-100) = #1F2937 → contrast ~3.8:1 (sub WCAG AA 4.5:1).
     Link-ul CTA "Vezi filmarea completă pe YouTube" pe hover era greu de citit.
     Aceeași clasă de bug ca B-WP108 (.section-link, .ci-map-widget__link). */
  .youtube-cta-link:hover {
    color: #FCA5A5;
  }

  /* ⚠️ v3.4: Dark mode pentru noul pill header universal (§13b).
     Pill-ul rămâne cu fundal roșu solid (var(--ci-red-700)) în ambele moduri,
     dar subtitlul gri și link-ul „Toate X →" trebuie remapate pentru contrast. */
  .ci-section-pill {
    background: var(--ci-red-700);
    color: #FFFFFF;
    box-shadow: 0 3px 16px rgba(185, 28, 28, 0.45);
  }
  .ci-section-pill__sub {
    color: var(--ci-gray-400);
  }
  .ci-section-pill-link a {
    color: var(--ci-red-100);
  }
  .ci-section-pill-link a:hover {
    color: #FFFFFF;
  }

}


/* ==========================================================================
   17.9 FIX B-C22-08 — Tabele „de hârtie" pe mobile (≤480px)
   --------------------------------------------------------------------------
   Bug: ultima coloană era cropped la dreapta. Cauză: min-width:720px pe
   .cifre-v2__table + padding generos al celulelor → tabel mai lat decât
   viewport mobile. Scroll-ul orizontal funcționa, dar utilizatorii nu
   realizau că pot scrolla.
   
   Fix: reducere padding/font pe mobile + min-width mai mic (560px e
   suficient pentru paper-table cu 5 coloane) + smooth touch scrolling iOS.
   Aplicabil la AMBELE tabele cifre (principal + paper).
   ========================================================================== */
@media (max-width: 480px) {
  .cifre-v2__table-scroll {
    -webkit-overflow-scrolling: touch;
  }
  .cifre-v2__table {
    min-width: 560px;
    font-size: 12px;
  }
  .cifre-v2__table th,
  .cifre-v2__table td {
    padding: 8px 10px;
  }
}

/* ==========================================================================
   17.10 §4b LISTA EXPANDABILĂ „Proiecte în curs de execuție"
   --------------------------------------------------------------------------
   Sub chart-ul „Ce ne așteaptă". Lista filtrată după STATE.asteaptaTip
   (Autostrăzi/DEx/Centuri), conține doar sectoare cu is_in_executie=1.
   - Header toggle expand/collapse, default expandat
   - Carduri sector cu nume, antreprenor, km, % execuție + bară progres
   - Culoare bară aliniată cu „Gradul de execuție" (4 brackets de progres)
   - Buton „Vezi toate" apare doar când total > 10 sectoare
   - Mobile-first: meta-line wrappable, padding redus pe ≤480px
   ========================================================================== */
.cifre-v2__asteapta-list {
  margin-top: 16px;
  background: #FFF;
  border: 1px solid var(--ci-gray-200);
  border-radius: var(--ci-radius-lg);
  overflow: hidden;
}

.cifre-v2__asteapta-list-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--ci-gray-50, #F9FAFB);
  border: none;
  border-bottom: 1px solid var(--ci-gray-200);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ci-gray-900);
  transition: background-color 0.15s ease;
}
.cifre-v2__asteapta-list-header:hover {
  background: var(--ci-gray-100);
}
.cifre-v2__asteapta-list-header:focus-visible {
  outline: 2px solid var(--ci-blue-600);
  outline-offset: -2px;
}
.cifre-v2__asteapta-list-header[aria-expanded="false"] {
  border-bottom-color: transparent;
}

.cifre-v2__asteapta-list-title {
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cifre-v2__asteapta-list-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--ci-radius-full);
  background: var(--ci-gray-200);
  color: var(--ci-gray-700);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.cifre-v2__asteapta-list-chevron {
  font-size: 14px;
  color: var(--ci-gray-500);
  transition: transform 0.25s ease;
  display: inline-block;
}
.cifre-v2__asteapta-list-header[aria-expanded="false"] .cifre-v2__asteapta-list-chevron {
  transform: rotate(-90deg);
}

.cifre-v2__asteapta-list-body {
  max-height: 8000px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.25s ease;
}
.cifre-v2__asteapta-list-body.is-collapsed {
  max-height: 0;
  opacity: 0;
}

.cifre-v2__asteapta-list-items {
  padding: 4px 0;
}

.cifre-v2__asteapta-list-empty {
  padding: 24px 18px;
  text-align: center;
  font-size: 13px;
  color: var(--ci-gray-500);
}

.cifre-v2__asteapta-item {
  padding: 12px 18px;
  border-bottom: 1px solid var(--ci-gray-100);
}
.cifre-v2__asteapta-item:last-child { border-bottom: none; }

.cifre-v2__asteapta-item-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.cifre-v2__asteapta-item-text {
  flex: 1;
  min-width: 0; /* permite text-overflow / wrap în contextul flex */
}
.cifre-v2__asteapta-item-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ci-gray-900);
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.cifre-v2__asteapta-item-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--ci-gray-500);
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.cifre-v2__asteapta-item-ant,
.cifre-v2__asteapta-item-km {
  display: inline-block;
  word-break: break-word;
}
.cifre-v2__asteapta-item-km { white-space: nowrap; }
.cifre-v2__asteapta-item-sep {
  color: var(--ci-gray-300);
  font-weight: 400;
}
.cifre-v2__asteapta-item-pct {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--bracket-color, var(--ci-gray-700));
  white-space: nowrap;
  line-height: 1.35;
}

.cifre-v2__asteapta-item-bar {
  height: 6px;
  background: var(--ci-gray-100);
  border-radius: var(--ci-radius-full);
  overflow: hidden;
}
.cifre-v2__asteapta-item-fill {
  height: 100%;
  background: var(--bracket-color, var(--ci-gray-400));
  border-radius: var(--ci-radius-full);
  transition: width 0.6s ease;
}

/* Brackets de culoare aliniate cu „Gradul de execuție" */
.cifre-v2__asteapta-item[data-bracket="0-25"]   { --bracket-color: var(--ci-yellow-500); }
.cifre-v2__asteapta-item[data-bracket="25-50"]  { --bracket-color: var(--ci-blue-600); }
.cifre-v2__asteapta-item[data-bracket="50-80"]  { --bracket-color: var(--ci-lime-500); }
.cifre-v2__asteapta-item[data-bracket="80-100"] { --bracket-color: var(--ci-emerald-700); }

/* Buton „Vezi toate / Arată mai puține" */
.cifre-v2__asteapta-list-showall {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  background: #FFF;
  border: none;
  border-top: 1px solid var(--ci-gray-100);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ci-blue-600);
  text-align: center;
  transition: background-color 0.15s ease;
}
.cifre-v2__asteapta-list-showall:hover {
  background: var(--ci-gray-50, #F9FAFB);
}
.cifre-v2__asteapta-list-showall:focus-visible {
  outline: 2px solid var(--ci-blue-600);
  outline-offset: -2px;
}
.cifre-v2__asteapta-list-showall-chevron {
  display: inline-block;
  font-size: 12px;
  transition: transform 0.25s ease;
}
.cifre-v2__asteapta-list-showall[aria-expanded="true"] .cifre-v2__asteapta-list-showall-chevron {
  transform: rotate(180deg);
}

/* Mobile (≤480px): padding redus, font scalat, evită overflow orizontal */
@media (max-width: 480px) {
  .cifre-v2__asteapta-list-header {
    padding: 12px 14px;
  }
  .cifre-v2__asteapta-list-title {
    font-size: 13px;
  }
  .cifre-v2__asteapta-item {
    padding: 10px 14px;
  }
  .cifre-v2__asteapta-item-name {
    font-size: 13px;
  }
  .cifre-v2__asteapta-item-meta {
    font-size: 11.5px;
  }
  .cifre-v2__asteapta-item-pct {
    font-size: 13px;
  }
  .cifre-v2__asteapta-list-showall {
    padding: 11px 14px;
  }
}