/**
 * Customer Testimonials section ("Loved by N+ Teams Worldwide").
 * Matches the Desklog reviews layout: 4 / 2 / 1 cards per row, equal fixed-height
 * cards with internally scrolling review text, and centred pagination below.
 *
 * @package Doso
 */

.reviews{
	--reviews-accent:var(--color-primary,#2563eb);   /* theme brand colour: highlight + stars */
	--reviews-border:#e5e7eb;
	--reviews-card-h:340px;
	padding-block:clamp(3rem,7vw,5.5rem);
	background:#f4f8ff;                 /* light blue section background */
}
.reviews__container{
	width:min(100%,var(--container,1280px));
	margin-inline:auto;
	padding-inline:clamp(1rem,3vw,2rem);
}

/* ---- Header ----------------------------------------------------------------- */
.reviews__header{text-align:center;max-width:820px;margin:0 auto clamp(2.25rem,5vw,3.5rem)}
.reviews__title{
	margin:0 0 .75rem;
	font-family:var(--font-heading,inherit);
	font-weight:800;
	line-height:1.15;
	letter-spacing:-.01em;
	font-size:clamp(1.9rem,4.5vw,3rem);
	color:var(--color-text,#0f172a);
}
.reviews__title-em{color:var(--reviews-accent)}
.reviews__subtitle{
	margin:0;
	color:#64748b;
	font-size:clamp(1rem,1.6vw,1.2rem);
	line-height:1.6;
}

/* ---- Grid ------------------------------------------------------------------- */
.reviews__grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:clamp(1rem,1.8vw,1.5rem);
	transition:opacity .35s ease;
}
.reviews__grid.is-switching{opacity:0}           /* smooth page transition */

/* ---- Card ------------------------------------------------------------------- */
.reviews__card{
	display:flex;
	flex-direction:column;
	height:var(--reviews-card-h);                 /* equal, fixed height */
	padding:clamp(1.4rem,2vw,1.85rem);
	background:#fff;
	border:1px solid var(--reviews-border);
	border-radius:18px;
	box-shadow:0 10px 30px -18px rgba(15,23,42,.18);
	transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.reviews__card:hover{
	transform:translateY(-4px);
	box-shadow:0 18px 40px -20px rgba(15,23,42,.28);
	border-color:#d8dde5;
}
.reviews__card[hidden]{display:none}   /* off-page cards (JS pagination) */

/* Stars */
.reviews__stars{display:inline-flex;gap:.2rem;margin-bottom:1rem}
.reviews__star{fill:#e2e8f0}                      /* empty star */
.reviews__star.is-filled{fill:var(--reviews-accent)}

/* Review text — fills remaining space and scrolls internally when long. */
.reviews__text{
	flex:1 1 auto;
	min-height:0;
	overflow-y:auto;
	margin-bottom:1.1rem;
	padding-right:.5rem;
	color:#475569;
	font-size:.98rem;
	line-height:1.65;
	scrollbar-width:thin;
	scrollbar-color:#cbd5e1 transparent;
}
.reviews__text p{margin:0}
.reviews__text::-webkit-scrollbar{width:6px}
.reviews__text::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:6px}
.reviews__text::-webkit-scrollbar-track{background:transparent}

/* Person — pinned to the bottom of the card. */
.reviews__person{margin-top:auto}
.reviews__name{margin:0 0 .2rem;font-weight:700;font-size:1.05rem;color:var(--color-text,#0f172a)}
.reviews__role{margin:0;color:#94a3b8;font-size:.9rem;line-height:1.4}

/* ---- Pagination ------------------------------------------------------------- */
.reviews__pagination{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:1.25rem;
	margin-top:clamp(2.25rem,4vw,3rem);
}
.reviews__pagination[hidden]{display:none}   /* stay hidden when there's 1 page */
.reviews__nav{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:44px;height:44px;
	border:1.5px solid var(--reviews-accent);
	border-radius:10px;
	background:#fff;
	color:var(--reviews-accent);
	cursor:pointer;
	transition:background .2s ease,color .2s ease,opacity .2s ease,transform .2s ease;
}
.reviews__nav:hover:not(:disabled){background:var(--reviews-accent);color:#fff;transform:translateY(-1px)}
.reviews__nav:disabled{opacity:.4;cursor:not-allowed}
.reviews__page{font-size:1rem;color:#475569;font-weight:500;min-width:96px;text-align:center}

/* ---- Responsive ------------------------------------------------------------- */
@media(max-width:992px){
	.reviews__grid{grid-template-columns:repeat(2,1fr)}   /* 2 per row — tablet */
}
@media(max-width:600px){
	.reviews__grid{grid-template-columns:1fr}             /* 1 per row — mobile */
	.reviews__card{height:auto;min-height:280px}
}
@media(prefers-reduced-motion:reduce){
	.reviews__grid,.reviews__card,.reviews__nav{transition:none}
}