/* Mobile first: dark band, text, then the photo inside an arch with the seal. */
.smh-hero-show {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 1.5rem 1rem 8.5rem;
	background: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--cream);
	overflow: hidden;
}

.smh-hero-show__slides {
	position: relative;
	aspect-ratio: 358 / 400;
	border-radius: 999px 999px 24px 24px;
	overflow: hidden;
	background: var(--wp--preset--color--walnut);
	outline: 1px solid var(--wp--preset--color--sand);
	outline-offset: -1px;
}

.smh-hero-show__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 45% 55%;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.smh-hero-show__img.is-on {
	opacity: 1;
}

/* Seal on the arch, hills rising into the cream section below. */
.smh-hero-show__art {
	position: relative;
	order: 2;
	width: 100%;
	max-width: 520px;
	margin-inline: auto;
}

.smh-hero-show__art::after {
	content: "";
	position: absolute;
	inset-block-start: -0.5rem;
	inset-inline-end: -0.375rem;
	width: 104px;
	height: 104px;
	border: 6px solid var(--wp--preset--color--terracotta);
	border-radius: 50%;
	background: var(--wp--preset--color--cream) url("../../../../themes/smh-theme/assets/img/illustrations/seal.webp") center / 86% no-repeat;
}

.smh-hero-show::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px;
	z-index: 1;
	height: 28vw;
	background: url("../../../../themes/smh-theme/assets/img/dividers/hills-edge-band.webp") bottom center / 100% auto no-repeat;
	pointer-events: none;
}

.smh-hero-show__copy {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
}

.smh-hero-show__copy > * {
	margin: 0;
}

.smh-hero-show__sub {
	order: -2;
	padding: 0.35rem 1rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 999px;
	font-weight: 600;
	font-size: 1rem;
	text-align: center;
}

.smh-hero-show__poem {
	order: -1;
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.55;
}

.smh-hero-show h1 {
	color: var(--wp--preset--color--white);
	font-size: 2.75rem;
	line-height: 1.15;
}

@keyframes smh-kb-left {
	from { transform: scale(1) translate(0, 0); }
	to { transform: scale(1.08) translate(-2%, 0); }
}

@keyframes smh-kb-right {
	from { transform: scale(1) translate(0, 0); }
	to { transform: scale(1.08) translate(2%, 0); }
}

@keyframes smh-kb-up {
	from { transform: scale(1) translate(0, 0); }
	to { transform: scale(1.08) translate(0, -2%); }
}

.smh-kb-left { animation: smh-kb-left 8s var(--smh-ease) both; }
.smh-kb-right { animation: smh-kb-right 8s var(--smh-ease) both; }
.smh-kb-up { animation: smh-kb-up 8s var(--smh-ease) both; }

/* Round pause / play control, also used by the marquee and the carousel. */
.smh-pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.smh-pause::before {
	content: "";
	width: 10px;
	height: 14px;
	border-inline: 3px solid currentColor;
}

.smh-pause[aria-pressed="true"]::before {
	width: 0;
	height: 0;
	border-block: 7px solid transparent;
	border-inline-start: 0;
	border-inline-end: 12px solid currentColor;
}

.smh-hero-show__pause {
	position: absolute;
	z-index: 2;
	inset-block-start: auto;
	inset-block-end: calc(28vw + 0.5rem);
	inset-inline-start: 1.75rem;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--espresso);
	border-color: transparent;
}

@media (min-width: 900px) {
	/* Desktop: full photo, a cream wash from the text side. */
	.smh-hero-show {
		display: block;
		min-height: clamp(520px, 44vw, 660px);
		padding: clamp(3rem, 6vw, 5.5rem) var(--smh-gutter) clamp(3rem, 5vw, 5rem);
		background: var(--wp--preset--color--cream);
		color: var(--wp--preset--color--espresso);
	}

	.smh-hero-show__art {
		position: absolute;
		inset: 0;
		z-index: -2;
		max-width: none;
	}

	.smh-hero-show__art::after {
		display: none;
	}

	.smh-hero-show__slides {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
		border-radius: 0;
		outline: 0;
	}

	.smh-hero-show__img {
		object-position: 50% 62%;
	}

	.smh-hero-show::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(to left, rgb(233 215 191 / 0.97) 0%, rgb(233 215 191 / 0.86) 32%, rgb(233 215 191 / 0) 66%);
	}

	.smh-hero-show::after {
		display: none;
	}

	.smh-hero-show__copy {
		max-width: var(--smh-max);
		margin-inline: auto;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.smh-hero-show__sub {
		display: none;
	}

	.smh-hero-show__poem,
	.smh-hero-show h1 {
		order: 0;
	}

	.smh-hero-show h1 {
		color: var(--wp--preset--color--terracotta);
		font-size: clamp(3.5rem, 6.4vw, 6rem);
	}

	.smh-hero-show__poem {
		color: var(--wp--preset--color--espresso);
		font-size: 1.5rem;
		line-height: 1.5;
	}

	.smh-hero-show__pause {
		inset-block-end: 1.25rem;
		inset-inline-start: auto;
		inset-inline-end: var(--smh-gutter);
	}
}

@media (prefers-reduced-motion: reduce) {
	.smh-kb-left, .smh-kb-right, .smh-kb-up {
		animation: none;
	}
}

/* Inner pages (guest house, tour center): same banner as the home page, one image. */
.smh-hero-show--page .smh-hero-show__sub {
	display: none;
}

/* Title first, then the lead (the home page puts the poem first on phones). */
.smh-hero-show--page .smh-hero-show__poem {
	order: 0;
}

@media (min-width: 900px) {
	.smh-hero-show--page {
		min-height: clamp(420px, 36vw, 540px);
	}

	.smh-hero-show--page .smh-hero-show__poem {
		max-width: 28ch;
	}

	/* The engraving is already light: a softer wash, and the whole scene stays in frame. */
	.smh-hero-show--art::before {
		background: linear-gradient(to left, rgb(249 242 236 / 0.96) 0%, rgb(249 242 236 / 0.82) 30%, rgb(249 242 236 / 0) 62%);
	}

	.smh-hero-show--art .smh-hero-show__img {
		object-position: 20% 50%;
	}
}