/**
 * Casestudy Carousel Block Front-end CSS
 * Updated for responsive design with vertical desktop and horizontal mobile layouts
 * MAINTAINS: Arrow pushes title rightward on hover (signed-off design)
 * FIXES: Prevents jumping by truncating long titles
 */



/* Main block structure */
.casestudy-carousel {
	position: relative;
	width: 100%;
	padding: 80px 0;
	background-color: #F6F6F6;
	overflow: hidden;
}



/* Container */
.csc-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
}

@media (max-width: 1500px) {
	.csc-container {
		max-width: 1200px !important;
	}

	.csc-carousel{
		max-width: 700px !important;
	}

	.csc-title-container{
		max-width: 450px !important;
	}


}

@media (max-width: 1500px) {

	.csc-container .csc-layout{
		display: flex;
		justify-content: space-between;
		gap: 40px;
	}

	.csc-carousel-column{
		width: 100%;
	}

	.csc-container .eyebrow {
		font-size: 16px !important;
	}

	.csc-content-column .text-description {
		font-size: 16px !important;
	}

	.csc-excerpt {
		font-size: 16px !important;
		max-width: 450px !important;
	}

	.casestudy-carousel .wp-block-button.is-style-default .wp-block-button__link {
		font-size: 16px !important;
	}

	.casestudy-carousel .wp-block-button.is-style-solid .wp-block-button__link {
		font-size: 16px !important;
	}

	.casestudy-carousel .wp-block-button.is-style-arrow .wp-block-button__link {
		font-size: 16px !important;
	}
}

/* Layout */
.csc-layout {
	display: flex;
	gap: 100px
}

/* Content column (left side) */
.csc-content-column {
	flex: 0 0 40%;
	padding-right: 20px;
	position: relative;
}

/* Eyebrow Styles */
.csc-container .eyebrow {
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 6.72px;
	margin-bottom: 10px;
	display: block;
	font-family: 'DM Sans', sans-serif;
}

/* Eyebrow style variations */
.csc-container .eyebrow-style-default {
	font-weight: 400;
	text-transform: uppercase;
}

.csc-container .eyebrow-style-bold {
	font-weight: 700;
	text-transform: uppercase;
}

.csc-container .eyebrow-style-elegant {
	font-style: italic;
}



/* Case studies heading */
.csc-container .csc-layout,
.csc-content-column .text-title {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 36px;
	line-height: 42px;
	margin-bottom: 25px;
	font-weight: 400;
}

/* Main headline */
.csc-container .csc-layout,
.csc-content-column .text-description{
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: -0.48px;
	margin-bottom: 53px;
}

/* Button Styles */
.casestudy-carousel .wp-block-buttons,
.casestudy-carousel .column-buttons,
.casestudy-carousel .casestudy-carousel-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
}

/* Button Style 1: Default (Blue Background) */
.casestudy-carousel .wp-block-button.is-style-default .wp-block-button__link {
	background-color: #A6B8E3;
	color: #000000;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	line-height: 21px;
	font-weight: 400;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
	width: fit-content;
	align-self: center;
}

.casestudy-carousel .wp-block-button.is-style-default .wp-block-button__link:hover {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
	transition: 300ms ease-in;
	background-color: #788FC6;
}

/* Button Style 2: Solid (Brown Background) */
.casestudy-carousel .wp-block-button.is-style-solid .wp-block-button__link {
	background-color: #AA632C;
	color: #FFFFFF;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	line-height: 21px;
	font-weight: 400;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
	width: fit-content;
	align-self: center;
	border: none;
	cursor: pointer;
	text-align: center;
}

.casestudy-carousel .wp-block-button.is-style-solid .wp-block-button__link:hover {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
	transition: 300ms ease-in;
}

/* Button Style 3: Arrow */
.casestudy-carousel .wp-block-button.is-style-arrow .wp-block-button__link {
	background-color: transparent;
	color: inherit;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	font-weight: 400;
	position: relative;
	border-radius: 0;
}

