/**
 * Introduction Module
 * Two-column layout: sub-header + heading (top), body + CTA (bottom), image.
 */

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

.introduction-module {
	overflow: hidden;
	padding: 50px 0px;
}

/* ===========================
   # Row & column setup
   Bootstrap gutter removed — spacing handled on the content inner div.
=========================== */

/*.intro__row {
	--bs-gutter-x: 3rem;
}*/

.intro__content-col {
	display:       flex;
	padding-left:  0;
	padding-right: 0;
}

.intro__image-col {
	padding-left:  0;
	padding-right: 0;
}

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

.intro__content {
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	width:           100%;
	padding:         10px 45px 10px 40px; /* top | right gap-to-image | bottom | left breathing */
	border-left:     1.5px solid var(--nec-grey20, #ebeced);
	min-height:      560px;
	gap:             48px;
}

/* Flipped: image left, content right */
.introduction-module--flipped .intro__content-col {
	order: 2;
}

.introduction-module--flipped .intro__image-col {
	order: 1;
}

.introduction-module--flipped .intro__content {
	padding:      80px 40px 80px 45px; /* top | right breathing | bottom | left gap-from-image */
	border-left:  none;
	border-right: 1.5px solid var(--nec-grey20, #ebeced);
}

/* ===========================
   # Top group
=========================== */

.intro__top {
	display:        flex;
	flex-direction: column;
	gap:            20px;
}

/* Content directly below heading — intro__bottom sits under intro__top (the existing 48px flex gap) instead of pinning to the column's bottom */
.introduction-module--content-top .intro__content {
	justify-content: flex-start;
}

/* Sub-header */
.intro__sub-header {
	display:     flex;
	align-items: center;
	gap:         12px;
}

/* Orange dot with outer semi-transparent ring */
.intro__dot {
	display:       block;
	width:         10px;
	height:        10px;
	border-radius: 50%;
	background:    var(--nec-orange);
	box-shadow:    0 0 0 5px rgba(235, 110, 0, 0.18);
	flex-shrink:   0;
}

.intro__sub-header-text {
	font-size:      clamp(0.8125rem, calc(0.769rem + 0.188vw), 0.9375rem);
	line-height:    1;
	font-weight:    400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--nec-grey);
}

/* Heading */
.intro__heading {
	margin: 0;
	color:  var(--nec-grey);
}

/* ===========================
   # Bottom group
=========================== */

.intro__bottom {
	display:        flex;
	flex-direction: column;
	gap:            28px;
}

.intro__body {
	color: var(--nec-grey);
}

.intro__body p:last-child {
	margin-bottom: 0;
}

/* ===========================
   # CTA — shared styles (link and video)
=========================== */

.intro__cta {
	display:         inline-flex;
	align-items:     center;
	gap:             12px;
	background:      none;
	border:          none;
	padding:         0;
	cursor:          pointer;
	color:           var(--nec-grey);
	font-family:     var(--nec-font);
	font-size:       clamp(0.9375rem, calc(0.894rem + 0.188vw), 1.0625rem);
	font-weight:     400;
	text-decoration: none;
	transition:      color 0.2s ease;
	text-align:      left;
}

.intro__cta:hover,
.intro__cta:focus-visible {
	color:           var(--nec-grey);
	outline:         none;
	text-decoration: none;
}

.intro__cta-icon {
	display:     flex;
	align-items: center;
	flex-shrink: 0;
	transition:  transform 0.25s ease;
}

.intro__cta:hover .intro__cta-icon,
.intro__cta:focus-visible .intro__cta-icon {
	transform: translateX(5px);
}

.intro__cta-icon svg {
	width:  34px;
	height: 34px;
	color:  var(--nec-orange);
}

/* ===========================
   # Image column
=========================== */

.intro__image-wrap {
	height:     100%;
	min-height: 480px;
	overflow:   hidden;
}

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

/* Uncropped variant — natural aspect ratio, no cover crop */
.intro__image--natural {
	height:     auto;
	object-fit: initial;
}

/* ===========================
   # Video modal
=========================== */

.rh-video-modal {
	position:        fixed;
	inset:           0;
	z-index:         9999;
	display:         flex;
	align-items:     center;
	justify-content: center;
	opacity:         0;
	visibility:      hidden;
	pointer-events:  none;
	transition:      opacity 0.25s ease, visibility 0.25s ease;
}

.rh-video-modal.is-open {
	opacity:        1;
	visibility:     visible;
	pointer-events: auto;
}

.rh-video-modal__overlay {
	position:   absolute;
	inset:      0;
	background: rgba(0, 0, 0, 0.85);
	cursor:     pointer;
}

.rh-video-modal__inner {
	position:  relative;
	z-index:   1;
	width:     92%;
	max-width: 1000px;
}

.rh-video-modal__close {
	position:        absolute;
	top:             -46px;
	right:           0;
	width:           36px;
	height:          36px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      none;
	border:          none;
	cursor:          pointer;
	color:           #fff;
	padding:         0;
	transition:      opacity 0.2s ease;
}

.rh-video-modal__close:hover,
.rh-video-modal__close:focus-visible {
	opacity: 0.7;
	outline: none;
}

.rh-video-modal__close svg {
	width:  22px;
	height: 22px;
}

.rh-video-modal__frame-wrap {
	position:       relative;
	padding-bottom: 56.25%;
	height:         0;
	overflow:       hidden;
	background:     #000;
}

.rh-video-modal__frame {
	position: absolute;
	inset:    0;
	width:    100%;
	height:   100%;
	border:   0;
}

body.rh-modal-open {
	overflow: hidden;
}

/* ===========================
   # Responsive — large desktop
=========================== */

@media (max-width: 1280px) {
	.intro__content {
		padding: 70px 40px 70px 32px;
	}

	.introduction-module--flipped .intro__content {
		padding: 70px 32px 70px 40px;
	}
}

/* ===========================
   # Responsive — tablet / mobile
=========================== */

@media (max-width: 991px) {
	/* Force content above image regardless of layout toggle */
	.intro__content-col,
	.introduction-module--flipped .intro__content-col {
		order: 1;
	}

	.intro__image-col,
	.introduction-module--flipped .intro__image-col {
		order: 2;
	}

	/* Drop the side/top border entirely when stacked */
	.intro__content,
	.introduction-module--flipped .intro__content {
		padding:      48px 30px;
		border:       none;
		min-height:   0;
		gap:          36px;
	}

	.intro__image-wrap {
		min-height: 320px;
	}

	.introduction-module {padding: 25px 0px;}
	.intro__image-col {padding-left: 30px;padding-right: 30px;}

}

@media (max-width: 599px) {
	.intro__content,
	.introduction-module--flipped .intro__content {
		padding: 36px 20px;
		gap:     28px;
	}

	.intro__image-wrap {
		min-height: 240px;
	}

	.rh-video-modal__inner {
		width: 96%;
	}

	.rh-video-modal__close {
		top: -40px;
	}
}