/* Structural styles only. Visual styling comes from Gutenberg block supports. */

/* Stars inherit currentColor so Gutenberg text-color controls recolor them.
   A zero-specificity default keeps them gold until a color is chosen. */
:where( .agr-rating ),
:where( .agr-summary-rating ) {
	color: #f5a623;
}

.agr-stars {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	line-height: 1;
	font-size: 1em;
	color: inherit;
}

.agr-stars__bg {
	color: currentColor;
	opacity: 0.25;
}

.agr-stars__fg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	width: var( --agr-star-fill, 0% );
	color: currentColor;
}

/* The block is its own query container so the cards/carousel collapse on the
   block's width — correct even inside a narrow column or sidebar. The matching
   @container rules (with filterable breakpoint widths) are injected as an inline
   style; see Helpers::responsive_css(). */
.agr-reviews {
	container: agr-reviews / inline-size;
}

/* Reviews loop: cards grid. */
.agr-reviews__list {
	display: grid;
	gap: var( --agr-card-gap, 1rem );
}

.agr-reviews[data-layout="cards"] .agr-reviews__list {
	grid-template-columns: repeat( var( --agr-columns, 1 ), minmax( 0, 1fr ) );
}

/* Load More (cards layout): view.js reveals cards a batch at a time by toggling
   is-hidden on the individual .agr-review grid items. The button itself is the
   Load More block (styles in its own stylesheet). */
.agr-review.is-hidden {
	display: none;
}

/* Reviews loop: carousel (Embla). */
.agr-reviews[data-layout="carousel"] .agr-embla {
	overflow: hidden;
}

.agr-reviews[data-layout="carousel"] .agr-reviews__list {
	display: flex;
	gap: var( --agr-card-gap, 1rem );
}

.agr-reviews[data-layout="carousel"] .agr-review {
	flex: 0 0 calc( ( 100% - ( var( --agr-per-view, 1 ) - 1 ) * var( --agr-card-gap, 1rem ) ) / var( --agr-per-view, 1 ) );
	min-width: 0;
}

/* A single review: inner elements stack with a configurable gap. The gap is
   driven by the Review Template block's Block spacing (blockGap) control via
   --agr-review-gap, falling back to the theme's block gap when unset. */
.agr-review {
	display: flex;
	flex-direction: column;
	gap: var( --agr-review-gap, var( --wp--style--block-gap, 0.5rem ) );
}

/* Spacing between the inner elements is owned by the gap above, not margins. */
.agr-review > * {
	margin: 0;
}

.agr-review__images {
	display: flex;
	flex-wrap: wrap;
	gap: var( --agr-img-gap, 0.5rem );
}

/* All photos share one height; width follows each image's natural ratio. When
   --agr-img-aspect is set (optional), every photo is forced to that aspect and
   --agr-img-fit (object-fit) decides how it fills the box — mirroring the core
   Image block's Aspect ratio + Scale controls. The aspect-ratio var is unset by
   default, so the declaration resolves to `auto` (no forced ratio). */
.agr-review__images img {
	height: var( --agr-img-height, 72px );
	width: auto;
	max-width: 100%;
	aspect-ratio: var( --agr-img-aspect );
	object-fit: var( --agr-img-fit, cover );
}

/* Reviewer avatar: the image is sized and shaped directly from --agr-thumb-size
   (inherited from the wrapper) so it never stretches to the card width. The
   wrapper element itself needs no styling. The radius is zero-specificity so a
   theme or override can still change it. */
.agr-reviewer__thumb img,
.agr-reviewer__thumb-placeholder {
	width: var( --agr-thumb-size, 48px );
	height: var( --agr-thumb-size, 48px );
	max-width: none;
	object-fit: cover;
}

:where( .agr-reviewer__thumb img, .agr-reviewer__thumb-placeholder ) {
	border-radius: 50%;
}

.agr-reviewer__thumb-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.08 );
	font-size: calc( var( --agr-thumb-size, 48px ) / 2.4 );
	line-height: 1;
}

/* Summary header. */
.agr-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* Let a direct-child Group span the full width so its own alignment /
   justification controls can position its content. */
.agr-summary > .wp-block-group {
	flex-basis: 100%;
}

/* Default to the theme's block spacing. Wrapped in :where() (zero specificity)
   so a per-block Block spacing (blockGap) value — applied by core's layout
   support as a single-class .wp-container-* rule — always overrides it. */
:where( .agr-summary ) {
	gap: var( --wp--style--block-gap, 0.5rem );
}

/* Review text + its "Read more" link. The block's color/typography/spacing
   supports land on .agr-snippet; the inner <p> keeps the text semantics. */
.agr-snippet__text {
	margin: 0;
}

/* "Read more" links out to the review on Google (a plain <a> on the front end,
   an inert <span> preview in the editor). */
.agr-snippet__more {
	display: inline-block;
	text-decoration: underline;
	cursor: pointer;
}

/* Review date. Block-level so spacing controls behave like the other leaves. */
.agr-date {
	display: block;
}

.agr-empty-notice {
	padding: 1rem;
	border: 1px dashed currentColor;
	opacity: 0.7;
}