/**
 * Finewerk Testimonials Slider
 *
 * Scoped, BEM-style styles for the testimonial card slider widget.
 * The track is a native horizontal scroller with scroll snapping; drag,
 * keyboard and arrow behavior are layered on by testimonials-slider.js.
 * A CSS mask fades the track out at both horizontal edges, so cards
 * blend into the section instead of being clipped — independent of the
 * scroll position and movement logic, so it needs no JavaScript.
 * All custom properties are namespaced with --fw-ts- to avoid collisions.
 */

/* ------------------------------------------------------------------
 * Typography defaults (see assets/css/fonts.css)
 *
 * Hubot Sans for headings/titles/stat numbers, Archivo for everything
 * else. Declared at single-class specificity — the tag group through a
 * zero-specificity :where() — so an explicit Elementor Typography
 * control (which Elementor writes at element-id specificity) always
 * overrides it. No !important anywhere.
 * ---------------------------------------------------------------- */

.finewerk-testimonials-slider {
	font-family: var(--fw-font-body);
}

.finewerk-testimonials-slider :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fw-font-title);
}

/* Form controls do not inherit the document font: the UA sheet gives
   button/input/select/textarea their own `font: 400 13.33px Arial`.
   Opt them back into the component's face. */
.finewerk-testimonials-slider :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-testimonials-slider {
	--fw-ts-gap: 20px;
	--fw-ts-card-width: 300px;
	/* Hard ceiling for Version 1 cards: the width control and the responsive
	   widths below can only ever go under it, never past it. */
	--fw-ts-card-max-width: 300px;
	--fw-ts-card-height: 440px;
	--fw-ts-logo-max-width: 160px;
	--fw-ts-logo-height: 32px;
	--fw-ts-logo-gap: 36px;
	--fw-ts-edge-fade: 32px;
	--fw-ts-avatar-size: 56px;
	--fw-ts-author-gap: 14px;
	--fw-ts-heading-gap: 48px;
	--fw-ts-arrow-size: 44px;
	display: block;
	width: 100%;
	/* Keeps the mobile horizontal padding inside the 100% width, so the
	   section can never push the page wider than the viewport. */
	box-sizing: border-box;
	/* Scrolling is confined to the track; the page must never overflow. */
	overflow: hidden;
	padding: 56px 0 64px;
	background-color: #4A6B50;
}

/* ---------- Heading ---------- */

.finewerk-testimonials-slider__heading {
	margin: 0 0 var(--fw-ts-heading-gap);
	max-width: 680px;
	color: #10241A;
	font-family: var(--fw-font-title);
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-align: left;
}

/* ---------- Viewport + track ---------- */

.finewerk-testimonials-slider__viewport {
	position: relative;
}

.finewerk-testimonials-slider__viewport:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 3px;
	border-radius: 4px;
}

.finewerk-testimonials-slider__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--fw-ts-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	/* Hide the scrollbar in every engine. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Soft fade at both horizontal edges instead of a hard clip. The mask
	   is anchored to the element box, so it holds during scrolling, drag
	   and snapping without touching the slider movement. */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--fw-ts-edge-fade),
		#000 calc(100% - var(--fw-ts-edge-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--fw-ts-edge-fade),
		#000 calc(100% - var(--fw-ts-edge-fade)),
		transparent 100%
	);
}

.finewerk-testimonials-slider__track::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* Grab cursor only when drag-to-scroll is enabled. */
.finewerk-testimonials-slider[data-fw-ts-drag="yes"] .finewerk-testimonials-slider__track {
	cursor: grab;
}

/* While dragging: grabbing cursor, no snapping, no text selection. */
.finewerk-testimonials-slider.is-fw-ts-dragging .finewerk-testimonials-slider__track {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
	-webkit-user-select: none;
}

/* ---------- Card ---------- */

.finewerk-testimonials-slider__card {
	flex: 0 0 var(--fw-ts-card-width);
	/* Clamps the flex base size, so the card shrinks with the configured
	   width but never grows past the ceiling. */
	max-width: var(--fw-ts-card-max-width);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: var(--fw-ts-card-height);
	min-width: 0;
	margin: 0;
	padding: 28px;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 14px;
	scroll-snap-align: start;
}

