/* Cora Responsive Layouts — front end.
 * Per-breakpoint layout for .cora-rl blocks (core/group, core/columns).
 * Non-overlapping ranges: mobile <=480, tablet 481-781.98, desktop >=782.
 * !important is needed to beat WP's generated .wp-container-* grid/flex rules. */

/* ---------- STACK ---------- */
.cora-rl-stack-base,
.cora-rl[class*="-stack"] { /* placeholder to keep specificity notes; real rules below */ }

@media (max-width: 480px) {
	.cora-rl-m-stack {
		display: flex !important;
		flex-direction: column !important;
		grid-template-columns: none !important;
	}
	.cora-rl-m-stack > * {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
	}
	.cora-rl-m-hscroll {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		grid-template-columns: none !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}
	.cora-rl-m-hscroll > * {
		flex: 0 0 auto !important;
		max-width: 85%;
		scroll-snap-align: start;
	}
}

@media (min-width: 481px) and (max-width: 781.98px) {
	.cora-rl-t-stack {
		display: flex !important;
		flex-direction: column !important;
		grid-template-columns: none !important;
	}
	.cora-rl-t-stack > * {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
	}
	.cora-rl-t-hscroll {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		grid-template-columns: none !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}
	.cora-rl-t-hscroll > * {
		flex: 0 0 auto !important;
		max-width: 60%;
		scroll-snap-align: start;
	}
}

@media (min-width: 782px) {
	.cora-rl-d-stack {
		display: flex !important;
		flex-direction: column !important;
		grid-template-columns: none !important;
	}
	.cora-rl-d-stack > * {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
	}
	.cora-rl-d-hscroll {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		grid-template-columns: none !important;
		overflow-x: auto !important;
		scroll-snap-type: x proximity;
	}
	.cora-rl-d-hscroll > * {
		flex: 0 0 auto !important;
		max-width: 33%;
		scroll-snap-align: start;
	}
}

/* ---------- SWIPER-element overrides for NON-swiper breakpoints ----------
 * A block that uses a Swiper mode at ANY breakpoint is swiper-structured at all
 * widths (cora-swiper inits it once, always-on). At breakpoints where the editor
 * chose Default / Stack / Horizontal scroll, we neutralize Swiper's inline
 * transform + slide widths (our !important beats Swiper's non-important inline
 * styles) and show ALL items — instead of Swiper's 1-up slider.
 *   Default → responsive auto-grid    Stack → column    Hscroll → scroll row
 * Each rule is breakpoint-scoped, so genuine swiper breakpoints are untouched. */

/* Shared neutralizer: kill the wrapper transform + un-clip the viewport so
 * neighbouring slides aren't hidden. (Hscroll keeps horizontal clipping.) */
.cora-rl-swiper.cora-rl-m-default .swiper-wrapper,
.cora-rl-swiper.cora-rl-m-stack .swiper-wrapper,
.cora-rl-swiper.cora-rl-m-hscroll .swiper-wrapper,
.cora-rl-swiper.cora-rl-t-default .swiper-wrapper,
.cora-rl-swiper.cora-rl-t-stack .swiper-wrapper,
.cora-rl-swiper.cora-rl-t-hscroll .swiper-wrapper,
.cora-rl-swiper.cora-rl-d-default .swiper-wrapper,
.cora-rl-swiper.cora-rl-d-stack .swiper-wrapper,
.cora-rl-swiper.cora-rl-d-hscroll .swiper-wrapper {
	transform: none !important;
}

/* helper mixin via repetition per breakpoint */
@media (max-width: 480px) {
	.cora-rl-swiper.cora-rl-m-default .swiper,
	.cora-rl-swiper.cora-rl-m-stack .swiper { overflow: visible !important; }
	.cora-rl-swiper.cora-rl-m-hscroll .swiper { overflow-x: auto !important; overflow-y: visible !important; }

	.cora-rl-swiper.cora-rl-m-default .swiper-wrapper {
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
		gap: 1rem;
	}
	.cora-rl-swiper.cora-rl-m-default .swiper-slide { width: auto !important; }

	.cora-rl-swiper.cora-rl-m-stack .swiper-wrapper { display: flex !important; flex-direction: column !important; gap: 1rem; }
	.cora-rl-swiper.cora-rl-m-stack .swiper-slide { width: 100% !important; }

	.cora-rl-swiper.cora-rl-m-hscroll .swiper-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 1rem; }
	.cora-rl-swiper.cora-rl-m-hscroll .swiper-slide { width: auto !important; flex: 0 0 auto !important; max-width: 85%; }
}
@media (min-width: 481px) and (max-width: 781.98px) {
	.cora-rl-swiper.cora-rl-t-default .swiper,
	.cora-rl-swiper.cora-rl-t-stack .swiper { overflow: visible !important; }
	.cora-rl-swiper.cora-rl-t-hscroll .swiper { overflow-x: auto !important; overflow-y: visible !important; }

	.cora-rl-swiper.cora-rl-t-default .swiper-wrapper {
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
		gap: 1rem;
	}
	.cora-rl-swiper.cora-rl-t-default .swiper-slide { width: auto !important; }

	.cora-rl-swiper.cora-rl-t-stack .swiper-wrapper { display: flex !important; flex-direction: column !important; gap: 1rem; }
	.cora-rl-swiper.cora-rl-t-stack .swiper-slide { width: 100% !important; }

	.cora-rl-swiper.cora-rl-t-hscroll .swiper-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 1rem; }
	.cora-rl-swiper.cora-rl-t-hscroll .swiper-slide { width: auto !important; flex: 0 0 auto !important; max-width: 60%; }
}
@media (min-width: 782px) {
	.cora-rl-swiper.cora-rl-d-default .swiper,
	.cora-rl-swiper.cora-rl-d-stack .swiper { overflow: visible !important; }
	.cora-rl-swiper.cora-rl-d-hscroll .swiper { overflow-x: auto !important; overflow-y: visible !important; }

	.cora-rl-swiper.cora-rl-d-default .swiper-wrapper {
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
		gap: 1rem;
	}
	.cora-rl-swiper.cora-rl-d-default .swiper-slide { width: auto !important; }

	.cora-rl-swiper.cora-rl-d-stack .swiper-wrapper { display: flex !important; flex-direction: column !important; gap: 1rem; }
	.cora-rl-swiper.cora-rl-d-stack .swiper-slide { width: 100% !important; }

	.cora-rl-swiper.cora-rl-d-hscroll .swiper-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 1rem; }
	.cora-rl-swiper.cora-rl-d-hscroll .swiper-slide { width: auto !important; flex: 0 0 auto !important; max-width: 33%; }
}

/* Pagination spacing for our swiper blocks. */
.cora-rl-swiper .swiper-pagination {
	position: relative;
	margin-top: 1rem;
}