/**
 * Ravenna Homes — card grids that measure their own column.
 *
 * See module.php for why this exists and where the 600px comes from.
 * Short version: Avada's Columns field is matched against the viewport, and
 * these grids live in a half-width column, so the viewport is the wrong thing
 * to ask.
 *
 * Contract: put the CSS Class "rh-card-grid" on the Post Cards element.
 */

/**
 * Make the grid a container so its children can be asked about its width.
 *
 * inline-size, not size: the grid's height still comes from its cards, which
 * is what we want — only the width is being used as the question.
 */
.rh-card-grid,
.rh-card-grid-tight {
	container-type: inline-size;
	container-name: rh-cards;
}

/**
 * ONE COLUMN ONCE A CARD WOULD BE UNDER 320px
 *
 * Avada sizes each card from --awb-width-large / -medium / -small depending on
 * which of its viewport media queries is live. Rather than guess which one is
 * in play, set both of the ones that can apply here and the width besides —
 * whichever Avada reaches for, it finds 100%.
 *
 * flex-basis is set too because the grid <ul> is a flex row: without it the
 * card's basis keeps the old percentage and the width never takes effect.
 *
 * Avada's own small breakpoint (640px viewport) still does its job underneath
 * this; by then the container is far below 600 anyway, so the two agree.
 */
@container rh-cards (max-width: 600px) {

	.rh-card-grid .fusion-grid > li.fusion-layout-column {
		--awb-width-large: 100%;
		--awb-width-medium: 100%;
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
	}
}

/**
 * LIGHTER CARDS
 *
 * Same idea, for a grid whose cards are not carrying a five-item spec row.
 * Two columns hold together down to a 460px container — roughly a 240px card.
 */
@container rh-cards (max-width: 460px) {

	.rh-card-grid-tight .fusion-grid > li.fusion-layout-column {
		--awb-width-large: 100%;
		--awb-width-medium: 100%;
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
	}
}