/* ==========================================================================
   REFERENCIE

   Kolotoč hodnotení a pod ním rad log firemných klientov.
   Dizajn je kreslený na 1728 × 1176 px.
   ========================================================================== */

.shs-testimonials {
	--shs-testimonials-inset: var(--shs-edge-inset);

	padding-block: calc(var(--shs-space-96) + var(--shs-space-19)) var(--shs-space-96);
	color: var(--shs-brand);
	background: var(--shs-white);
}

/* ---- Nadpis a odznak ---------------------------------------------------- */

.shs-testimonials__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--shs-space-42);
	padding-inline: var(--shs-testimonials-inset);
}

.shs-testimonials__badge {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--shs-space-12);
	margin-top: var(--shs-space-48);
	color: var(--shs-brand);
}

.shs-testimonials__badge:hover {
	text-decoration: none;
}

.shs-testimonials__badge-logo {
	display: block;
	width: 59px;
	height: auto;
}

.shs-testimonials__badge-body {
	display: flex;
	flex-direction: column;
	gap: var(--shs-space-4);
}

.shs-testimonials__badge-label {
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-tight);
	text-transform: uppercase;
}

.shs-testimonials__badge-stars {
	font-size: var(--shs-fs-small);
	line-height: 1;
	letter-spacing: 0.12em;
}

/* Šípka sa pri prejdení myšou pohne v smere, do ktorého ukazuje. */
.shs-testimonials__badge-arrow {
	display: block;
	width: 18px;
	height: auto;
	align-self: flex-end;
	transition: translate var(--shs-duration) var(--shs-ease);
}

.shs-testimonials__badge:hover .shs-testimonials__badge-arrow {
	translate: 3px -3px;
}

/* ---- Kolotoč ------------------------------------------------------------ */

.shs-testimonials__viewport {
	position: relative;
	margin-top: var(--shs-space-96);
}

.shs-testimonials__list {
	display: flex;
	align-items: stretch;
	gap: var(--shs-space-32);
	margin: 0;
	padding: 0 var(--shs-testimonials-inset);
	list-style: none;

	/*
	 * `overflow-y: hidden` je tu zámerne: pri `overflow-x: auto` si
	 * prehliadač dopočíta zvislé rolovanie sám a karta posunutá
	 * animáciou by v páse vyrobila zvislý posuvník.
	 */
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.shs-testimonials__list::-webkit-scrollbar {
	display: none;
}

/*
 * Kolotoč ukazuje presne TRI položky, zvyšok sa doroluje. Šírka je
 * podiel viditeľnej plochy pásu, nie pevné číslo z návrhu — inak by na
 * širokej obrazovke vykúkala štvrtá a na užšej sa nezmestili tri.
 * Pás je odsadený rovnako z oboch strán, takže tie tri sedia presne
 * v 1600 px páse ako zvyšok obsahu; ďalšia vykúka do okraja, lebo
 * obsah sa orezáva až na hrane výplne, nie na konci textu.
 */
.shs-testimonials__card {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	width: calc(
		(100% - (var(--shs-carousel-count) - 1) * var(--shs-space-32))
		/ var(--shs-carousel-count)
	);
	min-height: 413px;
	padding: var(--shs-space-42);
	background: var(--shs-cream);
	border: var(--shs-hairline) solid color-mix(in srgb, var(--shs-brand) 20%, transparent);
}

.shs-testimonials__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--shs-space-24);
}

.shs-testimonials__avatar {
	display: block;
	flex: 0 0 auto;
	width: 92px;
	height: 92px;
	overflow: hidden;
	background: color-mix(in srgb, var(--shs-brand) 12%, transparent);
	border-radius: 50%;
}

.shs-testimonials__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shs-testimonials__rating {
	font-size: var(--shs-fs-lead);
	line-height: 1;
	letter-spacing: 0.12em;
}

.shs-testimonials__quote {
	margin: var(--shs-space-24) 0 0;
	max-width: 603px;
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
}

/* Autor sedí v dizajne na spodnej hrane karty, nie hneď pod citátom. */
.shs-testimonials__author {
	margin-top: auto;
	padding-top: var(--shs-space-32);
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-light);
	text-align: right;
}

/* ---- Tlačidlo a šípky --------------------------------------------------- */

