/* ------------------------------------------------------------ *\
	Reviews V3 page — "Votre avis sur nos produits"
	Aggregates each product's PDP testimonials into a per-product
	carousel. Card visuals mirror .pdp-review (validated on the PDP).
\* ------------------------------------------------------------ */

.reviews-intro,
.reviews-listing,
.reviews-testi { background: var(--bva-canelle-100); }

.reviews-intro *, .reviews-intro *::before, .reviews-intro *::after,
.reviews-listing *, .reviews-listing *::before, .reviews-listing *::after,
.reviews-testi *, .reviews-testi *::before, .reviews-testi *::after { box-sizing: border-box; }

/* --- Intro (page heading) --- */
.reviews-intro__inner {
	/* full-bleed page (40px gutter), like testimonials/journal — cards reach the edges as in the maquette */
	/* top clears the 80px fixed header (maquette Nav pt-111) */
	padding: 112px 40px 40px;
}
.reviews-intro__title {
	margin: 0;
	font: 400 28px/1.3 var(--bva-font-sans);
	color: var(--bva-black);
}

/* --- Product tag bar --- */
.reviews-tags { padding-top: 24px; }
.reviews-tags__inner {
	padding-inline: 40px;
	border-top: 1px solid var(--bva-line);
	border-bottom: 1px solid var(--bva-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.reviews-tags__inner::-webkit-scrollbar { display: none; }
.reviews-tags__link {
	padding-block: 24px;
	font: 300 14px/1.1 var(--bva-font-mono);
	text-transform: uppercase;
	color: var(--bva-black);
	text-decoration: none;
	white-space: nowrap;
	opacity: 0.5;
	transition: opacity 0.15s ease;
}
.reviews-tags__link:hover,
.reviews-tags__link.is-active { opacity: 1; }

/* --- Listing (one block per product) --- */
.reviews-listing__blocks {
	display: flex;
	flex-direction: column;
	gap: 74px;
	padding-top: 56px;
}
.reviews-block { scroll-margin-top: 96px; }
.reviews-block__inner {
	padding-inline: 40px;
	display: flex;
	align-items: center;
	gap: 64px;
}
.reviews-block__media {
	flex: 0 0 499px;
	width: 499px;
	height: 560px;
	border-radius: 4px;
	background-color: var(--bva-img-bg);
	background-repeat: no-repeat;
	background-position: center;
	/* fill the card (no empty bands) — deliberate deviation from the maquette's contained packshot */
	background-size: cover;
}
.reviews-block__col {
	flex: 1 1 auto;
	min-width: 0;
	/* min-height (not height): long reviews grow the block instead of
	   overflowing onto the next section; short content stays ISO maquette */
	min-height: 480px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
}
.reviews-block__title {
	margin: 0;
	font: 400 28px/1.3 var(--bva-font-sans);
	color: var(--bva-black);
}
.reviews-block__body {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}
.reviews-block__subtitle {
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bva-line);
	font: 300 18px/1.32 var(--bva-font-sans);
	color: var(--bva-black);
}

/* --- Testimonial carousel --- */
.reviews-carousel { width: 100%; overflow: hidden; }
.reviews-carousel__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.reviews-carousel__track::-webkit-scrollbar { display: none; }

.review-card {
	flex: 0 0 332px;
	width: 332px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px;
	border-radius: 4px;
	background: var(--bva-myrtille-100);
}
.review-card__body { display: flex; flex-direction: column; gap: 24px; }
.review-card__head { display: flex; flex-direction: column; gap: 12px; }
.review-card__stars { display: inline-flex; gap: 2px; }
.review-card__stars svg { width: 13px; height: 12px; display: block; }
.review-card__title { margin: 0; font: 500 20px/1.2 var(--bva-font-sans); color: var(--bva-dark-brown); }
.review-card__text { margin: 0; font: 300 18px/1.32 var(--bva-font-sans); color: var(--bva-text-60); }
.review-card__name { margin: 0; font: 300 14px/1.1 var(--bva-font-mono); text-transform: uppercase; color: var(--bva-dark-brown); }

/* --- Block footer: CTA + carousel arrows --- */
.reviews-block__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.reviews-block__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 20px;
	border-radius: 2px;
	background: var(--bva-black);
	font: 500 12px/1.1 var(--bva-font-sans);
	text-transform: uppercase;
	color: #fefefe;
	text-decoration: none;
}
.reviews-carousel__nav { display: flex; gap: 12px; }
.reviews-carousel__arrow {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: var(--bva-black);
}
.reviews-carousel__arrow svg { width: 24px; height: 24px; display: block; }
.reviews-carousel__arrow--prev svg { transform: rotate(180deg); }
.reviews-carousel__arrow:disabled { background: rgba(21, 20, 18, 0.16); cursor: default; }

/* --- Bottom video band --- */
.reviews-testi {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
	padding: 120px 40px;
}
.reviews-testi__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 656px;
	text-align: center;
}
.reviews-testi__title { margin: 0; font: 400 28px/1.3 var(--bva-font-sans); color: var(--bva-black); }
.reviews-testi__subtitle { margin: 0; font: 300 18px/1.32 var(--bva-font-sans); color: var(--bva-text-50); }
.reviews-testi__grid {
	width: 100%;
	max-width: 1360px;
	display: flex;
	gap: 16px;
	justify-content: center;
}
.reviews-video {
	position: relative;
	flex: 0 0 328px;
	width: 328px;
	border-radius: 4px;
	overflow: hidden;
	background: #000;
}
.reviews-video__poster {
	width: 100%;
	aspect-ratio: 328 / 582;
	background-color: #000;
	background-position: center;
	background-size: cover;
}
.reviews-video__controls {
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.reviews-video__play svg { width: 32px; height: 32px; display: block; }
.reviews-video__volume svg { width: 20px; height: 20px; display: block; }

/* --- Responsive (maquette is fixed at 1440; below that we degrade gracefully) --- */
@media (max-width: 1280px) {
	.reviews-block__inner { gap: 40px; }
	.reviews-block__media { flex-basis: 40%; width: auto; }
	.reviews-block__col { flex: 1 1 auto; width: auto; height: auto; gap: 32px; }
}
@media (max-width: 900px) {
	.reviews-block__inner { flex-direction: column; align-items: stretch; gap: 24px; }
	.reviews-block__media { flex: 0 0 auto; width: 100%; height: 420px; }
	.reviews-testi__grid { flex-wrap: wrap; }
	.reviews-video { flex-basis: calc(50% - 8px); }
}
/* Mobile: the testimonial videos become a one-line peek slider (maquette),
   not a wrapped grid. ihaInitSlider() injects the centralized .v3-dots
   switcher; .reviews-testi is flex-column so the dots auto-center below. */
@media (max-width: 835px) {
	.reviews-testi__grid {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.reviews-testi__grid::-webkit-scrollbar { display: none; }
	.reviews-video {
		flex: 0 0 80%;
		width: auto;
		scroll-snap-align: start;
	}
}
@media (max-width: 560px) {
	.reviews-intro__inner { padding: 40px 20px 24px; }
	.reviews-tags__inner,
	.reviews-block__inner { padding-inline: 20px; }
	.reviews-testi { padding: 64px 20px; }
}