/**
 * BC Reviews — front-end styles.
 *
 * Values mirror the BlueCasas Design System tokens (tokens/colors.css,
 * typography.css, spacing.css) rather than re-inventing them. They are
 * redeclared locally, scoped to the plugin's own roots, because the theme
 * does not load the design-system stylesheets on the front end.
 *
 * Design-system rules honoured here:
 * - White page, blue accent, gray support.
 * - No green; status colors stay utility-only.
 *
 * Documented exception: star ratings are gold. The palette has no amber, but
 * gold stars are a near-universal convention guests read instantly; blue stars
 * read as a rendering fault rather than as brand consistency. This is the one
 * place the plugin knowingly departs from the token set.
 * - Standard cards get the soft shadow; the signature asymmetric corner is
 *   reserved for featured cards, so it is not used here.
 * - Third-party platform colors (Airbnb coral, Booking navy, Google blue)
 *   are identity marks for those companies, not BlueCasas accents, and are
 *   kept to small marks and tinted chips.
 */

.bc-reviews,
.bc-reviews-badge {
	/* Brand palette */
	--bc-blue-600: #0e5ad8;
	--bc-blue-700: #0b48ad;
	--bc-blue-500: #2f74e4;
	--bc-blue-100: #e2ecfb;
	--bc-blue-50: #f0f5fd;
	--bc-black: #000000;
	--bc-gray-700: #5c5c5e;
	--bc-gray-500: #98989a;
	--bc-gray-300: #c8c8ca;
	--bc-gray-200: #e2e2e4;
	--bc-gray-100: #f0f0f1;
	--bc-gray-50: #f7f7f8;
	--bc-white: #ffffff;

	/* Semantic aliases */
	--bc-brand: var(--bc-blue-600);
	--bc-text-body: #1a1a1c;
	--bc-text-muted: var(--bc-gray-700);
	--bc-text-subtle: var(--bc-gray-500);
	--bc-surface-card: var(--bc-white);
	--bc-border-default: var(--bc-gray-200);

	/* Type */
	--bc-font: "Red Hat Text", "Helvetica Neue", Arial, sans-serif;
	--bc-text-xs: 12px;
	--bc-text-sm: 14px;
	--bc-text-md: 16px;
	--bc-text-lg: 18px;
	--bc-leading-snug: 1.3;
	--bc-leading-normal: 1.5;
	--bc-tracking-caps: 0.12em;

	/* Space */
	--bc-space-1: 4px;
	--bc-space-2: 8px;
	--bc-space-3: 12px;
	--bc-space-4: 16px;
	--bc-space-5: 24px;

	/* Corners, elevation, motion */
	--bc-radius-sm: 4px;
	--bc-radius-md: 8px;
	--bc-radius-lg: 14px;
	--bc-radius-pill: 999px;
	--bc-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.06);
	--bc-shadow-overlay: 0 8px 40px rgba(0, 0, 0, 0.18);
	--bc-ease: cubic-bezier(0.2, 0, 0, 1);
	--bc-duration-fast: 120ms;
	--bc-duration-normal: 200ms;
	--bc-focus-ring: 0 0 0 3px rgba(14, 90, 216, 0.25);

	/* Rating gold - deliberate convention-over-token exception (see header). */
	--bc-star: #f5a623;

	/* Third-party identity colors */
	--bc-airbnb: #ff5a5f;
	--bc-booking: #003a9a;
	--bc-vrbo: #245abc;
	--bc-google: #4285f4;

	font-family: var(--bc-font);
	color: var(--bc-text-body);
}

/* Screen-reader-only helper (theme-independent). */
.bc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ *
 * Brand chips & icons
 * ------------------------------------------------------------------ */

.bc-icon {
	width: 13px;
	height: 13px;
	display: block;
}

.bc-icon--letter {
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	display: block;
}

.bc-icon--img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 50%;
	display: block;
}

.bc-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--bc-white);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.bc-chip--airbnb {
	color: var(--bc-airbnb);
}

.bc-chip--booking {
	color: var(--bc-booking);
}

.bc-chip--booking .bc-icon {
	border-radius: 3px;
}

.bc-chip--vrbo {
	color: var(--bc-vrbo);
}

.bc-chip--google {
	color: var(--bc-google);
}

.bc-chip--bluecasas {
	color: var(--bc-brand);
}

