/**
 * LSQ Testimonials Masonry — styles for static/marquee/draggable behaviors.
 * Figma source: Home Page Revamp — 2026, node 2341:22835.
 *
 * All custom properties are scoped to .lsq-tm so multiple instances on the same
 * page do not collide. Per-instance @keyframes are written inline by JS via
 * a <style> element with id `lsq-tm-keyframes-{index}`.
 */

/* ============================================================
   Tokens (extracted from Figma)
   ============================================================ */
.lsq-tm {
	--lsq-tm-color-card-light: #ffffff;
	--lsq-tm-color-card-dark: #0b1020;
	--lsq-tm-color-border-light: rgba(11, 16, 32, 0.08);
	--lsq-tm-color-border-dark: rgba(255, 255, 255, 0.10);
	--lsq-tm-color-text: #0b1020;
	--lsq-tm-color-text-muted: #7a809a;
	--lsq-tm-color-text-on-dark: #ffffff;
	--lsq-tm-color-text-on-dark-muted: rgba(255, 255, 255, 0.55);
	--lsq-tm-color-link-on-dark: #c7b6ff;
	--lsq-tm-color-link-on-light: #4f3dca;
	--lsq-tm-radius: 22px;
	--lsq-tm-gap: 18px;
	--lsq-tm-pad-x: 29px;
	--lsq-tm-pad-y: 33px;
	--lsq-tm-avatar-size: 44px;
	--lsq-tm-marquee-speed: 100px; /* px per second; replaced via inline style */
	--lsq-tm-bleed-pad-x: 24px; /* inner side padding when full-bleed (mobile-safe) */

	/* Full-bleed: break out of Enfold's column container so the section spans the
	   full viewport width even when nested inside an .av-content-full / column wrap.
	   ADR-008. Uses the classic 100vw negative-margin technique. The right margin
	   uses calc to neutralise the desktop scrollbar so we never produce horizontal
	   page overflow. */
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	padding-left: 0px;
	padding-right: 0px;
	box-sizing: border-box;
	display: block;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	overflow-x: clip; /* belt-and-braces: prevent any inner overflow from bleeding into the page */
}

.lsq-tm *,
.lsq-tm *::before,
.lsq-tm *::after {
	box-sizing: border-box;
}

/* ============================================================
   Heading
   ============================================================ */
.lsq-tm__heading {
	margin: 0 auto 32px;
	max-width: 1310px; /* matches Enfold's default container so heading aligns with the rest of the page */
	font-family: inherit;
	font-weight: 700;
	color: var(--lsq-tm-color-text);
}

/* ============================================================
   Viewport + track (shared shell across all behaviors)
   ============================================================ */
.lsq-tm__viewport {
	position: relative;
	width: 100%;
}

.lsq-tm__track {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--lsq-tm-gap);
	width: 100%;
}

.lsq-tm--cols-2 .lsq-tm__track { grid-template-columns: repeat(2, 1fr); }
.lsq-tm--cols-3 .lsq-tm__track { grid-template-columns: repeat(3, 1fr); }
.lsq-tm--cols-4 .lsq-tm__track { grid-template-columns: repeat(4, 1fr); }

.lsq-tm__empty {
	margin: 0;
	padding: 24px;
	text-align: center;
	color: var(--lsq-tm-color-text-muted);
	background: rgba(11, 16, 32, 0.03);
	border: 1px dashed var(--lsq-tm-color-border-light);
	border-radius: var(--lsq-tm-radius);
}

/* ============================================================
   Card (light variant — default)
   ============================================================ */
.lsq-tm-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: var(--lsq-tm-pad-y) var(--lsq-tm-pad-x);
	background: var(--lsq-tm-color-card-light);
	border: 1px solid var(--lsq-tm-color-border-light);
	border-radius: var(--lsq-tm-radius);
	color: var(--lsq-tm-color-text);
}

/* Featured / dark variant */
.lsq-tm-card--featured {
	background: var(--lsq-tm-color-card-dark);
	border-color: transparent;
	color: var(--lsq-tm-color-text-on-dark);
}

/* Brand name (was an image logo prior to V1.4 — ADR-008) */
.lsq-tm-card__brand {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lsq-tm-color-text-muted);
	min-height: 24px;
	text-align: right;
}

.lsq-tm-card--featured .lsq-tm-card__brand {
	color: var(--lsq-tm-color-text-on-dark-muted);
}

/* Brand logo image variant — used when an editor uploads a logo
   in place of the brand text. Constrained to the same vertical slot
   so card heights stay consistent across mixed logo/text rows.
   Container is `position: relative` to anchor the optional hover-state
   logo, which is absolutely overlaid for a crossfade swap. */
.lsq-tm-card__brand--logo {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 28px;
	padding: 0;
	position: relative;
}

