/*
 * ceReviews — badges.
 *
 * Depends on assets/css/ce-brand.css for the design tokens; it is declared as a stylesheet
 * dependency so its :root is defined before anything here reads it. {@see shared-design-system}
 *
 * ⚠ EVERY SELECTOR IS CLASS-SCOPED UNDER .ce-rev. The theme steals bare-element rules
 * {@see nvcourses-catalogue-v2}, and a badge sits inside pages we do not own.
 *
 * ⚠ THE TWO SOURCE MARKS ARE SIZED BY VISIBLE MARK, NOT BOX HEIGHT. The Google wordmark reserves
 * ~21.8% of its height below the baseline for the "g" descender (viewBox 255.2x80.3, baseline at
 * 62.8), so a box matched to our logo's height draws a FIFTH less Google. The two --ce-rev-mark-*
 * variables below are the tuning point; they were set against a 4.16:1 site logo and want an
 * eyeball on staging if that logo is ever replaced.
 */

.ce-rev {
	--ce-rev-bg: #ffffff;
	--ce-rev-ground: #f7f9fc;
	--ce-rev-line: #e6ebf2;
	--ce-rev-ink: #0e2747;
	--ce-rev-muted: #54637a;
	--ce-rev-deep: #02356f;
	--ce-rev-link: #046bd2;
	/* Amber is used ONLY for stars. ce-brand has no accent beyond blue, and blue stars do not
	   read as a rating. */
	--ce-rev-star: #e8a33d;

	--ce-rev-mark-google: 34px;
	/* ⚠ SIZE THIS BY WIDTH, NOT BY CAP HEIGHT. The obvious rule — match our capitals to Google's —
	   is wrong here, and was tried: the ceASAP lockup is 6.4:1 where the Google wordmark is 3.2:1,
	   so equal capitals make our mark half again as wide and it reads as shouting over the
	   third-party one it is meant to sit beside. At 26px ours was 1.54x Google's width while its
	   capitals were only 0.71x its capitals, which is exactly how something can look oversized and
	   undersized at the same time. 22px puts us at 141px against Google's 108px, 1.30x.
	   Two things this must not be confused with: the mark renders small if the configured logo is
	   the full brand lockup, because the tagline then eats the box (that is attachment choice, not
	   this token — see Badges::OPT_BRAND_LOGO), and the file's own capital band is 74.5% of its
	   height, so any re-crop changes what a given px value looks like. */
	--ce-rev-mark-brand: 22px;

	box-sizing: border-box;
	color: var(--ce-rev-ink);
	font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
}

.ce-rev *,
.ce-rev *::before,
.ce-rev *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- marks */

.ce-rev .ce-rev-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ce-rev .ce-rev-logo-google > svg {
	height: var(--ce-rev-mark-google);
	width: auto;
	display: block;
	/* Claws back the descender space the SVG reserves but mostly does not draw into, so the mark
	   does not sit above a gap nobody put there. */
	margin-bottom: calc(var(--ce-rev-mark-google) * -0.2);
}

.ce-rev .ce-rev-logo-brand .ce-rev-logo-img {
	height: var(--ce-rev-mark-brand);
	width: auto;
	max-width: 100%;
	display: block;
}

/* ---------------------------------------------------------------- stars */

.ce-rev .ce-rev-stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	white-space: nowrap;
}

.ce-rev .ce-rev-stars-empty,
.ce-rev .ce-rev-stars-full {
	display: block;
	line-height: 0;
	white-space: nowrap;
}

/* The filled layer is clipped to the rating's fraction, so 4.6 draws four and a bit rather than
   rounding up to five. Its width is set inline by the renderer. */
.ce-rev .ce-rev-stars-full {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
}

.ce-rev .ce-rev-stars svg {
	width: 1.05em;
	height: 1.05em;
	display: inline-block;
	vertical-align: top;
}

.ce-rev .ce-rev-stars-empty svg { fill: var(--ce-rev-line); }
.ce-rev .ce-rev-stars-full svg  { fill: var(--ce-rev-star); }

/* Star size is driven by font-size on the wrapper, so each variant sets it once. */
.ce-rev-card .ce-rev-stars    { font-size: 21px; }
.ce-rev-pill .ce-rev-stars,
.ce-rev-onecourse .ce-rev-stars { font-size: 13px; }
.ce-rev-stacked .ce-rev-stars { font-size: 15px; }
.ce-rev-combined-col .ce-rev-stars { font-size: 15px; }

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

