/* =============================================================================
   KBC Reviews — Frontend Styles
   File: assets/css/reviews.css

   Layouts
   -------
   .kbc-reviews--grid    2–3 column responsive card grid
   .kbc-reviews--list    Single-column with <hr> separators
   .kbc-reviews--slider  Auto-advancing carousel (no jQuery)

   Brand tokens fall back gracefully if the GeneratePress child-theme
   custom properties are not present on the page.
   ============================================================================= */

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
	--kbc-red:       #C0392B;
	--kbc-gold:      #F39C12;
	--kbc-black:     #1A1A1A;
	--kbc-white:     #FFFFFF;
	--kbc-grey-bg:   #F9F9F9;
	--kbc-grey-text: #555555;
	--kbc-border:    #E5E5E5;
	--kbc-radius:    10px;
	--kbc-shadow:    0 2px 12px rgba(0, 0, 0, .08);
}


/* =============================================================================
   SHARED — applies across all three layouts
   ============================================================================= */

/* ── Star rating ──────────────────────────────────────────────────────────── */
.kbc-stars {
	display: inline-flex;
	gap: 2px;
	font-size: 1.2rem;
	line-height: 1;
}

.kbc-star--filled { color: var(--kbc-gold); }
.kbc-star--empty  { color: #ddd; }

/* ── Google "sourced from" badge ─────────────────────────────────────────── */
.kbc-review-card__source {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.75rem;
	color: var(--kbc-grey-text);
}

.kbc-google-icon {
	vertical-align: middle;
	flex-shrink: 0;
}

/* ── Empty-state paragraph ───────────────────────────────────────────────── */
.kbc-reviews-empty {
	color: var(--kbc-grey-text);
	font-style: italic;
}


/* =============================================================================
   LAYOUT 1 — GRID
   3 columns on desktop · 2 on tablet · 1 on mobile
   Uses CSS container queries so it adapts to its own width, not the viewport.
   ============================================================================= */

.kbc-reviews--grid {
	container-type: inline-size;
}

.kbc-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@container (max-width: 760px) {
	.kbc-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}

@container (max-width: 480px) {
	.kbc-reviews__grid { grid-template-columns: 1fr; }
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.kbc-review-card {
	background: var(--kbc-white);
	border: 1px solid var(--kbc-border);
	border-radius: var(--kbc-radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: var(--kbc-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}

.kbc-review-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

/* ── Card: star block ──────────────────────────────────────────────────────── */
.kbc-review-card__stars {
	/* Stars sit at the top of the flex column — no extra rules needed */
}

/* ── Card: review text ─────────────────────────────────────────────────────── */
.kbc-review-card__quote {
	margin: 0;
	flex: 1; /* pushes footer to bottom regardless of text length */
}

.kbc-review-card__quote p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--kbc-black);
	font-style: italic;
}

.kbc-review-card__quote p::before {
	content: '\201C';
	color: var(--kbc-gold);
	font-size: 1.4rem;
	line-height: 0;
	vertical-align: -4px;
	margin-right: 2px;
}

.kbc-review-card__quote p::after {
	content: '\201D';
	color: var(--kbc-gold);
	font-size: 1.4rem;
	line-height: 0;
	vertical-align: -4px;
	margin-left: 2px;
}

/* ── Card: footer (author · date · Google badge) ──────────────────────────── */
.kbc-review-card__footer {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	border-top: 1px solid var(--kbc-border);
	padding-top: 12px;
	margin-top: auto;
}

.kbc-review-card__author {
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--kbc-black);
}

.kbc-review-card__date {
	font-size: 0.8rem;
	color: var(--kbc-grey-text);
}

.kbc-review-card__source {
	margin-left: auto; /* pins badge to far right of footer */
}


/* =============================================================================
   LAYOUT 2 — LIST
   Single column. Items separated by a styled <hr> element.
   Well-suited to sidebars, footer widget areas, and narrow containers.
   ============================================================================= */

.kbc-reviews__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0; /* spacing is handled by separator padding below */
}

/* ── List item ──────────────────────────────────────────────────────────────── */
.kbc-review-item {
	border-left: 4px solid var(--kbc-gold);
	padding: 14px 16px;
	background: var(--kbc-grey-bg);
	border-radius: 0 var(--kbc-radius) var(--kbc-radius) 0;
}

