/**
 * Image Carousel Right Block CSS - Content Left, Carousel Right Layout
 */

/* ==========================================
   TEXT COLOR CLASSES
   ========================================== */

.image-carousel-right-text-white,
.image-carousel-right-text-white h1,
.image-carousel-right-text-white h2,
.image-carousel-right-text-white h3,
.image-carousel-right-text-white h4,
.image-carousel-right-text-white h5,
.image-carousel-right-text-white h6,
.image-carousel-right-text-white p,
.image-carousel-right-text-white .image-carousel-right-title,
.image-carousel-right-text-white .image-carousel-right-description {
	color: #FFFFFF;
}

.image-carousel-right-text-black,
.image-carousel-right-text-black h1,
.image-carousel-right-text-black h2,
.image-carousel-right-text-black h3,
.image-carousel-right-text-black h4,
.image-carousel-right-text-black h5,
.image-carousel-right-text-black h6,
.image-carousel-right-text-black p,
.image-carousel-right-text-black .image-carousel-right-title,
.image-carousel-right-text-black .image-carousel-right-description {
	color: #000000;
}

.image-carousel-right-text-dark-blue,
.image-carousel-right-text-dark-blue h1,
.image-carousel-right-text-dark-blue h2,
.image-carousel-right-text-dark-blue h3,
.image-carousel-right-text-dark-blue h4,
.image-carousel-right-text-dark-blue h5,
.image-carousel-right-text-dark-blue h6,
.image-carousel-right-text-dark-blue p,
.image-carousel-right-text-dark-blue .image-carousel-right-title,
.image-carousel-right-text-dark-blue .image-carousel-right-description {
	color: #0F293E;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */

.image-carousel-right .image-carousel-right-title {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 48px;
	line-height: 114%;
	margin-bottom: 32px;
	font-weight: 400;
}

.image-carousel-right .image-carousel-right-description {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	letter-spacing: -0.48px;
	margin-bottom: 48px;
}

/* ==========================================
   BUTTON STYLES
   ========================================== */

.image-carousel-right .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
}

/* Button Style 1: Default (Blue Background) */
.image-carousel-right .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;
}

.image-carousel-right .wp-block-button.is-style-default .wp-block-button__link::after {
	display: none;
}

.image-carousel-right .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) */
.image-carousel-right .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;
}

.image-carousel-right .wp-block-button.is-style-solid .wp-block-button__link::after {
	display: none;
}

.image-carousel-right .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 */
.image-carousel-right .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;
}

.image-carousel-right .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;
}

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

/* ==========================================
   MAIN LAYOUT STYLES (Content Left, Carousel Right)
   ========================================== */

.image-carousel-right-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-top: 120px;
	padding-bottom: 120px;
}

.image-carousel-right-container {
	display: flex;
	margin: 0 auto;
	position: relative;
	gap: 40px;
}

