/*
 * Service pages: inner-page hero, alternating blocks, sibling links.
 *
 * Transcribed from the design source's PageHero, MediaTextBlock and
 * ServiceView.
 *
 * @package Slovenia_Concierge
 */

/* ----------------------------------------------------- alternating blocks */
.blocks {
	display: grid;
	gap: var( --wp--custom--section-y );
}

.mtb {
	display: grid;
	gap: var( --wp--preset--spacing--l );
	align-items: center;
}

.mtb__media {
	position: relative;
}

.mtb__img {
	width: 100%;
	height: auto;
	aspect-ratio: var( --wp--custom--tile--ratio );
	object-fit: cover;
}

.mtb__num {
	display: block;
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 500;
	letter-spacing: var( --wp--custom--letter-spacing--eyebrow );
	color: var( --wp--preset--color--gold-deep );
	margin-block-end: var( --wp--preset--spacing--xs );
}

.mtb__title {
	font-size: var( --wp--preset--font-size--h-2 );
}

.mtb__hook {
	margin-block-start: var( --wp--preset--spacing--2-xs );
	font-size: var( --wp--preset--font-size--lead );
	color: var( --wp--preset--color--text-muted );
}

.mtb__body {
	color: var( --wp--preset--color--text-muted );
	max-width: 54ch;
}

.mtb__body + .mtb__body {
	margin-block-start: var( --wp--preset--spacing--s );
}

@media ( min-width: 64rem ) {
	.mtb {
		grid-template-columns: 1fr 1fr;
		gap: clamp( 2.5rem, 5vw, 5rem );
	}

	.mtb--flipped .mtb__media {
		order: 2;
	}
}

/* ------------------------------------------------ intro + photograph spread */
/*
 * The intro beside the feature photograph, on pages that have one. Photograph
 * cropped to 3:2 by the design source's derive step, so the ratio here only
 * reserves the space before the file arrives. Text first on a phone.
 */
.spread {
	display: grid;
	gap: var( --wp--preset--spacing--l );
	align-items: center;
}

.spread__text .lead:first-child {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--h-3 );
	line-height: 1.35;
	color: var( --wp--preset--color--text );
}

.spread__text .lead + .lead {
	color: var( --wp--preset--color--text-muted );
}

.feature-photo {
	position: relative;
	margin: 0;
}

.feature-photo__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media ( min-width: 64rem ) {
	.spread {
		grid-template-columns: 5fr 7fr;
		gap: clamp( 2.5rem, 5vw, 5.5rem );
	}
}

/* ------------------------------------------- highlight cards (service pages) */
.stack-l > * + * {
	margin-block-start: var( --wp--preset--spacing--l );
}

.fgrid--service {
	row-gap: var( --wp--preset--spacing--xl );
}

.fgrid--service .fgrid__item {
	padding-block-start: var( --wp--preset--spacing--m );
	border-block-start-color: var( --wp--custom--gold-hairline );
}

.fgrid--service .fgrid__title {
	font-size: var( --wp--preset--font-size--h-3 );
	line-height: 1.2;
}

.fgrid--service .fgrid__body {
	margin-block-start: var( --wp--preset--spacing--xs );
	max-width: 38ch;
}

/* ---------------------------------------------------------- sibling links */
.siblings__eyebrow {
	margin-block-end: var( --wp--preset--spacing--m );
}

.siblings {
	display: grid;
	gap: 0;
	border-block-start: var( --wp--custom--hairline ) solid var( --wp--custom--border--on-light-faint );
}

.siblings__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--m );
	padding-block: var( --wp--preset--spacing--m );
	border-block-end: var( --wp--custom--hairline ) solid var( --wp--custom--border--on-light-faint );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--h-3 );
	text-decoration: none;
	transition:
		color var( --wp--custom--transition--base ) var( --wp--custom--transition--ease ),
		padding-inline-start var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

.siblings__link:hover,
.siblings__link:focus-visible {
	color: var( --wp--preset--color--gold-deep );
	padding-inline-start: var( --wp--preset--spacing--xs );
}

.siblings__arrow {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--body );
	color: var( --wp--preset--color--gold-deep );
}