/**
 * LA Course Commerce — loop grid styling.
 *
 * Minimal layout only; colors/fonts come from the theme + the chosen
 * saved template.
 */

.lacc-loop-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

.lacc-loop-grid__item {
	min-width: 0;
}

/* Equal-height cards: the template wrapper and the card container fill the
 * grid cell, and the card becomes a column so the action row can be pinned
 * to the bottom. */
.lacc-loop-grid__item > .elementor {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.lacc-loop-grid__item > .elementor > .e-con {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.lacc-loop-grid__item > .elementor > .e-con > .elementor-widget {
	flex-shrink: 0;
}

.lacc-loop-grid__item > .elementor > .e-con > .e-con:last-child {
	margin-top: auto;
	flex-shrink: 0;
}

/* Fixed image area: every card shows the same-height image, which is the
 * main variable across cards, so all rows come out the same height. */
.lacc-loop-grid__item .elementor-widget-image {
	flex-shrink: 0;
}

.lacc-loop-grid__item .elementor-widget-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}