/**
 * Event template styles.
 *
 * Loaded only on pages assigned the "Event" template (page-event).
 * Mathematical 8-pt grid, 1.250 modular type scale, navy/yellow brand.
 *
 * Sections:
 *   .event-hero
 *   .event-agenda
 *   .event-speakers
 *   .event-logistics
 *   .event-rsvp
 */

/* ─────────────────────────────────────────────────────────────────────────
 * Hero — date stamp + cinematic photo
 * ───────────────────────────────────────────────────────────────────────── */

.event-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: hsl(var(--aos-navy-deep));
	color: hsl(0 0% 100%);
	min-height: clamp(520px, 64vh, 680px);
	display: flex;
	align-items: center;
	padding: clamp(64px, 8vw, 112px) 0 clamp(56px, 7vw, 96px);
}
/* Defensive: absolute-positioned hero overlays must not inherit
   Gutenberg flow-layout's `margin-block-start: var(--gap)` (32px) which
   it auto-applies to every non-first direct child. The margin would
   displace the absolute layer's rendered position 32px down from its
   containing block's top edge, leaving a strip of bare image above it. */
.event-hero > .event-hero__media { margin: 0 !important; }
.event-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}
.event-hero__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 35%;
	opacity: 0.42;
	transform: scale(1.04);
}
.event-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, hsl(var(--aos-navy-deep) / 0.45) 0%, hsl(var(--aos-navy-deep) / 0.85) 100%),
		linear-gradient(90deg, hsl(var(--aos-navy-deep) / 0.7) 0%, transparent 56%);
	pointer-events: none;
}
.event-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container, min(100%, 1680px));
	margin: 0 auto;
	padding: 0 var(--gutter, clamp(1.25rem, 4vw, 4rem));
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	width: 100%;
}

.event-hero__datestamp {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 22px 28px;
	border: 1px solid hsl(0 0% 100% / 0.18);
	border-radius: 14px;
	background: hsl(0 0% 100% / 0.06);
	backdrop-filter: blur(8px);
	min-width: 132px;
	margin-top: 8px;
}
.event-hero__datestamp > * { margin: 0 !important; }
.event-hero__month {
	font-family: var(--body, system-ui);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: hsl(var(--aos-yellow));
}
.event-hero__day {
	font-family: var(--display);
	font-size: clamp(48px, 6vw, 72px);
	font-weight: 350;
	line-height: 1;
	color: hsl(0 0% 100%);
	letter-spacing: -0.03em;
	font-variation-settings: "opsz" 60;
	font-variant-numeric: lining-nums tabular-nums;
}
.event-hero__year {
	font-family: var(--body, system-ui);
	font-size: 13px;
	font-weight: 500;
	color: hsl(0 0% 100% / 0.66);
	letter-spacing: 0.06em;
	margin-top: 2px !important;
}

.event-hero__content { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.event-hero__content > * { margin: 0 !important; }
/* .event-hero__eyebrow now styled by the canonical Style B (on dark)
   rule in aos-components.css — do NOT redeclare here. */
.event-hero__title {
	font-family: var(--display);
	font-weight: 350;
	font-size: clamp(2rem, 4.6vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: -0.024em;
	color: hsl(0 0% 100%);
	font-variation-settings: "opsz" 60;
	max-width: 22ch;
}
.event-hero__title em {
	color: hsl(var(--aos-yellow));
	font-style: italic;
	font-weight: 350;
}
.event-hero__lede {
	font-size: clamp(0.98rem, 1.15vw, 1.1rem);
	line-height: 1.6;
	color: hsl(0 0% 100% / 0.82);
	max-width: 56ch;
}

/* Key/value meta — a real 2-column grid so labels and values align
   crisply regardless of value length. Override Gutenberg's
   `is-layout-flex` (which sets align-items: center) so values stretch
   left-aligned with the lede above. */
.event-hero__meta {
	display: grid !important;
	grid-template-columns: max-content 1fr;
	gap: 6px 20px;
	align-items: baseline !important;
	justify-items: start !important;
	margin-top: 14px !important;
	padding: 16px 0 4px;
	border-top: 1px solid hsl(0 0% 100% / 0.14);
	max-width: 56ch;
}
.event-hero__meta-item {
	display: contents;
	font-size: 14.5px;
	line-height: 1.55;
	color: hsl(0 0% 100% / 0.82);
}
.event-hero__meta-item strong {
	font-family: var(--body, system-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--aos-yellow));
	padding-top: 3px;
	white-space: nowrap;
}
.event-hero__ctas { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.event-hero__ctas .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: 100px;
	font-family: var(--body, system-ui);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.event-hero__ctas .btn--primary {
	background: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy-deep));
	border: 1px solid hsl(var(--aos-yellow));
}
.event-hero__ctas .btn--primary:hover { background: hsl(var(--aos-yellow-deep)); }
.event-hero__ctas .btn--secondary {
	background: transparent;
	color: hsl(0 0% 100%);
	border: 1px solid hsl(0 0% 100% / 0.32);
}
.event-hero__ctas .btn--secondary:hover { background: hsl(0 0% 100% / 0.08); border-color: hsl(0 0% 100% / 0.6); }

