/* ------------------------------------------------------------ *\
	Biovancia v3 — Listing Article (product category landing)
	Intro + category chips + product grid + reviews block + image
	band + global FAQ. Tokens only, scoped to .v3. Grid + FAQ reuse
	base.css (.featured / .questions).
\* ------------------------------------------------------------ */

/* --- Catalog head + chips --- */
.v3 .larticle-catalog { padding-top: 120px; }
.v3 .larticle-catalog__head { margin-bottom: 32px; }
.v3 .larticle-catalog__title {
	font: var(--bva-t-header-xl);
	color: var(--bva-black);
	margin: 0 0 16px;
}
.v3 .larticle-catalog__text {
	font: var(--bva-t-paragraphe);
	color: var(--bva-text-50);
	max-width: 620px;
}
.v3 .larticle-catalog__text p { margin: 0; }

.v3 .larticle-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 48px;
}
.v3 .larticle-chips__chip {
	display: inline-flex;
	align-items: center;
	padding: 12px;
	border-radius: 4px;
	background: rgba(21, 20, 18, 0.08);
	font: var(--bva-t-label);
	text-transform: uppercase;
	color: var(--bva-black);
	text-decoration: none;
}
.v3 .larticle-chips__chip.is-active { background: var(--bva-black); color: var(--bva-white); }

/* The product grid (shared .featured) carries its own .shell; trim its top. */
.v3 .larticle-catalog .featured { padding-top: 0; }

/* Promo article card — drops into the .products grid as a full-bleed image cell
   (same width as a product card) with the category + title overlaid at bottom. */
.v3 .product--article {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border-radius: 4px;
	min-height: 360px;
	padding: 24px;
	text-decoration: none;
	background-color: var(--bva-line);
	background-size: cover;
	background-position: center;
}
.v3 .product--article::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.65) 100%);
}
.v3 .product--article__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.v3 .product--article__tag {
	font: var(--bva-t-label);
	text-transform: uppercase;
	color: var(--bva-white);
}
.v3 .product--article__title {
	font: var(--bva-t-header-s);
	font-weight: 500;
	color: var(--bva-white);
}

/* --- Reviews block --- */
.v3 .larticle-reviews { padding-top: 100px; }
.v3 .larticle-reviews__grid {
	display: grid;
	grid-template-columns: 578px 1fr;
	gap: 64px;
	align-items: start;
}
.v3 .larticle-reviews__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-bottom: 48px;
}
.v3 .larticle-reviews__score {
	font: var(--bva-t-header-l);
	font-weight: 500;
	color: var(--bva-black);
}
.v3 .larticle-reviews__stars { display: inline-flex; gap: 2px; }
.v3 .larticle-reviews__stars svg { width: 20px; height: 20px; }
.v3 .larticle-reviews__note-text {
	flex: 1 1 100%;
	font: var(--bva-t-paragraphe);
	color: var(--bva-text-50);
	margin: 0;
}
.v3 .larticle-reviews__list { display: flex; flex-direction: column; }
.v3 .larticle-review {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px 0;
	border-top: 1px solid var(--bva-line);
}
.v3 .larticle-review:first-child { border-top: 0; padding-top: 0; }
.v3 .larticle-review__date {
	font: var(--bva-t-label);
	text-transform: uppercase;
	color: var(--bva-muted);
	margin: 0;
}
.v3 .larticle-review__stars { display: inline-flex; gap: 2px; }
.v3 .larticle-review__stars svg { width: 18px; height: 18px; }
.v3 .larticle-review__title {
	font: var(--bva-t-header-s);
	color: var(--bva-black);
	margin: 0;
}
.v3 .larticle-review__text {
	font: var(--bva-t-paragraphe);
	color: var(--bva-text-50);
	margin: 0;
}
.v3 .larticle-reviews__media { height: 100%; }
.v3 .larticle-reviews__media-inner {
	/* Right-edge bleed: extend past the shell's right gutter to the viewport edge.
	   Gutter = 40px below the 1440px shell cap, + the auto-centering margin above it. */
	--bva-bleed-right: max(40px, (100vw - 1360px) / 2);
	position: sticky;
	top: 100px;
	width: calc(100% + var(--bva-bleed-right));
	aspect-ratio: 714 / 817;
	/* The ratio grows the block with the viewport width (867px at 1440, 1142px at
	   1920) while the pin only leaves `100vh - 100`: past that its bottom and the
	   left radius sit under the fold for the whole pin. Cap the height and keep
	   the bleed — the ratio yields, the `cover` background recrops. */
	max-height: calc(100vh - 100px - 40px);
	border-radius: 4px 0 0 4px;
	background: var(--bva-img-bg) center / cover no-repeat;
}

