/* ==========================================================================
   Events  —  /events/
   Loaded ALONGSIDE page-head.css and tabs.css.

   THREE TABS: Recent (photographs from every event), Upcoming, Past.

   THE SAME SYSTEM AS THE GALLERY
   Gold outlined tabs, a gold heading, and cover cards carrying their date and
   title over the photograph. The two pages are the same kind of thing - dated
   things with pictures - so they read as one site rather than two.

   The cards are the gallery's album cards down to the stacked paper edge,
   asked for as a pattern so the two listings read as one design rather than
   two near-misses. On an album that edge means "there are more photographs
   underneath this one"; here it is decoration, which is worth knowing but is
   not a reason to make the two pages differ.

   NOT .event-card. That class is shared with the home page and the event
   detail page, so restyling it would have moved both. These are .ev-card.

   RESPONSIVE
   Four across, three under 992px, two under 768px, one under 576px - the
   same steps the gallery takes.
   ========================================================================== */

.ev-section { background: var(--page-alt); }

/* --------------------------------------------------------- the heading --- */
/* Same reasoning as the gallery: page-head.css puts --red on the second half
   of the heading and on the rule, and this page is gold throughout. Scoped,
   so the other pages that share page-head.css keep their red. */
.ev-section .page-heading span { color: var(--accent); }
.ev-section .page-rule { background: var(--accent); }

/* ------------------------------------------------------------- the tabs --- */
/* tabs.css gives every pill flex: 1 1 auto and a filled blue background. With
   two pills that makes each half the page wide, and two saturated blocks over
   a grid of photographs compete with the photographs. Outlined and sized to
   their words instead - identical to the gallery's. */
.ev-tabset .tabset__nav { gap: 10px; margin-bottom: 30px; }

.ev-tabset .tab-btn {
  flex: 0 0 auto;
  min-height: 0;
  padding: 10px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .88rem;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition);
}
.ev-tabset .tab-btn:hover {
  background: var(--paper);
  border-color: var(--accent);
  color: var(--ink);
}
.ev-tabset .tab-btn.is-active {
  background: rgba(184, 148, 46, .10);
  border-color: var(--accent);
  color: #7d631f;
}
.ev-tabset .tab-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* The number beside each label. It is why an empty Upcoming tab reads as
   "nothing scheduled" rather than as something that failed to load. */
.ev-count {
  margin-left: 7px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--page-alt);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
}
.ev-tabset .tab-btn.is-active .ev-count { background: rgba(184, 148, 46, .18); }

/* ---------------------------------------------------------- panel head --- */
.ev-eyebrow {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ev-head { margin: 0 0 22px; }
.ev-head__title { margin: 0 0 6px; font-size: 1.25rem; color: var(--ink); }
.ev-meta {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- cards --- */
/* The gallery's album cards, exactly - four across, the stacked paper edge
   above the cover, the date in gold over a scrim. Asked for deliberately, so
   the two listings read as one design rather than two near-misses.
   
   One thing worth knowing: on an album that stacked edge means "there are
   more photographs underneath this one", which is true there and is only
   decoration here. It is here because the pattern was asked for as a whole. */
.ev-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 22px;
}

.ev-card {
  position: relative;
  display: block;
  padding-top: 9px;      /* room for the stacked edge above the cover */
  text-decoration: none;
}

.ev-card__stack::before,
.ev-card__stack::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 3px 3px 0 0;
  background: var(--paper);
  box-shadow: 0 -1px 2px rgba(0, 0, 0, .10);
}
.ev-card__stack::before { top: 0; width: 84%; height: 5px; opacity: .55; }
.ev-card__stack::after  { top: 4px; width: 93%; height: 6px; opacity: .8; }

