/* ==========================================================================
   Events: upcoming events with flyer and facts list, past events as rows
   Markup comes from [uaeedc_events] in inc/shortcode-events.php. Two h2
   sections, Upcoming Events then Past Events; either is absent when it has
   nothing to show. Design approved on the events canvas, 31 August 2026:
   plain white with hairlines like the other inner pages, the key details
   (dates, locations, audience, programme) in a ruled facts list, the
   event's flyer shown as an object with a border and a soft shadow. Every
   rule is scoped under .u-events. Tokens only, no raw hex.
   ========================================================================== */

/* --- Headings and section rhythm ---------------------------------------- */

.u-events__heading {
  margin: 0 0 var(--u-space-8);
}

.u-events__section + .u-events__section {
  margin-top: var(--u-space-24);
}

/* --- Upcoming event -------------------------------------------------------
   One column on phones, flyer beside the text from 640px. The flyer keeps
   the uploaded image's own proportions; portrait posters are expected.
   ------------------------------------------------------------------------- */

.u-events__event {
  padding-top: var(--u-space-8);
  border-top: 1px solid var(--u-border);
}

.u-events__event + .u-events__event {
  margin-top: var(--u-space-12);
}

@media (min-width: 40em) {
  .u-events__event {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--u-space-8);
  }

  .u-events__flyer {
    grid-column: span 4;
  }

  .u-events__body {
    grid-column: span 8;
  }

  /* No flyer uploaded yet: the text takes the full width. */
  .u-events__event--bare .u-events__body {
    grid-column: 1 / -1;
  }
}

/* Descendant selector on purpose: Astra and Elementor both set img height
   to auto at the same specificity as a single class. */
.u-events .u-events__flyer img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  box-shadow: var(--u-shadow);
}

@media (max-width: 40em) {
  .u-events__flyer {
    max-width: 250px;
    margin: 0 auto var(--u-space-6);
  }
}

.u-events .u-events__name {
  margin: 0;
}

.u-events__description {
  margin: var(--u-space-4) 0 0;
  max-width: 58ch;
  color: var(--u-text-muted);
  line-height: var(--u-leading-body);
}

/* --- Facts list ------------------------------------------------------------
   Dates, locations, audience and programme as ruled label/value rows, so
   the details read at a glance. Hierarchy from weight alone.
   ------------------------------------------------------------------------- */

.u-events__facts {
  margin: var(--u-space-6) 0 0;
}

.u-events__fact {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0 var(--u-space-6);
  padding: var(--u-space-3) 0;
  border-top: 1px solid var(--u-border);
}

.u-events__fact:last-child {
  border-bottom: 1px solid var(--u-border);
}

.u-events__fact dt {
  font-size: var(--u-text-sm);
  font-weight: var(--u-weight-semi);
  line-height: var(--u-leading-snug);
}

.u-events__fact dd {
  margin: 0;
  font-size: var(--u-text-sm);
  line-height: var(--u-leading-snug);
}

@media (max-width: 40em) {
  .u-events__fact {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0 var(--u-space-4);
  }
}

/* --- Learn more button ------------------------------------------------------
   The primary button: council green, white text. Anchor selector included
   to outrank Astra's entry-content link colour and underline.
   ------------------------------------------------------------------------- */

.u-events a.u-events__button {
  display: inline-flex;
  align-items: center;
  gap: var(--u-space-2);
  height: 52px;
  padding: 0 var(--u-space-8);
  margin-top: var(--u-space-8);
  border-radius: var(--u-radius-sm);
  background: var(--u-accent);
  color: var(--u-white);
  font-size: var(--u-text-sm);
  font-weight: var(--u-weight-medium);
  text-decoration: none;
  transition: background-color var(--u-dur-fast) var(--u-ease);
}

.u-events a.u-events__button:hover {
  background: var(--u-green-700);
  color: var(--u-white);
}

.u-events a.u-events__button:focus-visible {
  outline: 3px solid var(--u-focus);
  outline-offset: 3px;
}

