/* Themed reviews page. Tokens come from assets/css/tokens.css. */

.clickt-revpage {
	max-width: 1120px;
	margin: 0 auto;
	padding: 48px 20px 72px;
}

.clickt-revpage__head {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 56px;
}

.clickt-revpage .clickt-revpage__heading {
	margin: 0 0 12px;
	font-family: var(--clickt-font-heading);
}

.clickt-revpage__summary {
	margin: 0 0 8px;
	font-size: 18px;
}

.clickt-revpage__summary strong {
	font-size: 28px;
	margin-right: 6px;
}

.clickt-revpage__intro {
	margin: 0;
	opacity: 0.85;
}

.clickt-revpage__section {
	margin: 0 0 56px;
}

/* Cinzel, not the script display face. These headings are the page's working
   parts — they are what search engines and AI assistants read and quote — so they
   need to scan quickly at a glance rather than decorate. */
/* Scoped under the block deliberately: Elementor's kit sets `.elementor-kit-47 h2`
   to the Norican script face at specificity 0,1,1, so a lone class loses. Two
   classes beat it without resorting to !important. */
.clickt-revpage .clickt-revpage__section-heading {
	margin: 0 0 24px;
	padding-bottom: 12px;
	border-bottom: var(--clickt-border-thin, 1px) solid var(--clickt-hairline, rgba(0, 0, 0, 0.18));
	font-family: var(--clickt-font-heading);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* auto-FIT, not auto-fill: auto-fill keeps empty tracks, so a section holding one
   review left a card stranded in a 320px column with two thirds of the page blank.
   The cap stops a lone card stretching the full width and keeps line length
   readable — a long review at 1120px is as hard to read as at 320px. It is 520px
   rather than 560 because the repeat() count is computed from the MAX track size:
   at 560 only one column fits an 1120px container, at 520 two do. */
.clickt-revpage__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 520px));
	justify-content: start;
	align-items: start;
	gap: 24px;
}

.clickt-revpage__card {
	margin: 0;
	padding: 24px;
	border: var(--clickt-border-thin, 1px) solid var(--clickt-hairline, rgba(0, 0, 0, 0.12));
	border-radius: 8px;
}

.clickt-revpage__stars {
	display: flex;
	gap: 2px;
	margin-bottom: 12px;
}

.clickt-revpage__quote {
	margin: 0 0 16px;
	font-style: italic;
	line-height: 1.6;
}

.clickt-revpage__caption {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}

/* The reviewer's name is attribution, not chrome — keep it at full strength. */
.clickt-revpage__author {
	font-weight: 600;
}

.clickt-revpage__caption time {
	opacity: 0.75;
}

.clickt-revpage__reply {
	margin-top: 16px;
	padding-top: 16px;
	border-top: var(--clickt-border-thin, 1px) solid var(--clickt-hairline, rgba(0, 0, 0, 0.1));
	font-size: 14px;
}

.clickt-revpage__reply-label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.clickt-revpage__reply p {
	margin: 0;
}

@media (max-width: 640px) {
	.clickt-revpage {
		padding: 32px 16px 48px;
	}

	.clickt-revpage__grid {
		grid-template-columns: 1fr;
	}
}