/**
 * Google Reviews (V4 / Atomic) widget styles.
 *
 * Kept in a plain stylesheet (not atomic base styles) so the editor shows no
 * default values on the widget. Colours read the site's context tokens
 * (--text-color, --card-surface, --brand, --on-brand, --brand-hover, --brand-text,
 * --tertiary,
 * --muted-text; older sites still expose --accent / --on-accent / --color-star
 * and every chain falls back to them) so the widget re-skins inside invert
 * sections; every token has a fallback. Per-site hooks, set on the widget or
 * on a class applied to it:
 *   --scw-gr-star            star colour (default --tertiary)
 *   --scw-gr-gap             card grid gap (default --spacing-column)
 *   --scw-gr-card-bg         card fill (default --card-surface)
 *   --scw-gr-button-bg / --scw-gr-button-color   write-a-review button
 * The template sets --scw-gr-fill (a percentage) on each stars element and
 * data-scw-gr-columns on the card list.
 */

.scw-gr {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-m, 1rem);
	color: var(--text-color, currentcolor);
	width: 100%;
}

/* Summary row */
.scw-gr__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-s, 0.3rem) var(--spacing-m, 1rem);
}

.scw-gr__rating {
	font-weight: 600;
	font-size: 1.25em;
	line-height: 1;
}

.scw-gr__count,
.scw-gr__date {
	color: var(--muted-text, var(--color-neutral-500, color-mix(in srgb, currentcolor 65%, transparent)));
}

/* Stars: a muted row of five, with a filled copy clipped to the rating. */
.scw-gr__stars {
	position: relative;
	display: inline-flex;
	line-height: 1;
	color: var(--scw-gr-star, var(--tertiary, var(--color-tertiary-500, var(--color-star, #e7a90c))));
}

.scw-gr__stars-empty,
.scw-gr__stars-fill {
	display: inline-flex;
	gap: 0.1em;
}

.scw-gr__stars-empty {
	color: color-mix(in srgb, currentcolor 22%, transparent);
}

.scw-gr__stars-fill {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--scw-gr-fill, 0%)) 0 0);
}

.scw-gr__stars svg {
	display: block;
	width: 1.125em;
	height: 1.125em;
	fill: currentcolor;
}

/* Cards */
.scw-gr__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--scw-gr-cols, 3), minmax(0, 1fr));
	gap: var(--scw-gr-gap, var(--spacing-column, 2rem));
}

.scw-gr__list[data-scw-gr-columns="1"] { --scw-gr-cols: 1; }
.scw-gr__list[data-scw-gr-columns="2"] { --scw-gr-cols: 2; }
.scw-gr__list[data-scw-gr-columns="3"] { --scw-gr-cols: 3; }
.scw-gr__list[data-scw-gr-columns="4"] { --scw-gr-cols: 4; }

