/**
 * GoldLife Post Carousel — layout for frontend and editor.
 *
 * Full-bleed breakout carousel:
 * - The track breaks out of the content column and spans the full viewport
 *   width (negative inline margins of "bleed" = (100vw − content width) / 2).
 * - Inline padding of one bleed puts the first card back on the content's
 *   left edge, and scroll-padding makes every snap position align cards to
 *   that same edge.
 * - On load the cards run past the content's right edge to the far right of
 *   the browser window; after sliding, passed cards remain visible in the
 *   left bleed, flowing out the far left of the window.
 *
 * The wrapper (.glpc-post-carousel) receives three custom properties from
 * PHP (frontend) or the editor script (canvas):
 *   --glpc-basis-d  card width for desktop (> 1024px)
 *   --glpc-basis-t  card width for tablet  (600-1024px)
 *   --glpc-basis-m  card width for mobile  (< 600px)
 *
 * Cards are sized so that exactly N full columns plus a fixed fraction of
 * the next card (½ desktop, ⅓ tablet, ¼ mobile) fill the strip from the
 * content's left edge to the viewport's right edge:
 *   card = (100% − N gaps) / (N + fraction)
 * The track has start padding (bleed) but no end padding, so its content
 * box — which percentages resolve against — is exactly that strip. Card
 * size therefore scales with the viewport and the cut card always lands
 * on the browser edge.
 */

.glpc-post-carousel {
	--glpc-gap: var(--wp--style--block-gap, 1.5rem);
	--glpc-basis: var(--glpc-basis-d, calc((100% - 3 * var(--glpc-gap)) / 3.5));
	--glpc-bleed: max(0px, calc(50vw - 50%));
	position: relative;
	/* Makes cqw units available so scroll-padding can compute the bleed:
	   percentages inside scroll-padding resolve against the scrollport,
	   not the parent, so the --glpc-bleed expression is wrong there. */
	container-type: inline-size;
}

.glpc-post-carousel .wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--glpc-gap) !important;
	margin: 0;
	margin-inline: calc(-1 * var(--glpc-bleed)) !important;
	padding: 0;
	padding-inline: var(--glpc-bleed) 0 !important;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: max(0px, calc(50vw - 50cqw));
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
}

.glpc-post-carousel .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

.glpc-post-carousel .wp-block-post-template > li,
.glpc-post-carousel .wp-block-post-template > .wp-block-post {
	flex: 0 0 var(--glpc-basis) !important;
	width: auto !important;
	min-width: 0;
	/* Core flow layout adds margin-block-start to every sibling after the
	   first ("> * + *" block gap), which misaligns cards vertically in a
	   horizontal flex row. The flex gap handles spacing instead. */
	margin-block: 0 !important;
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.glpc-post-carousel {
		--glpc-basis: var(--glpc-basis-t, calc((100% - 2 * var(--glpc-gap)) / 2.3333));
	}
}

@media (max-width: 599px) {
	.glpc-post-carousel {
		--glpc-basis: var(--glpc-basis-m, calc((100% - 1 * var(--glpc-gap)) / 1.25));
	}
}

/* Arrows (injected by carousel.js on the frontend). */

.glpc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: #1e1e1e;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.glpc-arrow:hover {
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}

.glpc-arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

.glpc-arrow--prev {
	left: 0.5rem;
}

.glpc-arrow--next {
	right: 0.5rem;
}

.glpc-arrow svg {
	width: 22px;
	height: 22px;
	display: block;
}