/**
 * Social proof — the review card, the homepage slider, the bundle grid.
 *
 * One card style serves both surfaces; only the container differs. The card
 * is deliberately quiet: the reviews are the content, so nothing here
 * competes with the words.
 */

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

.aa-rvc {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: 1.4rem;
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius);
	background: var(--aa-surface);
}

.aa-rvc__stars { display: inline-flex; gap: .1rem; }

.aa-rvc__title {
	margin: 0;
	font-size: var(--aa-fs-base);
	font-weight: 700;
	line-height: 1.35;
	color: var(--aa-ink);
}

.aa-rvc__body {
	margin: 0;
	font-size: var(--aa-fs-sm);
	line-height: 1.65;
	color: var(--aa-ink);
}
.aa-rvc__body p { margin: 0 0 .6rem; }
.aa-rvc__body p:last-child { margin-bottom: 0; }

.aa-rvc__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	margin-top: auto;
	padding-top: .4rem;
}

.aa-rvc__who { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }

.aa-rvc__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 50%;
	background: var(--aa-surface-strong);
	color: var(--aa-ink);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .03em;
}

.aa-rvc__name {
	font-size: var(--aa-fs-sm);
	font-weight: 600;
	color: var(--aa-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aa-rvc__date {
	flex: 0 0 auto;
	font-size: var(--aa-fs-xs);
	color: var(--aa-muted);
}

.aa-rvc__product {
	align-self: flex-start;
	font-size: var(--aa-fs-xs);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--aa-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.aa-rvc__product:hover,
.aa-rvc__product:focus-visible {
	color: var(--aa-rose);
	border-bottom-color: var(--aa-rose);
}

/* --------------------------------------------------- the homepage slider */

.aa-revslider__meta {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: .35rem 0 0;
	font-size: var(--aa-fs-sm);
	color: var(--aa-muted);
}

.aa-slider {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.aa-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 1rem) / 3);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: .25rem;
	margin: -.25rem;
	/*
	 * `flex-basis: 0` matters: the children are sized with a percentage of
	 * this element, so an `auto` basis makes the track size to its content
	 * and the percentage resolve against that — circular, and it collapses.
	 * A zero basis gives the track a definite width to resolve against.
	 */
	flex: 1 1 0%;
	min-width: 0;
}
.aa-slider__track::-webkit-scrollbar { display: none; }
.aa-slider__track > * { scroll-snap-align: start; }
.aa-slider__track:focus-visible { outline: 2px solid var(--aa-ink); outline-offset: 2px; }

.aa-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--aa-hairline);
	border-radius: 50%;
	background: var(--aa-surface);
	color: var(--aa-ink);
	cursor: pointer;
	transition: background .2s var(--aa-ease), border-color .2s var(--aa-ease), opacity .2s var(--aa-ease);
}
.aa-slider__arrow svg { width: 18px; height: 18px; }
.aa-slider__arrow:hover:not(:disabled) { background: var(--aa-surface-strong); border-color: var(--aa-rose); }
.aa-slider__arrow:focus-visible { outline: 2px solid var(--aa-ink); outline-offset: 2px; }
.aa-slider__arrow:disabled { opacity: .3; cursor: default; }

.aa-slider__dots {
	display: flex;
	justify-content: center;
	gap: .45rem;
	margin-top: 1.1rem;
}

.aa-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--aa-surface-strong);
	cursor: pointer;
	transition: background .2s var(--aa-ease), transform .2s var(--aa-ease);
}
.aa-slider__dot[aria-selected="true"] { background: var(--aa-ink); transform: scale(1.25); }
.aa-slider__dot:focus-visible { outline: 2px solid var(--aa-ink); outline-offset: 3px; }

/* ------------------------------------------- bundle component reviews */

.aa-bundlerev__note {
	margin: .1rem 0 1.2rem;
	font-size: var(--aa-fs-sm);
	color: var(--aa-muted);
}

.aa-rvgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
	.aa-slider__track { grid-auto-columns: calc((100% - 1rem) / 2); }
	.aa-rvgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.aa-slider__track { grid-auto-columns: 100%; }
	.aa-slider__arrow { display: none; }
	.aa-rvgrid { grid-template-columns: minmax(0, 1fr); }
	.aa-rvc { padding: 1.1rem; }
}