/* Mirembe Junior School — Events + media rendering
   Extends the Phase 2 design system (tokens.css) rather than replacing it:
   same color tokens, same type scale, same motion budget. */

/* ---------- Shared blur-up media frame (LQIP) ---------- */
/* Box shape comes purely from the inline aspect-ratio (real stored
   width/height) so there is zero layout shift; the tiny blurred placeholder
   paints instantly as a CSS background, and the real <img> fades in once
   loaded. */
.ds-media-frame{
  display:block; position:relative; overflow:hidden; border-radius:10px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:var(--color-border);
}
.ds-media-frame picture, .ds-media-frame img, .ds-media-frame video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.ds-media-frame img{ aspect-ratio:auto; opacity:0; transition:opacity .5s ease; }
.ds-media-frame img.is-loaded{ opacity:1; }

/* ---------- Homepage: Latest Event ---------- */
.ds-latest-event{ position:relative; min-height:min(72vh, 620px); display:flex; align-items:flex-end; overflow:hidden; color:#fff; }
.ds-latest-event-media{ position:absolute; inset:0; }
.ds-latest-event-media .ds-media-frame{ position:absolute; inset:-6% -6%; height:112%; border-radius:0; }
.ds-latest-event-tint{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(58,30,4,0.85) 0%, rgba(58,30,4,0.32) 55%, rgba(58,30,4,0.12) 100%);
}
.ds-latest-event-content{ position:relative; z-index:2; padding:var(--space-7) var(--space-4) var(--space-8); max-width:760px; }
.ds-latest-event-content h2{ font-size:var(--size-display-2); font-weight:800; margin:var(--space-3) 0; color:#fff; }
.ds-latest-event-content p{ color:rgba(255,255,255,0.88); font-size:var(--size-body-lg); margin:0 0 var(--space-4); max-width:56ch; }

@media (prefers-reduced-motion:no-preference){
  .ds-latest-event-media[data-parallax]{ will-change:transform; }
}

/* ---------- Events grid (hub) ---------- */
.ds-events-filter .ds-badge{ cursor:pointer; text-decoration:none; }
.ds-events-grid{
  column-count:1; column-gap:var(--space-4);
}
@media (min-width:700px){ .ds-events-grid{ column-count:2; } }
@media (min-width:1100px){ .ds-events-grid{ column-count:3; } }

.ds-event-card{
  break-inside:avoid; margin-bottom:var(--space-4); background:var(--color-surface);
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow-card); border:2px solid transparent;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  display:block;
}
.ds-event-card:hover, .ds-event-card:focus-within{ box-shadow:var(--shadow-card-hover); transform:translateY(-4px); border-color:var(--color-yellow); }
.ds-event-card-media{ display:block; position:relative; }
.ds-event-card-media .ds-media-frame{ border-radius:0; }
.ds-event-card-badge{ position:absolute; top:12px; left:12px; z-index:2; }
.ds-event-card-body{ padding:var(--space-4); }
.ds-event-card-date{ display:block; font-size:var(--size-micro); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--color-accent); margin-bottom:6px; }
.ds-event-card-body h3{ font-family:var(--font-body); font-size:var(--size-h4); font-weight:700; margin:0 0 8px; }
.ds-event-card-body h3 a{ color:var(--color-ink); text-decoration:none; }
.ds-event-card-body h3 a:hover{ text-decoration:underline; }
.ds-event-card-body p{ margin:0; color:var(--color-text-secondary); font-size:var(--size-caption); line-height:1.5; }

.ds-pagination{ display:flex; justify-content:center; gap:8px; margin-top:var(--space-6); }
.ds-pagination-link{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--color-border); color:var(--color-ink); text-decoration:none; font-size:var(--size-caption);
  transition:background .15s ease, border-color .15s ease;
}
.ds-pagination-link:hover{ background:var(--color-yellow-soft); border-color:var(--color-yellow); }
.ds-pagination-link.is-active{ background:var(--color-orange-deep); border-color:var(--color-orange-deep); color:#fff; font-weight:700; }

/* ---------- Single event page ---------- */
.ds-event-hero{ position:relative; min-height:min(60vh, 520px); display:flex; align-items:flex-end; overflow:hidden; color:#fff; }
.ds-event-hero-media{ position:absolute; inset:0; border-radius:0; }
.ds-event-hero-tint{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(58,30,4,0.82) 0%, rgba(58,30,4,0.22) 60%, transparent 100%); }
.ds-event-hero-content{ position:relative; z-index:2; padding:var(--space-7) var(--space-4) var(--space-6); }
.ds-event-hero-content h1{ font-size:var(--size-display-2); margin:var(--space-3) 0 var(--space-2); color:#fff; max-width:22ch; }
.ds-event-hero-content time{ color:rgba(255,255,255,0.85); font-size:var(--size-caption); }

.ds-event-lede{ font-size:var(--size-body-lg); color:var(--color-ink); margin:0 0 var(--space-3); }
.ds-event-body{ color:var(--color-text-secondary); line-height:1.7; }

/* ---------- Video grid + restrained autoplay-preview ---------- */
.ds-video-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space-4); }
.ds-video-frame{ aspect-ratio:16/9; cursor:pointer; }
.ds-video-frame video{ object-fit:cover; }
.ds-video-expand{
  position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,0.92); border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,0.25); transition:transform .15s ease;
}
.ds-video-expand svg{ width:22px; height:22px; fill:var(--color-ink); margin-left:2px; }
.ds-video-expand:hover{ transform:scale(1.08); }

/* ---------- Lightbox (photos + expanded video) ---------- */
.ds-lightbox-item{ display:block; }
.ds-lightbox-modal{
  position:fixed; inset:0; z-index:1000; background:rgba(15,15,17,0.94);
  display:flex; align-items:center; justify-content:center; padding:var(--space-4);
  opacity:0; visibility:hidden; transition:opacity .25s ease;
}
.ds-lightbox-modal.is-open{ opacity:1; visibility:visible; }
.ds-lightbox-modal img, .ds-lightbox-modal video{ max-width:100%; max-height:88vh; border-radius:6px; display:block; }
.ds-lightbox-close, .ds-lightbox-prev, .ds-lightbox-next{
  position:absolute; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); color:#fff;
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:20px; line-height:1;
}
.ds-lightbox-close{ top:var(--space-4); right:var(--space-4); }
.ds-lightbox-prev{ left:var(--space-4); top:50%; transform:translateY(-50%); }
.ds-lightbox-next{ right:var(--space-4); top:50%; transform:translateY(-50%); }
.ds-lightbox-close:hover, .ds-lightbox-prev:hover, .ds-lightbox-next:hover{ background:rgba(255,255,255,0.22); }
@media (max-width:640px){ .ds-lightbox-prev, .ds-lightbox-next{ width:38px; height:38px; } }

@media (prefers-reduced-motion:reduce){
  .ds-event-card, .ds-video-expand{ transition:none !important; }
}