@media (max-width: 40em) {
  .u-events a.u-events__button {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* --- Past events -----------------------------------------------------------
   Compact rows: photo at a fixed width beside the text, hairline above
   each row. Distinct on purpose from the News page's card grid.
   ------------------------------------------------------------------------- */

.u-events__past {
  padding: var(--u-space-8) 0;
  border-top: 1px solid var(--u-border);
}

@media (min-width: 40em) {
  .u-events__past {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 0 var(--u-space-8);
  }

  .u-events__past--bare {
    grid-template-columns: minmax(0, 1fr);
  }
}

.u-events__past-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--u-radius);
  background-color: var(--u-bg-alt);
}

.u-events .u-events__past-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 40em) {
  .u-events__past-media {
    margin-bottom: var(--u-space-4);
  }
}

.u-events__past-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.u-events__past-date {
  margin: 0;
  max-width: none;
  font-size: var(--u-text-xs);
  font-weight: var(--u-weight-semi);
  letter-spacing: var(--u-tracking-wide);
  text-transform: uppercase;
  color: var(--u-green-700);
}

.u-events .u-events__past-name {
  margin: var(--u-space-2) 0 0;
  font-family: var(--u-font-body);
  font-size: var(--u-text-xl);
  font-weight: var(--u-weight-semi);
  line-height: var(--u-leading-snug);
  letter-spacing: 0;
}

.u-events__past-where {
  margin: var(--u-space-1) 0 0;
  max-width: none;
  font-size: var(--u-text-xs);
  color: var(--u-text-muted);
}

.u-events__past-summary {
  margin: var(--u-space-2) 0 0;
  max-width: 68ch;
  font-size: var(--u-text-sm);
  line-height: var(--u-leading-body);
  color: var(--u-text-muted);
}

/* --- Show more -------------------------------------------------------------
   Rows past the cap carry u-events__past--extra and hide only under
   html.u-js; without JavaScript the whole list simply shows and the
   button (assets/js/events.js removes the class, then itself) is never
   displayed. A quiet bordered control, not a call to action.
   ------------------------------------------------------------------------- */

.u-js .u-events__past--extra {
  display: none;
}

.u-events .u-events__more {
  display: none;
  align-items: center;
  height: 48px;
  padding: 0 var(--u-space-6);
  margin-top: var(--u-space-6);
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius-sm);
  background: var(--u-bg);
  color: var(--u-text-muted);
  font-size: var(--u-text-sm);
  font-weight: var(--u-weight-medium);
  cursor: pointer;
  transition:
    border-color var(--u-dur-fast) var(--u-ease),
    color var(--u-dur-fast) var(--u-ease);
}

.u-js .u-events__more {
  display: inline-flex;
}

.u-events .u-events__more:hover {
  border-color: var(--u-ink-40);
  color: var(--u-text);
}

.u-events .u-events__more:focus-visible {
  outline: 3px solid var(--u-focus);
  outline-offset: 3px;
}

/* The row focused after revealing needs no ring of its own: focus moved
   there for reading order, not for interaction. */
.u-events__past:focus {
  outline: 0;
}

/* Hairline-underline link, same voice as the news cards' label. */
.u-events a.u-events__link {
  display: inline-flex;
  align-items: center;
  gap: var(--u-space-1);
  margin-top: var(--u-space-3);
  font-size: var(--u-text-2xs);
  font-weight: var(--u-weight-medium);
  color: var(--u-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--u-dur-fast) var(--u-ease);
}

.u-events a.u-events__link:hover {
  color: var(--u-green-700);
}

.u-events a.u-events__link:focus-visible {
  outline: 3px solid var(--u-focus);
  outline-offset: 3px;
  border-radius: var(--u-radius-sm);
}

/* --- Motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .u-events a.u-events__button,
  .u-events a.u-events__link,
  .u-events .u-events__more {
    transition: none;
  }
}