/* /events — coming up, the archive (grouped by year), little ones (mini events strip). */

.ev-sec { margin-top: 48px; }
.ev-sec:first-of-type { margin-top: 0; }
.ev-sec .section-title { margin-bottom: 16px; }

/* ---------- the archive, grouped by year ---------- */
.archive-year { margin-top: 26px; }
.archive-year:first-child { margin-top: 0; }
.archive-year-label { margin-bottom: 12px; }
.archive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.archive-card {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-sm);
  background: var(--coal); box-shadow: var(--shadow-soft); transition: transform .4s var(--spring);
}
.archive-card:hover { transform: translateY(-3px); }
.archive-card img, .archive-card .nocover { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); transition: filter .6s, transform 1.2s var(--ease); }
.archive-card:hover img { filter: none; transform: scale(1.04); }
.archive-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(16, 29, 51, .88)); }
.archive-info { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: grid; gap: 2px; }
.archive-info b { font: italic 400 24px/1.05 var(--serif); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archive-info small { font-size: 11px; color: rgba(255, 255, 255, .75); }

/* ---------- little ones: a horizontal strip of small rounded tiles ---------- */
.mini-strip { padding-top: 2px; }
.mini-tile {
  position: relative; flex: 0 0 34%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-xs);
  scroll-snap-align: start; background: var(--coal); box-shadow: var(--shadow-soft); transition: transform .35s var(--spring);
}
.mini-tile:hover { transform: translateY(-3px); }
.mini-tile img, .mini-tile .nocover { width: 100%; height: 100%; object-fit: cover; }
.mini-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(16, 29, 51, .85)); }
.mini-info { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 1; display: grid; }
.mini-info b { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-info small { font-size: 10.5px; color: rgba(255, 255, 255, .75); }

@media (min-width: 720px) {
  .archive-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .mini-tile { flex-basis: 16%; }
}