/**
 * Captivation Reviews — frontend.css
 *
 * Values in `var(--ca-reviews-*)` are written by the plugin as an inline
 * :root block (see CA_Reviews_Helpers::build_dynamic_css). This file holds
 * only the structural rules and sensible fallbacks.
 */

/* =========================================================================
   Wrapper + Grid
   ========================================================================= */

.ca-reviews-wrap {
	width: 100%;
	max-width: var(--ca-reviews-grid-max-width, none);
	margin-left: auto;
	margin-right: auto;
}

.ca-reviews-wrap.ca-reviews-grid--align-center { text-align: center; }
.ca-reviews-wrap.ca-reviews-grid--align-right  { text-align: right; }

.ca-reviews-grid {
	display: grid;
	gap: var(--ca-reviews-grid-gap, 40px);
	grid-template-columns: repeat(var(--ca-reviews-grid-cols-d, 3), minmax(0, 1fr));
}

/* Responsive column counts are emitted inline by the plugin at the
   configured breakpoints (see CA_Reviews_Helpers::build_dynamic_css). */

/* =========================================================================
   Card
   ========================================================================= */

.ca-reviews-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	overflow: hidden;
	z-index: 1;

	background-color: var(--ca-reviews-card-bg, #f5f5f5);
	border: var(--ca-reviews-card-border-width, 0) solid var(--ca-reviews-card-border-color, #e5e5e5);
	border-radius: var(--ca-reviews-card-border-radius, 20px);
	padding: var(--ca-reviews-card-padding, 40px);
	box-shadow: var(--ca-reviews-card-shadow, none);
	text-align: var(--ca-reviews-card-text-align, left);
}

/* =========================================================================
   Card media (image/video)
   Shown at the top of the card when the shortcode's type="video" resolves
   to a video. The reviewer photo still appears in the footer. type="image"
   (default) renders no media block here, so existing layouts are unchanged.
   ========================================================================= */

.ca-reviews-card__media {
	position: relative;
	z-index: 2;
	width: 100%;
	margin: 0;
}

.ca-reviews-video {
	position: relative;
	width: 100%;
	aspect-ratio: var(--ca-reviews-card-video-ratio, 16 / 9);
	border-radius: var(--ca-reviews-card-media-radius, 12px);
	overflow: hidden;
	background: #000;
}

.ca-reviews-video iframe,
.ca-reviews-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: cover;
}

/* =========================================================================
   Logo (per-review brand mark at top of card)

   Renders only when a review has `review_logo` set. Sits above the quote
   mark + quote body. Size + alignment + bottom spacing are all driven by
   CSS variables emitted by build_dynamic_css() so the Layout tab controls
   take effect without a hard reload.
   ========================================================================= */

.ca-reviews-card__logo {
	position: relative;
	z-index: 2;
	text-align: var( --ca-reviews-logo-align, left );
	margin: 0 0 var( --ca-reviews-logo-margin-bottom, 16px );
}

/* Bg + padding sit on the inline-block image so the plate hugs the logo
   instead of stretching to the full card width. The wrapper above still
   handles alignment (text-align) + bottom spacing. */
.ca-reviews-card__logo-img {
	display: inline-block;
	max-width: var( --ca-reviews-logo-max-width, 120px );
	width: auto;
	height: auto;
	vertical-align: middle;
	background: var( --ca-reviews-logo-bg, transparent );
	padding: var( --ca-reviews-logo-padding, 0 );
	box-sizing: border-box;
}

/* =========================================================================
   Read-more truncation (opt-in via shortcode `truncate="true"`)

   Structure emitted by CA_Reviews_Shortcode::render_quote_html():
     <div class="ca-reviews-card__quote-wrap" data-cr-truncate
          style="--ca-reviews-quote-lines: 4;">
       <div class="ca-reviews-card__quote is-clamped">…</div>
       <button class="ca-reviews-card__more">Read more</button>
     </div>

   The wrap's inline `--ca-reviews-quote-lines` overrides the global default
   per instance. The button is auto-hidden by frontend.js when the actual
   content already fits in the clamp (so short reviews don't get a dead
   “Read more” that expands nothing).

   `.ca-reviews-card__quote` here is the DEFAULT quote class; the same rules
   also apply to featured-layout quote classes because render_quote_html()
   passes the class name through unchanged.
   ========================================================================= */

.ca-reviews-card__quote-wrap {
	position: relative;
}