/* Mirrors the site's `card` class token for token. */
.scw-gr__card {
	box-sizing: border-box;
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s, 0.3rem);
	padding: var(--spacing-m, 1rem);
	border-width: var(--border-s, 1px);
	border-style: solid;
	border-color: var(--surface-edge, var(--color-surface-edge, transparent));
	border-radius: var(--radius-m, 10px);
	background-color: color-mix(in srgb, var(--scw-gr-card-bg, var(--card-surface, var(--color-neutral-50, var(--color-primary-light-1, #f7f7f7)))) var(--surface-alpha, 100%), transparent);
	background-image: var(--surface-highlight, none);
	backdrop-filter: var(--surface-backdrop, none);
	box-shadow: var(--box-shadow-h, 0) var(--box-shadow-v-light, 2px) var(--box-shadow-b-light, 6px) var(--box-shadow-s, 0) var(--color-box-shadow-light, rgba(0, 0, 0, 0.15));
	overflow: hidden;
}

.scw-gr__head {
	display: flex;
	align-items: center;
	gap: var(--spacing-s, 0.3rem) var(--spacing-m, 1rem);
}

.scw-gr__avatar {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.scw-gr__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.scw-gr__author {
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.scw-gr__author:hover,
a.scw-gr__author:focus-visible {
	text-decoration: underline;
}

.scw-gr__date {
	font-size: 0.875em;
}

.scw-gr__text {
	margin: 0;
	overflow-wrap: anywhere;
}

/* Links carry e-paragraph-link-base + e-default-a, so the site's paragraph link styling applies.
   (0,2,1) beats that base style's white-space reset, which loads after this file. */
.scw-gr a.scw-gr__more {
	white-space: nowrap;
}

/* Actions row */
.scw-gr__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-m, 1rem);
}

/* Write-a-review button: mirrors the site's `button` Default Style. */
.scw-gr__button {
	display: inline-block;
	font-family: var(--body, inherit);
	font-size: var(--body-default, 1rem);
	line-height: var(--body-line-height, 1.6);
	font-weight: 500;
	padding: var(--button-input-padding-vertical, 0.7em) var(--button-input-padding-horizontal, 1.3em);
	border-width: var(--border-m, 1.5px);
	border-style: solid;
	border-radius: var(--radius-m, 10px);
	color: var(--scw-gr-button-color, var(--on-brand, var(--on-accent, var(--color-neutral-50, var(--color-primary-light-1, #ffffff)))));
	background-color: var(--scw-gr-button-bg, var(--brand, var(--accent, var(--color-brand-500, var(--color-primary-brand-1, #333333)))));
	border-color: var(--scw-gr-button-bg, var(--brand, var(--accent, var(--color-brand-500, var(--color-primary-brand-1, #333333)))));
	box-shadow: var(--box-shadow-h, 0) var(--box-shadow-v-light, 2px) var(--box-shadow-b-light, 6px) var(--box-shadow-s, 0) var(--color-box-shadow-light, rgba(0, 0, 0, 0.15));
	text-decoration: none;
	transition-property: background-color, border-color, color, box-shadow, transform;
	transition-duration: var(--transitions, 150ms);
}

.scw-gr__button:hover,
.scw-gr__button:focus-visible {
	color: var(--scw-gr-button-color, var(--on-brand, var(--on-accent, var(--color-neutral-50, var(--color-primary-light-1, #ffffff)))));
	background-color: var(--brand-hover, var(--color-brand-700, color-mix(in srgb, var(--scw-gr-button-bg, var(--accent, var(--color-primary-brand-1, #333333))), var(--color-black, #000000) var(--color-mix-hover-shift, 15%))));
	border-color: var(--brand-hover, var(--color-brand-700, color-mix(in srgb, var(--scw-gr-button-bg, var(--accent, var(--color-primary-brand-1, #333333))), var(--color-black, #000000) var(--color-mix-hover-shift, 15%))));
	transform: translateY(var(--lift, -2px));
	box-shadow: var(--box-shadow-h, 0) var(--box-shadow-v-dark, 14px) var(--box-shadow-b-dark, 40px) var(--box-shadow-s, 0) var(--color-box-shadow-dark, rgba(0, 0, 0, 0.22));
}

/* Attribution */
.scw-gr__attribution {
	display: flex;
	align-items: center;
	gap: 0.8em;
	font-family: var(--eyebrows, inherit);
	font-size: 0.75em;
	letter-spacing: 0.05em;
	color: var(--muted-text, var(--color-neutral-500, color-mix(in srgb, currentcolor 70%, transparent)));
}

/* Source on one line, ordering/filter notice on the next, set tight. */
.scw-gr__attribution-text {
	line-height: 1.3;
}

.scw-gr__attribution-text > span {
	display: block;
}

.scw-gr__google {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

/* Editor-only notices (pending / no key / error). */
.scw-gr__notice {
	margin: 0;
	font-style: italic;
	color: var(--muted-text, var(--color-neutral-500, color-mix(in srgb, currentcolor 65%, transparent)));
}

/* Column collapse by widget width, matching the site's grid classes
   (3-4 columns become 2 at tablet widths, everything becomes 1 on phones). */
@container (max-width: 48rem) {
	.scw-gr__list[data-scw-gr-columns="3"],
	.scw-gr__list[data-scw-gr-columns="4"] {
		--scw-gr-cols: 2;
	}
}

@container (max-width: 30rem) {
	.scw-gr__list[data-scw-gr-columns] {
		--scw-gr-cols: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scw-gr__button {
		transition: none;
	}

	.scw-gr__button:hover,
	.scw-gr__button:focus-visible {
		transform: none;
	}
}