/* ServicesV9 — full-viewport card grid and grid-edge corner-radius overrides.
   Caption overlay, scrim and arrow chip come from
   /styles/modules/service-tools.css via the snippet's `srv-arw` hook. This
   variation keeps its image in flow (it does NOT opt into `srv-arw-fill`) — the
   card takes its height from the image. */

.srv.v9 {
	--srv-v9-tile-asp: 618 / 278;   /* Figma tile */
	--srv-v9-bdr-w: 3px;
	/* Design (Figma 13811:29545): the header sits in the 1216 container but the card
	   grid spans the full 1918 frame, cards flush to both edges -- the node's own note
	   is "will require custom CSS to remove the border-radius on the outside edges of
	   items that touch the edge of the site" (handled at the foot of this file).
	   So the ul breaks out of its .mn_wd parent by half the gutter on each side, using
	   the same formula as the shared scrolling-list-overflow tool. Desktop-only for the
	   same reason that tool gives: .grd sizes its items as a PERCENTAGE OF THE TRACK,
	   so below 1280 the track stays inside .mn_wd rather than oversizing every card.
	   .mn_wd is clamp(--mn_min, --mn-w, --mn_max), not bare --mn-w -- below ~1600px the
	   --mn_max cap wins, and bleeding from --mn-w alone leaves a visible gap. */

	
	.grd {
		--srv-v9-mn-w: clamp(var(--mn_min), var(--mn-w), var(--mn_max));

		[data-role="item"] > * {
			aspect-ratio: var(--srv-v9-tile-asp);
			border: var(--srv-v9-bdr-w) solid rgba(208, 171, 116, 0.30);
			box-shadow: 0 4px 10px 0 rgba(255, 255, 255, 0.30);
			background-blend-mode: multiply, normal;
		}
	.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);
		}
	}

		@media screen and (width >= 1500px) {
			margin-inline: calc((100svw - var(--srv-v9-mn-w)) * -0.5);
		}

		@media screen and (width >= 1920px) {
			margin-inline: calc((var(--st-w) - var(--srv-v9-mn-w)) * -0.5);
		}

		@container (width >= 78rem) {

			&.mx-3 > li:nth-child(3n + 1) > *,
			&.mx-4 > li:nth-child(4n + 1) > * {
				border-start-start-radius: 0;
				border-end-start-radius: 0;
			}

			&.mx-3 > li:nth-child(3n) > *,
			&.mx-4 > li:nth-child(4n) > * {
				border-start-end-radius: 0;
				border-end-end-radius: 0;
			}
		}
	}
}