.lsq-tm-card__brand--logo img,
.lsq-tm-card__brand-img {
	display: block;
	max-height: 28px;
	max-width: 140px;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: opacity 0.25s ease;
	position: unset;
}

/* Hover-state logo overlays the default at the right edge of the slot.
   It only renders when the editor uploads a hover image, so when absent
   no swap occurs and the default logo simply stays put on hover. */
.lsq-tm-card__brand-img--hover {
	position: absolute !important;
    top: 50% !important;
	right: 0;
	transform: translateY(-50%);
	opacity: 0;
	pointer-events: none;
}

/* Crossfade swap: triggered only when --has-hover is present (i.e. both
   default and hover logos uploaded). Without --has-hover the default logo
   keeps its opacity:1 and the hover img isn't in the DOM. */
article.lsq-tm-card:hover .lsq-tm-card__brand--has-hover .lsq-tm-card__brand-img--default {
	opacity: 0;
}

article.lsq-tm-card:hover .lsq-tm-card__brand--has-hover .lsq-tm-card__brand-img--hover {
	opacity: 1;
}

/* On the featured (dark) card the logo often needs to invert.
   Editors can override per-card via CSS if their logo is already
   light-on-dark; this is a safe default that lifts dark mono logos.
   Applies to both default and hover images. */
.lsq-tm-card--featured .lsq-tm-card__brand--logo img {
	filter: brightness(0) invert(1);
}

/* Quote */
.lsq-tm-card__quote p {
    margin: 0;
    font-weight: 500;
    line-height: 25px !important;
    color: inherit;
    flex: 1;
}

.lsq-tm-card__quote p {
	margin: 0 0 0.5em !important;
}
.lsq-tm-card__quote p:last-child {
	margin-bottom: 0;
}

/* Meta row (avatar + name/role) */
.lsq-tm-card__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 21px;
	border-top: 1px solid var(--lsq-tm-color-border-light);
}

.lsq-tm-card--featured .lsq-tm-card__meta {
	border-top-color: var(--lsq-tm-color-border-dark);
}

.lsq-tm-card__avatar {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--lsq-tm-avatar-size);
	height: var(--lsq-tm-avatar-size);
	border-radius: 50%;
	background: linear-gradient(135deg, var(--lsq-tm-grad-a, #6e56f7) 0%, var(--lsq-tm-grad-b, #ff6a52) 100%);
	overflow: hidden;
	color: #ffffff;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
}

.lsq-tm-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lsq-tm-card__avatar-initial {
	display: inline-block;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.lsq-tm-card__person {
	min-width: 0;
}

.lsq-tm-card__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 21px;
	color: inherit;
}

.lsq-tm-card__role {
	font-size: 13px;
	font-weight: 400;
	line-height: 19.5px;
	color: var(--lsq-tm-color-text-muted);
}

.lsq-tm-card--featured .lsq-tm-card__role {
	color: var(--lsq-tm-color-text-on-dark-muted);
}

/* Link CTA */
.lsq-tm-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	line-height: 19.5px;
	color: #5341b9 !important;
	text-decoration: none;
	margin-top: -4px;
	align-self: flex-start;
	transition: color 0.15s ease, transform 0.15s ease;
}
article.lsq-tm-card:hover {
    background: #0B1020;
}
span.lsq-tm-card__avatar img {
    position: unset;
}
article.lsq-tm-card:hover .lsq-tm-card__quote p,
article.lsq-tm-card:hover .lsq-tm-card__name,
article.lsq-tm-card:hover .lsq-tm-card__brand {
    color: #fff;
}
article.lsq-tm-card:hover .lsq-tm-card__link {
    color: #C7B6FF !important;
}
.lsq-tm-card--featured .lsq-tm-card__link {
	color: var(--lsq-tm-color-link-on-dark);
}

.lsq-tm-card__link:hover,
.lsq-tm-card__link:focus-visible {
	text-decoration: underline;
}

.lsq-tm-card__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

.lsq-tm-card__link-arrow {
	transition: transform 0.15s ease;
}

.lsq-tm-card__link:hover .lsq-tm-card__link-arrow {
	transform: translateX(2px);
}

/* ============================================================
   Behavior: STATIC — masonry that auto-scrolls inside a viewport.
   Two axes are supported (ADR-007):
     .lsq-tm--static-horizontal → cards drift right-to-left in N rows
                                  (scrollLeft, default).
     .lsq-tm--static-vertical   → 3-column grid drifts upward inside
                                  a 720px-tall viewport (scrollTop).
   In both cases the user can take over with wheel / drag / arrow keys.
   ============================================================ */

/* ---- Vertical axis (legacy V1.2 behavior, now opt-in) ----
   Single-track structure: viewport itself is the scroll container. */
