/* ==========================================================================
   "In the spotlight": award and media photos, as rounded cards.
   Used on the About page, with the same width and alignment it had on the home page (the header's edges).
   Relies on the tokens in base.css (--section-y, --fs-h2, --edge, --radius-card, --u).
   ========================================================================== */

/* ───────────── Layout ─────────────
   Rounded photo cards. Phones: one card per row at the photo's own shape (nothing cropped). Tablets: two per
   row at 3:2, the photos' typical shape. Desktop: the mosaic, with TiEcon and the Kairali award as the large
   tiles. Tiles there have fixed shapes, so each photo has a focal point (--pos) that keeps its faces and award
   text in frame. */
.moments { padding: var(--section-y) 0 0; }
/* Heading: the About page's section heading (.pg-head: label + title, left-aligned), on the cards' edges. */
.moments__head { padding-inline: var(--gutter); }

.moments__grid { list-style: none; margin: 32px 0 0; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.moment { position: relative; min-width: 0; aspect-ratio: var(--r); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
/* Hairline border drawn inside the card, so it never changes the card's shape. */
.moment::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--divider); pointer-events: none; }
.moment figure { position: relative; margin: 0; height: 100%; }
.moment img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); user-select: none; transition: transform 700ms var(--ease-out); }
.moment figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 14px; text-align: left;
  background: linear-gradient(to top, rgba(var(--bg-rgb), 0.9), rgba(var(--bg-rgb), 0.5) 55%, rgba(var(--bg-rgb), 0));
}
.moment__tag { font-size: 13px; line-height: 1.35; font-weight: 600; color: var(--text-primary); }

/* Focal points (x y) for cropped tiles. */
.moment--a { --pos: 50% 62%; }   /* TiEcon: the award handover, with the name banner above */
.moment--b { --pos: 50% 25%; }   /* Headstart: room above the heads */
.moment--c { --pos: 50% 45%; }
.moment--d { --pos: 50% 38%; }   /* e-Governance: the award banner and the row of faces together */
.moment--e { --pos: 50% 35%; }
.moment--f { --pos: 35% 45%; }   /* American Center: the speaker's face */
.moment--g { --pos: 50% 40%; }
.moment--h { --pos: 50% 20%; }   /* Kairali: the AWARDS banner fully in, with the handover below */
.moment--i { --pos: 50% 45%; }
.moment--j { --pos: 50% 35%; }

/* Collapsed (JS only): the first four photos, plus a Show more / Show less button. Without JS all show. */
.moments__more { display: none; }
.js .moments__more { display: flex; justify-content: center; margin-top: 24px; padding-inline: var(--gutter); }
.js .moments:not(.is-expanded) .moment--more { display: none; }
.moments__more-btn.btn-secondary { min-height: 44px; padding: 0 22px; font-size: 14px; }

@media (min-width: 640px) and (max-width: 1023.98px) {
  .moments__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .moment { aspect-ratio: 3 / 2; }
}

/* Desktop: the mosaic. */
@media (min-width: 1024px) {
  .moments { background: var(--bg-2); }
  .moments__head { padding-inline: var(--edge); }
  .moments__grid {
    /* Same side edges as the header (logo / Get the App); the same gap under the heading as Community events. */
    margin-top: 24px; padding: 0 var(--edge); gap: calc(20 * var(--u));
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, calc(215 * var(--u))); grid-auto-rows: calc(250 * var(--u)); /* the two large tiles (TiEcon, Kairali): a little shorter */
    grid-template-areas: "a a h h" "a a h h" "d d f f" "b c e g" "i i j j";
  }
  .js .moments:not(.is-expanded) .moments__grid { grid-template-areas: "a a h h" "a a h h" "d d f f"; }
  .moment { aspect-ratio: auto; }
  .moment--a { grid-area: a; } .moment--b { grid-area: b; } .moment--c { grid-area: c; } .moment--d { grid-area: d; } .moment--e { grid-area: e; }
  .moment--f { grid-area: f; } .moment--g { grid-area: g; } .moment--h { grid-area: h; } .moment--i { grid-area: i; } .moment--j { grid-area: j; }
  .moment figcaption { padding: calc(72 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u)); }
  .moment__tag { font-size: max(13px, calc(15 * var(--u))); }
  .moment--a figcaption, .moment--h figcaption { padding: calc(96 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u)); }
  .moment--a .moment__tag, .moment--h .moment__tag { font-size: max(14px, calc(17 * var(--u))); }
  .js .moments__more { margin-top: calc(40 * var(--u)); }
  /* A gentle 3% zoom on hover. */
  .moment:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .moment img { transition: none; } .moment:hover img { transform: none; } }