.ca-reviews-card__quote.is-clamped,
.ca-rl-featured__spotlight-quote.is-clamped,
.ca-rl-featured__card-quote.is-clamped {
	display: -webkit-box;
	-webkit-line-clamp: var( --ca-reviews-quote-lines, 4 );
	        line-clamp: var( --ca-reviews-quote-lines, 4 );
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Quote HTML is often wrapped in a <p> by the_content filter. -webkit-line-clamp
   counts VISIBLE TEXT LINES within a -webkit-box, but block children (like <p>)
   can be treated as a single “line” each in some engines — which breaks the
   count. Force direct paragraph descendants to render inline so the clamp
   counts wrapped text lines instead. Margins are zeroed so consecutive
   paragraphs still visually flow inside the clamp. */
.ca-reviews-card__quote.is-clamped > p,
.ca-rl-featured__spotlight-quote.is-clamped > p,
.ca-rl-featured__card-quote.is-clamped > p {
	display: inline;
	margin: 0;
}

.ca-reviews-card__quote-wrap.is-expanded .ca-reviews-card__quote.is-clamped,
.ca-reviews-card__quote-wrap.is-expanded .ca-rl-featured__spotlight-quote.is-clamped,
.ca-reviews-card__quote-wrap.is-expanded .ca-rl-featured__card-quote.is-clamped {
	display: block;
	-webkit-line-clamp: unset;
	        line-clamp: unset;
	overflow: visible;
}

/* Clamped state: the browser's -webkit-line-clamp ellipsis ("caring…") is
   the ONLY visible ellipsis. Hide our button so we don't double up. The
   whole wrapper is clickable via cursor:pointer + the JS click handler —
   users click anywhere in the clamped area (including on the auto
   ellipsis) to expand. */
.ca-reviews-card__quote-wrap:not(.is-expanded) .ca-reviews-card__quote.is-clamped,
.ca-reviews-card__quote-wrap:not(.is-expanded) .ca-rl-featured__spotlight-quote.is-clamped,
.ca-reviews-card__quote-wrap:not(.is-expanded) .ca-rl-featured__card-quote.is-clamped {
	cursor: pointer;
}

.ca-reviews-card__more {
	display: none;
	border: 0;
	background: transparent;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

/* Expanded state: the clamp is gone — show the toggle on its own line below
   the now-full-length quote so it's obvious how to collapse again. */
.ca-reviews-card__quote-wrap.is-expanded .ca-reviews-card__more {
	display: inline-block;
	margin-top: 8px;
	padding: 0;
	font-size: var( --ca-reviews-more-size, 16px );
	color: var( --ca-reviews-more-color, currentColor );
	text-decoration: underline;
	transition: opacity .18s ease;
}

.ca-reviews-card__quote-wrap.is-expanded .ca-reviews-card__more:hover,
.ca-reviews-card__quote-wrap.is-expanded .ca-reviews-card__more:focus-visible {
	opacity: .75;
	outline: none;
}

/* =========================================================================
   Decorative quote mark
   ========================================================================= */

.ca-reviews-card__quote-mark {
	position: absolute;
	top: var(--ca-reviews-qm-top, 0.1em);
	/* Right / bottom / left default to `auto` so they're inert until the
	   user explicitly sets a value, OR until the position-class rule below
	   kicks in (top-right / top-left). */
	right: var(--ca-reviews-qm-right, auto);
	bottom: var(--ca-reviews-qm-bottom, auto);
	left: var(--ca-reviews-qm-left, auto);
	font-family: var(--ca-reviews-qm-font-family, Georgia, "Times New Roman", serif);
	font-size: var(--ca-reviews-qm-size, 80px);
	line-height: var(--ca-reviews-qm-line-height, 1);
	color: var(--ca-reviews-qm-color, #e0e0e0);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.ca-reviews-card--qm-top-right .ca-reviews-card__quote-mark {
	/* Position-class default: when the user hasn't set --ca-reviews-qm-right,
	   fall back to 0.3em so the historical look is preserved. */
	right: var(--ca-reviews-qm-right, 0.3em);
}

.ca-reviews-card--qm-top-left .ca-reviews-card__quote-mark {
	left: var(--ca-reviews-qm-left, 0.3em);
}

/* Image variant: drop typography-related rules and let the inner <img>
   take its width from --ca-reviews-qm-size so the existing Size control
   stays meaningful. Height auto-adjusts to keep aspect ratio. */
.ca-reviews-card__quote-mark--image {
	line-height: 0;
}

.ca-reviews-card__quote-mark--image img {
	display: block;
	width: var(--ca-reviews-qm-size, 80px);
	height: auto;
	max-width: none;
}

/* =========================================================================
   Quote body
   ========================================================================= */

.ca-reviews-card__quote {
	position: relative;
	z-index: 2;
	color: var(--ca-reviews-quote-color, #111);
	font-size: var(--ca-reviews-quote-size, 20px);
	font-weight: var(--ca-reviews-quote-weight, 400);
	line-height: var(--ca-reviews-quote-line-height, 1.5);
}

.ca-reviews-card__quote p:first-child { margin-top: 0; }
.ca-reviews-card__quote p:last-child  { margin-bottom: 0; }

/* =========================================================================
   Footer: photo + meta block
   ========================================================================= */

.ca-reviews-card__footer {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
}

.ca-reviews-card--qm-top-left .ca-reviews-card__footer,
.ca-reviews-wrap.ca-reviews-grid--align-center .ca-reviews-card__footer {
	/* preserved for future per-alignment tweaks */
}

/* Alignment modifier — center the footer's flex items when the card is centered */
.ca-reviews-card--align-center .ca-reviews-card__footer {
	justify-content: center;
}

.ca-reviews-card--align-center .ca-reviews-card__meta {
	align-items: center;
}

/* =========================================================================
   Photo
   ========================================================================= */

.ca-reviews-card__photo {
	flex: 0 0 auto;
	width: var(--ca-reviews-photo-size, 72px);
	height: var(--ca-reviews-photo-size, 72px);
}

.ca-reviews-card__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--ca-reviews-photo-border-radius, 100%);
	border: var(--ca-reviews-photo-border-width, 0) solid var(--ca-reviews-photo-border-color, #fff);
}

/* =========================================================================
   Meta column
   ========================================================================= */

.ca-reviews-card__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0; /* allow long names to truncate inside flex */
}

.ca-reviews-card__name {
	margin: 0;
	color: var(--ca-reviews-name-color, #c21b17);
	font-size: var(--ca-reviews-name-size, 22px);
	font-weight: var(--ca-reviews-name-weight, 700);
	line-height: 1.2;
}

.ca-reviews-card__name a {
	color: inherit;
	text-decoration: none;
}

.ca-reviews-card__name a:hover,
.ca-reviews-card__name a:focus-visible {
	text-decoration: underline;
}

.ca-reviews-card__credit {
	color: var(--ca-reviews-meta-color, #333);
	font-size: var(--ca-reviews-meta-size, 14px);
	font-weight: var(--ca-reviews-meta-weight, 600);
	line-height: 1.4;
}

/* “Client since {value}” — optional supporting line under the credit. Reads
   as muted metadata. Override the variables to make it distinct from the
   job-title/company line. */
.ca-reviews-card__client-since {
	color: var(--ca-reviews-client-since-color, var(--ca-reviews-meta-color, #333));
	font-size: var(--ca-reviews-client-since-size, 13px);
	font-weight: var(--ca-reviews-client-since-weight, 400);
	letter-spacing: var(--ca-reviews-client-since-letter-spacing, normal);
	text-transform: var(--ca-reviews-client-since-transform, none);
	line-height: 1.4;
	margin-top: var(--ca-reviews-client-since-margin-top, 2px);
	opacity: var(--ca-reviews-client-since-opacity, .85);
}

.ca-reviews-card__credit a {
	color: inherit;
	text-decoration: none;
}

.ca-reviews-card__credit a:hover,
.ca-reviews-card__credit a:focus-visible {
	
}/* =========================================================================
   Stars
   ========================================================================= */

.ca-reviews-card__stars {
	display: inline-flex;
	margin-top: 6px;
	gap: var(--ca-reviews-stars-spacing, 6px);
	font-size: var(--ca-reviews-stars-size, 15px);
	line-height: 1;
}

.ca-reviews-card__star {
	color: var(--ca-reviews-stars-color, #f5a623);
}

.ca-reviews-card__star.is-off {
	color: color-mix(in srgb, var(--ca-reviews-stars-color, #f5a623) 25%, transparent);
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red, blue)) {
	.ca-reviews-card__star.is-off { opacity: 0.25; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.ca-reviews-card,
	.ca-reviews-card * {
		transition: none !important;
		animation: none !important;
	}
}

/* =========================================================================
   AI Aggregate Summary  (added by AI integration)
   Full-width "executive summary" row prepended to any collection shortcode
   when the aggregate_summary_show setting is on. Themes can override every
   value via the matching --ca-reviews-aggsum-* custom properties.
   ========================================================================= */

.ca-reviews-aggregate-summary {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 var(--ca-reviews-aggsum-gap, 24px);
	padding: var(--ca-reviews-aggsum-padding, 24px 28px);
	background: var(--ca-reviews-aggsum-bg, #f8fafc);
	border: 1px solid var(--ca-reviews-aggsum-border, #e2e8f0);
	border-radius: var(--ca-reviews-aggsum-radius, 14px);
	color: var(--ca-reviews-aggsum-text, #1e293b);
	line-height: 1.5;
}

.ca-reviews-aggregate-summary__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
	flex-wrap: wrap;
}

.ca-reviews-aggregate-summary__eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ca-reviews-aggsum-eyebrow, #64748b);
}

.ca-reviews-aggregate-summary__stats {
	font-size: 13px;
	color: var(--ca-reviews-aggsum-stats, #475569);
}

.ca-reviews-aggregate-summary__overview {
	margin: 0 0 12px;
	font-size: var(--ca-reviews-aggsum-summary-size, 16px);
	font-weight: var(--ca-reviews-aggsum-summary-weight, 500);
	color: var(--ca-reviews-aggsum-text, #1e293b);
}

/* "Words of our clients" section — Amazon-style clickable chips. */

.ca-reviews-aggregate-words {
	margin-top: 12px;
}

.ca-reviews-aggregate-words__heading {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ca-reviews-aggsum-eyebrow, #64748b);
}

.ca-reviews-aggregate-words__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ca-reviews-aggregate-words__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--ca-reviews-aggsum-chip-text, #334155);
	background: var(--ca-reviews-aggsum-chip-bg, #ffffff);
	border: 1px solid var(--ca-reviews-aggsum-chip-border, #e2e8f0);
	border-radius: 9999px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ca-reviews-aggregate-words__chip:hover,
.ca-reviews-aggregate-words__chip:focus-visible {
	background: var(--ca-reviews-aggsum-chip-hover-bg, #eef2ff);
	border-color: var(--ca-reviews-aggsum-chip-hover-border, #c7d2fe);
	color: var(--ca-reviews-aggsum-chip-hover-text, #312e81);
	outline: none;
}

.ca-reviews-aggregate-words__chip[aria-expanded="true"] {
	background: var(--ca-reviews-aggsum-chip-active-bg, #312e81);
	border-color: var(--ca-reviews-aggsum-chip-active-border, #312e81);
	color: var(--ca-reviews-aggsum-chip-active-text, #ffffff);
}

.ca-reviews-aggregate-words__arrow {
	display: inline-block;
	font-size: 14px;
	line-height: 1;
	transform: translateY(-1px);
	color: var(--ca-reviews-aggsum-chip-arrow, #94a3b8);
}

.ca-reviews-aggregate-words__chip[aria-expanded="true"] .ca-reviews-aggregate-words__arrow {
	color: currentColor;
}

.ca-reviews-aggregate-words__word {
	font-weight: 600;
}

.ca-reviews-aggregate-words__count {
	font-weight: 400;
	opacity: .8;
}

.ca-reviews-aggregate-words__detail {
	margin-top: 14px;
	padding: 14px 16px;
	background: var(--ca-reviews-aggsum-detail-bg, #ffffff);
	border: 1px solid var(--ca-reviews-aggsum-detail-border, #e2e8f0);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.ca-reviews-aggregate-words__detail[hidden] {
	display: none;
}

.ca-reviews-aggregate-words__detail-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--ca-reviews-aggsum-text, #1e293b);
}

.ca-reviews-aggregate-words__detail-header em {
	font-style: normal;
	font-weight: 700;
}

.ca-reviews-aggregate-words__close {
	border: 0;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	color: var(--ca-reviews-aggsum-stats, #475569);
	cursor: pointer;
	padding: 0 4px;
	margin: 0;
	border-radius: 4px;
}

.ca-reviews-aggregate-words__close:hover,
.ca-reviews-aggregate-words__close:focus-visible {
	color: #0f172a;
	background: rgba(15, 23, 42, .05);
	outline: none;
}

.ca-reviews-aggregate-words__mentions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ca-reviews-aggregate-words__mention-name {
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ca-reviews-aggsum-text, #1e293b);
}

.ca-reviews-aggregate-words__mention-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ca-reviews-aggsum-stats, #475569);
}

.ca-reviews-aggregate-words__mention-text strong {
	color: var(--ca-reviews-aggsum-text, #1e293b);
	font-weight: 700;
}

/* =========================================================================
   Source link  (added by AI integration — provenance link)
   Injected by ca_reviews_card_html filter when show_source_link is on.
   Sits at the bottom of each review card and points at the original
   review on Clutch / Google / Yelp / Facebook.
   ========================================================================= */

.ca-reviews-card__source-link {
	margin: var(--ca-reviews-source-link-margin, 8px 0 0);
	text-align: var(--ca-reviews-source-link-align, inherit);
	font-size: var(--ca-reviews-source-link-size, 12px);
	line-height: 1.4;
	opacity: var(--ca-reviews-source-link-opacity, .7);
}

.ca-reviews-card__source-link a {
	color: var(--ca-reviews-source-link-color, inherit);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
	transition: opacity .15s ease, border-color .15s ease;
}

.ca-reviews-card__source-link a:hover,
.ca-reviews-card__source-link a:focus {
	opacity: 1;
	border-bottom-color: transparent;
}

.ca-reviews-card__source-link small {
	font-size: inherit;
}