/*
 * Static Image Hero component (SDB One Foundation).
 *
 * The component carries the template Default Hero's Frames classes
 * (fr-hero-hotel, fr-background-alpha, fr-cta-links-alpha, …), so spacing,
 * type and colour come from each brand's own classes and tokens, and the
 * Template Patches phone layout (photo above the copy) applies to it as it
 * did to the Default Hero. These rules only restate what the image layer
 * needs, using the same variables those classes use.
 */

/* Two classes to beat .fr-hero-hotel__content-wrapper's centering — the
   Default Hero overrode it the same way, at element level. */
.sdb-static-hero .sdb-static-hero__content {
	position: relative;
	z-index: 1;
	row-gap: var(--content-gap);
	align-items: flex-start;
	text-align: left;
	color: var(--text-light);
}

/* Copy held to a readable measure, over the tinted side of the overlay. */
.sdb-static-hero__content > * {
	max-width: var(--width-l);
}

.sdb-static-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--space-xs);
	row-gap: var(--content-gap);
}

.sdb-hero-image,
.sdb-hero-image__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sdb-hero-image__img {
	display: block;
	max-width: none;
	object-fit: cover;
}

/* Over the photo, not under it: .fr-background-alpha__overlay's z-index: -1
   would paint it beneath the positioned image. The copy side gets the
   darkest tint; the far side keeps the photo bright. */
.sdb-static-hero .sdb-static-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		var(--primary-ultra-dark-trans-70) 0%,
		var(--primary-ultra-dark-trans-40) 50%,
		var(--primary-ultra-dark-trans-10) 100%
	);
}

/* Desktop: a photo-led hero with the copy centred in it. --bg-dark behind it
   all, as on phones (Template Patches), keeps light text readable while the
   photo loads or if none is set — and, unlike --primary, keeps headings'
   primary-coloured <em> words visible. */
@media (min-width: 768px) {
	.sdb-static-hero {
		justify-content: center;
		min-height: min(75svh, 48rem);
		background-color: var(--bg-dark, var(--primary-dark));
	}
}