/* Event information reads horizontally and flows down the page. */
.events,#eventGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;overflow:visible;writing-mode:horizontal-tb}
.events .event-card{grid-template-columns:minmax(150px,28%) minmax(0,1fr);grid-template-rows:auto;min-width:0;writing-mode:horizontal-tb}
.events .event-card-visual{min-height:190px}
.events .event-card-body{min-width:0;border-top:0;border-left:5px solid var(--event-color);overflow-wrap:anywhere}
.events .event-card-year{font-size:30px}
#eventGrid .card{display:grid;grid-template-columns:minmax(140px,24%) 4px minmax(0,1fr);min-width:0;writing-mode:horizontal-tb}
#eventGrid .card-img{height:100%;min-height:150px;aspect-ratio:auto}
#eventGrid .card-color-bar{height:auto}
#eventGrid .card-body{min-width:0;overflow-wrap:anywhere}
#eventGrid .card-name{font-size:1.1rem;line-height:1.5}
#eventGrid .card-desc{font-size:.88rem;line-height:1.8}
#eventTabs{flex-wrap:wrap;overflow:visible}
#eventTabs .tab-btn{white-space:normal;text-align:left}
@media(max-width:600px){
 .events .event-card{grid-template-columns:100px minmax(0,1fr)}
 .events .event-card-visual{min-height:150px}
 .events .event-card-body{padding:14px 12px;border-left-width:3px}
 .events .event-card h3{font-size:18px}
 .events .event-card p{font-size:13px;line-height:1.7}
 .events .event-card-year{font-size:22px;right:8px}
 .events .event-card-status{left:6px;top:8px;padding:4px;font-size:9px}
 .events .event-card-word{font-size:22px;left:8px;right:8px}
 #eventGrid .card{grid-template-columns:90px 3px minmax(0,1fr)}
 #eventGrid .card-body{padding:14px 12px}
 #eventGrid .card-name{font-size:1rem}
 #eventGrid .card-desc{font-size:.82rem}
}