/*
 * Quote Slider element.
 *
 * Loaded ONLY when the element is on the page, and deliberately unscoped: this
 * renders in normal page flow, not inside the #polaris-ui island, so the island's
 * scoped stylesheet does not reach it and its preflight cannot strip it.
 *
 * Every dimension is a custom property set on the wrapper by the shortcode, so one
 * static stylesheet serves any number of differently configured sliders on a page.
 */

.pls-qs {
	display: flex;
	flex-direction: column;
	position: relative;
	/* The breakpoint counts arrive as -d/-t/-m variables and are RESOLVED here, in
	   the stylesheet. --pls-qs-per must never be set in the element's inline style:
	   inline beats every stylesheet rule, media queries included, which is exactly
	   how the tablet and mobile counts silently stopped applying. */
	--pls-qs-per: var(--pls-qs-per-d, 3);
}

/* ----- navigation ----- */

.pls-qs__nav {
	display: flex;
	gap: 8px;
	order: 0;
	margin-bottom: 24px;
}

.pls-qs--nav-above-left .pls-qs__nav,
.pls-qs--nav-below-left .pls-qs__nav { justify-content: flex-start; }

.pls-qs--nav-above-right .pls-qs__nav,
.pls-qs--nav-below-right .pls-qs__nav { justify-content: flex-end; }

.pls-qs--nav-below-center .pls-qs__nav { justify-content: center; }

.pls-qs--nav-below-left .pls-qs__nav,
.pls-qs--nav-below-right .pls-qs__nav,
.pls-qs--nav-below-center .pls-qs__nav {
	order: 2;
	margin-top: 24px;
	margin-bottom: 0;
}

.pls-qs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--pls-qs-btn, 48px);
	height: var(--pls-qs-btn, 48px);
	padding: 0;
	background: transparent;
	/* currentColor so an unset border tracks the chevron colour rather than
	   defaulting to the browser's black. */
	border: var(--pls-qs-bw, 1px) solid currentColor;
	border-radius: 0;
	cursor: pointer;
	transition: opacity 200ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.pls-qs--circle .pls-qs__btn { border-radius: 50%; }

.pls-qs__btn:hover { opacity: .75; }

.pls-qs__btn[disabled] {
	opacity: .3;
	cursor: default;
	pointer-events: none;
}

.pls-qs__btn svg {
	width: 25%;
	height: auto;
	display: block;
}

.pls-qs__btn--prev svg { transform: scaleX(-1); }

/* ----- theme button design -----
   The theme's `.fa-stack.btn-default` arrives with a SOLID FILL (white background,
   near-black glyph) from the site's generated palette. The back-to-top control only
   looks transparent because the child theme overrides it, and that override is
   written for `.fa-angle-up` alone, so a left or right angle keeps the fill. This
   reproduces the same treatment for our two chevrons, in our own stylesheet: an
   add-on styles what it renders, the theme never does it for us.

   The box is set in pixels rather than left to the theme's ems: `.fa-stack` measured
   2.5em wide, not the 2em the base stylesheet suggests, so a size setting of 48
   produced a 62px button. Explicit width, height and line-height make the setting
   mean what it says. */
.pls-qs--btn-theme .pls-qs__btn {
	width: auto;
	height: auto;
	border: 0;
	background: transparent;
	line-height: 0;
}

/* No fade on the theme design: its hover feedback is the accent colour change, and
   the base 75% fade on top washes the accent out to a pastel. */
.pls-qs--btn-theme .pls-qs__btn:hover { opacity: 1; }

.pls-qs--btn-theme .pls-qs__btn .fa-stack {
	box-sizing: border-box;
	width: var(--pls-qs-btn, 48px);
	height: var(--pls-qs-btn, 48px);
	/* Centred by flex with line-height zeroed, NOT by line-height matching the box.
	   An icon font's glyph sits on a baseline inside a line box that is taller than
	   the glyph, so line-height centring puts it a pixel or two low and does it
	   differently in each browser. Flex centres the glyph's own box. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	/* Half the button. The glyph is the icon font's own drawing, so this is the only
	   handle on how big the chevron reads: 30px button, 15px chevron. */
	font-size: calc(var(--pls-qs-btn, 48px) * .5);
	/* A real border, not an inset ring: a ring cannot take a colour from the theme's
	   `border-<slug>-color` class, which is how the Border colour setting is applied.
	   The width needs !important only because Uncode sets `border-width: 1px
	   !important` on .fa-stack; border-box keeps the button the size that was asked
	   for whatever the width. */
	border-style: solid !important;
	border-width: var(--pls-qs-bw, 1px) !important;
	/* The theme's .btn-default paints the glyph near-black on the icon itself, so the
	   palette class on the BUTTON never reached it. Inherit, and the Chevron colour
	   setting lands. */
	color: inherit !important;
	transition: color 200ms ease, border-color 200ms ease;
}

