/*
 * Front page. Currently the hero; the remaining sections land here as they are
 * built, each with its own block, mobile styles included rather than appended.
 *
 * Transcribed from the design source's Hero component.
 *
 * @package Slovenia_Concierge
 */

.hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min( 78svh, 46rem );
	padding-block: calc( var( --wp--custom--header--band ) + var( --wp--preset--spacing--xl ) ) var( --wp--custom--section-y );
	background: var( --wp--preset--color--black );
	color: var( --wp--preset--color--text-on-dark );
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var( --wp--preset--color--black );
}

.hero__poster {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 1200ms var( --wp--custom--transition--ease );
}

/*
 * The photograph is what fades, not the film. An iframe rendered at zero
 * opacity is treated as not visible and Chrome never starts it, so the film is
 * painted normally from the first frame and simply covered until it runs.
 */
.hero__media:has( [data-playing] ) .hero__poster {
	opacity: 0;
}

.hero__poster--pending {
	background: var( --wp--custom--hero--pending );
}

.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	/*
	 * Directional rather than flat: the left side stays dark enough for the
	 * headline, the right side stays bright so the image is actually visible.
	 */
	background: var( --wp--custom--hero--scrim );
}

.hero__inner {
	max-width: var( --wp--style--global--content-size );
}

.hero__eyebrow {
	margin-block-end: var( --wp--preset--spacing--m );
}

.hero__title {
	max-width: 16ch;
	font-size: var( --wp--preset--font-size--display );
	color: var( --wp--preset--color--white );
}

.hero__lead {
	max-width: 46ch;
	margin-block-start: var( --wp--preset--spacing--m );
	font-size: var( --wp--preset--font-size--lead );
	color: var( --wp--preset--color--text-on-dark );
}

.hero__cta {
	margin-block-start: var( --wp--preset--spacing--l );
}

/*
 * The film covers the box the way object-fit:cover would, so the iframe is
 * sized in script rather than in CSS: an iframe cannot be object-fit.
 */
.hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.hero__video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	border: 0;
	/*
	 * Decoration only: the claim above it must stay clickable and the player
	 * must never take focus.
	 */
	pointer-events: none;
}

/*
 * Opposite corner from the photograph credit, which sits on the right: the hero
 * carries two works by two makers.
 */
.hero__filmcredit {
	position: absolute;
	inset-block-end: 0.5rem;
	inset-inline-start: 0.75rem;
	z-index: 3;
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	color: var( --wp--custom--hero--credit-color );
	text-shadow: var( --wp--custom--hero--credit-shadow );
}

@media ( min-width: 64rem ) {
	.hero {
		min-height: min( 84svh, 50rem );
		padding-block: calc( var( --wp--custom--header--band-desktop ) + var( --wp--preset--spacing--xl ) ) var( --wp--custom--section-y );
	}
}

/*
 * No autoplay for anyone who asked the system for less motion: the photograph
 * is the whole hero for them, and the iframe is never created.
 */
@media ( prefers-reduced-motion: reduce ) {
	.hero__video {
		display: none;
	}
}

/* ==========================================================================
 * Home page sections
 * Transcribed from the design source's HomeView and ServiceGrid.
 * ========================================================================== */

.home__process,
.home__grid,
.home__inline-cta {
	margin-block-start: var( --wp--preset--spacing--xl );
}

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

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

.home__corporate-media {
	/* Containing block for the photograph credit, which sits on the picture. */
	position: relative;
}

.home__corporate-img {
	width: 100%;
	height: auto;
}

.home__points {
	display: grid;
	gap: var( --wp--preset--spacing--xs );
	margin-block-start: var( --wp--preset--spacing--m );
}

.home__points li {
	position: relative;
	padding-inline-start: 1.5rem;
	color: var( --wp--preset--color--text-muted );
}

.home__points li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 0.85em;
	width: 0.75rem;
	height: 1px;
	background: var( --wp--preset--color--gold );
}

.home__corporate-cta {
	margin-block-start: var( --wp--preset--spacing--l );
}

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

/* --------------------------------------------------------- service grid */
/*
 * Two to a row even on the narrowest phone: six full-width tiles made the
 * section a three-screen scroll in which no two categories were ever visible
 * together, which is the one thing a discovery grid has to do.
 */
.sgrid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --wp--custom--hairline );
	background: var( --wp--preset--color--black-line );
}

.sgrid__item {
	position: relative;
}

.tile {
	position: relative;
	display: block;
	height: 100%;
	text-decoration: none;
	color: var( --wp--preset--color--text-on-dark );
	background: var( --wp--preset--color--black );
	overflow: hidden;
}

