/* ==========================================================================
   FANG FUTURES — Events
   Sits on offering.css and principles.css: the same hero head and reading column.
   Adds the event rows: a date block beside the details, one hairline between each.
   ========================================================================== */

.events{display:grid;margin-top:var(--space-4)}
.event{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--space-5);padding:clamp(32px,4.5vh,52px) 0;border-top:var(--border-hair);scroll-margin-top:120px}
.event:last-child{border-bottom:var(--border-hair)}

/* the date: weekday and month in mono, the day in Black */
.event-date{display:grid;justify-items:start;align-content:start;gap:6px;padding-top:.3em}
.event-dow,.event-mon{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.event-day{font-weight:900;font-size:clamp(2.8rem,4.4vw,3.6rem);line-height:.82;letter-spacing:-.03em;color:var(--fg1);font-variant-numeric:tabular-nums}

.event-body{display:grid;gap:var(--space-4);justify-items:start}
.event-host{font-size:var(--text-xs)}
.event-title{font-weight:900;font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.1;letter-spacing:-.015em;text-wrap:balance;margin-top:-6px}

/* when / where: labels in mono, one hairline above */
.event-meta{display:grid;gap:8px;width:100%;padding-top:var(--space-3);border-top:1px solid var(--hairline-strong)}
.event-meta div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--space-3);align-items:baseline}
.event-meta dt{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3)}
.event-meta dd{font-size:var(--text-base);line-height:1.5;color:var(--fg1);font-weight:600}

.event-copy{display:grid;gap:1em;font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:var(--fg2);text-wrap:pretty;max-width:60ch}
.event-cta{margin-top:var(--space-2)}

@media (max-width:768px){
  .event{grid-template-columns:1fr;gap:var(--space-4)}
  .event-date{grid-auto-flow:column;align-items:baseline;justify-content:start;gap:10px;padding-top:0}
  .event-day{font-size:2.4rem}
  .event-meta div{grid-template-columns:1fr;gap:2px}
}