/**
 * Insights Slider Module
 * Left panel (1/3 of container width) + horizontal card slider (bleeds to viewport right edge).
 * Desktop: 2 full cards + 45px peek of 3rd. Mobile (≤767px): panel stacks above, 1.25 cards visible.
 */

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

.insights-slider-module {
	padding:    80px 0;
	background: var(--nec-white, #fff);
	overflow:   hidden; /* clips the peeking card at the right viewport edge */
}

/* ===========================
   # Layout: panel + slider side by side
   Mirrors Bootstrap container left alignment; no right padding so slider bleeds.
=========================== */

.insights-slider-module__layout {
	display:       flex;
	align-items:   stretch;
	/* Left edge matches .container's padding-left; no padding on the right so
	   the slider area bleeds to the viewport edge. */
	padding-left:  75px;
	padding-right: 0;
}

/* ===========================
   # Left panel
=========================== */

.insights-slider-module__panel {
	flex:            0 0 calc((min(100vw, 1320px) - 48px) / 3);
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	gap:             40px;
	padding-right:   64px;
	padding-top:     8px;
	padding-bottom:  8px;
}

.insights-slider-module__panel-top {
	display:        flex;
	flex-direction: column;
	gap:            20px;
}

.insights-slider-module__panel-bottom {
	display:        flex;
	flex-direction: column;
	gap:            28px;
}

/* ===========================
   # Sub-header (dot + label — matches tabbed_module pattern)
=========================== */

.insights-slider-module__sub-header {
	display:     flex;
	align-items: center;
	gap:         12px;
}

.insights-slider-module__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;
}

.insights-slider-module__sub-header-text {
	font-family:    var(--nec-font);
	font-size:      16px;
	font-weight:    400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--nec-grey);
}

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

.insights-slider-module__heading {
	margin:      0;
	color:       var(--nec-grey);
	font-family: var(--nec-font);
	font-weight: 400;
}

/* ===========================
   # Intro content (wysiwyg, shown beneath the heading)
=========================== */

.insights-slider-module__intro {
	color:       var(--nec-grey);
	font-size:   1rem;
	line-height: 1.65;
}

.insights-slider-module__intro p {
	margin: 0 0 12px;
}

.insights-slider-module__intro p:last-child {
	margin-bottom: 0;
}

/* ===========================
   # Slider navigation arrows
=========================== */

.insights-slider-module__arrows {
	display:    flex;
	gap:        8px;
	margin-top: 4px;
}

.insights-slider-module__arrow {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           43px;
	height:          43px;
	background:      transparent;
	border:          none;
	padding:         0;
	cursor:          pointer;
	color:           var(--nec-grey);
	transition:      color 0.2s ease, opacity 0.2s ease;
}

.insights-slider-module__arrow svg {
	width:  43px;
	height: 43px;
}

.insights-slider-module__arrow,
.insights-slider-module__arrow:hover:not(:disabled),
.insights-slider-module__arrow:focus-visible:not(:disabled) {
	color:   var(--nec-orange);
	outline: none;
}

.insights-slider-module__arrow:disabled {
	color:  var(--nec-grey20);
	cursor: not-allowed;
}

/* ===========================
   # Panel CTA link
=========================== */

.insights-slider-module__panel-cta {
	display:         inline-flex;
	align-items:     center;
	gap:             12px;
	color:           var(--nec-grey);
	font-family:     var(--nec-font);
	font-weight:     500;
	text-decoration: none;
	transition:      color 0.2s ease;
}

.insights-slider-module__panel-cta:hover,
.insights-slider-module__panel-cta:focus-visible {
	color:   var(--nec-grey);
	outline: none;
}

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

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

.insights-slider-module__panel-cta-icon svg {
	width:  34px;
	height: 34px;
	color:  var(--nec-orange);
}

/* ===========================
   # Slider area (right side, bleeds to edge)
=========================== */

.insights-slider-module__slider-area {
	flex:     1;
	min-width: 0;
	display:  flex;
	flex-direction: column;
	gap:      24px;
	position: relative;
}

/* ===========================
   # Viewport (clips overflow)
=========================== */

