/*  ────────────────────────────────────────────────────────────
    SolarPVSizer  –  NEWS PAGE OVERRIDE
    Turns each <article> on /news/news.php into a “card” and
    lays them out 2-across on desktops, 1-across on mobiles.
    (Built to mimic the cards you already use on report.php.)
   ──────────────────────────────────────────────────────────── */

/* 1️⃣  GRID WRAPPER
   Put class="news-feed" on the element that contains the list
   of stories (usually the <main> or a <section>). */
.news-feed{
  /* one column by default (phones) */
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;              /* space between cards   */
  margin-block:2rem;       /* breathing room top/btm*/
}

/* Two columns ≥ 768 px (≈ small desktop / landscape tablet) */
@media (min-width:768px){
  .news-feed{
    grid-template-columns:repeat(2,1fr);
  }
}

/* 2️⃣  CARD BASE
   Works whether each story is <article>, .story, or .news-item */
.news-feed article,
.news-feed .news-item,
.news-feed .story{
  background:#fff;
  border:1px solid #e1e4e8;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  padding:1.25rem 1.5rem;
  display:flex;
  flex-direction:column;
}

/* 3️⃣  TYPOGRAPHY */
.news-feed article h3{
  margin:0 0 .5rem;
  font-size:1.05rem;
  line-height:1.3;
}

.news-feed article p{
  margin:0 0 .75rem;
  font-size:.925rem;
  line-height:1.5;
}

/* 4️⃣  LINKS */
.news-feed article a{
  color:#0073e6;            /* subtle blue */
  text-decoration:none;
  font-weight:500;
  margin-top:auto;          /* “Read more” pins to card bottom */
}
.news-feed article a:hover{
  text-decoration:underline;
}

/* 5️⃣  OPTIONAL: make headings that separate regions (e.g. “South Africa”)
       stand out without looking like cards themselves                */
.news-feed > h2,
.news-feed > h3{
  grid-column:1/-1;         /* full-width across grid */
  margin:.5rem 0;
}