/*
 * Media frames (docs/DESIGN_SYSTEM.md section 7): a fixed ratio, rounded corners, the photo cropped to fill. A frame
 * without a photo yet is a flat tile that names the slot (.is-placeholder, section 7.4).
 *
 * Markup: <div class="media media--4x3"><img ...></div>, or an Image block with the classes "media media--4x3".
 * WordPress's own image CSS (outside any layer) gives the photo height: auto; the ratio passed down to the <img>
 * keeps it the frame's shape all the same.
 */
@layer components {
	.media {
		position: relative;
		overflow: hidden;
		border-radius: var(--radius-lg);
		background: var(--color-surface-tint-2);
	}

	.media--4x3 {
		aspect-ratio: 4 / 3;
	}

	.media--3x2 {
		aspect-ratio: 3 / 2;
	}

	.media--4x5 {
		aspect-ratio: 4 / 5;
	}

	.media--1x1 {
		aspect-ratio: 1;
	}

	.media--16x9 {
		aspect-ratio: 16 / 9;
	}

	.media img {
		width: 100%;
		height: 100%;
		aspect-ratio: inherit;
		object-fit: cover;
	}

	/* No photo yet: a flat tile that says which photo goes here. */
	.media.is-placeholder {
		display: grid;
		place-items: center;
		padding: var(--space-4);
		border: var(--border-hairline);
		color: var(--color-text-muted);
	}

	.media__label {
		font-size: var(--fs-caption);
		font-weight: 600;
		line-height: var(--lh-caption);
		letter-spacing: var(--tracking-eyebrow);
		text-align: center;
		text-transform: uppercase;
	}

	@media (forced-colors: active) {
		.media.is-placeholder {
			border-color: CanvasText;
		}
	}
}