/* Event content pages: the hackathon, workshops and vibe coding explainer.
   Builds on editorial.css and event-coast.css, which supply the New College
   palette, .container, .coast-section, .event-action and .coast-faq. */

.page-event-sub { --ncf-blue: #003087; --ncf-gold: #ffbf3f; --ncf-sky: #7bafd4; --sand: #fff4dc; background: var(--sand); color: var(--ncf-blue); }

/* The homepage nav floats over its hero. These pages have no hero, so it sits in the flow. */
.page-event-sub .event-nav { position: relative; background: var(--ncf-blue); padding-block: 1.1rem; }
.page-event-sub .event-nav-links { flex-wrap: wrap; row-gap: .4rem; }
.page-event-sub .event-nav a[aria-current="page"] { color: var(--ncf-gold); }

.subpage-header { position: relative; overflow: hidden; color: white; background: radial-gradient(ellipse at 85% 30%, #124e99 0, var(--ncf-blue) 60%); padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem); }
.subpage-header .container { position: relative; z-index: 1; display: grid; gap: 1.25rem; max-width: 52rem; }
.subpage-header::after { content: ''; position: absolute; inset: 0 0 0 auto; width: min(46%, 34rem); background: url('../images/heroes/banyan-join.webp') center / cover no-repeat; opacity: .32; mask-image: linear-gradient(90deg, transparent, black 45%); }
@media (max-width: 640px) { .subpage-header::after { width: 70%; opacity: .16; } }
.subpage-kicker { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ncf-gold); }
.subpage-header h1 { color: white; margin: 0; font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.04; text-wrap: balance; border-top: 3px solid var(--ncf-gold); padding-top: 1rem; width: fit-content; }
.subpage-header .subpage-lead { margin: 0; max-width: 40rem; font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.6; color: rgb(255 255 255 / 92%); }
.subpage-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; font-weight: 600; }
.subpage-facts li::before { content: '·'; margin-right: 1.25rem; color: var(--ncf-gold); }
.subpage-facts li:first-child::before { content: none; }
.subpage-header .event-intro-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.subpage-header .event-action-quiet { color: white; background: transparent; border: 1px solid rgb(255 255 255 / 55%); }
.subpage-header .event-action-quiet:hover { background: rgb(255 255 255 / 12%); color: white; }

/* Reading sections */
.prose-section { padding-block: clamp(3rem, 6vw, 4.5rem); }
.prose-section + .prose-section { padding-top: 0; }
.prose-section .container { display: grid; gap: 1.1rem; max-width: 52rem; }
.prose-section h2 { color: var(--ncf-blue); margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.12; text-wrap: balance; }
.prose-section p, .prose-section li { font-size: 1.05rem; line-height: 1.7; max-width: 42rem; }
.prose-section p { margin: 0; }
.prose-section a:not(.event-action) { color: var(--ncf-blue); text-underline-offset: .2em; text-decoration-color: rgb(0 48 135 / 45%); }
.prose-section blockquote { margin: 0; padding: .9rem 1.2rem; border-left: 3px solid var(--ncf-gold); background: rgb(255 191 63 / 14%); font-size: 1.08rem; line-height: 1.6; max-width: 42rem; }
.prose-section blockquote cite { display: block; margin-top: .4rem; font-size: .9rem; font-style: normal; }
.prose-section.on-sky { background: var(--ncf-sky); padding-top: clamp(3rem, 6vw, 4.5rem); }
.prose-section.on-sky + .prose-section { padding-top: clamp(3rem, 6vw, 4.5rem); }

/* Two-up cards for the two days and similar pairs */
.pair { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.pair article { display: grid; gap: .5rem; align-content: start; padding: 1.25rem 1.35rem; background: rgb(255 255 255 / 62%); border-top: 3px solid var(--ncf-gold); border-radius: 3px; }
.pair h3 { margin: 0; font-size: 1.15rem; }
.pair p { font-size: 1rem; }

/* Numbered steps */
.steps-list { counter-reset: step; display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.steps-list li { counter-increment: step; display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; align-items: start; max-width: 44rem; }
.steps-list li::before { content: counter(step); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--ncf-blue); color: var(--ncf-gold); font-weight: 700; }
.steps-list b { display: block; margin-bottom: .15rem; }

/* Category and tool lists */
.term-list { display: grid; gap: 0; margin: 0; border-top: 1px solid rgb(0 48 135 / 22%); }
.term-list > div { display: grid; grid-template-columns: minmax(0, 13rem) 1fr; gap: .4rem 1.5rem; padding: .85rem 0; border-bottom: 1px solid rgb(0 48 135 / 22%); }
.term-list dt { font-weight: 700; }
.term-list dd { margin: 0; line-height: 1.6; }
@media (max-width: 560px) { .term-list > div { grid-template-columns: 1fr; } }

.timeline-strip { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin: 0; }
.timeline-strip > div { padding: 1rem 1.1rem; background: var(--ncf-blue); color: white; border-radius: 3px; }
.timeline-strip dt { font-weight: 700; color: var(--ncf-gold); }
.timeline-strip dd { margin: .25rem 0 0; }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.related-pages { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.related-pages a { display: inline-flex; padding: .55rem .95rem; border: 1px solid rgb(0 48 135 / 35%); border-radius: 3px; text-decoration: none; font-weight: 600; }
.related-pages a:hover { background: rgb(0 48 135 / 8%); }

.page-event-sub .coast-faq .container { max-width: 62rem; }
.page-event-sub .event-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; }

@media (prefers-reduced-motion: reduce) { .page-event-sub * { transition: none !important; } }