/* BannerV2 — co-located module styles. Band rhythm: /styles/modules/banner-tools.css;
   background-image tuners: /styles/common/tools/sub-banner-tools.css. Scoped tuner overrides only. */

/* On :root, not on .bnr.v2 — custom properties inherit downward, never sideways,
   so the "next panel" rule below (a sibling selector) could not read it otherwise.
   banner-v2.css only loads on pages that render BannerV2, so it stays scoped. */
:root {
	--bnr-v2-lrg-ofst: 6.75rem;
}

.bnr.v2 {
	--bnr-tls-pd-v-tp: 89; /* tuner: band vertical rhythm, desktop tier; -mbl left at the family default */
	--bnr-tls-pd-v-bt: 89; /* tuner: band vertical rhythm, desktop tier; -mbl left at the family default */

	--bnr-img-bg-o: 0.8; /* tuner: dark photo band — composite sampled from the comp ≈ rgb(38,61,67) over the primary-dark base */
	--bnr-img-bg-sat: 0; /* tuner: background photo contributes luminosity only; hue comes from the scope */
	--bnr-img-bg-brt: 0.3; /* tuner: dims the photo so the band sits darker than the palette base, per the comp */

	--bnr-v2-sml-ofst: 1.8rem;
	padding-bottom: 0;

	/* The foreground image is pulled below the band (.five-8ths, further down), so
	   the first panel after the banner needs that much extra top padding or the
	   overlap eats into its content. --pd-v is the panel's own pd_v rhythm; the
	   0px fallback covers a next panel with no pd_* class at all. */
	& + * {
		padding-top: calc(var(--pd-v, 0px) + var(--bnr-v2-lrg-ofst));
	}

	.three-8ths {
		@media screen and (min-width:1280px) {
			& {
				margin-bottom: calc(var(--bnr-v2-sml-ofst) * -1) !important;
			}
		}
	}

	.three-8ths > .flx > div {
		display: none;
	}

	.five-8ths {
		margin-bottom: calc(var(--bnr-v2-lrg-ofst) * -1) !important;
		
		@media screen and (min-width:1280px) {
			& {
				height: 19.75rem;
				overflow: hidden;

				img {
					position: absolute;
					top: 50%;
					left: 50%;
					translate: -50% -50%;
				}
			}
		}
	}
}