/* OMX Article Slider 1.0.0 - manual only, no autoplay. RTL magazine, navy #16305a.
   Movement is transform-based, NOT scroll-snap: programmatic smooth scrolling on a
   snap container proved unreliable in testing, while a transform is deterministic. */

/* Brand tokens - locked palette from brand/BRAND-DIRECTION.md (Option A, 16.07):
   deep navy #16305a, mid blue #2c5aa0, warm gold #c8a24a, sand #f4efe1, ink #182338. */
.omx-slider {
	--omx-navy: 22, 48, 90;
	--omx-gold: 200, 162, 74;
	position: relative;
	margin: 34px 0 38px;
	padding: 0;
	max-width: 100%;
	isolation: isolate;
}

/* Soft brand glow, blurred, sitting UNDER the frame. A blurred pseudo-element, not
   backdrop-filter: the ban list allows backdrop-blur on fixed/sticky elements only,
   and this element scrolls with the article. */
.omx-slider::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 5%;
	right: 5%;
	top: 14px;
	bottom: 34px;
	border-radius: 26px;
	background:
		radial-gradient(60% 70% at 30% 40%, rgba(var(--omx-navy), .30), transparent 72%),
		radial-gradient(52% 62% at 78% 72%, rgba(var(--omx-gold), .22), transparent 70%);
	filter: blur(26px);
	opacity: .85;
	pointer-events: none;
}

.omx-slider__frame {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: #eef2f8;
	/* layered brand shadow: tight contact line, mid lift, wide diffuse navy bloom */
	box-shadow:
		0 1px 2px rgba(var(--omx-navy), .07),
		0 10px 22px -8px rgba(var(--omx-navy), .22),
		0 28px 52px -18px rgba(var(--omx-navy), .26);
}

/* hairline gold edge, the brand's warm accent used as a thin line, never as text */
.omx-slider__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
	box-shadow:
		inset 0 0 0 1px rgba(var(--omx-gold), .34),
		inset 0 0 0 3px rgba(255, 255, 255, .5);
	pointer-events: none;
}

.omx-slider__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transform: translateX(0);
	transition: transform .38s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

.omx-slider__track:focus-visible {
	outline: 3px solid #16305a;
	outline-offset: -3px;
}

.omx-slider__slide {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	list-style: none;
}

.omx-slider__slide::before,
.omx-slider__slide::marker { content: none; }

.omx-slider__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin: 0;
}

/* nav buttons - navy on white (6.7:1), 44px target per WCAG 2.5.8 */
.omx-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: #16305a;
	cursor: pointer;
	box-shadow:
		0 2px 6px rgba(var(--omx-navy), .26),
		0 8px 18px -6px rgba(var(--omx-navy), .34);
	transition: background .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.omx-slider__nav:hover {
	background: #fff;
	box-shadow:
		0 2px 8px rgba(var(--omx-navy), .3),
		0 12px 24px -6px rgba(var(--omx-navy), .4);
}

.omx-slider__nav:focus-visible {
	outline: 3px solid #16305a;
	outline-offset: 2px;
}

/* RTL reading order: "previous" sits on the right, "next" on the left */
.omx-slider__nav--prev { right: 10px; }
.omx-slider__nav--next { left: 10px; }

.omx-slider__nav[disabled] {
	opacity: .35;
	cursor: default;
}

.omx-slider__dots {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin: 11px 0 0;
}

.omx-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #b3bfd1;
	cursor: pointer;
}

.omx-slider__dot.is-active { background: #16305a; }

.omx-slider__cap {
	display: block;
	margin: 9px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: #4a5568;
	text-align: center;
}

/* #5b6a80 = 5.50:1 on white. The theme's usual muted #6b7a90 is 4.36:1 and fails AA
   at this size, so it is deliberately NOT reused here. Measured, not assumed. */
.omx-slider__credit {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: #5b6a80;
}

@media (max-width: 480px) {
	.omx-slider__nav { width: 40px; height: 40px; }
	.omx-slider__cap { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.omx-slider__track { transition: none; }
	.omx-slider__nav { transition: none; }
}