/* ==========================================================================
   Safaris & Tours — dark section with the safari photo and a sideways list of services.
   ========================================================================== */

.mro-tours {
	position: relative;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--mint-faint);
	padding-bottom: var(--wp--preset--spacing--110);
}

.mro-tours__hero {
	position: relative;
	height: clamp(18rem, 42vw, 34rem);
}

.mro-tours__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}

.mro-tours__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--wp--preset--color--contrast) 0%, color-mix(in srgb, var(--wp--preset--color--contrast) 0%, transparent) 22%, color-mix(in srgb, var(--wp--preset--color--contrast) 0%, transparent) 50%, var(--wp--preset--color--contrast) 100%);
}

.mro-tours__body {
	position: relative;
	z-index: var(--wp--custom--layer--raised);
	margin-top: calc(var(--wp--preset--spacing--90) * -1);
}

.mro-tours__head {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
	align-items: end;
}

.mro-tours__intro p {
	color: var(--wp--preset--color--on-dark-muted);
}

.mro-rail-controls {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}

.mro-rail-button {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color var(--wp--custom--duration--quick) var(--wp--custom--ease--gentle), opacity var(--wp--custom--duration--quick);
}

.mro-rail-button:hover {
	background: var(--wp--preset--color--base);
}

.mro-rail-button:disabled {
	opacity: 0.35;
	cursor: default;
}

.mro-rail-button:focus-visible {
	outline-color: var(--wp--preset--color--mint);
}

.mro-rail {
	--mro-rail-inset: max(var(--wp--custom--gutter), calc((100vw - var(--wp--custom--container--base)) / 2 + var(--wp--custom--gutter)));
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--20) var(--mro-rail-inset) var(--wp--preset--spacing--60);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--mro-rail-inset);
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--accent) var(--wp--preset--color--raised);
}

.mro-rail:focus-visible {
	outline-color: var(--wp--preset--color--mint);
	outline-offset: -3px;
}

.mro-service {
	flex: 0 0 clamp(15rem, 24vw, 18.5rem);
	scroll-snap-align: start;
	position: relative;
}

.mro-service:nth-child(even) {
	margin-top: var(--wp--preset--spacing--70);
}

.mro-service__photo {
	aspect-ratio: 3 / 4;
	border-radius: var(--wp--custom--radius--arch);
	overflow: hidden;
}

.mro-service__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--duration--slow) var(--wp--custom--ease--gentle);
}

.mro-service:hover .mro-service__photo img {
	transform: scale(1.04);
}

.mro-chip-icon--float {
	position: relative;
	z-index: var(--wp--custom--layer--raised);
	width: 3.5rem;
	height: 3.5rem;
	margin: -1.75rem 0 0 var(--wp--preset--spacing--50);
	border: 4px solid var(--wp--preset--color--contrast);
}

.mro-service__title {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
	line-height: var(--wp--custom--leading--snug);
	text-transform: lowercase;
	letter-spacing: var(--wp--custom--tracking--display);
	color: var(--wp--preset--color--base);
}

.mro-service p {
	color: var(--wp--preset--color--on-dark-muted);
}

.mro-service--ask {
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--note);
	background: var(--wp--preset--color--raised);
}

.mro-service--ask .mro-service__title {
	margin: 0;
}

.mro-service--ask .mro-button {
	margin-top: var(--wp--preset--spacing--30);
}

@media (max-width: 860px) {
	.mro-tours__head {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.mro-service:nth-child(even) {
		margin-top: 0;
	}
}