.gboneai-posts-grid {
	display: grid;
	grid-template-columns: repeat(var(--gboneai-posts-grid-columns, 4), minmax(0, 1fr));
	/* Overridable, because the gap is a design decision per project and the
	   clamp resolves to 32 at 1920 where this site is drawn with 40. */
	gap: var(--gboneai-posts-grid-gap, clamp(1rem, 2vw, 2rem));
	width: 100%;
	max-width: 100%;
}

.gboneai-posts-grid .post-item,
.gboneai-posts-grid .post-item-inner,
.gboneai-posts-grid .post-item-content {
	min-width: 0;
}

.gboneai-posts-grid .post-item-figure {
	margin: 0;
	overflow: hidden;
}

.gboneai-posts-grid .post-item-image {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1023px) {
	.gboneai-posts-grid {
		grid-template-columns: repeat(var(--gboneai-posts-grid-tablet-columns, 2), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.gboneai-posts-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------- carousel -- */

/*
 * The carousel is this grid on a scroll-snap track. No library: with no
 * JavaScript it is still a scrollable row, and with no CSS it is still the grid.
 */

.gboneai-posts-carousel {
	position: relative;
}

.gboneai-posts-grid.is-carousel {
	grid-auto-flow: column;
	grid-template-columns: none;

	/* One track per visible column, so three across a 1400 band with 40px gaps
	   comes to the drawn 440 and the fourth card waits off the edge. */
	grid-auto-columns: calc(
		(100% - (var(--gboneai-posts-grid-columns, 3) - 1) * var(--gboneai-posts-grid-gap, 2rem))
		/ var(--gboneai-posts-grid-columns, 3)
	);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-inline: contain;
}

.gboneai-posts-grid.is-carousel::-webkit-scrollbar {
	display: none;
}

.gboneai-posts-grid.is-carousel > .post-item {
	scroll-snap-align: start;
}

/*
 * The column formula above divides by the desktop count at every width - the
 * inline --gboneai-posts-grid-columns cannot be overridden from a stylesheet,
 * so the breakpoints restate the formula rather than the variable. The
 * tablet count is the block's own, which posts-grid.php caps at two for a
 * carousel so the `sizes` attribute asks for the width that is drawn. Without
 * them a three-across carousel drew 93px cards at 390 and a five-across one
 * 60px, with one letter to a line, and no probe caught it because the track
 * scrolls sideways instead of overflowing the page (02/09).
 */
@media (max-width: 1023px) {
	.gboneai-posts-grid.is-carousel {
		grid-auto-columns: calc(
			(100% - (var(--gboneai-posts-grid-tablet-columns, 2) - 1) * var(--gboneai-posts-grid-gap, 2rem))
			/ var(--gboneai-posts-grid-tablet-columns, 2)
		);
	}
}

@media (max-width: 767px) {
	.gboneai-posts-grid.is-carousel {
		grid-auto-columns: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gboneai-posts-grid.is-carousel {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------------- controls -- */

/*
 * Sat above the track and pulled up onto the heading's row, which is where the
 * drawing puts them (242:2757, at the band's left edge on the heading's line).
 * Absolute so they take no vertical space - the drawn gap between the heading
 * and the cards is 41px, and the buttons are 55 tall.
 */
.gboneai-posts-carousel__controls {
	position: absolute;
	inset-block-end: calc(100% + 40px);
	inset-inline-end: 0;
	display: flex;
	gap: 15px;
}

.gboneai-posts-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 55px;
	block-size: 55px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--gboneai-color-dark, #1b2b50);
	color: var(--wp--preset--color--white, #fff);
	cursor: pointer;
	transition: opacity var(--gboneai-duration, 280ms) var(--gboneai-ease, ease-out);
}

.gboneai-posts-carousel__arrow svg {
	inline-size: 18px;
	block-size: 18px;
}

/* The glyph points along the writing direction; the other one is its mirror. */
.gboneai-posts-carousel__arrow.is-next svg {
	scale: -1 1;
}

.gboneai-posts-carousel__arrow:hover {
	opacity: 0.85;
}

.gboneai-posts-carousel__arrow:focus-visible {
	outline: var(--gboneai-focus, 3px solid #fcac0b);
	outline-offset: 2px;
}

/* Set by view.js when the track cannot move any further that way. */
.gboneai-posts-carousel__arrow[disabled] {
	cursor: default;
	opacity: 0.35;
}