/**
 * BPAS page blocks v2: how the source sections sit on a Bentol page.
 * The page's Elementor wrapper is the source's .bpas-wp-container (max 1320px, 24px gutters, see
 * inc/blocks-v2/register.php); each section is one Elementor container with one widget.
 * Loaded after the page type styles.
 */

/* Space before the footer comes from Bentol's section spacing (.bpas-page-area), not the source's 56px. */
.elementor.bpas-v2-doc {
	padding-top: 0;
	padding-bottom: 0;
}

/* Elementor containers around the sections add no gaps of their own. */
.e-con.bpas-v2-con {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0;
	--margin-top: 0;
	--margin-bottom: 0;
}

.e-con.bpas-v2-con > .elementor-widget {
	width: 100%;
}

/* The fixed reading progress bar and rail add no height to the page. */
.bpas-v2--rail {
	height: 0;
}

/* Bentol styles bare elements (p, a, buttons, images); inside the BPAS sections the source styles win. */
.bpas-wp-container .bpas-v2 p {
	color: inherit;
	margin-bottom: 0;
}

.bpas-wp-container .bpas-v2 a:hover {
	text-decoration: none;
}

.bpas-wp-container .bpas-v2 button {
	font-family: inherit;
}

.bpas-wp-container .bpas-v2 img {
	max-width: 100%;
	height: auto;
}

/*
 * One spacing rhythm on every v2 page (Parvathi, 21 Oct 2026): the same space between all sections,
 * between a section heading and its content, and between boxes, so no two boxes touch.
 * Values are Bentol's own: --section-space-mobile (80px) and --section-space-small-mobile (60px).
 */
.bpas-wp-container.bpas-v2-doc {
	--bpas-gap-section: var(--section-space-mobile, 80px);
	--bpas-gap-head: 30px;
	--bpas-gap-box: 25px;
	--bpas-pad-panel: 55px;
}

@media (max-width: 767px) {
	.bpas-wp-container.bpas-v2-doc {
		--bpas-gap-section: var(--section-space-small-mobile, 60px);
		--bpas-gap-box: 20px;
		--bpas-pad-panel: 30px;
	}
}

/* Between sections, from the page banner to the footer. */
.bpas-wp-container.bpas-v2-doc .bpas-v2 > :first-child:not(.bpas-fx-progress) {
	margin-top: var(--bpas-gap-section);
}

.bpas-page-area:has(.bpas-v2-doc) {
	padding-top: 0;
	padding-bottom: var(--section-space-mobile, 80px);
}

@media (max-width: 767px) {
	.bpas-page-area:has(.bpas-v2-doc) {
		padding-bottom: var(--section-space-small-mobile, 60px);
	}
}

/* Section heading to its content (".elementor-widget" outranks Elementor's figure { margin: 0 }). */
.bpas-wp-container.bpas-v2-doc .elementor-widget .bpas-v2 .bpas-center + *,
.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-related,
.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-check__note + .bpas-ck,
.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-trust__head + *,
.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-scn > .bpas-intro + * {
	margin-top: var(--bpas-gap-head);
}

/* Boxes side by side. */
.bpas-wp-container.bpas-v2-doc .bpas-v2 :is(.bpas-modgrid, .bpas-ind__grid, .bpas-dir, .bpas-phase, .bpas-roles, .bpas-guides,
	.bpas-related, .bpas-benefits, .bpas-flow, .bpas-steps, .bpas-figrow, .bpas-scn__grid, .bpas-rules, .bpas-terms, .bpas-concepts,
	.bpas-t3__list, .bpas-sv__steps, .bpas-ck, .bpas-jump, .bpas-oneline, .bpas-five__phases, .bpas-glance__grid, .bpas-audit) {
	gap: var(--bpas-gap-box);
}

.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-cluster ul {
	gap: var(--bpas-gap-box);
}

