.infographic-collection {
	position: relative;
}

.infographic-collection-empty {
	margin: 0;
	padding: 24px 0;
	text-align: center;
}

.infographic-collection-header {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: space-between;
	margin-bottom: 16px;
}

.infographic-collection-heading {
	font-size: 20px;
	line-height: 1.4;
	margin: 0;
}

.infographic-collection-view-all {
	color: inherit;
	text-decoration: underline;
	white-space: nowrap;
}

.infographic-collection-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.infographic-collection-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 24px;
}

/* The slides keep the same edges as every other section on the page, so the
   track owns the full width and the arrows hang outside it. The arrows share
   the track's grid cell and negative margins carry them past its edges; the
   arrow wrapper steps out of the way so they can. */
.infographic-collection-carousel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.infographic-collection-carousel .splide__arrows {
	display: contents;
}

.infographic-collection-carousel .splide__track {
	grid-column: 1;
	grid-row: 1;
}

/* Phones have no room beside the track, and swiping already covers this, so the
   arrows only appear once there is space outside the frame for them. */
.infographic-collection-carousel .splide__arrow {
	display: none;
}

/* Splide flips the prev arrow with scaleX(-1) because it expects both arrows to
   ship the same right-pointing glyph. Ours already point the right way, so undo
   it — same override as the Quick Access carousel. */
.infographic-collection-carousel .splide__arrow svg {
	height: 16px;
	transform: scaleX(1);
	width: auto;
}

.infographic-collection-carousel .splide__arrow:focus-visible,
.infographic-collection-carousel .splide__arrow:hover:not([disabled]) {
	background: var(--wp--preset--color--primary-900, #123b5c);
	border-color: var(--wp--preset--color--primary-900, #123b5c);
	color: #fff;
}

.infographic-collection-carousel .splide__arrow[disabled] {
	opacity: 0.35;
}

.infographic-collection-carousel .splide__pagination {
	bottom: auto;
	display: flex;
	gap: 8px;
	grid-column: 1 / -1;
	grid-row: 2;
	justify-content: center;
	left: auto;
	margin: 16px 0 0;
	padding: 0;
	position: static;
	right: auto;
}

.infographic-collection-carousel .splide__pagination__page {
	background: var(--wp--preset--color--primary-300, #c6d2de);
	border-radius: 50%;
	height: 10px;
	margin: 0;
	opacity: 1;
	transition: background-color 0.25s ease, transform 0.25s ease;
	width: 10px;
}

.infographic-collection-carousel .splide__pagination__page.is-active {
	background: var(--wp--preset--color--primary-900, #123b5c);
	transform: scale(1.2);
}

@media (min-width: 768px) {

	/* -58px is the 44px button plus the 14px gap that separates it from the
	   track. The page gutter never drops below 96px, so the arrows always have
	   room out there and never push the page sideways. */
	.infographic-collection-carousel .splide__arrow {
		align-items: center;
		align-self: center;
		background: #fff;
		border: 1.5px solid var(--wp--preset--color--primary-300, #d9e2ec);
		border-radius: 50%;
		color: var(--wp--preset--color--primary-900, #123b5c);
		cursor: pointer;
		display: flex;
		grid-column: 1;
		grid-row: 1;
		height: 44px;
		justify-content: center;
		opacity: 1;
		padding: 0;
		position: static;
		transform: none;
		transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
		width: 44px;
	}

	.infographic-collection-carousel .splide__arrow--prev {
		justify-self: start;
		margin-left: -58px;
	}

	.infographic-collection-carousel .splide__arrow--next {
		justify-self: end;
		margin-right: -58px;
	}

	.infographic-collection-carousel .splide__arrow svg {
		height: 20px;
	}
}

/* The card's own gap only separates the link from the meta row, because the
   image and the title both live inside the link. Spacing them is the link's
   job, and it uses a gap rather than a heading margin — the theme resets
   heading margins, which silently flattened this to nothing. */
.infographic-collection-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.infographic-collection-card-link {
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-decoration: none;
}

.infographic-collection-card-thumbnail {
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
}

.infographic-collection-card-image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.infographic-collection-card-title {
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

.infographic-collection-card .entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

@media (min-width: 768px) {

	.infographic-collection-card-title {
		font-size: 18px;
	}

	.infographic-collection-heading {
		font-size: 24px;
	}

	.infographic-collection-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {

	.infographic-collection-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}