.insights-slider-module__viewport {
	overflow: hidden;
	position: relative;
	flex:     1;
}

/* ===========================
   # Track (flex row of cards, moved by JS translateX)
=========================== */

.insights-slider-module__track {
	display:     flex;
	transition:  transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
	cursor:      grab;
	user-select: none; /* avoid text/image selection while dragging */
}

.insights-slider-module__track:active {
	cursor: grabbing;
}

/* ===========================
   # Cards (width set by JS)
=========================== */

.insights-slider-module__card {
	flex:           0 0 auto;
	/* Width calculated in JS: (sliderAreaWidth - PEEK_OFFSET) / 2 on desktop */
	/*background:     var(--nec-light-grey, #f5f5f6);*/
	display:        flex;
	flex-direction: column;
	overflow:       hidden;
	margin-right:   10px; /* gap between cards — must match CARD_GAP in the JS */
	transition:     opacity 0.3s ease;
	text-decoration: none;
	color:          inherit;
}

.insights-slider-module__card:focus-visible {
	outline:        2px solid var(--nec-orange);
	outline-offset: 2px;
}

/* The card only partially visible beyond the current view (toggled by JS) */
.insights-slider-module__card.is-peek {
	opacity: 0.5;
}

.insights-slider-module__card-image {
	overflow: hidden;
	flex-shrink: 0;
	margin-right: 60px;
}

