/*
 * Cards and category tiles (docs/DESIGN_SYSTEM.md section 8.3). Markup: template-parts/cards/*.php.
 *
 * One stretched link per card: the title's link covers the whole card with its ::after, so the card is a single target
 * with no nested links, and the focus ring is drawn around the card. A hairline outline at rest; on hover the card
 * lifts 2 px, its shadow deepens and the photo grows by 2 %.
 */
@layer components {
	.card {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
		border: var(--border-hairline);
		border-radius: var(--radius-lg);
		background: var(--color-surface);
		color: var(--color-text);
		transition:
			transform var(--dur-base) var(--ease-out),
			box-shadow var(--dur-base) var(--ease-out);
	}

	.card__media {
		flex: none;
		border-radius: 0;
	}

	.card__image {
		transition: transform var(--dur-base) var(--ease-out);
	}

	.card__body {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: var(--space-2);
		padding: var(--space-4);
	}

	/* Narrow cards (two portraits side by side on a phone) keep a smaller padding, so their names have room. */
	@container (min-width: 18rem) {
		.card__body {
			padding: var(--space-5);
		}
	}

	.card__eyebrow {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		color: var(--color-accent-text);
	}

	.card__title {
		font-size: var(--fs-h4);
		line-height: var(--lh-h4);
	}

	.card__link {
		color: inherit;
		text-decoration: none;
	}

	/* The stretched link: the whole card is the title's link. */
	.card__link::after {
		position: absolute;
		inset: 0;
		z-index: var(--z-base);
		content: "";
	}

	/* The ring goes around the card, not around the title (DESIGN_SYSTEM section 8.12). Browsers without :has() keep
	   the ring on the title. */
	.card:has(.card__link:focus-visible) {
		outline: var(--focus-ring-width) solid var(--color-focus);
		outline-offset: var(--focus-ring-offset);
	}

	@supports selector(:has(*)) {
		.card__link:focus-visible {
			outline: none;
		}
	}

	.card__subtitle,
	.card__summary {
		color: var(--color-text-secondary);
	}

	.card__facts,
	.card__tags {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2) var(--space-4);
	}

	.card__tags {
		gap: var(--space-2);
		padding-block-start: var(--space-2);
	}

	/* The facts sit at the foot of the card, so the cards of a row line up whatever the length of their texts. */
	.card__facts {
		margin-block-start: auto;
		padding-block-start: var(--space-3);
		padding-inline-end: var(--space-7);
		color: var(--color-text-secondary);
		font-size: var(--fs-small);
		line-height: var(--lh-small);
	}

	.card__price {
		color: var(--color-text);
		font-weight: 600;
	}

	.card__arrow {
		position: absolute;
		inset-block-end: var(--space-5);
		inset-inline-end: var(--space-5);
		color: var(--color-link);
		transition: transform var(--dur-fast) var(--ease-out);
	}

	@media (hover: hover) {
		.card:hover {
			box-shadow: var(--shadow-md);
			transform: translateY(calc(var(--space-1) * -0.5));
		}

		.card:hover .card__image {
			transform: scale(1.02);
		}

		.card:hover .card__title {
			color: var(--color-link);
		}

		.card:hover .card__arrow {
			transform: translateX(var(--space-1));
		}
	}

	.card:active {
		transform: none;
	}

	/* A card given a whole row (the last one of an odd number, layout.css) lays its photo beside the text. */
	.listing > li {
		container-type: inline-size;
	}

	@container (min-width: 36rem) {
		.card--course,
		.card--post {
			flex-direction: row;
		}

		.card--course .card__media,
		.card--post .card__media {
			flex: 0 0 50%;
		}

		.card--course .card__body,
		.card--post .card__body {
			justify-content: center;
			padding: var(--space-6);
		}
	}

	/* Category tiles: index, name, course count and an arrow in a hairline outline. Two a row on a phone, three on a
	   tablet and up to five from 1024 px, whatever the number of categories: a tile grows to share the width its row
	   leaves, so a short last row (the third of three on a phone, the last two of five on a tablet, both tiles of two
	   on a desktop) fills the row instead of leaving a gap. */
	.category-tiles {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.category-tiles > li {
		flex: 1 1 calc((100% - var(--space-3)) / 2);
	}

	@media (min-width: 48em) {
		.category-tiles {
			gap: var(--space-4);
		}

		.category-tiles > li {
			flex-basis: calc((100% - 2 * var(--space-4)) / 3);
		}
	}

	@media (min-width: 64em) {
		.category-tiles > li {
			flex-basis: calc((100% - 4 * var(--space-4)) / 5);
		}
	}

	.category-tile {
		display: grid;
		grid-template:
			"index arrow" auto
			"name name" 1fr
			"count count" auto / 1fr auto;
		gap: var(--space-2);
		height: 100%;
		min-height: calc(var(--size-control-lg) * 2.5);
		padding: var(--space-4);
		border: var(--border-hairline);
		border-radius: var(--radius-lg);
		background: var(--color-surface);
		color: var(--color-text);
		text-decoration: none;
		transition:
			border-color var(--dur-fast) var(--ease-out),
			background-color var(--dur-fast) var(--ease-out);
	}

	@media (min-width: 48em) {
		.category-tile {
			padding: var(--space-5);
		}
	}

	.category-tile__index {
		grid-area: index;
		color: var(--color-accent-text);
		font-size: var(--fs-small);
		font-weight: 600;
	}

	/* A long name breaks at its hyphen ("Semi-Permanent"), not inside a word. */
	.category-tile__name {
		grid-area: name;
		align-self: end;
		font-size: var(--fs-h4);
		font-weight: 600;
		line-height: var(--lh-h4);
		overflow-wrap: break-word;
	}

	.category-tile__count {
		grid-area: count;
		color: var(--color-text-muted);
		font-size: var(--fs-small);
	}

	.category-tile__arrow {
		grid-area: arrow;
		color: var(--color-link);
		transition: transform var(--dur-fast) var(--ease-out);
	}

	@media (hover: hover) {
		.category-tile:hover {
			border-color: var(--color-link);
			background: var(--color-surface-tint);
			color: var(--color-text);
		}

		.category-tile:hover .category-tile__arrow {
			transform: translateX(var(--space-1));
		}
	}

	.category-tile:active {
		background: var(--color-surface-tint-2);
	}

	/* What a listing block shows in the editor when it has nothing to list. */
	.listing-empty {
		padding: var(--space-5);
		border: var(--border-hairline);
		border-radius: var(--radius-md);
		color: var(--color-text-muted);
	}

	@media (forced-colors: active) {
		.card,
		.category-tile {
			border-color: CanvasText;
		}
	}
}