/* ------------------------------------------------------------ *\
	Biovancia v3 — Home page sections (split out of base.css).
	Home-only: .intro / .demo / .categories / .videos / .testimonials / .banner.
	Enqueued only on templates/home-v3.php (includes/v3-home-assets.php),
	after base.css + tokens.css so the cascade is identical.
\* ------------------------------------------------------------ */

/* --- intro --- */
.intro {
	position: relative;

	.intro__inner {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;

		.intro__head {
			width: 50%;
			padding-bottom: 46.6%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;

			anchor-name: --menu-button;
		}

		.intro__body {
			width: 50%;
			padding-bottom: 46.6%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
	}

	.intro__container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: end;

		.shell {
			width: 100%;
		}

		.intro__content {
			width: 50%;
			padding: 40px 0;
			margin: 0;

			h3 {
				color: var(--bva-white);
				font-family: Geist;
				font-size: 28px;
				font-style: normal;
				font-weight: 500;
				line-height: 130%; /* 36.4px */
				margin-bottom: 24px;
			}

			p {
				max-width: 506px;
				color: var(--bva-white);
				font-family: Geist;
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				line-height: 132%; /* 23.76px */
				margin-bottom: 0;

				& ~ p {
					margin-top: 12px;
				}
			}

			.intro__action {
				margin-top: 24px;
			}
		}
	}
}

@media (max-width: 835px) {
	.intro {
		.intro__inner {
			flex-wrap: wrap;

			.intro__head,
			.intro__body {
				width: 100%;
				padding-bottom: 105%;
			}
		}

		.intro__container {
			.intro__inner {
				display: flex;
				flex-direction: column-reverse;

				.intro__content {
					width: 100%;
					padding: 34px 0;

					h3 {
						font-size: 24px;
						font-style: normal;
						font-weight: 500;
						line-height: 112%;
						margin-bottom: 12px;
					}

					p {
						font-size: 15px;
						font-style: normal;
						font-weight: 400;
						line-height: 132%; /* 19.8px */
					}
				}
			}
		}
	}
}

/* .btn / .btn--product moved to base.css (shared component, loaded on every v3
   view). The home keeps only its contextual overrides (e.g. .banner__action .btn). */

/* ------------------------------------------------------------ *\
	Featured
\* ------------------------------------------------------------ */

/* .featured / .featured__head moved to base.css (shared component — every v3 view
   that renders featured-products needs the section head, not just the home). */

/* .products grid moved to base.css (shared by every v3 view that uses the card). */

/* --- demo / categories / videos / testimonials --- */
.demo {
	position: relative;

	.demo__image {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 50%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		z-index: -1;
	}

	.demo__inner {
		display: flex;
		justify-content: center;
		align-items: stretch;
	}

	.demo__content {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: end;
		width: 50%;
		padding: 40px 40px 40px 0;

		p {
			max-width: 500px;
			color: var(--bva-white);
			font-family: Geist;
			font-size: 28px;
			font-style: normal;
			font-weight: 500;
			line-height: 130%; /* 36.4px */
			margin-bottom: 32px;
		}
	}

	.demo__product {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 114px 40px;
		border-top: 1px solid rgba(0, 0, 0, 0.12);
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);

		.product {
			width: auto;
			max-width: 330px;
		}
	}

	.demo__sign {
		position: absolute;
		right: 40px;
		bottom: 40px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 2px;
		text-align: right;
		color: var(--bva-white);
		text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
		pointer-events: none;

		.demo__sign-name {
			font-family: Geist;
			font-size: 18px;
			font-weight: 500;
			line-height: 1.3;
		}

		.demo__sign-role {
			font-family: Geist;
			font-size: 14px;
			font-weight: 400;
			line-height: 1.3;
			opacity: 0.85;
		}
	}
}

@media (max-width: 835px) {
	.demo {
		flex-direction: column;

		.demo__inner {
			flex-direction: column;
		}

		.demo__product,
		.demo__content,
		.demo__image {
			width: 100%;
		}

		.demo__content {
			min-height: 480px;
			anchor-name: --demo-image;

			p {
				color: var(--White, var(--bva-white));
				/* Mobile/Header L */
				font-family: Geist;
				font-size: 24px;
				font-style: normal;
				font-weight: 500;
				line-height: 112%; /* 26.88px */
				margin-bottom: 24px;
			}
		}

		.demo__sign {
			/* Keep the expert signature bottom-right on mobile too (inherits the
			   desktop position:absolute; just tighten the offsets). */
			right: 24px;
			bottom: 24px;

			.demo__sign-role {
				font-size: 10px;
			}
		}

		.demo__product {
			padding: 40px 0;

			.product {
				width: 100% !important;
				flex: 0 0 100% !important;

				.product__name {
					a {
						font-size: 18px;
					}

					p.product__info {
						font-size: 15px;
					}
				}
			}
		}
	}
	.demo__image {
		position-anchor: --demo-image;
		top: anchor(top) !important;
		bottom: anchor(bottom) !important;
	}
}

