/*
 * Sekce „Recenze — carousel".
 *
 * Layout hlavičky:
 *   Desktop: 3 sloupce (Google rating | nadpis centrovaný | button)
 *   Mobil:   stack pod sebe
 *
 * Karty:
 *   Desktop: 3 sloupce grid
 *   Tablet/mobil: horizontal scroll-snap carousel (jako services)
 *
 * Sdílí JS s services-carousel (přes data-rp-carousel-track / data-rp-carousel-next).
 */

:root {
	--rp-star-color:        #FACC15;  /* žlutá/zlatá */
	--rp-star-empty-color:  rgba(243, 244, 246, 0.2);
}

/* ── Hlavička sekce ─────────────────────────────────────── */
.reviews-carousel__head {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--rp-space-5);
	margin-bottom: var(--rp-space-7);             /* 48 px nad kartami */
}

/* Levý sloupec: Google rating
 *  Logo nahoře, pod ním řádek s hvězdičkami + počtem.
 *  Vše centrováno, gap 12 px mezi logem a řádkem i mezi hvězdičkami a počtem.
 */
.reviews-carousel__google {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	justify-self: start;
}

.reviews-carousel__google-logo {
	display: inline-block;
	line-height: 0;
}
.reviews-carousel__google-logo-img {
	height: 24px;
	width: auto;
	display: block;
}

/* Řádek pod logem: hvězdičky + počet recenzí vedle sebe */
.reviews-carousel__google-rating {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.reviews-carousel__google-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.reviews-carousel__google-count {
	color: var(--rp-color-text);
	font-size: 12px;
	font-weight: var(--rp-fw-medium);             /* 500 */
	line-height: 1.1;                              /* 110 % */
	letter-spacing: -0.02em;                       /* -2 % */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
	.reviews-carousel__google-count:hover {
		color: var(--rp-color-accent);
	}
}

/* Střed: nadpis + podnadpis */
.reviews-carousel__intro {
	text-align: center;
	max-width: 600px;
	justify-self: center;
}

.reviews-carousel__title {
	margin: 0 0 var(--rp-space-3);
	color: var(--rp-color-text);
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);   /* 28→40 px */
	font-weight: var(--rp-fw-medium);             /* 500 */
	line-height: var(--rp-lh-tight);              /* 110 % */
	letter-spacing: var(--rp-tracking-tight);     /* -3 % */
}

.reviews-carousel__subtitle {
	color: var(--rp-color-text);
	font-size: var(--rp-fs-sm);                   /* 16 px */
	font-weight: var(--rp-fw-regular);
	line-height: var(--rp-lh-normal);
	letter-spacing: -0.02em;
}
.reviews-carousel__subtitle p { margin: 0; color: inherit; }

/* Pravý sloupec: ghost button */
.reviews-carousel__btn {
	justify-self: end;
	flex: 0 0 auto;
}

/* ── Hvězdičky ──────────────────────────────────────────── */
.reviews-carousel__star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--rp-star-empty-color);
	line-height: 0;
}
.reviews-carousel__star--filled {
	color: var(--rp-star-color);
}
.reviews-carousel__star svg {
	display: block;
}

/* ── Track wrapper + šipka ──────────────────────────────── */
.reviews-carousel__track-wrap {
	position: relative;
}

.reviews-carousel__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 48px) / 3);   /* desktop: přesně 3 karty (2× 24 px gap) */
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}
.reviews-carousel__track::-webkit-scrollbar { display: none; }

/* Mobile / tablet — užší karty s peek.
   grid-auto-columns = max(280px, 80%) — track je vždy aspoň 280px, takže
   karty mají čitelnou šířku i na úzkých mobilech a nepřekrývají se. */
@media (max-width: 1023px) {
	.reviews-carousel__track {
		grid-auto-columns: max(280px, 80%);
		gap: 16px;
		margin-inline: calc(var(--rp-space-5) * -1);
		padding-inline: var(--rp-space-5);
		scroll-padding-inline: var(--rp-space-5);
	}
}

