/**
 * Oyolloo Elements — reviews.
 *
 * Figma: node 471:1283 — 1920x756.
 *   head   H2 left, trust pill right, 60px above the deck
 *   deck   4 cards of 386 with 32px gaps
 *   card   386x403 - #f3f3f3 on a #e0e0e0 hairline, radius 16, padding 32
 *   inner  stars and quote share a 15px rhythm; 32px to the author row
 *   quote  20/600 at 30px leading, ink-strong (not the muted body grey)
 *   author name 24/600 over a 16px date, both pure black, 32px provider mark
 *
 * @package Oyolloo\Elements
 * @since   1.0.0
 */

.oe-reviews__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oe-space-md);
	flex-wrap: wrap;
}

.oe-reviews__head h2 {
	margin: 0;
}

.oe-reviews__slider {
	margin-block-start: var(--oe-space-3xl);
}

.oe-reviews__track {
	--oe-per-view: 4;
	--oe-gap: var(--oe-space-lg);
	/* The quote is set for the design's 386 column. Under about 320 it breaks
	   to three words a line and the card stops reading as a quote, so the deck
	   scrolls from there rather than fitting four in at any cost. */
	--oe-slide-min: 320px;
}

/* Mobile (Figma 471:4126): one 330-wide card with the next peeking in. */
@media (max-width: 767px) {
	.oe-reviews__track {
		--oe-per-view: 1;
		--oe-gap: var(--oe-space-md);
		/* Same as the blog deck: end at the screen edge, not at the gutter. */
		width: calc(100% + var(--oe-gutter-inline, 15px));
		--oe-peek: max(0px, calc(100% - 330px));
		/* One-up already fills the track; a floor here would only eat the peek
		   and push the card past the screen on a 320 phone. */
		--oe-slide-min: 0px;
	}
}

/*
 * Arrows sit on the vertical middle of the deck, pulled out by the container's
 * own gutter so they land on the edge of the screen rather than on the first
 * card's text. The gutter is the most they can move without adding a
 * horizontal scrollbar - it is exactly the room the container has.
 */
.oe-reviews__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
}

.oe-reviews__nav--prev {
	inset-inline-start: calc(-1 * var(--oe-gutter-inline, 15px));
}

.oe-reviews__nav--next {
	inset-inline-end: calc(-1 * var(--oe-gutter-inline, 15px));
}

/* The chevron is drawn pointing left; the other side reuses it flipped. */
.oe-reviews__nav--next svg {
	transform: scaleX(-1);
}

.oe-reviews__card {
	--oe-card-bg: var(--oe-color-tile);
	--oe-card-border: var(--oe-color-tile-border);
	--oe-card-pad: var(--oe-space-lg);

	gap: var(--oe-space-lg);
	/* Keeps every card the height of the tallest in view. */
	align-self: stretch;
}

/* Stars and quote are one block in the design, set 15px apart; the 32px card
   gap applies between that block and the author row. */
.oe-reviews__top {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.oe-reviews__quote {
	color: var(--oe-color-ink-strong);
	font-size: 20px;
	font-weight: 500;
	line-height: 30px;
	/* Real Google reviews run from one line to fifteen, and the deck stretches
	   every card to the tallest in view - one long review doubled the height of
	   the whole row. Six lines holds the design's 403 card. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	overflow: hidden;
}

.oe-reviews__author {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--oe-space-md);
	margin-block-start: auto;
}

.oe-reviews__who {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.oe-reviews__name {
	color: var(--oe-color-black);
	line-height: 26px;
}

.oe-reviews__meta {
	color: var(--oe-color-black);
	font-size: var(--oe-body-size);
	line-height: 26px;
}

.oe-reviews__mark {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	object-fit: contain;
}

@media (max-width: 1024px) {
	.oe-reviews__slider {
		margin-block-start: var(--oe-space-xl);
	}
}

/* Mobile (Figma 471:4126): the head centres and the card tightens to a 16px
   pad with a 16/24 quote. */
@media (max-width: 767px) {
	.oe-reviews__head {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.oe-reviews__slider {
		margin-block-start: var(--oe-space-md);
	}

	.oe-reviews__card {
		--oe-card-pad: var(--oe-space-sm);

		gap: var(--oe-space-lg);
	}

	.oe-reviews__top {
		gap: var(--oe-space-md);
	}

	.oe-reviews__quote {
		font-size: var(--oe-body-size);
		line-height: 24px;
	}

	.oe-reviews__name {
		font-size: var(--oe-h6-size);
		line-height: 22px;
	}

	.oe-reviews__meta {
		font-size: var(--oe-body-sm-size);
		line-height: 26px;
	}

	/*
	 * The pill's own mobile sizing lives with the component in rating.css: it
	 * already sets 18px stars and the small caption here, and its 12/24 padding
	 * puts the pill at the 41.8px Figma 471:4130 draws — the 11/22 that used to
	 * be repeated here made it 40 and, being unscoped in a file that loads after
	 * the component, pinned the hero's pill too and stopped it shrinking on a
	 * narrow phone.
	 */
}

/*
 * -----------------------------------------------------------------------------
 * [oy-google-reviews] grid.
 *
 * The shortcode reuses the card but not the slider: it can be dropped into a
 * sidebar or a narrow column where the arrows would have no edge to sit
 * against, so the cards wrap instead of scrolling. `auto-fit` with a floor
 * means the column count asked for is a ceiling, never a squeeze — the same
 * 320 the deck treats as the narrowest a quote still reads at.
 * -----------------------------------------------------------------------------
 */
.oe-reviews__grid {
	--oe-cols: 3;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: var(--oe-space-lg);
	max-width: calc(var(--oe-cols) * 386px + (var(--oe-cols) - 1) * var(--oe-space-lg));
}

/* Stretch to the tallest card in the row so the author block still lands on a
   common baseline the way it does inside the deck. */
.oe-reviews__grid .oe-reviews__card {
	height: 100%;
}