/*
 * petpartners/testimonials
 *
 * Redesigned 12/out/2026 from a client-supplied reference layout. Same rail
 * mechanism as product-showcase and brand-strip (overflow-x: auto track,
 * scroll-snap) plus dot pagination, which neither of those needs — a card
 * carousel reads its position from a row of dots the way a product or brand
 * rail never had to.
 *
 * Three literal values have no existing token to reuse: the card's
 * border-radius (24px — between `lg`, 16px, and `xl`, 32px, close to
 * neither), the card's warm-white background (`color-mix()` of the `white`
 * token and `#faf6f3` — the section background's OLD colour, before the
 * client's 13/out/2026 swap to `#fbf9f7`; kept at the old value on purpose,
 * not updated alongside it, so the card still reads as a visibly distinct
 * surface from the section band behind it rather than blending into it),
 * and the lavender tints
 * on the dots/avatar, each a `color-mix()` of the `purple` token rather than
 * a flat new hex, same technique about-intro.php's icon circles already
 * used. The quote marks started lavender too and were moved to the `gray-
 * light` token (client request, 13/out/2026) — a real token now, not a
 * fourth literal.
 *
 * FIVE CARDS, THREE PER VIEW, SAME ARROW AS brand-strip (13/out/2026)
 *
 * The rail used to size each card as a fraction of the track (1/2/3 per row
 * at three breakpoints) — with exactly three cards, that meant the row
 * never overflowed on desktop, so the arrows never had anything to do. The
 * client asked for five cards total with the same side-scroll `brand-strip`
 * already has — first tried as fixed-width cards (`brand-strip/style.css`'s
 * own `__cell` mechanism, `flex: 0 0 <width>`), which showed four-and-a-peek
 * per row; the client asked for three visible instead, so `__cell` went
 * back to a percentage `flex-basis`, now divided by three (desktop) rather
 * than assuming the card count divides the row evenly. Five cards into
 * three-per-row still overflows and still scrolls — the fix for "nothing to
 * scroll" was always the card *count* exceeding what one row shows, not the
 * sizing method. `.__track` also gained `padding-inline` here, so the first
 * and last card stop touching the section's own edge (client correction,
 * same request).
 *
 * The arrow button itself copied `brand-strip/style.css`'s `__arrow` rules
 * verbatim under this block's own class names (tap-target size, brown
 * resting colour, no shadow, edge position) in place of the 64px
 * always-purple, drop-shadowed circle this rail had — the one visual
 * difference the arrows kept is also the only one ADR-076 ever asked for:
 * real, focusable `<button>`s instead of the other rails' mouse-only
 * `aria-hidden` ones (render.php / view.js docblocks have the account, and
 * that part did not change here).
 */

.wp-block-petpartners-testimonials {
	display: block;
}

.wp-block-petpartners-testimonials__rail {
	position: relative;
}

.wp-block-petpartners-testimonials__track {
	display: flex;
	gap: var( --wp--preset--spacing--md );
	margin: 0;
	padding: 0 0 var( --wp--preset--spacing--xs );
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var( --wp--preset--spacing--xs );
	scrollbar-width: none;
	padding-inline: var( --wp--preset--spacing--xs );
}

.wp-block-petpartners-testimonials__track::-webkit-scrollbar {
	display: none;
}

/*
 * Three cards per view, not five — the fixed-width `flex: 0 0 320px` this
 * rule carried for about an hour (brand-strip/style.css's own `__cell`
 * mechanism, same file docblock) showed four-and-a-peek on a 1320px row,
 * which read as too many at once. Back to a percentage `flex-basis`, but
 * still smaller per card than the original three-card build: that version
 * had no gap reserved for a scroll gutter, this one subtracts
 * `padding-inline` (added to `.__track` above, so the first and last card
 * stop touching the section's own edge — "colados nas bordas," the
 * client's own words) from 100% before dividing by three. `max-inline-size:
 * 90vw` keeps a single mobile card from overflowing a narrow viewport.
 */
.wp-block-petpartners-testimonials__cell {
	margin: 0;
	flex: 0 0 100%;
	max-inline-size: 90vw;
	scroll-snap-align: start;
}

@media ( min-width: 600px ) {
	.wp-block-petpartners-testimonials__cell {
		flex-basis: calc( ( 100% - 2 * var( --wp--preset--spacing--xs ) - 1 * var( --wp--preset--spacing--md ) ) / 2 );
	}
}

