/**
 * TCB Loop Grid.
 *
 * Grid rather than flex-wrap: the cards in a row must share a height, and a loop template can
 * be any height it likes. `minmax(0, 1fr)` rather than `1fr` because a card containing a long
 * unbroken string would otherwise push its track wider than the column.
 *
 * The swipe row is not here — it is the shared `tcb-swipe--tablet` / `--mobile` utility in
 * tcb-global.css, which this widget's items container is listed in. Two implementations of
 * the same row is how one of them drifts.
 */

.tcb-loop-grid__items {
	display: grid;
	grid-template-columns: repeat(var(--tcb-loop-grid-columns, 2), minmax(0, 1fr));
	gap: 24px;
}

/* Elementor's own `.e-loop-item` is the grid child — the widget adds no wrapper of its own,
 * so per-element CSS written against `.e-loop-item` behaves exactly as it does under
 * Elementor's loop grid. min-width:0 stops a long unbroken string widening its track. */
.tcb-loop-grid__items > .e-loop-item {
	min-width: 0;
	height: 100%;
}

/* Held back by the per-breakpoint cap. display:none rather than visibility, so the card takes
 * no grid track and — the part that matters on a phone — its lazy-loaded images never fetch. */
.tcb-loop-grid__items > .e-loop-item.tcb-is-hidden {
	display: none;
}

.tcb-loop-grid__more {
	display: flex;
	justify-content: center;
}

/* No `transition` here on purpose. This stylesheet loads after Elementor's
 * e-animation-*.min.css, so a transition shorthand — even one that only names colours —
 * replaces `transition-property: transform` and the chosen hover animation stops animating:
 * the button still jumps to its hover state, just instantly. The widget has no hover colour
 * controls to transition anyway, so the declaration was decorative and cost the feature. */
.tcb-loop-grid__more-button {
	cursor: pointer;
	font: inherit;
	background: none;
	border: none;
}

.tcb-loop-grid__more-button[disabled] {
	cursor: default;
	opacity: .7;
}