/*
 * Image band (Figma: Home "Frame 484"; Studio "Frame 457" centred and "Frame 456" bottom left).
 * The image fills the whole section, so the section's "Space above/below" is padding inside it.
 */

/* layout.css drops the top padding between two sections of the same background colour; the image
   is this section's real background, so it and its neighbour keep their padding. */
.pb-l + .s.s-image_band.pt-l,
.s-image_band.pb-l + .s.pt-l {
	padding-top: var(--space-l);
}

.band {
	--band-dark: 0.5;
	color: var(--c-light);
}

.band--strong {
	--band-dark: 0.7;
}

.band__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--c-dark);
}

.band__media img,
.band__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The video fades in over the image once it actually plays. */
.band__video {
	opacity: 0;
	transition: opacity 0.6s;
}

.band__video.is-playing {
	opacity: 1;
}

.band__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / var(--band-dark));
}

.band__inner {
	position: relative;
}

.band__content {
	display: grid;
	gap: 16px;
	max-width: 560px;
}

.band__text > * + * {
	margin-top: var(--lh-body);
}

.band--center .band__content {
	justify-items: center;
	margin-inline: auto;
	text-align: center;
}

.band--center .band__buttons {
	justify-content: center;
}

/* Bottom left: taller band, large heading, darker towards the text. */
.band--bottom-left .band__inner {
	display: flex;
	align-items: flex-end;
	min-height: 420px;
}

/* Phones: a tall portrait band (Studio_Mobile "Frame 54", 800 px). */
@media (max-width: 767px) {
	.band--bottom-left .band__inner {
		min-height: 752px;
	}
}

.band--bottom-left .band__heading {
	font-size: var(--t-display);
	line-height: var(--lh-display);
}

.band--bottom-left .band__media::after {
	background: linear-gradient(to top, rgb(0 0 0 / var(--band-dark)), rgb(0 0 0 / 0.15));
}

/* Large: page-title heading in a taller band, the text centred in it (SAORI "Frame 456"). */
.band--large .band__heading {
	font-size: var(--t-display);
	line-height: var(--lh-display);
}

.band--large.band--center .band__inner {
	display: flex;
	align-items: center;
	min-height: 420px;
}

/* No darkening: a pale photo with dark text. */
.band--none {
	color: var(--c-text);
}

.band--none .band__media::after {
	content: none;
}

.band--tall .band__inner {
	min-height: 664px;
}

/* Light buttons on the image (Figma Primary_Light, Secondary_Light, light tertiary). */
.band:not(.band--none) .btn--primary {
	background: var(--c-bg);
	border-color: var(--c-bg);
	color: var(--c-text);
}

.band:not(.band--none) .btn--primary:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-light);
}

.band:not(.band--none) .btn--secondary {
	border-color: var(--c-light);
	color: var(--c-light);
}

.band:not(.band--none) .btn--secondary:hover {
	background: var(--c-light);
	color: var(--c-text);
}

.band:not(.band--none) .btn--tertiary:hover .icon {
	background: var(--c-light);
	color: var(--c-text);
}