/**
 * Event Teaser Component Styles
 *
 * Two-column row: large date on the left, content on the right.
 * Stacks to a single column on mobile.
 *
 * Figma node ID: 863:28438
 */

/* -------------------------------------------------------
 * Root
 * ------------------------------------------------------- */
.event-teaser {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400, 32px);
  align-items: flex-start;
}

/* -------------------------------------------------------
 * Date column
 * ------------------------------------------------------- */
.event-teaser__date-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-150, 12px);
  flex-shrink: 0;
}

/* Large date — h2 scale, accent red */
.event-teaser__date {
  margin: 0;
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--text-h2);
  line-height: 1.2;
  letter-spacing: -0.021em;
  color: var(--accent, #fa263a);
  font-feature-settings: 'zero';
}

/* Multi-day: two stacked paragraphs */
.event-teaser__date--multiday {
  line-height: 0;
}
.event-teaser__date--multiday p {
  margin: 0;
  line-height: 1.2;
}

/* Time & location — between h4 and paragraph-l */
.event-teaser__time-location {
  margin: 0;
  font-weight: var(--font-weight-bold, 700);
  font-size: 26px;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--trust, #550a2d);
  font-feature-settings: 'zero';
}

/* -------------------------------------------------------
 * Content column
 * ------------------------------------------------------- */
.event-teaser__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-500, 40px);
  align-items: flex-start;
  min-width: 0;
  flex: 1 0 0;
}

.event-teaser__top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-400, 32px);
  width: 100%;
}

/* Labels + title grouped with tighter gap */
.event-teaser__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-200, 16px);
  width: 100%;
}

/* -------------------------------------------------------
 * Labels row
 * ------------------------------------------------------- */
.event-teaser__labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-150, 12px);
  align-items: center;
}

/* -------------------------------------------------------
 * Title — h4 scale
 * ------------------------------------------------------- */
.event-teaser__title {
  margin: 0;
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--text-h4);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--trust, #550a2d);
  font-feature-settings: 'zero';
}

/* -------------------------------------------------------
 * Body — paragraph-m scale, lighter trust
 * ------------------------------------------------------- */
.event-teaser__body {
  margin: 0;
  font-weight: var(--font-weight-regular, 400);
  font-size: var(--text-paragraph-m, 22px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--trust-300, #773b57);
  font-feature-settings: 'zero';
}

/* -------------------------------------------------------
 * Tablet (≥ 768px) — side-by-side layout
 * ------------------------------------------------------- */
@media (min-width: 768px) {
  .event-teaser {
    flex-direction: row;
    gap: var(--spacing-800, 64px);
  }

  .event-teaser__date-col {
    width: 280px;
  }
}

/* -------------------------------------------------------
 * Desktop (≥ 1200px)
 * ------------------------------------------------------- */
@media (min-width: 1200px) {
  .event-teaser {
    gap: var(--spacing-1000, 80px);
  }

  .event-teaser__date-col {
    width: 380px;
  }
}

/* -------------------------------------------------------
 * Desktop L (≥ 1440px)
 * ------------------------------------------------------- */
@media (min-width: 1440px) {
  .event-teaser__date-col {
    width: 460px;
    min-width: 400px;
  }
}