/*
 * Google reviews — the block's styles.
 *
 * ⛔ NO COLOUR VALUE IS WRITTEN HERE. Every colour is a theme.json preset or derived from
 * currentColor with color-mix(), so the block takes on whichever site it is installed in —
 * which is the whole point of a plugin that ships unchanged to every build. A hex here would
 * be a hardcoded value in shared code, and it would look wrong on the first site that has its
 * own palette.
 *
 * Specificity stays at one class, spacing comes from the block's own supports rather than
 * baked-in margins, and the grid collapses on a phone whatever the column setting says.
 */

.ajr-reviews {
	--ajr-reviews-columns: 3;
	--ajr-reviews-gap: var( --wp--style--block-gap, 1.5rem );
	/* The star colour: the theme's own accent if it has one, otherwise the text colour. */
	--ajr-reviews-star: var( --wp--preset--color--accent, currentColor );
	--ajr-reviews-rule: color-mix( in srgb, currentColor 15%, transparent );
	--ajr-reviews-quiet: color-mix( in srgb, currentColor 70%, transparent );
}

.ajr-reviews__summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-block-end: var( --ajr-reviews-gap );
}

.ajr-reviews__score {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1;
}

.ajr-reviews__count {
	color: var( --ajr-reviews-quiet );
}

.ajr-reviews__list {
	display: grid;
	gap: var( --ajr-reviews-gap );
	/*
	 * ⛔ auto-fit with a REAL floor, and no media query. Read this before changing it.
	 *
	 * The column setting means "up to this many", and the cards reflow at whatever width
	 * their CONTAINER is — so the block behaves the same in a sidebar as in a full-width
	 * band, which a viewport media query cannot do.
	 *
	 * max(), not min(), around the share. The track floor is the LARGER of a readable
	 * minimum and the share one column would get: in a wide container the share wins and you
	 * get exactly the requested columns; in a narrow one the readable minimum wins and the
	 * cards wrap to fewer columns instead of being crushed.
	 *
	 * Both wrong versions of this line shipped and were caught by MEASURING, not by looking:
	 * a `@media (min-width: 48em)` override forced the column count on any wide viewport,
	 * squeezing three cards into a 320px sidebar; replacing it with a purely proportional
	 * floor did the same thing for a different reason — a 384px container still produced
	 * three 112px columns, because a proportion always fits.
	 *
	 * The outer min(100%, …) stops a container narrower than the floor from overflowing.
	 */
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			min(
				100%,
				max(
					var( --ajr-reviews-min, 16rem ),
					calc( ( 100% - ( var( --ajr-reviews-columns ) - 1 ) * var( --ajr-reviews-gap ) ) / var( --ajr-reviews-columns ) )
				)
			),
			1fr
		)
	);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * border-box is stated, not inherited. The card is `height: 100%` of its grid row PLUS its
 * padding and border under content-box, so on a theme without a global border-box reset every
 * card ran 2 x padding + 2px past its row and the "Read all reviews" link sat on top of it
 * (OCB rehearsal, 2026-09-29). Shared code cannot assume the theme set the reset.
 */
.ajr-reviews__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	height: 100%;
	padding: var( --ajr-reviews-gap );
	border: 1px solid var( --ajr-reviews-rule );
	border-radius: var( --wp--custom--border-radius, 0.5rem );
}

