/**
 * PX Banner - Static CSS
 *
 * Image banner with overlay gradient, two-column layout (content + slot).
 * Three sizes: Volledig (L), Container (M), Smal (S).
 * Content position flips via modifier classes.
 */

/* ==========================================================================
   Section wrapper (inherits px-section-bg for top/bottom backgrounds)
   ========================================================================== */

.px-banner {
	padding-block: var(--space-d3);
}

.px-banner__bg-wrap {
	padding: var(--space-d3) 0;
}

@media (max-width: 767px) {
	.px-banner {
		padding-block: var(--space-d2);
	}

	.px-banner__bg-wrap {
		padding: var(--space-d2) 0;
	}
}

/* ==========================================================================
   Container (centered, max-width)
   ========================================================================== */

/* Container and Smal share the same pattern:
   clipping + border-radius on the container so the image fills
   behind the padding (same approach as --l uses on the section). */
.px-banner--m .px-banner__container,
.px-banner--s .px-banner__container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-elevated);
	isolation: isolate;
}

/* Container size: same width as standard row */
.px-banner--m .px-banner__container {
	max-width: var(--row-width);
}

/* Smal: same width as intro text (10/12) */
.px-banner--s .px-banner__container {
	max-width: var(--row-width-narrow);
}

/* Card becomes static so image fills the container */
.px-banner--m .px-banner__card,
.px-banner--s .px-banner__card {
	position: static;
	overflow: visible;
}

/* ==========================================================================
   Banner card — the image + overlay container
   ========================================================================== */

.px-banner__card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Full-width: edge to edge, positioning context on section.
   Beeld vult de sectie inclusief padding, dus de afstand komt hier van margin. */
.px-banner--l {
	--px-section-gutter-start: 0;
	--px-section-gutter-end: 0;

	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: 0;
	margin: var(--space-d3) 0;
}

@media (max-width: 767px) {
	.px-banner--l {
		margin: var(--space-d2) 0;
	}
}

/* When wrapped in section-bg: wrapper takes over spacing */
.px-banner__bg-wrap + .px-banner,
.px-banner__bg-wrap .px-banner {
	margin: 0;
	padding-block: 0;
}

.px-banner--l .px-banner__card {
	position: static;
	overflow: visible;
}

.px-banner--l .px-banner__container {
	max-width: none;
	width: 100%;
}

.px-banner--l .px-banner__columns {
	max-width: var(--row-width);
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Background image
   ========================================================================== */

.px-banner__image {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.px-banner__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Desktop / mobile image toggle */
.px-banner__img--mobile {
	display: none;
}

@media (max-width: 767px) {
	.px-banner__img--desktop {
		display: none;
	}

	.px-banner__img--mobile {
		display: block;
	}
}

/* ==========================================================================
   Overlay gradient
   ========================================================================== */

.px-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		270deg,
		rgba(16, 80, 112, 0) 24.11%,
		rgba(16, 80, 112, 0.45) 69.52%
	);
}

/* Flip overlay when content is on the right */
.px-banner--content-right .px-banner__overlay {
	background: linear-gradient(
		90deg,
		rgba(16, 80, 112, 0) 24.11%,
		rgba(16, 80, 112, 0.45) 69.52%
	);
}

/* ==========================================================================
   Two-column grid (content + slot)
   ========================================================================== */

.px-banner__columns {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 28rem;
}

.px-banner__container {
	padding: calc(var(--space-d3) * 2) var(--space-d3);
}

/* Content column */
.px-banner__col--content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-d2);
}

/* Content moves to column 2 when on the right (column 1 stays empty) */
.px-banner--content-right .px-banner__col--content {
	grid-column: 2;
}

/* ==========================================================================
   Content styling (heading + button on dark overlay)
   ========================================================================== */

.px-banner__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-d15);

	max-width: 43.125rem; /* 690px */
}

/* White text on dark overlay */
.px-banner__content .heading {
	color: var(--white);
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45);
}

/* White divider bar */
.px-banner__content .heading__divider::before {
	background-color: var(--white);
}

/* Remove quote vertical margin when inside banner */
.px-banner__content .px-quote__figure--white {
	margin: 0;
}

/* ==========================================================================
   Size-specific heights
   ========================================================================== */

/* Full-width — tallest. Height on section (overflow:hidden clips).
   620px max, fluid down to 288px on small viewports. */
.px-banner--l {
	min-height: clamp(18rem, calc(0.33034 * (100vw - 23.4375rem) + 18rem), 38.75rem);
}

.px-banner--l .px-banner__columns {
	min-height: 100%;
}

/* Container — medium */
.px-banner--m .px-banner__columns {
	min-height: 28rem;
}

/* Smal — smaller */
.px-banner--s .px-banner__columns {
	min-height: 24rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 992px) {
	.px-banner__container {
		padding: calc(var(--space-d2) * 2) var(--space-d2);
	}

	.px-banner__columns {
		min-height: 24rem;
	}

	.px-banner--m .px-banner__columns,
	.px-banner--s .px-banner__columns {
		min-height: 22rem;
	}
}

@media (max-width: 767px) {
	.px-banner__container {
		padding: calc(var(--space-d2) * 2) var(--space-d1);
	}

	.px-banner__columns {
		grid-template-columns: 1fr;
		min-height: 20rem;
		gap: var(--space-d15);
	}

	/* Content aligned to bottom on mobile */
	.px-banner__col--content {
		justify-content: flex-end;
	}

	/* Title size h3 on mobile */
	.px-banner__content .px-heading {
		font-size: var(--text-d2);
		line-height: var(--lh-snug);
	}

	.px-banner--m .px-banner__columns,
	.px-banner--s .px-banner__columns {
		min-height: 18rem;
	}

	/* On mobile, reset grid-column for single-column layout */
	.px-banner--content-right .px-banner__col--content {
		grid-column: auto;
	}

	/* Same gradient on mobile (top to bottom for stacked layout) */
	.px-banner__overlay,
	.px-banner--content-right .px-banner__overlay {
		background: linear-gradient(
			180deg,
			rgba(16, 80, 112, 0.45) 0%,
			rgba(16, 80, 112, 0) 60%
		);
	}

}

/* ==========================================================================
   BB edit mode — ensure editor overlay is visible
   ========================================================================== */

.fl-builder-edit .px-banner--l {
	overflow: visible;
}

.fl-builder-edit .px-banner--m .px-banner__container,
.fl-builder-edit .px-banner--s .px-banner__container {
	overflow: visible;
}

/* ==========================================================================
   Placeholder text (editor state when no image)
   ========================================================================== */

.px-banner__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 20rem;
	font-family: var(--font-display);
	font-size: var(--text-body);
	color: var(--gray-mid);
	background-color: var(--sand-light);
	border-radius: var(--radius-m);
}