/**
 * Event Teaser Coming Up List
 *
 * Full-width section: centered display headline + event list with
 * hr-style dividers + "all events" CTA button.
 *
 * Figma node ID: 141:18540
 */

/* -------------------------------------------------------
 * Section wrapper
 * ------------------------------------------------------- */
.event-teaser-coming-up-list {
  background: var(--white, #ffffff);
  padding: var(--spacing-1000, 80px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1000, 80px);
}

/* -------------------------------------------------------
 * Header — overline + display headline
 * ------------------------------------------------------- */
.event-teaser-coming-up-list__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300, 24px);
  align-items: center;
  text-align: center;
  width: 100%;
  padding-inline: var(--spacing-1000, 80px);
  max-width: calc(1439px + 2 * var(--spacing-1000, 80px));
  box-sizing: border-box;
}

/* Eyebrow label — h5 scale */
.event-teaser-coming-up-list__overline {
  margin: 0;
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--text-h5);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--trust, #550a2d);
  font-feature-settings: 'zero';
}

/* Display headline — scales from 36 px (mobile) to 76 px (desktop) */
.event-teaser-coming-up-list__headline {
  margin: 0;
  font-weight: var(--font-weight-bold, 700);
  font-size: clamp(36px, 5.28vw, 76px);
  line-height: 1.1;
  letter-spacing: -0.023em;
  color: var(--trust, #550a2d);
  font-feature-settings: 'zero';
}

/* -------------------------------------------------------
 * Event list
 * Each .event-teaser-coming-up-list__item is wrapped by the consumer.
 * The top border of the list + the bottom border of each item
 * produce the full-width divider lines from the Figma design.
 * ------------------------------------------------------- */
.event-teaser-coming-up-list__list {
  width: 100%;
}

.event-teaser-coming-up-list__item {
  padding-inline: var(--spacing-1000, 80px);
  max-width: calc(1428px + 2 * var(--spacing-1000, 80px));
  margin-inline: auto;
  box-sizing: border-box;
  width: 100%;
}

/* Center the CTA button within its full-width container */
.event-teaser-coming-up-list > .button__container {
  display: flex;
  justify-content: center;
}

/* -------------------------------------------------------
 * Tablet (≤ 1024px)
 * ------------------------------------------------------- */
@media (max-width: 1024px) {
  .event-teaser-coming-up-list {
    gap: var(--spacing-1000, 80px);
    padding: var(--spacing-1000, 80px) 0;
  }

  .event-teaser-coming-up-list__header,
  .event-teaser-coming-up-list__item {
    padding-inline: var(--spacing-500, 40px);
  }
}

/* -------------------------------------------------------
 * Mobile (≤ 767px)
 * ------------------------------------------------------- */
@media (max-width: 767px) {
  .event-teaser-coming-up-list {
    gap: var(--spacing-800, 64px);
    padding: var(--spacing-800, 64px) 0;
  }

  .event-teaser-coming-up-list__header,
  .event-teaser-coming-up-list__item {
    padding-inline: var(--spacing-300, 24px);
  }

  .event-teaser-coming-up-list__item {
    padding-block: var(--spacing-500, 40px);
  }
}