/* =====================================================================
   mgallery.css — "Campus Life" featured carousel gallery
   Balanced layout: 1 large featured card + 2 supporting cards.
   Each card is an auto-advancing slideshow — images cross-fade one by one
   with a gentle Ken-Burns zoom. Pure CSS (no JS), so it always runs.
   Namespaced under .mg. Uses brand tokens.
   ===================================================================== */
#moments{
  background: #F1E7D0;
}
.mg { --mg-accent: var(--maroon, #8D2130); --mg-ink: #262320; --mg-muted: #6E6A63; --mg-r: 16px; }

.mg__head { text-align: center; max-width: 640px; margin: 0 auto 2.4rem; }
.mg__eyebrow { display: inline-flex; align-items: center; gap: .6em; font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--mg-accent); margin-bottom: 1rem; }
.mg__eyebrow::before, .mg__eyebrow::after { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .5; }
.mg__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.12; font-size: clamp(1.9rem, 1.35rem + 2.2vw, 3rem); color: var(--mg-ink); }
.mg__title em { font-style: italic; color: var(--mg-accent); }
.mg__sub { margin-top: .9rem; font-size: 1.02rem; line-height: 1.7; color: var(--mg-muted); }

/* ---- 6-box bento: two large + four supporting ---- */
.mg__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: clamp(500px, 52vw, 680px);
}
.mg-1 { grid-column: 1 / 3; grid-row: 1; }   /* large — top left  */
.mg-2 { grid-column: 3;     grid-row: 1; }
.mg-3 { grid-column: 4;     grid-row: 1; }
.mg-4 { grid-column: 1;     grid-row: 2; }
.mg-5 { grid-column: 2;     grid-row: 2; }
.mg-6 { grid-column: 3 / 5; grid-row: 2; }   /* large — bottom right */

.mg-card { position: relative; overflow: hidden; border-radius: var(--mg-r); background: #efe9de; box-shadow: 0 16px 40px rgba(40,25,20,.13); }
/* each box = a sliding carousel: track of 7 slides (6 images + first duplicated
   for a seamless loop). Slides advance one by one, sliding horizontally.
   width/flex-basis and the keyframe stops below are both derived from
   slideCount=7 (100*7=700%, 100/7≈14.2857% per slide) — if the image count
   per card ever changes, these need recomputing together. */
.mg-track { display: flex; height: 100%; width: 700%; will-change: transform; }
.mg-track img { flex: 0 0 14.2857%; width: 14.2857%; height: 100%; object-fit: cover; object-position: center; display: block; }
.mg-track--left  { animation: mgSlideL var(--d, 14s) ease-in-out infinite; }
.mg-track--right { animation: mgSlideR var(--d, 14s) ease-in-out infinite; }
@keyframes mgSlideL {           /* images slide to the LEFT */
  0%,   11.4% { transform: translateX(0);        }
  14.3%, 25.7%{ transform: translateX(-14.2857%);}
  28.6%, 40%  { transform: translateX(-28.5714%);}
  42.9%, 54.3%{ transform: translateX(-42.8571%);}
  57.1%, 68.6%{ transform: translateX(-57.1429%);}
  71.4%, 82.9%{ transform: translateX(-71.4286%);}
  85.7%, 100% { transform: translateX(-85.7143%);}
}
@keyframes mgSlideR {           /* images slide to the RIGHT */
  0%,   11.4% { transform: translateX(-85.7143%);}
  14.3%, 25.7%{ transform: translateX(-71.4286%);}
  28.6%, 40%  { transform: translateX(-57.1429%);}
  42.9%, 54.3%{ transform: translateX(-42.8571%);}
  57.1%, 68.6%{ transform: translateX(-28.5714%);}
  71.4%, 82.9%{ transform: translateX(-14.2857%);}
  85.7%, 100% { transform: translateX(0);        }
}
.mg-card:hover .mg-track { animation-play-state: paused; }
.mg-card__glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); border-radius: inherit; }

@media (prefers-reduced-motion: reduce) {
  .mg-track { animation: none !important; transform: translateX(0); }
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .mg__grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 200px); height: auto; }
  .mg-1 { grid-column: 1 / 3; grid-row: 1; }
  .mg-2 { grid-column: 1; grid-row: 2; }
  .mg-3 { grid-column: 2; grid-row: 2; }
  .mg-4 { grid-column: 1; grid-row: 3; }
  .mg-5 { grid-column: 2; grid-row: 3; }
  .mg-6 { grid-column: 1 / 3; grid-row: 4; }
}
@media (max-width: 560px) {
  .mg__grid { grid-template-rows: repeat(4, 168px); gap: 10px; }
}