/* ======================================================================
 * Event page — SIA CollaborationX, Dallas
 *
 * Additive only. The hero is the platform template's dark break-out and
 * keeps its frame, badge, title and button rules; everything here is what
 * an event page needs that no other page does — the logo lockup, the
 * agenda list, the booking band and the modal.
 * ==================================================================== */

.ev {
	--ev-ground: #00131b;
	--ev-blue: #1f7be0;
	--ev-cyan: #5bc8ff;
}

/* ----------------------------------------------------------- Hero ---- */

/*
 * The event's own artwork is a dark ground with pale-blue circuit traces
 * fanning in from the right. The traces here are drawn for this page
 * rather than lifted from the event site, and they are decoration: the
 * alt is empty and the element is aria-hidden, because they say nothing
 * the headline does not.
 */
.ev-hero__traces {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(62%, 900px);
	object-fit: cover;
	object-position: right top;
	opacity: 0.55;
	pointer-events: none;
	z-index: 0;
}

/*
 * The whole point of this page is the booking button, so it has to be on
 * screen without scrolling. The platform hero's padding is tuned for a
 * section you arrive at mid-scroll (192px top, 100px bottom); here it put
 * the buttons ~60px under the fold on a 900px viewport.
 *
 * Sized in vh rather than vw so it is the height that is actually short
 * that shrinks the padding — a wide 720p laptop is the case that breaks,
 * and a vw clamp cannot see it.
 */
.ev-hero .pp-dark__hero {
	padding: clamp(32px, 6vh, 72px) clamp(20px, 4vw, 50px) clamp(32px, 5.5vh, 64px);
	gap: clamp(12px, 1.6vh, 20px);
}

.ev-hero__inner {
	gap: clamp(12px, 1.6vh, 20px);
}

/* "NEO is at", sitting above the event's own lockup — attribution, not a
   headline, so it is the smallest type on the hero. */
.ev-hero__presents {
	margin: 0;
}

.ev-hero__presents-text,
.ev-hero__host-text {
	font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

/* The host, stated as a host. Kept below the dates so the reading order is
   what NEO is doing → which event → when → who runs it, rather than
   opening on someone else's mark. */
.ev-hero__host {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0 0;
}

.ev-hero__sia {
	display: block;
	width: auto;
	height: 44px;
	/* The mark ships on a black matte keyed to alpha, so on this ground the
	   remaining fringe is invisible. */
}

.ev-hero__lockup {
	display: block;
	width: min(420px, 78%);
	height: auto;
	margin: 0;
}

.ev-hero__when {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.72);
}

.ev-hero__title {
	font-size: clamp(30px, 3.6vw, 46px);
}

.ev-hero__lede {
	max-width: 620px;
	font-size: clamp(16px, 1.4vw, 19px);
	color: rgba(255, 255, 255, 0.7);
}

/* A short desktop viewport — a 720p laptop, or any window with the dock and
   a browser chrome eating into it — is where the fold gets tight. Trade
   display size for the button staying visible. */
@media (min-width: 901px) and (max-height: 820px) {
	.ev-hero__lockup { width: min(340px, 70%); }
	.ev-hero__title { font-size: clamp(26px, 2.9vw, 36px); }
	.ev-hero__lede { font-size: 16px; }
	.ev-hero__sia { height: 34px; }
}

/* Shorter still — a laptop with the dock showing, or a half-height window.
   At this point the lockup and the headline both give ground; the button
   is the one thing that may not. */
@media (min-width: 901px) and (max-height: 700px) {
	.ev-hero .pp-dark__hero { padding-top: 28px; padding-bottom: 28px; }
	.ev-hero__lockup { width: min(280px, 60%); }
	.ev-hero__title { font-size: clamp(22px, 2.3vw, 28px); }
	.ev-hero__when { font-size: 14px; }
	.ev-hero__lede { font-size: 15px; }
	.ev-hero__sia { height: 28px; }
}

/* The event's accent, borrowed only for the primary action so the page
   still reads as NEO's rather than as the conference's. */