.shs-testimonials__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--shs-space-48);
	margin-top: var(--shs-space-48);
	padding-inline: var(--shs-testimonials-inset);
}

.shs-testimonials__nav {
	display: flex;
	align-items: center;
	gap: var(--shs-space-19);
}

/* ---- Klienti ------------------------------------------------------------ */

.shs-testimonials__clients {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--shs-space-48);
	margin-top: var(--shs-space-96);
	padding-inline: var(--shs-testimonials-inset);
}

.shs-testimonials__clients-title {
	flex: 0 0 auto;
	width: 289px;
	font-size: var(--shs-fs-heading);
}

/*
 * Logá sa rolujú donekonečna. Pás je v kóde dvakrát a posúva sa presne
 * o polovicu svojej šírky — v tom okamihu je druhá kópia na mieste prvej,
 * takže sa slučka nedá zbadať.
 */
.shs-testimonials__marquee {
	display: flex;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.shs-testimonials__logos {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--shs-space-64);
	margin: 0;
	padding-inline-end: var(--shs-space-64);
	list-style: none;
	animation: shs-marquee 18s linear infinite;
}

.shs-testimonials__marquee:hover .shs-testimonials__logos {
	animation-play-state: paused;
}

@keyframes shs-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

/* Bez pohybu ostane pás stáť — rolovanie nesmie byť jediná cesta k obsahu. */
@media (prefers-reduced-motion: reduce) {
	.shs-testimonials__logos {
		animation: none;
	}

	.shs-testimonials__marquee {
		overflow-x: auto;
		scrollbar-width: none;
	}
}

.shs-testimonials__logos img {
	display: block;
	width: auto;
	max-width: 180px;
	height: 100%;

	/*
	 * Logá chodia od klientov aj s bielym podkladom — multiply nechá
	 * na svetlej ploche sekcie vidieť len kresbu loga.
	 */
	mix-blend-mode: multiply;
	max-height: 72px;
	object-fit: contain;
}

/* ---- Mobil -------------------------------------------------------------- */

@media (max-width: 900px) {
	/* Na úzkom okne sú tri položky nečitateľné — ostane jedna a pol. */
	.shs-testimonials__card {
		width: 82vw;
	}

	.shs-testimonials {
		--shs-testimonials-inset: var(--shs-gutter);

		padding-block: var(--shs-space-64);
	}

	.shs-testimonials__head {
		flex-direction: column;
		gap: var(--shs-space-32);
	}

	.shs-testimonials__badge {
		max-width: 60%;
		margin-top: 0;
	}

	.shs-testimonials__viewport,
	.shs-testimonials__clients {
		margin-top: var(--shs-space-48);
	}

	.shs-testimonials__card {
		min-height: 0;
		padding: var(--shs-space-32);
	}

	.shs-testimonials__clients-title {
		width: 100%;
	}

	.shs-testimonials__logos {
		gap: var(--shs-space-32);
		padding-inline-end: var(--shs-space-32);
	}
}

/* ==========================================================================
   VIDEO RECENZIA

   Karta s náhľadom videa. Prehrávač sa vkladá až po kliknutí
   (`assets/js/blocks/testimonials.js`), dovtedy je v karte fotka
   a tlačidlo.
   ========================================================================== */

.shs-testimonials__card--video {
	display: flex;
	flex-direction: column;
	gap: var(--shs-space-19);
	padding: 0;
	background: none;
	border: 0;

	/*
	 * Textová karta má pevnú minimálnu výšku (413 px z návrhu), aby
	 * riadok citátov držal rytmus. Video ju dediť nesmie — pod
	 * prehrávačom by ostala takmer dvestopixelová diera a popis by
	 * visel kdesi dole.
	 */
	min-height: 0;
}

.shs-video {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--shs-brand-dark);
}

/* Nahraté video — prehrávač prehliadača vypĺňa celú kartu. */
.shs-video--file {
	background: var(--shs-brand-dark);
}

.shs-video__file {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--shs-brand-dark);
}

.shs-video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Tlačidlo leží cez celý náhľad — klikať sa dá kdekoľvek na fotku,
 * nie len na krúžok uprostred.
 */
.shs-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: color-mix(in srgb, var(--shs-brand-dark) 25%, transparent);
	transition: background-color var(--shs-duration) var(--shs-ease);
}

