/* Service Tools — shared styling for the <ServiceItemArrow> feed item, used by
   ServicesV9-V12. The snippet renders a card whose image and caption are
   siblings, so the caption has to be lifted over the image; that, the scrim and
   the arrow chip are identical in every consumer, so they live here rather than
   being restated in four co-located stylesheets.
   Hook: `srv-arw`, set by the snippet on the card itself — which also keeps
   these rules from reaching a host module's own .bg-bx panels. */

main {
	--srv-arw-ttl-icn-gp: 0.5rem; /* { min: 0, max: 2, step: 0.05, friendly: 'Service Arrow Title/Icon Gap', group: 'Calculations' } */
	--srv-arw-scrim-strt: 58.5%; /* { min: 0, max: 100, step: 0.5, friendly: 'Service Arrow Scrim Start', group: 'Calculations' } */
	--srv-arw-scrim-end: 91%; /* { min: 0, max: 100, step: 0.5, friendly: 'Service Arrow Scrim End', group: 'Calculations' } */
	--srv-arw-chp-s: 2rem; /* { min: 1, max: 4, step: 0.1, friendly: 'Service Arrow Chip Size', group: 'Calculations' } */
	--srv-arw-chp-icn-s: 75%;
}

.srv-arw {

	/* -- Caption overlay + scrim ---------------- */

	.psu-aft {
		position: absolute;
		inset: 0;

		> * {
			column-gap: var(--srv-arw-ttl-icn-gp);
		}

		/* First stop is the theme colour at zero alpha rather than bare
		   `transparent` — `transparent` is transparent BLACK, which greys the
		   middle of the fade on light palettes (v9's scrim resolves to white). */
		&::after {
			background-image: linear-gradient(to bottom,
				hsl(from var(--inner-theme) h s l / 0) var(--srv-arw-scrim-strt),
				var(--inner-theme) var(--srv-arw-scrim-end));
		}
	}

	/* -- Arrow chip ----------------------------- */

	.bg-bx:has(svg) {
		width: var(--srv-arw-chp-s);
		height: var(--srv-arw-chp-s);
		border-radius: var(--srv-arw-chp-s);

		svg {
			width: var(--srv-arw-chp-icn-s);
			height: var(--srv-arw-chp-icn-s);
		}
	}
}

/* -- Image fill layer (opt in: classList="srv-arw-fill") -------------------
   Takes the image out of flow so the card can size itself from its grid/flex
   row or its own aspect-ratio. Only for cards that HAVE one of those: with both
   the image and the caption out of flow there is nothing left to size the card,
   and it collapses. ServicesV9 deliberately opts out — its card takes its height
   from the in-flow image. */

.srv-arw-fill {

	[class*="asp_"] {
		position: absolute;
		inset: 0;
		height: 100%;

		:where(img, video) {
			height: 100%;
			aspect-ratio: auto;
			object-fit: cover;
		}
	}
}