/* ==========================================================================
   CRJM — app.css  (base + componente)
   Depinde de tokens.css. Se încarcă după bootstrap.min.css.
   ========================================================================== */

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

body {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink-900);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}
h1 { font-size: clamp(2rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2rem); }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 var(--space-4); }

a { color: var(--brand-petrol); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--brand-petrol-dark); }

img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--container); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.section { padding: var(--space-9) 0; }
.section--tight { padding: var(--space-8) 0; }
.section--alt { background: var(--surface-50); }
@media (max-width: 767.98px){ .section, .section--tight { padding: var(--space-7) 0; } }

/* Skip link (accesibilitate) */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background: var(--brand-petrol); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color:#fff; }

/* Overline / eticheta de secțiune */
.overline {
  display: inline-block;
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-petrol);
}
.overline::before {
  content: ""; display: inline-block; width: 28px; height: 2px; vertical-align: middle;
  margin-right: 10px; background: var(--brand-gradient);
}

/* Titlu de secțiune + link „vezi toate" */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.section-head h2 { margin: 6px 0 0; }
.section-head .link-all { font-weight: 600; white-space: nowrap; }
.section-head .link-all i { transition: transform .18s ease; }
.section-head .link-all:hover i { transform: translateX(4px); }

/* ------------------------------ Butoane ---------------------------------- */
.btn { --bs-btn-focus-shadow-rgb: 0,80,121; border-radius: var(--radius-sm); font-weight: 600; padding: .7rem 1.4rem; transition: all .18s ease; border: 1.5px solid transparent; }
.btn-primary, .btn-primary:focus { background: var(--brand-petrol); border-color: var(--brand-petrol); color: #fff; }
.btn-primary:hover { background: var(--brand-petrol-dark); border-color: var(--brand-petrol-dark); color:#fff; transform: translateY(-1px); }
.btn-outline { background: transparent; border-color: var(--brand-petrol); color: var(--brand-petrol); }
.btn-outline:hover { background: var(--brand-petrol); color: #fff; }
.btn-on-dark { background: #fff; color: var(--brand-petrol); border-color: #fff; }
.btn-on-dark:hover { background: transparent; color: #fff; border-color: #fff; }
.btn-ghost { background: transparent; color: var(--brand-petrol); padding-left: 0; padding-right: 0; }
.btn-lg { padding: .9rem 1.8rem; font-size: 1.05rem; }

/* ------------------------------ Utility bar ------------------------------ */
.utility-bar { background: var(--brand-petrol); color: #fff; font-size: .85rem; }
.utility-bar a { color: rgba(255,255,255,.85); }
.utility-bar a:hover { color: #fff; }
.utility-bar .social a { font-size: 1rem; }
.utility-bar .lang a { font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.utility-bar .lang a.active { background: rgba(255,255,255,.16); color:#fff; }
.utility-bar .btn-support {
  background: #fff; color: var(--brand-petrol); font-weight: 700; border-radius: var(--radius-pill);
  padding: .35rem 1rem; font-size: .82rem; display: inline-flex; align-items: center; gap: 6px;
}
.utility-bar .btn-support:hover { background: var(--brand-cyan); color: #fff; }

/* ------------------------------ Header / Navbar -------------------------- */
.site-header { position: sticky; top: 0; z-index: 1030; background: #fff; }
.navbar-main { background: #fff; transition: box-shadow .2s ease; border-bottom: 1px solid var(--line-200); }
.site-header.scrolled .navbar-main { box-shadow: var(--shadow-sm); }

/* Logo lockup (text-based, on-brand; înlocuibil cu SVG real) */
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  font-family: var(--font-sans); font-weight: 800; font-size: 1.9rem; letter-spacing: .02em; line-height: 1;
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-text { line-height: 1.15; }
.brand-text .brand-name { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-900); text-transform: uppercase; }
.brand-text .brand-slogan { display: block; font-size: .66rem; letter-spacing: .12em; color: var(--brand-gray); text-transform: uppercase; }

/* Meniu principal */
.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav .nav-link {
  color: var(--ink-900); font-weight: 600; font-size: .92rem; padding: .6rem .9rem; border-radius: var(--radius-sm);
  position: relative;
}
.main-nav .nav-link:hover, .main-nav .nav-item.show > .nav-link { color: var(--brand-petrol); }
.main-nav .nav-link::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .35rem; height: 2px;
  background: var(--brand-gradient); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.main-nav .nav-link:hover::after, .main-nav .nav-item.active > .nav-link::after { transform: scaleX(1); }

/* Dropdown */
.main-nav .dropdown-menu {
  border: 1px solid var(--line-200); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 10px; margin-top: 8px; min-width: 260px;
}
.main-nav .dropdown-item { border-radius: var(--radius-sm); padding: .55rem .7rem; font-weight: 500; font-size: .9rem; color: var(--ink-700); white-space: normal; }
.main-nav .dropdown-item:hover { background: var(--surface-100); color: var(--brand-petrol); }

/* Butoane icon (search) */
.icon-btn { width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--line-200); background:#fff; color: var(--ink-900); display:inline-flex; align-items:center; justify-content:center; }
.icon-btn:hover { border-color: var(--brand-petrol); color: var(--brand-petrol); }

/* Search overlay */
.search-panel { max-height: 0; overflow: hidden; transition: max-height .25s ease; background: var(--surface-50); border-bottom: 1px solid transparent; }
.search-panel.open { max-height: 120px; border-bottom-color: var(--line-200); }
.search-panel .form-control { border-radius: var(--radius-sm); border: 1.5px solid var(--line-200); padding: .8rem 1rem; }
.search-panel .form-control:focus { border-color: var(--brand-petrol); box-shadow: var(--focus-ring); }

/* Hamburger */
.nav-toggle { display: none; }
@media (max-width: 991.98px){
  .main-nav.desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .brand-text .brand-name { font-size: .66rem; }
  .brand-text .brand-slogan { display: none; }
}

/* Offcanvas mobil */
.offcanvas .brand-mark { font-size: 1.5rem; }
.mobile-nav .nav-link { font-weight: 600; color: var(--ink-900); padding: .7rem 0; border-bottom: 1px solid var(--line-200); }
.mobile-nav .accordion-button { font-weight: 600; color: var(--ink-900); padding: .7rem 0; box-shadow: none; background: transparent; font-size: 1rem; }
.mobile-nav .accordion-button:not(.collapsed){ color: var(--brand-petrol); background: transparent; }
.mobile-nav .accordion-item { border: 0; border-bottom: 1px solid var(--line-200); }
.mobile-nav .accordion-button::after { width: 1rem; height: 1rem; background-size: 1rem; }
.mobile-nav .accordion-body { padding: 0 0 .5rem; }
.mobile-nav .accordion-body a { display:block; padding: .45rem 0 .45rem 12px; color: var(--slate-600); font-weight: 500; border-left: 2px solid var(--line-200); }
.mobile-nav .accordion-body a:hover { color: var(--brand-petrol); border-left-color: var(--brand-petrol); }

/* ------------------------------ Hero ------------------------------------- */
.hero { position: relative; }
.hero-slide {
  position: relative; min-height: 540px; display: flex; align-items: center;
  background-size: cover; background-position: center; color: #fff;
}
.hero-slide::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,58,89,.94) 0%, rgba(0,74,114,.75) 45%, rgba(0,74,114,.30) 100%);
}
.hero-slide .container { position: relative; z-index: 2; }
.hero-content { max-width: 660px; padding: var(--space-8) 0; }
.hero-content .overline { color: #bfe6fa; }
.hero-content .overline::before { background: var(--brand-cyan); }
.hero-content h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.25rem); margin-bottom: var(--space-5); }
.hero-content p { color: rgba(255,255,255,.9); font-size: 1.1rem; margin-bottom: var(--space-6); }
.hero .carousel-indicators { margin-bottom: 1.4rem; }
.hero .carousel-indicators [data-bs-target]{ width: 34px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.5); border:0; opacity:1; }
.hero .carousel-indicators .active { background: var(--brand-cyan); }
.hero .carousel-control-prev, .hero .carousel-control-next { width: 5%; opacity: .7; }
@media (max-width: 767.98px){ .hero-slide { min-height: 460px; } }

/* ------------------------------ Domenii tematice ------------------------- */
.themes { margin-top: -64px; position: relative; z-index: 3; }
@media (max-width: 991.98px){ .themes { margin-top: var(--space-7); } }
.theme-card {
  background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5); text-align: center; height: 100%;
  transition: transform .2s ease, box-shadow .2s ease; box-shadow: var(--shadow-sm);
}
.theme-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.theme-icon {
  width: 64px; height: 64px; border-radius: var(--radius-md); margin: 0 auto var(--space-4);
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #fff;
  background: var(--brand-gradient-soft);
}
.theme-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.theme-card p { color: var(--slate-600); font-size: .9rem; margin: 0; }
.theme-card a.stretched-link { color: inherit; }

/* ------------------------------ Card articol ----------------------------- */
.card-article {
  background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-md); overflow: hidden;
  height: 100%; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease;
}
.card-article:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-article .thumb { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--surface-100); }
.card-article .thumb img { width:100%; height:100%; object-fit: cover; transition: transform .4s ease; }
.card-article:hover .thumb img { transform: scale(1.05); }
.card-article .badge-cat { position: absolute; top: 12px; left: 12px; z-index: 2; }
.card-body-c { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.card-article h4 { font-size: 1.08rem; line-height: 1.35; margin-bottom: 10px; }
.card-article h4 a { color: var(--ink-900); }
.card-article:hover h4 a { color: var(--brand-petrol); }
.card-article .excerpt { color: var(--slate-600); font-size: .92rem; margin-bottom: var(--space-4);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-article .meta { margin-top: auto; color: var(--brand-gray); font-size: .82rem; display: flex; align-items: center; gap: 10px; }
.card-article .meta i { color: var(--brand-petrol); }

/* Badge / chip categorie */
.badge-cat {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-pill); background: var(--brand-petrol); color: #fff;
}
.badge-cat.is-anticor { background: #0F6E8C; }
.badge-cat.is-drepturi { background: #1E6091; }
.badge-cat.is-societate { background: #2A7F9E; }
.badge-cat.soft { background: var(--surface-100); color: var(--brand-petrol); }

/* ------------------------------ Card eveniment --------------------------- */
.card-event { display: flex; gap: var(--space-4); background:#fff; border:1px solid var(--line-200); border-radius: var(--radius-md); padding: var(--space-4); height:100%; transition: box-shadow .2s ease, transform .2s ease; }
.card-event:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.event-date { flex: 0 0 76px; text-align: center; background: var(--brand-gradient-soft); color:#fff; border-radius: var(--radius-sm); padding: 12px 6px; align-self: flex-start; }
.event-date .d { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.event-date .m { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; display:block; }
.card-event h4 { font-size: 1rem; line-height: 1.35; margin-bottom: 6px; }
.card-event h4 a { color: var(--ink-900); }
.card-event:hover h4 a { color: var(--brand-petrol); }
.card-event .ev-meta { color: var(--brand-gray); font-size: .82rem; display:flex; gap: 12px; flex-wrap: wrap; }
.card-event .ev-meta i { color: var(--brand-petrol); }

/* ------------------------------ Card cercetare --------------------------- */
.card-pub { background:#fff; border:1px solid var(--line-200); border-radius: var(--radius-md); overflow:hidden; height:100%; display:flex; flex-direction:column; transition: box-shadow .2s ease, transform .2s ease; }
.card-pub:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-pub .cover { aspect-ratio: 3/4; background: var(--brand-gradient-soft); position: relative; overflow: hidden; }
.card-pub .cover img { width:100%; height:100%; object-fit: cover; }
.card-pub .cover .doc-ico { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.9); font-size: 2.4rem; }
.card-pub .p-body { padding: var(--space-5); display:flex; flex-direction:column; flex:1; }
.card-pub h4 { font-size: 1rem; line-height:1.35; margin-bottom: 8px; }
.card-pub h4 a { color: var(--ink-900); }
.card-pub:hover h4 a { color: var(--brand-petrol); }
.card-pub .p-meta { color: var(--brand-gray); font-size:.82rem; margin-bottom: var(--space-4); }
.card-pub .p-actions { margin-top:auto; display:flex; gap: 10px; }
.card-pub .p-actions .btn { padding:.5rem .9rem; font-size:.85rem; }

/* ------------------------------ Bandă CTA -------------------------------- */
.cta-band { background: var(--brand-gradient-soft); color:#fff; border-radius: var(--radius-lg); padding: var(--space-8); position: relative; overflow: hidden; }
.cta-band::after { content:""; position:absolute; right:-60px; top:-60px; width: 260px; height: 260px; border-radius:50%; background: rgba(255,255,255,.08); }
.cta-band h2 { color:#fff; }
.cta-band p { color: rgba(255,255,255,.9); margin-bottom: 0; }

/* ------------------------------ Newsletter ------------------------------- */
.newsletter { background: var(--surface-100); border-radius: var(--radius-lg); padding: var(--space-7); }
.newsletter .form-control { border-radius: var(--radius-sm); border: 1.5px solid var(--line-200); padding: .8rem 1rem; }
.newsletter .form-control:focus { border-color: var(--brand-petrol); box-shadow: var(--focus-ring); }

/* ------------------------------ Multimedia ------------------------------- */
.media-card { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16/9; background: var(--ink-900); display:block; }
.media-card img { width:100%; height:100%; object-fit: cover; opacity:.85; transition: transform .4s ease, opacity .2s ease; }
.media-card:hover img { transform: scale(1.05); opacity: 1; }
.media-card .play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; z-index:2; }
.media-card .play i { width:56px; height:56px; border-radius:50%; background: rgba(0,80,121,.85); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.media-card .m-title { position:absolute; left:0; right:0; bottom:0; padding: var(--space-6) var(--space-4) var(--space-4); color:#fff; font-weight:600; font-size:.95rem; background: linear-gradient(transparent, rgba(15,27,45,.9)); z-index:2; }
.media-card .tag { position:absolute; top:12px; left:12px; z-index:3; }

/* ------------------------------ Footer ----------------------------------- */
.site-footer { background: var(--ink-900); color: rgba(255,255,255,.75); padding-top: var(--space-9); }
.site-footer .footer-brand .brand-mark { font-size: 1.7rem; }
.site-footer .footer-brand p { color: rgba(255,255,255,.6); font-size: .9rem; }
.site-footer h5 { color:#fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--space-4); }
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: var(--brand-cyan); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 10px; font-size: .92rem; }
.footer-contact li { display:flex; gap:10px; align-items:flex-start; }
.footer-contact i { color: var(--brand-cyan); margin-top: 3px; }
.footer-social a { width: 38px; height:38px; border-radius: var(--radius-sm); background: rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; color:#fff; margin-right: 8px; }
.footer-social a:hover { background: var(--brand-petrol); color:#fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--space-8); padding: var(--space-5) 0; font-size: .85rem; }
.footer-bottom a { color: rgba(255,255,255,.65); }
.footer-bottom a:hover { color: var(--brand-cyan); }

/* ------------------------------ Cookie bar ------------------------------- */
.cookie-bar { position: fixed; left:0; right:0; bottom:0; z-index: 1050; background: var(--ink-700); color:#fff; padding: var(--space-4) 0; box-shadow: 0 -4px 20px rgba(0,0,0,.2); }
.cookie-bar p { margin: 0; font-size: .9rem; color: rgba(255,255,255,.85); }

/* ------------------------------ Utilitare -------------------------------- */
.text-slogan { background: var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color: transparent; }
.divider { height:1px; background: var(--line-200); border:0; margin: 0; }


/* ==========================================================================
   SEMNĂTURĂ EDITORIALĂ (diferențiere față de anticoruptie.crjm.org)
   - hero cu foto + titlu serif (Lora)
   - inimioară animată pe „Susține CRJM"
   - keyline gradient pe carduri, layout magazine, CTA cu foto
   ========================================================================== */

/* Hero editorial: fotografie + overlay + titlu serif */
.hero-slide { background-color: var(--brand-petrol-dark); }
.hero-slide::before {
  background:
    linear-gradient(90deg, rgba(1,27,40,.92) 0%, rgba(0,58,89,.66) 48%, rgba(0,58,89,.18) 100%),
    linear-gradient(0deg, rgba(4,20,34,.55), rgba(4,20,34,0) 42%);
}
.hero-content h1 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em; }
.hero-kicker {
  display:inline-flex; align-items:center; gap:8px; margin-bottom: var(--space-5);
  background: rgba(41,167,223,.18); border:1px solid rgba(191,230,250,.45); color:#e2f4fd;
  padding:6px 14px; border-radius: var(--radius-pill);
  font-size:.74rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}
.hero-kicker i { color: var(--brand-cyan); font-size:.9rem; }

/* Inimioară animată */
@keyframes heartbeat { 0%,100%{transform:scale(1);} 12%{transform:scale(1.28);} 24%{transform:scale(1);} 36%{transform:scale(1.18);} 50%{transform:scale(1);} }
.heart { display:inline-block; color:#ff5a7a; animation: heartbeat 1.7s ease-in-out infinite; transform-origin:center; }
.btn-support .heart { color:#e5335a; }
.btn .heart { margin-right:6px; }
@media (prefers-reduced-motion: reduce){ .heart { animation: none; } }

/* Keyline gradient pe carduri (semnătură vizuală) */
.card-article, .card-pub { position: relative; }
.card-article::before, .card-pub::before {
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:3;
  background: var(--brand-gradient); transform: scaleX(0); transform-origin:left; transition: transform .25s ease;
}
.card-article:hover::before, .card-pub:hover::before { transform: scaleX(1); }

/* Card featured (magazine) — poză full-width sus, text dedesubt */
.card-feature { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line-200); border-radius: var(--radius-lg); overflow:hidden; height:100%; transition: box-shadow .2s ease; }
.card-feature:hover { box-shadow: var(--shadow-md); }
.card-feature .thumb { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; }
.card-feature .thumb img { width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.card-feature:hover .thumb img { transform: scale(1.04); }
.card-feature .badge-cat { position:absolute; top:16px; left:16px; z-index:2; }
.card-feature .fbody { padding: var(--space-6); display:flex; flex-direction:column; }
.card-feature h3 { font-family: var(--font-serif); font-weight:600; font-size: clamp(1.3rem,2vw,1.75rem); line-height:1.22; margin-bottom:12px; }
.card-feature h3 a { color: var(--ink-900); }
.card-feature:hover h3 a { color: var(--brand-petrol); }
.card-feature .excerpt { color: var(--slate-600); margin-bottom: var(--space-4); }
.card-feature .meta { margin-top:auto; color: var(--brand-gray); font-size:.85rem; display:flex; gap:10px; align-items:center; }
.card-feature .meta i { color: var(--brand-petrol); }
@media (max-width: 767.98px){ .card-feature .fbody { padding: var(--space-5); } }

/* Card compact (listă din dreapta) — thumbnail pătrat mic + text */
.card-compact { display:flex; gap:0; background:#fff; border:1px solid var(--line-200); border-radius: var(--radius-md); overflow:hidden; transition: box-shadow .2s ease, transform .2s ease; flex:1; }
.card-compact:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-compact .thumb { position:relative; flex:0 0 120px; overflow:hidden; }
.card-compact .thumb img { width:100%; height:100%; object-fit:cover; }
.card-compact .cbody { padding: var(--space-4); display:flex; flex-direction:column; min-width:0; }
.card-compact .badge-cat { align-self:flex-start; margin-bottom:8px; }
.card-compact h4 { font-size:.98rem; line-height:1.3; margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-compact h4 a { color: var(--ink-900); }
.card-compact:hover h4 a { color: var(--brand-petrol); }
.card-compact .meta { margin-top:auto; color: var(--brand-gray); font-size:.8rem; }
.card-compact .meta i { color: var(--brand-petrol); }
@media (max-width: 575.98px){ .card-compact .thumb { flex-basis:96px; } }

/* CTA cu fotografie */
.cta-photo { position:relative; border-radius: var(--radius-lg); overflow:hidden; padding: var(--space-8); }
.cta-photo .cta-bgimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cta-photo .cta-overlay { position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(0,42,64,.95) 0%, rgba(0,74,114,.72) 55%, rgba(15,110,140,.45) 100%); }
.cta-photo .cta-inner { position:relative; z-index:2; color:#fff; }
.cta-photo h2 { color:#fff; }
.cta-photo p { color: rgba(255,255,255,.9); margin-bottom:0; }

/* Footer: newsletter stacked (ca să încapă în coloană) */
.footer-newsletter .form-control { width:100%; color:#fff; }
.footer-newsletter .btn { width:100%; }
.footer-newsletter .form-control::placeholder { color: rgba(255,255,255,.55); opacity:1; }
.footer-newsletter .form-control:focus { border-color: var(--brand-cyan) !important; box-shadow: 0 0 0 3px rgba(41,167,223,.25); background: rgba(255,255,255,.10) !important; }

/* Ascunde inimioarele de pe butoanele „Susține CRJM" (la cerere) */
.heart { display: none !important; }

/* ==========================================================================
   .blog-cover — poză REALĂ + overlay albastru + linii (stilul CRJM).
   Pui poza reală în <img>; overlay-ul CSS aplică look-ul fără a modifica fișierul.
   Ex:  <a class="thumb blog-cover"><img src="foto.jpg" alt=""></a>
   ========================================================================== */
.blog-cover { position: relative; overflow: hidden; }
.blog-cover > img { width:100%; height:100%; object-fit:cover; display:block; filter: saturate(.72) contrast(1.05); }
.blog-cover::before {   /* tentă albastră ușoară — poza reală rămâne vizibilă */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(135deg, rgba(0,42,64,.52) 0%, rgba(0,80,121,.34) 55%, rgba(15,110,140,.24) 100%);
}
.blog-cover::after {    /* 2 linii diagonale (cyan + albă), ca în stilul cardului */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:
    linear-gradient(118deg, transparent 11.5%, rgba(41,167,223,.55) 11.5%, rgba(41,167,223,.55) 11.9%, transparent 11.9%),
    linear-gradient(118deg, transparent 60%, rgba(255,255,255,.20) 60%, rgba(255,255,255,.20) 60.3%, transparent 60.3%);
}
.blog-cover .badge-cat { z-index: 4; }

/* ==========================================================================
   PAGINA BLOG — antet, bară de filtre, chips, paginare, stare goală
   ========================================================================== */
.page-head { padding: var(--space-8) 0 var(--space-7); background: var(--surface-50); border-bottom: 1px solid var(--line-200); }
.breadcrumb-crjm { font-size: .85rem; color: var(--slate-600); margin-bottom: 14px; }
.breadcrumb-crjm a { color: var(--slate-600); }
.breadcrumb-crjm a:hover { color: var(--brand-petrol); }
.breadcrumb-crjm .sep { margin: 0 8px; color: var(--slate-400); }
.page-head h1 { margin-bottom: 10px; }
.page-head .lead { color: var(--slate-600); max-width: 640px; margin: 0; }

.filter-bar { background:#fff; border:1px solid var(--line-200); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.filter-bar .form-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--brand-gray); margin-bottom:4px; }
.filter-bar .form-control, .filter-bar .form-select { border:1.5px solid var(--line-200); border-radius: var(--radius-sm); padding:.6rem .8rem; font-size:.92rem; }
.filter-bar .form-control:focus, .filter-bar .form-select:focus { border-color: var(--brand-petrol); box-shadow: var(--focus-ring); }
.filter-search { position: relative; }
.filter-search i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color: var(--slate-400); }
.filter-search .form-control { padding-left: 40px; }

.filter-active { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top: var(--space-4); }
.filter-chip { display:inline-flex; align-items:center; gap:8px; background: var(--surface-100); color: var(--brand-petrol);
  border-radius: var(--radius-pill); padding:5px 12px; font-size:.82rem; font-weight:600; }
.filter-chip button { border:0; background:none; color:inherit; cursor:pointer; line-height:1; padding:0; font-size:1rem; display:flex; }
.filter-chip button:hover { color: var(--brand-petrol-dark); }
.btn-reset { background:none; border:0; color: var(--slate-600); font-weight:600; font-size:.85rem; cursor:pointer; }
.btn-reset:hover { color: var(--danger); }

.results-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin: var(--space-6) 0 var(--space-5); flex-wrap:wrap; }
.result-count { color: var(--slate-600); font-size:.92rem; }
.result-count strong { color: var(--ink-900); }

.blog-empty { text-align:center; padding: var(--space-9) var(--space-4); color: var(--slate-600); border:1px dashed var(--line-200); border-radius: var(--radius-md); background: var(--surface-50); }
.blog-empty i { font-size:2.4rem; color: var(--slate-400); display:block; margin-bottom:12px; }

.pagination-crjm { display:flex; justify-content:center; gap:6px; margin-top: var(--space-8); flex-wrap:wrap; }
.pagination-crjm a, .pagination-crjm span { min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-200); border-radius: var(--radius-sm); color: var(--brand-petrol); font-weight:600; font-size:.9rem; padding:0 12px; background:#fff; }
.pagination-crjm a:hover { border-color: var(--brand-petrol); background: var(--surface-50); }
.pagination-crjm .active { background: var(--brand-petrol); border-color: var(--brand-petrol); color:#fff; }
.pagination-crjm .disabled { color: var(--slate-400); pointer-events:none; }

/* Fix: butoanele din footer sunt <a>, iar „.site-footer a" le fura culoarea.
   Reguli mai specifice ca butonul „Susține CRJM" să fie vizibil (nu doar la hover). */
.site-footer .btn-on-dark { background:#fff; color: var(--brand-petrol); border-color:#fff; }
.site-footer .btn-on-dark:hover { background: transparent; color:#fff; border-color:#fff; }
.site-footer .btn-primary { background: var(--brand-petrol); color:#fff; border-color: var(--brand-petrol); }
.site-footer .btn-primary:hover { background: var(--brand-petrol-dark); color:#fff; border-color: var(--brand-petrol-dark); }