/* Demon Seed — Events page. Dark swamp palette, responsive flyer cards.
   Page-scoped: enqueued only on the page-events.php template (see functions.php).
   DS palette is hardcoded here (the DS theme uses no CSS custom properties):
     page #0d0f14 · surface #13161e · border #1e2230 · teal #009477 (hover #007860)
     gold #c9a84c · text #e8e8e8 · headings #fff · muted #aaaaaa
     fonts: Bebas Neue (display) / Open Sans (body) · button radius 2px (DS house style) */

.ds-events {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  color: #e8e8e8;
}

.ds-events-hero { text-align: center; margin-bottom: 2.5rem; }

.ds-events-title {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  letter-spacing: 0.04em;
  color: #ffffff;
  margin: 0 0 0.25rem;
}

.ds-events-subtitle {
  font-family: 'Open Sans', system-ui, sans-serif;
  color: #aaaaaa;
  font-size: 1.05rem;
  margin: 0;
}

/*
 * Single-column "posts-style" stack (Spec E — Wade-approved layout, ported from KVD).
 * The real flyers mix portrait AND landscape aspect ratios, so a multi-column grid
 * leaves uneven gaps under the shorter cards. One flyer per row at its natural aspect
 * is gap-free regardless of orientation and reads cleanly top-to-bottom in the owner's
 * arranged order. Centered at a readable width; full-bleed on phones.
 */
.ds-events-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  max-width: 560px;
  margin: 0 auto;
}

.ds-event-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Bordered box wraps ONLY the flyer, so it always hugs the image. The caption
 * and button live below it (outside the border) — nothing can force empty
 * space between the flyer's bottom edge and the button. */
.ds-event-flyer-box {
  background: #13161e;
  border: 1px solid #1e2230;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 120ms ease;
}

.ds-event-card:hover .ds-event-flyer-box { border-color: #009477; }

.ds-event-card--hidden { display: none; }

.ds-event-flyer-link { display: block; line-height: 0; }

/* Flyer sizes to its natural aspect ratio. NEVER set a fixed height or
 * max-height here — that's what crops flyers. height:auto = always full. */
.ds-event-card .ds-event-flyer,
.ds-event-card img {
  width: 100%;
  height: auto;
  display: block;
}

.ds-event-meta {
  margin-top: 0.85rem;        /* caption/button sit just below the flyer box */
  display: flex;
  flex-direction: column;
  align-items: flex-start;    /* align caption + button to the flyer's left edge */
  gap: 0.75rem;
}

.ds-event-caption {
  font-family: 'Open Sans', system-ui, sans-serif;
  color: #e8e8e8;
  font-size: 1rem;
  line-height: 1.45;
  margin: 0;
}

.ds-event-btn {
  align-self: flex-start;
  display: inline-block;
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55em 1.4em;
  background-color: #009477;
  color: #ffffff;
  text-decoration: none;
  border: 2px solid #009477;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ds-event-btn:hover,
.ds-event-btn:focus {
  background-color: #007860;
  border-color: #007860;
  color: #ffffff;
}

.ds-events-more { text-align: center; margin-top: 2.5rem; }
.ds-events-more-btn { align-self: center; }

.ds-events-empty {
  text-align: center;
  color: #aaaaaa;
  font-family: 'Open Sans', system-ui, sans-serif;
  padding: 3rem 0;
}

@media (max-width: 600px) {
  .ds-events-grid { max-width: 100%; }
  .ds-events { padding: 1.75rem 1rem 3rem; }
}