/**
 * Page Banner Module
 * Static single-slide banner — 460px height, background image, title, subtitle, CTA row.
 */

/* ===========================
   # Section shell
=========================== */

.page-banner-module {
	position:            relative;
	height:              460px;
	overflow:            hidden;
	background-color:    var(--nec-blue, #002B62);
	background-position: center;
	background-size:     cover;
	background-repeat:   no-repeat;
	display:             flex;
	align-items:         stretch;
}

/* ===========================
   # Background video
=========================== */

.pbm__video {
	position:      absolute;
	inset:         0;
	width:         100%;
	height:        100%;
	object-fit:    cover;
	z-index:       0;
	pointer-events: none;
}

/* Background-image (set inline via style attribute) still paints behind the
   video as an instant fallback while the video file itself is loading. */

/* Save mobile bandwidth — fall back to the background image below tablet. */
@media (max-width: 767px) {
	.pbm__video {
		display: none;
	}
}

/* Respect reduced-motion preference — fall back to the background image. */
@media (prefers-reduced-motion: reduce) {
	.pbm__video {
		display: none;
	}
}

/* ===========================
   # Overlay
=========================== */

.pbm__overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		100deg,
		rgba(0, 0, 0, 0.60) 0%,
		rgba(0, 0, 0, 0.30) 60%,
		rgba(0, 0, 0, 0.05) 100%
	);
	z-index: 1;
}

/* ===========================
   # Container
=========================== */

.pbm__container {
	position:       relative;
	z-index:        2;
	display:        flex;
	align-items:    stretch;
}

/* ===========================
   # Content
=========================== */

.pbm__content {
	display:        flex;
	flex-direction: column;
	justify-content: flex-end;
	padding:        52px 0;
	max-width:      640px;
}

/* ===========================
   # Text box (video only)
=========================== */

/* Wraps the title/body in a rounded NEC Blue card when a background video
   is set, for legibility over moving footage. Not used on the image-only
   layout — CTAs stay outside it either way. */
.pbm__text-box {
	align-self:    flex-start;
	max-width:     100%;
	padding:       28px 32px;
	background:    var(--nec-blue, #1414A0);
	border-radius: var(--radius, 8px);
}

/* ===========================
   # Title
=========================== */

.pbm__title {
	color:          var(--nec-white, #fff);
	font-family:    var(--nec-font, 'Neo Sans Std', sans-serif);
	font-size:      clamp(1.75rem, calc(1.156rem + 2.535vw), 3.4375rem); /* 55px at 1440px viewport width and above */
	font-weight:    400;
	line-height:    1.15;
	letter-spacing: -0.01em;
	margin:         0;
}

/* ===========================
   # Subtitle / body
=========================== */

.pbm__body {
	color:       rgba(255, 255, 255, 0.85);
	font-family: var(--nec-font, 'Neo Sans Std', sans-serif);
	font-size:   clamp(0.875rem, calc(0.787rem + 0.376vw), 1.125rem); /* 18px at 1440px viewport width and above */
	line-height: 1.6;
	margin:      16px 0 0;
}

/* ===========================
   # CTA row
=========================== */

.pbm__ctas {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         32px;
	margin-top:  32px;
}

.pbm__cta {
	display:         inline-flex;
	align-items:     center;
	gap:             12px;
	color:           var(--nec-white, #fff);
	font-family:     var(--nec-font, 'Neo Sans Std', sans-serif);
	font-size:       clamp(0.875rem, calc(0.85rem + 0.1vw), 1rem);
	font-weight:     500;
	text-decoration: none;
}

.pbm__cta:hover,
.pbm__cta:focus-visible {
	color:           var(--nec-white, #fff);
	outline:         none;
	text-decoration: none;
}

.pbm__cta-icon {
	display:     flex;
	align-items: center;
	flex-shrink: 0;
}

.pbm__cta-icon svg {
	width:      34px;
	height:     34px;
	color:      var(--nec-white, #fff);
	transition: transform 0.2s ease;
}

/* Match the site-wide CTA pattern (e.g. .bsm__cta-arrow) — only the icon shifts right on hover */
.pbm__cta:hover .pbm__cta-icon svg,
.pbm__cta:focus-visible .pbm__cta-icon svg {
	transform: translateX(5px);
}

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

@media (max-width: 991px) {
	.page-banner-module {
		height: auto;
		min-height: 360px;
	}

	.pbm__content {
		padding: 40px 0;
	}
}

@media (max-width: 599px) {
	.pbm__content {
		padding:   36px 0;
		max-width: 100%;
	}

	.pbm__text-box {
		padding: 20px 24px;
	}

	.pbm__ctas {
		gap: 20px;
	}
}