/* ---------- Logo ---------- */

.finewerk-testimonials-slider__logo {
	display: block;
	flex: 0 0 auto;
	/* The cap lives on the wrapper too, so the logo box itself never
	   outgrows it even when the image is still decoding. */
	max-width: min(100%, var(--fw-ts-logo-max-width));
	margin: 0 0 var(--fw-ts-logo-gap);
}

.finewerk-testimonials-slider__logo-img {
	display: block;
	/* Both axes stay auto so the intrinsic aspect ratio drives the rendered
	   size: the two caps below can only ever shrink a logo, so a small one
	   is never stretched up to fill the box. */
	width: auto;
	height: auto;
	/* Clamped by the Elementor "Logo max width" setting, and by the card's
	   own width — whichever is smaller — so the cap still holds once the
	   cards narrow on tablet and mobile. */
	max-width: min(100%, var(--fw-ts-logo-max-width));
	max-height: var(--fw-ts-logo-height);
	object-fit: contain;
	object-position: left center;
}

/* ---------- Quote ---------- */

.finewerk-testimonials-slider__quote {
	/* "Top" (default, as the reference): the quote follows the logo at a
	   fixed gap; free space collects between quote and author instead. */
	margin: 0;
	/* The theme styles bare <blockquote> globally for blog post quotes --
	   `padding-left: 70px !important`, `width: 100%`, `min-height: 140px`
	   (softro/assets/css/blog-and-pages.css). That 70px indent is what pushed
	   the card text off the logo's left edge. It is cancelled at the source
	   here rather than compensated for with a negative margin; !important is
	   needed only because the theme's own declaration carries it. */
	padding: 0 !important;
	min-height: 0;
	/* auto, not the theme's 100%: the card is a flex column with the default
	   `align-items: stretch`, so the quote already spans the content box
	   between the card's paddings -- and keeps doing so as the card narrows. */
	width: auto;
	max-width: 100%;
	border: 0;
	background: none;
	quotes: none;
	/* Never inherit a centered alignment from a parent section. */
	text-align: left;
	color: #FFFFFF;
	font-family: inherit;
	font-size: 16px;
	font-style: normal;
	line-height: 1.65;
}

.finewerk-testimonials-slider__quote::before,
.finewerk-testimonials-slider__quote::after {
	content: none;
}

/* Quote position variants (prefix class rendered on the widget wrapper). */
.finewerk-ts-quote-top .finewerk-testimonials-slider__quote {
	margin-top: 0;
}

.finewerk-ts-quote-center .finewerk-testimonials-slider__quote {
	margin-top: auto;
	margin-bottom: auto;
}

.finewerk-ts-quote-spread .finewerk-testimonials-slider__quote {
	margin-top: auto;
	margin-bottom: 0;
}

/* ---------- Author row ---------- */

.finewerk-testimonials-slider__author {
	display: flex;
	align-items: center;
	column-gap: var(--fw-ts-author-gap);
	margin: 0;
	margin-top: auto;
	padding-top: 24px;
}

.finewerk-testimonials-slider__avatar {
	flex: 0 0 auto;
	display: block;
	box-sizing: border-box;
	width: var(--fw-ts-avatar-size);
	height: var(--fw-ts-avatar-size);
	padding: 4px;
	background-color: #FFFFFF;
	border-radius: 8px;
	overflow: hidden;
}

.finewerk-testimonials-slider__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.finewerk-testimonials-slider__author-info {
	display: flex;
	flex-direction: column;
	row-gap: 2px;
	min-width: 0;
}

.finewerk-testimonials-slider__name {
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.finewerk-testimonials-slider__role {
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
}

/* ---------- Arrows (hidden unless enabled in the widget) ---------- */

.finewerk-testimonials-slider__nav {
	display: flex;
	column-gap: 12px;
	margin-top: 28px;
}

.finewerk-testimonials-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--fw-ts-arrow-size);
	height: var(--fw-ts-arrow-size);
	margin: 0;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.08);
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.finewerk-testimonials-slider__arrow svg {
	display: block;
	width: 45%;
	height: 45%;
}

