/**
 * Shared carousel chrome: the track fix, the prev/next arrows and the
 * countdown pill dots.
 *
 * Registered in inc/hooks/enqueue.php and enqueued from the render.php of any
 * block that switches into carousel mode, so a page without a carousel loads
 * neither this nor slick nor jQuery.
 *
 * The nav sits AFTER the carousel element rather than inside it: slick turns
 * every child of its root into a slide, so the controls live in an external
 * container that assets/js/carousels.js fills — DOM order matches visual
 * order, and tab order matches both.
 *
 * Hidden until the JS adds .is-ready. With JS off, or when the slides already
 * fit and the runtime bows out, the block renders its plain grid and an empty
 * nav would be dead space under it.
 */

/* Slick floats its slides, which makes every card as tall as its own content
   and leaves a ragged row of price cards. Flex on the track plus height:auto
   on the slide restores the equal-height behaviour the CSS grid had — this is
   the one rule every carousel in the theme needs and none of them should have
   to rediscover. */
.slick-track {
	display: flex;
	align-items: stretch;
}

/* The slide is whatever the block pointed `slide:` at — this build of slick
   only wraps slides itself when rows > 1, so there is no wrapper to rely on. A
   block that needs a gutter prints its own wrapper and pads THAT; padding the
   card directly lands inside its border and separates nothing. */
.slick-slide {
	height: auto;
}

.russian-carousel-nav {
	--russian-nav-gap: 16px;

	position: relative; /* anchors the pause toggle, which sits out of flow */
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--russian-nav-gap);
	margin-top: 28px;
}

.russian-carousel-nav.is-ready {
	display: flex;
}

/* --- Arrows --- */

/* Carbón discs with the hairline, like every raised control on the dark page.
   Hover brightens the ring; it is a control, so its border may answer. */
.russian-carousel-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 44x44: SC 2.5.8 asks for 24, but these sit next to each other and a
	   thumb needs the room. */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 50%;
	background: var(--wp--preset--color--carbon);
	color: var(--wp--preset--color--blanco);
	cursor: pointer;
}

.russian-carousel-arrow--prev svg {
	transform: rotate(180deg);
}

.russian-carousel-arrow:hover {
	border-color: rgba(255, 255, 255, 0.45);
	background: var(--wp--preset--color--grafito);
}

.russian-carousel-arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--rojo);
	outline-offset: 2px;
}

/* --- Dots --- */

.russian-carousel-nav__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 0, not a real gap: each dot carries 8px of transparent padding a side to
	   reach its 24x24 target, so the pips already read 16px apart while the hit
	   areas stay 24px and never overlap. */
	gap: 0;
}

/*
 * The pip stays 8px; the TARGET around it is 24x24 (WCAG 2.2 SC 2.5.8, which a
 * bare 8x8 button fails by size and by the spacing exception). The box is grown
 * with transparent padding and the pip drawn as a background, so the design is
 * untouched while the hit area triples.
 *
 * Opacity 0.45: white at 0.45 over noche composites to #777, 3.5:1, which
 * clears the 3:1 a control's own shape has to reach (SC 1.4.11).
 */
.russian-carousel-dot {
	position: relative;
	display: block;
	box-sizing: content-box;
	width: 8px;
	height: 8px;
	padding: 8px;
	border: 0;
	background: none;
	font-size: 0;
	cursor: pointer;
}

/* The dot stays 24px on screen; the hit area is 44px, the size every
 * mobile guideline agrees on, through an invisible pseudo-element. */
.russian-carousel-dot::after {
	content: "";
	position: absolute;
	inset: -10px;
}

.russian-carousel-dot::before {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 4px;
	background: var(--wp--preset--color--blanco);
	opacity: 0.45;
}

.russian-carousel-dot:hover::before {
	opacity: 0.75;
}

.russian-carousel-dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--rojo);
	outline-offset: 0;
}

