/* 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; capitals, when the style sets headings in them, count a
   fifth wider (--title-case-width). 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-letter: calc(var(--font-display-width) * var(--title-case-width, 1));
  --title-fits-word: calc(100cqi / (var(--title-word, 8) * var(--title-letter) * 1.1));
  --title-fits-lines: calc(270cqi / (var(--title-length, 16) * var(--title-letter)));
  --title-grows: calc(var(--step-5) + 1.5cqi);
  --title-largest: var(--step-6);

  font-size: clamp(var(--step-2), min(var(--title-grows), var(--title-fits-word), var(--title-fits-lines)), var(--title-largest));
  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;
}

/* ── The style's event page (data-look-event-hero) ────────────────────────
   flyer        the title across the top, flyer and facts beneath (above)
   stacked      the flyer large and centred, the title and facts below it
   backdrop     the picture clear behind the top of the page, the title
                where it has faded into the page
   typographic  a small flyer, and the title as large as it fits */
[data-look-event-hero="stacked"] {
  .event-hero__layout[data-flyer] {
    grid-template-areas: "flyer" "heading" "facts";
    grid-template-columns: minmax(0, 1fr);
  }

  .event-hero__flyer {
    max-inline-size: min(22rem, 100%);
  }

  .event-hero__heading {
    text-align: center;

    .cluster {
      justify-content: center;
    }
  }

  .event-hero__facts {
    justify-self: center;
    max-inline-size: var(--column-content);
  }
}

[data-look-event-hero="backdrop"] {
  .event-hero__layout {
    padding-block-start: clamp(var(--space-2xl), 30vh, 16rem);
  }

  .event-hero__wash {
    &::after {
      background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--color-surface-0) 70%, transparent) 45%, var(--color-surface-0) 80%);
    }

    img,
    .accent-gradient {
      opacity: 1;
    }
  }

  .event-hero__wash[data-blur] img {
    filter: blur(24px) saturate(1.3);
    scale: 1.08;
  }
}

[data-look-event-hero="typographic"] {
  .event-hero__title {
    --title-grows: calc(var(--step-6) + 4cqi);
    --title-largest: calc(var(--step-6) * 1.6);

    line-height: 0.95;
  }

  .event-hero__flyer {
    max-inline-size: 11rem;
  }

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

/* On a page with a texture or backdrop the wash fades out instead of laying
   the page colour over its foot, so the texture runs on without a seam */
:is([data-look-texture]:not([data-look-texture="none"]), [data-look-backdrop]:not([data-look-backdrop="plain"])) .event-hero__wash {
  mask-image: linear-gradient(to bottom, black 45%, transparent 92%);

  &::after {
    background: color-mix(in oklch, var(--color-surface-0) 35%, transparent);
  }
}

/* ── The style's pictures (data-look-images) ──────────────────────────── */
[data-look-images="mono"] .event-hero__wash img {
  filter: grayscale(1);
}

[data-look-images="mono"] .event-hero__wash[data-blur] img {
  filter: blur(60px) grayscale(1);
}

[data-look-images="duotone"] .event-hero__wash {
  background-color: var(--color-accent-fill);

  img {
    mix-blend-mode: luminosity;
  }
}