.finewerk-testimonials-slider__arrow:hover:not(:disabled) {
	background-color: rgba(255, 255, 255, 0.18);
}

.finewerk-testimonials-slider__arrow:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 2px;
}

.finewerk-testimonials-slider__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ==========================================================================
   Version 2 — photo slides with badges and a fading comment below.
   Version 1 markup never carries these classes, so nothing here can
   affect existing sliders.
   ========================================================================== */

.finewerk-testimonials-slider.is-fw-ts-v2 {
	--fw-ts2-card-width: 390px;
	--fw-ts2-card-height: 460px;
	--fw-ts2-comment-width: 760px;
	--fw-ts2-below-gap: 36px;
}

/* Version 2 defaults to a centered heading, as in the reference; the
   widget's alignment control still overrides this. */
.finewerk-testimonials-slider.is-fw-ts-v2 .finewerk-testimonials-slider__heading {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* ---------- Slide card ---------- */

.finewerk-testimonials-slider__slide {
	position: relative;
	flex: 0 0 var(--fw-ts2-card-width);
	box-sizing: border-box;
	height: var(--fw-ts2-card-height);
	min-width: 0;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	scroll-snap-align: start;
	isolation: isolate;
}

.finewerk-testimonials-slider__slide-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* Wash behind the text on text-card slides. */
.finewerk-testimonials-slider__slide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.82) 45%, transparent 100%);
	z-index: -1;
}

/* The container also carries the global `finewerk-liquid-glass` class;
   that material paints the surface itself. border-radius: inherit keeps
   the glass rim on the card's actual radius. */
.finewerk-testimonials-slider__slide-content {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	padding: 32px 30px;
	border-radius: inherit;
}

