/* =========================================================================
   Newsroom layout — extends the core dark‑theme (styles.css)
   ========================================================================= */

/* ---------- HERO ---------- */
.news-hero{
    background:linear-gradient(135deg,#13253b 0%,var(--bg-900) 100%);
    padding:3.2rem 1rem 4rem;
    margin-bottom: 100px;
  }
  .news-hero-inner{
    max-width:1100px;margin:0 auto;
  }
  .news-heading{
    font-size:clamp(2.4rem,4.5vw + 1rem,3.9rem);
    font-weight:700;
    line-height:1.15;
  }
  .news-heading span{
    color:var(--accent-500);
  }
  .news-tagline{
    font-size:1.25rem;
    color:#cbd5e1;
    margin:.75rem 0 2.6rem;
  }
  
  /* search bar */
  .news-search{
    max-width:380px;
    position:relative;
  }
  .news-search input{
    width:100%;
    padding:.75rem 1rem;
    border-radius:.65rem;
    border:none;
    background:var(--bg-700);
    color:var(--text-100);
    font-size:1rem;
  }
  .news-search input::placeholder{ color:#94a3b8; }
  .news-search input:focus{ outline:2px solid var(--accent-500); }
  
  /* ---------- GRID / CARDS ---------- */
  .news-main{
    max-width:1100px;
    margin:-3rem auto 4rem;          /* slight overlap into hero */
    padding:0 1rem;
  }
  
  /* masonry‑style responsive grid */
  .news-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:2rem;
    list-style:none;
    margin:0;
    padding:0;
  }
  
  .news-card{
    background:var(--bg-700);
    border-radius:1rem;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .25s ease,box-shadow .25s ease;
  }
  .news-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,.35);
  }
  
  /* thumbnail */
  .news-thumb{
    width:100%;
    height:180px;
    object-fit:cover;
  }
  
  /* body */
  .news-body{
    padding:1.4rem 1.35rem 1.8rem;
    display:flex;
    flex-direction:column;
    gap:.85rem;
  }
  .news-body h2{
    font-size:1.25rem;
    font-weight:600;
    line-height:1.35;
  }
  .news-meta{
    font-size:.9rem;
    color:#94a3b8;
    text-transform:uppercase;
    letter-spacing:.6px;
  }
  .news-excerpt{
    font-size:1.05rem;
    line-height:1.6;
    color:#d1d5db;
    flex:1;
  }
  .read-more{
    align-self:flex-start;
    background:var(--accent-500);
    color:#0f172a;
    padding:.55rem 1.15rem;
    border-radius:.55rem;
    font-weight:600;
    text-decoration:none;
    transition:background .2s ease;
  }
  .read-more:hover{ background:var(--accent-600); }
  
  /* responsive tweaks */
  @media(max-width:540px){
    .news-thumb{ height:150px; }
    .news-body h2{ font-size:1.18rem; }
  }
  
  /* =========================================================================
   Article‑specific tweaks – inherits colours from styles.css
   ========================================================================= */

/* whole article wrapper */
.story{
    max-width:1300px;
    margin:0 auto 3rem;
    padding:0 1rem;
    justify-items: auto;
  }
  
  /* ---------- HERO ---------- */
  .story-hero{
    text-align:left;
    padding:3rem 0 2rem;
    height: auto;
  }
  .story-title{
    font-size:clamp(2.1rem,4vw + 1rem,3.2rem);
    line-height:1.2;
    font-weight:700;
    margin-bottom:.4rem;
  }
  .story-meta{
    font-size:.95rem;
    color:#94a3b8;
    text-transform:uppercase;
    letter-spacing:.6px;
    margin-bottom:2rem;
  }
  
  /* feature image */
  .story-banner{
    width:100%;
    max-height:360px;
    object-fit:cover;
    border-radius:1rem;
    margin-bottom:2.5rem;
  }
  
  /* ---------- BODY ---------- */
  .story-body{
    font-size:1.12rem;
    line-height:1.7;
    color:#d1d5db;
  }
  .story-body h2{
    font-size:1.55rem;
    font-weight:600;
    margin:2.6rem 0 1rem;
    color:var(--accent-500);
  }
  .story-body ul{
    padding-left:1.3rem;
    margin:1rem 0;
  }
  .story-body li{
    margin-bottom:.5rem;
  }
  .story-body a{
    color:var(--accent-500);
  }
  .story-body a:hover{
    color:var(--accent-600);
  }
  
  /* inline blockquote */
  blockquote{
    border-left:4px solid var(--accent-500);
    margin:2rem 0;
    padding:.25rem 0 .25rem 1.1rem;
    font-style:italic;
    color:#e2e8f0;
  }
  
  /* wide figure */
  .story-img-wide{
    margin:2.5rem 0;
    text-align:center;
  }
  .story-img-wide img{
    width:100%;
    border-radius:1rem;
  }
  .story-img-wide figcaption{
    font-size:.95rem;
    color:#94a3b8;
    margin-top:.65rem;
  }
  
  /* ---------- NAV ---------- */
  .story-nav{
    display:flex;
    justify-content:flex-start;
    margin-top:3rem;
  }
  .back-btn{
    display:inline-block;
    background:var(--bg-700);
    border:1px solid #334155;
    padding:.6rem 1.2rem;
    border-radius:.55rem;
    color:var(--text-100);
    text-decoration:none;
    font-weight:600;
    transition:background .2s ease,border .2s ease;
    margin-bottom: 15px;
  }
  .back-btn:hover{
    background:var(--bg-800,#16233c);
    border-color:var(--accent-500);
  }
  
  /* ===== GLOBAL SAFETY NET – add once, near the top of your CSS ===== */
*, *::before, *::after{
  box-sizing:border-box;          /* padding/border stay inside the declared width  */
}
html,body{
  overflow-x:hidden;              /* belt‑and‑suspenders: hide any stray overflow   */
}

/* ===== CONTAINERS THAT NEED CLAMPED PADDING ===== */
.news-hero-inner,
.news-main,
.story{
  /* never let padding push the box wider than the viewport            */
  max-inline-size:100%;
  padding-inline:max(1rem,env(safe-area-inset-left));
}

/* ===== IMAGES & WIDE FIGURES ===== */
.story-banner,
.story-img-wide img{
  max-width:100%;
  height:auto;
}

/* (optional) shrink huge tables on phones */
@media (max-width:740px){
  .leader-table{font-size:.9rem;}
  .story{
    margin: 0;
  }
}