@layer components {

  .event-programme {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
  }

  .event-programme__heading {
    font-family: var(--font-heading);
    font-size: var(--h4);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-main);
  }

  .event-programme__intro {
    font-size: var(--text-m);
    line-height: var(--leading-body);
    color: var(--text-body);
  }

  /* The programme is a set to scan, not prose to read — a tinted panel lifts it
     out of the article flow. Two columns from 48em, laid out row-wise: grid
     keeps gap as the rhythm source and copes with any number of modules, which
     a fixed column split does not. */
  /* A notch down from the shared tick-list's --text-m. These are scan-items in
     two columns, not prose — at body size most wrap to a second line and the
     list reads longer than it is. Scoped here so the CSR and policy lists,
     which are read as statements, keep their weight. */
  .event-programme .tick-list {
    padding: var(--card-padding-compact);
    border-radius: var(--card-radius);
    background: var(--surface-tinted);
    font-size: var(--text-base);
    line-height: var(--leading-body);
  }

  @media (min-width: 48em) {

    .event-programme .tick-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--content-gap) var(--grid-gap);
      padding: var(--card-padding);
    }
  }

  .event-enrolment {
    overflow: clip;
    border: 1px solid var(--border-default);
    border-radius: var(--card-radius);
    background: var(--surface-raised);
  }

  .event-enrolment::before {
    content: "";
    display: block;
    block-size: var(--card-gradient-strip-height);
    background: var(--brand-gradient);
  }

  .event-enrolment__grid {
    display: grid;
    gap: var(--container-gap);
    padding: var(--card-padding);
  }

  .event-enrolment__fees,
  .event-enrolment__head {
    display: flex;
    flex-direction: column;
  }

  .event-enrolment__fees {
    gap: var(--content-gap);
  }

  .event-enrolment__head {
    gap: var(--space-2xs);
  }

  /* Scarcity, relocated here from the banner. Warm text rather than a filled
     marker — the logistics note below already owns the one tinted block in
     this panel, and two warm surfaces would compete. */
  .event-enrolment__capacity {
    display: flex;
    align-items: start;
    gap: var(--space-2xs);
    padding-block-start: var(--space-3xs);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--secondary-dark);
  }

  /* Every icon that sits beside wrapping text centres on the FIRST line rather
     than the block as a whole — 1lh is the row's line box, 100% the icon's own
     height. Without this an icon beside a three-line note floats to the top of
     the paragraph and reads as misaligned. */
  .event-enrolment__capacity-icon,
  .event-enrolment__logistics-icon,
  .event-engage__icon {
    flex-shrink: 0;
    translate: 0 calc((1lh - 100%) / 2);
  }

  .event-enrolment__heading {
    font-family: var(--font-heading);
    font-size: var(--h5);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-main);
  }

  .event-enrolment__tiers {
    display: flex;
    flex-direction: column;
  }

  .event-enrolment__tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cluster-gap);
    padding-block: var(--space-s);
    border-block-end: var(--divider);
  }

  .event-enrolment__tier-label {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    min-inline-size: 0;
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
  }

  .event-enrolment__tier-note {
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: var(--leading-snug);
    color: var(--text-subtle);
  }

  .event-enrolment__tier-amount {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: var(--h5);
    font-weight: var(--weight-bold);
    color: var(--primary-dark);
  }

  .event-enrolment__tier-suffix {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    color: var(--text-subtle);
  }

  .event-enrolment__logistics {
    display: flex;
    align-items: start;
    gap: var(--space-xs);
    padding: var(--card-padding-compact);
    border-radius: var(--radius-m);
    background: var(--secondary-ultra-light);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    color: var(--secondary-ultra-dark);
  }

  .event-enrolment__logistics-icon {
    color: var(--secondary-dark);
  }

  .event-enrolment__actions {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
  }

  .event-enrolment__action {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--card-padding-compact);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-m);
    background: var(--surface-sunken);
  }

  .event-enrolment__action-label {
    font-family: var(--font-heading);
    font-size: var(--text-overline);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .event-enrolment__action-purpose {
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    color: var(--text-subtle);
  }

  /* A link, not a button. Two filled buttons stacked in a panel that already
     ends in a Register form read as three competing primary actions; the
     underline carries the same weight of intent without the mass. Matches the
     .card__cta-link idiom used across the card family. */
  .event-enrolment__action-link {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--text-link);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--underline-offset-m);
    transition:
      gap var(--duration-fast) var(--ease-default),
      color var(--duration-fast) var(--ease-default);
  }

  .event-enrolment__action-link:hover,
  .event-enrolment__action-link:focus-visible {
    color: var(--primary-dark);
    gap: var(--space-xs);
  }

  .event-enrolment__action-link .icon-btn-arrow {
    flex-shrink: 0;
  }

  /* The QR is secondary on every viewport: it cannot be scanned on the phone
     the visitor is already holding, so the link above it is the real action. */
  .event-enrolment__qr {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }

  .event-enrolment__qr-code {
    flex-shrink: 0;
    inline-size: 4.5rem;
    padding: var(--space-3xs);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-s);
    background: var(--white);
  }

  .event-enrolment__qr-img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  .event-enrolment__qr-note {
    font-size: var(--text-2xs);
    line-height: var(--leading-snug);
    color: var(--text-subtle);
  }

  .event-engage {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--card-padding-compact);
    border-radius: var(--radius-m);
    background: var(--surface-tinted);
    color: var(--primary-ultra-dark);
    text-decoration: none;
  }

  .event-engage__lead {
    display: flex;
    align-items: start;
    gap: var(--space-xs);
  }

  .event-engage__icon {
    color: var(--primary-dark);
  }

  .event-engage__text {
    font-size: var(--text-s);
    line-height: var(--leading-snug);
  }

  .event-engage__cta {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-link);
  }

  .event-engage:hover .event-engage__cta,
  .event-engage:focus-visible .event-engage__cta {
    text-decoration: underline;
  }

  @media (min-width: 48em) {

    .event-enrolment__grid {
      grid-template-columns: 1fr minmax(15rem, 17rem);
      align-items: start;
    }

    /* Desktop reverses the mobile logic — a laptop visitor scans the QR with a
       phone, so it leads and the link becomes the fallback. */
    .event-enrolment__action {
      align-items: center;
      text-align: center;
    }

    /* Only the button moves. Ordering the QR instead would lift it above the
       tile's own label, leaving a code with nothing naming it. */
    .event-enrolment__action-link {
      order: 1;
      align-self: center;
    }

    .event-enrolment__qr {
      flex-direction: column;
      gap: var(--space-2xs);
    }

    .event-enrolment__qr-code {
      inline-size: 7.5rem;
    }

    .event-engage {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--container-gap);
      padding: var(--card-padding-compact) var(--space-l);
    }

    .event-engage__cta {
      flex-shrink: 0;
    }
  }
}