.ce-rev-card {
	width: 100%;
	max-width: 340px;
	background: var(--ce-rev-bg);
	border: 1px solid var(--ce-rev-line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(14, 39, 71, 0.06);
	text-align: center;
}

.ce-rev-card .ce-rev-mark {
	display: flex;
	justify-content: center;
	padding: 26px 24px 0;
}

.ce-rev-card .ce-rev-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 24px 24px;
}

.ce-rev .ce-rev-big {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: 58px;
	line-height: 0.95;
	color: var(--ce-rev-ink);
	font-variant-numeric: tabular-nums;
}

/* ⚠ THE SLACK IN THIS LINE BOX IS ALL ABOVE THE DIGITS. Playfair's figures sit high, and at
   line-height 0.95 the box clips close under the baseline — so the gap above the number is the
   container's padding while the gap below is almost nothing, and the stars crowd it. Adding the
   space on the STARS rather than widening the flex gap keeps it off the completions card, whose
   big number has no stars under it and is correctly spaced already. */
.ce-rev .ce-rev-big + .ce-rev-stars { margin-top: 10px; }
.ce-rev-combined .ce-rev-big + .ce-rev-stars { margin-top: 7px; }

.ce-rev .ce-rev-big-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--ce-rev-ink);
}

.ce-rev .ce-rev-sub {
	font-size: 14px;
	line-height: 1.45;
	color: var(--ce-rev-muted);
}

.ce-rev .ce-rev-action {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	min-height: 44px; /* a tap target, per the mobile standing rule */
	background: var(--ce-rev-ground);
	border-top: 1px solid var(--ce-rev-line);
	font-size: 14px;
	font-weight: 600;
	color: var(--ce-rev-link);
	text-decoration: none;
}

.ce-rev .ce-rev-action:hover,
.ce-rev .ce-rev-action:focus {
	color: var(--ce-rev-deep);
	text-decoration: none;
}

.ce-rev .ce-rev-arrow { font-weight: 700; }

/* ---------------------------------------------------------------- pill + stacked */

.ce-rev-pill,
.ce-rev-onecourse {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-height: 44px;
	padding: 9px 20px;
	background: var(--ce-rev-bg);
	border: 1px solid var(--ce-rev-line);
	border-radius: 999px;
}

.ce-rev-onecourse {
	border-radius: 12px;
	background: #e7eef8;
	border-color: #cdd9ea;
	gap: 10px;
}

.ce-rev .ce-rev-sep {
	width: 1px;
	height: 22px;
	background: var(--ce-rev-line);
	flex: 0 0 auto;
}