@media (max-width: 720px) {
	.event-hero__inner { grid-template-columns: 1fr !important; gap: 32px !important; }
	.event-hero__datestamp { flex-direction: row !important; gap: 14px !important; align-items: center; padding: 14px 20px; }
	.event-hero__day { font-size: 40px; }
	.event-hero__year { margin-top: 0 !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Section primitives (.sec) — shared with admissions & home.
 * Loaded here so event pages can render aid-shaped section blocks alongside
 * dedicated event blocks without depending on the admissions stylesheet.
 * ───────────────────────────────────────────────────────────────────────── */
.aos-event-page .sec {
	padding: var(--section-py) 0;
	background: hsl(var(--bg));
}
.aos-event-page .sec--alt { background: hsl(var(--bg-alt)); }
.aos-event-page .sec__inner {
	max-width: var(--container, min(100%, 1680px));
	margin: 0 auto;
	padding: 0 var(--gutter, clamp(1.25rem, 4vw, 4rem));
}
.aos-event-page .sec__head {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: end;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* .sec__head .eyebrow now uses the canonical Style A (light) rule from
   aos-components.css. Page-local margin-bottom only. */
.aos-event-page .sec__head .eyebrow { margin: 0 0 14px !important; }
/* h2 size + family canonical (main h2 in aos-components.css). Only color
   and content max-width are page-local. Do NOT redeclare font-size or
   font-family — that's what makes h2 sizes drift between pages. */
.aos-event-page .sec__head h2    { color: hsl(var(--aos-navy)); max-width: 22ch; }
.aos-event-page .sec__head h2 em { color: hsl(var(--aos-blue)); font-style: italic; }
.aos-event-page .sec__head .lead {
	font-family: var(--body, system-ui);
	font-size: var(--t-lede);
	line-height: var(--lh-body);
	color: hsl(var(--fg-muted));
	max-width: 46ch;
	margin: 0;
}
@media (max-width: 720px) {
	.aos-event-page .sec__head { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Schedule — vertical agenda with time + title + location columns
 * ───────────────────────────────────────────────────────────────────────── */

.event-agenda {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 920px;
	display: flex;
	flex-direction: column;
}
.event-agenda > * { margin: 0 !important; }
.event-agenda__row {
	display: grid;
	grid-template-columns: 140px 1fr 240px;
	gap: clamp(16px, 2vw, 32px);
	align-items: baseline;
	padding: 22px 0;
	border-top: 1px solid hsl(var(--border));
}
.event-agenda__row:last-child { border-bottom: 1px solid hsl(var(--border)); }
.event-agenda__row > * { margin: 0 !important; }
.event-agenda__time {
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: hsl(var(--aos-blue));
	text-transform: uppercase;
}
.event-agenda__title {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.3;
	color: hsl(var(--aos-navy));
	letter-spacing: -0.012em;
	font-variation-settings: "opsz" 36;
}
.event-agenda__where {
	font-family: var(--body, system-ui);
	font-size: 13px;
	color: hsl(var(--fg-muted));
	font-style: italic;
}
@media (max-width: 720px) {
	.event-agenda__row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 18px 0; }
	.event-agenda__time { letter-spacing: 0.08em; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Speakers — three-up profile grid
 * ───────────────────────────────────────────────────────────────────────── */

.event-speakers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(20px, 3vw, 40px);
}
.event-speakers > * { margin: 0 !important; }
.event-speakers__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
}
.event-speakers__card > * { margin: 0 !important; }
.event-speakers__photo {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	background: hsl(var(--bg-alt));
	aspect-ratio: 4 / 5;
}
.event-speakers__photo img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.event-speakers__name {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(1.15rem, 1.6vw, 1.35rem);
	line-height: 1.2;
	color: hsl(var(--aos-navy));
	letter-spacing: -0.012em;
	font-variation-settings: "opsz" 36;
	margin-top: 8px !important;
}
.event-speakers__role {
	font-family: var(--body, system-ui);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--aos-blue));
}
.event-speakers__bio {
	font-size: 14.5px;
	line-height: 1.6;
	color: hsl(var(--fg-muted));
	max-width: 38ch;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Logistics — 4 cards in a 2x2 grid
 * ───────────────────────────────────────────────────────────────────────── */

.event-logistics {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 3vw, 32px);
}
.event-logistics > * { margin: 0 !important; }
.event-logistics__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--card-padding);
	border-radius: var(--card-radius);
	background: hsl(var(--bg-card));
	border: var(--card-border);
	box-shadow: var(--card-shadow);
}
.event-logistics__card > * { margin: 0 !important; }
.event-logistics__kicker {
	font-family: var(--body, system-ui);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--aos-yellow-deep));
}
.event-logistics__card h3 {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(1.2rem, 1.8vw, 1.45rem);
	line-height: 1.2;
	color: hsl(var(--aos-navy));
	letter-spacing: -0.012em;
	font-variation-settings: "opsz" 36;
}
.event-logistics__card p {
	font-size: 14.5px;
	line-height: 1.65;
	color: hsl(var(--fg-muted));
	max-width: 58ch;
}
.event-logistics__card a {
	color: hsl(var(--aos-blue));
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.event-logistics__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px !important;
	font-size: 13px;
	font-weight: 500;
	color: hsl(var(--aos-navy));
	text-decoration: none;
	border-bottom: 1px solid hsl(var(--border-strong));
	padding-bottom: 2px;
	width: fit-content;
	transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), gap 200ms var(--ease-out);
}
.event-logistics__link:hover {
	color: hsl(var(--aos-yellow-deep));
	border-color: hsl(var(--aos-yellow));
	gap: 12px;
}
.event-logistics__link svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
	.event-logistics { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * RSVP — copy + form, two columns at desktop, stacked at mobile
 * ───────────────────────────────────────────────────────────────────────── */

.event-rsvp__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}
.event-rsvp__grid > * { margin: 0 !important; }
.event-rsvp__copy { display: flex; flex-direction: column; gap: 16px; max-width: 44ch; }
.event-rsvp__copy > * { margin: 0 !important; }
.event-rsvp__capacity {
	font-size: 12.5px;
	color: hsl(var(--fg-muted));
	margin-top: 8px !important;
}
.event-rsvp__capacity strong { color: hsl(var(--aos-blue)); font-weight: 700; }

