/* ═══════════════════════════════════════════════════════════════
   school-news.html — page stylesheet
   Was a <style> block in the page. It is a separate file, not part
   of styles.css, because these selectors are page-scoped: moving
   them into the shared sheet would have applied them site-wide.
   (school-news.html styles .news-card, and so does index.html;
    offline.html sets bare *, body, h1 and p rules.)
   ═══════════════════════════════════════════════════════════════ */

.news-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1.5rem}
.news-card{background:var(--surface);border:1px solid rgba(11,31,66,.1);border-radius:var(--rad-l);padding:1.5rem 1.8rem;transition:box-shadow .2s}
.news-card:hover{box-shadow:var(--shd-md)}
.news-filter { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.nf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nf-flabel { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); min-width: 66px; }
.nf-fbtn { font: inherit; font-size: .8rem; padding: 6px 15px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(11,31,66,.18); background:var(--surface); color: var(--txt); transition: all .2s; }
.nf-fbtn:hover { border-color: var(--gold); }
.nf-fbtn.active { background: var(--gold); border-color: var(--gold); color: #04101f; font-weight: 700; }
[data-theme="dark"] .nf-fbtn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); }
/* The rule above and .nf-fbtn.active both weigh (0,2,0), and this one comes
   later, so in dark mode the selected filter lost its gold ground while
   keeping the dark ink meant to sit on it — measured 1.17:1. Restating the
   active state after it is what settles the order. */
[data-theme="dark"] .nf-fbtn.active { background: var(--gold); border-color: var(--gold); color: #04101f; }
.nf-empty { margin-top: 18px; color: var(--txt-lt); font-size: .9rem; }
.nf-reset { font: inherit; color: var(--gold-ink); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.yr-hidden { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .news-card:hover, .news-feature:hover { animation: newsFloat 1.8s ease-in-out infinite; }
  @keyframes newsFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
}
@media (prefers-reduced-motion: reduce) { .news-card:hover, .news-feature:hover { transform: translateY(-4px); } }
.news-meta{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;flex-wrap:wrap}
.news-date{font-size:.78rem;color:var(--txt-mid);font-family:'Inter',sans-serif}
.news-tag{font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:50px;background:var(--gold);color:var(--ink)}
.news-tag.tag-sport{background:var(--pine);color:#fff}
.news-tag.tag-academic{background:var(--g-deep);color:#fff}
.news-tag.tag-event{background:#7a3b8b;color:#fff}
.news-tag.tag-award{background:#c0392b;color:#fff}
.news-card h3{font-family:'Playfair Display',serif;font-size:1.15rem;color:var(--ink);margin:0 0 .6rem;line-height:1.4}
.news-card p{font-size:.9rem;color:var(--txt-mid);line-height:1.7;margin:0}
.news-feature p{margin:0 0 .9rem}
.news-feature h3{font-size:1.5rem}
.news-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:1.2rem}
.news-gallery .gallery-item{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:10px;cursor:zoom-in;box-shadow:var(--shd-sm);background:linear-gradient(160deg,rgba(11,31,66,.10),rgba(11,31,66,.04))}
/* show the ENTIRE photograph — never crop the subject out of frame */
.news-gallery .gallery-item img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s ease}
.news-gallery .gallery-item:hover img{transform:scale(1.04)}
[data-theme="dark"] .news-gallery .gallery-item{background:rgba(255,255,255,.05)}
@media(max-width:600px){.news-gallery{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}
[data-theme="dark"] .news-card{background:var(--surface);border-color:rgba(255,255,255,.08)}