/* MainstageV1 - Landmark design (Figma 18723:21720, "Mainstage - Corporate + Corner Video"):
   full-bleed natural-color photo with a dark top scrim (header legibility) and a dark bottom
   scrim (text legibility); left-aligned text and the corner accessory share one row pinned to
   the bottom of the stage. Only entries no catalog utility expresses live here. */

.mstg.v1 {
	--mstg-v1-ht: 1003;      /* Figma stage height at 1920 */
	--mstg-v1-sd-w: 478;     /* Figma corner card 478 x 290 */
	--mstg-v1-sd-asp: 478 / 290;
	--mstg-v1-gap: 160;      /* Figma gap between text column and corner card */
	--mstg-v1-sdw: 0 0.9375rem 1.375rem hsl(from var(--black) h s l / 0.3);

	/* Spacing from Figma: 160 top / 64 bottom, 16 title→intro, 32 intro→button */
	--mstg-tls-pd-v-tp: 160;
	--mstg-tls-pd-v-bt: 64;
	--mstg-tls-pd-v-bt-mbl: 48;
	--mstg-tls-mrg-tp-sp-3: 16;
	--mstg-tls-mrg-tp-sp-4: 32;

	/* The photo renders at full natural color; contrast comes from the scrims below. */
	--mstg-img-bg-o: 1;

	> .bg {
		img {
			object-position: 50% 100%;
		}

		/* Mobile: text stacks over the middle of the photo, so the bottom scrim reaches higher */
		&::after {
			content: '';
			position: absolute;
			inset: 0;
			pointer-events: none;
			background:
				linear-gradient(180deg, rgb(0 0 0 / 0.8) 0%, rgb(0 0 0 / 0) 36%),
				linear-gradient(0deg, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.6) 55%, rgb(0 0 0 / 0) 85%);
		}
	}

	.mstg-v1-txt {
		:is(.fnt_t-big, p) {
			text-shadow: var(--mstg-v1-sdw);
		}

		p {
			font-size: 1.125rem;
		}
	}

	.mstg-v1-sd {
		max-width: calc(var(--mstg-v1-sd-w) * 1px);
		margin-top: 2rem;

		&:not(:has(*)) {
			display: none;
		}

		> * {
			display: block;
			aspect-ratio: var(--mstg-v1-sd-asp);
			overflow: hidden;
			filter: drop-shadow(var(--mstg-v1-sdw));

			:is(img, video) {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	@media screen and (width >= 1280px) {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		/* Width-scaled per Figma, but never taller than the screen: on laptops (wide but short)
		   the width-based height overflowed the viewport and pushed the bottom-aligned text up
		   over the lit facade in the middle of the photo. */
		min-height: min(calc(var(--mstg-v1-ht) / 1920 * 100vw), calc(var(--mstg-v1-ht) * 1px), 100svh);

		/* Figma scrims: top fade for the header, bottom fade starting halfway down - plus a
		   left-side fade behind the text column (client request 2026-10-19: the header must sit
		   on the darker part of the photo; the lit house fills the centre of the frame). */
		> .bg::after {
			background:
				linear-gradient(180deg, rgb(0 0 0 / 0.8) 0%, rgb(0 0 0 / 0) 36%),
				linear-gradient(90deg, rgb(0 0 0 / 0.75) 0%, rgb(0 0 0 / 0.6) 30%, rgb(0 0 0 / 0.35) 45%, rgb(0 0 0 / 0) 60%),
				linear-gradient(0deg, rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0) 52%);
		}

		/* Title scales down with the screen HEIGHT as well as width, and keeps a measure that
		   breaks to three lines ("Custom Lighting, / Designed for / Your Home") inside the
		   left-side fade. */
		.mstg-v1-txt .fnt_t-big {
			font-size: min(var(--fnt-t-big-s), 8.5svh);
			max-width: 9.5em;
		}

		/* Intro line uses the Title 2 scale (24px, lh 1.5) per Figma */
		.mstg-v1-txt p {
			font-size: var(--fnt-t-2-s);
			line-height: var(--fnt-t-2-lh);
		}

		.mstg-v1-row {
			display: flex;
			align-items: flex-end;
			gap: calc(var(--mstg-v1-gap) / 1920 * 100vw);
		}

		.mstg-v1-txt {
			flex: 1 1 0;
			min-width: 0;
		}

		.mstg-v1-sd {
			flex: 0 0 calc(var(--mstg-v1-sd-w) / 1920 * 100vw);
			margin-top: 0;
		}
	}
}