/* -- 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;
    }
  }
}