/**
 * Case Studies 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.
 * Cards include an auto-numbered orange circle badge + horizontal rule below the featured image.
 */

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

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

.case-studies-slider-module__layout {
	display:     flex;
	align-items: stretch;
	padding-left: 75px;
}

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

.case-studies-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;
}

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

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

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

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

.case-studies-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;
}

.case-studies-slider-module__sub-header-text {
	font-family:    var(--nec-font);
	font-size:      clamp(0.8125rem, calc(0.793rem + 0.088vw), 0.9375rem);
	font-weight:    500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--nec-grey);
}

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

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

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

.case-studies-slider-module__arrows {
	display: flex;
	gap:     12px;
}

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

.case-studies-slider-module__arrow svg {
	width:  36px;
	height: 36px;
}

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

.case-studies-slider-module__arrow:disabled {
	opacity: 0.35;
	cursor:  not-allowed;
}

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

.case-studies-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:      transform 0.25s ease;
}

.case-studies-slider-module__panel-cta:hover,
.case-studies-slider-module__panel-cta:focus-visible {
	color:     var(--nec-grey);
	transform: translateX(5px);
	outline:   none;
}

.case-studies-slider-module__panel-cta-icon {
	display:     flex;
	align-items: center;
	flex-shrink: 0;
}

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

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

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

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

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

/* Gradient on right edge to imply more content */
.case-studies-slider-module__viewport::after {
	content:        '';
	position:       absolute;
	top:            0;
	right:          0;
	bottom:         0;
	width:          80px;
	background:     linear-gradient(to right, transparent, rgba(255, 255, 255, 0.75));
	pointer-events: none;
	z-index:        1;
}

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

.case-studies-slider-module__track {
	display:    flex;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

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

.case-studies-slider-module__card {
	flex:           0 0 auto;
	background:     var(--nec-light-grey, #f5f5f6);
	display:        flex;
	flex-direction: column;
	overflow:       hidden;
	margin-right:   16px; /* gap between cards */
}

.case-studies-slider-module__card-image {
	overflow:    hidden;
	flex-shrink: 0;
}

.case-studies-slider-module__card-image a {
	display: block;
}

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

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

/* ===========================
   # Numbered badge + horizontal rule
=========================== */

.case-studies-slider-module__card-meta {
	display:     flex;
	align-items: center;
	flex-shrink: 0;
}

.case-studies-slider-module__card-number {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           48px;
	height:          48px;
	border-radius:   50%;
	background:      var(--nec-orange);
	color:           var(--nec-white, #fff);
	font-family:     var(--nec-font);
	font-size:       0.875rem;
	font-weight:     500;
	flex-shrink:     0;
	position:        relative;
	z-index:         1;
	/* Offset so circle sits half-over the image, half-over the card body */
	margin-top:      -24px;
	margin-left:     24px;
	margin-right:    16px;
	box-shadow:      0 2px 8px rgba(235, 110, 0, 0.25);
}

.case-studies-slider-module__card-line {
	flex:       1;
	height:     1px;
	background: #d4d4d6;
	margin-top: -24px; /* aligns with the badge vertical centre */
}

/* ===========================
   # Card body
=========================== */

.case-studies-slider-module__card-body {
	display:        flex;
	flex-direction: column;
	gap:            16px;
	padding:        20px 28px 32px;
	flex:           1;
}

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

.case-studies-slider-module__card-title-link {
	color:           inherit;
	text-decoration: none;
}

.case-studies-slider-module__card-title-link:hover,
.case-studies-slider-module__card-title-link:focus-visible {
	color:   var(--nec-orange);
	outline: none;
}

.case-studies-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;
}

.case-studies-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:      transform 0.25s ease;
}

.case-studies-slider-module__card-cta:hover,
.case-studies-slider-module__card-cta:focus-visible {
	color:     var(--nec-grey);
	transform: translateX(4px);
	outline:   none;
}

.case-studies-slider-module__card-cta-icon {
	display:     flex;
	align-items: center;
	flex-shrink: 0;
}

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

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

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

.case-studies-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

	.case-studies-slider-module__layout {
		flex-direction: column;
		padding-left:   16px;
		gap:            32px;
	}

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

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

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

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

	.case-studies-slider-module__dots {
		padding: 0;
	}
}

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

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

	.case-studies-slider-module__layout {
		gap: 24px;
	}

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

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

	.case-studies-slider-module__card-number {
		width:  40px;
		height: 40px;
		margin-top:  -20px;
		margin-left: 16px;
	}

	.case-studies-slider-module__card-line {
		margin-top: -20px;
	}
}