/**
 * Cards — split / centered / bento families + grid vs theme carousel.
 * Companion to app.css; input.css is root-owned on this host.
 * Carousel chrome lives in theme-carousel.css. Forbidden: overflow-x + scroll-snap.
 * Bento is CSS grid only — never Embla.
 */
.tw-cards-split,
.tw-cards-centered,
.tw-cards-bento {
	gap: var(--tw-intro-panel-gap, calc(var(--tw-content-gap, 1rem) * 2));
}

.tw-cards-split {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tw-cards-split,
.tw-cards-split__copy,
.tw-cards-split__panel,
.tw-cards-centered__copy,
.tw-cards-centered__panel,
.tw-cards-carousel,
.tw-cards-panel {
	min-width: 0;
	overflow: visible;
}

.tw-cards-grid {
	display: grid;
	gap: var(--tw-content-gap, 1rem);
	grid-template-columns: repeat(var(--tw-cards-per-row-mobile, 1), minmax(0, 1fr));
}

.tw-cards-grid > [role="listitem"] {
	display: flex;
	min-width: 0;
	height: 100%;
	overflow: visible;
}

.tw-cards-grid > [role="listitem"] > article {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
}

.tw-cards-grid:has([data-tw-fx="reveal"]) {
	align-items: start;
}

.tw-cards-grid:has([data-tw-fx="reveal"]) > [role="listitem"],
.tw-cards-grid:has([data-tw-fx="reveal"]) > [role="listitem"] > article {
	height: auto;
}

.tw-cards-panel.tw-carousel.is-grid .tw-carousel__slide {
	display: flex;
	height: 100%;
	overflow: visible;
}

.tw-cards-panel.tw-carousel.is-grid:has([data-tw-fx="reveal"]) .tw-carousel__slide {
	height: auto;
	align-self: start;
}

@media (max-width: 767.98px) {
	[data-tw-cards-stack="above"] .tw-cards-split__panel {
		order: -1;
	}

	[data-tw-cards-display-mobile="grid"] .tw-carousel:not(.is-carousel) .tw-carousel__container,
	[data-tw-cards-display-mobile="grid"] .tw-carousel.is-grid .tw-carousel__container {
		display: grid;
		gap: var(--tw-content-gap, 1rem);
		grid-template-columns: repeat(var(--tw-cards-per-row-mobile, 1), minmax(0, 1fr));
		margin-inline: 0;
	}

	[data-tw-cards-display-mobile="grid"] .tw-carousel:not(.is-carousel) .tw-carousel__viewport,
	[data-tw-cards-display-mobile="grid"] .tw-carousel.is-grid .tw-carousel__viewport {
		overflow: visible;
		overflow-clip-margin: 0;
		padding-block: 0;
	}

	[data-tw-cards-display-mobile="grid"] .tw-carousel:not(.is-carousel) .tw-carousel__arrows,
	[data-tw-cards-display-mobile="grid"] .tw-carousel:not(.is-carousel) .tw-carousel__pagination,
	[data-tw-cards-display-mobile="grid"] .tw-carousel.is-grid .tw-carousel__arrows,
	[data-tw-cards-display-mobile="grid"] .tw-carousel.is-grid .tw-carousel__pagination {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.tw-cards-grid {
		grid-template-columns: repeat(var(--tw-cards-per-row-tablet, 2), minmax(0, 1fr));
	}

	[data-tw-cards-display-tablet="grid"] .tw-carousel:not(.is-carousel) .tw-carousel__container,
	[data-tw-cards-display-tablet="grid"] .tw-carousel.is-grid .tw-carousel__container {
		display: grid;
		gap: var(--tw-content-gap, 1rem);
		grid-template-columns: repeat(var(--tw-cards-per-row-tablet, 2), minmax(0, 1fr));
		margin-inline: 0;
	}

	[data-tw-cards-display-tablet="grid"] .tw-carousel:not(.is-carousel) .tw-carousel__viewport,
	[data-tw-cards-display-tablet="grid"] .tw-carousel.is-grid .tw-carousel__viewport {
		overflow: visible;
		overflow-clip-margin: 0;
		padding-block: 0;
	}

	[data-tw-cards-display-tablet="grid"] .tw-carousel:not(.is-carousel) .tw-carousel__arrows,
	[data-tw-cards-display-tablet="grid"] .tw-carousel:not(.is-carousel) .tw-carousel__pagination,
	[data-tw-cards-display-tablet="grid"] .tw-carousel.is-grid .tw-carousel__arrows,
	[data-tw-cards-display-tablet="grid"] .tw-carousel.is-grid .tw-carousel__pagination {
		display: none;
	}
}

@media (min-width: 1024px) {
	.tw-cards-split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		overflow: visible;
	}

	.tw-cards-split[data-tw-cards-split-ratio="60_40"] {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.tw-cards-split[data-tw-cards-split-ratio="75_25"] {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	}

	.tw-cards-split[data-tw-cards-panel-side="start"][data-tw-cards-split-ratio="60_40"] {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.tw-cards-split[data-tw-cards-panel-side="start"][data-tw-cards-split-ratio="75_25"] {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	}

	.tw-cards-split[data-tw-cards-panel-side="start"] .tw-cards-split__panel {
		order: -1;
	}

	.tw-cards-grid {
		grid-template-columns: repeat(var(--tw-cards-per-row-desktop, 3), minmax(0, 1fr));
	}

	[data-tw-cards-display-desktop="grid"] .tw-carousel:not(.is-carousel) .tw-carousel__container,
	[data-tw-cards-display-desktop="grid"] .tw-carousel.is-grid .tw-carousel__container {
		display: grid;
		gap: var(--tw-content-gap, 1rem);
		grid-template-columns: repeat(var(--tw-cards-per-row-desktop, 3), minmax(0, 1fr));
		margin-inline: 0;
	}

	[data-tw-cards-display-desktop="grid"] .tw-carousel:not(.is-carousel) .tw-carousel__viewport,
	[data-tw-cards-display-desktop="grid"] .tw-carousel.is-grid .tw-carousel__viewport {
		overflow: visible;
		overflow-clip-margin: 0;
		padding-block: 0;
	}

	[data-tw-cards-display-desktop="grid"] .tw-carousel:not(.is-carousel) .tw-carousel__arrows,
	[data-tw-cards-display-desktop="grid"] .tw-carousel:not(.is-carousel) .tw-carousel__pagination,
	[data-tw-cards-display-desktop="grid"] .tw-carousel.is-grid .tw-carousel__arrows,
	[data-tw-cards-display-desktop="grid"] .tw-carousel.is-grid .tw-carousel__pagination {
		display: none;
	}

	.tw-cards-split:not(:has(.tw-section-intro)),
	.tw-cards-split[data-tw-has-intro="0"] {
		display: block;
		grid-template-columns: none;
	}
}

/* Bento mosaic — intro above (gap-intro-panel). Logical spans so RTL mirrors. */
.tw-cards-bento,
.tw-cards-bento__copy,
.tw-cards-bento__panel {
	min-width: 0;
	width: 100%;
	overflow: visible;
}

.tw-cards-bento-grid {
	display: grid;
	gap: var(--tw-content-gap, 1rem);
	grid-template-columns: minmax(0, 1fr);
}

.tw-cards-bento-grid [role="listitem"] {
	display: flex;
	min-width: 0;
	overflow: visible;
}

.tw-cards-bento-grid [role="listitem"] > article {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
}

.tw-cards-bento-grid:has([data-tw-fx="reveal"]) {
	align-items: start;
}

.tw-cards-bento-grid:has([data-tw-fx="reveal"]) [role="listitem"] > article {
	height: auto;
}

@media (min-width: 768px) {
	.tw-cards-bento-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	[data-tw-cards-bento="spotlight"] .tw-cards-bento-grid > [role="listitem"]:first-child,
	[data-tw-cards-bento="banner"] .tw-cards-bento-grid > [role="listitem"]:first-child {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	[data-tw-cards-bento="spotlight"] .tw-cards-bento-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: minmax(11rem, auto);
	}

	[data-tw-cards-bento="spotlight"] .tw-cards-bento-grid > [role="listitem"]:first-child {
		grid-column: span 2;
		grid-row: span 2;
		min-height: 22rem;
	}

	[data-tw-cards-bento="banner"] .tw-cards-bento-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: minmax(10rem, auto);
	}

	[data-tw-cards-bento="banner"] .tw-cards-bento-grid > [role="listitem"]:first-child {
		grid-column: 1 / -1;
		min-height: 12rem;
	}

	[data-tw-cards-bento="stagger"] .tw-cards-bento-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: minmax(11rem, auto);
	}

	[data-tw-cards-bento="stagger"] .tw-cards-bento-grid > [role="listitem"]:nth-child(4n + 1),
	[data-tw-cards-bento="stagger"] .tw-cards-bento-grid > [role="listitem"]:nth-child(4n + 4) {
		grid-column: span 2;
	}
}