.categories-section {
	padding: 132px 0;

	.categories__inner {
		display: flex;
		justify-content: space-between;
		align-items: stretch;

		.categories__left,
		.categories__right {
			width: 50%;
		}

		.categories__left {
			p {
				max-width: 215px;
				color: var(--bva-black);
				font-family: Geist;
				font-size: 28px;
				font-style: normal;
				font-weight: 500;
				line-height: 130%; /* 36.4px */
			}
		}

		.categories__right {
			ul {
				padding: 0;
				list-style-type: none;

				li {
					padding-bottom: 16px;
					border-bottom: 1px solid #00000025;

					& ~ li {
						margin-top: 16px;
					}
				}

				a {
					color: var(--bva-black);
					font-family: Geist;
					font-size: 28px;
					font-style: normal;
					font-weight: 500;
					line-height: 130%; /* 36.4px */
					text-decoration: none;
					transition: all 0.4s;

					&:hover {
						opacity: 0.8;
					}
				}
			}
		}
	}
}

@media (max-width: 835px) {
	.categories-section {
		padding: 80px 0;

		.categories__inner {
			flex-direction: column;

			.categories__left,
			.categories__right {
				width: 100%;
			}

			.categories__left {
				p {
					max-width: none;
					font-size: 24px;
					margin-bottom: 40px;
				}
			}

			.categories__right {
				ul {
					a {
						font-size: 24px;
					}
				}
			}
		}
	}
}

.videos {
	padding-bottom: 132px;

	.videos__head {
		margin-bottom: 56px;

		h3 {
			color: var(--bva-black);
			text-align: center;
			font-family: Geist;
			font-size: 28px;
			font-style: normal;
			font-weight: 500;
			line-height: 130%; /* 36.4px */
			margin-bottom: 8px;
		}

		p {
			color: rgba(21, 20, 18, 0.6);
			text-align: center;
			font-family: Geist;
			font-size: 18px;
			font-style: normal;
			font-weight: 400;
			line-height: 132%; /* 23.76px */
			margin-bottom: 0;
		}
	}

	.videos__body {
		display: flex;
		justify-content: start;
		gap: 16px;

		.video-wrapper {
			overflow: hidden;
			width: calc(25% - 12px);
			border-radius: 4px;
		}
	}
}

@media (max-width: 835px) {
	.videos {
		padding-bottom: 65px;

		.videos__head {
			margin-bottom: 24px;

			h3 {
				font-size: 24px;
				margin-bottom: 8px;
			}

			p {
				font-size: 15px;
			}
		}
	}

	.videos__body {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		gap: 20px;
		padding-bottom: 50px; /* Space for pagination dots */
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
	}

	.videos__body::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Edge */
	}

	.video-wrapper {
		width: calc(82% - 10px); /* Shows ~1.2 products (you can adjust) */
		flex: 0 0 calc(82% - 10px);
		scroll-snap-align: start;
	}

	/* Video slider switcher uses the centralized .v3-dots (base.css). */
}

.testimonials {
	position: relative;
	min-height: 900px;
	margin-bottom: 132px;

	.testimonials__inner {
		display: flex;
		justify-content: space-between;
		align-items: start;

		.testimonials__right,
		.testimonials__left {
			width: 50%;
			padding-right: 24px;
		}
	}

	.testimonial__image {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 50%;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.testimonials__title,
	.testimonials__list {
		max-width: 578px;
	}

	.testimonials__title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 56px;

		p {
			width: 185px;
			min-width: 185px;
			color: var(--bva-black);
			font-family: Geist;
			font-size: 28px;
			font-style: normal;
			font-weight: 500;
			line-height: 130%; /* 36.4px */
			margin-bottom: 0;

			&:last-child {
				width: 321px;
				font-size: 18px;
				font-weight: 400;
				line-height: 132%; /* 23.76px */
			}
		}
	}

	.testimonial {
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #0000001f;
		padding-top: 24px;

		& ~ .testimonial {
			margin-top: 56px;
		}

		.testimonial__meta {
			span {
				display: block;
				color: var(--bva-black);
				font-family: 'Geist Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 110%; /* 15.4px */
				text-transform: uppercase;
			}
		}

		.testimonial__content {
			width: 321px;

			.stars {
				svg {
					height: 10px;
					width: auto;
				}
			}

			.testimonial__title {
				color: var(--bva-black);
				font-family: Geist;
				font-size: 20px;
				font-style: normal;
				font-weight: 600;
				line-height: 120%; /* 24px */
				margin-top: 12px;
				margin-bottom: 24px;
			}

			p {
				color: rgba(28, 26, 23, 0.6);
				font-family: Geist;
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				line-height: 132%; /* 23.76px */
				margin-bottom: 0;
			}
		}
	}
}

