/*
 * RahkarTheme — rahkar/image-slider (frontend)
 *
 * Loaded only on pages containing this block (block.json `style`).
 *
 * Architecture:
 *   - `.rahkar-slider--slide`  → CSS scroll-snap horizontal slider.
 *                                Touch swipe / smooth scroll free from browser.
 *   - `.rahkar-slider--fade`   → absolutely-positioned slides + opacity
 *                                transition. Driven by JS adding/removing
 *                                an `is-active` class.
 *   - Slides shown per view:  `--rahkar-slider-cols`     (desktop)
 *                             `--rahkar-slider-cols-mob` (≤768px)
 *   - Gap between slides:     `--rahkar-slider-gap`
 *   - Height:                 `--rahkar-slider-h`
 *
 * All custom properties are set inline on the wrapper, so no CSS rule
 * is repeated per instance — Brotli/gzip stays effective.
 */

.rahkar-slider {
	--rahkar-slider-h:        60vh;
	--rahkar-slider-cols:     1;
	--rahkar-slider-cols-mob: 1;
	--rahkar-slider-gap:      0px;
	--rahkar-slider-peek:     0px;

	position: relative;
	/*
	 * No explicit width — block-level <div> defaults to auto, which means
	 * "fill available inline space including margins". Setting width: 100%
	 * here would freeze the box to the parent's content area and prevent
	 * alignfull's negative margins from extending to the viewport edges.
	 */
	height: var(--rahkar-slider-h);
	overflow: hidden;
	background: var(--wp--preset--color--muted, #eceef1);
}

/*
 * Full-bleed safety net: when the user picks Block Width = Full, force the
 * slider to span the actual viewport regardless of how deeply it's nested
 * in constrained layouts. WP's has-global-padding > .alignfull rule alone
 * only escapes the immediate parent's padding; chained constrained
 * wrappers can leave a residual gap. The calc-based approach below is
 * robust against any nesting depth because it's measured against the
 * viewport, not the parent.
 *
 * Side note: 100vw includes the scrollbar on Windows browsers; if you
 * ever see a 1px horizontal scrollbar on first load, switch to 100dvw
 * (dynamic viewport) — supported in all modern browsers.
 */
.rahkar-slider.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end:   calc(50% - 50vw);
}

/* =========================================================================
 *  CONTENT WIDTH
 *  Optional inner max-width independent of Block Width. Most useful when
 *  Block Width is "Full" but you want the slider centered at a smaller
 *  max-width (e.g., full-bleed alignment area but constrained slider).
 * ========================================================================= */

.rahkar-slider[data-content-width="wide"] {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

.rahkar-slider[data-content-width="full"] {
	max-width: 100%;
	margin-inline: auto;
}

/* =========================================================================
 *  SLIDE MODE (CSS scroll-snap)
 * ========================================================================= */

.rahkar-slider--slide .rahkar-slider__track {
	display: flex;
	gap: var(--rahkar-slider-gap);
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.rahkar-slider--slide .rahkar-slider__track::-webkit-scrollbar {
	display: none;
}

.rahkar-slider--slide .rahkar-slider__slide {
	/*
	 * Width formula: account for gap so N slides fit exactly across the
	 * viewport. (N-1 gaps to distribute, divided over N slides.)
	 */
	flex: 0 0 calc(
		( 100% - ( var(--rahkar-slider-gap) * ( var(--rahkar-slider-cols) - 1 ) ) )
		/ var(--rahkar-slider-cols)
	);
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	position: relative;
	overflow: hidden;
}

/* =========================================================================
 *  FADE MODE (stacked + opacity)
 * ========================================================================= */

.rahkar-slider--fade .rahkar-slider__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.rahkar-slider--fade .rahkar-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 600ms ease;
}

.rahkar-slider--fade .rahkar-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

/* First slide visible before JS sets is-active so the page never paints empty. */
.rahkar-slider--fade .rahkar-slider__slide:first-child {
	opacity: 1;
	visibility: visible;
}

/* =========================================================================
 *  SHARED: slide content
 * ========================================================================= */

.rahkar-slider__slide {
	display: block;
	width: 100%;
}

.rahkar-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * When a slide uses art-directed mobile alternatives, the <img> is wrapped
 * in <picture>. The <picture> element is inline-level by default, so we
 * force block + 100% to keep the same fill behavior as a bare <img>.
 * The inner <img> rules above still apply normally.
 */
.rahkar-slider__slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

a.rahkar-slider__slide {
	text-decoration: none;
	color: inherit;
}

/* =========================================================================
 *  ARROWS
 * ========================================================================= */

.rahkar-slider__arrow {
	position: absolute;
	inset-block: 0;
	margin-block: auto;
	height: 2.5rem;
	width: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: rgba(15, 17, 21, 0.55);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	transition: background-color 200ms ease, transform 200ms ease;
	backdrop-filter: blur(4px);
}

.rahkar-slider__arrow:hover,
.rahkar-slider__arrow:focus-visible {
	background: rgba(15, 17, 21, 0.85);
	outline: 0;
}

.rahkar-slider__arrow--prev { inset-inline-start: 0.75rem; }
.rahkar-slider__arrow--next { inset-inline-end:   0.75rem; }

/* In RTL contexts, swap the visual chevron direction so "prev" still
 * points where "back" feels right to a Persian reader. */
[dir="rtl"] .rahkar-slider__arrow { transform: scaleX(-1); }

/* =========================================================================
 *  DOTS
 * ========================================================================= */

.rahkar-slider__dots {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline: 0;
	margin-inline: auto;
	width: fit-content;
	display: flex;
	gap: 0.5rem;
	padding: 0.375rem 0.625rem;
	background: rgba(15, 17, 21, 0.35);
	border-radius: 9999px;
	backdrop-filter: blur(4px);
	z-index: 2;
}

.rahkar-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background-color 200ms ease, width 200ms ease;
}

.rahkar-slider__dot:hover,
.rahkar-slider__dot:focus-visible {
	background: rgba(255, 255, 255, 0.85);
	outline: 0;
}

.rahkar-slider__dot[aria-current="true"] {
	width: 24px;
	border-radius: 9999px;
	background: #ffffff;
}

/* =========================================================================
 *  RESPONSIVE: mobile column override
 * ========================================================================= */

@media (max-width: 768px) {
	.rahkar-slider {
		--rahkar-slider-peek: 1.5rem;
	}

	.rahkar-slider--slide .rahkar-slider__track {
		scroll-padding-inline: var(--rahkar-slider-peek);
		gap: max(var(--rahkar-slider-gap), 0.75rem);
	}

	.rahkar-slider--slide .rahkar-slider__slide {
		flex-basis: calc(
			( 100% - 2 * var(--rahkar-slider-peek) - ( max(var(--rahkar-slider-gap), 0.75rem) * ( var(--rahkar-slider-cols-mob) - 1 ) ) )
			/ var(--rahkar-slider-cols-mob)
		);
	}

	.rahkar-slider__dots {
		display: none;
	}
}

/* =========================================================================
 *  Honor reduced-motion: kill auto-scroll smoothness AND fade transitions.
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.rahkar-slider--slide .rahkar-slider__track { scroll-behavior: auto; }
	.rahkar-slider--fade  .rahkar-slider__slide { transition: none; }
}