/*
 * /preview/events page-specific styles.
 *
 * Most of the page rides on classes site.css already supplies (.page-hero,
 * .wrap, .section-head, .eyebrow, .link). This file adds:
 *
 *   - .events-featured / .events-featured-card — the current-or-next
 *     event hero block at the top of the page.
 *   - .events-list / .events-grid / .event-card — the per-event blocks
 *     that the home page deep-links into via #<slug>.
 *   - .events-cta — the closing two-button CTA row (matches world.css's
 *     .world-cta__buttons treatment).
 *
 * If site.css later defines these, fold this file in. Additive only
 * for now, same pattern as world.css.
 */

/* ---------- vertical rhythm ---------- */

.events-featured,
.events-list,
.events-cta {
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* Alternating panel for visual sectioning, matches world.css. */
.events-list {
  background: color-mix(in oklab, var(--ink-deep, #11151a) 92%, transparent);
}

/* ---------- featured (current or next) card ---------- */

.events-featured .eyebrow {
  margin-bottom: 1rem;
}

.events-featured-card {
  display: grid;
  gap: 0;
  border: 1px solid color-mix(in oklab, var(--accent, #F16C0A) 35%, transparent);
  border-radius: 0.75rem;
  overflow: hidden;
  background: color-mix(in oklab, var(--ink-deep, #11151a) 88%, transparent);
}

.events-featured-card.has-image {
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .events-featured-card.has-image {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.events-featured-image {
  position: relative;
  min-height: 12rem;
  background: #000;
}

.events-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Featured image leans full-bleed; per-event cards downstream get a
     more reserved frame. */
}

.events-featured-body {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--text, #ebe9e4);
}

.events-featured-dates {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--text, #ebe9e4) 70%, transparent);
  margin: 0;
}

.events-featured-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.15;
  margin: 0;
  color: var(--text, #ebe9e4);
}

.events-featured-subtitle {
  font-style: italic;
  color: var(--accent, #F16C0A);
  margin: 0;
}

.events-featured-summary {
  margin: 0.25rem 0 0.5rem;
  line-height: 1.55;
}

/* ---------- the calendar grid ---------- */

.events-grid {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 760px) {
  .events-grid {
    /* Two columns once we have horizontal room; each card is dense
       enough that 3-column would crowd the bullet lists. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.events-item {
  display: flex;
}

/* ---------- per-event card ---------- */

.event-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid color-mix(in oklab, var(--text, #ebe9e4) 14%, transparent);
  border-radius: 0.5rem;
  overflow: hidden;
  background: color-mix(in oklab, var(--ink-deep, #11151a) 80%, transparent);
  /* The home page deep-links via #<slug>. Add some scroll-margin so
     the sticky-ish header on small screens doesn't bury the anchor. */
  scroll-margin-top: 5rem;
  transition: border-color 200ms ease;
}

.event-card:target,
.event-card--live {
  border-color: var(--accent, #F16C0A);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent, #F16C0A) 50%, transparent);
}

.event-card__image {
  background: #000;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}

.event-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card__body {
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--text, #ebe9e4);
}

.event-card__head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.event-card__head .eyebrow {
  margin: 0;
}

.event-card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  margin: 0;
}

.event-card__subtitle {
  font-style: italic;
  color: var(--accent, #F16C0A);
  margin: 0;
}

.event-card__dates {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--text, #ebe9e4) 70%, transparent);
  margin: 0;
}

.event-card__summary {
  margin: 0;
  line-height: 1.55;
}

.event-card__details {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: color-mix(in oklab, var(--text, #ebe9e4) 88%, transparent);
}

.event-card__details li {
  line-height: 1.5;
}

/* ---------- closing CTA ---------- */

.events-cta__inner {
  text-align: center;
}

.events-cta__inner .section-head h2 {
  max-width: 38ch;
  margin-inline: auto;
}

.events-cta__buttons {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .event-card {
    transition: none;
  }
}