/**
 * Estilos do Google Reviews Dotore.
 *
 * Layout calibrado pelo visual do TrustIndex: cards claros centralizados,
 * avatar circular com selo do Google, data relativa, estrelas douradas e
 * texto truncado com "Leia mais".
 *
 * Tudo escopado sob .grd-reviews para não vazar no tema. Ajuste as
 * variáveis abaixo para casar com a identidade visual do site.
 */

.grd-reviews {
	--grd-star: #fbbc04;
	--grd-text: #1f2937;
	--grd-muted: #8a94a6;
	--grd-surface: #f5f6f7;
	--grd-radius: 10px;
	--grd-gap: 20px;
	--grd-nav-size: 34px;
	--grd-lines: 4; /* linhas visíveis antes de truncar */
	--grd-card-width: 240px; /* largura-alvo do card no grid e no slider */

	color: var(--grd-text);
	font-size: 16px;
}

/* ---------- cabeçalho (média + total reais do Google) ---------- */

.grd-reviews__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: var(--grd-gap);
}

.grd-reviews__average {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
}

.grd-reviews__total {
	color: var(--grd-muted);
}

.grd-reviews__cta {
	font-weight: 600;
	text-decoration: none;
}

/* ---------- viewport + navegação ---------- */

.grd-reviews__viewport {
	position: relative;
}

.grd-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: var(--grd-nav-size);
	height: var(--grd-nav-size);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
	color: #5f6368;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.grd-nav:hover {
	background: #f1f3f4;
}

.grd-nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

.grd-nav--prev {
	left: -6px;
}

.grd-nav--next {
	right: -6px;
}

/* ---------- lista ---------- */

.grd-reviews__list {
	display: grid;
	/* auto-fill com largura-alvo: mais colunas, mais estreitas, sem precisar
	   de breakpoints manuais — encolhe sozinho em telas menores. */
	grid-template-columns: repeat(auto-fill, minmax(var(--grd-card-width), 1fr));
	gap: var(--grd-gap);
}

.grd-reviews--list .grd-reviews__list {
	grid-template-columns: 1fr;
}

.grd-reviews--slider .grd-reviews__list {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: var(--grd-card-width);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.grd-reviews--slider .grd-reviews__list::-webkit-scrollbar {
	display: none;
}

.grd-reviews--slider .grd-review {
	scroll-snap-align: start;
}

@media (max-width: 600px) {
	.grd-reviews__list {
		grid-template-columns: 1fr;
	}

	.grd-reviews--slider .grd-reviews__list {
		grid-auto-columns: 88%;
	}

	.grd-nav--prev {
		left: 0;
	}

	.grd-nav--next {
		right: 0;
	}
}

/* ---------- card ---------- */

.grd-review {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--grd-surface);
	border-radius: var(--grd-radius);
	padding: 42px 20px 22px;
	margin-top: 28px; /* espaço para o avatar que sobressai */
}

.grd-review__avatar {
	position: relative;
	width: 56px;
	height: 56px;
	margin-top: -56px;
	margin-bottom: 12px;
}

.grd-review__photo,
.grd-review__initial {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Fallback quando o Google não expõe a foto do autor */
.grd-review__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #7b53c1;
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	text-transform: uppercase;
}

.grd-review__google {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.grd-reviews .grd-review__name {
	font-weight: 700;
	line-height: 1.3;
	color: #14161a !important;
}

.grd-review__date {
	color: var(--grd-muted);
	font-size: 0.86rem;
	margin-top: 2px;
}

.grd-review__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 8px;
}

.grd-review__stars {
	color: var(--grd-star);
	font-size: 1.05rem;
	letter-spacing: 2px;
	line-height: 1;
}

.grd-review__verified {
	display: inline-flex;
	line-height: 0;
}

/* ---------- texto + "leia mais" ---------- */

/* Especificidade reforçada (.grd-reviews ancestral) + !important: temas do
   WordPress costumam estilizar <p> dentro do conteúdo (ex: ".entry-content
   p") com especificidade maior que uma classe simples, o que sobrescrevia
   nossa cor e deixava o texto claro/pouco legível. */
.grd-reviews .grd-review__text {
	margin: 0;
	line-height: 1.55;
	color: #14161a !important;
}

/* Trunca por número de linhas; o JS revela o botão só quando há corte. */
.grd-review__body:not(.is-expanded) .grd-review__text {
	display: -webkit-box;
	-webkit-line-clamp: var(--grd-lines);
	line-clamp: var(--grd-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.grd-review__more {
	margin-top: 10px;
	padding: 0;
	border: none;
	background: none;
	color: var(--grd-muted);
	font-size: 0.9rem;
	cursor: pointer;
	text-decoration: none;
}

.grd-review__more:hover {
	color: var(--grd-text);
	text-decoration: underline;
}

/* ---------- resposta da clínica ---------- */

.grd-review__reply {
	margin-top: 14px;
	padding: 10px 12px;
	background: rgba(0, 0, 0, 0.04);
	border-radius: calc(var(--grd-radius) / 2);
	font-size: 0.9rem;
	text-align: left;
}

.grd-review__reply p {
	margin: 4px 0 0;
}

/* ---------- atribuição ---------- */

.grd-reviews__attribution {
	margin: var(--grd-gap) 0 0;
	text-align: right;
	font-size: 0.78rem;
}

/* Mais escura que --grd-muted de propósito: aquela variável é usada em
   textos secundários curtos (data, total) onde baixo contraste é aceitável;
   aqui é a única informação de atribuição exigida pela política do Google,
   então precisa ser legível por si só, contra o fundo da página do tema
   (não o fundo claro dos cards). */
.grd-reviews .grd-reviews__attribution,
.grd-reviews .grd-reviews__attribution a {
	color: #3a3f4a !important;
	text-decoration: none;
}

.grd-reviews__attribution a:hover {
	text-decoration: underline;
}