/*
 * `max-inline-size` caps what the `calc()` above would otherwise hand each
 * card at this width (~420px on a 1320px row) — client correction,
 * 13/out/2026: three cards, narrower than an even three-way split. The row
 * does not fill edge-to-edge past three cards' worth of space; that is the
 * trade for not showing a peek of a fourth, which the client also asked
 * against in the same request.
 */
@media ( min-width: 900px ) {
	.wp-block-petpartners-testimonials__cell {
		flex-basis: calc( ( 100% - 2 * var( --wp--preset--spacing--xs ) - 2 * var( --wp--preset--spacing--md ) ) / 3 );
		max-inline-size: 300px;
	}
}

.wp-block-petpartners-testimonials__card {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--sm );
	block-size: 100%;
	padding: var( --wp--preset--spacing--md );
	box-sizing: border-box;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 24px;
	background-color: color-mix( in srgb, var( --wp--preset--color--white ) 70%, #faf6f3 30% );
	box-shadow: var( --wp--preset--shadow--sm );
}

.wp-block-petpartners-testimonials__header {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--sm );
}

/*
 * 100px, a real border and a lavender fill — up from the original 44px
 * plain-white circle (client revision, 12/10), back down from 140px as part
 * of the card shrink (13/out/2026, same request as the fixed-width `__cell`
 * above). No customer photo exists (render.php): the paw glyph sits centred
 * and large inside the circle instead of a face. The moment `avatar`
 * carries a real path, the `<img>` branch below takes over and covers the
 * same circle edge-to-edge.
 */
.wp-block-petpartners-testimonials__avatar {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	inline-size: 100px;
	block-size: 100px;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--preset--border-radius--pill );
	background-color: color-mix( in srgb, var( --wp--preset--color--purple ) 10%, var( --wp--preset--color--white ) );
	color: var( --wp--preset--color--purple );
}

/*
 * `object-position` biased left-and-up, not centred: every source photo in
 * `data/testimonials/` is a ~4:3 landscape with the person left-of-centre
 * and their face in the upper half (a pet fills the right side) — a
 * centred square crop would land on the gap between the two, not the face.
 * One shared value across all five rather than five tuned individually:
 * the compositions are close enough that it reads correctly on every one
 * (confirmed in the browser), and a shared rule is what the rest of this
 * theme's photo-cropping already prefers over a per-image guess (NO
 * ART-DIRECTED CROP, make-species-banners.sh's own docblock) wherever one
 * value works.
 */
.wp-block-petpartners-testimonials__avatar-image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 30% 20%;
}

.wp-block-petpartners-testimonials__identity {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/*
 * Bare <h3> — no class-level typography here on purpose. theme.json's own
 * per-level element style (`styles.elements.h3`: sans, 600, the `heading`
 * token, coloured by the global `elements.heading` purple) already gives
 * exactly "sans bold roxo ~22px" the brief asks for, and unlike an
 * `is-style-*` block-style variation (which needs real `<!-- wp:heading -->`
 * parsing to generate its CSS — about-intro.php's docblock has the full
 * story of that bug), a bare element selector like `h3 { ... }` applies to
 * any h3 on the page regardless of how it was rendered. Nothing to add here.
 */
.wp-block-petpartners-testimonials__name {
	margin: 0;
}

.wp-block-petpartners-testimonials__role {
	color: var( --wp--preset--color--text-muted );
	font-size: var( --wp--preset--font-size--sm );
	line-height: var( --wp--custom--typography--sm--line-height );
}

/*
 * Outline by default; filled gold only once a real rating exists
 * (render.php branches on `rating > 0`). `#F5B93A` is the client's own
 * value for the filled state — no existing token is this bright a gold
 * (`warning`, the palette's only amber-ish slot, is a muted brown-gold at
 * `#8A5A00`, picked for a different job: a legible warning label, not a
 * star rating). Outline stars keep using `warning` — unfilled, this is
 * still a placeholder, and the muted tone says so.
 */
.wp-block-petpartners-testimonials__rating {
	display: flex;
	gap: 2px;
	margin-block-start: 2px;
	color: var( --wp--preset--color--warning );
}

.wp-block-petpartners-testimonials__star.is-filled {
	color: #f5b93a;
}

.wp-block-petpartners-testimonials__quote {
	position: relative;
	flex: 1 1 auto;
	margin: 0;
	padding-inline: var( --wp--preset--spacing--md );
}

.wp-block-petpartners-testimonials__quote p {
	margin: 0;
}

/*
 * The pull-line and the rest of the quote are both [CLIENT INPUT]
 * (render.php) — the split is presentational only, not two different
 * claims. `highlight` reads as the sentence that made someone quote this
 * review; `body` is the explanation under it.
 */
.wp-block-petpartners-testimonials__highlight {
	display: block;
	margin-bottom: var( --wp--preset--spacing--xs );
	color: var( --wp--preset--color--brown );
	font-weight: 600;
}

.wp-block-petpartners-testimonials__body {
	display: block;
	color: var( --wp--preset--color--text-gray );
}

/*
 * `gray-light` — decorative only, per CLAUDE.md section 5.1's own carve-out
 * for that token (never text, never a functional icon). This glyph is
 * exactly that: `aria-hidden`, no accessible name, purely a typographic
 * flourish. Lavender (`color-mix()` of `purple`) was the original tone;
 * client asked for the palette's grey instead (13/out/2026).
 */
.wp-block-petpartners-testimonials__quote-mark {
	position: absolute;
	color: var( --wp--preset--color--gray-light );
	font-family: var( --wp--preset--font-family--serif-display );
	font-size: 2.5rem;
	line-height: 1;
}

.wp-block-petpartners-testimonials__quote-mark--open {
	inset-block-start: -0.5rem;
	inset-inline-start: 0;
}

.wp-block-petpartners-testimonials__quote-mark--close {
	inset-block-end: -1.5rem;
	inset-inline-end: 0;
}

.wp-block-petpartners-testimonials__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --wp--preset--spacing--xs );
	color: var( --wp--preset--color--purple );
}