/* ── List item: author + stars row ─────────────────────────────────────────── */
.kbc-review-item__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.kbc-review-item__author {
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--kbc-black);
}

/* ── List item: review text ─────────────────────────────────────────────────── */
.kbc-review-item__quote {
	margin: 0 0 8px;
}

.kbc-review-item__quote p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: #333;
	font-style: italic;
}

/* ── List item: date + source ───────────────────────────────────────────────── */
.kbc-review-item__date {
	margin: 0;
	font-size: 0.75rem;
	color: var(--kbc-grey-text);
}

/* ── Horizontal rule separator ──────────────────────────────────────────────── */
/*
 * The <li class="kbc-review-separator"> wraps an <hr> between every pair
 * of review items (added in front-list.php). These rules ensure it gets
 * none of the item's left-border or background, and that the <hr> itself
 * is styled to match the brand palette.
 */
.kbc-review-separator {
	/* Reset any inherited list-item appearance */
	background: transparent;
	border: none;
	padding: 4px 0;
}

.kbc-review-separator hr {
	border: none;
	border-top: 1px solid var(--kbc-border);
	margin: 0;
}


/* =============================================================================
   LAYOUT 3 — SLIDER
   Auto-advancing carousel driven by assets/js/reviews.js (no jQuery).
   Supports multiple independent sliders on the same page via unique IDs.
   ============================================================================= */

.kbc-reviews--slider {
	position: relative;
	overflow: hidden;
	border-radius: var(--kbc-radius);
	background: var(--kbc-white);
	box-shadow: var(--kbc-shadow);
	padding: 40px 60px 56px;
	text-align: center;
}

/* ── Slide track ────────────────────────────────────────────────────────────── */
.kbc-slider__track {
	position: relative;
}

.kbc-slider__slide {
	display: none;
}

.kbc-slider__slide.is-active {
	display: block;
	animation: kbcFadeIn .4s ease;
}

@keyframes kbcFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0);   }
}

/* ── Slide: stars ───────────────────────────────────────────────────────────── */
.kbc-slider__stars {
	margin-bottom: 16px;
	font-size: 1.4rem;
}

/* ── Slide: review text ─────────────────────────────────────────────────────── */
.kbc-slider__quote {
	margin: 0 0 16px;
}

.kbc-slider__quote p {
	font-size: 1.1rem;
	line-height: 1.65;
	font-style: italic;
	color: var(--kbc-black);
	max-width: 680px;
	margin: 0 auto;
}

.kbc-slider__quote p::before {
	content: '\201C';
	color: var(--kbc-gold);
	font-size: 2rem;
	line-height: 0;
	vertical-align: -8px;
}

.kbc-slider__quote p::after {
	content: '\201D';
	color: var(--kbc-gold);
	font-size: 2rem;
	line-height: 0;
	vertical-align: -8px;
}

/* ── Slide: author + date ───────────────────────────────────────────────────── */
.kbc-slider__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 0.875rem;
}

.kbc-slider__author {
	font-weight: 700;
	color: var(--kbc-black);
}

.kbc-slider__date {
	color: var(--kbc-grey-text);
}

.kbc-slider__date::before {
	content: '·';
	margin-right: 10px;
}

/* ── Navigation dots ────────────────────────────────────────────────────────── */
.kbc-slider__dots {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
}

.kbc-slider__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid var(--kbc-gold);
	background: transparent;
	cursor: pointer;
	padding: 0;
	transition: background .2s;
}

.kbc-slider__dot.is-active,
.kbc-slider__dot:hover {
	background: var(--kbc-gold);
}

/* ── Prev / Next buttons ────────────────────────────────────────────────────── */
.kbc-slider__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--kbc-red);
	color: var(--kbc-white);
	border: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: .8;
	transition: opacity .2s;
}

.kbc-slider__btn:hover  { opacity: 1; }
.kbc-slider__btn--prev  { left: 12px; }
.kbc-slider__btn--next  { right: 12px; }

/* ── Reduced-motion: disable slide animation ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.kbc-slider__slide.is-active {
		animation: none;
	}
	.kbc-review-card {
		transition: none;
	}
}

/* ── Mobile adjustments ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.kbc-reviews--slider {
		padding: 32px 20px 52px;
	}

	.kbc-slider__quote p {
		font-size: 0.95rem;
	}

	.kbc-slider__btn {
		display: none; /* dot nav is sufficient on small screens */
	}
}