/* BannerV9 — band rhythm tuners plus the one treatment no catalog utility expresses:
   the media panel's overhang past the band's bottom edge. */

.bnr.v9 {
	--bnr-tls-pd-v-tp: 120; /* tuner: comp text rail starts 246px into the band */
	--bnr-tls-pd-v-bt: 50; /* tuner: the media panel defines the section's bottom edge */

	--bnr-img-bg-o: 0.3; /* tuner: comp band is the water texture washed over the palette surface, not the raw photo —
	                        0.3 reproduces the comp's texture contrast (luminance spread 21.5 vs the comp's 21.9) */

	--bnr-v9-med-ovh: 10; /* tuner: comp (18420:25661) media panel hangs 108px past the band's bottom edge at 960 panel width */

	z-index: 1;

	> [class*="mn_"] {
		position: relative; /* positioning context for the overhanging media panel */
	}

	
	.bg img {
		object-position: 50% 66%; /* comp crop (a104): loungers graze the band top, pool water dominates below */
	}
	
	@media screen and (width >= 1280px) {
		> .bg {
			height: 75%;
		}
		
		.bnr-v9-med {
			position: absolute;
			inset-inline-end: 0;
			inset-block-end: calc(var(--bnr-tls-pd-v-bt-clc) * -1); /* panel bottom on the band's bottom edge... */
			translate: 0 calc(var(--bnr-v9-med-ovh) / 300 * 100%); /* ...then overhang, scaled to the panel's 960x439 box */
			width: 60%; /* comp media panel is 960 on the 1600 rail */
		}
	}

	.bnr-v9-med :where(img, video) {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 960/300; /* comp media panel is 960x439 */
		object-fit: cover;
	}

	div:has( > picture img[src*="google"]) {
		display: none;
	}
}