.ce-rev .ce-rev-score {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.ce-rev .ce-rev-count {
	font-size: 14px;
	font-weight: 600;
	color: var(--ce-rev-muted);
	white-space: nowrap;
}

.ce-rev-onecourse .ce-rev-count {
	font-size: 13px;
	color: var(--ce-rev-deep);
	font-variant-numeric: tabular-nums;
}

.ce-rev-stacked {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	padding: 16px 26px;
	background: var(--ce-rev-bg);
	border: 1px solid var(--ce-rev-line);
	border-radius: 14px;
}

/* ---------------------------------------------------------------- combined */

.ce-rev-combined {
	width: 100%;
	max-width: 560px;
	background: var(--ce-rev-bg);
	border: 1px solid var(--ce-rev-line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(14, 39, 71, 0.06);
}

/* ⚠ A GRID, NOT A WRAPPING FLEX ROW. Two flex children with a min-width and side padding can
   exceed the track by a few pixels and wrap silently to full width, taking the 1px divider with
   them as a stray horizontal sliver. A grid collapses only where the media query below says so. */
.ce-rev-combined-grid {
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
}

.ce-rev-combined-rule { background: var(--ce-rev-line); }

.ce-rev-combined-col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 7px;
	padding: 24px 18px 22px;
}

/* Both marks sit in one fixed row, so the two scores land on the same line — that alignment is
   what makes the card read as a comparison rather than two unrelated blocks. */
.ce-rev-combined-head {
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ce-rev-combined .ce-rev-big { font-size: 44px; }
.ce-rev-combined .ce-rev-sub { font-size: 13px; }

@media (max-width: 460px) {
	.ce-rev-combined-grid { grid-template-columns: 1fr; }
	.ce-rev-combined-rule { height: 1px; width: auto; margin: 0 22px; }
}

/* ---------------------------------------------------------------- completions */

/* ⚠ NO STARS IN THIS BLOCK, AND THAT IS DELIBERATE. These are volume figures. A star beside a
   completion count invites a visitor to read it as a rating. */

.ce-rev-stat-card .ce-rev-body { gap: 4px; padding: 18px 24px 8px; }

.ce-rev-stat-card .ce-rev-split {
	display: flex;
	justify-content: center;
	padding: 4px 18px 22px;
}

.ce-rev-stat-card .ce-rev-split-cell {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.ce-rev-stat-card .ce-rev-split-rule {
	width: 1px;
	background: var(--ce-rev-line);
	margin: 2px 0;
	flex: 0 0 auto;
}

.ce-rev-stat-card .ce-rev-split-n {
	font-size: 20px;
	font-weight: 700;
	color: var(--ce-rev-deep);
	font-variant-numeric: tabular-nums;
}

.ce-rev-stat-card .ce-rev-split-l {
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--ce-rev-muted);
}

.ce-rev-stat-pill {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-height: 44px;
	padding: 9px 20px;
	background: var(--ce-rev-bg);
	border: 1px solid var(--ce-rev-line);
	border-radius: 999px;
}

.ce-rev-stat-pill .ce-rev-stat-n {
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ce-rev .ce-rev-stat-l {
	font-size: 14px;
	color: var(--ce-rev-muted);
	white-space: nowrap;
}

.ce-rev-stat-stacked {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 16px 26px;
	background: var(--ce-rev-bg);
	border: 1px solid var(--ce-rev-line);
	border-radius: 14px;
}

.ce-rev-stat-stacked .ce-rev-stat-big {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: 30px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.ce-rev-stat-stacked .ce-rev-stat-l {
	font-size: 13px;
	font-weight: 600;
	color: var(--ce-rev-deep);
}

.ce-rev-stat-inline {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ce-rev-ink);
}

.ce-rev-stat-inline strong {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- phone */

@media (max-width: 420px) {
	.ce-rev .ce-rev-big { font-size: 46px; }
	.ce-rev-combined .ce-rev-big { font-size: 38px; }
	.ce-rev-card .ce-rev-mark { padding-top: 20px; }

	/* A pill's contents must be allowed to wrap rather than push the page sideways. */
	.ce-rev-pill,
	.ce-rev-onecourse,
	.ce-rev-stat-pill {
		flex-wrap: wrap;
		border-radius: 18px;
	}

	.ce-rev .ce-rev-count,
	.ce-rev .ce-rev-stat-l { white-space: normal; }
}

/* ---------------------------------------------------------------- the optional review form */

.ce-rev-form {
	max-width: 640px;
	background: var(--ce-rev-bg);
	border: 1px solid var(--ce-rev-line);
	border-radius: 18px;
	padding: 26px;
	box-shadow: 0 2px 6px rgba(14, 39, 71, 0.06);
}

.ce-rev-form-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* ⚠ SET TO MATCH THE BADGE BESIDE IT, NOT TO OUTRANK IT. Heading and badge share the uppercase
   and the letter-spacing so they read as one phrase. The heading takes --ce-brand (#046bd2, the
   brand blue, 5.2:1 on white); the badge keeps the deeper tone so the two relate without
   flattening into one colour. No display serif: letter-spaced caps in Playfair comb apart. */
.ce-rev-form-title {
	margin: 0;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-weight: 800;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ce-rev-link);
}

.ce-rev-form-badge {
	display: inline-flex;
	align-items: center;
	background: #e7eef8;
	color: var(--ce-rev-deep);
	border-radius: 999px;
	padding: 5px 13px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ce-rev-form-lede {
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ce-rev-muted);
}

.ce-rev-form-notice,
.ce-rev-form-error {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 14px;
}

.ce-rev-form-notice { background: #e7f4ec; color: #14532d; }
.ce-rev-form-error  { background: #fdeaea; color: #8a1c1c; }

.ce-rev-form-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 20px;
}

/* ⚠ RADIOS STYLED AS STARS, so the control works with JavaScript blocked and every star is
   keyboard-reachable. The input stays in the accessibility tree — it is moved off-screen, never
   display:none, which would take it out of the tab order entirely. */
.ce-rev-form-stars {
	border: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.ce-rev-form-stars legend {
	padding: 0 10px 0 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ce-rev-ink);
	float: left;
}

.ce-rev .ce-rev-star-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ce-rev .ce-rev-star-label {
	cursor: pointer;
	line-height: 0;
	/* A 44px tap target around a 32px star, per the mobile standing rule. */
	padding: 6px;
	border-radius: 8px;
}

.ce-rev .ce-rev-star-label svg {
	width: 32px;
	height: 32px;
	fill: var(--ce-rev-line);
	transition: fill .12s ease;
}

/* Fill this star and every star before it. The sibling combinator only reaches FORWARD, so the
   row is drawn right-to-left in the DOM order CSS can address: a checked input fills its own
   label, and hover fills the ones ahead of it. */
.ce-rev .ce-rev-star-input:checked ~ .ce-rev-star-label svg { fill: var(--ce-rev-line); }
.ce-rev .ce-rev-star-input:checked + .ce-rev-star-label svg { fill: var(--ce-rev-star); }
.ce-rev .ce-rev-star-input:checked + .ce-rev-star-label ~ .ce-rev-star-label svg { fill: var(--ce-rev-line); }
.ce-rev .ce-rev-form-stars:hover .ce-rev-star-label svg { fill: var(--ce-rev-star); }
.ce-rev .ce-rev-star-label:hover ~ .ce-rev-star-label svg { fill: var(--ce-rev-line); }

/* The focus ring must survive the off-screen input: without this a keyboard user sees nothing. */
.ce-rev .ce-rev-star-input:focus-visible + .ce-rev-star-label {
	outline: 2px solid var(--ce-rev-link);
	outline-offset: 2px;
}

.ce-rev-form-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--ce-rev-ink);
}

.ce-rev-form-text {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	color: var(--ce-rev-ink);
	background: #fff;
	border: 1px solid var(--ce-rev-line);
	border-radius: 10px;
	resize: vertical;
}

.ce-rev-form-text:focus {
	outline: 2px solid var(--ce-rev-link);
	outline-offset: 1px;
	border-color: var(--ce-rev-link);
}

.ce-rev-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.ce-rev .ce-rev-form-submit,
.ce-rev .ce-rev-form-skip {
	min-height: 44px;
	padding: 11px 22px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	border-radius: 999px;
	cursor: pointer;
}

.ce-rev .ce-rev-form-submit {
	background: var(--ce-rev-link);
	color: #fff;
	border: 1px solid var(--ce-rev-link);
}

.ce-rev .ce-rev-form-submit:hover { background: var(--ce-rev-deep); border-color: var(--ce-rev-deep); }

/* ⚠ AS PROMINENT AS SUBMIT. Skipping is a legitimate answer, and a greyed-out "no thanks" tells
   the student the form is not really optional whatever the words above it say. */
.ce-rev .ce-rev-form-skip {
	background: #fff;
	color: var(--ce-rev-deep);
	border: 1px solid #cdd9ea;
}

.ce-rev .ce-rev-form-skip:hover { background: #e7eef8; }

.ce-rev-form-fine {
	margin: 0;
	font-size: 13px;
	color: var(--ce-rev-muted);
}

@media (max-width: 420px) {
	.ce-rev-form { padding: 20px 16px; }
	.ce-rev-form-title { font-size: 18px; }
	.ce-rev .ce-rev-star-label svg { width: 28px; height: 28px; }
	.ce-rev .ce-rev-form-submit,
	.ce-rev .ce-rev-form-skip { flex: 1 1 auto; }
}

/* The second, quieter ask. Deliberately not a button: the course review above it is the active
   element, and two controls of equal weight at one moment usually get neither answered. */
.ce-rev-form-google {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--ce-rev-line);
	font-size: 14px;
}

.ce-rev-form-google a {
	color: var(--ce-rev-link);
	text-decoration: none;
	font-weight: 600;
}

.ce-rev-form-google a:hover { color: var(--ce-rev-deep); text-decoration: underline; }

/* The theme may not define this; the form relies on it for the star labels and the new-tab note. */
.ce-rev .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- the public reviews page */

/* ⚠ THE WHITE STRIP ABOVE THE HERO IS THE THEME'S PADDING, NOT A GAP IN OURS. The band bleeds
   horizontally with the 50vw trick, but the wrappers it sits inside — #content, the article —
   keep their own top padding, which shows as a hairline of page background between the site nav
   and the band. They are ANCESTORS of the shortcode's output, so only a body class can reach
   them, and only on a page that actually uses the shortcode. {@see Reviews\Page::body_class()} */
.ce-revpage-flush #content,
.ce-revpage-flush #content > .ast-container,
.ce-revpage-flush #primary,
.ce-revpage-flush .site-main,
.ce-revpage-flush .ast-article-single,
.ce-revpage-flush .ast-article-single > .entry-content {
	padding-top: 0;
	margin-top: 0;
}

/* The article's own border is the other thing that can draw a line there. */
.ce-revpage-flush .ast-article-single { border-top: 0; }


/* ⚠ THE HERO IS .ce-brand-hero FROM ce-brand.css, NOT A LOCAL BAND. The first version of this
   file re-implemented it and drifted at once: the white divider came out as whatever the theme
   padded above the block rather than the system's single 2.5px border, and the summary card was
   painted UNDER the band because only the band was positioned. Both are solved there, with the
   reasoning written down. The only thing left here is the dot inside the badge. */
.ce-revpage .ce-revpage-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	flex: 0 0 auto;
}

.ce-revpage-inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 16px 96px;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

/* ⚠ Half the band's bottom padding, so the card sits half in and half out. White rather than the
   pale blue it started as: a pale card on a blue band loses its edge, and the shadow is what
   sells the overlap. */
/* ⚠ LAYOUT ONLY. .ce-brand-shell supplies the background, radius, shadow, the negative top
   margin and — critically — the z-index that keeps it above the band's radial washes.
   ⚠ AND NEVER THE `margin` SHORTHAND HERE: this file loads after ce-brand.css, so `margin: 0 ...`
   would silently reset the shell's negative top margin and the overlap would just not happen.
   Name the side. */
.ce-revpage-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: stretch;
	padding: 32px;
}

