/**
 * WHAT'S INCLUDED
 *
 * Measured from the product page (1400 content column): copy column 710, gap
 * 118, photograph 570x612. Cards 348x128 in two columns, 14 apart across and
 * 10 down. Inside a card: 19 padding, 44 icon, title at 68, text at 89.
 */

@layer components {

	.included {
		padding-block: var(--section-gap);
		background-color: var(--clr-bg-deep);
	}

	.included__inner {
		display: grid;
		gap: var(--space-2xl);
	}

	@media (min-width: 64rem) {
		.included__inner {
			grid-template-columns: 710fr 570fr;
			column-gap: clamp(var(--space-xl), 8.4vw, 7.375rem);   /* → 118px */
			/*
			 * stretch, not start: the photograph should run the full height of
			 * the copy-and-cards column. Left to its own aspect ratio it stops
			 * short and leaves a gap under it, and how short depends on how much
			 * copy the lounge has — so a fixed ratio can never be right here.
			 */
			align-items: stretch;
		}
	}

	/* ---- Copy ------------------------------------------------------------ */

	.included__heading {
		margin-block: var(--space-2xs) 0;
		font-size: var(--fs-heading-lg);
		line-height: var(--lh-heading-lg);
		letter-spacing: var(--track-heading-lg);
		font-weight: var(--weight-bold);
		text-transform: uppercase;
		text-wrap: balance;
	}

	.included__body {
		margin-block: var(--space-m) 0;
		max-inline-size: 44rem;                /* 706px, measured */
		font-size: var(--fs-body);
		line-height: 1.45;
		color: var(--clr-text-inverse-soft);
	}

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

	.included__cards {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.625rem 0.875rem;                /* 10 down, 14 across */
		margin-block-start: clamp(var(--space-xl), 3.2vw, 2.8125rem);
	}

	@media (min-width: 30rem) {
		.included__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	.inc-card {
		display: grid;
		gap: 0.25rem;
		min-block-size: 8rem;                  /* 128px */
		padding: 0.75rem 1.1875rem 1.1875rem;  /* 12 top, 19 sides */
		background-color: #0d0d0d;
		border: 1px solid var(--clr-border);
		border-radius: var(--radius-card);
		text-align: start;
		cursor: pointer;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast),
			color var(--transition-fast);
	}

	/*
	 * The active card inverts to white. Written as one rule for both the class
	 * and the ARIA state so the two can never disagree.
	 */
	.inc-card.is-active,
	.inc-card[aria-selected="true"] {
		background-color: var(--white);
		border-color: var(--white);
		color: var(--ink-900);
	}

	.inc-card:focus-visible {
		outline: 2px solid var(--clr-accent);
		outline-offset: 3px;
	}

	.inc-card__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.75rem;                  /* 44px */
		block-size: 2.75rem;
		margin-block-end: 0.75rem;
		background-color: var(--clr-accent);
		border-radius: 0.625rem;
	}

	.inc-card__icon img {
		inline-size: 1.5rem;                   /* 24px */
		block-size: 1.5rem;
		object-fit: contain;
	}

	.inc-card__title {
		font-size: 1rem;                       /* 16px */
		font-weight: var(--weight-semibold);
		line-height: 1.2;
	}

	.inc-card__text {
		font-size: 0.875rem;                   /* 14px */
		line-height: 1.25;
		color: var(--clr-text-inverse-subtle);
	}

	/* Muted grey would sink into the white card. */
	.inc-card.is-active .inc-card__text {
		color: var(--clr-text-muted-on-light, #4a4a4a);
	}

	/* ---- Photograph ------------------------------------------------------- */

	/*
	 * No aspect-ratio here on purpose.
	 *
	 * Beside the cards this box is stretched to the row, so a ratio would
	 * derive its WIDTH from that height — 728 x 570/612 = 678 — and it broke
	 * 107px out of its 571px column. Width comes from the grid, height from the
	 * row. The stacked layout below sets its own ratio, where there is no
	 * second column to take height from.
	 */
	.included__media {
		position: relative;
		min-inline-size: 0;                    /* grid items default to min-content */
		border-radius: var(--radius-card);
		overflow: hidden;
	}

	/*
	 * All of them stacked. Only opacity changes, so switching cards cross-fades
	 * rather than tearing the box down and rebuilding it.
	 */
	.included__panel {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity var(--transition-slow);
	}

	.included__panel.is-active {
		opacity: 1;
	}

	/*
	 * cover, so every card fills the frame identically.
	 *
	 * contain was tried and is wrong here: it sizes each photograph to its own
	 * proportions, so a portrait shot rendered narrow and a landscape one wide,
	 * and the picture changed shape as you moved between cards. The frame is
	 * the constant; the crop is the price.
	 */
	.included__panel img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		object-position: center;
	}

	@media (max-width: 63.999rem) {
		/* Above the cards on a phone — it is the thing being described. */
		.included__media { order: -1; aspect-ratio: 3 / 2; }
	}
}