/* SubpageContentV5 — module-specific styles.
   The services side panel's styles live with the component: components/subpage-content/services-nav/ServicesNav.css */

.spg-cnt.v5 {

	/* Design: pool-water texture at full strength under the wash below — the wash is
	   drawn as gradients over <BackgroundImage>, not baked into the photo's opacity. */
	--img-bg-o: 1;

	/* Design: 80% background wash over the photo, going solid toward the top
	   (root fills: image + #FFFFFFCC overlay + white>transparent gradient). */
	> .bg::after {
		content: '';
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(180deg, var(--background) 0%, hsl(from var(--background) h s l / 0) 100%),
			linear-gradient(hsl(from var(--background) h s l / 0.8), hsl(from var(--background) h s l / 0.8));
	}

	/* Baseline escape hatch: .fourth gap-width for the .f_gp rail (family pattern).
	   Design: sidebar rail is 464/1600 = 29% of the content row. */
	.f_gp > .fourth {
		flex: 0 0 auto;
		width: calc(29% - (var(--flx-gap) / 2));
	}

	/* Design: the boxed content sits on its own palette background (white card), not the
	   tinted inner-theme box; 64px interior padding at desktop. */
	.bg-bx.cnt-bx {
		background-color: var(--background);
		padding: clamp(1.5rem, 3.35vw, 3.6rem);
	}

	/* Design: kicker divider draws in the kicker color at 40% opacity, 2px. */
	.knd-dvd {
		--bdr-clr: var(--fnt-t-k);
		--bdr-clr-o: 0.4;
		border-top-width: 2px;
	}

	/* Design: droplet list bullets in the accent teal. */
	.cnt-stl ul li::before {
		content: '';
		position: absolute;
		left: 0.25em;
		top: 0.3em;
		width: 0.5625em;
		height: 0.8125em;
		background-color: var(--lt-alt-accent);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 13'%3E%3Cpath d='M4.5 0C4.5 0 0 6.03 0 8.72 0 11.09 2.01 13 4.5 13 6.99 13 9 11.09 9 8.72 9 6.03 4.5 0 4.5 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 13'%3E%3Cpath d='M4.5 0C4.5 0 0 6.03 0 8.72 0 11.09 2.01 13 4.5 13 6.99 13 9 11.09 9 8.72 9 6.03 4.5 0 4.5 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	/* Landmark (Figma "Callout - Logomark + BG"): #212121 alternate-dark panel, 24px padding,
	   the white LD logomark at 75px, 32px from the copy. The brand mark replaces the content
	   image (the package's placeholder). */
	.clt-grnt {
		gap: 1rem 2rem;
		padding: 1.5rem;
		background-color: var(--background);
		color: var(--text-color);

		.clt-grnt-mrk {
			flex: 0 0 auto;
			width: 4.6875rem;
			height: 4.6875rem;
			object-fit: contain;
		}
	}

	/* Design: the Read More bar reads in the secondary link tone over an
	   ink-toned hairline (stroke #041A1F). */
	.cnt-xpnd .cnt-xpnd-btn {
		--link-color: var(--lt-alt-lnk);
		--link-hover: var(--lt-alt-lnk-hov);
		--bdr-clr: var(--lt-txt);
		margin-top: 0;
	}

	/* Design: primary CTA keeps the primary-light button color inside the card. */
	.cnt-bx .btn.v1 {
		--btn-bg: var(--lt-btn-pry);
		--btn-clr: var(--lt-btn-pry-txt);
	}

	.fourth {

		/* Design: sidebar photo crops to the comp's 464x237 band (~2:1). */
		> picture img {
			width: 100%;
			aspect-ratio: 2 / 1;
			object-fit: cover;
		}

		/* Design: the navy sidebar CTA carries the brand splash logomark as a subtle
		   watermark bleeding off the card's right edge, behind the copy. */
		.crd {
			position: relative;
			isolation: isolate;
			overflow: hidden;

			&::after {
				content: '';
				position: absolute;
				z-index: -1;
				top: -0.5rem;
				right: -4rem;
				width: 15rem;
				height: 12rem;
				background-color: hsl(from var(--text-color) h s l / 0.12);
				-webkit-mask: url('/media/brand/callout-logomark-white.svg') no-repeat center / contain;
				mask: url('/media/brand/callout-logomark-white.svg') no-repeat center / contain;
				pointer-events: none;
			}
		}
	}
}