/* Selected photo hero. Comparison UI and unused variants removed. */
body[data-hero-option] #hero { padding:22px 0 16px; }
body[data-hero-option] #hero .browser-main { background:var(--color-paper); padding:78px 36px 28px; }
body[data-hero-option] #hero .browser-chrome { background:var(--color-yellow); }
body[data-hero-option] #hero .hero-layout { display:block; }
body[data-hero-option] #hero .hero-copy { background:transparent; border:0; box-shadow:none; padding:0 32px; max-width:900px; margin:0 auto; }
body[data-hero-option] #hero .hero-art { max-width:440px; width:100%; margin-bottom:20px; transform:rotate(-2deg); }
body[data-hero-option] #hero .hero-tagline { max-width:640px; font-size:1.1rem; margin:0 auto 16px; }
body[data-hero-option] #hero .hero-badges { margin-bottom:20px; }
body[data-hero-option] #hero .hero-cta-group { gap:22px; }
body[data-hero-option] #hero .hero-token { width:66px; height:66px; }
body[data-hero-option] #hero .token-one { left:20px; top:32px; }
body[data-hero-option] #hero .token-two { right:16px; bottom:20px; }
body[data-hero-option] #hero #nextEventCard { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto; max-width:none; align-items:center; margin:28px 0 0; padding:20px 0 0; gap:20px; background:transparent; border:0; border-top:1px solid var(--color-divider); border-radius:0; text-align:left; }
body[data-hero-option] #hero #nextEventCard .next-event-eyebrow { justify-content:flex-start; margin-bottom:7px; }
body[data-hero-option] #hero #nextEventCard .next-event-title { font-size:1.25rem; text-align:left; }
body[data-hero-option] #hero #nextEventCard .next-event-datetime { font-size:.85rem; }
body[data-hero-option] #hero #nextEventCard .action-button { font-size:.9rem; padding:10px 16px; margin:0; }
@media(max-width:850px) {
body[data-hero-option] #hero .browser-main { padding:72px 24px 24px; }
body[data-hero-option] #hero #nextEventCard { grid-template-columns:1fr auto; }
body[data-hero-option] #hero #nextEventCard .next-event-heading,
body[data-hero-option] #hero #nextEventCard .next-event-meta { grid-column:1; }
body[data-hero-option] #hero #nextEventCard .action-button { grid-column:2; grid-row:1/3; }
}
@media(max-width:650px) {
body[data-hero-option] #hero .browser-main { padding:65px 18px 22px; }
body[data-hero-option] #hero .hero-copy { padding:8px 6px; }
body[data-hero-option] #hero .hero-art { max-width:310px; margin-bottom:18px; }
body[data-hero-option] #hero .hero-tagline { font-size:1rem; }
body[data-hero-option] #hero .hero-cta-group { gap:16px; }
body[data-hero-option] #hero .hero-token { width:40px; height:40px; }
body[data-hero-option] #hero .token-one { left:-10px; top:-6px; }
body[data-hero-option] #hero .token-two { right:-12px; bottom:76px; }
body[data-hero-option] #hero #nextEventCard { display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px 0 0; gap:14px; }
body[data-hero-option] #hero #nextEventCard .next-event-eyebrow { justify-content:center; }
body[data-hero-option] #hero #nextEventCard .next-event-title { text-align:center; }
}
.hero-photo { display:none; }
body[data-hero-option="10"] #hero .hero-layout { display:grid; grid-template-columns:1fr 1fr; gap:24px 34px; align-items:center; }
body[data-hero-option="10"] #hero .hero-copy { padding:12px 10px; }
body[data-hero-option="10"] #hero .hero-art { max-width:340px; }
body[data-hero-option="10"] #hero .hero-tagline { font-size:1rem; }
body[data-hero-option="10"] #hero .hero-photo { display:block; margin:0; position:relative; height:100%; min-height:350px; border:2px solid var(--color-ink); border-radius:10px; overflow:hidden; }
.hero-photo img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; display:block; }
.hero-photo figcaption { position:absolute; bottom:16px; left:16px; right:16px; padding:10px 14px; border:2px solid var(--color-ink); border-radius:6px; background:var(--color-paper); font:1.2rem/1.3 var(--font-display); }
body[data-hero-option="10"] #hero #nextEventCard { grid-column:1/-1; margin:0; }
body[data-hero-option="10"] #hero .token-one { width:48px; height:48px; left:-12px; top:0; }
body[data-hero-option="10"] #hero .token-two { width:45px; height:45px; right:-10px; bottom:63px; }
@media(max-width:950px) {
body[data-hero-option="10"] #hero .hero-layout { gap:24px; }
body[data-hero-option="10"] #hero .hero-photo { min-height:340px; }
}
@media(max-width:650px) {
body[data-hero-option="10"] #hero .hero-layout { display:flex; flex-direction:column; gap:24px; }
body[data-hero-option="10"] #hero .hero-copy { padding:10px 4px; }
body[data-hero-option="10"] #hero .hero-photo { width:100%; min-height:0; height:auto; aspect-ratio:3/2; }
.hero-photo figcaption { font-size:1rem; padding:8px 10px; bottom:10px; left:10px; right:10px; }
body[data-hero-option="10"] #hero #nextEventCard { width:100%; }
}
body[data-hero-option="10"] #hero #nextEventCard { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;
 width:calc(100% + 72px); margin:0 -36px -28px;
 padding:24px 36px; background:#e4f0f4;
 border:0; border-top:2px solid var(--color-ink); text-align:center; }
body[data-hero-option="10"] #hero #nextEventCard .next-event-eyebrow { justify-content:center; }
body[data-hero-option="10"] #hero #nextEventCard .next-event-title { text-align:center; }
body[data-hero-option="10"] #hero #nextEventCard .next-event-meta { text-align:center; }
body[data-hero-option="10"] #hero #nextEventCard .action-button { justify-self:center; background:var(--color-paper); color:var(--color-ink);
 border:2px solid var(--color-ink); box-shadow:none; }
body[data-hero-option="10"] #hero #nextEventCard .action-button:hover { background:var(--color-teal-soft); color:var(--color-ink); box-shadow:none; }
@media(max-width:850px) {
body[data-hero-option="10"] #hero #nextEventCard { width:calc(100% + 48px); margin-inline:-24px; padding:22px 24px; grid-template-columns:1fr; gap:16px; }
body[data-hero-option="10"] #hero #nextEventCard .next-event-heading,
body[data-hero-option="10"] #hero #nextEventCard .next-event-meta,
body[data-hero-option="10"] #hero #nextEventCard .action-button { grid-column:auto; grid-row:auto; }
}
@media(max-width:650px) {
body[data-hero-option="10"] #hero #nextEventCard { width:calc(100% + 36px); margin:0 -18px -22px; padding:22px 18px; }
body[data-hero-option="10"] #hero .hero-cta-group { flex-direction:column; align-items:center; gap:10px; }
}