/* EVENTS FIRST SCREEN v1 (templates a5 10-21; Master: events v6 witnesses PV01 / PV06; rule: what / when / where + the ticket CTA in the first viewport). FIXED shared file, linked after app.css on events pages.
   Measured on the real PV01 / PV06 bytes: the 'type' layout (data-l-fs=type, layouts.css + kvsites.css) set the H1 to 99 px at 1280 (three lines), the hero photo ran 304 px, the kicker pill sat flush on the photo edge, the CTA row
   was at y 1185 (first screen 800). Here: H1 capped (~56 px at 1280, 2 lines), photo 24vh, 14-26 px under the photo, kicker one line, and the CTA row sits right under the headline (lead + when follow). Higher specificity than the
   layout rules (html[...][data-l-fs] main ...). CSS only, no layout shift: the boxes keep their own sizes. */
html[data-kv-kit="events"] main [data-sec="hero"]{padding-block:clamp(20px,3vw,40px) clamp(24px,3vw,48px);gap:clamp(14px,2vw,24px) clamp(40px,6vw,96px)}
html[data-kv-kit="events"] main [data-sec="hero"]>.hero-photo{margin:0 0 clamp(14px,1.8vw,26px)}
html[data-kv-kit="events"] main [data-sec="hero"] .hero-photo img{height:clamp(140px,24vh,240px)}
html[data-kv-kit="events"] main [data-sec="hero"] .kicker{font-size:.78rem;letter-spacing:.1em;padding:8px 14px;max-width:none}
html[data-kv-kit="events"][data-l-fs] main [data-sec="hero"] h1{font-size:clamp(2.1rem,1.2rem + 2.9vw,3.9rem);max-width:20ch;line-height:1.04}
html[data-kv-kit="events"] main [data-sec="hero"] .hero-copy>.actions{order:1}
html[data-kv-kit="events"] main [data-sec="hero"] .hero-copy>:is(.lead,#hero-p){order:2}
html[data-kv-kit="events"] main [data-sec="hero"] .hero-copy>.when{order:3}