/*
 * events.css — Events & Past Events page styles
 */

/* ── Event list ─────────────────────────────────────────────────── */

.event-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

/* ── Event card ─────────────────────────────────────────────────── */
/*
 * Two fixed sizes, not a fluid one. Below 1000px viewport width there
 * isn't room for the 900px row card plus page gutters, so it switches
 * to a fixed 480px stacked card instead of shrinking continuously.
 *
 * The card box (background/shadow/radius/clip) lives on .event-card,
 * not .event-row, so the secondary photo strip renders as part of the
 * same card and the card grows downward to fit it, while .event-row
 * keeps its own fixed height so the header photo's aspect ratio never
 * changes.
 */

.event-card {
  width: 900px;
  max-width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--clr-surface);
}

.event-row {
  --event-row-height: 280px;
  display: flex;
  width: 100%;
  height: var(--event-row-height);
}

/* Odd rows: image left, text right (default order) */
.event-row__image  { order: 0; }
.event-row__info   { order: 1; }

/* Even rows: text left, image right */
.event-card:nth-child(even) .event-row__image { order: 1; }
.event-card:nth-child(even) .event-row__info  { order: 0; }

/* ── Image cell ─────────────────────────────────────────────────── */

.event-row__image {
  position: relative;
  flex-shrink: 0;
  background: var(--clr-border);
  overflow: hidden;
}

.event-row__image img {
  /* Safari miscomputes this flex item's content-based width from the
     image's unconstrained intrinsic size when height is a percentage;
     a definite length keeps the aspect-ratio scaling correct. */
  height: var(--event-row-height);
  width: auto;
  display: block;
}

.event-row__image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-ink-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ── Info cell ──────────────────────────────────────────────────── */

.event-row__info {
  flex: 1;
  min-width: 0;
  padding: var(--space-8) var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}

/* Qualified with .event-card (not just the bare class) so these always
   outrank css/layout.css's ".art-tabs__panel h2/p" rules — those exist to
   restore paragraph/heading spacing on *rendered post content* (Winners
   List, Poems tabs) and have higher specificity (class+element) than a
   single-class selector. Without this, embedding the card in the Results
   page's Event tab (a .art-tabs__panel) silently overrides this card's
   own font-weight/color/margin, which is what caused the title to get
   clipped by .event-card's overflow:hidden there. */
.event-card .event-row__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: inherit;
  margin: 0;
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.event-card .event-row__desc {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  color: inherit;
  opacity: 0.8;
  line-height: var(--leading-normal);
  margin: 0;
  overflow-wrap: anywhere;
}

.event-row__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
  min-width: 0;
}

.event-card .event-row__address,
.event-card .event-row__datetime {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: inherit;
  opacity: 0.65;
  margin: 0;
  overflow-wrap: anywhere;
}

/* ── Past events — slightly muted ──────────────────────────────── */

.events-page--past .event-row {
  opacity: 0.85;
}

/* ── Photo lightbox trigger ─────────────────────────────────────── */

/* Scoped to the header image only - keeps the anchor out of the flex
   layout there. The gallery strip's triggers need their own box (for
   .gallery-tile sizing), so this must not apply globally. */
.event-row__image .event-photo-trigger {
  display: contents;
}

.event-photo-trigger img {
  cursor: zoom-in;
}

/* ── Secondary photo strip (sub-event photos) ──────────────────── */

.event-row__gallery-section {
  width: 100%;
  padding: var(--space-3);
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface);
}

.event-card .event-row__gallery-label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: inherit;
  opacity: 0.65;
  margin: 0 0 var(--space-2);
}

.event-row__gallery {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-3);
  width: 100%;
  overflow-x: auto;
}

.event-row__gallery .gallery-tile {
  flex: 0 0 auto;
  width: 100px;
  aspect-ratio: 1 / 1;
}

/* ── Results preview (shown once winners are announced) ─────────── */

.event-row__results {
  width: 100%;
  padding: var(--space-3);
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface);
}

.event-row__results-content {
  margin-bottom: var(--space-2);
}

/* .event-row__results-content prose spacing (p/ul/ol/li/h2/h3) is declared
   in css/layout.css's shared "Rendered content" block, alongside
   .page-content and .art-tabs__panel - keep it there so this class can't
   drift out of sync with the others again. */

.event-row__results-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--clr-accent);
  text-decoration: underline;
}

/* ── Empty state ────────────────────────────────────────────────── */

/* Base "empty state" styling shared with .books-empty/.contest-results__empty - css/layout.css */
.events-empty {
  text-align: center;
  padding: var(--space-12) 0;
}

.events-empty a {
  text-decoration: underline;
}

/* ── Stacked card ──────────────────────────────────────────────────
 * Fixed 480px width, image on top at its full aspect ratio, text
 * below with auto height.
 * ─────────────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .event-card {
    width: 480px;
  }

  .event-row {
    flex-direction: column;
    height: auto;
  }

  .event-row__image {
    order: 0;
    height: auto;
    min-height: 220px;
  }

  .event-row__image img {
    width: 100%;
    height: auto;
  }

  .event-row__info {
    order: 1;
    padding: var(--space-5) var(--space-6);
  }
}