/* ============================================================
   Stackinova Testimonials
   ============================================================ */

/* ---------- Section wrapper ---------- */
.snt-wrap {
	position: relative;
	box-sizing: border-box;
}

/* ---------- Header row ---------- */
.snt-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}

.snt-title {
	font-weight: var(--fw-bold);
	line-height: 1.15;
	margin: 0;
	flex: 1;
}

/* "View All" pill — desktop header */
.snt-viewall {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid;
	border-radius: 999px;
	font-size: 14px;
	font-weight: var(--fw-medium);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease;
	flex-shrink: 0;
}
.snt-viewall svg { transition: transform 0.2s ease; }
.snt-viewall:hover svg { transform: translate(2px, -2px); }

/* "View All" — mobile bottom (hidden on desktop) */
.snt-viewall-bottom { display: none; }

/* ---------- Stage ---------- */
.snt-stage { position: relative; }

/* ---------- Slides ---------- */
.snt-slides {
	position: relative;
	display: grid;
	grid-template-areas: 'stack';
	flex: 1;
	perspective: 900px;
}

.snt-slide {
	grid-area: stack;
	display: none;
	opacity: 0;
}
.snt-slide.is-active  { display: flex; flex-direction: column; opacity: 1; }
.snt-slide.is-leaving {
	display: flex; flex-direction: column;
	position: absolute; inset: 0;
	pointer-events: none; z-index: 1;
}

.snt-card-outer { overflow: visible; }
.snt-card-inner { transform-origin: 50% 0%; backface-visibility: hidden; }

@keyframes snt-fi  { from{opacity:0} to{opacity:1} }
@keyframes snt-fo  { from{opacity:1} to{opacity:0} }
@keyframes snt-cin {
	from { opacity:0; transform: translateY(24px) rotateX(-40deg); }
	to   { opacity:1; transform: translateY(0)    rotateX(0deg); }
}
@keyframes snt-cout {
	from { opacity:1; transform: translateY(0)     rotateX(0deg); }
	to   { opacity:0; transform: translateY(-18px) rotateX(40deg); }
}
@keyframes snt-cin-up {
	from { opacity:0; transform: translateY(-24px) rotateX(40deg); }
	to   { opacity:1; transform: translateY(0)     rotateX(0deg); }
}
@keyframes snt-cout-up {
	from { opacity:1; transform: translateY(0)    rotateX(0deg);   }
	to   { opacity:0; transform: translateY(18px) rotateX(-40deg); }
}

