/* =============================================================================
   EVENT DETAIL HERO
   Full-bleed, image-backed hero for the public Event detail page.
   Loaded only by templates/events/events_detail_page.html via extra_css.
   Brand tokens: Deep Charcoal / Soft Ivory / Antique Gold / Burgundy.
   ============================================================================= */

.event-hero {
  position: relative;
  min-height: min(88vh, 900px);
  display: flex;
  align-items: flex-end;
  background-color: var(
    --color-charcoal,
    #2b2b2b
  ); /* fallback when no featured_image */
  overflow: hidden;
}

/* Light dark wash over the background image for text legibility */
.event-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 0;
}

/* Eyebrow — small, uppercase, letter-spaced, gold */
.event-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem; /* 13px */
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold, #c4a052);
  margin-bottom: 0.75rem;
}

/* Title — inherits the home page HeroBlock h1/span styling from
   blocks/hero-block.css (.hero_text_block h1 / h1 span). Do not restyle the
   title here; keep it identical to the home hero.
   Exception: the shared rule centers the h1 on mobile — the event hero keeps
   it left-aligned with the rest of the hero content at every width. */
.event-hero .hero_text_block h1,
.event-hero .hero_text_block h1 span {
  text-align: left;
}

/* Override the shared hero_text_block nowrap rule so the event title can wrap */
@media (min-width: 768px) {
  .event-hero .hero_text_block h1,
  .event-hero .hero_text_block h1 span {
    white-space: normal !important;
  }
}

/* Tagline */
.event-hero__tagline {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 300;
  color: rgba(var(--color-ivory-rgb, 248, 244, 227), 0.85);
  margin-top: 1rem;
  margin-bottom: 0;
  max-width: 42em;
}

/* Meta list — stacked, icon-based rows */
.event-hero__meta {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Alignment (Event.hero_alignment). The block-level move is handled by the
   shared .hero_text_block rules in blocks/hero-block.css; these cover the two
   events-only children that text-align cannot reach on its own:

   - .event-hero__meta is a column flex container, so its rows are packed to the
     start regardless of text-align. align-items moves them on the cross axis,
     which for a column is the horizontal one.
   - .event-hero__tagline is capped at 42em, so in a wider block it stays glued
     to the left exactly like .hero__features did.

   Each meta row keeps its icon-then-text order at every alignment — the row is
   mirrored as a unit, not reversed. */
.hero_text_block.text-center .event-hero__meta {
  align-items: center;
}
.hero_text_block.text-center .event-hero__tagline {
  margin-left: auto;
  margin-right: auto;
}

.hero_text_block.text-end .event-hero__meta {
  align-items: flex-end;
}
.hero_text_block.text-end .event-hero__tagline {
  margin-left: auto;
  margin-right: 0;
}

.event-hero__meta-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(var(--color-ivory-rgb, 248, 244, 227), 0.9);
}

.event-hero__meta-icon {
  flex: none;
  color: var(--color-gold, #c4a052);
}

.event-hero__meta-venue {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.event-hero__meta-venue-name {
  font-weight: 600;
  color: rgba(var(--color-ivory-rgb, 248, 244, 227), 0.95);
}

.event-hero__meta-venue-address {
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(var(--color-ivory-rgb, 248, 244, 227), 0.65);
}

/* CTA — burgundy, sharp corners, uppercase, letter-spaced */
.event-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.5rem;
  padding: 16px 38px;
  background-color: var(--color-burgundy, #6d1a2b);
  color: var(--color-ivory, #f8f4e3);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0;
  transition:
    background-color var(--transition-base, 0.2s ease),
    color var(--transition-base, 0.2s ease);
}

.event-hero__cta:hover,
.event-hero__cta:focus-visible {
  background-color: var(--color-gold, #c4a052);
  color: var(--color-charcoal, #2b2b2b);
}

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
  .event-hero {
    min-height: 620px;
    align-items: flex-end;
  }

  .event-hero__tagline {
    font-size: 1.05rem;
  }

  .event-hero__meta {
    gap: 0.65rem;
    margin-top: 1.5rem;
  }

  .event-hero__meta-row {
    font-size: 0.875rem;
  }

  .event-hero__cta {
    margin-top: 2rem;
    width: 100%;
  }
}