.event-page { padding-bottom: var(--section-y); }
.event-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(78svh, 760px); display: flex; align-items: end; background: var(--c-ink); color: var(--c-white); }
.event-hero .eyebrow { --eyebrow: var(--c-white); }
.event-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 20%, transparent), color-mix(in srgb, var(--c-ink) 94%, transparent)); }
.event-hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.event-hero .event-art { z-index: -2; }
.event-hero__content { position: relative; z-index: 1; padding-top: 160px; padding-bottom: clamp(50px, 7vw, 105px); }
.event-crumb { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(42px, 7vw, 100px); font-size: 13px; font-weight: 600; }
.event-crumb a { text-decoration: underline; text-underline-offset: 3px; }
.event-hero h1 { max-width: 14ch; font: 700 clamp(48px, 7vw, 112px)/.94 var(--font-display); letter-spacing: var(--tr-heading); overflow-wrap: anywhere; text-wrap: balance; margin-top: 22px; }
.event-hero__when { margin-top: 18px; font: 600 var(--fs-lead)/1.35 var(--font-body); overflow-wrap: anywhere; }
.event-hero__lead { max-width: 55ch; margin-top: 25px; font-size: var(--fs-lead); }
.event-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .75fr); gap: clamp(55px, 7vw, 120px); padding-top: var(--section-y); }
.event-body__main, .event-more { min-width: 0; }
.event-body .section-head { margin-bottom: 35px; }
.event-facts { margin: 0; display: grid; border-top: 1px solid var(--color-border); }
.event-facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.event-facts dt { font: 500 12px var(--font-body); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--color-text-2); }
.event-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.event-facts dd span { display: block; font-weight: 400; color: var(--color-text-2); }
.event-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 34px; }
.event-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }
.event-dot { --cat: var(--c-ink); display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cat); }
.event-dot[data-min="kids"] { --cat: var(--c-green); }
.event-dot[data-min="students"] { --cat: var(--c-forest); }
.event-dot[data-min="royal-rangers"] { --cat: var(--c-ochre); }
.event-dot[data-min="girls"] { --cat: var(--c-sage-deep); }
.event-dot[data-min="discipleship"] { --cat: var(--c-ink-muted); }
.event-dot[data-min="church-planting"] { --cat: var(--c-sage); }
.event-description { margin: 30px 0; overflow-wrap: anywhere; }
.event-description a { color: var(--color-link); text-decoration: underline; }
.event-actions { margin-top: 36px; }
.event-notice { border-left: 5px solid var(--c-ochre); padding: 20px 25px; background: var(--c-paper); margin-bottom: 45px; }
.event-notice strong { display: block; font-size: 22px; }
.event-more__list { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--color-border); }
.event-more__list a { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; padding: 18px 0; border-bottom: 1px solid var(--color-border); }
.event-more__list span { grid-column: 1 / -1; font: 500 12px var(--font-body); text-transform: uppercase; color: var(--color-text-2); }
.event-more__list strong { font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.event-more__list svg { width: 18px; height: 18px; align-self: center; }
.event-more > .btn { margin-top: 25px; }
@media (max-width: 800px) { .event-body { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .event-hero { min-height: 620px; }
  .event-hero h1 { font-size: clamp(42px, 12vw, 64px); }
  .event-crumb { gap: 8px; }
  .event-facts > div { grid-template-columns: 1fr; gap: 5px; }
  .event-body .btn { max-width: 100%; white-space: normal; }
}