/**
 * BBP Reviews widget styles.
 *
 * Deliberately has NO hardcoded section padding or width of its own:
 * Elementor's native Advanced > Padding/Margin controls (which target
 * .elementor-widget-container) are the only source of outer spacing.
 *
 * Card look (translucent fill, thin light hairline border, asymmetric
 * corner radius) is reverse-measured from the Figma reference render —
 * see the "outer corner is more rounded than the chair-facing inner
 * corner" rule below, which is a deliberate mirrored pair per column,
 * not a mistake.
 */

.elementor-widget-bbp-reviews {
	width: 100%;
}

.bbp-reviews-section {
	width: 100%;
}

.bbp-reviews-heading {
	font-family: var(--bbp-heading-font);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.2;
	color: var(--bbp-text-white);
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 60px;
}

.bbp-reviews-heading .bbp-text-gold {
	color: var(--bbp-gold);
}

/* The center image is absolutely positioned over the card grid, so the
   wrap needs position:relative and the grid needs to establish real
   height for the image to center against. */
.bbp-reviews-grid-wrap {
	position: relative;
}

/* Sized from height, not width: the reference chair image spans ~90% of
   the whole 2-row grid's height and derives its width from its own
   aspect ratio, rather than the other way around. */
.bbp-reviews-center-image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	height: 90% !important;
	width: auto;
	pointer-events: none;
}

.bbp-reviews-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--bbp-reviews-cols, 2), 1fr);
	/* The column gutter has to leave room for the center image (measured
	   at ~78% of a card's own width in the reference, i.e. roughly a
	   quarter of the whole grid) — the row gap is a normal, much smaller
	   gap between the top/bottom cards. */
	column-gap: 20%;
	row-gap: 120px;
}

.bbp-reviews-card {
	display: flex;
	flex-direction: column;
	background-color: rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--bbp-reviews-radius, 50px);
	padding: 24px;
	text-align: left;
	backdrop-filter: blur(2px) saturate(280%);
	-webkit-backdrop-filter: blur(2px) saturate(280%);
}

/* Two-column grid only: outer corners (away from the center image) stay
   fully rounded; the two corners facing the center image are noticeably
   tighter — mirrored per column. Falls back to the uniform radius above
   for any other column count, where there's no single "facing the
   image" edge per card. */
.bbp-reviews-grid[style*="--bbp-reviews-cols: 2"] .bbp-reviews-card:nth-child(odd) {
	border-radius:
		var(--bbp-reviews-radius, 50px)
		calc(var(--bbp-reviews-radius, 50px) * 0.68)
		calc(var(--bbp-reviews-radius, 50px) * 0.68)
		var(--bbp-reviews-radius, 50px);
}

.bbp-reviews-grid[style*="--bbp-reviews-cols: 2"] .bbp-reviews-card:nth-child(even) {
	border-radius:
		calc(var(--bbp-reviews-radius, 50px) * 0.68)
		var(--bbp-reviews-radius, 50px)
		var(--bbp-reviews-radius, 50px)
		calc(var(--bbp-reviews-radius, 50px) * 0.68);
}


/* The quote/star icon is centered on the card's own width — it is NOT
   aligned with the quote/name text column below it, which stays left. */
.bbp-reviews-icon {
	align-self: center;
	display: block;
	width: 117px;
	height: auto;
	margin: 0 0 32px;
}

.bbp-reviews-quote {
	font-family: var(--bbp-font-family);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	color: #ffffff;
}

.bbp-reviews-quote p {
	margin: 0 0 16px;
}

.bbp-reviews-quote p:last-child {
	margin-bottom: 0;
}

/* Smaller than the quote text, but bolder — not the other way around. */
.bbp-reviews-name {
	font-family: var(--bbp-font-family);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bbp-text-white);
	margin-top: 24px;
}

@media (max-width: 900px) {
	.bbp-reviews-heading {
		font-size: 32px;
		margin-bottom: 40px;
	}

	.bbp-reviews-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		/* Not !important: a "Gap Between Rows" value set on this breakpoint
		   via the Style tab's responsive control should still win here. */
		column-gap: 16px;
		row-gap: 16px;
	}

	/* The center image no longer sits in the column gutter at this
	   width, so there's no more "facing the image" corner — go uniform. */
	.bbp-reviews-card:nth-child(odd),
	.bbp-reviews-card:nth-child(even) {
		border-radius: var(--bbp-reviews-radius, 50px) !important;
	}

	/* The overlapping center-image treatment only works alongside a 2x2
	   (or wider) grid with real empty space at its center. On narrower
	   screens the grid stacks, so the image drops into normal flow above
	   the cards instead of floating over them. */
	.bbp-reviews-center-image {
		display: none;
		position: static;
		transform: none;
		height: auto;
		width: 220px;
		max-width: 60%;
		margin: 0 auto 32px;
	}
}

@media (max-width: 600px) {
	.bbp-reviews-grid {
		grid-template-columns: 1fr !important;
	}
}