.casestudy-carousel .wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 29px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='16' viewBox='0 0 29 16' fill='none'%3E%3Cpath d='M28.7071 8.70711C29.0976 8.31659 29.0976 7.68342 28.7071 7.2929L22.3431 0.928934C21.9526 0.53841 21.3195 0.53841 20.9289 0.928934C20.5384 1.31946 20.5384 1.95262 20.9289 2.34315L26.5858 8L20.9289 13.6569C20.5384 14.0474 20.5384 14.6805 20.9289 15.0711C21.3195 15.4616 21.9526 15.4616 22.3431 15.0711L28.7071 8.70711ZM-8.74228e-08 9L28 9L28 7L8.74228e-08 7L-8.74228e-08 9Z' fill='%23AA622C'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 10px;
	transition: transform 0.3s ease;
}

.casestudy-carousel .wp-block-button.is-style-arrow .wp-block-button__link:hover::after {
	transform: translateX(5px);
}

/* Navigation controls - desktop vertical scrolling */
.csc-controls {
	display: flex;
	flex-direction: row;
	margin-top: 30px;
	position: relative;
	z-index: 10;
	gap: 16px; /* Updated to 16px gap as requested */
}

/* Desktop Control Buttons - Restored to original size */
.csc-prev,
.csc-next {
	width: 45px !important; /* Force original width */
	height: 45px !important; /* Force original height */
	background: none;
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.3s ease;
	max-width: none !important; /* Remove max-width constraint */
}

/* Fix for SVG inside buttons */
.csc-prev svg,
.csc-next svg {
	width: 45px;
	height: 45px;
}

/* Scope the custom property to just this block */
.casestudy-carousel {
	--color-background-darkgold-8: rgba(170, 98, 44, 0.08);
}

/* Desktop button hover effects */
.casestudy-carousel .csc-prev:hover circle,
.casestudy-carousel .csc-next:hover circle {
	fill: var(--color-background-darkgold-8, rgba(170, 98, 44, 0.08));
	transition: fill 0.3s ease;
}

/* Smooth transition for the circle */
.casestudy-carousel .csc-prev circle,
.casestudy-carousel .csc-next circle {
	transition: fill 0.3s ease;
}

/* Mobile button hover effects */
.casestudy-carousel .csc-mobile-prev:hover ellipse,
.casestudy-carousel .csc-mobile-next:hover ellipse {
	fill: var(--color-background-darkgold-8, rgba(170, 98, 44, 0.08));
	transition: fill 0.3s ease;
}

/* Smooth transition for mobile ellipse */
.casestudy-carousel .csc-mobile-prev ellipse,
.casestudy-carousel .csc-mobile-next ellipse {
	transition: fill 0.3s ease;
}

/* Scope the custom property to just this block in editor */
.wp-block-acf-casestudy-carousel {
	--color-background-darkgold-8: rgba(170, 98, 44, 0.08);
}

/* Rest of the hover styles remain the same... */
.wp-block-acf-casestudy-carousel .csc-prev:hover circle,
.wp-block-acf-casestudy-carousel .csc-next:hover circle {
	fill: var(--color-background-darkgold-8, rgba(170, 98, 44, 0.08));
	transition: fill 0.3s ease;
}
/* ...etc */r

				/* Carousel column (right side) - Desktop */
			.csc-carousel-column {
				flex: 0 0 60%;
			}

/* Carousel */
.csc-carousel {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	max-width: 911px;
}

/* All slides */
.csc-slide {
	width: 100%;
	display: none; /* Hide all slides by default */
}

/* Visible slides */
.csc-slide-visible {
	display: block; /* Make selected slides visible */
}

/* Case study card */
.csc-case-study {
	position: relative;
	padding: 35px 0;
	background-color: transparent;
	margin-bottom: 4px;
	transition: all 0.3s ease;
}

/* Make case study clickable */
.csc-case-study-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* Gradient border styling using pseudo element */
.csc-case-study::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, #290B0B 0%, #D48D57 100%);
}

