/**
 * Event landing-page styles (Phase 3.10 Part B).
 *
 * Layered on top of event-modal.css — landing page reuses
 * .osc-modal-card--spa visual language but with a container width,
 * breadcrumb, h1 sizing, and (importantly) an INTERACTIVE map iframe
 * (modal's pointer-events:none doesn't apply here).
 */

.osc-landing-wrap {
	max-width: 880px;
	margin: 2rem auto;
	padding: 0 1rem;
	font-family: inherit;
	color: inherit;
}

.osc-landing-container {
	width: 100%;
}

.osc-landing-breadcrumb {
	font-size: 0.85rem;
	color: #6b7280;
	margin-bottom: 1rem;
}

.osc-landing-breadcrumb a {
	color: #6b7280;
	text-decoration: none;
}

.osc-landing-breadcrumb a:hover,
.osc-landing-breadcrumb a:focus-visible {
	text-decoration: underline;
	outline: none;
}

.osc-landing-card {
	/* Landing card sits in the page flow — no scroll-overflow needed. */
	max-width: 100% !important;
	max-height: none !important;
	margin: 0 auto;
}

.osc-landing-title {
	font-size: 1.6rem;
	line-height: 1.2;
	margin: 0.5rem 0;
}

/* Override modal's pointer-events:none so the embedded map is
   interactive on landing pages. */
.osc-landing-map iframe {
	pointer-events: auto !important;
}

/* Bigger map on landing — modal's 220px is too cramped at full-page width. */
.osc-landing-map {
	height: 340px !important;
}

@media (max-width: 600px) {
	.osc-landing-map {
		height: 240px !important;
	}
}

.osc-landing-backlink {
	margin-top: 1.5rem;
	font-size: 0.9rem;
}

.osc-landing-backlink a {
	color: var(--brand, #1e3167);
	font-weight: 500;
	text-decoration: none;
}

.osc-landing-backlink a:hover,
.osc-landing-backlink a:focus-visible {
	text-decoration: underline;
	outline: none;
}