.insights-slider-module__card-img,
.insights-slider-module__card-image img {
	display:    block;
	width:      100%;
	height:     220px;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.insights-slider-module__card:hover .insights-slider-module__card-img,
.insights-slider-module__card:hover .insights-slider-module__card-image img {
	transform: scale(1.03);
}

.insights-slider-module__card-body {
	display:        flex;
	flex-direction: column;
	gap:            16px;
	padding:        20px 0px;
	flex:           1;
	margin-right: 50px;
}

.insights-slider-module__card-title {
	margin:      0;
	font-family: var(--nec-font);
	font-size:   clamp(1rem, calc(0.96rem + 0.176vw), 1.25rem);
	font-weight: 500;
	line-height: 1.3;
	color:       var(--nec-grey);
	transition:  color 0.2s ease;
}

.insights-slider-module__card:hover .insights-slider-module__card-title,
.insights-slider-module__card:focus-visible .insights-slider-module__card-title {
	color: var(--nec-orange);
}

.insights-slider-module__card-excerpt {
	margin:      0;
	color:       var(--nec-grey);
	font-size:   0.9375rem;
	line-height: 1.65;
	flex:        1;
	/* Clamp excerpt to 4 lines */
	display:            -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

.insights-slider-module__card-cta {
	display:     inline-flex;
	align-items: center;
	gap:         10px;
	color:       var(--nec-grey);
	font-family: var(--nec-font);
	font-size:   0.9375rem;
	font-weight: 500;
	align-self:  flex-start;
}

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

.insights-slider-module__card:hover .insights-slider-module__card-cta-icon,
.insights-slider-module__card:focus-visible .insights-slider-module__card-cta-icon {
	transform: translateX(4px);
}

.insights-slider-module__card-cta-icon svg {
	width:  28px;
	height: 28px;
	color:  var(--nec-orange);
}

/* ===========================
   # Progress dash dots
=========================== */

.insights-slider-module__dots {
	display: flex;
	gap:     8px;
	padding: 0 4px;
}

.insights-slider-module__dot-btn {
	display:       block;
	width:         40px;
	height:        3px;
	padding:       0;
	border:        none;
	border-radius: 2px;
	background:    #d4d4d6;
	cursor:        pointer;
	transition:    background 0.3s ease, width 0.3s ease;
}

.insights-slider-module__dot-btn.is-active {
	background: var(--nec-orange);
	width:      56px;
}

.insights-slider-module__dot-btn:focus-visible {
	outline:        2px solid var(--nec-orange);
	outline-offset: 2px;
}

/* ===========================
   # Responsive — 1400px (matches .container's padding schedule)
=========================== */

@media (max-width: 1400px) {
	.insights-slider-module__layout {
		padding-left: 100px;
	}
}

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

@media (max-width: 1280px) {
	.insights-slider-module {
		padding: 64px 0;
	}

	.insights-slider-module__layout {
		padding-left: 60px;
	}

	.insights-slider-module__panel {
		padding-right: 48px;
		gap:           32px;
	}

	.insights-slider-module__card-img,
	.insights-slider-module__card-image img {
		height: 190px;
	}
}

/* ===========================
   # Responsive — 991px
=========================== */

@media (max-width: 991px) {
	.insights-slider-module {
		padding: 48px 0;
	}

	.insights-slider-module__layout {
		padding-left: 30px;
	}

	.insights-slider-module__panel {
		padding-right: 32px;
		gap:           24px;
	}

	.insights-slider-module__card-img,
	.insights-slider-module__card-image img {
		height: 170px;
	}

	.insights-slider-module__card-body {
		padding: 20px 20px 24px;
	}
}

/* ===========================
   # Responsive — 767px (stack: panel above, full-width slider)
=========================== */

@media (max-width: 767px) {
	.insights-slider-module {
		padding: 40px 0;
	}

	/* Stack vertically, full-width padding on both sides for the panel */
	.insights-slider-module__layout {
		flex-direction: column;
		padding-left:   16px;
		gap:            32px;
	}

	.insights-slider-module__panel {
		flex:          0 0 auto;
		width:         100%;
		padding-right: 16px; /* right padding for panel text on mobile */
		gap:           20px;
		padding-top:   0;
		padding-bottom: 0;
	}

	.insights-slider-module__panel-bottom {
		flex-direction: row;
		align-items:    center;
		flex-wrap:      wrap;
		gap:            20px;
	}

	.insights-slider-module__slider-area {
		gap: 16px;
	}

	.insights-slider-module__card-img,
	.insights-slider-module__card-image img {
		height: 180px;
	}

	/* Dots align to the left under the slider */
	.insights-slider-module__dots {
		padding: 0;
	}
}

/* ===========================
   # Mini card (Featured related list + Listing grid cells)
=========================== */

.insights-slider-module__mini-card {
	display:         flex;
	align-items:     center;
	gap:             20px;
	padding:         20px 0;
	border-bottom:   1px solid #e2e2e4;
	color:           inherit;
	text-decoration: none;
}

.insights-slider-module__mini-card:focus-visible {
	outline: 2px solid var(--nec-orange);
	outline-offset: 2px;
}

.insights-slider-module__mini-thumb {
	display:       block;
	flex-shrink:   0;
	width:         88px;
	height:        88px;
	object-fit:    cover;
	border-radius: 2px;
}

.insights-slider-module__mini-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.insights-slider-module__mini-title {
	margin:      0;
	font-family: var(--nec-font);
	font-size:   1rem;
	font-weight: 500;
	line-height: 1.3;
	color:       var(--nec-grey);
	transition:  color 0.2s ease;
}

.insights-slider-module__mini-card:hover .insights-slider-module__mini-title,
.insights-slider-module__mini-card:focus-visible .insights-slider-module__mini-title {
	color: var(--nec-orange);
}

.insights-slider-module__mini-excerpt {
	margin:      0;
	color:       var(--nec-grey);
	font-size:   0.875rem;
	line-height: 1.55;
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

.insights-slider-module__mini-arrow {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           40px;
	height:          40px;
	flex-shrink:     0;
	color:           var(--nec-orange);
	transition:      transform 0.25s ease;
}

.insights-slider-module__mini-arrow svg {
	width:  32px;
	height: 32px;
}

.insights-slider-module__mini-card:hover .insights-slider-module__mini-arrow,
.insights-slider-module__mini-card:focus-visible .insights-slider-module__mini-arrow {
	transform: translateX(4px);
}

/* ===========================
   # Featured layout
=========================== */

.insights-slider-module--featured {
	padding: 80px 0;
	background: var(--nec-light-grey);
}

.insights-slider-module__featured-row {
	display: flex;
	align-items: flex-start;
	gap: 64px;

}

.insights-slider-module__featured-col {
	display:         block;
	flex:            0 0 50%;
	min-width:       0;
	color:           inherit;
	text-decoration: none;
}

.insights-slider-module__featured-col:focus-visible {
	outline:        2px solid var(--nec-orange);
	outline-offset: 2px;
}

.insights-slider-module__featured-image-wrap {
	position: relative;
}

.insights-slider-module__featured-badge {
	position:    absolute;
	top:         16px;
	left:        16px;
	display:     flex;
	align-items: center;
	gap:         8px;
	background:  rgba(255, 255, 255, 0.6);
	padding:     8px 14px;
	border-radius: 3px;
	backdrop-filter: blur(5px)

}

.insights-slider-module__featured-badge-text {
	font-family:    var(--nec-font);
	font-size:      14px;
	font-weight:    400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          var(--nec-grey);
}

.insights-slider-module__featured-image {
	display:    block;
	width:      100%;
	height:     420px;
	object-fit: cover;
}

.insights-slider-module__featured-body {
	display:        flex;
	flex-direction: column;
	gap:            16px;
	padding-top:    28px;
}

.insights-slider-module__featured-title {
	margin:      0;
	color:       var(--nec-grey);
	font-family: var(--nec-font);
	font-weight: 500;
	font-size:   clamp(1.375rem, calc(1.2rem + 0.7vw), 1.75rem);
	line-height: 1.3;
	transition:  color 0.2s ease;
}

.insights-slider-module__featured-col:hover .insights-slider-module__featured-title,
.insights-slider-module__featured-col:focus-visible .insights-slider-module__featured-title {
	color: var(--nec-orange);
}

.insights-slider-module__featured-excerpt {
	margin:      0;
	color:       var(--nec-grey);
	font-size:   1rem;
	line-height: 1.65;
}

.insights-slider-module__featured-cta {
	display:     inline-flex;
	align-items: center;
	gap:         12px;
	color:       var(--nec-grey);
	font-family: var(--nec-font);
	font-weight: 500;
	align-self:  flex-start;
}

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

.insights-slider-module__featured-col:hover .insights-slider-module__featured-cta-icon,
.insights-slider-module__featured-col:focus-visible .insights-slider-module__featured-cta-icon {
	transform: translateX(5px);
}

.insights-slider-module__featured-cta-icon svg {
	width:  34px;
	height: 34px;
	color:  var(--nec-orange);
}

.insights-slider-module__related-col {
	flex:      1;
	min-width: 0;
	display:   flex;
	flex-direction: column;
	gap:       20px;
	padding-top: 8px;
}

.insights-slider-module__related-list {
	display: flex;
	flex-direction: column;
}

.insights-slider-module__related-list .insights-slider-module__mini-card:last-child {
	border-bottom: none;
}

/* ===========================
   # Listing layout
=========================== */

.insights-slider-module--listing {
	padding: 80px 0;
	background: var(--nec-light-grey);
}

.insights-slider-module__listing-inner {
	margin:    0 auto;
	display:   flex;
	flex-direction: column;
	gap: 32px;
}

.insights-slider-module__listing-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	column-gap:            64px;
}

/* ===========================
   # Responsive — Featured/Listing — 991px
=========================== */

@media (max-width: 991px) {
	.insights-slider-module__featured-row {
		flex-direction: column;
		gap: 40px;
	}

	.insights-slider-module__featured-image {
		height: 320px;
	}

	.insights-slider-module__listing-grid {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
	.insights-slider-module__arrows, .insights-slider-module__dots {display:none} 
}

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

@media (max-width: 599px) {
	.insights-slider-module--featured,
	.insights-slider-module--listing {
		padding: 48px 0;
	}

	.insights-slider-module__mini-card {
		gap: 14px;
	}

	.insights-slider-module__mini-thumb {
		width:  64px;
		height: 64px;
	}
}

/* ===========================
   # Responsive — 480px
=========================== */

@media (max-width: 480px) {
	.insights-slider-module {
		padding: 32px 0;
	}

	.insights-slider-module__layout {
		gap: 24px;
	}

	.insights-slider-module__card-body {
		padding: 16px 16px 20px;
		gap:     12px;
	}

	.insights-slider-module__card-img,
	.insights-slider-module__card-image img {
		height: 160px;
	}
}