/* =========================================================================
   Block: Quote Slider / Omdöme (sunbird/quote-slider) — Figma 616:4559
   Stort italic-citat i Swiper-slider, runda prev/next-knappar, avatar-paginering
   (aktiv = mörk pill med namn + roll) och "Se alla omdömen"-länk.
   Citatets fyllnad ljusgrå→mörk: view.js (default mörk = läsbar utan JS).
   Endast Figma-värden. Sektions-padding via Padding-klon (default m = 64→144).
   ========================================================================= */

.quote-slider__inner {
	display: flex;
	flex-direction: column;
	gap: 9rem; /* 144px: quote → botten-grupp (Figma) */
	align-items: center;
}

/* --- Quote-rad: ‹ | swiper | › --------------------------------------- */
.quote-slider__top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	width: 100%;
}

/* Runda nav-knappar (Figma 48px, tunn ring + chevron). */
.quote-slider__nav {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--color-neutral-300);
	border-radius: 50%;
	color: var(--color-text);
	cursor: pointer;
}
.quote-slider__nav-icon {
	width: 24px;
	height: 24px;
}

/* Mobil-pilraden döljs på desktop (desktop använder de flankerande pilarna). */
.quote-slider__nav-row {
	display: none;
}

/* Swiper-vagga: fyller mitten mellan knapparna. */
.quote-slider__swiper {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

/* OBS specificitet: .quote-slider-prefix krävs för att slå swiper-bundle.css
   .swiper-slide { display:block } (skrivs ut EFTER block-CSS → vinner annars på
   ordning). Utan prefix blir slide:n block → flex-direction/align-items/gap inerta
   och "Se hela" (inline-flex) flödar vänster utan andrum. */
.quote-slider .quote-slider__slide {
	height: auto;
	display: flex;
	flex-direction: column; /* citat staplat över "Se hela"-knappen */
	align-items: center;    /* centrera "Se hela" (citatet är width:100%) */
	justify-content: center;
	gap: 1.5rem; /* 24px: citat → "Se hela" (begärd funktion; ej Figma-nod). Endast när knappen visas (flex-gap räknar ej display:none-barn). */
}

/* --- Citatet (Inter Tight ExtraBold Italic 69px, centrerat) ----------- */
.quote-slider__quote {
	margin: 0;
	width: 100%;
	font-family: var(--font-heading);
	font-weight: var(--fw-extrabold);
	font-style: italic;
	font-size: var(--text-h2); /* 32 → 69px (Figma 69 @1920) */
	line-height: var(--leading-tight); /* 1.1 */
	text-align: center;
	color: var(--color-text); /* fallback: mörk text (ärvs av spannen) */
	/* Trunkera långa citat till max 5 rader + "…" (begärt). -webkit-box krävs för
	   line-clamp; krockar EJ med per-ord-färgfyllnaden (color på inline-spans).
	   text-wrap:balance är verkningslös under -webkit-box → borttagen. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
	/* line-height 1.1 < fontens naturliga → ascenders/descenders sticker ut ur
	   line-boxen. Liten block-padding ger dem plats så Swipers overflow:hidden +
	   autoHeight inte klipper första/sista raden (em-baserat → skalar). */
	padding-block: 0.1em;
}

/* JS-läge (view.js): manuell trunkering med en RIKTIG "…"-span (.quote-slider__ellipsis,
   som är ett .quote-slider__word → fylls i takt med orden) istället för line-clamp:s
   auto-ellipsis (som ej kan färg-animeras pålitligt). JS döljer överskjutande ord så
   innehållet ryms på ≤5 rader → ingen auto-ellipsis behövs. Base ovan (-webkit-line-clamp)
   är no-JS-fallback (5 rader + statisk auto-"…"). */
.quote-slider__quote.is-truncated {
	display: block;
	-webkit-line-clamp: none;
}

/* "Se hela"-knapp: visas ENBART när citatet är trunkerat (.is-truncated av view.js)
   och inte redan utfällt (.is-expanded). Egen rad centrerad under citatet, stil =
   "Se alla omdömen"-länken (begärt: understruken + coral-hover). Ingen pil (det är en
   utfällning, inte en navigering). Döljs default → utan JS visas ingen knapp. */
.quote-slider__expand {
	display: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold); /* 24px SemiBold (= "Se alla omdömen") */
	font-size: 1.5rem; /* 24px */
	line-height: var(--leading-snug); /* 1.2 */
	color: var(--color-text);
	text-decoration: underline;
	text-underline-position: from-font;
	transition: color 0.15s ease; /* coral-hover (begärt, samma mönster som see-all) */
}
.quote-slider__quote.is-truncated:not(.is-expanded) + .quote-slider__expand {
	display: inline-flex;
	align-items: center;
}
@media (hover: hover) {
	.quote-slider__expand:hover {
		color: var(--color-link); /* coral #fb575d */
	}
}

