/**
 * Experience Slider widget: experience photo cards in a looping row that runs past the right edge.
 *
 * @package Atheria_Core
 * @since   1.0.0
 */

.ath-exp-slider {
	--ath-exp-slider-per-view:  3;
	--ath-exp-slider-gap:       var(--ath-gap);
	--ath-exp-slider-ratio:     4 / 5;
	--ath-exp-slider-shade:     0.9;
	--ath-exp-slider-shade-color: var(--ath-surface-inverse);
	--ath-exp-slider-shade-reach: 90%;
	--ath-exp-slider-zoom:      1.06;
	--ath-exp-slider-lines:     3;
	--ath-exp-slider-plate:     var(--ath-surface);
	--ath-exp-slider-plate-pad: 0.375rem;
	--ath-exp-slider-btn-half:  1.6rem;
	--ath-exp-slider-focus:     var(--ath-focus-ring);
	--ath-exp-slider-arrow-size: 48px;

	/* The layout script publishes the page's width without a classic scrollbar and the widget's place in it before the first paint. */
	--_vw:    var(--ath-exp-slider-vw, 100vw);
	--_w:     var(--ath-exp-slider-w, min(var(--section-wide), 100vw - 2 * var(--fluid-side-padding-max)));
	--_start: var(--ath-exp-slider-start, calc((var(--_vw) - var(--_w)) / 2));
	--_end:   var(--ath-exp-slider-end, calc((var(--_vw) - var(--_w)) / 2));
	--_card:  calc((var(--_w) - (var(--ath-exp-slider-per-view) - 1) * var(--ath-exp-slider-gap)) / var(--ath-exp-slider-per-view));
	--_below: calc(var(--ath-exp-slider-btn-half) + 0.25rem);

	position:      relative;
	padding-block: clamp(var(--section-l-padding-min), 2.2vw + 4rem, var(--section-l-padding-max));
	color:         var(--ath-on-surface);
}

.ath-exp-slider--no-cta {
	--ath-exp-slider-btn-half: 0rem;
	--_below: 0rem;
}

@media (max-width: 1024px) {
	.ath-exp-slider {
		--ath-exp-slider-per-view: 2.4;
	}
}

@media (max-width: 767px) {
	.ath-exp-slider {
		--ath-exp-slider-per-view:  1.12;
		--ath-exp-slider-lines:     2;
		--ath-exp-slider-arrow-size: 40px;
	}
}

/* ── Section heading and arrows ──────────────────────────────────────────── */

/* The heading adds only the side space its section lacks, so in a full-width section it keeps a section's side space and in any other it is unchanged. */
.ath-exp-slider__head {
	--_side:        clamp(var(--fluid-side-padding-min), 2.2vw + 0.75rem, var(--fluid-side-padding-max));
	display:        flex;
	flex-direction: column;
	align-items:    center;
	box-sizing:     content-box;
	max-width:      40rem;
	padding-inline: max(0px, var(--_side) - var(--_start)) max(0px, var(--_side) - var(--_end));
	margin:         0 auto clamp(2.5rem, 2rem + 3vw, 4rem);
	text-align:     center;
}

.ath-exp-slider__eyebrow {
	margin-bottom:  1.25rem;
	font-family:    var(--ath-font-eyebrow);
	font-size:      var(--ath-text-eyebrow-size);
	font-weight:    var(--ath-text-eyebrow-weight);
	line-height:    var(--ath-text-eyebrow-lh);
	letter-spacing: var(--ath-text-eyebrow-ls);
	text-transform: var(--ath-text-eyebrow-transform);
	color:          var(--ath-on-surface-accent);
}

.ath-exp-slider .ath-exp-slider__heading {
	margin:      0;
	font-family: var(--ath-font-heading);
	font-size:   var(--ath-size-heading-xl);
	font-weight: var(--ath-fw-heading-l);
	line-height: 1.1;
	color:       var(--ath-on-surface);
	text-wrap:   balance;
}

.ath-exp-slider__heading .ath-muted-text {
	color: var(--ath-on-surface-muted);
}

.ath-exp-slider .ath-exp-slider__intro {
	margin:      1rem 0 0;
	font-family: var(--ath-font-body);
	font-size:   var(--ath-size-text-base);
	line-height: 1.6;
	color:       var(--ath-on-surface-muted);
}

