/* Shared upcoming-meetup banner on the homepage and event index. */
.featured-event--banner { position: relative; background: var(--v2-color-ink); color: var(--v2-color-paper); border-radius: 20px 32px 20px 32px; padding: 28px 36px; }
.featured-event--banner .featured-event-top { margin-bottom: 20px; }
.featured-event--banner .featured-event-label { font-size: var(--v2-type-label); text-transform: none; letter-spacing: 0; color: var(--v2-color-dark-muted); font-weight: 400; }
.featured-event--banner .featured-event-main { grid-template-columns: 100px minmax(0, 1fr) auto; gap: 32px; align-items: center; padding-right: 0; }
.featured-event--banner .featured-event-calendar { align-self: center; }
.featured-event--banner .calendar-date { padding: 0; align-items: flex-start; gap: 4px; }
.featured-event--banner .calendar-day { font-size: 4rem; line-height: 1; font-weight: 400; letter-spacing: -.065em; }
.featured-event--banner .featured-event-calendar { text-align: left; }
.featured-event--banner .event-countdown { font-weight: 400; color: var(--v2-color-accent); font-size: var(--v2-type-label); }
.featured-event--banner .featured-event-copy { display: flex; flex-direction: column; gap: 8px; }
.featured-event--banner .featured-event-copy :is(h2, h3) { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -.025em; color: var(--v2-color-paper); margin: 0; }
.featured-event--banner .featured-event-description { margin: 0; }
.featured-event--banner .featured-event-facts { margin: 0; display: flex; gap: 12px; }
.featured-event--banner .featured-event-arrow { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); }
.featured-event--banner .featured-event-hours { color: var(--v2-color-dark-muted); white-space: nowrap; }
.featured-event--banner .featured-event-action { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
@media (min-width: 768px) and (max-width: 1000px) {
  .featured-event--banner .featured-event-main { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 24px; }
  .featured-event--banner { padding: 24px; }
}
@media (max-width: 767px) {
  .featured-event--banner { padding: 24px; }
  .featured-event--banner .featured-event-main { grid-template-columns: 1fr; gap: 24px; padding-right: 0; }
  .featured-event--banner .featured-event-calendar { grid-column: auto; grid-row: auto; }
  .featured-event--banner .featured-event-copy { display: block; }
  .featured-event--banner .featured-event-description { margin-top: 10px; }
  .featured-event--banner .featured-event-facts { gap: 16px; }
  .featured-event--banner .featured-event-arrow { top: 32px; right: 24px; transform: none; }
  .featured-event--banner .featured-event-calendar { display: flex; align-items: center; gap: 24px; }
  .featured-event--banner .calendar-date { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; }
  .featured-event--banner .calendar-day { grid-column: 1; grid-row: 1; font-size: 3.5rem; order: 0; }
  .featured-event--banner .calendar-weekday, .featured-event--banner .calendar-month { grid-column: 2; font-size: 1rem; align-self: center; }
  .featured-event--banner .event-countdown { margin: 0 0 0 auto; }
}
@media (max-width: 767px) {
  .featured-event--banner { border-radius: 18px 26px 18px 26px; }
}
/* A visible action makes the whole meetup banner read as a link. */
.featured-event--banner .featured-event-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 16px; border-radius: 24px; background: var(--v2-color-paper); color: var(--v2-color-ink); font-size: var(--v2-type-label); font-weight: 700; }
.featured-event--banner:hover .featured-event-cta, .featured-event--banner:focus-visible .featured-event-cta { background: var(--v2-color-focus); }
.featured-event--banner:focus-visible { outline: 3px solid var(--v2-color-ink); outline-offset: 12px; }
@media (max-width: 767px) {
  .featured-event--banner .featured-event-action { justify-self: start; }
}
@media (min-width: 768px) {
  .featured-event--banner { padding-block: 36px; }
  .featured-event--banner .calendar-date { gap: 0; }
  .featured-event--banner .calendar-day { font-size: 4.5rem; }
  .featured-event--banner .calendar-month { font-size: 1rem; line-height: 1.2; }
}
@supports (text-box-trim: trim-both) {
  @media (min-width: 768px) {
    .featured-event--banner .calendar-day,
    .featured-event--banner .calendar-month,
    .featured-event--banner .featured-event-copy :is(h2, h3),
    .featured-event--banner .featured-event-description {
      display: block;
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }
    .featured-event--banner .calendar-date { gap: 10px; }
    .featured-event--banner .featured-event-copy { gap: 16px; }
}
}