/**
 * Scroll overflow – Variablen
 */
.is-style-scroller {
	--thumb-color: var(--wp--preset--color--color-23);
	--track-color: var(--wp--preset--color--color-53);
	--track-height: 8px;
	--track-radius: 4px;
}

.has-scoller-color-pink {
	--thumb-color: var(--wp--preset--color--color-11);
	--track-color: var(--wp--preset--color--color-53);
}


/**
 * =========================
 * QUERY LOOP – SCROLLER
 * =========================
 */

/* Wrapper DARF auf iOS nicht horizontal überlaufen */
.wp-block-query.is-style-scroller .query-pages-wrapper {
	padding: var(--gutter, 1em) var(--gutter, 1em) var(--gutter, 1em) 0;
	height: auto !important;

	/* iOS Fix */
	overflow-x: hidden;
	overflow-y: visible;
}

/* Der echte Scroll-Container */
.wp-block-query.is-style-scroller .results_wrapper {
	display: flex;
	flex-wrap: nowrap;

	overflow-x: auto;
	overflow-y: hidden;

	-webkit-overflow-scrolling: touch;
	touch-action: pan-x;
}

/* Query Items dürfen nicht schrumpfen (Safari!) */
.wp-block-query.is-style-scroller article {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
}

/* Greyd Content */
.wp-block-query.is-style-scroller article > .dynamic,
.wp-block-query.is-style-scroller article > .greyd-content-box {
	display: flex;
	flex-grow: 1;
}

/* Moderne Browser: präzise :has()-Logik */
.wp-block-query.is-style-scroller article > .dynamic:has(> .greyd-content-box:first-child:last-child),
.wp-block-query.is-style-scroller article > .dynamic > .greyd-content-box {
	display: flex;
	flex-grow: 1;
}

/* Fallback für ältere iOS-Versionen ohne :has() */
@supports not selector(:has(*)) {
	.wp-block-query.is-style-scroller article > .dynamic,
	.wp-block-query.is-style-scroller article > .greyd-content-box {
		display: flex;
		flex-grow: 1;
	}
}

/* Grid-basierte Query-Ausgaben */
.wp-block-query.is-style-scroller .greyd-posts-slider .query-page,
.wp-block-query.is-style-scroller .greyd-posts-slider .query-page > ul {
	grid-auto-flow: column;
}


/**
 * =========================
 * COLUMNS – SCROLLER
 * =========================
 */

.wp-block-columns.is-style-scroller {
	flex-wrap: nowrap !important;

	overflow-x: auto;
	overflow-y: hidden;

	padding-bottom: calc(var(--gutter, 1em) * 2) !important;

	-webkit-overflow-scrolling: touch;
	touch-action: pan-x;
}

.wp-block-columns.is-style-scroller > .wp-block-column,
.wp-block-columns.is-style-scroller > .wp-block-column > .dynamic,
.wp-block-columns.is-style-scroller > .wp-block-column > .greyd-content-box {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
}


/**
 * =========================
 * SCROLLBAR STYLING
 * =========================
 */

/* WebKit (Safari, Chrome iOS) */
.wp-block-query.is-style-scroller .results_wrapper::-webkit-scrollbar,
.wp-block-columns.is-style-scroller::-webkit-scrollbar {
	height: var(--track-height);
}

.wp-block-query.is-style-scroller .results_wrapper::-webkit-scrollbar-track,
.wp-block-columns.is-style-scroller::-webkit-scrollbar-track {
	background-color: var(--track-color);
	border-radius: var(--track-radius);
}

.wp-block-query.is-style-scroller .results_wrapper::-webkit-scrollbar-thumb,
.wp-block-columns.is-style-scroller::-webkit-scrollbar-thumb {
	background-color: var(--thumb-color);
	border-radius: var(--track-radius);
}

.wp-block-query.is-style-scroller .results_wrapper::-webkit-scrollbar-thumb:hover,
.wp-block-columns.is-style-scroller::-webkit-scrollbar-thumb:hover {
	background-color: lightgray;
}


/* Firefox */
.wp-block-query.is-style-scroller .results_wrapper,
.wp-block-columns.is-style-scroller {
	scrollbar-width: thin;
	scrollbar-color: var(--thumb-color) var(--track-color);
}


/* Edge / IE (legacy) */
.wp-block-query.is-style-scroller .results_wrapper,
.wp-block-columns.is-style-scroller {
	-ms-overflow-style: -ms-autohiding-scrollbar;
}