/* Scroll-driven fyllnad (begärd effekt): varje ord avslöjas ljusgrå → mörk i
   LÄSORDNING. Tidslinjen ligger på .quote-slider__top (UTANFÖR Swiperns
   overflow:hidden → mäts mot viewporten, inte slidern). Varje ord animerar sin
   färg över en egen andel av cover 35vh→65vh (--rs/--re efter ordindex; senare start + tidigare slut — användarbeslut 2026-06-12). Robust
   för flerradig/centrerad text. Fallback utan stöd / reduced-motion = mörk text. */
@supports (animation-timeline: view()) {
	.quote-slider__top {
		view-timeline-name: --quote-vt;
		view-timeline-axis: block;
	}
	.quote-slider__word {
		color: var(--color-neutral-300); /* #dcdcd4 ofylld (Figma) */
		animation: quote-word-reveal linear forwards;
		animation-timeline: --quote-vt;
		animation-range-start: cover var(--rs, 35vh);
		animation-range-end: cover var(--re, 65vh);
	}

	@keyframes quote-word-reveal {
		to {
			color: var(--color-text); /* #2d2d2b fylld */
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.quote-slider__word {
			animation: none;
			color: var(--color-text);
		}
	}

	/* Utfällt citat ("Se hela"): hela texten ska vara läsbar direkt → stäng av den
	   scroll-drivna fyllnaden och visa alla ord mörka (= reduced-motion-läget). */
	.quote-slider__quote.is-expanded .quote-slider__word {
		animation: none;
		color: var(--color-text);
	}
}

/* --- Botten: avatarrad + "Se alla omdömen" --------------------------- */
.quote-slider__bottom {
	display: flex;
	flex-direction: column;
	gap: 4rem; /* 64px (Figma) */
	align-items: center;
	width: 100%;
}

.quote-slider__avatars {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
}

/* Inaktiv = 64px-cirkel. Aktiv = mörk pill med avatar + namn/roll. */
.quote-slider__avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	height: 96px; /* konstant höjd (= pill-höjden) → raden hoppar inte vertikalt */
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	/* Mjuk expansion till pill vid aktivering (begärd effekt). Höjden är låst, så
	   bara bakgrund + horisontell padding (bredd) animeras. */
	transition: background-color 0.3s ease, padding 0.3s ease;
}
.quote-slider__avatar-img {
	display: block;
	width: 64px;
	height: 64px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--color-neutral-300); /* fallback om avatar saknas */
}
.quote-slider__avatar-img img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	display: block;
}
.quote-slider__person {
	display: none; /* visas bara på aktiv */
}
.quote-slider__avatar.is-active {
	background-color: var(--color-text); /* #2d2d2b */
	padding: 16px 24px 16px 16px; /* Figma pl16 pr24 py16 */
}
.quote-slider__avatar.is-active .quote-slider__person {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;
}
.quote-slider__person-name,
.quote-slider__person-role {
	font-family: var(--font-heading);
	font-size: var(--text-body-m); /* 14px */
	line-height: var(--leading-normal); /* 1.5 */
	color: var(--color-neutral-100); /* vit-aktig #fafaf5 */
	white-space: nowrap;
}
.quote-slider__person-name {
	font-weight: var(--fw-medium); /* 500 (Inter Tight Medium) */
}
.quote-slider__person-role {
	font-weight: var(--fw-extrabold); /* 800 */
}