.ce-revpage-score {
	flex: 0 0 auto;
	min-width: 210px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
}

/* The 15px is the optical fix: Playfair's figures sit high, so at line-height 1 the box clips
   under the baseline and the stars would otherwise crowd the number. */
.ce-revpage-score-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 15px; }
.ce-revpage-outof     { font-size: 15px; font-weight: 600; color: var(--ce-rev-muted); }
.ce-revpage-score .ce-rev-stars { font-size: 38px; }
.ce-revpage-count     { margin: 0; font-size: 15px; color: var(--ce-rev-muted); }
.ce-revpage-count strong { color: var(--ce-rev-ink); }

.ce-revpage-from { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 9px; font-size: 15px; color: var(--ce-rev-muted); }
/* The nudge is a percentage of the image's own height, so it survives any size change: an <img>
   baseline is its BOTTOM edge, which here is the bottom of the "g" descender. */
.ce-revpage-glogo { height: 21px; width: auto; display: block; transform: translateY(22.6%); }

.ce-revpage-rule { width: 1px; background: #cdd9ea; align-self: stretch; }

.ce-revpage-featured { flex: 1 1 320px; min-width: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.ce-revpage-quote-text {
	margin: 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 500;
	font-size: 21px;
	line-height: 1.45;
	color: var(--ce-rev-ink);
}
.ce-revpage-byline { font-size: 14px; color: var(--ce-rev-muted); }

/* ⚠ NO GOOGLE MARK IN THIS BLOCK. These are our own course reviews. */
.ce-revpage-courses {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 18px 22px;
	background: #e7eef8;
	border-radius: 14px;
}
.ce-revpage-courses .ce-rev-stars { font-size: 18px; }
.ce-revpage-courses-label { font-size: 15px; color: var(--ce-rev-muted); }
.ce-revpage-courses-label strong { color: var(--ce-rev-deep); }

.ce-revpage-showing { margin: 0 0 18px; font-size: 14px; color: var(--ce-rev-muted); }
.ce-revpage-showing a { margin-left: 6px; }

.ce-revpage-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}

.ce-revpage-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--ce-rev-line);
	border-radius: 16px;
	padding: 22px;
}
.ce-revpage-card .ce-rev-stars { font-size: 17px; align-self: flex-start; }

