/* ---------- NAV (matches Meet Our Team / Become a Partner: static dark bar, no overlay photo) ---------- */
header.site-nav{background:var(--ink); position:relative; z-index:60;}
.nav-inner{max-width:var(--max); margin:0 auto; padding:22px 32px; display:flex; align-items:center; justify-content:space-between;}
section{padding:80px 0;}
/* ---------- HERO — full-bleed, text over image, matching the Meet Our Team hero treatment
exactly (same scrim recipe, same text placement) rather than a boxed split layout. ---------- */
.events-hero{
position:relative; overflow:hidden; min-height:560px;
background:#14120f;
}
.events-hero-ph{position:absolute; inset:0;}
.events-hero-ph img{
width:100%; height:100%; object-fit:cover; object-position:62% 60%; display:block;
filter:contrast(1.1) saturate(0.9) brightness(0.97);
}
.events-hero-ph::after{
content:""; position:absolute; inset:0; pointer-events:none; opacity:0.05; mix-blend-mode:overlay; z-index:1;
background-image:url("data:image/svg+xml;utf8,");
}
.events-hero-scrim{
position:absolute; inset:0; z-index:1;
background:
linear-gradient(to top, rgba(10,9,8,0.58) 0%, rgba(10,9,8,0.06) 46%, rgba(10,9,8,0.18) 100%),
linear-gradient(to right, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.12) 42%, rgba(10,9,8,0) 72%);
}
.events-hero-text{
position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:128px 32px 80px;
min-height:560px; display:flex; flex-direction:column; justify-content:flex-end;
}
.events-hero-text .label{color:var(--gold); margin-bottom:18px;}
.events-hero-text h1{color:var(--white); font-size:clamp(38px,6vw,64px);}
.events-hero-dek{font-size:16px; color:rgba(255,255,255,0.75); max-width:480px; margin-top:20px; line-height:1.6;}
/* Small on-image tag flagging the placeholder photo — kept separate from the real hero text block */
.events-hero-phtag{
position:absolute; z-index:2; top:22px; right:32px;
font-family:'Oswald',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
color:rgba(255,255,255,0.78); line-height:1.5; text-align:right;
border-right:2px solid rgba(255,255,255,0.45); padding-right:10px; max-width:240px;
}
/* ---------- EVENT FEATURE — one consistent component used for both events: same image
proportions and height, alternating which side the photo sits on for editorial variety
instead of two different sizes or a repeated identical card. ---------- */
.event-feature{background:var(--white);}
.event-feature + .event-feature{border-top:1px solid rgba(192,138,62,0.35);}
.event-feature-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:center;}
.event-feature-alt .event-feature-grid{grid-template-columns:1fr 1.2fr;}
.event-feature-alt .event-feature-copy{order:1;}
.event-feature-alt .event-feature-photo{order:2;}
.event-feature-photo{position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:3px;}
.event-feature-photo img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.event-feature-photo picture img{object-position:50% 68%; filter:saturate(0.97) contrast(1.04) brightness(1.0);}
.event-feature-photo::after{
content:""; position:absolute; inset:0; pointer-events:none; opacity:0.05; mix-blend-mode:overlay; z-index:1;
background-image:url("data:image/svg+xml;utf8,");
}
.event-feature-copy .label{color:var(--maroon); margin-bottom:14px;}
.event-feature-copy h2{font-size:clamp(28px,3.6vw,38px); margin-bottom:10px;}
.event-feature-copy .status{
font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.07em;
text-transform:uppercase; color:var(--gold); margin-bottom:16px;
}
.event-feature-copy p{font-size:15px; line-height:1.6; color:var(--grey-text); max-width:420px; margin-bottom:20px;}
.event-feature-copy .event-link{
display:inline-flex; align-items:center; gap:6px;
font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; letter-spacing:0.04em; text-transform:uppercase;
color:var(--maroon); border-bottom:2px solid var(--maroon); padding-bottom:2px;
}
.event-feature-copy .event-link:hover{color:var(--maroon-dark); border-color:var(--maroon-dark);}
/* ---------- PHOTO PLACEHOLDER — warm, cinematic stand-in for the Derby photo, sized exactly as
the final image will be (same .event-feature-photo frame, aspect-ratio, and radius). Swap by
replacing this div with a real . ---------- */
.img-placeholder{
position:absolute; inset:0; display:flex; align-items:flex-end; overflow:hidden;
}
.img-placeholder::before{content:""; position:absolute; inset:0;}
.img-placeholder .ph-tag{
position:relative; z-index:2; margin:18px;
font-family:'Oswald',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
color:rgba(255,255,255,0.82); line-height:1.5;
border-left:2px solid rgba(255,255,255,0.5); padding-left:10px; max-width:240px;
}
.ph-derby::before{
background:
linear-gradient(100deg, rgba(13,12,11,0.35) 0%, rgba(13,12,11,0) 38%),
linear-gradient(135deg, #3a1f1a 0%, #862633 38%, #a8512f 66%, #c08a3e 100%);
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
.nav-links{display:none;}
.events-hero{min-height:480px;}
.events-hero-text{min-height:480px; padding:104px 24px 56px;}
.event-feature-grid,
.event-feature-alt .event-feature-grid{grid-template-columns:1fr; gap:26px;}
.event-feature-alt .event-feature-photo{order:0;}
.event-feature-alt .event-feature-copy{order:1;}
}
@media (max-width: 640px){
.wrap{padding:0 20px;}
section{padding:60px 0;}
.events-hero{min-height:420px;}
.events-hero-text{min-height:420px; padding:96px 20px 44px;}
.events-hero-phtag{display:none;}
}