/* Qaiyo Content Slider Pro — extra layouts.
   Loaded only on pages that actually render one of these layouts (the free
   plugin enqueues the handle for the active layout only). */

/* The free stylesheet paints an autoplay progress fill into the active
   indicator; these layouts use round dots, which must stay plain. */
[data-layout="accordion"] .qcs-indicator-active::after,
[data-layout="cardstack"] .qcs-indicator-active::after,
[data-layout="featurecards"] .qcs-indicator-active::after,
[data-layout="splithero"] .qcs-indicator-active::after {
	display: none !important;
}

/* =========================================================================
   Accordion — a row of tall cards, all visible at once. The active card
   reveals its heading + text + button in a bottom card; the inactive cards
   show only their heading in a slim bottom bar. The JS runtime translates the
   track so the active card is pinned to the left.
   ========================================================================= */
[data-layout="accordion"].qcs-slider {
	background: transparent;
	border-radius: 0;
	overflow: visible;
	padding-bottom: 60px;
}

[data-layout="accordion"] .qcs-slides {
	position: relative;
	display: flex;
	gap: 18px;
	align-items: stretch;
	overflow: hidden;
	border-radius: 0;
	min-height: var(--qcs-min-height, 480px);
	transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

[data-layout="accordion"] .qcs-slide {
	position: relative;
	inset: auto;
	flex: 0 0 30%;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	border-radius: 16px;
	overflow: hidden;
	/* Neutralise the free fade / slide transition engine — the track moves. */
	transform: none !important;
}

/* Bottom scrim for text legibility (replaces the left overlay gradient). */
[data-layout="accordion"] .qcs-slide::after {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 55%);
}

/* Inactive card: heading-only bar anchored to the bottom, full width. */
[data-layout="accordion"] .qcs-slide-box {
	position: absolute;
	inset: auto 16px 16px 16px;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 13px 18px;
	border-radius: 12px;
	background: rgba(20, 21, 26, 0.55);
	color: #ffffff;
	box-shadow: none;
	transition: background 0.35s ease, padding 0.35s ease;
}

[data-layout="accordion"] .qcs-slide-heading {
	color: #ffffff;
	font-size: var( --qcs-heading-size, 1.35em );
}

[data-layout="accordion"] .qcs-slide-text {
	color: rgba(255, 255, 255, 0.82);
}

/* Inactive cards hide the description + CTA; only the heading shows. */
[data-layout="accordion"] .qcs-slide:not(.qcs-slide-active) .qcs-slide-text,
[data-layout="accordion"] .qcs-slide:not(.qcs-slide-active) .qcs-cta {
	display: none;
}

[data-layout="accordion"] .qcs-slide:not(.qcs-slide-active) .qcs-slide-heading {
	margin: 0;
}

/* Active card: a taller text card at the bottom, honouring box position. */
[data-layout="accordion"] .qcs-slide-active .qcs-slide-box {
	right: auto;
	max-width: 78%;
	padding: 20px 22px;
	background: rgba(18, 19, 24, 0.62);
}

[data-layout="accordion"] .qcs-slide-active[data-position="right"] .qcs-slide-box {
	left: auto;
	right: 16px;
}

/* Dot indicators bottom-left; arrows in the band bottom-right. */
[data-layout="accordion"] .qcs-indicators {
	top: auto;
	bottom: 20px;
	left: 4px;
	right: auto;
	justify-content: flex-start;
}

[data-layout="accordion"] .qcs-indicator {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	min-width: 0;
	border-radius: 50%;
	background: rgba(20, 21, 26, 0.28);
}

[data-layout="accordion"] .qcs-indicator-active {
	background: #1d2327;
}

[data-layout="accordion"] .qcs-controls {
	top: auto;
	bottom: 8px;
	right: 4px;
	left: auto;
}

/* Thin closing rule above the controls band. */
[data-layout="accordion"].qcs-slider::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 52px;
	height: 1px;
	background: rgba(0, 0, 0, 0.1);
}

/* Arrows sit on the light page background here — dark outline, not white. */
[data-layout="accordion"] .qcs-arrow {
	background: #ffffff;
	border: 1px solid #d1d5db;
	color: #1d2327;
}

[data-layout="accordion"] .qcs-arrow:hover,
[data-layout="accordion"] .qcs-arrow:focus {
	background: #f3f4f6;
}

/* Peeking cards are clickable/focusable to expand. */
[data-layout="accordion"] .qcs-slide:not(.qcs-slide-active) {
	cursor: pointer;
}