@media (max-width: 835px) {
	.testimonials {
		margin-bottom: 24px;
		min-height: 0;

		.testimonial__image {
			display: none;
		}

		.testimonials__inner {
			width: 100%;

			.testimonials__title {
				flex-direction: column;
				align-items: start;
				margin-top: 4px;
				margin-bottom: 25px;

				p {
					max-width: none;
					width: 100%;
					font-size: 24px;
					margin-bottom: 14px;

					&:last-child {
						font-size: 15px;
					}
				}

				.testimonials__list {
					max-width: none;
				}
			}

			.testimonials__left {
				width: 100%;
				padding-right: 0;

				.testimonials__title,
				.testimonials__list {
					max-width: none;
				}
			}

			.testimonials__right {
				display: none;
			}
		}

		.testimonial {
			padding-top: 8px;
			flex-direction: column-reverse;

			.testimonial__meta {
				margin-top: 24px;
			}

			.testimonial__content {
				width: 100%;

				p {
					color: rgba(28, 26, 23, 0.6);
					/* Mobile/Paragraphe */
					font-family: Geist;
					font-size: 15px;
					font-style: normal;
					font-weight: 400;
					line-height: 132%; /* 19.8px */
				}
			}
		}
	}
}

/* Testimonials list — "Lire plus" + pagination. Controls mirror the PDP reviews
   component (.pdp-page / .pdp-review-item__more in product.css) 1:1 so the home
   reads identically; kept here since product.css isn't loaded on the home. */
.testimonial__more {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Paginated-away cards. The author rule `.testimonials .testimonial { display: flex }`
   outranks the UA `[hidden] { display: none }`, so restate it (as the PDP does for
   .pdp-review-item[hidden]) — else JS-hidden items stay visible. */
.testimonials .testimonial[hidden] { display: none; }

.testimonials__pagination {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 56px;
}
.testimonials__pagination[hidden] { display: none; }

.testimonials__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 2px;
	background: none;
	font: var(--bva-t-label);
	text-transform: uppercase;
	color: var(--bva-black);
	cursor: pointer;
}
.testimonials__page.is-active { background: var(--bva-black); color: var(--bva-white); border-color: var(--bva-black); }
.testimonials__page--arrow { border: 0; }
.testimonials__page--arrow svg { width: 24px; height: 24px; display: block; }
.testimonials__page--arrow svg [stroke] { stroke: var(--bva-black); }
.testimonials__page--prev svg { transform: rotate(180deg); }
.testimonials__page[disabled] { opacity: 0.35; cursor: default; }
.testimonials__page--ellipsis { flex: 0 0 auto; width: auto; border: 0; background: none; cursor: default; }

/* --- banner --- */
.banner {
	padding: 165px 0 10px;

	.banner__inner {
		overflow: hidden;
		border-radius: 12px;
		display: flex;
		align-items: stretch;

		.banner__text {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 50%;
			padding: 40px;
			background: var(--bva-badge-bg);

			p.note {
				flex-grow: 1;
				color: var(--BLACK, var(--bva-black));
				font-family: 'Geist Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 110%; /* 15.4px */
				text-transform: uppercase;
			}

			h3 {
				color: var(--BLACK, var(--bva-black));
				font-family: Geist;
				font-size: 28px;
				font-style: normal;
				font-weight: 500;
				line-height: 130%; /* 36.4px */
				margin-bottom: 16px;
			}

			p {
				max-width: 446px;
				color: var(--BLACK, var(--bva-black));
				/* Desktop/Paragraphe */
				font-family: Geist;
				font-size: 18px;
				font-style: normal;
				font-weight: 400;
				line-height: 132%; /* 23.76px */
				margin-bottom: 16px;
			}

			.banner__action {
				margin-top: 32px;

				.btn {
					background-color: var(--bva-black);
					color: var(--bva-white);
				}
			}
		}

		.banner__image {
			width: 50%;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			padding-bottom: 38%;
		}
	}
}

@media (max-width: 835px) {
	.banner {
		padding: 40px 10px;

		.banner__inner {
			flex-direction: column-reverse;

			.banner__image,
			.banner__text {
				width: 100%;
			}

			.banner__text {
				padding: 10px;

				p {
					font-size: 15px;
				}

				h3 {
					font-size: 24px;
				}
			}
			.banner__image {
				padding-bottom: 75%;
			}
		}
	}
}

/* ------------------------------------------------------------ *\
	Figma fidelity polish (home vs maquette) — additive overrides.
\* ------------------------------------------------------------ */

/* Reviews: header rating stars sized to the maquette (≈18px, smaller than the
   "4,7" digits). The per-review stars keep their own 10px rule. */
.testimonials .testimonials__title .stars {
	/* inline-flex gives the row a real height so the half-star primitive
	   (.pdp-star-half: position:relative + fixed box) lays out as a flex item
	   instead of an inline span that collapses and floats the half star up. */
	display: inline-flex;
	align-items: center;
	gap: 2px;
	vertical-align: middle;
}
.testimonials .testimonials__title .stars svg {
	height: 18px;
	width: auto;
}

@media (max-width: 835px) {
	/* Besoins: trailing right-arrow after each category + 2-line heading wrap,
	   both per the mobile maquette (desktop has neither). */
	.categories-section .categories__inner .categories__right ul a::after {
		content: ' →';
	}

	.categories-section .categories__inner .categories__left p {
		max-width: 290px;
	}

	/* Videos: widen the next-card peek to match the maquette carousel. */
	.videos .videos__body .video-wrapper {
		width: calc(70% - 10px);
		flex: 0 0 calc(70% - 10px);
	}
}