/* ==========================================================================
   KSKQ event pages — one-off landing pages linked directly, never listed.
   Shares ../styles.css for tokens, type, buttons and the footer; this file
   only adds what the simplified header and the event flyer need on top.
   ========================================================================== */

/* --- header, minus the live player and nav --- */
/* .site-header is display:flex with .site-nav's margin-left:auto doing the
   right-alignment; without that element in the tree, .header-actions has to
   pick up the same job. */
.header-actions { margin-left: auto; display: flex; align-items: center; gap: .8rem; }

/* --- the flyer --- */
.event-main { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }

.event-flyer {
  width: min(720px, 100%); margin: 0 auto 1.5rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: var(--shadow); overflow: hidden;
}
.event-eyebrow {
  text-align: center; padding: 1.8rem 1.6rem 0; margin: 0 0 .6rem;
  font: 700 .72rem/1 "Courier Prime", monospace; letter-spacing: .16em;
  text-transform: uppercase; color: var(--orange-dk);
}
.event-title { text-align: center; padding: 0 1.6rem; margin-bottom: 1.3rem; }

/* Ticket-stub meta row: three columns on a wide flyer, stacked on a phone. */
.event-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem;
  padding: 1.1rem 1.6rem; margin: 0 1.6rem 1.6rem;
  border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule);
}
.event-meta div { text-align: center; }
.event-meta b {
  display: block; margin-bottom: .3rem;
  font: 700 .68rem/1 "Courier Prime", monospace; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.event-meta span { font: 600 1rem/1.3 "Roboto Slab", serif; color: var(--ink); }

/* Renders at whatever aspect ratio the submitted photo actually has —
   square, portrait, landscape, whatever — rather than forcing a fixed
   ratio and cropping into it. Only the width is constrained. */
.event-image { width: 100%; height: auto; }

.event-body { padding: 1.8rem 1.8rem 0; }
.event-body p { color: var(--ink-soft); }
.event-body p:last-child { margin-bottom: 0; }

.event-cta { padding: 1.6rem 1.8rem 2rem; text-align: center; }

.event-back {
  display: block; text-align: center; margin-top: 1.8rem;
  font: 500 .9rem/1 Roboto, sans-serif; color: var(--ink-soft);
}

@media (max-width: 480px) {
  .event-meta { gap: 1rem; }
}