.snt-dir-next .snt-slide.is-active  .snt-card-inner { animation: snt-cin     0.6s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.snt-dir-next .snt-slide.is-leaving .snt-card-inner { animation: snt-cout    0.4s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.snt-dir-prev .snt-slide.is-active  .snt-card-inner { animation: snt-cin-up  0.6s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.snt-dir-prev .snt-slide.is-leaving .snt-card-inner { animation: snt-cout-up 0.4s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }

/* ---------- Desktop Split 50/50 ---------- */
.snt-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
	min-height: 480px;
}

/* ---------- LEFT: Media ---------- */
.snt-media-wrap { position: relative; }
.snt-media {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 400px;
	overflow: hidden;
	border-radius: 16px 0 0 16px;
}
.snt-media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.snt-video-overlay { position: absolute; inset: 0; cursor: pointer; }
.snt-watch-reel {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: 999px;
	border: none;
	font-size: 13px;
	font-weight: var(--fw-bold);
	letter-spacing: 1.5px;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.snt-watch-reel:hover {
	transform: translateX(-50%) scale(1.04);
	box-shadow: 0 6px 28px rgba(0,0,0,0.35);
}

/* ---------- RIGHT: Outer gradient card ---------- */
.snt-card-outer {
	display: flex;
	flex-direction: column;
	position: relative;
	border-radius: 0 16px 16px 0;
}

/* Inner white card */
.snt-card-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	flex: 1;
}

/* ---------- Quote ---------- */
.snt-quote-icon {
	font-family: var(--font-default);
	line-height: 1;
	margin-bottom: 16px;
	display: block;
}
.snt-quote-text {
	line-height: 1.7;
	margin: 0 0 auto;
	padding-bottom: 28px;
}

/* ---------- Author ---------- */
.snt-author-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 28px;
	border-top: 1px solid rgba(0,0,0,0.08);
	margin-top: auto;
}
.snt-author-img {
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.snt-author-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--fw-bold);
	color: #fff;
	background: linear-gradient(135deg, #1e40af, #3b82f6);
}
.snt-author-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.snt-author-name { font-weight: var(--fw-bold); display: block; }
.snt-author-meta { line-height: 1.4; display: block; }

/* ---------- Cursor arrow (desktop) ---------- */
.snt-cursor-arrow {
	position: fixed;
	top: 0; left: 0;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(240,240,240,0.96);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	box-shadow: 0 2px 14px rgba(0,0,0,0.14);
	cursor: pointer;
	pointer-events: auto;
	visibility: hidden;
	opacity: 0;
	transform: translate(-50%,-50%) translate(0,0) scale(0,0);
	transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
}
.snt-cursor-arrow:hover { background: rgba(220,220,220,0.98); }

/* Mobile arrows — hidden on desktop */
.snt-nav-arrows { display: none; }

/* ---------- Progress Bars (desktop — vertical right edge) ---------- */
.snt-progress-bars {
	position: absolute;
	right: -40px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 5;
}
.snt-bar {
	display: block;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	padding: 0;
	transition: background 0.3s ease, transform 0.2s ease;
}
.snt-bar:hover { transform: scaleX(1.3); }

/* ---------- Video Lightbox ---------- */
.snt-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999999;
	align-items: center;
	justify-content: center;
}
.snt-lightbox.is-open { display: flex; }
.snt-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.88);
	cursor: pointer;
}
.snt-lightbox-body {
	position: relative;
	z-index: 1;
	width: min(900px, 90vw);
	aspect-ratio: 16/9;
}
.snt-lightbox-frame {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	overflow: hidden;
}
.snt-lightbox-frame iframe { width: 100%; height: 100%; border: none; display: block; }
.snt-lightbox-close {
	position: absolute;
	top: -48px; right: 0;
	width: 40px; height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.15);
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background 0.2s;
}
.snt-lightbox-close:hover { background: rgba(255,255,255,0.25); }

/* ============================================================
   TABLET ≤900px
   ============================================================ */