[data-layout="accordion"] .qcs-slide:not(.qcs-slide-active):focus-visible {
	outline: 3px solid var(--qcsp-fc-accent, #6c5ce7);
	outline-offset: -3px;
}

/* =========================================================================
   Card deck — a stacked deck of quote cards. The front card is fully
   visible; the ones behind peek out lower and narrower. On advance the front
   card animates away (up + fade) and the next comes forward.
   ========================================================================= */
[data-layout="cardstack"].qcs-slider {
	background: transparent;
	border-radius: 0;
	overflow: visible;
	padding-bottom: 96px;
}

[data-layout="cardstack"] .qcs-slides {
	position: relative;
	overflow: visible;
	min-height: var(--qcs-min-height, 460px);
}

[data-layout="cardstack"] .qcs-slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 22px;
	padding: 48px 56px;
	box-sizing: border-box;
	background: var(--qcsp-fc-surface, #ffffff);
	border-radius: 24px;
	box-shadow: 0 18px 50px rgba(19, 22, 40, 0.12);
	transform-origin: center top;
	transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
	will-change: transform, opacity;
}

/* No image-overlay gradient inside a card. */
[data-layout="cardstack"] .qcs-slide::after {
	display: none;
}

/* The front card lifts up and fades on a forward advance. */
[data-layout="cardstack"] .qcs-slide.qcs-slide-leaving {
	transform: translateY(-32px) scale(1.04) !important;
	opacity: 0 !important;
}

/* Logo: a small, contained mark at the top (not a full-bleed image). */
[data-layout="cardstack"] .qcs-slide-media {
	position: relative;
	inset: auto;
	overflow: visible;
	flex: 0 0 auto;
	width: auto;
}

[data-layout="cardstack"] .qcs-slide-img {
	width: auto;
	max-width: 220px;
	max-height: 64px;
	height: auto;
	object-fit: contain;
	margin: 0 auto;
}

/* Divider under the logo. */
[data-layout="cardstack"] .qcs-slide-box::before {
	content: "";
	display: block;
	width: 30%;
	min-width: 120px;
	height: 1px;
	margin: 0 auto 26px;
	background: var(--qcsp-fc-border, #e5e7eb);
}

/* The card body is a plain centred column, no floating-box chrome. */
[data-layout="cardstack"] .qcs-slide-box {
	position: static;
	z-index: auto;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
}

[data-layout="cardstack"] .qcs-slide-heading {
	font-size: var( --qcs-heading-size, clamp(1.5em, 2.4vw, 2.1em) );
	line-height: 1.25;
	font-weight: 800;
	color: var(--qcsp-fc-text, #1a1c2e);
	margin: 0 0 20px;
}

[data-layout="cardstack"] .qcs-slide-text {
	font-size: var( --qcs-text-size, 1.05em );
	font-weight: 600;
	color: var(--qcsp-fc-muted, #8a8f9c);
	margin: 0 0 26px;
}

[data-layout="cardstack"] .qcs-slide-text::before {
	content: "\2014\00a0";
}

[data-layout="cardstack"] .qcs-cta {
	padding: 14px 34px;
	font-size: var( --qcs-button-size, 1em );
}

/* Controls below the deck: arrows flanking a centred dot row. */
[data-layout="cardstack"] .qcs-live {
	position: absolute;
}

[data-layout="cardstack"] .qcs-controls {
	top: auto;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 340px;
	max-width: 86%;
	justify-content: space-between;
	pointer-events: none;
}

[data-layout="cardstack"] .qcs-arrow {
	pointer-events: auto;
	width: 44px;
	height: 44px;
	background: var(--qcsp-fc-surface, #ffffff);
	border: 1px solid var(--qcsp-fc-border, #e5e7eb);
	color: var(--qcsp-fc-text, #1d2327);
	box-shadow: 0 4px 12px rgba(19, 22, 40, 0.08);
}

[data-layout="cardstack"] .qcs-arrow-next {
	border-color: var(--qcsp-fc-accent, #6c5ce7);
	color: var(--qcsp-fc-accent, #6c5ce7);
}

[data-layout="cardstack"] .qcs-arrow:hover,
[data-layout="cardstack"] .qcs-arrow:focus {
	background: var(--qcsp-fc-page, #f8f6ff);
}

/* Hide the pause button here — the deck has none. */
[data-layout="cardstack"] .qcs-pause {
	display: none;
}

[data-layout="cardstack"] .qcs-indicators {
	top: auto;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	gap: 8px;
	align-items: center;
	justify-content: center;
	z-index: 3;
}

[data-layout="cardstack"] .qcs-indicator {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	min-width: 0;
	border-radius: 50%;
	background: var(--qcsp-fc-border, #d1d5db);
	transition: width 0.3s ease, background 0.3s ease;
}

[data-layout="cardstack"] .qcs-indicator-active {
	width: 30px;
	border-radius: 4px;
	background: var(--qcsp-fc-accent, #6c5ce7);
}

/* =========================================================================
   Feature cards — a row of icon/heading/text cards on a tinted page, each
   with a round button that opens a detail panel. All cards stay visible and
   interactive; the arrows page the track sideways.
   ========================================================================= */
[data-layout="featurecards"].qcs-slider {
	background: var(--qcsp-fc-page, #f5f5f7);
	border-radius: 22px;
	overflow: hidden;
	min-height: 0;
	padding: 36px 0 84px;
}

[data-layout="featurecards"] .qcs-slides {
	--qcsp-fc-cols: 4;
	--qcsp-fc-gap: 20px;

	position: relative;
	display: flex;
	gap: var(--qcsp-fc-gap);
	align-items: stretch;
	min-height: 0;
	padding: 0 36px;
	box-sizing: border-box;
	transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

[data-layout="featurecards"] .qcs-slide {
	position: relative;
	inset: auto;
	flex: 0 0 calc((100% - (var(--qcsp-fc-cols) - 1) * var(--qcsp-fc-gap)) / var(--qcsp-fc-cols));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	background: var(--qcsp-fc-surface, #ffffff);
	color: var(--qcsp-fc-text, #1d1d1f);
	border-radius: 18px;
	padding: 26px 24px 76px;
	box-sizing: border-box;
	/* The free transition engine must not move these cards. */
	transform: none !important;
	transition: none;
}

[data-layout="featurecards"] .qcs-slide::after {
	display: none;
}

/* Icon — either the slide image, or a Dashicon when no image is set. */
[data-layout="featurecards"] .qcs-slide-media {
	position: relative;
	inset: auto;
	order: -1;
	overflow: visible;
	flex: 0 0 auto;
	width: auto;
	margin-bottom: 18px;
}

[data-layout="featurecards"] .qcs-slide-img {
	width: auto;
	height: auto;
	max-width: 44px;
	max-height: 40px;
	object-fit: contain;
}

[data-layout="featurecards"] .qcsp-fc-icon {
	order: -1;
	margin-bottom: 18px;
	font-size: 34px;
	width: 34px;
	height: 34px;
	line-height: 1;
	color: var(--qcsp-fc-text, #1d1d1f);
}

[data-layout="featurecards"] .qcs-slide-box {
	position: static;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	text-align: left;
}

[data-layout="featurecards"] .qcs-slide-heading {
	font-size: var( --qcs-heading-size, 1.32em );
	line-height: 1.24;
	font-weight: 700;
	color: var(--qcsp-fc-text, #1d1d1f);
	margin: 0 0 12px;
}

[data-layout="featurecards"] .qcs-slide-text {
	font-size: var( --qcs-text-size, 0.95em );
	line-height: 1.5;
	color: var(--qcsp-fc-muted, #6e6e73);
	margin: 0;
}

/* The free CTA is replaced by the round button below. */
[data-layout="featurecards"] .qcs-cta {
	display: none;
}

/* Round action button, bottom-right of each card. */
.qcsp-fc-toggle {
	position: absolute;
	right: 22px;
	bottom: 22px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--qcsp-fc-btn, #1d1d1f);
	color: var(--qcsp-fc-btn-fg, #ffffff);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.qcsp-fc-toggle:hover,
.qcsp-fc-toggle:focus {
	transform: scale(1.08);
	color: var(--qcsp-fc-btn-fg, #ffffff);
}

/* "+" glyph drawn with two bars so no icon font is needed. */
.qcsp-fc-toggle-glyph {
	position: relative;
	width: 14px;
	height: 14px;
}

.qcsp-fc-toggle-glyph::before,
.qcsp-fc-toggle-glyph::after {
	content: "";
	position: absolute;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.25s ease;
}

.qcsp-fc-toggle-glyph::before {
	left: 0;
	right: 0;
	top: 6px;
	height: 2px;
}

.qcsp-fc-toggle-glyph::after {
	top: 0;
	bottom: 0;
	left: 6px;
	width: 2px;
}

/* Link variant: a chevron instead of a plus — same glyph box, redrawn. */
.qcsp-fc-toggle-link .qcsp-fc-toggle-glyph::before {
	left: 2px;
	top: 3px;
	right: auto;
	bottom: auto;
	width: 8px;
	height: 8px;
	background: none;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	border-radius: 0;
	transform: rotate(45deg);
}

.qcsp-fc-toggle-link .qcsp-fc-toggle-glyph::after {
	display: none;
}

/* Bottom-right paging arrows for the whole section. */
[data-layout="featurecards"] .qcs-controls {
	top: auto;
	bottom: 26px;
	right: 36px;
	left: auto;
	gap: 8px;
}

[data-layout="featurecards"] .qcs-arrow {
	width: 38px;
	height: 38px;
	border: 0;
	background: var(--qcsp-fc-border, rgba(0, 0, 0, 0.08));
	color: var(--qcsp-fc-text, #1d1d1f);
	font-size: 18px;
}

[data-layout="featurecards"] .qcs-arrow:hover,
[data-layout="featurecards"] .qcs-arrow:focus {
	background: var(--qcsp-fc-accent, #6c5ce7);
	color: #ffffff;
}

[data-layout="featurecards"] .qcs-pause {
	display: none;
}

[data-layout="featurecards"] .qcs-indicators {
	top: auto;
	bottom: 32px;
	left: 36px;
	right: auto;
	width: auto;
	gap: 7px;
}

[data-layout="featurecards"] .qcs-indicator {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	min-width: 0;
	border-radius: 50%;
	background: var(--qcsp-fc-border, rgba(0, 0, 0, 0.15));
}

[data-layout="featurecards"] .qcs-indicator-active {
	background: var(--qcsp-fc-accent, #6c5ce7);
}

/* -------------------------------------------------------------------------
   Detail panel. The JS runtime moves these to <body> on init, because the
   track uses a transform, and a transformed ancestor becomes the containing
   block for position:fixed — which would trap the panel inside the slider.
   ------------------------------------------------------------------------- */
.qcsp-fc-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: var(--qcsp-fc-scrim, rgba(255, 255, 255, 0.6));
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.qcsp-fc-backdrop.is-open {
	opacity: 1;
}

.qcsp-fc-panel {
	position: fixed;
	z-index: 100001;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.96);
	width: min(560px, calc(100vw - 32px));
	max-height: min(82vh, 660px);
	overflow-y: auto;
	box-sizing: border-box;
	padding: 44px 44px 40px;
	border-radius: 22px;
	background: var(--qcsp-fc-surface, #ffffff);
	color: var(--qcsp-fc-text, #1d1d1f);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.qcsp-fc-panel.is-open {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.qcsp-fc-panel[hidden] {
	display: none;
}

.qcsp-fc-close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--qcsp-fc-btn, #1d1d1f);
	color: var(--qcsp-fc-btn-fg, #ffffff);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qcsp-fc-close:hover,
.qcsp-fc-close:focus {
	opacity: 0.85;
	color: var(--qcsp-fc-btn-fg, #ffffff);
}

.qcsp-fc-eyebrow {
	margin: 0 0 14px;
	font-size: 0.92em;
	font-weight: 600;
	color: var(--qcsp-fc-text, #1d1d1f);
}

.qcsp-fc-title {
	margin: 0 0 20px;
	font-size: clamp(1.6em, 3vw, 2.2em);
	line-height: 1.18;
	font-weight: 800;
	color: var(--qcsp-fc-text, #1d1d1f);
}

.qcsp-fc-body {
	font-size: 1em;
	line-height: 1.55;
	color: var(--qcsp-fc-muted, #6e6e73);
}

.qcsp-fc-link {
	display: inline-block;
	margin-top: 22px;
	font-size: 1em;
	font-weight: 500;
	color: var(--qcsp-fc-link, #6c5ce7);
	text-decoration: none;
}

.qcsp-fc-link::after {
	content: "\00a0\203A";
}

.qcsp-fc-link:hover,
.qcsp-fc-link:focus {
	text-decoration: underline;
	color: var(--qcsp-fc-link, #6c5ce7);
}

/* Page behind an open panel must not scroll. */
html.qcsp-fc-locked,
body.qcsp-fc-locked {
	overflow: hidden;
}

/* =========================================================================
   Split hero — a full-bleed hero band: a full-height image filling one half,
   a solid colour content panel filling the other, and a vertical indicator
   rail pinned to the left edge.

   The colours are the free plugin's own per-slider / per-slide controls, so
   there is no second set of pickers to keep in sync:
     --qcs-box-bg     ("Box background") paints the content panel
     --qcs-font-color ("Font color")     paints the text, icon and rail, and
                                         is inverted for the CTA
   Everything inside the panel is optional: the free template only prints the
   heading / text / button it actually has, and the icon comes from this
   plugin's before-content hook only when one is chosen.

   The slide stays absolutely positioned inside .qcs-slides, so the free
   fade / slide transition engine drives this layout unchanged.
   ========================================================================= */
[data-layout="splithero"].qcs-slider {
	border-radius: 0;
	/* Painted behind the slides so a cross-fade never flashes the free
	   stylesheet's dark default between two panels. */
	background: var( --qcs-box-bg, #ffffff );
}

/* Full-width breakout. --qcsp-sh-vw is set by the layout runtime to
   documentElement.clientWidth, which EXCLUDES the scrollbar — plain 100vw
   includes it and would make the page scroll sideways by the scrollbar's
   width. The 100vw fallback only applies with JS off.

   The negative margins carry !important because a block theme's constrained
   layout ships `margin-left/right: auto !important` on every child of
   .is-layout-constrained; without it the element keeps its full-viewport
   width but stays inside the container's padding, overflowing the page by
   exactly that padding. The percentage resolves against the container, so
   the same formula lands the slider at the viewport edge whatever the
   theme's content width happens to be. */
[data-layout="splithero"][data-qcsp-full="1"].qcs-slider,
[data-layout="mosaic"][data-qcsp-full="1"].qcs-slider {
	width: var( --qcsp-sh-vw, 100vw );
	max-width: var( --qcsp-sh-vw, 100vw );
	margin-left: calc( 50% - var( --qcsp-sh-vw, 100vw ) / 2 ) !important;
	margin-right: calc( 50% - var( --qcsp-sh-vw, 100vw ) / 2 ) !important;
}

/* Two stretched panels. The free markup order is media → box, so the default
   row puts the image left; data-position="left" means the TEXT box is on the
   left, which reverses the row and sends the image to the right. */
[data-layout="splithero"] .qcs-slide {
	align-items: stretch;
	flex-direction: row;
	background: var( --qcs-box-bg, #ffffff );
}

[data-layout="splithero"] .qcs-slide[data-position="left"] {
	flex-direction: row-reverse;
}

/* The image becomes a real panel rather than an absolute backdrop. */
[data-layout="splithero"] .qcs-slide-media {
	position: relative;
	inset: auto;
	flex: 1 1 50%;
	min-width: 0;
	align-self: stretch;
}

/* No darkening gradient — the image owns its own half. */
[data-layout="splithero"] .qcs-slide::after {
	display: none;
}

[data-layout="splithero"] .qcs-slide-box {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: none;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	padding: clamp( 40px, 6vw, 96px ) clamp( 28px, 4vw, 72px );
}

/* When the panel is the left one it sits under the indicator rail, so it
   needs enough inset to clear it. */
[data-layout="splithero"] .qcs-slide[data-position="left"] .qcs-slide-box {
	padding-left: clamp( 64px, 8vw, 140px );
}

/* Optional icon above the heading. */
[data-layout="splithero"] .qcsp-sh-icon {
	font-size: 34px;
	width: 34px;
	height: 34px;
	line-height: 1;
	margin: 0 0 18px;
	color: inherit;
}

[data-layout="splithero"] .qcs-slide-heading {
	font-size: var( --qcs-heading-size, clamp( 1.9em, 3.1vw, 3em ) );
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
}

[data-layout="splithero"] .qcs-slide-text {
	line-height: 1.65;
	max-width: 46ch;
	opacity: 0.88;
	margin: 0 0 28px;
}

/* Inverted CTA: the panel's text colour becomes the fill, the panel colour
   becomes the label — so it contrasts with whatever panel colour is set. */
[data-layout="splithero"] .qcs-cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 0;
	padding: 14px 26px;
	font-size: var( --qcs-button-size, 0.95em );
	background: var( --qcs-font-color, #ffffff );
	color: var( --qcs-box-bg, #1d2327 );
	transition: opacity 0.18s ease, transform 0.18s ease;
}

[data-layout="splithero"] .qcs-cta::before {
	content: "\203A";
	font-size: 1.3em;
	line-height: 0;
	font-weight: 400;
}

[data-layout="splithero"] .qcs-cta:hover,
[data-layout="splithero"] .qcs-cta:focus {
	background: var( --qcs-font-color, #ffffff );
	color: var( --qcs-box-bg, #1d2327 );
	opacity: 0.85;
	transform: translateX( 2px );
}

/* ---- Vertical indicator rail, always pinned to the left ---------------- */
[data-layout="splithero"] .qcs-indicators {
	flex-direction: column;
	top: 50%;
	bottom: auto;
	left: clamp( 16px, 2vw, 30px );
	right: auto;
	transform: translateY( -50% );
	gap: 2px;
	/* currentColor drives the dots; over the content panel the panel's own
	   text colour is guaranteed to contrast with it. */
	color: var( --qcs-font-color, #ffffff );
}

/* When the ACTIVE slide puts the content on the right, the rail sits over the
   image instead — switch to white with a shadow so it stays readable on any
   photo. :has() re-evaluates on every slide change, so this tracks live. */
[data-layout="splithero"]:has( .qcs-slide-active[data-position="right"] ) .qcs-indicators {
	color: #ffffff;
	filter: drop-shadow( 0 1px 3px rgba( 0, 0, 0, 0.5 ) );
}

/* The dot is drawn as a pseudo-element so the button itself can stay a
   24x24 hit area (WCAG 2.2 SC 2.5.8 Target Size) while the visible dot
   stays small. The gap is tightened to compensate for the padding. */
[data-layout="splithero"] .qcs-indicators .qcs-indicator {
	position: relative;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
}

[data-layout="splithero"] .qcs-indicators .qcs-indicator::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.8;
	transform: translate( -50%, -50% );
	transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}

[data-layout="splithero"] .qcs-indicators .qcs-indicator:hover::before,
[data-layout="splithero"] .qcs-indicators .qcs-indicator:focus-visible::before {
	opacity: 1;
}

/* Active dot: an outlined ring, as in the reference design. */
[data-layout="splithero"] .qcs-indicators .qcs-indicator-active::before {
	width: 12px;
	height: 12px;
	background: transparent;
	border: 2px solid currentColor;
	opacity: 1;
}

/* ---- Arrows / pause: bottom of whichever half holds the content -------- */
[data-layout="splithero"] .qcs-controls {
	bottom: clamp( 18px, 2.4vw, 32px );
	left: clamp( 64px, 8vw, 140px );
	right: auto;
}

[data-layout="splithero"]:has( .qcs-slide-active[data-position="right"] ) .qcs-controls {
	left: auto;
	right: clamp( 28px, 4vw, 72px );
}

/* =========================================================================
   Content mosaic — a STATIC grid: every tile is on screen at once, so there
   is no active slide, no autoplay and no slider chrome. The free engine still
   owns the markup and the dynamic sources; this layout only re-arranges them.

   Each tile is a real <img> photo (never a CSS background, so it stays
   indexable) with an optional caption over a bottom scrim. The whole tile is
   one stretched link named after its heading, and the heading turns into a
   button on hover / keyboard focus.

   Patterns repeat every 3 (or 2) tiles, so more slides simply extend the grid
   downwards; the rules at the end of this block tidy up a ragged last row.
   ========================================================================= */
[data-layout="mosaic"].qcs-slider {
	--qcsp-mo-row: calc( var( --qcs-min-height, 560px ) / 2 );
	background: transparent;
	border-radius: 0;
	overflow: visible;
}

/* This layout renders no navigation at all. */
[data-layout="mosaic"] .qcs-indicators,
[data-layout="mosaic"] .qcs-controls {
	display: none;
}

[data-layout="mosaic"] .qcs-slides {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	/* minmax(), not a fixed row height: the tile clips its overflow, so at 200%
	   text zoom a long caption in a short tile would otherwise be cut off at
	   the top (WCAG 1.4.4). The row keeps its nominal height and only grows
	   when a caption genuinely needs more room. */
	grid-auto-rows: minmax( var( --qcsp-mo-row ), auto );
	gap: var( --qcsp-mo-gap, 16px );
	min-height: 0;
	height: auto;
}

/* Tiles are laid out by the grid, so the absolute-positioned fade / slide
   transition engine has to be switched off for them. */
[data-layout="mosaic"] .qcs-slide {
	position: relative;
	inset: auto;
	display: flex;
	align-items: flex-end;
	min-width: 0;
	overflow: hidden;
	border-radius: var( --qcsp-mo-radius, 18px );
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: none;
	transform: none !important;
	/* Fallback plate, so a tile with no image never collapses the grid. */
	background: #c3cad9;
}

/* Ken Burns animates only the active slide, which is meaningless in a grid. */
[data-layout="mosaic"] .qcs-slide-img {
	animation: none !important;
	transition: transform 0.5s cubic-bezier( 0.16, 1, 0.3, 1 );
}

[data-layout="mosaic"] .qcs-slide:hover .qcs-slide-img {
	transform: scale( 1.05 );
}

/* Bottom scrim instead of the free left-to-right gradient — and only when
   there is a caption to make legible. */
[data-layout="mosaic"] .qcs-slide::after {
	z-index: 1;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.62 ) 0%, rgba( 0, 0, 0, 0.16 ) 38%, rgba( 0, 0, 0, 0 ) 64% );
}

[data-layout="mosaic"] .qcs-slide:not( :has( .qcs-slide-heading, .qcs-slide-text ) )::after {
	display: none;
}

/* ---- Caption ---------------------------------------------------------- */
[data-layout="mosaic"] .qcs-slide-box {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: clamp( 20px, 2.2vw, 32px );
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #ffffff;
}

/* An empty caption box would still eat padding at the bottom of the tile. */
[data-layout="mosaic"] .qcs-slide-box:not( :has( .qcs-slide-heading, .qcs-slide-text ) ) {
	display: none;
}

/* The position control aligns the caption inside its own tile. */
[data-layout="mosaic"] .qcs-slide[data-position="right"] .qcs-slide-box {
	align-items: flex-end;
	text-align: right;
}

/* Plain caption heading. The tile is still one big link — its focus ring
   (on .qcsp-mo-link below) is the keyboard affordance — but the heading
   itself no longer turns into a button on hover. */
[data-layout="mosaic"] .qcs-slide-heading {
	margin: 0;
	font-size: var( --qcs-heading-size, clamp( 1.05em, 1.5vw, 1.45em ) );
	line-height: 1.2;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.45 );
}

[data-layout="mosaic"] .qcs-slide-text {
	margin: 0;
	max-width: 46ch;
	font-size: var( --qcs-text-size, 0.9em );
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.92 );
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5 );
}

/* The heading is the call to action here, so the free button is redundant. */
[data-layout="mosaic"] .qcs-cta {
	display: none;
}

/* ---- Stretched tile link ---------------------------------------------- */
[data-layout="mosaic"] .qcsp-mo-link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
}

[data-layout="mosaic"] .qcsp-mo-link:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: -6px;
}

/* ---- Tile patterns ----------------------------------------------------- */

/* Two columns: every third tile is full height on the left... */
[data-qcsp-mosaic="col-tall"][data-qcsp-mosaic-reverse="0"] .qcs-slide:nth-child( 3n + 1 ) {
	grid-row: span 2;
}

/* ...or on the right, which needs dense packing so the two small tiles
   backfill the column the tall one skipped. */
[data-qcsp-mosaic="col-tall"][data-qcsp-mosaic-reverse="1"] .qcs-slides {
	grid-auto-flow: row dense;
}

[data-qcsp-mosaic="col-tall"][data-qcsp-mosaic-reverse="1"] .qcs-slide:nth-child( 3n + 1 ) {
	grid-column: 2;
	grid-row: span 2;
}

/* Two rows: a full-width band on top... */
[data-qcsp-mosaic="row-wide"][data-qcsp-mosaic-reverse="0"] .qcs-slide:nth-child( 3n + 1 ) {
	grid-column: span 2;
}

/* ...or underneath the two halves. */
[data-qcsp-mosaic="row-wide"][data-qcsp-mosaic-reverse="1"] .qcs-slide:nth-child( 3n + 3 ) {
	grid-column: span 2;
}

/* ---- Ragged last row --------------------------------------------------- */

/* A single leftover tile fills the row rather than leaving a hole beside it. */
[data-qcsp-mosaic="col-tall"] .qcs-slide:nth-child( 3n + 1 ):last-child,
[data-qcsp-mosaic="row-wide"] .qcs-slide:nth-child( 3n + 1 ):last-child,
[data-qcsp-mosaic="grid"] .qcs-slide:nth-child( odd ):last-child {
	grid-column: 1 / -1;
	grid-row: span 1;
}

/* Two leftover tiles sit side by side instead of one tall + one short. */
[data-qcsp-mosaic="col-tall"][data-qcsp-mosaic-reverse="0"] .qcs-slide:nth-child( 3n + 1 ):nth-last-child( 2 ) {
	grid-row: span 1;
}

[data-qcsp-mosaic="col-tall"][data-qcsp-mosaic-reverse="1"] .qcs-slide:nth-child( 3n + 1 ):nth-last-child( 2 ) {
	grid-column: 2;
	grid-row: span 1;
}

[data-qcsp-mosaic="row-wide"][data-qcsp-mosaic-reverse="0"] .qcs-slide:nth-child( 3n + 1 ):nth-last-child( 2 ) {
	grid-column: auto;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	[data-layout="featurecards"] .qcs-slides {
		--qcsp-fc-cols: 3;
	}
}

@media (max-width: 900px) {
	[data-layout="mosaic"].qcs-slider {
		--qcsp-mo-row: calc( var( --qcs-min-height, 560px ) / 2.5 );
	}


	[data-layout="featurecards"] .qcs-slides {
		--qcsp-fc-cols: 2;
	}

	[data-layout="accordion"] .qcs-slide {
		flex-basis: 46%;
	}
}

@media (max-width: 600px) {
	/* ---- Content mosaic: a single column of equal cards ----------------- */
	[data-layout="mosaic"] .qcs-slides {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		grid-auto-rows: auto;
	}

	/* One declaration retires every pattern rule above, whichever is active. */
	[data-layout="mosaic"] .qcs-slide {
		grid-column: auto !important;
		grid-row: auto !important;
		aspect-ratio: 16 / 11;
	}


	/* ---- Split hero: stack the two panels, image on top ---------------- */
	[data-layout="splithero"] .qcs-slide,
	[data-layout="splithero"] .qcs-slide[data-position="left"] {
		flex-direction: column;
	}

	[data-layout="splithero"] .qcs-slide-media {
		flex: 0 0 42%;
		min-height: 190px;
	}

	[data-layout="splithero"] .qcs-slide-box,
	[data-layout="splithero"] .qcs-slide[data-position="left"] .qcs-slide-box {
		flex: 1 1 auto;
		padding: 26px 20px 30px;
	}

	[data-layout="splithero"] .qcsp-sh-icon {
		font-size: 28px;
		width: 28px;
		height: 28px;
		margin-bottom: 12px;
	}

	[data-layout="splithero"] .qcs-slide-heading {
		font-size: var( --qcs-heading-size, 1.55em );
		margin-bottom: 12px;
	}

	[data-layout="splithero"] .qcs-slide-text {
		margin-bottom: 20px;
	}

	/* The rail stays on the left, but moves to the top so it never collides
	   with the CTA at the bottom of the stacked content panel. It now sits
	   over the image, so it is white with a shadow in both positions. */
	[data-layout="splithero"] .qcs-indicators,
	[data-layout="splithero"]:has( .qcs-slide-active[data-position="right"] ) .qcs-indicators {
		flex-direction: row;
		top: 16px;
		bottom: auto;
		left: 16px;
		right: auto;
		transform: none;
		color: #ffffff;
		filter: drop-shadow( 0 1px 3px rgba( 0, 0, 0, 0.5 ) );
	}

	/* Arrows move to the bottom-right so they clear the CTA. */
	[data-layout="splithero"] .qcs-controls,
	[data-layout="splithero"]:has( .qcs-slide-active[data-position="right"] ) .qcs-controls {
		left: auto;
		right: 16px;
		bottom: 16px;
	}


	/* Show one card plus a peek of the next, so paging is discoverable. */
	[data-layout="featurecards"] .qcs-slides {
		--qcsp-fc-cols: 1.15;
		--qcsp-fc-gap: 14px;
		padding: 0 18px;
	}

	[data-layout="featurecards"].qcs-slider {
		padding: 24px 0 76px;
		border-radius: 16px;
	}

	[data-layout="featurecards"] .qcs-slide {
		padding: 22px 20px 70px;
	}

	[data-layout="featurecards"] .qcs-controls {
		right: 18px;
		bottom: 22px;
	}

	[data-layout="featurecards"] .qcs-indicators {
		left: 18px;
		bottom: 28px;
	}

	.qcsp-fc-panel {
		padding: 40px 24px 28px;
		border-radius: 18px;
		max-height: 86vh;
	}

	/* Accordion: show ~1.3 cards so the active one dominates. */
	[data-layout="accordion"] .qcs-slides {
		gap: 12px;
	}

	[data-layout="accordion"] .qcs-slide {
		flex-basis: 78%;
	}

	[data-layout="accordion"] .qcs-slide-active .qcs-slide-box {
		max-width: none;
	}

	/* Card deck: tighter padding on small screens. */
	[data-layout="cardstack"] .qcs-slide {
		padding: 32px 24px;
		gap: 16px;
	}

	[data-layout="cardstack"] .qcs-controls {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-layout="mosaic"] .qcs-slide-img,
	[data-layout="splithero"] .qcs-cta,
	[data-layout="splithero"] .qcs-indicators .qcs-indicator::before,
	[data-layout="accordion"] .qcs-slides,
	[data-layout="cardstack"] .qcs-slide,
	[data-layout="featurecards"] .qcs-slides,
	.qcsp-fc-panel,
	.qcsp-fc-backdrop {
		transition: none !important;
	}
}