.lsq-tm--static-vertical .lsq-tm__viewport {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 720px;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE10+ */
	mask-image: linear-gradient(to bottom, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.lsq-tm--static-vertical .lsq-tm__viewport::-webkit-scrollbar {
	display: none;
}
.lsq-tm--static-vertical .lsq-tm__viewport.is-dragging {
	cursor: grabbing;
}
.lsq-tm--static-vertical .lsq-tm__viewport:focus-visible {
	outline: 2px solid var(--lsq-tm-color-link-on-light);
	outline-offset: 4px;
	border-radius: var(--lsq-tm-radius);
}

/* Vertical no-overflow short-list fallback (legacy single-track only). */
.lsq-tm--static-vertical.lsq-tm--static-no-overflow .lsq-tm__viewport {
	overflow: visible;
	max-height: none;
	mask-image: none;
	-webkit-mask-image: none;
	cursor: auto;
}

/* ---- Horizontal axis (V1.5 — two independent rows, opposite directions) ----
   Structure:
     .lsq-tm__viewport          (flex column, NOT a scroll container)
       .lsq-tm__row--top        (overflow-x scroll container, RTL auto-scroll)
         .lsq-tm__track         (flex row strip, width:max-content)
       .lsq-tm__row--bottom     (overflow-x scroll container, LTR auto-scroll)
         .lsq-tm__track         (flex row strip, width:max-content)
   Each row scrolls independently so user takeover (wheel/drag/keys) on one
   row does not pull the other. */
.lsq-tm--static-horizontal .lsq-tm__viewport {
	display: flex;
	flex-direction: column;
	gap: var(--lsq-tm-gap);
	overflow: visible; /* the rows handle their own scroll */
}

.lsq-tm--static-horizontal .lsq-tm__row {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE10+ */
	/* mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); */
}
.lsq-tm--static-horizontal .lsq-tm__row::-webkit-scrollbar {
	display: none; /* Older Safari and Chromium */
}
.lsq-tm--static-horizontal .lsq-tm__row.is-dragging {
	cursor: grabbing;
}
.lsq-tm--static-horizontal .lsq-tm__row:focus-visible {
	outline: 2px solid var(--lsq-tm-color-link-on-light);
	outline-offset: 4px;
	border-radius: var(--lsq-tm-radius);
}

/* Per-row track: simple horizontal flex strip. The grid-template-columns reset
   is needed because the global .lsq-tm__track default (line ~78) and the
   1024px mobile rule both target .lsq-tm__track with grid-template-columns. */
.lsq-tm--static-horizontal .lsq-tm__row .lsq-tm__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	grid-template-columns: none;
	gap: var(--lsq-tm-gap);
	width: max-content;
	will-change: scroll-position;
}

.lsq-tm--static-horizontal .lsq-tm-card {
	flex: 0 0 360px;
	width: 360px;
	max-width: 360px;
}

/* Per-row no-overflow fallback: when JS detects a row's track fits inside its
   viewport (short list), it adds .is-no-overflow on the row so we drop the
   side-fade mask and grab cursor. The flex strip is already a clean row. */
.lsq-tm--static-horizontal .lsq-tm__row.is-no-overflow {
	mask-image: none;
	-webkit-mask-image: none;
	cursor: auto;
}

/* ============================================================
   Behavior: MARQUEE — horizontal right-to-left auto-scroll
   The track is duplicated in JS and animated via a per-instance
   @keyframe. The viewport masks left/right overflow with a soft fade.
   Direction: content moves right → left (track translates negative-X).
   ============================================================ */
.lsq-tm--marquee .lsq-tm__viewport {
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.lsq-tm--marquee .lsq-tm__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	grid-template-columns: none;
	gap: var(--lsq-tm-gap);
	width: max-content;
	will-change: transform;
}

.lsq-tm--marquee .lsq-tm-card {
	flex: 0 0 360px;
	max-width: 360px;
}

.lsq-tm--marquee.lsq-tm--marquee-paused .lsq-tm__track {
	animation-play-state: paused !important;
}

/* JS adds .lsq-tm--marquee-active when ready & visible */
.lsq-tm--marquee.lsq-tm--marquee-active .lsq-tm__track {
	animation-name: var(--lsq-tm-marquee-anim, none);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* ============================================================
   Behavior: DRAGGABLE — horizontal scroll w/ snap
   ============================================================ */
.lsq-tm--draggable .lsq-tm__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--lsq-tm-color-border-light) transparent;
	cursor: grab;
}

.lsq-tm--draggable .lsq-tm__viewport.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none; /* don't fight a live drag */
}


.lsq-tm--draggable .lsq-tm__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--lsq-tm-gap);
	width: max-content;
	padding-bottom: 4px; /* breathing room above scrollbar */
}

.lsq-tm--draggable .lsq-tm-card {
	flex: 0 0 360px;
	max-width: 360px;
	scroll-snap-align: start;
	user-select: none;
}