.event-rsvp__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	padding: var(--card-padding);
	border-radius: var(--card-radius);
	background: hsl(var(--bg-card));
	border: var(--card-border);
	box-shadow: var(--card-shadow);
}
.event-rsvp__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.event-rsvp__field--full { grid-column: 1 / -1; }
.event-rsvp__field span {
	font-family: var(--body, system-ui);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: hsl(var(--aos-navy));
}
.event-rsvp__field input,
.event-rsvp__field select,
.event-rsvp__field textarea {
	font-family: var(--body, system-ui);
	font-size: 15px;
	padding: 12px 14px;
	border: 1px solid hsl(var(--border-strong));
	border-radius: 10px;
	background: hsl(var(--paper));
	color: hsl(var(--fg));
	transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.event-rsvp__field input:focus,
.event-rsvp__field select:focus,
.event-rsvp__field textarea:focus {
	outline: none;
	border-color: hsl(var(--aos-yellow-deep));
	box-shadow: 0 0 0 3px hsl(var(--aos-yellow) / 0.32);
}
.event-rsvp__submit {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 100px;
	background: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy-deep));
	border: 1px solid hsl(var(--aos-yellow));
	font-family: var(--body, system-ui);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 200ms var(--ease-out);
}
.event-rsvp__submit:hover { background: hsl(var(--aos-yellow-deep)); }
.event-rsvp__small {
	grid-column: 1 / -1;
	font-size: 12px;
	color: hsl(var(--fg-muted));
	margin: 0;
}
@media (max-width: 900px) {
	.event-rsvp__grid { grid-template-columns: 1fr !important; gap: 32px !important; }
	.event-rsvp__form { grid-template-columns: 1fr !important; }
}