.shs-video__play:hover,
.shs-video__play:focus-visible {
	background: color-mix(in srgb, var(--shs-brand-dark) 45%, transparent);
	text-decoration: none;
}

/* Trojuholník je nakreslený rámikom — žiadny ďalší súbor s ikonou. */
.shs-video__icon {
	display: block;
	width: 0;
	height: 0;
	margin-left: 6px;
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
	border-left: 21px solid var(--shs-white);
}

.shs-video__icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 76px;
	height: 76px;
	translate: -50% -50%;
	border: var(--shs-hairline) solid color-mix(in srgb, var(--shs-white) 70%, transparent);
	border-radius: 50%;
}

/* Po vložení prehrávača náhľad aj tlačidlo ustúpia. */
.shs-video.is-playing .shs-video__poster,
.shs-video.is-playing .shs-video__play {
	display: none;
}

.shs-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.shs-testimonials__video-text {
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
}

/* ---- Samostatná časť s videami ------------------------------------------ */

/*
 * Videá stoja pod pásom textových recenzií vo vlastnej mriežke. V páse
 * s citátmi pôsobila čierna plocha prehrávača ako diera — karta má inú
 * výšku aj rytmus než text.
 */
.shs-testimonials__videos {
	margin-top: var(--shs-space-48);
	padding-inline: var(--shs-testimonials-inset);
}

.shs-testimonials__videos-title {
	margin: 0 0 var(--shs-space-32);
	font-family: var(--shs-font-display);
	font-size: var(--shs-fs-heading);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-tight);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/*
 * `auto-fill`, nie `auto-fit`: prázdne stĺpce ostanú stáť. Pri jedinom
 * videu by sa `auto-fit` stĺpce zbalili a karta by sa roztiahla cez
 * celú šírku sekcie — čierny obdĺžnik na pol obrazovky.
 */
.shs-testimonials__videos-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--shs-space-32);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* V mriežke už karta nepotrebuje pevnú šírku z kolotoča. */
.shs-testimonials__videos-list .shs-testimonials__card--video {
	width: auto;
}

@media (max-width: 900px) {
	.shs-testimonials__videos {
		margin-top: var(--shs-space-64);
		padding-inline: var(--shs-gutter);
	}

	.shs-testimonials__videos-list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--shs-space-24);
	}
}

/* ==========================================================================
   ZÁLOŽKY

   Recenzie, videá a Google recenzie sa striedajú v jednom mieste
   stránky. Tri pásy pod sebou by zo sekcie spravili tri obrazovky.
   ========================================================================== */

.shs-testimonials__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shs-space-32);
	margin-top: var(--shs-space-48);
	padding-inline: var(--shs-testimonials-inset);
}

/*
 * Záložka je text s vlasovou linkou, nie tlačidlo s plochou — sekcia
 * má v návrhu tiché, textové ovládanie a farebné pilulky by z nej
 * spravili niečo iné.
 */
.shs-testimonials__tab {
	padding: 0 0 var(--shs-space-8);
	font-family: inherit;
	font-size: var(--shs-fs-micro);
	font-weight: var(--shs-weight-light);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: color-mix(in srgb, currentColor 60%, transparent);
	background: none;
	border: 0;
	border-bottom: var(--shs-hairline) solid transparent;
	cursor: pointer;
	transition:
		color var(--shs-duration) var(--shs-ease),
		border-color var(--shs-duration) var(--shs-ease);
}

.shs-testimonials__tab:hover,
.shs-testimonials__tab:focus-visible {
	color: currentColor;
}

.shs-testimonials__tab.is-active {
	color: currentColor;
	border-bottom-color: currentColor;
}

.shs-testimonials__panel[hidden] {
	display: none;
}

/* Panel s Google recenziami kreslí plugin — téma mu dá len šírku. */
.shs-testimonials__google {
	margin-top: var(--shs-space-48);
	padding-inline: var(--shs-testimonials-inset);
}

@media (max-width: 900px) {
	.shs-testimonials__tabs {
		gap: var(--shs-space-19);
		margin-top: var(--shs-space-32);
		padding-inline: var(--shs-gutter);
	}

	.shs-testimonials__google {
		padding-inline: var(--shs-gutter);
	}
}