/* The current slide's dot becomes the countdown pill: a faint track whose
   rojo fill grows left to right in sync with the autoplay timer (one clock —
   see setupAutoplay in carousels.js). With autoplay off it simply reads solid
   red. */
.russian-carousel-dot.is-active {
	width: 32px;
}

.russian-carousel-dot.is-active::before {
	background: rgba(255, 255, 255, 0.28);
	opacity: 1;
}

/* The fill is a rounded MASK holding a full-size bar that slides in with
   translateX, not a bar scaled up with scaleX: scaling squashes the border
   radius with it, so an early countdown renders as a square-cornered sliver
   poking past the track's rounded cap. The sliding bar keeps its geometry, so
   the leading edge is always a soft cap emerging from the track's own curve.
   Still transform-only. */
.russian-carousel-dot__fill {
	position: absolute;
	inset: 8px;
	overflow: hidden;
	border-radius: 4px;
}

.russian-carousel-dot__fill::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--rojo);
	/* -101%, not -100%: keeps the bar's antialiased right edge from bleeding a
	   hairline into the mask while parked. */
	transform: translateX(-101%);
}

/* No countdown running (autoplay off, reduced motion, or paused out of a
   cycle): the pill reads solid. */
.russian-carousel-dot.is-active:not(.is-counting) .russian-carousel-dot__fill::before {
	transform: translateX(0);
}

@keyframes russian-dot-countdown {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(0);
	}
}

/* --- Pause / play (SC 2.2.2) --- */

/* Out of flow and visually hidden until it takes keyboard focus — the
   skip-link pattern. It only exists when autoplay is on: carousels.js builds
   it nowhere else.
 *
 * It is NOT removed: it stays in the DOM, in tab order, and unhides on focus,
 * so the SC 2.2.2 mechanism is there. Keeping it in the row pulled the dots
 * off centre against the approved design, which is why it was moved out.
 *
 * KNOWN GAP, accepted deliberately: a sighted mouse or touch user who wants to
 * stop the motion cannot find it. Hover pause still covers mouse; touch has
 * nothing. Re-read this before shipping to a client with an accessibility
 * obligation — making it visible again is this one rule.
 *
 * The "play could never work there" bug the hiplaces version had does NOT come
 * back with it: that was the runtime treating the focus its own play button
 * took as a reason to stay paused, and carousels.js clears both implicit
 * reasons when the user resumes. */
.russian-carousel-nav__pause:not(:focus-visible) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.russian-carousel-nav__pause:focus-visible {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

.russian-carousel-nav__pause {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--blanco);
	cursor: pointer;
	opacity: 0.55;
}

.russian-carousel-nav__pause:hover,
.russian-carousel-nav__pause:focus-visible {
	opacity: 1;
}

.russian-carousel-nav__pause:focus-visible {
	outline: 2px solid var(--wp--preset--color--rojo);
	outline-offset: 2px;
}

.russian-carousel-nav__glyph--play,
.russian-carousel-nav.is-user-paused .russian-carousel-nav__glyph--pause {
	display: none;
}

.russian-carousel-nav.is-user-paused .russian-carousel-nav__glyph--play {
	display: block;
}

/* Press feedback and the countdown are motion, so they stay behind the gate.
   The controls themselves work identically with reduced motion on. */
@media (prefers-reduced-motion: no-preference) {
	.russian-carousel-arrow {
		transition: border-color 0.16s ease, background-color 0.16s ease;
	}

	.russian-carousel-dot {
		transition: opacity 0.2s ease, width 0.2s ease;
	}

	.russian-carousel-dot.is-active.is-counting .russian-carousel-dot__fill::before {
		animation: russian-dot-countdown var(--russian-carousel-interval, 6000ms) linear forwards;
	}

	/* Must out-specify the animation shorthand above, which resets play-state
	   to running, or pausing never freezes the fill. */
	.russian-carousel-nav.is-paused .russian-carousel-dot.is-active.is-counting .russian-carousel-dot__fill::before {
		animation-play-state: paused;
	}
}