/* plinth/card-grid */
.b-card-grid {
	container-type: inline-size;
	--cg-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Ease-out, as the decal button. */
	--cg-enter-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Same as the Hero. */
	--cg-gap: var(--wp--preset--spacing--xs);
	--cg-cols: 1;
	/* Heading emphasis and the eyebrow marker. */
	--cg-highlight: var(--wp--preset--color--accent);
	/* No padding-block here — the editor's Padding control owns it. */

	/* ---- Section background (native Color panel) ------------------------------
	   Same rules as Icon Cards: dark backgrounds get light text by default,
	   highlights turn Mint on Forest and follow the text on Magenta. */
	&:is(.has-primary-background-color, .has-secondary-background-color, .has-accent-background-color) {
		color: var(--wp--preset--color--base);
	}

	&.has-primary-background-color {
		--cg-highlight: var(--wp--preset--color--tint);
	}

	&.has-accent-background-color {
		--cg-highlight: currentColor;
	}

	/* The inner is the layout container, so the queries (and the card
	   heights below, in cqi) see the content width. */
	& .b-card-grid__inner {
		container: card-grid / inline-size;
		max-width: var(--block-max-width);
		margin-inline: auto;
		padding-inline: var(--block-gutter);
	}

	/* ---- Header ------------------------------------------------------------------ */

	& .b-card-grid__header {
		display: grid;
		gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xl);
		margin-block-end: var(--wp--preset--spacing--lg);
	}

	&.b-card-grid--center .b-card-grid__header {
		justify-items: center;
		text-align: center;
	}

	/* Eyebrow: .plinth-eyebrow (base.css). */
	& .b-card-grid__eyebrow .plinth-eyebrow__marker > span {
		background: var(--cg-highlight);
	}

	& .b-card-grid__heading {
		margin: 0;
		color: inherit;
		font-size: var(--wp--preset--font-size--xxxl);
		text-wrap: balance;

		& :is(em, i) {
			color: var(--cg-highlight);
		}
	}

	& .b-card-grid__aside {
		display: grid;
		justify-items: start;
		align-content: start;
		gap: var(--wp--preset--spacing--sm);
	}

	&.b-card-grid--center .b-card-grid__aside {
		justify-items: center;
	}

	& .b-card-grid__intro {
		max-inline-size: 36rem;
		margin: 0;
		font-size: var(--wp--preset--font-size--lg);
		line-height: 1.4;
		text-wrap: pretty;
	}

	/* The decal's filled circle knocks out to the section colour. */
	& .b-card-grid__header-link {
		--decal-knock: var(--wp--preset--color--base);
	}

	&:is(.has-primary-background-color, .has-secondary-background-color, .has-accent-background-color) .b-card-grid__header-link {
		--decal-knock: var(--wp--preset--color--secondary);
	}

	/* ---- Grid ---------------------------------------------------------------------- */

	& .b-card-grid__grid {
		display: grid;
		grid-template-columns: repeat(var(--cg-cols), minmax(0, 1fr));
		gap: var(--cg-gap);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Every row stretches to its tallest card, so mixed rows stay level. */
	& .b-card-grid__item {
		display: grid;
		margin: 0;
	}

	/* ---- Cards ------------------------------------------------------------------
	   Colour: a b-card-grid__card--{slug} modifier from render.php, which
	   resolves "Automatic" against the section background. Each colour sets
	   the card, its text, the number and the number cards' softer body text. */

	& .b-card-grid__card {
		--cg-card: var(--wp--preset--color--neutral);
		--cg-ink: var(--wp--preset--color--secondary);
		--cg-number: var(--wp--preset--color--accent);
		--cg-muted: color-mix(in srgb, var(--wp--preset--color--primary) 75%, var(--wp--preset--color--base));
		--cg-pad: var(--wp--preset--spacing--md);
		/* Near-square, as in the design. One column: a sensible minimum
		   instead, so phones don't scroll past empty space. */
		--cg-ratio: 1.04;
		--cg-min: 15rem;
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--sm);
		min-block-size: var(--cg-min);
		padding: var(--cg-pad);
		border-radius: var(--wp--custom--radius--card-sm);
		background: var(--cg-card);
		color: var(--cg-ink);
		text-decoration: none;
	}

	& .b-card-grid__card--base {
		--cg-card: var(--wp--preset--color--base);
	}

	& .b-card-grid__card--tint {
		--cg-card: var(--wp--preset--color--tint);
	}

	& .b-card-grid__card.is-dark {
		--cg-ink: var(--wp--preset--color--base);
		--cg-muted: var(--wp--preset--color--base);
	}

	& .b-card-grid__card--primary {
		--cg-card: var(--wp--preset--color--primary);
		--cg-number: var(--wp--preset--color--tint);
	}

	& .b-card-grid__card--secondary {
		--cg-card: var(--wp--preset--color--secondary);
	}

	& .b-card-grid__card--accent {
		--cg-card: var(--wp--preset--color--accent);
		--cg-number: var(--wp--preset--color--base);
	}

	/* Logo cards are shorter in the design; one with a title takes the
	   near-square shape of an icon card. */
	& .b-card-grid__card--logo:where(:not(:has(.b-card-grid__title))) {
		--cg-ratio: 1.37;
		--cg-min: 12rem;
	}

	/* Icons and logos show as uploaded on light cards and turn white on
	   dark and magenta ones. */
	& :is(.b-card-grid__icon, .b-card-grid__logo) {
		display: block;
		flex: none;
		align-self: flex-start;
		object-fit: contain;
		object-position: left center;
	}

	& .is-dark :is(.b-card-grid__icon, .b-card-grid__logo) {
		filter: brightness(0) invert(1);
	}

	& .b-card-grid__icon {
		inline-size: 4.25rem;
		block-size: 4.25rem;
	}

	& .b-card-grid__logo {
		inline-size: auto;
		max-inline-size: min(100%, 12rem);
		block-size: 3rem;
	}

	& .b-card-grid__number {
		margin: 0;
		color: var(--cg-number);
		font-family: var(--wp--preset--font-family--heading);
		font-size: calc(var(--wp--preset--font-size--xxxl) * 1.5);
		line-height: 1;
	}

	/* Image cards: the photo fills the card under a Deep Forest scrim, the
	   same gradient as Industries Bento (weighted for pale photos), so the
	   white text always reads. */
	& .b-card-grid__card--image {
		isolation: isolate;
		overflow: hidden;

		&:has(.b-card-grid__image)::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: -1;
			background: linear-gradient(
				to top,
				color-mix(in srgb, var(--wp--preset--color--secondary) 92%, transparent) 0%,
				color-mix(in srgb, var(--wp--preset--color--secondary) 76%, transparent) 26%,
				color-mix(in srgb, var(--wp--preset--color--secondary) 40%, transparent) 54%,
				color-mix(in srgb, var(--wp--preset--color--secondary) 10%, transparent) 80%,
				transparent 100%
			);
		}
	}

	& .b-card-grid__image {
		position: absolute;
		inset: 0;
		z-index: -1;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		transition: scale 0.6s var(--cg-ease);
	}

	& .b-card-grid__card--focus-top .b-card-grid__image {
		object-position: center 18%;
	}

	& .b-card-grid__card--focus-bottom .b-card-grid__image {
		object-position: center 82%;
	}

	/* Copy, icon, number, logo and image cards pin the text to the bottom;
	   CTA cards keep it at the top and pin the button instead. */
	& .b-card-grid__body {
		display: grid;
		gap: var(--wp--preset--spacing--sm);
	}

	& .b-card-grid__card:not(.b-card-grid__card--cta) .b-card-grid__body {
		margin-block-start: auto;
	}

	& .b-card-grid__title {
		margin: 0;
		color: inherit;
		font-size: var(--wp--preset--font-size--xxl);
		line-height: 1.15;
		text-wrap: balance;
	}

	& .b-card-grid__card--number .b-card-grid__title {
		font-size: var(--wp--preset--font-size--xl);
	}

	& .b-card-grid__text {
		max-inline-size: 26rem;
		margin: 0;
		font-size: var(--wp--preset--font-size--lg);
		line-height: 1.35;
		text-wrap: pretty;
	}

	& .b-card-grid__card--number .b-card-grid__text {
		color: var(--cg-muted);
		line-height: 1.6;
	}

	& .b-card-grid__button {
		align-self: flex-start;
		margin-block-start: auto;
	}

	/* ---- Linked cards: a slight lift and a decal arrow in the corner -------- */

	& .b-card-grid__arrow {
		position: absolute;
		inset-block-start: var(--cg-pad);
		inset-inline-end: var(--cg-pad);
		inline-size: 1.75rem;
		block-size: 1.75rem;
		overflow: visible;
		transition: translate 0.45s var(--cg-ease);

		& .plinth-icon__fill {
			opacity: 0;
			transition: opacity 0.35s ease;
		}

		& .plinth-icon__arrow {
			transition: stroke 0.35s ease;
		}
	}

	& a.b-card-grid__card {
		transition:
			translate 0.45s var(--cg-ease),
			box-shadow 0.45s var(--cg-ease);

		&:focus-visible {
			outline: 2px solid var(--wp--preset--color--accent);
			outline-offset: 2px;
		}
	}

	/* On magenta (cards or section) the focus ring follows the text. */
	& a.b-card-grid__card--accent:focus-visible,
	&.has-accent-background-color a.b-card-grid__card:focus-visible {
		outline-color: currentColor;
	}

	&.has-accent-background-color a.b-card-grid__card--accent:focus-visible {
		outline-color: var(--wp--preset--color--base);
	}

	& a.b-card-grid__card:is(:hover, :focus-visible) .b-card-grid__arrow {
		translate: 0.2em 0;

		& .plinth-icon__fill {
			opacity: 1;
		}

		& .plinth-icon__arrow {
			stroke: var(--cg-card);
		}
	}

	& .b-card-grid__placeholder {
		padding: var(--wp--preset--spacing--md);
		border: 1px dashed currentColor;
		border-radius: var(--wp--custom--radius--card-sm);
	}

	/* Real pointers only — on touch, :hover sticks after a tap. */
	@media (hover: hover) {
		& a.b-card-grid__card:hover {
			translate: 0 -0.25rem;
			box-shadow: var(--wp--custom--shadow--md);
		}

		/* Linked image cards also zoom the photo a little, as Industries Bento. */
		& a.b-card-grid__card:hover .b-card-grid__image {
			scale: 1.04;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		& :is(a.b-card-grid__card, .b-card-grid__arrow, .b-card-grid__image) {
			transition-duration: 0s;
		}

		@media (hover: hover) {
			& a.b-card-grid__card:hover {
				translate: none;
			}
		}
	}

	/* ---- Entrance -------------------------------------------------------------------
	   The Hero's rise, staggered card by card (70ms apart, as Icon Cards).
	   view.js sets data-reveal="pending" on each card and swaps it to "in",
	   with a stagger index (--i), as it scrolls into view; until then the
	   animation holds its first frame. With no JS (or reduced motion, or in
	   the editor) data-reveal is never set and the cards are just there. */

	& .b-card-grid__item[data-reveal] {
		animation: b-card-grid-rise 0.8s var(--cg-enter-ease) calc(var(--i, 0) * 70ms) both;
	}

	& .b-card-grid__item[data-reveal="pending"] {
		animation-play-state: paused;
	}

	/* ---- Widths -------------------------------------------------------------------- */

	/* Two columns: cards take their near-square shape from the column width. */
	@container card-grid (min-width: 36rem) {
		& .b-card-grid__grid {
			--cg-cols: 2;
		}

		& .b-card-grid__card {
			--cg-min: calc((100cqi - (var(--cg-cols) - 1) * var(--cg-gap)) / var(--cg-cols) / var(--cg-ratio));
		}

	}

	/* Split header, as Accordion Cards: eyebrow across the top, heading on
	   the left, intro and link on the right, starting level with the heading.
	   With no intro, the link sits at the right edge, level with the heading's
	   last line. */
	@container card-grid (min-width: 48rem) {
		&.b-card-grid--split .b-card-grid__header {
			grid-template-columns: 1fr 1fr;

			& .b-card-grid__eyebrow {
				grid-column: 1 / -1;
			}

			& .b-card-grid__aside {
				grid-column: 2;
				align-self: start;
				padding-block-start: var(--wp--preset--spacing--xs);
			}

			& .b-card-grid__aside:not(:has(.b-card-grid__intro)) {
				justify-items: end;
				align-self: end;
				padding-block-start: 0;
			}
		}
	}

	@container card-grid (min-width: 56rem) {
		& .b-card-grid__grid {
			--cg-cols: 3;
			--cg-gap: var(--wp--preset--spacing--sm);
		}

		& .b-card-grid__card {
			--cg-pad: calc(var(--wp--preset--spacing--md) * 1.5);
		}

		& .b-card-grid__card--logo:where(:not(:has(.b-card-grid__title))) {
			--cg-pad: var(--wp--preset--spacing--md);
		}
	}
}

@keyframes b-card-grid-rise {
	from {
		opacity: 0;
		translate: 0 1.5rem;
	}
}