@media (max-width: 900px) {
	.snt-split {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
	.snt-media { min-height: 300px; }
}

@media (max-width: 768px) {
.snt-wrap {
  padding-bottom: 24px !important;
}

.snt-viewall-bottom {
  white-space: nowrap !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  padding: 14px 22px !important;
}

.snt-viewall-bottom svg {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.snt-header {
		flex-direction: column;
		align-items: center;
		text-align: center;
		margin-bottom: 20px;
	}
	.snt-title { text-align: center; }
	.snt-header .snt-viewall { display: none; }

	/* Stage: stack everything vertically */
	.snt-stage {
		display: flex;
		flex-direction: column;
	}

	/* Split: single column */
	.snt-split {
		grid-template-columns: 1fr;
		width: 100%;
	}

	/* Media: full width, rounded TOP corners only — bottom flush with card */
	.snt-media {
		min-height: 260px;
		border-radius: 12px 12px 0 0 !important;
	}

	/* Card outer: NO padding, rounded BOTTOM corners only — flush with media */
	.snt-card-outer {
		padding: 0 !important;
		overflow: hidden !important;
		border-radius: 0 0 12px 12px !important;
		display: flex !important;
		flex-direction: column !important;
	}

	/* Slides: fill card outer fully */
	.snt-slides {
		width: 100% !important;
		flex: 1 !important;
	}

	/* Active slide fills slides container */
	.snt-slide.is-active {
		width: 100% !important;
	}

	/* Inner card: gets the padding, no radius (clipped by slides) */
	.snt-slide.is-active .snt-card-inner {
		padding: 28px 20px 28px !important;
		border-radius: 0 !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Progress bars: horizontal row, BELOW card (now in DOM outside card) */
	.snt-progress-bars {
		position: static !important;
		display: flex !important;
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
		margin-top: 16px !important;
		right: auto !important;
		top: auto !important;
		transform: none !important;
	}
	.snt-bar {
		width: 28px !important;
		height: 3px !important;
	}
	.snt-bar:hover { transform: none; }

	/* Mobile arrows: show, horizontal, below progress bars */
	.snt-cursor-arrow { display: none !important; }
	.snt-nav-arrows {
		display: flex !important;
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 16px !important;
		margin-top: 16px !important;
	}
	.snt-nav-prev,
	.snt-nav-next {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		border: none;
		background: rgba(240,240,240,0.9);
		cursor: pointer;
		box-shadow: 0 2px 10px rgba(0,0,0,0.12);
	}
	
	.snt-nav-prev svg { transform: rotate(-90deg) !important; }  /* UP → LEFT  ✅ */
	.snt-nav-next svg { transform: rotate(-90deg) !important; }  /* DOWN → RIGHT ✅ */

	/* View All — full width at bottom */
	.snt-viewall-bottom {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		width: 100% !important;
		margin-top: 24px !important;
		padding: 16px 22px !important;
		border: 1px solid !important;
		border-radius: 999px !important;
		font-size: 15px !important;
		font-weight: var(--fw-medium) !important;
		text-decoration: none !important;
		text-align: center !important;
		box-sizing: border-box !important;
		transition: background 0.2s ease !important;
	}
}

/* ============================================================
   MOBILE SMALL ≤480px
   ============================================================ */
@media (max-width: 480px) {
	.snt-media { min-height: 220px; }
	.snt-watch-reel {
		bottom: 20px;
		font-size: 11px;
		padding: 10px 20px;
	}
}

/* ══════════════════════════════════════════════
   VIEW ALL BUTTON — Text + Arrow Swap Animation
   ══════════════════════════════════════════════ */
.snt-btn-inner {
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    height:         1.2em;
    position:       relative;
}

.snt-btn-text-orig,
.snt-btn-text-hover {
    display:     block;
    transition:  transform 0.25s ease, opacity 0.25s ease;
    line-height: 1.2;
    white-space: nowrap;
}

.snt-btn-text-orig {
    transform: translateY(0);
    opacity:   1;
}

.snt-btn-text-hover {
    transform: translateY(100%);
    opacity:   0;
    position:  absolute;
    top:       0;
    left:      0;
    width:     100%;
}

.snt-viewall:hover .snt-btn-text-orig,
.snt-viewall-bottom:hover .snt-btn-text-orig {
    transform: translateY(-100%);
    opacity:   0;
}

.snt-viewall:hover .snt-btn-text-hover,
.snt-viewall-bottom:hover .snt-btn-text-hover {
    transform: translateY(0%);
    opacity:   1;
}

.snt-btn-icon-wrap {
    position:    relative;
    overflow:    hidden;
    width:       14px;
    height:      14px;
    flex-shrink: 0;
    display:     block;
}

.snt-btn-icon-wrap > svg {
    position:   absolute;
    top:        0;
    left:       0;
    width:      14px;
    height:     14px;
    transform:  translate(0, 0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity:    1;
    display:    block;
}

.snt-btn-icon-copy {
    position:   absolute;
    top:        0;
    left:       0;
    width:      14px;
    height:     14px;
    display:    block;
    transform:  translate(-150%, 150%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.snt-btn-icon-copy svg {
    position:   static;
    width:      14px;
    height:     14px;
    display:    block;
    transform:  none;
    transition: none;
}

.snt-viewall:hover .snt-btn-icon-wrap > svg,
.snt-viewall-bottom:hover .snt-btn-icon-wrap > svg {
    transform: translate(150%, -150%);
}

.snt-viewall:hover .snt-btn-icon-copy,
.snt-viewall-bottom:hover .snt-btn-icon-copy {
    transform:        translate(0, 0);
    transition-delay: 0.05s;
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
    .snt-btn-inner {
        height: 1.3em;
    }

    .snt-btn-text-orig,
    .snt-btn-text-hover {
        font-size: 14px;
        white-space: nowrap;
    }

    .snt-btn-icon-wrap {
        width:  14px;
        height: 14px;
    }
}

/* ================================================================
   HEADING STANDARDISATION — snt-title responsive
   Patch v2.0.0 (2026-05-22)
   ================================================================ */

.snt-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  line-height: 1.2;
  letter-spacing: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .snt-title { font-size: 48px; }
}

@media only screen and (min-width: 992px) and (max-width: 1399px) {
  .snt-title { font-size: 42px; }
}

@media only screen and (max-width: 767px) {
  .snt-title { font-size: 36px; }
}