/*
 * _cards.css
 *
 * Canonical 16:9 card-image primitive (LYC-552 / REQ-8 / Pass-3 Phase 3 Wave 0).
 *
 * Enforces a 16:9 aspect ratio on any `.card-image` container and normalizes
 * the `img` / `picture > img` child to `object-fit: cover`. This decouples
 * the DOM aspect ratio from the underlying WordPress intermediate size, so
 * legacy uploads that have not yet been regenerated still render in-frame
 * without letterboxing or layout shift. The `.card-image--hero` variant is
 * the explicit primitive reused by the featured-five hero card rendered in
 * LYC-551.
 */

/*
 * The `--card-aspect-ratio` custom property is the extension point for
 * per-section card-shape variants (LYC-577). Registry B entries MAY set
 * `card_aspect_ratio` to override the 16/9 default per section without a
 * code change. When the property is not set, the 16/9 default applies.
 */
.card-image {
    aspect-ratio: var(--card-aspect-ratio, 16 / 9);
    overflow: hidden;
    background: var(--color-satin-linen);
}

.card-image img,
.card-image picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-image .placeholder-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-image--hero {
    aspect-ratio: var(--card-aspect-ratio, 16 / 9);
}