Event HeaderBLK

/* -- Event Header (website · Events & Promotions) -------------------------

   Introduces an event with its title, date, venue, and primary action - on a gradient band, over a cover picture, or beside a poster. */

@layer components {

  /* every box in the block measures border-box - the same on any page */

  :where(.mk-event-header, .mk-event-header *, .mk-event-header ::before, .mk-event-header ::after) { box-sizing: border-box; }

  .mk-event-header { container: mk-event-header / inline-size; width: 100%; }

  .mk-event-header-inner {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    display: grid;

    gap: 2rem;

    align-items: center;

    padding: 3rem 2rem;

    border-radius: var(--radius-xl);

    background:

      radial-gradient(60% 90% at 100% 0%, color-mix(in oklch, var(--chart-2) 30%, transparent), transparent 70%),

      radial-gradient(50% 80% at 0% 100%, color-mix(in oklch, var(--chart-1) 28%, transparent), transparent 70%),

      var(--muted);

  }

  .mk-event-header-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }

  .mk-event-header-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }

  .mk-event-header-title { margin: 0; font-size: clamp(2.25rem, 6cqi, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; text-wrap: balance; }

  .mk-event-header-tagline { margin: 0; max-width: 36rem; font-size: 1.125rem; color: color-mix(in oklch, currentColor 75%, transparent); text-wrap: pretty; }

  .mk-event-header-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem 1.5rem;

    margin: 0;

    padding: 0;

    list-style: none;

    font-size: 0.9375rem;

    font-weight: 500;

    & li { display: inline-flex; align-items: center; gap: 0.5rem; }

    & svg { width: 1.125rem; height: 1.125rem; opacity: 0.75; }

    & address { font-style: normal; }

  }

  .mk-event-header-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

  .mk-event-header-speakers { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: color-mix(in oklch, currentColor 75%, transparent); }

  .mk-event-header-poster { margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); rotate: 2deg;

    & img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

  }

  .mk-event-header-cover { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }

  .mk-event-header[data-variant="image"] .mk-event-header-inner {

    padding-block: 5rem 3rem;

    background: transparent;

    color: #fff;

    &::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, oklch(0.12 0.02 260 / 0.9), oklch(0.12 0.02 260 / 0.25)); }

    & .btn[data-variant="outline"] { border-color: oklch(1 0 0 / 0.45); background: transparent; color: inherit; }

  }

  @container mk-event-header (min-width: 48rem) {

    .mk-event-header[data-variant="split"] .mk-event-header-inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; padding: 3rem; }

  }

  /* -- Accessibility ------------------------------------------- */

  @media (forced-colors: active) {

    .mk-event-header-inner { border: 1px solid CanvasText; }

  }

}