/**
 * Landmark hero: `pt-12 lg:pt-16`, the title `max-w-4xl text-4xl lg:text-6xl
 * font-bold text-balance`, the lead `mt-5 max-w-3xl text-lg lg:text-xl`
 * muted, the buttons `mt-8 gap-3` in the large size. The strip `mt-10
 * lg:mt-12`, then `mt-10 lg:mt-12` to what follows, closed by the rule the
 * facts strip under it has on top (`border-y` there).
 *
 * The panels (from 768px): `flex h-[clamp(320px,34vw,500px)] gap-[2px]`,
 * each `flex: 1 1 0`, the widened one `flex-grow: 7`, 700ms on
 * cubic-bezier(0.22, 1, 0.36, 1); the others dimmed while one is widened.
 * The caption fades in 300ms after: the country `text-sm` white/80, the
 * landmark `mt-1 text-xl lg:text-2xl font-bold`, the time `mt-2 text-sm`.
 * Under them the stops as bars, `h-[3px]`, and the status `w-56 text-sm`.
 *
 * The row (below 768px): `snap-x gap-3 px-4 pb-4`, cards `w-[80%]
 * aspect-[4/5] rounded-lg`.
 *
 * The strip's buttons carry two classes per rule: the kit's Theme Style
 * reaches button elements.
 */

.sba-c-landmark-hero.sba-c-landmark-hero {
	padding: 48px 0 40px;
	border-bottom: 1px solid var(--sba-border);
	background-color: var(--sba-surface);
}

.sba-c-landmark-hero .sba-c-landmark-hero-title {
	max-width: 56rem;
	margin: 0;
	color: var(--sba-charcoal);
	font-family: var(--sba-font-sans);
	font-size: 36px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 40px;
	text-wrap: balance;
}

.sba-c-landmark-hero .sba-c-landmark-hero-lead {
	max-width: 48rem;
	margin: 20px 0 0;
	color: var(--sba-slate);
	font-size: 18px;
	line-height: 28px;
}

.sba-c-landmark-hero .sba-c-landmark-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.sba-c-landmark-hero .sba-c-landmarks {
	margin-top: 40px;
}

.sba-c-landmark-hero .sba-c-landmarks-panels,
.sba-c-landmark-hero .sba-c-landmarks-steps {
	display: none;
}

/* The panels. */
.sba-c-landmark-hero .sba-c-landmarks-panels {
	width: 100%;
	height: clamp(320px, 34vw, 500px);
	gap: 2px;
	background-color: var(--sba-surface);
}

.sba-c-landmark.sba-c-landmark {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: var(--sba-charcoal);
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	transition: flex-grow 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sba-c-landmark.sba-c-landmark.is-active {
	flex-grow: 7;
}

.sba-c-landmark.sba-c-landmark:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

.sba-c-landmark img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--sba-landmark-focus, 50% 50%);
	transition: filter 700ms, transform 700ms;
}

.sba-c-landmark.is-active img {
	object-position: 50% 50%;
}

.sba-c-landmarks.has-active .sba-c-landmark:not(.is-active) img {
	filter: brightness(0.82) saturate(0.85);
}

.sba-c-landmark .sba-c-landmark-caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 64px 20px 20px;
	background: linear-gradient(to top, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.35), transparent);
	color: #fff;
	font-family: var(--sba-font-sans);
	text-align: left;
	opacity: 0;
	pointer-events: none;
	transition: opacity 500ms;
}

.sba-c-landmark.is-active .sba-c-landmark-caption {
	opacity: 1;
	transition-delay: 300ms;
}

