/* ServicesV10 - Landmark design (Figma 18723:21722). 4-up grid, 32px gaps, 311px rows at
   1920: a light 2-column intro tile with the LD watermark, photo tiles with a bottom label
   and a square arrow chip, and a dark closing callout tile. Caption overlay, scrim and the
   image fill layer come from /styles/modules/service-tools.css via the snippet's hooks. */

.srv.v10 {
	--srv-v10-tile-asp: 376 / 311;   /* Figma tile */
	--srv-v10-pnl-pd: 2rem;          /* Figma panel padding 32 */
	--srv-v10-bdr-w: 3px;            /* Figma tile border, gold at the theme border opacity */
	--srv-v10-wm-s: 16rem;           /* LD watermark size on the intro tile */
	--srv-arw-chp-s: 2rem;           /* 24px arrow + 4px padding */
	--srv-arw-chp-icn-s: 1.5rem;

	/* Figma 32px gaps: set through the grid's own gap token so its item-width math (which
	   subtracts the gap) stays in step and four tiles still fit per row. */
	> .mn_ > .grd {
		--grd-sp-dyn: 2rem;
	}

	/* -- Photo tiles ------------------------------------------------------- */

	[data-role="item"] > * {
		aspect-ratio: var(--srv-v10-tile-asp);
		border: var(--srv-v10-bdr-w) solid hsl(from var(--bdr-clr) h s l / var(--bdr-clr-o));
	}

	.srv-arw {
		.psu-aft {
			justify-content: flex-end;
			padding: 1.5rem 1rem;
		}

		/* Square chip (3px corners), not the default circle */
		.bg-bx:has(svg) {
			border-radius: var(--bdr-rds);
		}
	}

	/* -- Intro + callout panels ------------------------------------------- */

	.srv-v10-pnl {
		padding: var(--srv-v10-pnl-pd);
		row-gap: 1.5rem;
	}

	.srv-v10-intro {
		background-image: url('/media/brand/watermark-dark.png');
		background-repeat: no-repeat;
		background-size: var(--srv-v10-wm-s);
		background-position: right -2rem top -3rem;
	}

	.srv-v10-cta .srv-v10-pnl {
		row-gap: 1.5rem;
		align-items: center;
	}

	/* Figma sets this callout in the Title 1 color (white), not the gold callout color */
	.srv-v10-cta {
		--fnt-t-co: var(--fnt-t-1);
	}

	/* .grd is a wrapping flex row sized by container queries; at the 4-up breakpoint
	   (78rem, same as grid.css) the intro tile takes two columns' width plus one gap. */
	@container (width >= 78rem) {
		.grd.mx-4 > .srv-v10-span {
			flex-basis: calc(50% - var(--grd-sp-dyn) * 0.5);
		}
	}

	/* Laptop widths (a ~60-78rem container, e.g. 1280-1440px screens): grid.css drops mx-4 to
	   two columns below 78rem, which strands the callout tile alone on a full-width row. The
	   tiles still fit four across here, so keep the design's 4-up layout down to 60rem. */
	@container (60rem <= width < 78rem) {
		.grd.mx-4 > * {
			flex-basis: calc(25% - var(--grd-sp-dyn) * 0.75);
		}

		.grd.mx-4 > .srv-v10-span {
			flex-basis: calc(50% - var(--grd-sp-dyn) * 0.5);
		}

		/* The callout's 40px line and button are wider than a ~265px column; let the tile
		   shrink (min-width) and its contents wrap rather than pushing it onto its own row. */
		.srv-v10-cta {
			min-width: 0;

			.srv-v10-pnl {
				padding: 1.25rem;
			}

			.btn {
				max-width: 100%;
				white-space: normal;
				padding-inline: 1.25rem;
			}
		}
	}

	/* Two columns (tablet, a ~28-60rem container; grid.css would stack mx-4 single-file below 50rem):
	   the intro takes its own full-width row so the five tiles and the callout pair up evenly. */
	@container (28rem <= width < 60rem) {
		.grd.mx-4 > * {
			flex-basis: calc(50% - var(--grd-sp-dyn) * 0.5);
		}

		.grd.mx-4 > .srv-v10-span {
			flex-basis: 100%;
		}

		.srv-v10-cta {
			min-width: 0;
		}
	}
}

/* Landmark home (Figma 18723:21722): the services grid sits flush under the mainstage and has
   no vertical padding of its own (the section is exactly the two tile rows); the next
   section's top padding sets the gap below. */
.mstg.v1 + section.srv.v10[class*="pd_v"][data-colors] {
	padding-top: 0;
	padding-bottom: 0;
}