.tile__media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var( --wp--custom--tile--ratio );
	object-fit: cover;
	opacity: 0.78;
	transition:
		transform 700ms var( --wp--custom--transition--ease ),
		opacity var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

.tile:hover .tile__media,
.tile:focus-visible .tile__media {
	transform: scale( 1.04 );
	opacity: 1;
}

.tile__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: grid;
	gap: var( --wp--preset--spacing--2-xs );
	padding: var( --wp--preset--spacing--l ) var( --wp--preset--spacing--m ) var( --wp--preset--spacing--m );
	/*
	 * Strong enough under the caption for contrast, but it no longer flattens
	 * the whole image — the picture stays bright above it.
	 */
	background: var( --wp--custom--tile--scrim );
}

.tile__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--h-3 );
	line-height: var( --wp--custom--line-height--heading );
	color: var( --wp--preset--color--white );
}

.tile__summary {
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.6;
	color: var( --wp--preset--color--text-on-dark-muted );
	max-width: 30ch;
}

.tile__more {
	margin-block-start: var( --wp--preset--spacing--2-xs );
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 500;
	letter-spacing: var( --wp--custom--letter-spacing--eyebrow );
	text-transform: uppercase;
	color: var( --wp--preset--color--gold-light );
}

.tile__more::after {
	content: '';
	display: block;
	width: 2rem;
	height: 1px;
	margin-block-start: 0.5rem;
	background: var( --wp--custom--gold-hairline );
	transition: width var( --wp--custom--transition--base ) var( --wp--custom--transition--ease );
}

.tile:hover .tile__more::after,
.tile:focus-visible .tile__more::after {
	width: 3.5rem;
}

/*
 * A phone cell is about 160px across. The summary cannot survive that measure
 * without breaking every second word, so below this width the tile carries the
 * name and the cue only; the summary returns as soon as there is room for it.
 */
@media ( max-width: 39.9375rem ) {
	.tile__body {
		padding: var( --wp--preset--spacing--m ) var( --wp--preset--spacing--s ) var( --wp--preset--spacing--s );
		gap: 0.35rem;
	}

	.tile__title {
		font-size: 1.0625rem;
	}

	.tile__summary {
		display: none;
	}

	.tile__more::after {
		width: 1.5rem;
		margin-block-start: 0.4rem;
	}
}

/*
 * Six tiles divide cleanly into 3 x 2, so every tile shares one 4:5 ratio and
 * the band needs no special cases.
 */
@media ( min-width: 64rem ) {
	.sgrid {
		grid-template-columns: repeat( 3, 1fr );
	}

	/*
	 * Seven tiles, laid out four then three.
	 *
	 * Three columns divided the original six cleanly. The seventh category
	 * made it 3 + 3 + 1, and the lone tile sat beside two empty cells that
	 * showed as a grey block - the grid's background is what draws the
	 * hairlines between tiles, so wherever there is no tile, that colour is
	 * simply the thing you see.
	 *
	 * Twelve columns divide by both four and three, so the row of four and
	 * the row of three both fill exactly, and no cell is left over to show
	 * through. The second row's tiles are wider, and therefore taller, than
	 * the first row's; that is the shape of a 4 + 3 split and is intended.
	 *
	 * Scoped to exactly seven tiles. At any other count the three-column
	 * grid above is still the right answer, and spans of 3 and 4 would make
	 * a worse mess than the one they fix.
	 */
	.sgrid:has( > .sgrid__item:nth-child( 7 ):last-child ) {
		grid-template-columns: repeat( 12, 1fr );
	}

	.sgrid:has( > .sgrid__item:nth-child( 7 ):last-child ) > .sgrid__item {
		grid-column: span 3;
	}

	.sgrid:has( > .sgrid__item:nth-child( 7 ):last-child ) > .sgrid__item:nth-child( n + 5 ) {
		grid-column: span 4;
	}

	/*
	 * Eight tiles (Wellness & Spa, 2026-09-25): two rows of four. In three
	 * columns they fell 3 + 3 + 2 and the empty cell showed as a grey block,
	 * the same failure as the seven-tile case above. Four columns divide eight
	 * exactly and keep every tile the same 4:5 shape; phones and tablets stay
	 * at two to a row, four rows. Client's request: "2 x 4".
	 */
	.sgrid:has( > .sgrid__item:nth-child( 8 ):last-child ) {
		grid-template-columns: repeat( 4, 1fr );
	}
}