/* Only when no Border colour was chosen: the palette class is a plain 0,1,0 selector
   and anything more specific here would silently beat it. */
.pls-qs--btn-theme .pls-qs__btn .fa-stack:not([class*="border-"]) {
	border-color: currentColor;
}

/* The theme's own fill is stripped only for the OUTLINE style. Filled keeps the
   background: the chosen palette class or hex (rendered on the icon), or, with no
   choice made, whatever the theme's .btn-default paints. */
.pls-qs--outline.pls-qs--btn-theme .pls-qs__btn .fa-stack {
	background-color: transparent !important;
}

/* Hover is the theme's accent, read off the site by the script (there is no CSS way
   to ask a class what colour it resolves to). Border follows wherever it is
   currentColor, which is the same behaviour as the theme's back-to-top control. */
.pls-qs--btn-theme .pls-qs__btn:hover .fa-stack {
	color: var(--pls-qs-accent, inherit) !important;
	/* The border too. It usually carries a palette class of its own, which would
	   otherwise hold its colour through the hover. */
	border-color: var(--pls-qs-accent, currentColor) !important;
}

/* A solid button stays solid on hover: the fill moves to the accent (the theme's
   btn-hover-nobg was stripping it to nothing), the border follows the fill, and the
   chevron keeps its chosen colour. */
.pls-qs--filled.pls-qs--btn-theme .pls-qs__btn:hover .fa-stack {
	background-color: var(--pls-qs-accent, inherit) !important;
	border-color: var(--pls-qs-accent, currentColor) !important;
	color: inherit !important;
	transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

.pls-qs--btn-theme.pls-qs--circle .pls-qs__btn .fa-stack { border-radius: 50% !important; }
.pls-qs--btn-theme.pls-qs--square .pls-qs__btn .fa-stack { border-radius: 0 !important; }

/* ----- track ----- */

.pls-qs__viewport {
	order: 1;
	overflow: hidden;
}

.pls-qs__track {
	display: flex;
	gap: var(--pls-qs-gap, 32px);
	/* Vertical page scrolling is never blocked: the browser keeps pan-y and the
	   script only ever claims the horizontal axis. */
	touch-action: pan-y;
	will-change: transform;
	transition: transform var(--pls-qs-speed, 500ms) cubic-bezier(.25, 1, .5, 1);
}

.pls-qs__track.is-dragging {
	transition: none;
	cursor: grabbing;
}

.pls-qs.is-draggable .pls-qs__track { cursor: grab; }

.pls-qs__slide {
	flex: 0 0 auto;
	/* border-box so a divider's border and padding come out of the slide's width
	   rather than pushing the track wider than the measured step. */
	box-sizing: border-box;
	width: calc((100% - (var(--pls-qs-gap, 32px) * (var(--pls-qs-per, 3) - 1))) / var(--pls-qs-per, 3));
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* The rule belongs to the slide, so it can never drift out of step with the slide it
   separates. currentColor faded, unless a palette colour was chosen. */
.pls-qs--dividers .pls-qs__slide {
	border-left: var(--pls-qs-div-w, 1px) solid currentColor;
	padding-left: var(--pls-qs-div-pad, 24px);
}

.pls-qs--dividers .pls-qs__slide:not([class*="border-"]):not([style*="border-left-color"]) {
	border-left-color: rgba(128, 128, 128, .3);
}

.pls-qs__logo {
	height: var(--pls-qs-logo, 40px);
	display: flex;
	align-items: center;
	/* On top of the slide's 16px gap: the logo reads as a header, not a line item. */
	margin-bottom: 8px;
}

.pls-qs__img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: left center;
}

/* Logo colour. Black and white flatten the artwork completely (grayscale first so a
   mid-tone colour cannot survive as grey); greyscale keeps the shading. */
.pls-qs--logo-black .pls-qs__img { filter: grayscale(1) brightness(0); }
.pls-qs--logo-white .pls-qs__img { filter: grayscale(1) brightness(0) invert(1); }
.pls-qs--logo-grey .pls-qs__img { filter: grayscale(1); }

.pls-qs__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* The attribution sits at the BOTTOM of the slide, so names line up across the
	   row however long each quote runs (slides stretch to the tallest). */
	margin-top: auto;
	padding-top: 16px;
}

.pls-qs__name { font-weight: 600; }

.pls-qs__role {
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .7;
}

.pls-qs__quote {
	margin: 0;
	font-size: var(--pls-qs-fs, inherit);
	font-weight: var(--pls-qs-fw, inherit);
}

/* Tablet and mobile counts are their own settings (defaults 2 and 1), carried as
   variables so the width calc stays in one place. */
@media (max-width: 1023px) {
	.pls-qs { --pls-qs-per: var(--pls-qs-per-t, 2); }
}

@media (max-width: 767px) {
	.pls-qs { --pls-qs-per: var(--pls-qs-per-m, 1); }
}

@media (prefers-reduced-motion: reduce) {
	.pls-qs__track { transition: none; }
}