/* Event hero: the flyer's colours wash the top of the page and fade into it.
   Phones stack flyer, title and facts; from a tablet's width the title runs
   across the top with the flyer and the facts side by side beneath it. */
.event-hero {
  inline-size: 100%;
  isolation: isolate;
  position: relative;
}

/* The wash spans the window: the hero sits in the page's column (event-page) */
.event-hero__wash {
  inset-block: 0;
  inset-inline: calc(50% - 50vw);
  overflow: hidden;
  position: absolute;
  z-index: -1;

  &::after {
    background: linear-gradient(to bottom, color-mix(in oklch, var(--color-surface-0) 35%, transparent), var(--color-surface-0) 92%);
    content: "";
    inset: 0;
    position: absolute;
  }

  img,
  .accent-gradient {
    block-size: 100%;
    inline-size: 100%;
    inset: 0;
    object-fit: cover;
    opacity: 0.85;
    position: absolute;
  }
}

.event-hero__wash[data-blur] img {
  filter: blur(60px) saturate(1.4);
  scale: 1.2;
}

.event-hero__layout {
  display: grid;
  gap: var(--space-m);
  grid-template-areas: "heading" "facts";
  padding-block: var(--space-l) var(--space-s);
}

.event-hero__layout[data-flyer] {
  grid-template-areas: "flyer" "heading" "facts";
}

.event-hero__heading {
  /* The title sizes to its own row (container units below) */
  container-type: inline-size;
  grid-area: heading;
}

.event-hero__flyer {
  grid-area: flyer;
  inline-size: 100%;
  justify-self: center;
  max-inline-size: 16rem;
  position: relative;

  img {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-overlay);
    inline-size: 100%;
  }
}

.event-hero__facts {
  grid-area: facts;
}

@media (min-width: 30em) {
  .event-hero__layout[data-flyer] {
    align-items: start;
    column-gap: var(--space-l-xl);
    grid-template-areas: "heading heading" "flyer facts";
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  }

  .event-hero__flyer {
    max-inline-size: none;
  }
}

@media (min-width: 60em) {
  .event-hero__layout[data-flyer] {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  }
}

/* The title runs from --step-2 up to --step-6. Within that it grows with its
   row, then steps down until its longest word fits whole and a long title
   stays within about three lines: shop_display_title_style measures the title
   in average lowercase letters (--title-word, --title-length), the heading
   font says how wide one is (--font-display-width), and a tenth spare covers
   the estimate. Hyphens stay a last resort, only in long compounds (Safari
   reads only the -webkit- limits), and an opening „ hangs into the margin. */
.event-hero__title {
  --title-fits-word: calc(100cqi / (var(--title-word, 8) * var(--font-display-width) * 1.1));
  --title-fits-lines: calc(270cqi / (var(--title-length, 16) * var(--font-display-width)));
  --title-grows: calc(var(--step-5) + 1.5cqi);

  font-size: clamp(var(--step-2), min(var(--title-grows), var(--title-fits-word), var(--title-fits-lines)), var(--step-6));
  hanging-punctuation: first;
  hyphenate-limit-chars: 10 5 5;
  -webkit-hyphenate-limit-after: 5;
  -webkit-hyphenate-limit-before: 5;
  hyphens: auto;
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* The minimum age, pinned to the flyer's corner: the corner it has on the
   event's card, so it stays put as the flyer grows from there */
.event-hero__age {
  --chip-bg: oklch(0 0 0 / 0.6);
  --chip-fg: white;

  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  position: absolute;
}