/**
 * Content Slider Module
 * Left panel (1/3 of container width) + horizontal image-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
=========================== */

.content-slider-module {
	padding:    80px 0;
	background: var(--nec-white, #fff);
	overflow:   hidden; /* clips the peeking card at the right viewport edge */
}
.content_slider_content_block {margin-right:50px}
/* ===========================
   # Layout: panel + slider side by side
=========================== */

.content-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
=========================== */

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

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

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

/* ===========================
   # Sub-header (dot + label)
=========================== */

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

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

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

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

.content-slider-module__heading {
	margin:      0;
	color:       var(--nec-grey);
	font-family: var(--nec-font);
	font-weight: 400;
	/* Fluid between 390px (38px) and 1440px (56px) viewports. */
	font-size:   clamp(2.375rem, calc(1.9571rem + 1.7143vw), 3.5rem);
}

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

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

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

.content-slider-module__arrow svg {
	width:  43px;
	height: 43px;
}
.content-slider-module__arrow,
.content-slider-module__arrow:hover:not(:disabled),
.content-slider-module__arrow:focus-visible:not(:disabled) {
	color:   var(--nec-orange);
	outline: none;
}

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

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

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

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

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

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

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

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

.content-slider-module__dots {
	display:    flex;
	gap:        8px;
	/* Sits in the slider area now, under the first card */
	margin-top: 50px;
}

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

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

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

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

.content-slider-module__slider-area {
	flex:      1;
	min-width: 0;
	position:  relative;
}

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

.content-slider-module__viewport {
	overflow: hidden;
	position: relative;
}

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

.content-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 */
}

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

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

.content-slider-module__card {
	flex:           0 0 auto;
	/* Width calculated in JS: (sliderAreaWidth - PEEK_OFFSET) / 2 on desktop */
	display:        flex;
	flex-direction: column;
	margin-right:   10px; /* gap between cards — must match CARD_GAP in the JS */
	transition:     opacity 0.3s ease;
}

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

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

.content-slider-module__card-image img {
	display:    block;
	width:      100%;
	height:     220px;
	object-fit: cover;
}

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

/* ===========================
   # Number badge + divider
=========================== */

.content-slider-module__card-number-row {
	display:     flex;
	align-items: center;
}

.content-slider-module__card-number {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	width:           28px;
	height:          28px;
	border-radius:   50%;
	background:      var(--nec-orange);
	color:           var(--nec-white, #fff);
	font-family:     var(--nec-font);
	font-size:       12px;
	font-weight:     500;
	z-index:         1;
}

.content-slider-module__card-divider {
	flex:       1;
	height:     1px;
	background: #d9d9dc;
	margin-left: 10px; /* slight overlap so the badge sits on the line */
}

/* ===========================
   # Heading / excerpt / CTA
=========================== */

.content-slider-module__card-heading {
	margin:      0;
	font-family: var(--nec-font);
	font-size:   clamp(1.0625rem, calc(1rem + 0.26vw), 1.25rem);
	font-weight: 500;
	line-height: 1.3;
	color:       var(--nec-grey);
	padding-bottom: 10px;
}

.content-slider-module__card-excerpt {
	margin:      0;
	color:       var(--nec-grey);
	font-size:   0.9375rem;
	line-height: 1.65;
	display:            -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

.content-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;
	text-decoration: none;
	align-self:      flex-start;
	transition:      color 0.2s ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.content-slider-module__card-image img {
		height: 170px;
	}
	.content-slider-module__arrows, .content-slider-module__dots {display:none}
}

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

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

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

	.content-slider-module__panel {
		flex:          0 0 auto;
		width:         100%;
		padding-right: 16px;
		gap:           20px;
		padding-top:   0;
		padding-bottom: 0;
	}

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

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

}

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

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

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

	.content-slider-module__card-body {
		gap:         12px;
		padding-top: 20px;
	}

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