.lsq-tm--draggable .lsq-tm-card a,
.lsq-tm--draggable .lsq-tm-card img {
	-webkit-user-drag: none;
	user-select: none;
}

.lsq-tm--draggable .lsq-tm__viewport:focus-visible {
	outline: 2px solid var(--lsq-tm-color-link-on-light);
	outline-offset: 4px;
	border-radius: var(--lsq-tm-radius);
}

/* ============================================================
   Mobile (< 1024px) — variant-aware fallbacks (D-5)
   ============================================================ */
@media (max-width: 1024px) {
	.lsq-tm__track {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.lsq-tm-card__quote {
		font-size: 19px;
		line-height: 24px;
	}
}

@media (max-width: 640px) {
	.lsq-tm {
		--lsq-tm-pad-x: 22px;
		--lsq-tm-pad-y: 26px;
		--lsq-tm-gap: 14px;
	}

	.lsq-tm-card__quote {
		font-size: 17px;
		line-height: 23px;
	}

	/* Static vertical → single column stack */
	.lsq-tm--static-vertical .lsq-tm__track {
		grid-template-columns: 1fr !important;
	}

	/* Static horizontal → narrower cards inside both rows */
	.lsq-tm--static-horizontal .lsq-tm-card {
		flex: 0 0 280px;
		width: 280px;
		max-width: 280px;
	}

	/* Marquee preserves horizontal-RTL UX, narrower cards */
	.lsq-tm--marquee .lsq-tm-card {
		flex: 0 0 280px;
		max-width: 280px;
	}

	/* Draggable preserves horizontal-drag UX, narrower cards */
	.lsq-tm--draggable .lsq-tm-card {
		flex-basis: 280px;
		max-width: 280px;
	}
}

/* ============================================================
   Reduced motion — turn animations off but keep layout intact
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	/* Marquee reduced-motion fallback: collapse the horizontal flex strip
	   into a wrapping grid so every testimonial is visible without animation. */
	.lsq-tm--marquee .lsq-tm__track {
		animation: none !important;
		transform: none !important;
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		width: 100% !important;
	}
	.lsq-tm--marquee .lsq-tm-card {
		flex: 0 1 auto !important;
		max-width: none !important;
	}
	.lsq-tm--marquee .lsq-tm__viewport {
		mask-image: none;
		-webkit-mask-image: none;
		overflow: visible;
	}
	/* Vertical-static reduced-motion: keep manual scroll, drop the fade mask. */
	.lsq-tm--static-vertical .lsq-tm__viewport {
		mask-image: none;
		-webkit-mask-image: none;
	}
	/* Horizontal-static reduced-motion: collapse the two opposite-direction
	   rows into a single wrapping 3-column grid so every card is visible
	   statically. The .lsq-tm__row containers become transparent via
	   display:contents so the cards land directly in the viewport grid. */
	.lsq-tm--static-horizontal .lsq-tm__viewport {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: var(--lsq-tm-gap) !important;
		overflow: visible !important;
	}
	.lsq-tm--static-horizontal .lsq-tm__row {
		display: contents !important;
		overflow: visible !important;
		mask-image: none !important;
		-webkit-mask-image: none !important;
		cursor: auto !important;
	}
	.lsq-tm--static-horizontal .lsq-tm__row .lsq-tm__track {
		display: contents !important;
		width: auto !important;
	}
	.lsq-tm--static-horizontal .lsq-tm-card {
		flex: 0 1 auto !important;
		width: auto !important;
		max-width: none !important;
	}
	.lsq-tm-card__link-arrow {
		transition: none !important;
	}
}

/* ============================================================
   Print — flatten everything to a static grid
   ============================================================ */
@media print {
	.lsq-tm__viewport {
		overflow: visible !important;
		max-height: none !important;
		mask-image: none !important;
		-webkit-mask-image: none !important;
		cursor: auto !important;
		display: block !important;
	}
	/* Two-row horizontal: flatten rows so cards print in document order. */
	.lsq-tm__row {
		display: contents !important;
		overflow: visible !important;
		mask-image: none !important;
		-webkit-mask-image: none !important;
		cursor: auto !important;
	}
	.lsq-tm__track {
		display: grid !important;
		grid-auto-flow: row !important;
		grid-auto-columns: 1fr !important;
		grid-template-columns: repeat(2, 1fr) !important;
		grid-template-rows: none !important;
		width: 100% !important;
		animation: none !important;
		transform: none !important;
	}
	.lsq-tm-card {
		flex: 0 1 auto !important;
		width: auto !important;
		max-width: none !important;
	}
	/* Hide the cloned/duplicated track items so print doesn't show duplicates. */
	.lsq-tm__track > [aria-hidden="true"] {
		display: none !important;
	}
}