Event DescriptionBLK

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

   Explains an event's purpose, audience, and participation details - the story, who it is for, what you take away, and the practical facts. */

@layer components {

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

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

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

  .mk-event-description-layout { display: grid; gap: 2.5rem; }

  .mk-event-description-body { display: grid; gap: 2rem; min-width: 0;

    & section { display: grid; gap: 0.75rem; }

    & h2 { margin: 0; font-size: 1.25rem; font-weight: 600; }

    & p { margin: 0; color: var(--muted-foreground); line-height: 1.75; text-wrap: pretty; }

  }

  .mk-event-description-audience { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none;

    & li { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 999px; background: var(--muted); font-size: 0.875rem; font-weight: 500; }

    & svg { width: 0.875rem; height: 0.875rem; color: var(--primary); }

  }

  .mk-event-description-takeaways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem 1.5rem; margin: 0; padding: 0; list-style: none;

    & li { display: flex; gap: 0.625rem; align-items: flex-start; line-height: 1.5; }

    & svg { flex: none; width: 1.125rem; height: 1.125rem; margin-block-start: 0.125rem; color: #16a34a; }

  }

  .mk-event-description-facts {

    display: grid;

    gap: 1.25rem;

    align-self: start;

    padding: 1.5rem;

    border: 1px solid var(--border);

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

    background: var(--card);

    color: var(--card-foreground);

    & dl { display: grid; gap: 0.875rem; margin: 0; }

    & dl div { display: flex; justify-content: space-between; gap: 1rem; padding-block-end: 0.875rem; border-block-end: 1px solid var(--border); font-size: 0.9375rem; }

    & dt { color: var(--muted-foreground); }

    & dd { margin: 0; font-weight: 500; text-align: end; }

    & .btn { width: 100%; }

  }

  .mk-event-description-capacity { display: grid; gap: 0.375rem; font-size: 0.8125rem; color: var(--muted-foreground);

    & meter { width: 100%; height: 0.5rem; }

    & strong { color: var(--foreground); }

  }

  @container mk-event-description (min-width: 52rem) {

    .mk-event-description-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 4rem; }

    .mk-event-description-facts { position: sticky; top: 1.5rem; }

  }

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

  @media (forced-colors: active) {

    .mk-event-description-facts { border-color: CanvasText; }

  }

}