/* Content Column (Left side) */
.image-carousel-right-content-column {
	flex: 0 0 calc(50% - 20px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 10;
	padding-left: 30px;
	padding-right: 100px;
	max-width: calc(50% - 20px);
	position: relative;
	order: 1; /* Ensure content comes first */
}

.image-carousel-right-content-wrapper {
	max-width: 536px;
	margin-left: auto;
}

/* Carousel Column (Right side) */
.image-carousel-right-carousel-column {
	flex: 0 0 calc(50% - 20px);
	position: relative;
	height: 500px;
	overflow: hidden; /* Hide overflow to create bleed effect */
	max-width: calc(50% - 20px);
	display: flex;
	justify-content: flex-end;
	min-height: 500px;
	order: 2; /* Ensure carousel comes second */
}

.image-carousel-right-carousel-track {
	display: flex;
	transition: transform 0.5s ease-in-out;
	height: 100%;
	position: relative;
	flex-direction: row;
	/* Allow track to be wider than container for right bleed effect */
	width: 120%;
	visibility: visible !important;
	opacity: 1 !important;
	transform: translateX(0);
}

.image-carousel-right-carousel-slide {
	position: relative;
	height: 100%;
	flex-shrink: 0;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.image-carousel-right-carousel-image {
	height: 100%;
	width: auto;
	display: block !important;
	object-fit: cover;
	visibility: visible !important;
	opacity: 1 !important;
}

@media (max-width: 1500px) {
	.image-carousel-right-content-wrapper{
		max-width: 453px;
	}
}

@media (max-width: 1500px) {
	.image-carousel-right .image-carousel-right-description {
		font-size: 16px !important;
	}

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

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

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


/* Mobile image constraints to prevent huge heights */
@media (max-width: 1024px) {
	.image-carousel-right-carousel-image {
		max-height: 350px !important;
	}
}

@media (max-width: 768px) {

	.image-carousel-right-carousel-navigation{
		margin-top: 24px;
	}

	.image-carousel-right-carousel-column{
		min-height: unset;
	}
	.image-carousel-right-carousel-image {
		max-height: 250px !important;
	}
}

@media (max-width: 480px) {
	.image-carousel-right-carousel-image {
		max-height: 250px !important;
	}
}

/* Navigation */
.image-carousel-right-carousel-navigation {
	display: flex;
	margin-top: 48px;
	gap: 8px;
	position: relative;
	z-index: 20;
}

.image-carousel-right-carousel-prev,
.image-carousel-right-carousel-next {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: opacity 0.3s ease;
	width: 45px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 20;
}

.image-carousel-right-carousel-prev svg,
.image-carousel-right-carousel-next svg {
	width: 45px;
	height: 45px;
}

.image-carousel-right-carousel-prev:disabled,
.image-carousel-right-carousel-next:disabled {
	cursor: default;
	opacity: 0.5;
}

.image-carousel-right-carousel-prev:focus,
.image-carousel-right-carousel-next:focus {
	outline: none;
}

.image-carousel-right-carousel-prev circle,
.image-carousel-right-carousel-next circle {
	fill: rgba(246, 246, 246, 0.80);
	transition: fill 0.3s ease;
}

.image-carousel-right-carousel-prev:hover circle,
.image-carousel-right-carousel-next:hover circle {
	fill: rgba(170, 98, 44, 0.08);
}

/* ==========================================
   RESPONSIVE STYLES (Layout Only)
   ========================================== */

@media (max-width: 1024px) {
	.image-carousel-right-container {
		flex-direction: column;
		padding: 0 30px;
		gap: 20px;
	}

	.image-carousel-right-content-column,
	.image-carousel-right-carousel-column {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}

	.image-carousel-right-content-column {
		padding: 40px 0;
		order: 1; /* Text goes on top */
	}

	.image-carousel-right-carousel-column {
		order: 2; /* Carousel goes below */
		height: 350px; /* Reduced from 400px */
		max-height: 350px; /* Add max-height constraint */
		overflow: hidden;
		margin: 0 auto;
		justify-content: center;
	}

	.image-carousel-right-carousel-track {
		width: 100%; /* Reset bleed effect on mobile */
		max-height: 350px; /* Constrain track height */
	}

	.image-carousel-right-carousel-slide {
		max-height: 350px; /* Constrain slide height */
	}

	.image-carousel-right-carousel-image {
		max-height: 350px; /* Constrain image height */
	}

	/* Remove margin between slides on mobile */
	.image-carousel-right-carousel-slide {
		margin-left: 0 !important;
	}

	.image-carousel-right-content-wrapper {
		max-width: 100%;
		margin-left: 0;
	}

	.image-carousel-right-section {
		min-height: auto;
		padding: 60px 0;
	}

	/*.image-carousel-right-carousel-navigation {*/
	/*	justify-content: center;*/
	/*}*/

	.image-carousel-right-section {
		padding-top: 70px;
		padding-bottom: 70px;
	}
}

@media (max-width: 768px) {
	.image-carousel-right-container {
		padding: 0 20px;
	}

	.image-carousel-right .image-carousel-right-title {
		font-size: 42px;
	}

	.image-carousel-right-carousel-column {
		height: 250px; /* Reduced from 300px */
		max-height: 250px; /* Add max-height constraint */
	}

	.image-carousel-right-carousel-track {
		max-height: 250px; /* Constrain track height */
	}

	.image-carousel-right-carousel-slide {
		max-height: 250px; /* Constrain slide height */
	}

	.image-carousel-right-carousel-image {
		max-height: 250px; /* Constrain image height */
	}

	/* Remove margin between slides on mobile */
	.image-carousel-right-carousel-slide {
		margin-left: 0 !important;
	}

	.image-carousel-right-content-column {
		padding-bottom: 20px;
	}
}

/* Extra small mobile devices */
@media (max-width: 480px) {
	.image-carousel-right-carousel-column {
		height: 250px; /* Even smaller for very small screens */
		max-height: 250px;
	}

	.image-carousel-right-carousel-track {
		max-height: 250px;
	}

	.image-carousel-right-carousel-slide {
		max-height: 250px;
	}

	.image-carousel-right-carousel-image {
		max-height: 250px;
	}

	/* Remove margin between slides on smallest mobile */
	.image-carousel-right-carousel-slide {
		margin-left: 0 !important;
	}
}

/* Medium screen specific adjustments (maintain desktop-like layout) */
@media (min-width: 769px) and (max-width: 1024px) {
	.image-carousel-right-container {
		flex-direction: row;
	}

	.image-carousel-right-content-column,
	.image-carousel-right-carousel-column {
		flex: 0 0 calc(50% - 20px);
		max-width: calc(50% - 20px);
	}

	.image-carousel-right-content-column {
		order: 1; /* Content on left */
	}

	.image-carousel-right-carousel-column {
		order: 2; /* Carousel on right */
		height: 450px;
	}

	.image-carousel-right-content-column {
		padding-left: 20px;
		padding-right: 50px;
	}
}