/* Top border for the first slide in each visible set */
.csc-slide:first-child .csc-case-study::before,
.csc-carousel .csc-slide-visible:first-child .csc-case-study::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, #290B0B 0%, #D48D57 100%);
}

/* Category label */
.csc-category {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 2.66px;
	text-transform: uppercase;
	white-space: nowrap;
	margin-top: 5px;
}

/* MAINTAINS DESIGN: Case study title with container - arrow pushes title right */
.csc-title-container {
	display: flex;
	align-items: center;
	transition: transform 0.3s ease;
	margin-bottom: 20px;
	position: relative;
	min-height: 30px; /* Prevent height changes */
}

/* MAINTAINS DESIGN: Arrow icon - keeps original behavior (pushes title right) */
.csc-arrow-icon {
	display: none; /* Hidden initially */
	margin-right: 16px; /* Gap between arrow and title */
	flex-shrink: 0; /* Don't let it shrink */
}

/* MAINTAINS DESIGN: Show arrow on hover - keeps pushing title right */
.csc-case-study-link:hover .csc-arrow-icon {
	display: inline-block; /* Show on hover */
}

/* No transform needed on the title container */
.csc-case-study-link:hover .csc-title-container {
	transform: none;
}

/* FIXED: Case study title with truncation to prevent wrapping/jumping */
.csc-title {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 20px;
	line-height: 30px;
	font-weight: 400;
	transition: transform 0.3s ease;

	/* Prevent wrapping that causes jumping */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* Case study excerpt */
.csc-excerpt {
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	line-height: 22px;
	max-width: 640px;
}

/* Text Colors */
.casestudy-carousel.text-white .csc-section-title,
.casestudy-carousel.text-white .csc-main-title,
.casestudy-carousel.text-white .csc-description,
.casestudy-carousel.text-white .csc-category,
.casestudy-carousel.text-white .csc-title,
.casestudy-carousel.text-white .csc-excerpt {
	color: #FFFFFF;
}

.casestudy-carousel.text-white .csc-prev svg ellipse,
.casestudy-carousel.text-white .csc-next svg ellipse {
	fill: #FFFFFF;
}

.casestudy-carousel.text-white .csc-divider {
	background-color: rgba(255, 255, 255, 0.2);
}

.casestudy-carousel.text-black .csc-section-title,
.casestudy-carousel.text-black .csc-main-title,
.casestudy-carousel.text-black .csc-description,
.casestudy-carousel.text-black .csc-category,
.casestudy-carousel.text-black .csc-title,
.casestudy-carousel.text-black .csc-excerpt {
	color: #000000;
}

.casestudy-carousel.text-dark-blue .csc-section-title,
.casestudy-carousel.text-dark-blue .csc-main-title,
.casestudy-carousel.text-dark-blue .csc-description,
.casestudy-carousel.text-dark-blue .csc-category,
.casestudy-carousel.text-dark-blue .csc-title,
.casestudy-carousel.text-dark-blue .csc-excerpt {
	color: #0F293E;
}

/* Background Colors */
.casestudy-carousel.bg-dark-blue {
	background-color: #0F293E;
}

.casestudy-carousel.bg-dark-brown {
	background-color: #290B0B;
}

.casestudy-carousel.bg-grey {
	background-color: #F6F6F6;
}

.casestudy-carousel.bg-gold {
	background-color: #B8860B;
}

.casestudy-carousel.bg-copper {
	background-color: #B87333;
}

.casestudy-carousel.bg-periwinkle {
	background-color: #CCCCFF;
}

.casestudy-carousel.bg-deep-blue {
	background-color: #00008B;
}

.casestudy-carousel.bg-dark-red {
	background-color: #6B313E;
}

.casestudy-carousel.bg-white {
	background-color: #FFFFFF;
}

.casestudy-carousel.bg-black {
	background-color: #000000;
}

/* MOBILE SPECIFIC STYLES */
/* Mobile Navigation Controls - horizontal scrolling */
.csc-mobile-controls {
	display: none;
	flex-direction: row;
	gap: 20px;
	margin-bottom: 29px;
	position: relative;
	z-index: 10;
}

/* Mobile carousel container */
.csc-mobile-carousel {
	display: none; /* Hidden by default (desktop) */
	position: relative;
	width: 100%;
	overflow: hidden;
}

.csc-mobile-carousel-inner {
	display: flex;
	transition: transform 0.3s ease;
}

/* Mobile slides */
.csc-mobile-slide {
	flex: 0 0 100%;
	width: 100%;
	box-sizing: border-box;
}

/* Mobile page indicators */
.csc-mobile-indicators {
	display: none; /* Hidden by default (desktop) */
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
}

.csc-mobile-indicator {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #CCCCCC;
	transition: background-color 0.3s ease;
}

.csc-mobile-indicator.active {
	background-color: #AA632C;
	width: 10px;
	height: 10px;
}

/* Mobile case study styles */
.csc-mobile-case-study {
	position: relative;
	background-color: transparent;
	padding: 32px 0;
}

/* Make mobile case study clickable */
.csc-mobile-case-study-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* MAINTAINS DESIGN: Mobile hover effects - arrow pushes title right */
.csc-mobile-title-container {
	display: flex;
	align-items: center;
	transition: transform 0.3s ease;
	position: relative;
	min-height: 28px; /* Prevent height changes */
}

/* MAINTAINS DESIGN: Mobile arrow - keeps original behavior */
.csc-mobile-arrow-icon {
	display: none; /* Hidden initially */
	margin-right: 16px; /* Gap between arrow and title */
	flex-shrink: 0; /* Don't let it shrink */
}

/* MAINTAINS DESIGN: Show mobile arrow on hover */
.csc-mobile-case-study-link:hover .csc-mobile-arrow-icon {
	display: inline-block; /* Show on hover */
}

/* No transform needed on the title container */
.csc-mobile-case-study-link:hover .csc-mobile-title-container {
	transform: none;
}

.csc-mobile-case-study::before {
	content: '';
	position: absolute;
	bottom: 0;
	top: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, #290B0B 0%, #D48D57 100%);
}

.csc-mobile-case-study::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, #290B0B 0%, #D48D57 100%);
}

