/* =====================================================================
   Maldon Gymnastics Club — Club News section (homepage)
   Equal-sized cards. The first post is baked into index.html so it is
   crawlable and works without JavaScript; /assets/cms.js then replaces
   the grid with whatever is in /data/news.json.
===================================================================== */

/* Cards are capped at 380px so two posts don't stretch into huge panels,
   and centred so any number of them stays balanced. */
.news-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),380px));
  justify-content:center;align-items:stretch;}

.news-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;}
.news-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(8,17,32,.35);}

/* Fixed shape for every image area, so cards line up whatever the photo.
   contain, not cover — posters must stay whole to be legible. */
.news-card .shot{display:block;aspect-ratio:4/5;background:var(--bg-2);
  border-bottom:1px solid var(--line);padding:12px;cursor:zoom-in;position:relative;}
.news-card .shot img{width:100%;height:100%;object-fit:contain;display:block;border-radius:8px;}
.news-card .shot::after{content:"";position:absolute;inset:0;background:rgba(8,17,32,0);
  transition:background .25s ease;}
.news-card .shot:hover::after{background:rgba(8,17,32,.07);}
.news-card .inner{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column;}
.news-card h3{font-family:"Bricolage Grotesque",sans-serif;font-size:1.22rem;font-weight:700;
  line-height:1.28;margin:12px 0 9px;color:var(--heading);}
.news-card p{font-size:.97rem;line-height:1.6;color:var(--ink);margin:0;}

/* ---------- shared bits ---------- */
.news-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.news-date{font-size:.84rem;color:var(--muted);font-weight:500;}
.news-tag{display:inline-block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:.74rem;padding:.24em .8em;border-radius:999px;letter-spacing:.02em;}
.news-tag.club{background:rgba(31,163,160,.16);color:var(--green);}
.news-tag.camps{background:rgba(255,107,71,.16);color:var(--coral);}
.news-tag.results{background:rgba(255,176,32,.2);color:#d98a00;}
.news-tag.community{background:rgba(155,89,255,.16);color:#9b59ff;}
[data-theme="dark"] .news-tag.results{color:#F0B94B;}
[data-theme="dark"] .news-tag.community{color:#c19bff;}

.news-link{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;
  align-self:flex-start;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.93rem;
  color:var(--green);text-decoration:none;transition:gap .2s ease;}
.news-link:hover{gap:11px;text-decoration:underline;text-underline-offset:4px;}

@media(prefers-reduced-motion:reduce){
  .news-card,.news-card .shot::after,.news-link{transition:none;}
  .news-card:hover{transform:none;}
}