/* ValuesV7 — the design's one non-token length: card media-band height 287px (px/16, Contract C).
   DRAFT — reported for human review; no token or aspect utility expresses its 1.635:1. */
.vls-v7-band {
	--vls-v7-band-h: 17.9375rem;

	height: var(--vls-v7-band-h);
}

/* Landmark design (Figma 18723:21725): #212121 band darkening to black over its lower half,
   a white 1600px surface box (64px padding, 32px gaps) with the LD watermark cropped into its
   top-right corner, four image cards with centered Title 2 captions on #212121, and an
   outline button. The band's bottom padding is 0 in the design. */
.vls.v7 {
	--vls-v7-wm-s: 16.375rem;   /* ~250px LD circle (the png is the circle edge to edge) */
	--vls-v7-crd-sdw: 0 0.9375rem 0.6875rem hsl(from var(--black) h s l / 0.3);

	padding-top: 6rem;
	padding-bottom: 0;
	background-image: linear-gradient(180deg,
		hsl(from var(--black) h s l / 0) 50%,
		hsl(from var(--black) h s l / 0.55) 53%,
		var(--black) 100%);

	.mn_ > .bg-bx {
		row-gap: 2rem;
		padding: 4rem;
		background-image: url('/media/brand/watermark-dark.png');
		background-repeat: no-repeat;
		background-size: var(--vls-v7-wm-s);
		background-position: right -0.9375rem top 2.3125rem;   /* circle ~40px below the box top, just cropped by the right edge */

		> .grd {
			--grd-sp-dyn: 2rem;
		}
	}

	.crd {
		border-radius: var(--bdr-rds);
		overflow: hidden;
	}

	/* The source photos carry a burned-in LANDMARK mark in the bottom-right corner; the client
	   wants it visible (2026-10-14), so the photo is anchored bottom-right rather than cropped. */
	.vls-v7-band {
		overflow: hidden;

		img {
			height: 102%;
			object-fit: cover;
			object-position: 100% 100%;
		}
	}

	.vls-v7-cap {
		text-align: center;
		padding: 2rem;
		filter: drop-shadow(var(--vls-v7-crd-sdw));
	}

	@media screen and (width < 1280px) {
		.mn_ > .bg-bx {
			padding: 2rem 1.5rem;
			background-size: calc(var(--vls-v7-wm-s) * 0.6);
		}
	}
}

/* Figma 96px top. make.css zeroes padding-top on a section that follows one with the same
   palette (section[...] + section[...], specificity 0,6,2). With the before/after gallery
   hidden, this band directly follows the alternate-dark content band but still needs its
   own top spacing, so this adjacency rule (0,8,2) restores it. */
section[class*="pd_v"]:not(.bg-image) + section.vls.v7[data-colors][class*="pd_v"]:not(.bg-image) {
	padding-top: 6rem;
}

/* Tablet: grid.css stacks mx-4 single-file below a 50rem container; show the four cards 2x2. */
.vls.v7 .bg-bx {
	@container (26rem <= width < 50rem) {
		.grd.mx-4 > * {
			flex-basis: calc(50% - var(--grd-sp-dyn) * 0.5);
		}
	}
}