.csc-mobile-category {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

/* FIXED: Mobile title with truncation to prevent wrapping/jumping */
.csc-mobile-title {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 400;
	margin-bottom: 16px;
	transition: transform 0.3s ease;

	/* Prevent wrapping that causes jumping on mobile */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.csc-mobile-excerpt {
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

/* Media queries for responsive design */
@media (max-width: 992px) {
	/* Desktop layout adjustments */
	.csc-layout {
		flex-direction: column;
	}

	.csc-content-column {
		flex: 0 0 100%;
		padding-right: 0;
		/*margin-bottom: 52px;*/
		max-width: 100% !important;
	}

	.csc-container .csc-layout{
		gap: 0;
	}

	.csc-carousel-column {
		flex: 0 0 100%;
	}

	.casestudy-carousel {
		padding: 68px 0;
	}

	.csc-main-title {
		font-size: 32px;
	}
}

@media (max-width: 768px) {

	/* Hide desktop carousel */
	.csc-carousel {
		display: none;
	}

	.csc-container .csc-layout{
		margin-bottom: 0 !important;
	}

	.csc-controls {
		display: none;
	}

	/* Show mobile carousel */
	.csc-mobile-carousel {
		display: block;
	}

	.csc-mobile-controls {
		display: flex;
	}

	.csc-mobile-indicators {
		display: flex;
	}

	.csc-container{
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Mobile typography adjustments */
	.csc-container .eyebrow {
		font-size: 18px;
		letter-spacing: 4px;
		margin-bottom: 16px;
	}

	.csc-content-column .text-title {
		font-size: 28px;
		line-height: 34px;
	}

	.csc-content-column .text-description {
		font-size: 16px;
		line-height: 1.5;
		margin-bottom: 32px;
	}
}