/* ── CSS custom properties, and the wrapper itself ───────────────────────────
   Every value here reads a theme token first and falls back to the block's own
   literal, so the block still works standalone but a theme that defines the
   token owns the number. Nothing below this block may hardcode a colour, size
   or timing — change it here.
   ────────────────────────────────────────────────────────────────────────── */
.wp-block-plinthworks-slider {
	--pw-arrow-bg:        rgba( 255, 255, 255, 0.92 );
	--pw-arrow-color:     #1e1e1e;
	--pw-arrow-shadow:    0 2px 12px rgba( 0, 0, 0, 0.18 );
	--pw-arrow-size:      var( --wp--custom--hero--control--size, 44px );
	--pw-arrow-border:    var( --wp--custom--hero--control--border-width, 2px );
	--pw-arrow-gap:       var( --wp--custom--hero--control--gap, 17px );
	--pw-dot-inactive:    rgba( 255, 255, 255, 0.45 );
	--pw-dot-active:      #fff;
	/* Was var( --wp--preset--color--primary, … ): `primary` is not a slug in
	   this theme's palette, so the progress bar silently served the #1a73e8
	   fallback — a blue that belongs to no brand on this site. */
	--pw-progress-color:  var( --wp--preset--color--accent, #EFC940 );

	/* Motion. Read from settings.custom.motion; the reference's measured
	   values are the fallbacks. */
	--pw-slider-easing:        var( --wp--custom--motion--easing--slider, cubic-bezier( 0.7, 0, 0.3, 1 ) );
	--pw-slider-duration:      var( --wp--custom--motion--duration--slide, 500ms );
	--pw-slider-fade-duration: var( --wp--custom--motion--duration--hero-fade, 1200ms );
	--pw-slider-hover:         var( --wp--custom--motion--duration--hover, 300ms );
	--pw-slider-easing-base:   var( --wp--custom--motion--easing--default, ease );

	position:   relative;
	/* min-height, not height. A fixed height plus overflow:hidden clips any
	   slide whose content is taller than the number in the sidebar, and because
	   .pw-slide-content centres with justify-content the overflow is split
	   evenly top and bottom — so the first line of the tallest slide is cut off
	   rather than the last. min-height keeps the sidebar value as the floor and
	   lets a tall slide size the box. Paired with the grid stacking below: on
	   its own, min-height makes fade sliders WORSE, because absolutely
	   positioned slides give the track no content height to grow to. */
	min-height: var( --pw-slider-height, 480px );
	overflow:   hidden;
	outline:    none;
	user-select: none;

	/* The height chain, part 1 of 3. min-height alone leaves this element's
	   computed `height` at `auto`, and a percentage height resolved against an
	   auto-height containing block computes to `auto` as well. So the viewport,
	   track and slides below collapsed to their own content height, and the
	   sidebar's Height only ever moved THIS box — everything painted inside a
	   slide, the background photograph first among them, stayed the size of the
	   copy. Measured on the front end at 1024 before this rule: slider 640px,
	   slide inside it 458.5px, background 458.5px.

	   A flex column hands the used height down without a percentage. The
	   viewport is the only in-flow child — progress bar, arrows, dots, counter
	   and grouped controls are every one of them position:absolute — so it
	   stretches to whatever this box resolves to; and because it grows from a
	   content-sized basis it still pushes past that floor rather than clipping
	   a tall slide, which is the whole reason this is min-height and not
	   height. */
	display:        flex;
	flex-direction: column;
}

/* ── Full-bleed stretch ──────────────────────────────────────────────────── */
.wp-block-plinthworks-slider.is-stretch-full {
	width:        100vw !important;
	max-width:    100vw !important;
	margin-left:  calc( 50% - 50vw ) !important;
	margin-right: 0 !important;
}

/* ── Viewport + track ────────────────────────────────────────────────────── */
/* The height chain, part 2 of 3. `height: 100%` on these two was the
   percentage that never resolved. `flex: 1 0 auto` states the same intent in a
   way that works against a min-height parent: fill the slider, and never shrink
   below your own content. The viewport becomes a column in turn so the track
   inherits the same treatment. */
.pw-slider-viewport {
	width:          100%;
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	flex:           1 0 auto;
}

.pw-slider-track {
	display:    flex;
	flex:       1 0 auto;
	transition: transform var( --pw-slider-duration ) var( --pw-slider-easing );
	will-change: transform;
}

/* ── Fade effect ─────────────────────────────────────────────────────────── */
.pw-slider--effect-fade .pw-slider-viewport {
	position: relative;
}
/* Grid stacking rather than absolute positioning. Every slide occupies the same
   grid cell, so they still overlay each other and opacity still drives the
   fade — but they stay in flow, which means the track sizes itself to the
   TALLEST slide instead of collapsing to nothing. That is what makes
   min-height on the wrapper work. */
/* height:auto is gone: it was there to undo the base rule's height:100%, and
   the base rule no longer sets one. The grid's single implicit row is auto and
   align-content resolves to stretch, so with the track's height now definite
   the row — and every slide sharing its cell — fills it. */
.pw-slider--effect-fade .pw-slider-track {
	position:  relative;
	display:   grid;
	transform: none !important; /* overridden by JS slide */
}
.pw-slider--effect-fade .pw-slide {
	grid-area:      1 / 1;
	position:       relative;
	inset:          auto;
	flex:           none;
	width:          100%;
	opacity:        0;
	transition:     opacity var( --pw-slider-fade-duration ) var( --pw-slider-easing );
	pointer-events: none;
}
.pw-slider--effect-fade .pw-slide.is-active {
	opacity:        1;
	pointer-events: auto;
}

/* ── Arrows ──────────────────────────────────────────────────────────────── */
.pw-slider-arrow {
	position:       absolute;
	top:            50%;
	transform:      translateY( -50% );
	z-index:        10;
	display:        flex;
	align-items:    center;
	justify-content: center;
	width:          var( --pw-arrow-size );
	height:         var( --pw-arrow-size );
	padding:        0;
	border:         none;
	cursor:         pointer;
	color:          var( --pw-arrow-color );
	transition:     opacity var( --pw-slider-hover ) var( --pw-slider-easing-base ), transform var( --pw-slider-hover ) var( --pw-slider-easing-base ), background var( --pw-slider-hover ) var( --pw-slider-easing-base ), color var( --pw-slider-hover ) var( --pw-slider-easing-base ), border-color var( --pw-slider-hover ) var( --pw-slider-easing-base );
}
.pw-slider-prev { left:  1rem; }
.pw-slider-next { right: 1rem; }

.pw-slider-arrow:hover {
	opacity:   0.85;
	transform: translateY( -50% ) scale( 1.08 );
}
.pw-slider-arrow:disabled {
	opacity:        0.25;
	pointer-events: none;
}

/* Arrow style: rounded (default) */
.pw-slider--arrow-rounded .pw-slider-arrow {
	background:    var( --pw-arrow-bg );
	border-radius: 50%;
	box-shadow:    var( --pw-arrow-shadow );
}

/* Arrow style: square */
.pw-slider--arrow-square .pw-slider-arrow {
	background:    var( --pw-arrow-bg );
	border-radius: 6px;
	box-shadow:    var( --pw-arrow-shadow );
}

/* Arrow style: circle outline.
   No fill, a hairline ring, and the glyph inherits colour from the slider so a
   dark ground gets a light glyph and a light ground gets a dark one without a
   second variant. Hover inverts it: the ring fills and the glyph takes the ink
   that the fill was chosen to carry. */
.pw-slider--arrow-circle-outline .pw-slider-arrow {
	background:    transparent;
	border:        var( --pw-arrow-border ) solid var( --pw-arrow-ring, var( --wp--preset--color--accent, currentColor ) );
	border-radius: var( --wp--custom--radius--circle, 50% );
	box-shadow:    none;
	color:         inherit;
}
/* Arrow style: minimal (transparent) */
.pw-slider--arrow-minimal .pw-slider-arrow {
	background: transparent;
	color:      #fff;
}

/* Grouped-controls arrows sit in a row rather than at the slider's two edges, so
   they lose the absolute positioning and the mid-height translate. Declared here
   with the other arrow bases so that no base selector follows a :hover one —
   stylelint's no-descending-specificity is right to insist on that, because the
   reverse order is exactly how a hover state silently stops working. */
.pw-slider-controls .pw-slider-arrow {
	position:  static;
	transform: none;
}
.pw-slider-controls .pw-slider-prev {
	margin-inline-end: var( --pw-arrow-gap );
}

/* ── Arrow hover states, all of them, after every base ───────────────────── */
.pw-slider--arrow-minimal .pw-slider-arrow:hover {
	background: rgba( 255, 255, 255, 0.15 );
}

.pw-slider--arrow-circle-outline .pw-slider-arrow:hover,
.pw-slider--arrow-circle-outline .pw-slider-arrow:focus-visible {
	background: var( --pw-arrow-ring, var( --wp--preset--color--accent, currentColor ) );
	color:      var( --pw-arrow-ink-hover, var( --wp--preset--color--contrast, #515266 ) );
	opacity:    1;
}

.pw-slider-controls .pw-slider-arrow:hover {
	transform: none;
}

/* ── Dots ────────────────────────────────────────────────────────────────── */
.pw-slider-dots {
	position:        absolute;
	bottom:          1.25rem;
	left:            0;
	right:           0;
	display:         flex;
	justify-content: center;
	align-items:     center;
	gap:             6px;
	z-index:         10;
}

.pw-slider-dot {
	padding:    0;
	border:     none;
	cursor:     pointer;
	background: var( --pw-dot-inactive );
	transition: background var( --pw-slider-hover ) var( --pw-slider-easing-base ), width var( --pw-slider-hover ) var( --pw-slider-easing-base ), transform var( --pw-slider-hover ) var( --pw-slider-easing-base );
}

/* Line dots */
.pw-slider--dot-line .pw-slider-dot {
	width:         20px;
	height:        3px;
	border-radius: 2px;
}
.pw-slider--dot-line .pw-slider-dot.is-active {
	background: var( --pw-dot-active );
	width:      36px;
}

/* Circle dots */
.pw-slider--dot-circle .pw-slider-dot {
	width:         9px;
	height:        9px;
	border-radius: 50%;
}
.pw-slider--dot-circle .pw-slider-dot.is-active {
	background: var( --pw-dot-active );
	transform:  scale( 1.3 );
}

/* Square dots */
.pw-slider--dot-square .pw-slider-dot {
	width:         9px;
	height:        9px;
	border-radius: 2px;
}
.pw-slider--dot-square .pw-slider-dot.is-active {
	background: var( --pw-dot-active );
	transform:  scale( 1.3 );
}

/* ── Counter ─────────────────────────────────────────────────────────────── */
.pw-slider-counter {
	position:              absolute;
	bottom:                1.25rem;
	right:                 1.5rem;
	z-index:               10;
	font-size:             0.8125rem;
	color:                 rgba( 255, 255, 255, 0.9 );
	font-variant-numeric:  tabular-nums;
	letter-spacing:        0.03em;
	text-shadow:           0 1px 3px rgba( 0, 0, 0, 0.5 );
}

/* ── Grouped controls: counter + arrows in one row ───────────────────────────
   The reference sets the counter and the arrows as a single object at the
   slider's bottom corner, with a hairline rule between them. Everything here is
   inert unless controlsLayout is set away from its default, so no slider saved
   before this build changes shape.
   ────────────────────────────────────────────────────────────────────────── */
.pw-slider-controls {
	position:    absolute;
	z-index:     10;
	display:     flex;
	align-items: center;
	inset-block-end:    50px;
	inset-inline-start: var( --wp--custom--hero--controls--inline-mobile, 30px );
}

.pw-slider--controls-inline-start .pw-slider-controls {
	inset-inline-start: var( --wp--custom--hero--controls--inline-mobile, 30px );
	inset-inline-end:   auto;
}

.pw-slider-arrows {
	display:     flex;
	align-items: center;
}

.pw-slider-controls .pw-slider-counter {
	position:       static;
	font-size:      var( --wp--preset--font-size--medium, 1rem );
	font-weight:    700;
	letter-spacing: 0;
	color:          inherit;
	text-shadow:    none;
	display:        flex;
	align-items:    center;
}

/* The rule between the number and the buttons. A pseudo-element, because it
   belongs to the counter's own presentation and putting a real element there
   would make it a second thing the editor has to know about. */
.pw-slider-controls .pw-slider-counter::after {
	content:        "";
	display:        inline-block;
	vertical-align: middle;
	inline-size:    var( --wp--custom--hero--counter--rule-width, 70px );
	block-size:     var( --wp--custom--hero--counter--rule-height, 1px );
	margin-inline:  var( --wp--custom--hero--counter--rule-gap, 30px );
	background:     var( --pw-counter-rule, var( --wp--custom--color--rule, currentColor ) );
}

@media ( min-width: 576px ) {
	.pw-slider-controls .pw-slider-counter::after {
		inline-size: var( --wp--custom--hero--counter--rule-width-sm, 120px );
	}
}

@media ( min-width: 768px ) {
	.pw-slider--controls-inline-end .pw-slider-controls {
		inset-block-end:    var( --wp--custom--hero--controls--block, 45px );
		inset-inline-start: auto;
		inset-inline-end:   var( --wp--custom--hero--controls--inline, 50px );
	}
}

@media ( min-width: 1367px ) {
	.pw-slider--controls-inline-end .pw-slider-controls {
		inset-inline-end: var( --wp--custom--hero--controls--inline-xl, 80px );
	}
}

/* ── Progress bar ────────────────────────────────────────────────────────── */
@keyframes pw-slider-progress {
	from { transform: scaleX( 0 ); }
	to   { transform: scaleX( 1 ); }
}

.pw-slider-progress {
	position: absolute;
	bottom:   0;
	left:     0;
	right:    0;
	height:   3px;
	z-index:  11;
	overflow: hidden;
}

.pw-slider-progress-bar {
	height:           100%;
	background:       var( --pw-progress-color );
	transform-origin: left center;
	transform:        scaleX( 0 );
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* The small-breakpoint height. --pw-slider-height-sm is only present when the
   editor has set it, so when it is absent this resolves to exactly the value
   the base rule already used and nothing about the box changes. That is what
   lets one editor control govern the height at every breakpoint while the
   reference's 900 -> 800 step stays expressible. min-height, not height, for
   the same reason as the base rule: a fixed height clips a tall slide. */
@media ( max-width: 1024px ) {
	.wp-block-plinthworks-slider {
		min-height: var( --pw-slider-height-sm, var( --pw-slider-height, 480px ) );
	}
}

@media ( max-width: 600px ) {
	.pw-slider-arrow {
		--pw-arrow-size: 36px;
	}
	.pw-slider-prev { left:  0.5rem; }
	.pw-slider-next { right: 0.5rem; }

	/* Only the corner counter hides on a narrow screen. A grouped counter is
	   part of a deliberate control row and its position has its own mobile
	   value, so dropping it there would leave the arrows floating alone. */
	.pw-slider-counter { display: none; }
	.pw-slider-controls .pw-slider-counter { display: flex; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.pw-slider-track              { transition: none; }
	.pw-slider--effect-fade .pw-slide { transition: none; }
	.pw-slider-progress-bar       { animation:  none !important; }
}