/**
 * Explore Module
 * Desktop: horizontal accordion. Mobile: full-width vertical slider.
 */

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

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

/* ===========================
   # Header
=========================== */

.explore__header {
	padding-top:    0px;
	padding-bottom: 32px;
}

.explore__sub-header {
	display:     flex;
	align-items: center;
	gap:         12px;
	margin-bottom: 16px;
}

.explore__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;
}

.explore__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);
}

.explore__heading {
	margin: 0;
	color:  var(--nec-grey);
}

/* ===========================
   # Accordion (desktop)
=========================== */

.explore__accordion-wrap {
	width: 100%;
}

.explore__accordion {
	display:  flex;
	height:   580px;
	overflow: hidden;
}

/* Each item */
.explore__item {
	position:   relative;
	flex:       0 0 90px;
	overflow:   hidden;
	background: #fff; /* prevents a flash-through to whatever sits behind the module while the panel is still fading/sliding in */
	transition: flex-basis 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.explore__item.is-active {
	flex: 1;
}

/* ===========================
   # Tab strip (closed, desktop)
=========================== */

.explore__tab-btn {
	position:        absolute;
	inset:           0;
	width:           100%;
	height:          100%;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: space-between;
	padding:         32px 0 28px;
	background:      #fff;
	border:          none;
	border-right:    1px solid var(--nec-light-grey);
	cursor:          pointer;
	transition:      opacity 0.25s, background 0.25s;
	opacity:         1;
	pointer-events:  auto;
	z-index:         2;
	min-width:       90px;
}

.explore__tab-btn:hover {
	background: var(--nec-light-grey);
}

.explore__item.is-active .explore__tab-btn {
	opacity:        0;
	pointer-events: none;
}

/* Tab: icon (grey) */
.explore__tab-icon img {
	width:        60px;
	height:       60px;
	object-fit:   contain;
	filter:       brightness(0) opacity(0.35); /* renders grey on white */
}

/* Tab: title — vertical text, bottom-aligned */
.explore__tab-title {
	writing-mode:    vertical-lr;
	transform:       rotate(0deg);
	font-size:       17px;
	font-weight:     500;
	color:           var(--nec-grey);
	letter-spacing:  0.03em;
	white-space:     nowrap;
	flex:            1;
	display:         flex;
	align-items:     center;
	justify-content: flex-end;
	margin:          16px 0;
}

/* Tab: arrow — points toward the open panel */
.explore__tab-arrow svg {
	width:      34px;
	height:     34px;
	color:      var(--nec-orange);
	transition: transform 0.3s ease;
}

/* Tabs to the left of the open panel: mirror to point right instead */
.explore__item--flip-arrow .explore__tab-arrow svg {
	transform: scaleX(-1);
}

/* ===========================
   # Expanded panel (open)
=========================== */

.explore__panel {
	position:       absolute;
	inset:          0;
	display:        flex;
	opacity:        0;
	transform:      translateX(40px);
	transition:     opacity 0.45s ease, transform 0.45s ease;
	pointer-events: none;
	z-index:        1;
}

.explore__item.is-active .explore__panel {
	opacity:        1;
	transform:      translateX(0);
	pointer-events: auto;
	transition:     opacity 0.45s 0.15s ease, transform 0.45s 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Orange content half */
.explore__panel-content {
	flex:            0 0 50%;
	background:      var(--nec-orange);
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	padding:         40px;
	overflow:        hidden;
}

/* Panel: icon (white on orange) */
.explore__panel-icon img {
	width:      60px;
	height:     60px;
	object-fit: contain;
	filter:     brightness(0) invert(1); /* forces white regardless of source colour */
}

/* Bottom content group */
.explore__panel-bottom {
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

.explore__panel-title {
	display:     block;
	font-size:   19px;
	font-weight: 500;
	color:       #fff;
	font-family: var(--nec-font);
}

.explore__panel-body {
	color: rgba(255, 255, 255, 0.92);
}

.explore__panel-body p {
	margin: 0;
	line-height: 1.65;
	color:var(--white);
}

.explore__panel-body p + p {
	margin-top: 12px;
}

/* CTA link */
.explore__panel-cta {
	display:         inline-flex;
	align-items:     center;
	gap:             12px;
	color:           #fff;
	font-family:     var(--nec-font);
	font-size:       clamp(0.9375rem, calc(0.894rem + 0.188vw), 1.0625rem);
	font-weight:     500;
	text-decoration: none;
	transition:      color 0.2s ease;
	width:           fit-content;
}

.explore__panel-cta:hover,
.explore__panel-cta:focus-visible {
	color:           #fff;
	text-decoration: none;
	outline:         none;
}

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

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

.explore__panel-cta-icon svg {
	width:  34px;
	height: 34px;
	color:  #fff;
}

/* Image half */
.explore__panel-image {
	flex:     0 0 50%;
	overflow: hidden;
}

.explore__panel-img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	margin-left: -2px;
}

/* ===========================
   # Mobile nav (hidden desktop)
=========================== */

.explore__mobile-nav {
	display: none;
}

/* ===========================
   # Responsive — 1280px
=========================== */

@media (max-width: 1280px) {
	.explore__header {
		padding-top:    64px;
		padding-bottom: 24px;
	}

	.explore__accordion {
		height: 520px;
	}

	.explore__panel-content {
		padding: 32px;
	}
}

/* ===========================
   # Responsive — 991px (mobile breakpoint)
   Switches from accordion to vertical slider
=========================== */

@media (max-width: 991px) {

	.explore__header {
		padding-top: 48px;
	}

	/* Accordion becomes a single-item display */
	.explore__accordion {
		display: block;
		height:  auto;
		overflow: visible;
	}

	/* Hide all items; JS shows only the active one */
	.explore__item {
		display: none;
		flex:    unset;
	}

	.explore__item.is-active {
		display: block;
	}

	/* Tab strips hidden on mobile */
	.explore__tab-btn {
		display: none;
	}

	/* Panel always visible on mobile — overrides desktop absolute/opacity */
	.explore__panel {
		position:       relative;
		inset:          auto;
		opacity:        1 !important;
		pointer-events: auto !important;
		transition:     none;
		flex-direction: column; /* stack: orange top, image below */
		z-index:        auto;
	}

	/* Orange content: auto height, full width */
	.explore__panel-content {
		flex:    0 0 auto;
		padding: 36px 24px;
	}

	/* Image: fixed height below orange panel */
	.explore__panel-image {
		flex:   0 0 auto;
		height: 280px;
	}

	/* Mobile nav: visible */
	.explore__mobile-nav {
		display:         flex;
		align-items:     center;
		justify-content: space-between;
		padding:         20px 24px;
		gap:             16px;
	}

	/* Prev/Next buttons */
	.explore__mobile-btn {
		background:   none;
		border:       none;
		padding:      0;
		cursor:       pointer;
		flex-shrink:  0;
		line-height:  0;
		transition:   opacity 0.2s;
	}

	.explore__mobile-btn:disabled {
		opacity: 0.35;
		cursor:  default;
	}

	.explore__mobile-btn svg {
		width:  36px;
		height: 36px;
		color:  var(--nec-grey20);
		transition: transform 0.2s ease;
	}
	.explore__mobile-btn:hover svg,
	.explore__mobile-btn--next svg {
		color: var(--nec-orange);
	}

	.explore__mobile-btn--prev:hover svg,
	.explore__mobile-btn--prev:focus-visible svg {
		transform: translateX(-5px);
	}

	.explore__mobile-btn--next:hover svg,
	.explore__mobile-btn--next:focus-visible svg {
		transform: translateX(5px);
	}

	/* Progress dots */
	.explore__mobile-progress {
		display:         flex;
		align-items:     center;
		gap:             6px;
		flex:            1;
	}

	.explore__mobile-dot {
		display:          block;
		flex:             1;
		height:           2px;
		border-radius:    1px;
		background:       var(--nec-light-grey);
		transition:       background 0.3s;
		cursor:           pointer;
	}

	.explore__mobile-dot.is-active {
		background: var(--nec-orange);
	}
}

/* ===========================
   # Responsive — 599px
=========================== */

@media (max-width: 992px) {
	.explore__panel-bottom {
		padding-top: 40px;
	}
}

@media (max-width: 599px) {
	.explore__header {
		padding-top:    36px;
		padding-bottom: 20px;
	}

	.explore__panel-content {
		padding: 28px 20px;
	}

	.explore__panel-image {
		height: 240px;
	}

	.explore__mobile-nav {
		padding: 16px 20px;
	}
}