/* =========================================================================
   Sterling Design — Work Slider (Splide overrides)
   Loaded only on pages that use the "Work Slider — Gallery" pattern.
   Photography-first: a large single-image stage with restrained controls.
   Pairs with splide-core.min.css (layout only — no default theme chrome).
   ========================================================================= */

.sd-slider { position: relative; }

/* Large, consistent stage so mixed photo ratios don't jump the layout. */
.sd-slider__splide .splide__slide { position: relative; }
.sd-slider__splide .wp-block-image { margin: 0; }
.sd-slider__splide .wp-block-image img {
	display: block;
	width: 100%;
	height: clamp(360px, 60vh, 660px);
	object-fit: cover;
	border-radius: 4px;
}

/* Caption as a quiet overlay, bottom-left, in the brand's Oswald key. */
.sd-slider__splide .wp-block-image figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 72%;
	margin: 0;
	padding: 3rem 1.75rem 1.4rem;
	background: linear-gradient(to top, rgba(27, 37, 50, 0.72) 0%, rgba(27, 37, 50, 0) 100%);
	color: var(--sd-sand);
	font-family: var(--sd-font-display);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.82rem;
}

/* Arrows — hairline, no chrome. Blaze fill on hover. */
.sd-slider__arrow {
	background: transparent;
	border: 1px solid rgba(238, 237, 232, 0.5);
	border-radius: 0;
	width: 3rem;
	height: 3rem;
	opacity: 1;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}
.sd-slider__arrow svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: var(--sd-sand);
	transition: fill 0.25s ease;
}
.sd-slider__arrow:hover:not(:disabled) {
	background: var(--sd-blaze);
	border-color: var(--sd-blaze);
}
.sd-slider__arrow:disabled { opacity: 0.3; }
.sd-slider__splide .splide__arrow--prev { left: 1rem; }
.sd-slider__splide .splide__arrow--next { right: 1rem; }

/* Branded slide counter (01 / 03). */
.sd-slider__counter {
	font-family: var(--sd-font-display);
	font-weight: 600;
	letter-spacing: 0.2em;
	font-size: 0.8rem;
	color: var(--sd-oatmeal);
	text-align: center;
	margin: 1.5rem 0 0;
}

/* Keep keyboard focus visible but understated. */
.sd-slider__splide:focus-visible,
.sd-slider__arrow:focus-visible {
	outline: 2px solid var(--sd-blaze);
	outline-offset: 2px;
}