/* ===========================================================================
   GCS Query Carousel (ported from MantyWeb 2026)
   Turns the post template into a one-row scroll-snap track. Slide counts
   come from --gcs-qc-slides / -tablet / -mobile on the query wrapper.
   Override --gcs-qc-gap per block to change spacing. Arrows match the
   homepage blog carousel: black circles that turn pink on hover.
   =========================================================================== */
.gcs-query-carousel {
	--gcs-qc-gap: 30px;
	--gcs-qc-arrow-size: 60px;
	--gcs-qc-arrow-offset: 16px;
	--gcs-qc-n: var(--gcs-qc-slides, 3);
	position: relative;
}
@media (max-width: 1090px) {
	.gcs-query-carousel { --gcs-qc-n: var(--gcs-qc-slides-tablet, 2); }
}
@media (max-width: 781px) {
	.gcs-query-carousel { --gcs-qc-n: var(--gcs-qc-slides-mobile, 1); --gcs-qc-arrow-size: 44px; }
}
.gcs-query-carousel .wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--gcs-qc-gap) !important;
	grid-template-columns: none !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gcs-query-carousel .wp-block-post-template::-webkit-scrollbar { display: none; }
.gcs-query-carousel .wp-block-post-template:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.gcs-query-carousel .wp-block-post-template > li {
	flex: 0 0 calc((100% - (var(--gcs-qc-n) - 1) * var(--gcs-qc-gap)) / var(--gcs-qc-n));
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	scroll-snap-align: start;
}
.gcs-query-carousel .gcs-qc__viewport { position: relative; margin-block-start: 0; }
.gcs-qc__arrow[hidden],
.gcs-qc__controls[hidden] { display: none !important; }
.gcs-qc__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--gcs-qc-arrow-size, 60px);
	height: var(--gcs-qc-arrow-size, 60px);
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background-color: #000;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: opacity .3s ease, background-color .3s ease, border-color .3s ease;
}
/* Side arrows: just outside the posts, vertically centered on them. */
.is-gcs-qc-arrows-side .gcs-qc__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
}
.is-gcs-qc-arrows-side .gcs-qc__arrow--prev { right: calc(100% + var(--gcs-qc-arrow-offset)); }
.is-gcs-qc-arrows-side .gcs-qc__arrow--next { left: calc(100% + var(--gcs-qc-arrow-offset)); }
/* No room beside the posts: arrows flank the dots instead. */
.gcs-qc__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}
.gcs-qc__arrow svg { display: block; width: 22px; height: 22px; }
.gcs-qc__arrow:hover:not(:disabled) {
	background-color: var(--wp--preset--color--accent-4, #e534ae);
	border-color: var(--wp--preset--color--accent-4, #e534ae);
}
.gcs-qc__arrow:disabled { opacity: .3; cursor: default; }
.gcs-qc__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gcs-qc__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	opacity: .5;
	cursor: pointer;
}
.gcs-qc__dot[aria-current="true"] {
	background: var(--wp--preset--color--accent-4, #e534ae);
	border-color: var(--wp--preset--color--accent-4, #e534ae);
	opacity: 1;
}
.gcs-qc__arrow:focus-visible { outline: 3px solid var(--wp--preset--color--accent-4, #e534ae); outline-offset: 3px; }
.gcs-qc__dot:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Lazy-load plugins (Smush) size unloaded images by their original shape
   with !important. One tall screenshot then stretches every slide, so keep
   the featured image at the shape the block asked for (or 16:9). */
.gcs-query-carousel .wp-block-post-template { align-items: flex-start; }
.gcs-query-carousel .wp-block-post-featured-image {
	align-self: stretch;
	width: 100%;
}
.gcs-query-carousel .wp-block-post-featured-image img {
	width: 100% !important;
	aspect-ratio: var(--gcs-qc-image-ratio, 16 / 9) !important;
	object-fit: cover;
}