/* ─── Allsups Gallery Connector — Slider Styles ─────────────────────────────
   Continuous per-square carousel: N squares visible at once, advances one
   square at a time (never a partial/empty page), seamless infinite loop via
   cloned lead/trail cells. Same vanilla-JS approach as davis-responsive-slider.
   Classes are prefixed agcslider- so this can run alongside that plugin
   without any CSS collisions.                                              */

/* ── Outer constraint ────────────────────────────────────────────────────
   Caps the whole slider at 1200px and centers it, per the design spec.    */

.allsupsgc-slider-outer {
	max-width: 1200px;
	margin: 1.5rem auto;
	position: relative;
}

/* ── Wrapper (reserves the button gutter, not the clip boundary) ─────────
   Padding reserves a gutter on each side for the prev/next buttons so they
   never overlap a square; box-sizing keeps the viewport's content box (and
   so the percentage math for each cell's width) inside that reserved space.
   overflow is NOT set here — see .agcslider-viewport below. If it were,
   overflow:hidden clips at the padding edge (not the content edge), which
   would let neighboring squares' edges bleed into the button gutter.      */

.agcslider-wrap {
	position: relative;
	width: 100%;
	outline: none;
	padding: 0 3.5rem;
	box-sizing: border-box;
}

/* ── Viewport (the visible window) ────────────────────────────────────────
   Zero padding of its own, so overflow: hidden clips exactly at the visible
   square edge — nothing from adjacent squares can peek into the gutter.   */

.agcslider-viewport {
	overflow: hidden;
	width: 100%;
}

/* ── Track (holds every square, plus clones, in one row) ─────────────────
   display: flex + gap lays the squares out with even spacing; JS measures
   the real rendered gap/width in pixels, so it stays correct at any
   breakpoint without the JS needing to know the CSS values.               */

.agcslider-track {
	display: flex;
	gap: 1.25rem;
	will-change: transform;
}

/* ── Individual cell = one square ─────────────────────────────────────────
   --allsupsgc-visible (set per-instance, see inline <style> in the
   shortcode output) is how many squares should be visible at once.        */

.agcslider-cell {
	flex: 0 0 calc((100% - (var(--allsupsgc-visible, 3) - 1) * 1.25rem) / var(--allsupsgc-visible, 3));
	min-width: 0;
	position: relative;
	margin: 0;
}

.agcslider-cell a {
	display: block;
	text-decoration: none;
}

.agcslider-cell img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	user-select: none;
}

.agcslider-cell figcaption {
	margin-top: 0.35rem;
	font-size: 0.85em;
	text-align: center;
	color: #555;
}

/* ── Static (non-slider) row — used when there are too few squares to
   scroll. Same flex + var(--allsupsgc-visible) sizing, no wrap/overflow.   */

.allsupsgc-static-row {
	display: flex;
	gap: 1.25rem;
}

/* ── Prev / Next arrows ───────────────────────────────────────────────────
   Absolutely positioned inside .agcslider-wrap (position: relative). Offsets
   are relative to the padding edge, i.e. they sit inside the gutter.      */

.agcslider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: rgba(0, 0, 0, 0.35);
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.15s ease;
	color: #ffffff;
}

.agcslider-btn:hover {
	background: rgba(0, 0, 0, 0.55);
	transform: translateY(-50%) scale(1.05);
}

.agcslider-btn:focus-visible {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

.agcslider-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.agcslider-btn--prev { left: 0; }
.agcslider-btn--next { right: 0; }

.agcslider-btn svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── Page dots ─────────────────────────────────────────────────────────── */

.agcslider-dots {
	position: static;
	margin-top: 1rem;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	z-index: 10;
}

.agcslider-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: rgba(255, 255, 255, 0.6);
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
}

.agcslider-dot.is-active {
	background: #333;
	transform: scale(1.2);
}

.agcslider-dot:focus-visible {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

/* ── Responsive: reserve a smaller button gutter on small screens ───────── */

@media (max-width: 782px) {
	.agcslider-wrap {
		padding: 0 3rem;
	}
}

@media (max-width: 480px) {
	.agcslider-wrap {
		padding: 0 2.5rem;
	}
	.agcslider-btn {
		width: 32px;
		height: 32px;
	}
}

/* ── Reduce motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.agcslider-track,
	.agcslider-cell,
	.agcslider-btn,
	.agcslider-dot {
		transition: none !important;
		animation: none !important;
	}
}