/**
 * THE EXPERIENCE (03)
 *
 * Cream band. Heading left, intro right, then three white cards.
 *
 * Measured from the design (1440 frame):
 *   band      #f4f2ec, full bleed
 *   heading   x 138, 511 wide
 *   intro     x 947 → 1302 (355 wide), sits lower than the heading top
 *   cards     374x412, gaps 21px, spanning the 1164 column
 *   icon      ~22px inset, 26px from the card top
 *   pattern   104px band across the base of each card
 */

@layer components {
	.experience {
		background-color: var(--clr-bg-alt);
		padding-block: var(--section-space);
	}

	.experience__head {
		display: grid;
		gap: var(--space-l) var(--space-2xl);
		/*
		 * The intro sits on the heading's baseline, not its top — its last line
		 * lands level with the bottom of the gold line. Grid end-alignment does
		 * that for free and, unlike a computed offset, holds however many lines
		 * either side runs to.
		 */
		align-items: end;
		margin-block-end: var(--space-3xl);
	}

	@media (min-width: 60rem) {
		.experience__head {
			/* heading 511 + gap + intro 355 within the 1164 column */
			grid-template-columns: 1fr 30.5%;
		}
		/* Nudge off the very baseline so the descenders do not touch. */
		.experience__intro { margin-block-end: var(--space-2xs); }
	}

	.experience__eyebrow { margin: 0 0 var(--stack-eyebrow); }

	.experience__title {
		margin: 0;
		/* 511 / 129 = 3.96em — holds the design's line breaks at any size. */
		max-inline-size: 4em;
	}

	.experience__intro {
		margin: 0;
		color: var(--clr-text-muted);
		max-inline-size: 24rem;
	}

	/* ---- Cards -------------------------------------------------------- */

	.experience__cards {
		display: grid;
		gap: 1.3125rem;                       /* 21px measured */
		grid-template-columns: 1fr;
	}

	@media (min-width: 48rem) {
		.experience__cards { grid-template-columns: repeat(3, 1fr); }
	}

	.xcard {
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		min-block-size: 25.75rem;             /* 412px */
		padding: var(--space-m);              /* ~22px inset measured */
		border-radius: var(--radius-card);
		background-color: var(--clr-bg);
	}

	/*
	 * Chevron band across the base.
	 *
	 * Its own asset, drawn at 374x66 — exactly the card's width in the design —
	 * rather than the CTA's pattern scaled down. Falls back to nothing rather
	 * than a gradient: on a white card an approximate pattern reads as a
	 * mistake, whereas no pattern just reads as plain.
	 */
	.xcard::after {
		content: "";
		position: absolute;
		inset-block-end: 0;
		inset-inline: 0;
		block-size: 4.125rem;                 /* 66px, the asset's own height */
		background-image: var(--xcard-pattern, none);
		background-size: cover;
		background-position: bottom center;
		background-repeat: no-repeat;
		pointer-events: none;
	}

	/*
	 * Icons.
	 *
	 * The card is a flex column, so children stretch to fill the cross axis by
	 * default — that, not the image, is what was making these span the full card
	 * width. inline-size: fit-content opts out, and works the same whether the
	 * parent is flex, grid or a plain block.
	 *
	 * Definite block-size gives every icon a shared height; width then follows
	 * the artwork's own ratio. object-fit is belt and braces so a wrong box can
	 * never distort the artwork.
	 */
	.xcard__icon {
		display: block;
		block-size: 4.5rem;                   /* icons run 60–72px */
		inline-size: fit-content;
		max-inline-size: 100%;
		align-self: start;
		object-fit: contain;
		object-position: left center;
		margin-block-end: var(--space-l);
	}

	.xcard__title {
		margin: 0 0 var(--space-s);
		position: relative;
		z-index: 1;
	}

	.xcard__text {
		margin: 0;
		position: relative;
		z-index: 1;
		color: var(--clr-text-muted);
	}
}