/* A rating with no words is deliberately a different, smaller shape — in a full card it reads as
   broken rather than brief. */
.ce-revpage-card--rating { padding: 16px 20px; gap: 10px; background: #f7f9fc; }

.ce-revpage-body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ce-rev-ink); }

.ce-revpage-reply {
	font-size: 14px;
	line-height: 1.55;
	color: var(--ce-rev-muted);
	padding: 10px 14px;
	background: #f7f9fc;
	border-left: 3px solid var(--ce-rev-line);
	border-radius: 0 8px 8px 0;
}

.ce-revpage-who { display: flex; align-items: center; gap: 10px; margin-top: auto; }

.ce-revpage-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	flex: 0 0 auto;
	object-fit: cover;
}
.ce-revpage-avatar--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ce-rev-deep);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.ce-revpage-name { display: block; font-size: 14px; font-weight: 700; color: var(--ce-rev-ink); }
.ce-revpage-date { display: block; font-size: 13px; color: var(--ce-rev-muted); }

@media (max-width: 760px) {
	.ce-revpage-rule { display: none; }
	.ce-revpage-score { min-width: 0; width: 100%; }
}

@media (max-width: 420px) {
	/* The hero sizes itself with clamp() in ce-brand.css; nothing to override here. */
	.ce-revpage-summary { padding: 22px 18px; }
	.ce-revpage-score .ce-rev-stars { font-size: 30px; }
	.ce-revpage-grid { grid-template-columns: 1fr; }
}