.sba-c-landmark .sba-c-landmark-country {
	color: rgb(255 255 255 / 0.8);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.sba-c-landmark .sba-c-landmark-name {
	margin-top: 4px;
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	line-height: 28px;
	white-space: nowrap;
}

.sba-c-landmark .sba-c-landmark-time {
	margin-top: 8px;
	color: rgb(255 255 255 / 0.7);
	font-size: 14px;
	line-height: 20px;
	white-space: nowrap;
}

.sba-c-landmark .sba-c-landmark-time strong {
	margin-right: 4px;
	color: rgb(255 255 255 / 0.9);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* The clock's colon pulses once a second while the script keeps the time
   (is-live); it is still until then and under reduced motion. */
.sba-c-landmarks.is-live .sba-c-landmark-colon {
	animation: sba-c-landmark-pulse 1s ease-in-out infinite;
}

@keyframes sba-c-landmark-pulse {
	50% {
		opacity: 0.25;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sba-c-landmarks.is-live .sba-c-landmark-colon {
		animation: none;
	}
}

/* The stops under the panels. */
.sba-c-landmark-hero .sba-c-landmarks-steps {
	align-items: center;
	gap: 16px;
	padding-top: 16px;
}

.sba-c-landmark-hero .sba-c-landmarks-bars {
	display: flex;
	flex: 1 1 auto;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sba-c-landmark-hero .sba-c-landmarks-bars li {
	flex: 1 1 0;
	margin: 0;
}

.sba-c-landmarks-bar.sba-c-landmarks-bar {
	display: block;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 8px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
}

.sba-c-landmarks-bar.sba-c-landmarks-bar:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 0;
}

.sba-c-landmarks-bar span {
	display: block;
	height: 3px;
	border-radius: 9999px;
	background-color: var(--sba-border);
	transition: background-color 300ms;
}

.sba-c-landmarks-bar.is-past span {
	background-color: color-mix(in srgb, var(--sba-charcoal) 40%, transparent);
}

.sba-c-landmarks-bar.is-active span {
	background-color: var(--sba-red-dark);
}

.sba-c-landmark-hero .sba-c-landmarks-status {
	flex: 0 0 auto;
	width: 14rem;
	margin: 0;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
	text-align: right;
}

.sba-c-landmark-hero .sba-c-landmarks-status b {
	color: var(--sba-charcoal);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

/* The row to swipe. */
.sba-c-landmark-hero .sba-c-landmarks-row {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0 16px 16px;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.sba-c-landmark-hero .sba-c-landmarks-row::-webkit-scrollbar {
	display: none;
}

.sba-c-landmark-hero .sba-c-landmarks-row li {
	position: relative;
	flex: 0 0 80%;
	margin: 0;
	overflow: hidden;
	border-radius: var(--sba-radius);
	background-color: var(--sba-charcoal);
	scroll-snap-align: center;
}

.sba-c-landmark-hero .sba-c-landmarks-row img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: var(--sba-landmark-focus, 50% 50%);
}

.sba-c-landmark-hero .sba-c-landmarks-card {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 56px 16px 16px;
	background: linear-gradient(to top, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.4), transparent);
	color: #fff;
}

.sba-c-landmark-hero .sba-c-landmarks-card p {
	margin: 0;
	color: inherit;
}

.sba-c-landmark-hero .sba-c-landmarks-card-meta {
	color: rgb(255 255 255 / 0.8) !important;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

.sba-c-landmark-hero .sba-c-landmarks-card-name {
	margin-top: 4px !important;
	font-size: 18px;
	font-weight: var(--sba-heading-weight);
	line-height: 28px;
}

.sba-c-landmark-hero .sba-c-landmarks-card-time {
	margin-top: 4px !important;
	color: rgb(255 255 255 / 0.85) !important;
	font-size: 14px;
	line-height: 20px;
}

.sba-c-landmark-hero .sba-c-landmarks-card-time strong {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

@media (min-width: 768px) {
	.sba-c-landmark-hero .sba-c-landmarks-panels,
	.sba-c-landmark-hero .sba-c-landmarks-steps {
		display: flex;
	}

	.sba-c-landmark-hero .sba-c-landmarks-row {
		display: none;
	}
}

@media (min-width: 1024px) {
	.sba-c-landmark-hero.sba-c-landmark-hero {
		padding: 64px 0 48px;
	}

	.sba-c-landmark-hero .sba-c-landmark-hero-title {
		font-size: 60px;
		line-height: 1;
	}

	.sba-c-landmark-hero .sba-c-landmark-hero-lead {
		font-size: 20px;
		line-height: 28px;
	}

	.sba-c-landmark-hero .sba-c-landmarks {
		margin-top: 48px;
	}

	.sba-c-landmark .sba-c-landmark-name {
		font-size: 24px;
		line-height: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sba-c-landmark.sba-c-landmark,
	.sba-c-landmark img,
	.sba-c-landmark .sba-c-landmark-caption,
	.sba-c-landmarks-bar span {
		transition: none;
	}
}