/* ------------------------------------------------------------------ *
 * Card
 * ------------------------------------------------------------------ */

.bc-review-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--bc-space-3);
	background: var(--bc-surface-card);
	border: 1px solid var(--bc-border-default);
	border-radius: var(--bc-radius-lg);
	box-shadow: var(--bc-shadow-card);
	padding: var(--bc-space-5);
	box-sizing: border-box;
	min-width: 0;
	overflow: hidden;
	transition: transform var(--bc-duration-normal) var(--bc-ease),
		box-shadow var(--bc-duration-normal) var(--bc-ease);
}

@media (hover: hover) {
	.bc-review-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--bc-shadow-overlay);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bc-review-card,
	.bc-review-card:hover {
		transition: none;
		transform: none;
	}
}

/* Oversized decorative quotation mark, in the faintest brand tint. */
.bc-review-card__quote {
	position: absolute;
	top: -22px;
	right: 12px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 112px;
	line-height: 1;
	color: var(--bc-blue-50);
	pointer-events: none;
	user-select: none;
}

.bc-review-card > *:not(.bc-review-card__quote) {
	position: relative;
}

.bc-review-card__head {
	display: flex;
	align-items: center;
	gap: var(--bc-space-3);
}

.bc-review-card__avatar {
	position: relative;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--bc-brand);
	color: var(--bc-white);
	font-size: var(--bc-text-lg);
	font-weight: 700;
	line-height: 48px;
	text-align: center;
}

/* Mini platform chip pinned to the avatar. */
.bc-review-card__avatar .bc-chip {
	position: absolute;
	right: -5px;
	bottom: -5px;
	width: 21px;
	height: 21px;
	border: 2px solid var(--bc-white);
}

.bc-review-card__avatar .bc-chip .bc-icon {
	width: 10px;
	height: 10px;
}

.bc-review-card__avatar .bc-chip .bc-icon--letter {
	font-size: 9px;
}

.bc-review-card__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bc-review-card__author {
	font-weight: 700;
	font-size: var(--bc-text-md);
	line-height: var(--bc-leading-snug);
}

/* Eyebrow treatment, per the design system's card pattern. */
.bc-review-card__meta {
	color: var(--bc-text-subtle);
	font-size: 11px;
	letter-spacing: var(--bc-tracking-caps);
	text-transform: uppercase;
	line-height: 1.4;
}

.bc-review-card__score {
	margin-left: auto;
	align-self: flex-start;
	background: var(--bc-blue-100);
	color: var(--bc-blue-700);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 9px;
	border-radius: var(--bc-radius-md);
}

.bc-review-card__stars {
	color: var(--bc-star);
	font-size: var(--bc-text-md);
	letter-spacing: 3px;
	line-height: 1;
}

.bc-review-card__text {
	font-size: var(--bc-text-sm);
	line-height: 1.65;
	color: var(--bc-text-body);
}

.bc-review-card__text p {
	margin: 0 0 0.6em;
}

.bc-review-card__text p:last-child {
	margin-bottom: 0;
}

/* Clamp long reviews; JS reveals the Read more button only on overflow. */
.bc-review-card__text:not(.is-expanded) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

.bc-review-card__more {
	align-self: flex-start;
	background: none;
	border: none;
	padding: 0;
	color: var(--bc-brand);
	font-family: inherit;
	font-size: var(--bc-text-sm);
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	border-bottom: 2px solid var(--bc-blue-100);
	transition: border-color var(--bc-duration-fast) var(--bc-ease);
}

.bc-review-card__more:hover {
	border-bottom-color: var(--bc-brand);
}

.bc-review-card__more:focus-visible {
	outline: none;
	box-shadow: var(--bc-focus-ring);
	border-radius: var(--bc-radius-sm);
}

.bc-review-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bc-space-2);
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: var(--bc-space-3);
	border-top: 1px solid var(--bc-gray-100);
}

/* Platform tag: tinted pill carrying the platform's own mark. */
.bc-source-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: var(--bc-radius-pill);
	font-size: 13px;
	font-weight: 700;
	line-height: var(--bc-leading-snug);
	color: var(--bc-text-muted);
	background: var(--bc-gray-100);
}

.bc-source-tag .bc-icon {
	width: 14px;
	height: 14px;
}

.bc-source-tag--airbnb {
	color: #e0484d;
	background: rgba(255, 90, 95, 0.1);
}

