/* news-feature-events-dates
   Generated from the approved mockup CSS by wp-build/css.py, plus css-fixes/news-feature-events-dates.css. */
.happening-split { background: var(--stone); padding: var(--section) 0; }
.happening-split h2 { margin-bottom: var(--s6); }
.happening-split .happening-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.happening-split .sub { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--muted); margin-bottom: var(--s3); }
.happening-split .feature figure { margin: 0 0 var(--s3); border-radius: var(--r-img); overflow: hidden; aspect-ratio: 2 / 1; }
.happening-split .feature img { width: 100%; height: 100%; object-fit: cover; }
.happening-split .feature h4 { font-size: 28px; font-weight: 500; line-height: 1.25; max-width: 24ch; }
.happening-split .feature h4 a, .happening-split .headlines a { color: var(--ink); text-decoration: none; }
.happening-split .feature h4 a:hover, .happening-split .headlines a:hover { text-decoration: underline; text-underline-offset: 4px; }
.happening-split .headlines { display: grid; gap: var(--s4); margin: var(--s5) 0; }
.happening-split .headlines a { font-family: var(--head); font-weight: 500; font-size: 21px; line-height: 1.3; }
.happening-split .event-list { display: grid; gap: var(--s4); }
.happening-split .event-list li { display: flex; gap: var(--s3); align-items: flex-start; }
.happening-split .date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; height: 76px; border-radius: 12px; background: var(--card); }
.happening-split .date .mon { font-size: 14px; font-weight: 700; color: var(--accent); line-height: 1.2; }
.happening-split .date .day { font-family: var(--head); font-weight: 500; font-size: 30px; line-height: 1.05; color: var(--ink); }
.happening-split .event-list a { font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; line-height: 1.4; }
.happening-split .event-list a:hover { text-decoration: underline; }
.happening-split .event-list p { color: var(--muted); font-size: 16px; margin-top: 4px; }
.happening-split .events .textlink { margin-top: var(--s5); }
@media (max-width: 900px) {
  .happening-split .happening-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .happening-split h2 { margin-bottom: var(--s5); }
}