/* "Se alla omdömen": Inter Tight SemiBold 24px, understruken + pil. */
.quote-slider__see-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	font-size: 1.5rem; /* 24px */
	line-height: var(--leading-snug); /* 1.2 */
	color: var(--color-text);
	white-space: nowrap;
	transition: color 0.15s ease; /* hover → coral (begärd effekt) */
}
.quote-slider__see-all-text {
	text-decoration: underline;
	text-underline-position: from-font;
}
.quote-slider__arrow {
	width: 24px;
	height: 24px;
	flex: none;
	transition: transform 0.15s ease; /* hover-pil-glid (begärd effekt) */
}

/* --- Hover (begärd effekt): "Se alla omdömen" → coral + pil 4px höger ----- */
@media (hover: hover) {
	.quote-slider__see-all:hover {
		color: var(--color-link); /* coral #fb575d */
	}
	.quote-slider__see-all:hover .quote-slider__arrow {
		transform: translateX(4px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.quote-slider__arrow {
		transition: none;
	}
	.quote-slider__see-all:hover .quote-slider__arrow {
		transform: none;
	}
}

/* --- Mobil (≤768) — PROVISORISK (egen Figma-mobilnod ej tillgänglig) ----
   Tightare gaps, mindre nav-gap, avatarer får radbrytas, CTA mindre. */
@media (max-width: 768px) {
	.quote-slider__inner {
		gap: 3rem; /* 48px (citat → botten, Figma mobil) */
	}
	/* Flankerande pilar döljs → citatet får full bredd (Figma mobil). */
	.quote-slider__top .quote-slider__nav {
		display: none;
	}
	.quote-slider__bottom {
		gap: 2rem; /* 32px (avatarer → pilar → CTA, Figma) */
	}
	/* Avatarraden bryter ut ur container-guttern (full-bleed till viewport-kant)
	   så overflow-peeken inte klipps konstigt vid gutter-kanten. Egen padding-inline
	   håller innehållets START vid guttern (i linje med citat/CTA). Förälderns
	   align-items:center centrerar den viewport-breda raden → blöder ut lika åt båda
	   håll. Övrig content behåller guttern (via .container). "safe" center → start
	   (oklippt) vid overflow. */
	.quote-slider__avatars {
		width: calc(100% + 2 * var(--container-gutter));
		padding-inline: var(--container-gutter);
		gap: 24px;
		justify-content: safe center;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none; /* Firefox */
	}
	.quote-slider__avatars::-webkit-scrollbar {
		display: none; /* WebKit */
	}
	/* Mobildesignen har ingen pil på "Se alla omdömen". */
	.quote-slider__see-all .quote-slider__arrow {
		display: none;
	}
	/* Lägre pill på mobil (Figma py-8 / pl-8), konstant höjd 80. */
	.quote-slider__avatar {
		height: 80px;
	}
	.quote-slider__avatar.is-active {
		padding: 8px 24px 8px 8px;
	}
	/* Pilraden under avatarerna, centrerad (Figma gap 32). */
	.quote-slider__nav-row {
		display: flex;
		gap: 32px;
		justify-content: center;
	}
	.quote-slider__see-all {
		font-size: var(--text-button); /* 16px */
	}
	.quote-slider__expand {
		font-size: var(--text-button); /* 16px (= see-all mobil) */
	}
	.quote-slider .quote-slider__slide {
		gap: 1rem; /* 16px: citat → "Se hela" (mobil); samma specificitet som basregeln */
	}
}