/**
 * Provides generic layout-only styles for the bundled Grid.
 *
 * Project scope: ModusWorks Contextual Featured Content.
 * Dependencies: Enqueued by LayoutRegistry only after Grid output exists;
 * paired with layout.json and layout.php.
 * Writes: Generic plugin presentation only; no RFM or theme selectors.
 *
 * Change record:
 * - 2026-10-15: Added the structural card-media positioning context used by
 *   image-bound badges and taxonomy labels.
 * - 2026-09-29: Added Grid, responsive-column, gap, and image-ratio styles.
 * - 2026-09-30: Added generic navigation and loading-state presentation.
 */

/* BEGIN Contextual Featured Content Grid presentation (2026-09-29). */
.mw-cfc-grid {
	display: grid;
	grid-template-columns: repeat(var(--mw-cfc-desktop), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.mw-cfc-gap-small .mw-cfc-grid { gap: 0.75rem; }
.mw-cfc-gap-medium .mw-cfc-grid { gap: 1.5rem; }
.mw-cfc-gap-large .mw-cfc-grid { gap: 2.25rem; }

.mw-cfc-card__media {
	position: relative;
}

.mw-cfc-card__image {
	margin: 0;
	overflow: hidden;
}

.mw-cfc-card__image img {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.mw-cfc-ratio-16-9 .mw-cfc-card__image { aspect-ratio: 16 / 9; }
.mw-cfc-ratio-21-9 .mw-cfc-card__image { aspect-ratio: 21 / 9; }
.mw-cfc-ratio-4-3 .mw-cfc-card__image { aspect-ratio: 4 / 3; }
.mw-cfc-ratio-3-2 .mw-cfc-card__image { aspect-ratio: 3 / 2; }
.mw-cfc-ratio-1-1 .mw-cfc-card__image { aspect-ratio: 1 / 1; }
.mw-cfc-ratio-3-4 .mw-cfc-card__image { aspect-ratio: 3 / 4; }

.mw-cfc-widget:not(.mw-cfc-ratio-original) .mw-cfc-card__image img {
	height: 100%;
	object-fit: cover;
}

.mw-cfc-widget[aria-busy="true"] .mw-cfc-load-more {
	opacity: 0.65;
	pointer-events: none;
}

.mw-cfc-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.mw-cfc-pagination [aria-current="page"] {
	font-weight: 700;
}

@media (max-width: 1024px) {
	.mw-cfc-grid {
		grid-template-columns: repeat(var(--mw-cfc-tablet), minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.mw-cfc-grid {
		grid-template-columns: repeat(var(--mw-cfc-mobile), minmax(0, 1fr));
	}
}
/* END Contextual Featured Content Grid presentation (2026-09-29). */