.finewerk-testimonials-slider__slide-title {
	margin: 0 0 14px;
	color: #1D1D1D;
	font-family: var(--fw-font-title);
	font-size: 25px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.finewerk-testimonials-slider__slide-text {
	margin: 0;
	color: #525A5F;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

.finewerk-testimonials-slider__slide-stat {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	margin-top: auto;
}

.finewerk-testimonials-slider__slide-stat-value {
	color: #1D1D1D;
	font-family: var(--fw-font-title);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.finewerk-testimonials-slider__slide-stat-text {
	color: #525A5F;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

/* ---------- Badges row ---------- */

.finewerk-testimonials-slider__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: var(--fw-ts2-below-gap) 0 0;
	padding: 0;
	list-style: none;
}

.finewerk-testimonials-slider__badge {
	padding: 8px 16px;
	background-color: #EFF1F0;
	border-radius: 999px;
	color: #3A4440;
	font-size: 14px;
	line-height: 1.2;
}

/* ---------- Comment stack ---------- */

/* All comments occupy the same grid cell; the container is as tall as the
   tallest one, so the cross-fade never shifts the page. */
.finewerk-testimonials-slider__comments {
	display: grid;
	max-width: var(--fw-ts2-comment-width);
	margin: 28px auto 0;
}

.finewerk-testimonials-slider__comment {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 22px;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
	pointer-events: none;
}

.finewerk-testimonials-slider__comment.is-active {
	opacity: 1;
	visibility: visible;
	/* Fade in only after the outgoing comment has faded out. */
	transition: opacity 0.35s ease 0.2s, visibility 0s linear 0.2s;
	pointer-events: auto;
}

.finewerk-testimonials-slider__comment-quote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
	color: #10241A;
	font-size: 18px;
	line-height: 1.6;
	text-align: center;
}

.finewerk-testimonials-slider__comment-quote::before,
.finewerk-testimonials-slider__comment-quote::after {
	content: none;
}

.finewerk-testimonials-slider__comment-author {
	display: flex;
	align-items: center;
	column-gap: 10px;
	margin: 0;
}

.finewerk-testimonials-slider__comment-avatar {
	flex: 0 0 auto;
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
}

.finewerk-testimonials-slider__comment-avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.finewerk-testimonials-slider__comment-name {
	color: #10241A;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.finewerk-testimonials-slider__comment-role {
	color: #6B7570;
	font-size: 14px;
	line-height: 1.3;
}

/* ---------- Version 2 responsive ---------- */

@media (max-width: 1024px) {
	.finewerk-testimonials-slider.is-fw-ts-v2 {
		--fw-ts2-card-width: 330px;
		--fw-ts2-card-height: 420px;
	}
}

@media (max-width: 767px) {
	.finewerk-testimonials-slider.is-fw-ts-v2 {
		/* One full slide plus a ~10% peek of the next, so the row reads as
		   scrollable: W * 1.1 + gap = track width, i.e. W = (100% - gap) / 1.1.
		   The percentage resolves against the track's content box, so the
		   padding is already accounted for and no vw math can overflow the
		   page. */
		--fw-ts2-card-width: calc(90.909% - (var(--fw-ts-gap) * 0.909));
		--fw-ts2-card-height: 400px;
		--fw-ts2-below-gap: 28px;
	}

	.finewerk-testimonials-slider__slide-content {
		padding: 24px 22px;
	}

	.finewerk-testimonials-slider__comment-quote {
		font-size: 16px;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.finewerk-testimonials-slider__track {
		scroll-behavior: auto !important;
	}

	.finewerk-testimonials-slider__comment,
	.finewerk-testimonials-slider__comment.is-active {
		transition: none;
	}
}

/* ---------- Responsive ---------- */

/* Tablet */
@media (max-width: 1024px) {
	.finewerk-testimonials-slider {
		--fw-ts-card-width: 300px;
		--fw-ts-card-height: 420px;
		--fw-ts-heading-gap: 36px;
		--fw-ts-edge-fade: 22px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.finewerk-testimonials-slider {
		/* One full card plus a ~10% peek of the next (see the Version 2
		   mobile block for the arithmetic); the 300px ceiling still applies
		   on top, so wide phones show a slightly larger peek instead. */
		--fw-ts-card-width: calc(90.909% - (var(--fw-ts-gap) * 0.909));
		--fw-ts-card-height: 400px;
		--fw-ts-gap: 14px;
		--fw-ts-logo-height: 28px;
		--fw-ts-logo-gap: 28px;
		--fw-ts-edge-fade: 12px;
		padding: 40px 20px 48px;
	}

	.finewerk-testimonials-slider__card {
		padding: 22px;
	}
}

/* ==========================================================================
   Finewerk background ("Use Finewerk Background" toggle)
   --------------------------------------------------------------------------
   When the toggle is on, the root <section> carries the site-wide
   `fw-bg-gradient` utility (gradient + grain in one class) and becomes its
   own panel — so it gets the global Finewerk panel radius by default. The
   root already has `overflow: hidden`, and the utility's grain ::after uses
   `border-radius: inherit`, so the gradient, the grain and the slider
   contents are all clipped to the same corners. The Elementor "Border
   radius" control targets the same element from a higher-specificity
   selector, so an explicit per-instance radius still wins.
   ========================================================================== */

.finewerk-testimonials-slider.fw-bg-gradient {
	border-radius: 20px;
}

/* Legacy-wrapper guard: before the toggle existed, the same treatment was
   applied by putting `fw-bg-gradient` (+ the retired `fw-bg-grain`) on the
   Elementor widget wrapper via Advanced → CSS Classes. If those classes are
   still there while the toggle is on, the wrapper paints a second, square
   copy of the gradient + grain in exactly the same box, visually filling
   the rounded corners of the section (seen live on /portfolio-showcase).
   With both layers present the wrapper copy is always a mistake, so it is
   suppressed; a wrapper-only (toggle off) setup is left untouched. The
   :has() argument keeps the specificity above the utility's own doubled
   grain selector. */
.elementor-widget-finewerk_testimonials_slider.fw-bg-gradient:has(.finewerk-testimonials-slider.fw-bg-gradient) {
	background: none;
}

.elementor-widget-finewerk_testimonials_slider.fw-bg-gradient:has(.finewerk-testimonials-slider.fw-bg-gradient)::after {
	content: none;
	display: none;
}