.ev-card__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  aspect-ratio: 13 / 10;
  background: var(--page);
  transition: box-shadow var(--transition);
}
.ev-card:hover .ev-card__frame { box-shadow: var(--shadow-sm); }
.ev-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.ev-card:hover .ev-card__frame img { transform: scale(1.05); }
.ev-card:focus-visible .ev-card__frame { outline: 3px solid var(--red); outline-offset: 2px; }

/* An event with no cover uploaded still needs a readable card. */
.ev-card__blank {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--accent), var(--gold-dark));
}

.ev-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
              rgba(15, 12, 6, .88) 0%,
              rgba(15, 12, 6, .46) 34%,
              rgba(15, 12, 6, 0) 64%);
}

/* Marks a card on the Upcoming tab, so one card lifted out of the page - a
   screenshot, a share card - still says which it is. */
.ev-card__flag {
  position: absolute;
  top: 16px;
  left: 12px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--ink);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ev-card__text {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
}
.ev-card__date {
  display: block;
  margin-bottom: 4px;
  color: var(--gold-bright, #f0d75f);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.ev-card__title {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.ev-card__venue {
  display: block;
  color: rgba(255, 255, 255, .9);
  font-size: .79rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ev-empty {
  padding: 44px 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.8;
}
.ev-empty strong { color: var(--ink); }

/* --------------------------------------------------- the photo grid --- */
/* The gallery's photograph grid, class for class. Recent shows pictures from
   every event and an event's own page shows its whole set, so both want the
   same square-ish thumbnails and the same lightbox. */
.ev-shots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ev-shot {
  position: relative;
  appearance: none;
  padding: 0;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  aspect-ratio: 4 / 3;
  transition: box-shadow var(--transition);
}
.ev-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.ev-shot:hover { box-shadow: var(--shadow-sm); }
.ev-shot:hover img { transform: scale(1.05); }
.ev-shot:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* Which event a thumbnail came from. Recent mixes every event, so without
   this a picture from a sports day and one from a convocation sit side by
   side with nothing to tell them apart. Its own gradient, rather than
   trusting the photograph underneath to be dark. */
.ev-shot__from {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 10px 8px;
  background: linear-gradient(0deg, rgba(15, 12, 6, .84), rgba(15, 12, 6, 0));
  text-align: left;
  pointer-events: none;
}
.ev-shot__event {
  display: block;
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  /* One line: a long title must not push the date out of the frame. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-shot__date {
  display: block;
  margin-top: 1px;
  color: var(--gold-bright, #f0d75f);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* An event's own page: the write-up, then everything taken on the day. */
.ev-story { max-width: 72ch; margin: 0 0 30px; }
.ev-story p { margin: 0 0 15px; color: var(--ink-soft); font-size: .95rem; line-height: 1.85; }
.ev-photos-head { margin: 34px 0 18px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
  .ev-grid, .ev-shots { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767.98px) {
  .ev-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .ev-shots { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ev-card__text { left: 12px; right: 12px; bottom: 11px; }
  .ev-card__title { font-size: .92rem; }
  .ev-card__venue { font-size: .74rem; }
  .ev-card__date { font-size: .66rem; }
  .ev-head__title { font-size: 1.1rem; }
}

@media (max-width: 575.98px) {
  /* One across is wide, so the cover gets shorter rather than becoming a
     poster that costs a whole screen to scroll past - the same call the
     gallery's album cards make. */
  .ev-grid { grid-template-columns: 1fr; gap: 18px; }
  /* Photographs stay two across on a phone - one needs no room for a caption. */
  .ev-shots { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ev-shot__from { padding: 16px 7px 6px; }
  .ev-shot__event { font-size: .68rem; }
  .ev-shot__date { font-size: .61rem; }
  .ev-card__frame { aspect-ratio: 16 / 9; }
  .ev-card__title { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-card__frame,
  .ev-card__frame img,
  .ev-shot,
  .ev-shot img,
  .ev-tabset .tab-btn { transition: none; }
  .ev-card:hover .ev-card__frame { transform: none; }
  .ev-card:hover .ev-card__frame img { transform: none; }
}