.ath-exp-slider__controls {
	display:     flex;
	align-items: center;
	gap:         0.75rem;
	margin-top:  clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.ath-exp-slider.is-static .ath-exp-slider__controls {
	display: none;
}

@media (scripting: none) {
	.ath-exp-slider__controls {
		display: none;
	}
}

/* Our glass arrow, in the tint the glass takes on a light surface. Scoped under the root to sit above the Kit's button styles. */
.ath-exp-slider .ath-exp-slider__nav {
	box-sizing:              border-box;
	display:                 inline-flex;
	align-items:             center;
	justify-content:         center;
	width:                   var(--ath-exp-slider-arrow-size);
	height:                  var(--ath-exp-slider-arrow-size);
	margin:                  0;
	padding:                 0;
	border:                  1px solid var(--ath-exp-slider-arrow-border, color-mix(in srgb, var(--ath-surface-raised) 45%, transparent));
	border-radius:           50%;
	background:              var(--ath-exp-slider-arrow-bg, color-mix(in srgb, var(--ath-arctic-mist) 28%, transparent));
	color:                   var(--ath-exp-slider-arrow-color, var(--ath-on-surface));
	box-shadow:              none;
	-webkit-backdrop-filter: blur(var(--ath-exp-slider-arrow-blur, 8px));
	backdrop-filter:         blur(var(--ath-exp-slider-arrow-blur, 8px));
	cursor:                  pointer;
	-webkit-appearance:      none;
	appearance:              none;
	transition:              background 0.2s ease, transform 0.25s ease, border-color 0.2s ease, color 0.2s ease;
}

.ath-exp-slider .ath-exp-slider__nav:hover {
	border-color: var(--ath-exp-slider-arrow-border-hover, color-mix(in srgb, var(--ath-surface-raised) 65%, transparent));
	background:   var(--ath-exp-slider-arrow-bg-hover, color-mix(in srgb, var(--ath-arctic-mist) 45%, transparent));
	color:        var(--ath-exp-slider-arrow-color-hover, var(--ath-on-surface));
	transform:    scale(1.08);
}

/* Atheria's navy section changes only the section's text colour, so the icon is restated there behind the Icon color controls; on cypress the navy icon already reads on the glass. */
:where(.ath-surface-dark) .ath-exp-slider .ath-exp-slider__nav {
	color: var(--ath-exp-slider-arrow-color, var(--ath-on-inverse));
}

:where(.ath-surface-dark) .ath-exp-slider .ath-exp-slider__nav:hover {
	color: var(--ath-exp-slider-arrow-color-hover, var(--ath-on-inverse));
}

.ath-exp-slider .ath-exp-slider__nav:focus {
	outline: none;
}

.ath-exp-slider .ath-exp-slider__nav:focus-visible {
	outline:        2px solid var(--ath-exp-slider-focus);
	outline-offset: 2px;
}

.ath-exp-slider__nav svg {
	display:         block;
	width:           calc(var(--ath-exp-slider-arrow-size) * var(--ath-exp-slider-arrow-icon, 0.375));
	height:          calc(var(--ath-exp-slider-arrow-size) * var(--ath-exp-slider-arrow-icon, 0.375));
	fill:            none;
	stroke:          currentColor;
	stroke-width:    2;
	stroke-linecap:  round;
	stroke-linejoin: round;
	pointer-events:  none;
}

/* ── The row: a full-bleed native scroller with its first card on the widget's edge ── */

.ath-exp-slider__viewport {
	width:                  var(--_vw);
	margin-left:            calc(-1 * var(--_start));
	overflow-x:             auto;
	overflow-y:             hidden;
	overscroll-behavior-x:  contain;
	scroll-snap-type:       x mandatory;
	scroll-padding-inline:  var(--_start) var(--_end);
	scrollbar-width:        none;
}

.ath-exp-slider__viewport::-webkit-scrollbar {
	display: none;
}

.ath-exp-slider.is-rewinding .ath-exp-slider__viewport {
	scroll-snap-type: none;
}

.ath-exp-slider__track {
	display:    flex;
	gap:        var(--ath-exp-slider-gap);
	width:      max-content;
	margin:     0;
	padding:    0.5rem var(--_end) 0.5rem var(--_start);
	list-style: none;
}

/* A rising entrance starts each card below its place, so the row keeps room under the cards for it. */
.ath-exp-slider--rise .ath-exp-slider__track {
	padding-bottom: 2.5rem;
}

.ath-exp-slider--rise .ath-exp-slider__viewport {
	margin-bottom: -2rem;
}

.ath-exp-slider__slide {
	flex:              0 0 var(--_card);
	width:             var(--_card);
	margin:            0;
	padding:           0;
	scroll-snap-align: start;
}

.ath-exp-slider__item {
	position:       relative;
	padding-bottom: var(--_below);
}

/* ── The card ────────────────────────────────────────────────────────────── */

.ath-exp-slider__card {
	position:         relative;
	display:          block;
	aspect-ratio:     var(--ath-exp-slider-ratio);
	margin:           0;
	border-radius:    var(--ath-radius-md);
	overflow:         hidden;
	isolation:        isolate;
	background-color: var(--ath-surface-inverse);
}

.ath-exp-slider .ath-exp-slider__img {
	position:      absolute;
	inset:         0;
	width:         100%;
	height:        100%;
	max-width:     none;
	object-fit:    cover;
	border-radius: 0;
	transition:    transform 0.7s var(--ath-ease-out);
}

/* The reference card's own curve: transparent at the top and full strength 90% of the way down. */
.ath-exp-slider__shade {
	position:       absolute;
	inset:          0;
	background:     linear-gradient(to bottom, transparent 0%, var(--ath-exp-slider-shade-color) var(--ath-exp-slider-shade-reach));
	opacity:        var(--ath-exp-slider-shade);
	pointer-events: none;
}

.ath-exp-slider__cover {
	position: absolute;
	inset:    0;
	z-index:  2;
}

/* The text clears the upper half of the button that sits on the card's edge. */
.ath-exp-slider__body {
	position:        absolute;
	inset:           auto 0 0;
	z-index:         1;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	padding:         0 clamp(1.25rem, 0.9rem + 1vw, 1.75rem) calc(clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem) + var(--ath-exp-slider-btn-half));
	color:           var(--ath-on-inverse);
	text-align:      center;
	pointer-events:  none;
}