/* ── Karta recenze ──────────────────────────────────────── */
.reviews-carousel__card {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: var(--rp-space-4);                       /* 16 px mezi quote, textem, footerem */
	padding: 32px 24px 24px;
	background: var(--rp-color-text);             /* bílé pozadí */
	color: var(--rp-color-bg);
	border-radius: var(--rp-radius-md);            /* 12 px */
}

.reviews-carousel__quote {
	display: inline-flex;
	align-self: center;                            /* ikona uprostřed karty, ne vlevo */
	color: var(--rp-color-bg);
	line-height: 0;
	opacity: 0.5;
}
.reviews-carousel__quote svg { display: block; }

.reviews-carousel__card-text {
	flex: 1 1 auto;
	color: var(--rp-color-bg);
	font-size: 13px;
	font-weight: var(--rp-fw-regular);
	line-height: var(--rp-lh-normal);
	letter-spacing: -0.02em;
}
.reviews-carousel__card-text p { margin: 0 0 12px; color: inherit; }
.reviews-carousel__card-text p:last-child { margin-bottom: 0; }

/* Footer karty: autor (vlevo) + hvězdičky (vpravo).
   Trik s čárou přes celou kartu: negative margin -24px (= horizontální padding karty)
   roztáhne element do okrajů karty, padding-inline 24px vrátí obsah na původní místo. */
.reviews-carousel__card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rp-space-3);
	margin-top: var(--rp-space-3);
	margin-inline: -24px;
	padding: var(--rp-space-3) 24px 0;
	border-top: 0.5px solid rgba(17, 24, 39, 0.08);
}

.reviews-carousel__card-author {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.reviews-carousel__card-avatar {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rp-color-bg);
	color: var(--rp-color-text);
	font-size: 16px;
	font-weight: var(--rp-fw-semibold);
}
.reviews-carousel__card-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Fallback iniciála — barvu pozadí dodává inline style z PHP (paleta dle hashe jména). */
.reviews-carousel__card-avatar--initial {
	color: var(--rp-color-text);
	font-size: 18px;
	font-weight: var(--rp-fw-medium);
	line-height: 1;
	text-transform: uppercase;
}

.reviews-carousel__card-author-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.reviews-carousel__card-name {
	color: var(--rp-color-bg);
	font-size: 14px;
	font-weight: var(--rp-fw-semibold);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.reviews-carousel__card-date {
	color: rgba(17, 24, 39, 0.6);
	font-size: 12px;
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.reviews-carousel__card-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
}

/* ── Šipka „další" — MIMO container, jen na širokých viewportech (≥ 1280 px) ──── */
.reviews-carousel__nav { display: none; }

@media (min-width: 1280px) {
	.reviews-carousel__nav {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		right: -64px;                              /* mimo container vpravo */
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		background: transparent;
		border: 0;
		color: var(--rp-color-text);
		cursor: pointer;
		opacity: 0.6;
		transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
	}
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
	.reviews-carousel__nav:hover {
		opacity: 1;
		transform: translateY(-50%) translateX(2px);
	}
}
.reviews-carousel__nav-arrow {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

/* ── Responsive head ────────────────────────────────────── */
@media (max-width: 767px) {
	/* display:contents rozpustí __head — jeho děti se stanou přímými dětmi
	   kontejneru reviews-carousel. Díky tomu lze pomocí order přesunout
	   tlačítko pod carousel track, aniž bychom měnili HTML. */
	.reviews-carousel {
		display: flex;
		flex-direction: column;
		gap: var(--rp-space-5);
	}
	.reviews-carousel__head {
		display: contents;
	}
	.reviews-carousel__google {
		order: 1;
		align-self: center;
		align-items: center;
	}
	.reviews-carousel__intro {
		order: 2;
		align-self: center;
		text-align: center;
	}
	.reviews-carousel__track-wrap {
		order: 3;
	}
	.reviews-carousel__btn {
		order: 4;
		align-self: center;
		display: inline-flex;
	}
}