/* ===============================
   VARIABILE
================================ */
:root{
  --bg:#0B0D14;
  --panel:#101426;
  --text:#E9ECF6;
  --muted:#A9B2C8;
  --line:#222A3F;

  --accent:#7C3AED;
  --accent-hover:#6D28D9;
  --accent-strong:#5B21B6;
}

/* ===============================
   RESET + BAZĂ
================================ */
*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);

  /* IMPORTANT: layout fix global (nu depinde de .page) */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{ color:inherit; text-decoration:none; }

/* ===============================
   CONTAINER
================================ */
.wrap{
  width:min(1120px, calc(100% - 48px));
  margin:0 auto;
}

/* ===============================
   HEADER (ANTET ALB)
================================ */
.site-header{
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
}

.site-header .header__inner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 0;
}

/* LOGO */
.brand__logo{
  height:28px;
  width:auto;
  display:block;
}

/* BRAND */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
}

.brand__name{
  color:#0b0f19;
  font-size:18px;
  letter-spacing:.2px;
}

/* scoatem bulina */
.brand__dot{ display:none; }

/* ===============================
   NAV – BUTOANE MOV
================================ */
.nav{
  margin-left:auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.nav a{
  background:var(--accent);
  color:#ffffff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:600;
  line-height:1;
  border:1px solid rgba(124,58,237,.25);
  transition:background .15s ease, transform .15s ease;
}

.nav a:hover{
  background:var(--accent-hover);
  transform:translateY(-1px);
}

.nav a.active{
  background:var(--accent-strong);
}

/* ===============================
   MAIN (împinge footer jos)
================================ */
main{
  flex:1; /* IMPORTANT: footer jos mereu */
}

/* ===============================
   HERO
================================ */
.hero{
  padding:56px 0;
}

.kicker{
  color:var(--muted);
  letter-spacing:.12em;
  font-size:12px;
  margin:0 0 12px;
}

.hero h1{
  font-size:42px;
  line-height:1.15;
  margin:0 0 16px;
}

.lead{
  color:var(--muted);
  max-width:70ch;
  font-size:18px;
  margin:0;
}

/* ===============================
   FOOTER
================================ */
.footer{
  margin-top:0;              /* IMPORTANT */
  padding:18px 0 28px;       /* IMPORTANT */
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:14px;
}

/* ===============================
   DESKTOP LARGE
================================ */
@media (min-width:1200px){
  .hero{ padding:72px 0; }
  .hero h1{ font-size:48px; }
}

/* ===============================
   MOBILE
================================ */
@media (max-width:640px){
  .site-header .header__inner{
    flex-wrap:wrap;
  }

  .nav{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }

  .wrap{
    width:min(1120px, calc(100% - 28px));
  }

  .hero h1{
    font-size:34px;
  }

  .lead{
    font-size:16px;
  }
}
/* ===============================
   INVESTIGAȚIE – HERO FULL NEGRU
   (lipește la FINAL în styles.css)
================================ */

.story-hero{
  background: #0B0D14;           /* negrul site-ului */
  color: #ffffff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 36px 0 28px;
}

.story-hero__kicker{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.story-hero__title{
  margin: 0;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 900;
  color: #ffffff;
  max-width: 26ch;              /* arată “editorial”, ca la publicații */
}

.story-hero__badge{
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--accent);     /* mov plin */
  color: #ffffff;                /* text alb */
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.15);
}

.story-hero__badge:hover{
  background: var(--accent-hover);
}

/* Responsive */
@media (max-width: 640px){
  .story-hero{
    padding: 26px 0 20px;
  }
  .story-hero__title{
    font-size: 28px;
    max-width: 100%;
  }
}
/* ============ RESPONSIVE CORE ============ */

/* 1) Nu lăsa nimic să iasă din ecran */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* 2) Linkuri lungi / URL-uri să se rupă frumos */
a, .ref-url, p, li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 3) Dacă ai tabele (în investigații apar des) */
table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 4) Padding adaptiv pe wrap */
.wrap {
  padding-left: clamp(14px, 3.5vw, 18px);
  padding-right: clamp(14px, 3.5vw, 18px);
}

/* 5) Titluri responsive (scalare fluidă) */
h1 {
  font-size: clamp(1.85rem, 4.8vw, 2.55rem);
}

h2 {
  font-size: clamp(1.25rem, 3.6vw, 1.55rem);
}

/* 6) Textul să fie ușor de citit pe mobil */
p {
  font-size: clamp(1.02rem, 2.8vw, 1.075rem);
  line-height: 1.78;
}

/* 7) Cuprinsul să nu pară înghesuit pe mobil */
.toc {
  padding: clamp(16px, 3vw, 20px);
}

/* 8) Mic tweak pentru header pe ecrane mici */
@media (max-width: 640px){
  .story-head{
    padding: 34px 0 24px;
  }
  .kicker{
    font-size: .75rem;
  }
  .meta-chip{
    font-size: .9rem;
    padding: 7px 11px;
  }
}