/* --- Image band ("L'énergie d'être soi") --- */
/* Full-width feature banner with a slim 16px gutter (Figma 2229:12226 → x=16 in a
   1440 frame) so it nearly touches the edges — mirrors the PDP band (.pdp-band). */
.v3 .larticle-band { padding: 100px 16px 0; }
.v3 .larticle-band__inner {
	position: relative;
	min-height: 500px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 48px;
	border-radius: 12px;
	background: var(--bva-img-bg) center / cover no-repeat;
	overflow: hidden;
}
.v3 .larticle-band__inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
}
.v3 .larticle-band__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	color: var(--bva-white);
}
.v3 .larticle-band__title {
	font: var(--bva-t-header-m);
	text-transform: uppercase;
	margin: 0;
}
.v3 .larticle-band__subtitle {
	font: var(--bva-t-paragraphe);
	margin: 0;
}
.v3 .larticle-band__cta { margin-top: 8px; }

/* --- Journal — related articles, reuses the shared .posts block --- */
.v3 .larticle .posts { margin: 0; padding-top: 100px; }

/* ------------------------------------------------------------ *\
	Responsive
\* ------------------------------------------------------------ */

/* Tablet: the reviews two-column grid collapses early so the image keeps
   enough room before the mobile breakpoint. */
@media (max-width: 1024px) {
	.v3 .larticle-reviews__grid { grid-template-columns: 1fr; gap: 40px; }
	/* Single-column: drop the right-edge bleed, photo sits inside the gutter. */
	.v3 .larticle-reviews__media-inner { position: static; aspect-ratio: 16 / 10; width: 100%; border-radius: 4px; }
}

@media (max-width: 835px) {
	/* Catalog: clear the fixed header, then a tighter section rhythm. */
	.v3 .larticle-catalog { padding-top: 96px; }
	.v3 .larticle-catalog__head { margin-bottom: 24px; }

	/* Chips scroll on a single row instead of wrapping. */
	.v3 .larticle-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		margin-bottom: 32px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.v3 .larticle-chips::-webkit-scrollbar { display: none; }
	.v3 .larticle-chips__chip { flex: 0 0 auto; white-space: nowrap; }

	/* The shared .featured grid becomes a swipe carousel at this width
	   (base.css); on a full catalog listing we keep it stacked instead. */
	.v3 .larticle-catalog .featured { padding-bottom: 0; }
	.v3 .larticle-catalog .products {
		flex-wrap: wrap;
		overflow: visible;
		scroll-snap-type: none;
		gap: 24px;
		padding-bottom: 0;
	}
	.v3 .larticle-catalog .product { width: 100%; flex: 0 0 100%; }
	/* Catalog wraps into a stacked list (not a peek slider) → no switcher. */
	.v3 .larticle-catalog .v3-dots { display: none; }

	/* Reviews: single column, image below. (Review meta sits last in the
	   markup, so it already renders at the bottom of each card.) */
	.v3 .larticle-reviews { padding-top: 80px; }
	.v3 .larticle-reviews__note { margin-bottom: 32px; }
	.v3 .larticle-reviews__media-inner { aspect-ratio: 351 / 400; }

	/* Image band. */
	.v3 .larticle-band { padding: 80px 16px 0; }
	.v3 .larticle-band__inner { min-height: 420px; padding: 32px 24px; }

	/* Journal teaser: tighter top. The dash switcher is now centralized
	   (.v3-dots, base.css) — the round-dot override that lived here is gone. */
	.v3 .larticle .posts { padding-top: 80px; }
}

/* Phones: scale the type tokens down (scoped to .larticle so only the
   larticle-* elements shift; shared blocks keep their own sizes). */
@media (max-width: 560px) {
	.v3 .larticle {
		--bva-t-header-xl: 500 36px/1.1 var(--bva-font-sans);
		--bva-t-header-l: 400 24px/1.12 var(--bva-font-sans);
		--bva-t-header-m: 400 20px/1.2 var(--bva-font-sans);
		--bva-t-header-s: 500 18px/1.2 var(--bva-font-sans);
		--bva-t-paragraphe: 300 15px/1.32 var(--bva-font-sans);
		/* --bva-t-label stays 14px: it drives the filter chips, kept legible
		   and at maquette size. */
	}
}