.ev-hero .pp-btn--on-dark {
	background: linear-gradient(135deg, var(--ev-cyan) 0%, var(--ev-blue) 100%);
	border-color: transparent;
	color: #00131b;
	font-weight: 500;
}
.ev-hero .pp-btn--on-dark:hover {
	background: linear-gradient(135deg, #7ad4ff 0%, #2f8bf0 100%);
}

/* --------------------------------------------------------- Agenda ---- */

/* Same framed column the rest of the site uses, so this page sits in the
   same grid as the platform pages it links to. */
.ev-agenda {
	padding: 0 20px;
	background: #ffffff;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.ev-agenda__frame {
	max-width: 1400px;
	margin: 0 auto;
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.ev-agenda__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: clamp(64px, 8vw, 100px) clamp(20px, 4vw, 50px) clamp(40px, 5vw, 60px);
}

.ev-agenda__title {
	margin: 0;
	max-width: 780px;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.02em;
}
.ev-agenda__title-main { color: #000; font-weight: 400; }
.ev-agenda__title-soft { color: #656672; font-weight: 300; }

/*
 * Two across on a wide screen, each item a closed cell like the platform
 * card grid: hairlines between neighbours, none on the outer edges, so
 * the frame is the only thing enclosing the block.
 */
.ev-agenda__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.ev-agenda__item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 36px;
	border-right: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.ev-agenda__item:nth-child(2n) { border-right: 0; }
.ev-agenda__item:nth-last-child(-n + 2) { border-bottom: 0; }

.ev-agenda__num {
	flex: 0 0 auto;
	font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.04em;
	/* The event's gradient, clipped to the numeral — the one place the
	   conference palette appears on the white half of the page. */
	background: linear-gradient(135deg, var(--ev-cyan) 0%, #0b3e86 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
}

.ev-agenda__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.ev-agenda__item-title {
	margin: 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: #000;
}

.ev-agenda__item-body {
	margin: 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.45;
	color: #656672;
}

/* ------------------------------------------------------ Book band ---- */

.ev-book-band {
	padding: 0 20px 100px;
	background: #ffffff;
}

.ev-book-band__frame {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(36px, 4vw, 56px) clamp(24px, 4vw, 50px);
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-top: 0;
	background: #fcfaf7;
}

.ev-book-band__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.ev-book-band__title {
	margin: 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #000;
}

.ev-book-band__meta {
	margin: 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.4;
	color: #656672;
}


/* ---------------------------------------------------------- Modal ---- */

.ev-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 40px);
}

/* The page behind must not scroll while the dialog is up — on a phone a
   scrolling backdrop is how a modal turns into a lost reader. */
.ev-modal-open,
.ev-modal-open body { overflow: hidden; }

.ev-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 12, 18, 0.72);
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
}

.ev-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(1000px, 100%);
	height: min(760px, 100%);
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 60px -20px rgba(0, 12, 18, 0.55);
}
.ev-modal__panel:focus { outline: none; }

.ev-modal__bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.ev-modal__title {
	margin: 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 450;
	line-height: 1.3;
	color: #000;
}

.ev-modal__close {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 10px;
	background: transparent;
	color: #000;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ev-modal__close:hover {
	background: #000;
	border-color: #000;
	color: #fff;
}

.ev-modal__body {
	flex: 1 1 auto;
	min-height: 0;
}

.ev-modal__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ev-modal__fallback {
	margin: 0;
	padding: 32px;
	text-align: center;
}

/* --------------------------------------------------- Narrow screens -- */

@media (max-width: 900px) {
	/* The traces are drawn to fan across a wide hero; at phone widths they
	   crowd the lockup instead of framing it. */
	.ev-hero__traces { width: 100%; opacity: 0.3; }

	.ev-hero__lockup { width: min(340px, 86%); }

	.ev-agenda__list { grid-template-columns: minmax(0, 1fr); }
	.ev-agenda__item {
		border-right: 0;
		padding: 28px 24px;
	}
	.ev-agenda__item:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
	.ev-agenda__item:last-child { border-bottom: 0; }


	.ev-modal__panel {
		height: 100%;
		border-radius: 12px;
	}
}

@media (max-width: 560px) {
	.ev-hero__host { flex-direction: column; gap: 8px; }
	.ev-hero__when { font-size: 14px; gap: 6px; }
}