/* Carlo Tours — Reviews.
   The page's single dark band. Colour overrides here all carry two classes:
   theme.json prints element styles as :root :where(h2){...}, which ties with
   a one-class selector and wins on order. */

.carlo-reviews {
	color: var(--wp--preset--color--base);
}

.carlo-reviews .carlo-head__eyebrow {
	color: var(--wp--preset--color--line);
}

.carlo-reviews .carlo-head__title {
	color: var(--wp--preset--color--base);
}

.carlo-reviews .carlo-head__intro {
	color: var(--wp--preset--color--line);
}

.carlo-reviews__head {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* --- One review --- */
.carlo-quote {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	width: clamp(17rem, 80vw, 27rem);
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	/* rgba fallback first, then the token-derived value for browsers with color-mix. */
	border: var(--wp--custom--rule) solid rgba(255, 255, 255, 0.18);
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
}

.carlo-quote__stars {
	display: flex;
	gap: 0.2rem;
	margin: 0;
}

.carlo-quote__stars svg {
	width: 0.875rem;
	height: 0.875rem;
	fill: var(--wp--preset--color--accent);
}

.carlo-quote__body {
	margin: 0;
	padding: 0;
	border: 0;
	flex: 1 1 auto;
}

.carlo-reviews .carlo-quote__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	line-height: var(--wp--custom--line-snug);
	letter-spacing: var(--wp--custom--tracking-snug);
	color: var(--wp--preset--color--base);
	text-wrap: pretty;
}

/* Hanging quote mark: typographic, not a graphic. */
.carlo-reviews .carlo-quote__title::before {
	content: "\201C";
}

.carlo-reviews .carlo-quote__title::after {
	content: "\201D";
}

.carlo-reviews .carlo-quote__text {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--line-body);
	color: var(--wp--preset--color--line);
}

.carlo-quote__who {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--rule) solid rgba(255, 255, 255, 0.18);
	border-top-color: color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
}

.carlo-quote__author {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--base);
}

.carlo-quote__origin {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking-wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* --- Foot --- */
.carlo-reviews__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.carlo-reviews .carlo-rail-nav button {
	border-color: rgba(255, 255, 255, 0.28);
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent);
	color: var(--wp--preset--color--base);
}

.carlo-reviews .carlo-rail-nav button:hover:not(:disabled) {
	border-color: var(--wp--preset--color--base);
}

.carlo-reviews__footnote {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking-wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Keyboard focus has to stay visible against near-black. */
.carlo-reviews :focus-visible {
	outline-color: var(--wp--preset--color--base);
}

@media (min-width: 900px) {
	.carlo-reviews__foot {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.carlo-quote {
		padding: var(--wp--preset--spacing--50);
	}
}