/* Stars: one mask-drawn shape, coloured by a token — never an image file, never a PNG. */
.ajr-reviews__star {
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
	background-color: var( --ajr-reviews-rule );
	-webkit-mask-image: var( --ajr-reviews-star-shape );
	mask-image: var( --ajr-reviews-star-shape );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.ajr-reviews__star.is-filled {
	background-color: var( --ajr-reviews-star );
}

.ajr-reviews__stars {
	--ajr-reviews-star-shape: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E" );
	display: inline-flex;
	gap: 0.1em;
	line-height: 1;
}

.ajr-reviews__text {
	margin: 0;
	padding: 0;
	border: 0;
	flex-grow: 1;
}

.ajr-reviews__text p {
	margin: 0;
}

.ajr-reviews__meta {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.875em;
}

/* Initials, drawn here rather than an author photo fetched from Google on every page view. */
.ajr-reviews__avatar {
	display: grid;
	place-items: center;
	inline-size: 2.25em;
	block-size: 2.25em;
	border-radius: 50%;
	background-color: color-mix( in srgb, currentColor 10%, transparent );
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ajr-reviews__author {
	font-weight: 600;
}

.ajr-reviews__when {
	color: var( --ajr-reviews-quiet );
}

.ajr-reviews__link {
	margin-block-start: var( --ajr-reviews-gap );
}

/* Editor-only rules live in editor.css — a selector that can never match on the front end
   has no business in the stylesheet every visitor downloads. */

/*
 * 0.31.1: the cards are filled in the visitor's browser from Google (view.js); nothing is kept on the
 * server. Until then the placeholder cards hold the height (no layout shift). Google's attribution
 * rules: the author's avatar, name and profile link, a link to each review on Google Maps, and the
 * "Google Maps" text in its required style, inside the band.
 */
.ajr-reviews__item.is-placeholder .ajr-reviews__card {
	min-block-size: 16rem;
}

.ajr-reviews__item.is-placeholder .ajr-reviews__card > * {
	visibility: hidden;
}

.ajr-reviews[data-key] .ajr-reviews__fallback {
	display: none;
}

.ajr-reviews.is-failed .ajr-reviews__fallback {
	display: block;
}

.ajr-reviews.is-failed .ajr-reviews__summary,
.ajr-reviews.is-failed .ajr-reviews__list,
.ajr-reviews.is-failed .ajr-reviews__attr {
	display: none;
}

.ajr-reviews__avatar img {
	inline-size: 100%;
	block-size: 100%;
	border-radius: 50%;
}

.ajr-reviews__gmaps {
	font-family: Roboto, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: normal;
	white-space: nowrap;
	color: #5e5e5e;
}

.ajr-reviews__summary.is-placeholder {
	visibility: hidden;
}

/* 0.31.1: a fixed number of lines per review (the full text is one click away on Google Maps), so
   a filled card is exactly as high as its placeholder. */
.ajr-reviews.is-ready .ajr-reviews__text p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}

/* Every card in a block filled in the browser is at least as high as a filled card with six lines
   (308px with its link, measured 2026-10-14), placeholder or not: nothing moves when the reviews arrive. */
.ajr-reviews[data-key] .ajr-reviews__card {
	min-block-size: 19.25rem;
}

/* 0.31.2: the card footer for reviews filled from Google. A 30px photo beside the name (Google's
   minimum attribution), the date, and a map pin at the bottom-right linking to the review on Google
   Maps. Wraps cleanly on a phone. */
.ajr-reviews[data-key] .ajr-reviews__meta {
	flex-wrap: wrap;
	gap: 0.25em 0.5em;
	margin-block-start: auto;
}

.ajr-reviews[data-key] .ajr-reviews__avatar {
	inline-size: 30px;
	block-size: 30px;
	flex: none;
	overflow: hidden;
}

.ajr-reviews[data-key] .ajr-reviews__author {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

/* 0.31.3: the link to the review on Google Maps is a text link under the review (Andrew's option C). */
.ajr-reviews__source {
	align-self: flex-start;
	color: inherit;
	font-size: var(--wp--preset--font-size--small, 0.85em); /* 0.31.5: a step below the review text (Andrew). */
	font-weight: 600;
	text-decoration: none;
}

.ajr-reviews__source:hover,
.ajr-reviews__source:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* "Most relevant reviews, powered by Google Maps": one small muted line, right-aligned (option 2). */
.ajr-reviews__attr {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.25em 0.5em;
	font-size: 0.8em;
	color: var( --ajr-reviews-quiet );
}

/* The attribution line: centred, small and muted, with Google's official Google Maps logo (unmodified,
   16px tall, Google's minimum; 10px clear space beside it) on the same line as the ordering note. */
.ajr-reviews__attr {
	justify-content: center;
}

.ajr-reviews__logo {
	display: inline-block;
	block-size: 16px;
	inline-size: auto;
	margin: 0 0 0 0.125rem;
	vertical-align: middle;
}