/* Boxes one under the other inside a section. */
.bpas-wp-container.bpas-v2-doc .bpas-v2 :is(
	.bpas-hero + .bpas-fig-wide,
	.bpas-modgrid + .bpas-mb,
	.bpas-ind__grid + .bpas-ind__legend,
	.bpas-acc + .bpas-phase,
	.bpas-acc__group + .bpas-acc__group,
	.bpas-acc__tools + .bpas-acc__group,
	.bpas-steps + .bpas-figrow,
	.bpas-flow + .bpas-shot,
	.bpas-scn__grid + .bpas-figrow,
	.bpas-figrow + .bpas-money-wrap,
	.bpas-money-wrap + .bpas-mb,
	.bpas-shot ~ .bpas-rules,
	.bpas-shot ~ .bpas-terms,
	.bpas-t3__from + .bpas-t3__list,
	.bpas-t3 + .bpas-ipx,
	.bpas-t3 + .bpas-ph,
	.bpas-ipx + .bpas-ph,
	.bpas-ck + .bpas-ph,
	.bpas-sv__steps + .bpas-sv__fig,
	.bpas-sv__fig + .bpas-sv__roles,
	.bpas-benefits + .bpas-creds) {
	margin-top: var(--bpas-gap-box);
}

/* Large panels: the same inner space at top and bottom. */
.bpas-wp-container.bpas-v2-doc .bpas-v2 > :is(.bpas-hero, .bpas-cta, .bpas-weekly, .bpas-trust, .bpas-scn, .bpas-check, .bpas-story) {
	padding-top: var(--bpas-pad-panel);
	padding-bottom: var(--bpas-pad-panel);
}

/* Elementor clears figure margins inside widgets; the source centres the photo under the top three. */
.bpas-wp-container.bpas-v2-doc .elementor-widget .bpas-v2 .bpas-t3 ~ .bpas-ph {
	margin-left: auto;
	margin-right: auto;
}

/* Section eyebrows carry Bentol's flower (asterisk) icon in an orange circle, as on the v1 pages (.sub-title). */
.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-eyebrow::before {
	content: "";
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--theme-color, #e3572b) url("../../../bentol/assets/images/icons/asterisk.png") no-repeat center / 13px 14px;
}

/*
 * misBoost delivery channels (Email, WhatsApp, Mobile, Inside SAP): the hover of the v1 pages on staging,
 * the device lifts 3px and its frame turns green. The source's blinking frame pauses while hovered.
 */
@media (hover: hover) {
	.bpas-wp-container.bpas-v2-doc .bpas-mb__mode {
		overflow: visible;
	}

	.bpas-wp-container.bpas-v2-doc .bpas-mb .bpas-mb__mode img {
		transition: transform 0.25s ease, border-color 0.25s ease;
	}

	.bpas-wp-container.bpas-v2-doc .bpas-mb .bpas-mb__mode:hover img {
		animation: none;
		transform: translateY(-3px);
		border-color: var(--theme-color2);
	}
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
	.bpas-wp-container.bpas-v2-doc .bpas-mb .bpas-mb__mode:hover img {
		transform: none;
	}
}

/* Words of an animated heading stay on one line (see bpas-v2.js). */
.bpas-wp-container.bpas-v2-doc .bpas-word {
	display: inline-block;
	white-space: nowrap;
}

/*
 * Stacked chart bars: a 3px gap between a segment and the one below it, so the parts read as separate boxes.
 * The gap is a transparent edge inside the upper segment, so bar heights and the capacity lines stay as drawn.
 */
.bpas-wp-container.bpas-v2-doc .bpas-v2 :is(.bpas-m2__col i + i, .bpas-cap__f, .bpas-cv__over) {
	border-bottom: 3px solid transparent;
	background-clip: padding-box;
}

/* The last accordion row adds no space under its section (its margin would leak out and widen the section gap). */
.bpas-wp-container.bpas-v2-doc .bpas-v2 .bpas-acc__item:last-child {
	margin-bottom: 0;
}