.wp-block-petpartners-testimonials__divider-line {
	flex: 1 1 auto;
	max-inline-size: 4rem;
	block-size: 1px;
	background-color: var( --wp--preset--color--border );
}


/*
 * Same button as `brand-strip/style.css`'s own `__arrow` now — tap-target
 * size, thin border, no shadow, brown at rest and purple on hover (client
 * request, 13/out/2026, file docblock). Still a real, focusable `<button>`
 * though, not the mouse-only `aria-hidden` overlay the other rails use
 * (render.php / view.js docblocks — the one named exception ADR-076 asked
 * for, kept): `:focus-visible` below is brand-strip's arrow has no reason
 * to carry, since it is never reachable by Tab.
 */
.wp-block-petpartners-testimonials__arrow {
	position: absolute;
	inset-block-start: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var( --wp--custom--chrome--tap-target );
	block-size: var( --wp--custom--chrome--tap-target );
	padding: 0;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--preset--border-radius--pill );
	background-color: var( --wp--preset--color--white );
	color: var( --wp--preset--color--brown );
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY( -50% );
	transition:
		opacity var( --wp--custom--motion--duration--base ) var( --wp--custom--motion--easing--standard ),
		visibility var( --wp--custom--motion--duration--base ) var( --wp--custom--motion--easing--standard );
}

.wp-block-petpartners-testimonials__arrow svg {
	display: block;
	fill: currentColor;
}

.wp-block-petpartners-testimonials__arrow.is-previous {
	inset-inline-start: 0;
	transform: translate( -40%, -50% ) rotate( 180deg );
}

.wp-block-petpartners-testimonials__arrow.is-next {
	inset-inline-end: 0;
	transform: translate( 40%, -50% );
}

.wp-block-petpartners-testimonials__arrow:hover {
	border-color: var( --wp--preset--color--purple );
	color: var( --wp--preset--color--purple );
}

.wp-block-petpartners-testimonials__arrow:focus-visible {
	outline: 2px solid var( --wp--preset--color--purple );
	outline-offset: 2px;
}

.wp-block-petpartners-testimonials__rail.has-previous .wp-block-petpartners-testimonials__arrow.is-previous,
.wp-block-petpartners-testimonials__rail.has-next .wp-block-petpartners-testimonials__arrow.is-next {
	opacity: 1;
	visibility: visible;
}

.wp-block-petpartners-testimonials__rail.has-next .wp-block-petpartners-testimonials__track {
	mask-image: linear-gradient( to right, #000 85%, transparent 100% );
}

.wp-block-petpartners-testimonials__rail.has-previous.has-next .wp-block-petpartners-testimonials__track {
	mask-image: linear-gradient( to right, transparent 0, #000 6%, #000 85%, transparent 100% );
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-petpartners-testimonials__arrow {
		transition: none;
	}
}