.ath-exp-slider .ath-exp-slider__sub {
	margin:         0 0 0.6rem;
	font-family:    var(--ath-font-eyebrow);
	font-size:      var(--ath-text-eyebrow-size);
	font-weight:    var(--ath-text-eyebrow-weight);
	line-height:    var(--ath-text-eyebrow-lh);
	letter-spacing: var(--ath-text-eyebrow-ls);
	text-transform: var(--ath-text-eyebrow-transform);
	color:          var(--ath-on-inverse);
}

.ath-exp-slider .ath-exp-slider__name {
	margin:      0;
	font-family: var(--ath-font-heading);
	font-size:   var(--ath-size-heading-s);
	font-weight: var(--ath-fw-heading-m);
	line-height: 1.2;
	color:       var(--ath-on-inverse);
	text-wrap:   balance;
}

/* The description opens to its real height, so the name and subtitle rise by exactly that much. */
.ath-exp-slider__desc {
	display:            grid;
	grid-template-rows: 0fr;
	opacity:            0;
	transition:         grid-template-rows 0.6s var(--ath-ease-out), opacity 0.45s ease;
}

.ath-exp-slider .ath-exp-slider__desc-text {
	min-height:         0;
	margin:             0;
	padding-top:        0.6rem;
	overflow:           hidden;
	font-family:        var(--ath-font-body);
	font-size:          var(--ath-size-text-s);
	line-height:        var(--ath-text-caption-lh);
	color:              var(--ath-on-inverse);
	display:            -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ath-exp-slider-lines);
}

.ath-exp-slider__slide:hover .ath-exp-slider__desc,
.ath-exp-slider__slide:focus-within .ath-exp-slider__desc {
	grid-template-rows: 1fr;
	opacity:            1;
}

.ath-exp-slider--zoom .ath-exp-slider__slide:hover .ath-exp-slider__img,
.ath-exp-slider--zoom .ath-exp-slider__slide:focus-within .ath-exp-slider__img {
	transform: scale(var(--ath-exp-slider-zoom));
}

/* A touch screen has no hover, so every description shows. */
@media (hover: none), (pointer: coarse) {
	.ath-exp-slider__desc {
		grid-template-rows: 1fr;
		opacity:            1;
	}
}

/* ── The card's button, centred on the card's bottom edge ────────────────── */

.ath-exp-slider__cta-wrap {
	--_cta-r: var(--ath-exp-slider-cta-radius, 10px);

	position:      absolute;
	left:          50%;
	bottom:        var(--_below);
	z-index:       3;
	display:       inline-flex;
	border-radius: var(--_cta-r);
	transform:     translate(-50%, 50%);
}

.ath-exp-slider__cta-wrap--pill {
	--_cta-r: var(--ath-exp-slider-cta-radius, 100px);
}

.ath-exp-slider__cta-wrap--square {
	--_cta-r: var(--ath-exp-slider-cta-radius, 0px);
}

/* A style with no fill of its own sits on a plate of the page's surface, so it reads over the photo as it does on the page. */
.ath-exp-slider__cta-wrap--plate {
	padding:          var(--ath-exp-slider-plate-pad);
	border-radius:    calc(var(--_cta-r) + var(--ath-exp-slider-plate-pad));
	background-color: var(--ath-exp-slider-plate);
}

.ath-exp-slider__cta-wrap--plate.ath-exp-slider__cta-wrap--underline {
	padding-inline: calc(var(--ath-exp-slider-plate-pad) + 0.75rem);
}

.ath-exp-slider .ath-exp-slider__cta:focus-visible {
	outline-color: var(--ath-exp-slider-focus);
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.ath-exp-slider .ath-exp-slider__img,
	.ath-exp-slider .ath-exp-slider__nav,
	.ath-exp-slider__desc {
		transition: none;
	}

	.ath-exp-slider--zoom .ath-exp-slider__slide:hover .ath-exp-slider__img,
	.ath-exp-slider--zoom .ath-exp-slider__slide:focus-within .ath-exp-slider__img,
	.ath-exp-slider .ath-exp-slider__nav:hover {
		transform: none;
	}
}