/**
 * SeaSky testimonials slider. Scoped to .sst-* only (per theme CSS policy).
 * Continuous seamless-loop auto-scroll — no arrows, drag/wheel still works.
 */

.sst-slider {
	position: relative;
	width: calc(100% + 160px);
	margin-left: -80px;
	margin-right: -80px;
	box-sizing: border-box;
}

.sst-slider__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	padding: 0.25rem 80px;
	box-sizing: border-box;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.sst-slider__track::-webkit-scrollbar { display: none; }

/* Figma spec (dev mode, testimonial card component): fixed size per
   breakpoint (mobile 398, tablet 408, desktop 558), padding 32px, radius
   12px, justify-content space-between. Fixed rather than percentage-based
   on purpose — a %-of-container width made cards grow arbitrarily wide
   (and text lines uncomfortably long) on very wide viewports; a fixed card
   width just reveals more of the carousel instead, which is what the
   horizontal-scroll design already intends — mobile included, hence the
   slider's edge-to-edge bleed applying at every breakpoint, scaled down
   for mobile below. */
.sst-card {
	flex: 0 0 398px;
	max-width: 398px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	min-height: 440px;
	box-sizing: border-box;
}

/* Tablet: Figma spec is a distinct fixed 408px card (not a scaled-down
   558px) — same padding/radius/layout, just narrower. The .sst-slider
   edge-to-edge bleed above already applies unconditionally at any width
   ≥640px, so tablet gets the same off-the-sides peek as desktop for free;
   only the card width itself needs its own tier. */
@media (min-width: 640px) {
	.sst-card { flex: 0 0 408px; max-width: 408px; }
}

@media (min-width: 1024px) {
	.sst-card { flex: 0 0 558px; max-width: 558px; }
}

.sst-card__top {
	min-height: 2rem;
	margin-bottom: 1.1rem;
	display: flex;
	align-items: center;
}

.sst-card__logo {
	max-height: 28px;
	width: auto;
}

.sst-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
}

.sst-badge--airbnb { color: #ff5a5f; }
.sst-badge--tripadvisor { color: #111; }
.sst-badge--tripadvisor svg { color: #34e0a1; background: #111; border-radius: 50%; padding: 2px; }
.sst-badge--google { color: #3c4043; }
.sst-badge--booking { color: #003580; }

.sst-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: #e2745c;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 0.45em 1em;
}

.sst-card__quote {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 1.02rem;
	line-height: 1.6;
}

.sst-card__quote p { margin: 0 0 0.75em; }
.sst-card__quote p:last-child { margin-bottom: 0; }

.sst-card__footer {
	margin-top: auto;
	padding-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sst-card__who {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sst-card__where {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #9aa2ab;
}

.sst-slider__arrow {
	display: none;
}

/* Elementor's shortcode-widget wrappers (.elementor-widget, then
   .elementor-shortcode inside it) have no explicit width — they're flex
   items sized by shrink-to-fit content. .sst-slider's own width:100vw
   below doesn't count toward that content-size calculation (it's an
   absolute, viewport-relative value, not a content contribution), so both
   wrappers collapse to 0 width. That 0 then feeds into .sst-slider's own
   "50%" margin math as an actual 0, breaking the bleed entirely. Forcing
   the two wrappers to the full width of their flex-container parent (which
   does have a definite width) breaks that collapse. Scoped via :has() so
   only this shortcode's wrappers are touched, not every .elementor-shortcode
   on the site. */
.elementor-widget:has(.sst-slider),
.elementor-shortcode:has(.sst-slider) {
	width: 100%;
}

/* Mobile keeps the same edge-to-edge bleed intent as tablet/desktop, but
   uses the viewport-relative full-bleed technique instead of a fixed
   negative margin: the two pages this shortcode ships on have genuinely
   different mobile container insets (Home: 16px/48px asymmetric;
   Property Owners: 80px/80px symmetric), so a single hardcoded px value
   can't cancel both correctly — 100vw + calc(50% - 50vw) margins reach
   the true viewport edge regardless of the parent's own padding (now that
   the wrapper-collapse fix above gives "50%" a real number to resolve). */
@media (max-width: 639px) {
	.sst-slider {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.sst-slider__track { padding: 0.25rem 16px; }
}