/**
 * @file
 * Landing hero.
 *
 * Replaces the FlexSlider carousel. The old hero was a 520px auto-rotating
 * slideshow with a left-side 50% black gradient and a caption pinned at
 * `top: 39%` — the caption fell off the image below 768px and the rotation
 * could not be paused. This hero is a static editorial panel: one featured
 * event, no auto-rotation, no layout-shift, and the promotional tiles that
 * used to live in the slideshow now sit beside it as a legible stack.
 */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-1);
  border-block-end: 1px solid var(--border-subtle);
}

/* Soft magenta wash so the black canvas has a horizon. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto;
  block-size: 60%;
  background: radial-gradient(
    60% 60% at 20% 0%,
    color-mix(in srgb, var(--me-magenta) 26%, transparent) 0%,
    transparent 70%
  );
  z-index: -1;
  pointer-events: none;
}

.hero__inner {
  inline-size: min(var(--wrapper-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: clamp(2rem, 1rem + 4vw, 4rem);
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}

.hero__intro {
  max-inline-size: 34rem;
}

.hero__title {
  font-size: var(--step-6);
  letter-spacing: -0.035em;
  margin-block-end: var(--space-s);
}

.hero__title em {
  font-style: normal;
  color: var(--me-magenta);
}

.hero__lede {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  margin-block-end: var(--space-m);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* Featured event panel on the right. */
.hero__feature {
  position: relative;
  display: block;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-3);
  text-decoration: none;
  color: var(--me-white);
  transition: transform var(--duration-base) var(--ease-out);
}

.hero__feature:hover {
  transform: translateY(var(--lift));
}

.hero__feature img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hero__feature-body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-l) var(--space-m) var(--space-m);
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 88%) 0%,
    rgb(0 0 0 / 60%) 45%,
    transparent 100%
  );
}

.hero__feature-eyebrow {
  color: var(--me-magenta-300);
}

.hero__feature-title {
  font-size: var(--step-2);
  color: var(--me-white);
  margin-block-end: var(--space-3xs);
}

.hero__feature-meta {
  color: rgb(255 255 255 / 82%);
  font-size: var(--step--1);
}

/* Page hero used on interior pages (Hubs, Search, static pages). */
/*
 * The interior page band, built to the same recipe as everything else.
 *
 * It used to be a corner tint at `0% 0%` over `--surface-1` — lit from the top
 * left, where no other band on the site is lit, and flat where the others have
 * a ramp. From `--surface-*` it also inverted in light mode, which is the exact
 * fault the form-intro band above documents: a white heading over a pale wash.
 *
 * One bloom in the far corner, one 118deg ramp, brand primitives throughout so
 * it stays dark in both schemes.
 */
.page-hero {
  padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem) var(--space-l);
  background:
    radial-gradient(
      120% 140% at 92% 100%,
      color-mix(in oklab, var(--me-magenta) 28%, var(--me-ink)) 0%,
      transparent 64%
    ),
    linear-gradient(
      118deg,
      var(--me-navy-deep) 0%,
      var(--me-navy-900) 55%,
      var(--me-black) 100%
    );
}

/*
 * The narrow variant — a genre or venue listing.
 *
 * One line of type and nothing else, so the full band's height would be mostly
 * empty gradient. Everything else about it is unchanged, including the arc it
 * takes from css/theme/utilities.css: this is the same surface as an interior
 * page, not a different component.
 */
.page-hero--narrow {
  /*
   * "Narrow" is relative to the full hero, not to the header.
   *
   * The first version took the padding down to about a third of the full
   * band's and the name ended up wedged between the header above and the arc
   * below, with no air on either side — a caption rather than a title. This is
   * roughly two thirds of the full band, which is still visibly shorter but
   * gives the one line something to sit in.
   *
   * THE BOTTOM CARRIES HALF THE ARC AS WELL. The band's foot is a curve that is
   * --band-arc deeper at the centre than at the sides, so padding measured to
   * the box's edge leaves less clearance at the left and right than it looks
   * like it does. Adding half the arc's depth gives the ends of a long name the
   * same air the middle gets for free.
   */
  padding-block:
    clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem)
    calc(var(--space-l) + var(--band-arc) / 2);
}

.page-hero--narrow .page-hero__title {
  font-size: var(--step-4);
  margin-block-end: 0;
}

.page-hero__inner {
  inline-size: min(var(--wrapper-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.page-hero__title {
  font-size: var(--step-5);
  margin-block-end: var(--space-2xs);
}

.page-hero__lede {
  max-inline-size: var(--wrapper-prose);
  color: var(--text-secondary);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}