.bc-source-tag--booking {
	color: var(--bc-booking);
	background: rgba(0, 58, 154, 0.08);
}

.bc-source-tag--booking .bc-icon {
	border-radius: 3px;
}

.bc-source-tag--vrbo {
	color: var(--bc-vrbo);
	background: rgba(36, 90, 188, 0.09);
}

.bc-source-tag--google {
	color: #1a73e8;
	background: rgba(66, 133, 244, 0.1);
}

/* Direct reviews wear the house brand. */
.bc-source-tag--bluecasas {
	color: var(--bc-blue-700);
	background: var(--bc-blue-100);
}

.bc-review-card__verified {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--bc-text-subtle);
	font-size: 13px;
	font-weight: 500;
}

.bc-check {
	width: 15px;
	height: 15px;
	color: var(--bc-brand);
}

/* ------------------------------------------------------------------ *
 * Wall layout: 1 / 2 / 3 columns
 * ------------------------------------------------------------------ */

.bc-reviews--wall {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bc-space-5);
}

@media (min-width: 600px) {
	.bc-reviews--wall {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.bc-reviews--wall {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ------------------------------------------------------------------ *
 * Carousel layout: native scroll + snap (swipe-friendly by default)
 * ------------------------------------------------------------------ */

.bc-reviews--carousel {
	position: relative;
	padding: 0 var(--bc-space-2);
}

.bc-reviews__track {
	display: flex;
	gap: var(--bc-space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: var(--bc-space-2) 2px var(--bc-space-4);
}

.bc-reviews__track::-webkit-scrollbar {
	display: none;
}

.bc-reviews__track:focus-visible {
	outline: none;
	box-shadow: var(--bc-focus-ring);
	border-radius: var(--bc-radius-lg);
}

.bc-reviews--carousel .bc-review-card {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

@media (min-width: 600px) {
	.bc-reviews--carousel .bc-review-card {
		flex-basis: calc((100% - var(--bc-space-5)) / 2);
	}
}

@media (min-width: 960px) {
	.bc-reviews--carousel .bc-review-card {
		flex-basis: calc((100% - (var(--bc-space-5) * 2)) / 3);
	}
}

.bc-reviews__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 1px solid var(--bc-border-default);
	border-radius: 50%;
	background: var(--bc-white);
	color: var(--bc-brand);
	font-size: 22px;
	line-height: 42px;
	text-align: center;
	cursor: pointer;
	box-shadow: var(--bc-shadow-card);
	padding: 0;
	transition: background var(--bc-duration-fast) var(--bc-ease),
		color var(--bc-duration-fast) var(--bc-ease);
}

.bc-reviews__arrow:hover {
	background: var(--bc-brand);
	color: var(--bc-white);
}

.bc-reviews__arrow:focus-visible {
	outline: none;
	box-shadow: var(--bc-focus-ring);
}

.bc-reviews__arrow--prev {
	left: -10px;
}

.bc-reviews__arrow--next {
	right: -10px;
}

@media (prefers-reduced-motion: reduce) {
	.bc-reviews__track {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------------------ *
 * Badge
 * ------------------------------------------------------------------ */

.bc-reviews-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px var(--bc-space-4);
	border: 1px solid var(--bc-border-default);
	border-radius: var(--bc-radius-pill);
	background: var(--bc-surface-card);
	box-shadow: var(--bc-shadow-card);
	font-size: var(--bc-text-sm);
	font-weight: 500;
	line-height: var(--bc-leading-normal);
	color: var(--bc-text-body);
}

.bc-reviews-badge__star {
	color: var(--bc-star);
	font-size: var(--bc-text-md);
	line-height: 1;
}

.bc-reviews-badge__score {
	font-size: var(--bc-text-md);
	font-weight: 700;
	line-height: 1;
	color: var(--bc-black);
}

.bc-reviews-badge__text {
	color: var(--bc-text-muted);
}

.bc-reviews-badge__chips {
	display: inline-flex;
	align-items: center;
	padding-left: 2px;
}

.bc-reviews-badge__chips .bc-chip {
	border: 2px solid var(--bc-white);
	margin-left: -7px;
}

.bc-reviews-badge__chips .bc-chip:first-child {
	margin-left: 0;
}

/* Admin-only hint when a shortcode matches nothing. */
.bc-reviews-empty-note {
	font-style: italic;
	color: var(--bc-text-subtle, #98989a);
}