/**
 * Text Image Stack Block Front-end CSS
 */

/* Background Colors - Named Colors */
.tis-bg-image-cont.bg-dark-blue {
	background-color: #0F293E;
}

.tis-bg-image-cont.bg-dark-brown {
	background-color: #290B0B;
}

.tis-bg-image-cont.bg-burgundy {
	background-color: #6B313E;
}

.tis-bg-image-cont.bg-gold {
	background-color: #B8860B;
}

.tis-bg-image-cont.bg-copper {
	background-color: #B87333;
}

.tis-bg-image-cont.bg-periwinkle {
	background-color: #CCCCFF;
}

.tis-bg-image-cont.bg-deep-blue {
	background-color: #00008B;
}

.tis-bg-image-cont.bg-dark-red {
	background-color: #6B313E;
}

.tis-bg-image-cont.bg-white {
	background-color: #FFFFFF;
}

.tis-bg-image-cont.bg-black {
	background-color: #000000;
}

/* Text Colors */
.text-image-stack.text-white,
.text-image-stack.text-white h1,
.text-image-stack.text-white h2,
.text-image-stack.text-white h3,
.text-image-stack.text-white h4,
.text-image-stack.text-white h5,
.text-image-stack.text-white h6,
.text-image-stack.text-white p,
.text-image-stack.text-white .text-image-stack-title,
.text-image-stack.text-white .text-image-stack-description,
.text-image-stack.text-white .text-title,
.text-image-stack.text-white .text-description {
	color: #FFFFFF;
}

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

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

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

@media (max-width: 1500px) {
	.text-image-stack .eyebrow {
		font-size: 16px !important;
	}

	.text-image-stack .text-image-stack-description,
	.text-image-stack .text-description {
		font-size: 16px !important;
	}

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

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

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

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

.text-image-stack .eyebrow-style-bold {
	font-weight: 700;
	text-transform: uppercase;
}

.text-image-stack .eyebrow-style-elegant {
	font-style: italic;
}

/* Title and Description Styles */
.text-image-stack .text-image-stack-title,
.text-image-stack .text-title {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 42px;
	line-height: 114%;
	margin-bottom: 24px;
	font-weight: 400;
}

.text-image-stack .text-image-stack-description,
.text-image-stack .text-description {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	line-height: 21px;
	margin-bottom: 53px;
	max-width: 580px;
}

/* Button Styles */
.text-image-stack .wp-block-buttons,
.text-image-stack .text-buttons,
.text-image-stack .text-image-stack-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: start;
}

/* Button Styles */
.text-image-stack .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: start;
}

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

.text-image-stack .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) */
.text-image-stack .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;
}

.text-image-stack .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 */
.text-image-stack .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;
}

.text-image-stack .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;
}

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

/**
 * Text Image Stack Carousel CSS
 * Additional styles for carousel functionality
 */

/* Main block structure */
.text-image-stack {
	position: relative;
	display: flex;
	min-height: 500px;
	width: 100%;
	overflow: hidden;
}

/* Background color section */
.tis-bg-image-cont {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	z-index: 0;
}

.text-image-stack.image-left .tis-bg-image-cont {
	right: 0;
	left: auto;
}

.text-image-stack.image-right .tis-bg-image-cont {
	left: 0;
	right: auto;
}

.text-image-container{
	padding-top: 150px;
	padding-bottom: 150px;
}

/* Carousel wrapper for better control positioning */
.tis-carousel-wrapper {
	position: relative;
}

/* Carousel section */
.tis-carousel {
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
	height: 480px;
	z-index: 1;
}

.text-image-stack.image-left .tis-carousel {
	left: 0;
}

.text-image-stack.image-right .tis-carousel {
	right: 0;
	left: auto;
}

/* Carousel slide styles */
.tis-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: opacity 0.5s ease;
	pointer-events: none; /* Allow clicks to pass through to buttons */
}

.tis-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Text content area */
.text-content {
	width: 62%;
	margin-left: auto;
	position: relative;
	padding-top: 128px;
	padding-left: 128px;
	padding-right: 28px;
	padding-bottom: 0;
	display: flex;
	justify-content: center;
}

.text-image-stack.image-left .text-content {
	margin-left: auto;
	margin-right: 0;
}

.text-image-stack.image-right .text-content {
	margin-left: 0;
	margin-right: auto;
}

/* Desktop carousel controls - positioned relative to wrapper */
.tis-controls {
	display: flex;
	gap: 10px;
	position: absolute;
	bottom: -540px; /* 30px below + button height */
	left: 0;
	z-index: 10;
}

/* Ensure controls follow image position */
.text-image-stack.image-right .tis-controls {
	left: auto;
	right: 55%; /* Position relative to the right edge */
}

.text-image-stack.image-left .tis-controls {
	left: 0;
}

.text-image-mobile-bg{
	display: none;
}

.tis-prev,
.tis-next {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}


/* Desktop button hover effects - make buttons transparent initially */
.text-image-stack .tis-prev rect,
.text-image-stack .tis-next rect {
	fill: rgba(246, 246, 246, 0.80);
	transition: fill 0.3s ease;
}

.text-image-stack .tis-prev:hover rect,
.text-image-stack .tis-next:hover rect {
	fill: rgba(170, 98, 44, 0.08);
}

.tis-controls-mobile{
	display: none;
}

/* Mobile controls hover effects */
.text-image-stack .tis-controls-mobile .tis-prev rect,
.text-image-stack .tis-controls-mobile .tis-next rect {
	/*fill: transparent;*/
	transition: fill 0.3s ease;
}

.text-image-stack .tis-controls-mobile .tis-prev:hover rect,
.text-image-stack .tis-controls-mobile .tis-next:hover rect {
	fill: rgba(170, 98, 44, 0.08);
}

/* Mobile styles - Updated to match the design */
@media (max-width: 768px) {
	.text-image-stack {
		flex-direction: column;
		min-height: auto;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.text-image-stack .tis-prev rect,
	.text-image-stack .tis-next rect {
		fill: rgba(246, 246, 246, 0.10) !important;
		transition: fill 0.3s ease;
	}

	.text-image-container{
		padding-bottom: 0 !important;
	}

	.text-image-stack > .container {
		flex-direction: column;
		padding-top: 66px !important;
		min-height: auto !important;
	}

	.text-image-mobile-bg{
		display: block;
	}
	/* Image takes full width and shows at the top */
	.tis-carousel {
		position: relative;
		width: 88%;
		height: 300px; /* Fixed height */
		justify-self: center;
		margin: 0 auto; /* Center the carousel */
		overflow: hidden; /* Contain the slides */
	}

	.tis-slide {
		position: absolute; /* Keep absolute positioning */
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		pointer-events: none; /* Ensures clicks pass through to buttons */
	}

	.tis-slide img {
		height: 100%;
		width: 100%;
		object-fit: cover;
		pointer-events: none; /* Ensures clicks pass through to buttons */
	}

	.text-image-stack.image-left .tis-carousel,
	.text-image-stack.image-right .tis-carousel {
		left: 0;
		right: 0;
	}

	/* Hide desktop controls on mobile */
	.tis-controls {
		display: none;
	}

	.tis-controls-mobile {
		position: relative;
		bottom: auto;
		display: flex;
		gap: 27px;
		margin-top: 50px;
		margin-bottom: 27px;
		z-index: 20;
		width: 100%;
	}

	/* Background extends to full width and starts below the image controls */
	.tis-bg-image-cont {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		min-height: 300px;
	}

	.text-image-stack.image-left .tis-bg-image-cont,
	.text-image-stack.image-right .tis-bg-image-cont {
		left: 0;
		right: 0;
	}

	/* Text content sits inside the background color area */
	.text-content {
		width: 100%;
		margin: 0;
		padding: 30px 20px 40px;
		box-sizing: border-box;
	}

	.text-image-stack.image-left .text-content,
	.text-image-stack.image-right .text-content {
		margin: 0;
	}

	/* Text styling adjustments */
	.text-image-stack > .text-title {
		font-size: 32px;
		line-height: 1.2;
		margin-bottom: 15px;
	}

	.text-image-stack > .text-description {
		font-size: 18px;
		line-height: 1.5;
		margin-bottom: 25px;
		max-width: 100%;
	}

	/* Target the element with class "relative" that also has a class starting with "mb-" */
	.text-image-stack .relative[class*="mb-"] {
		margin-bottom: 0 !important;
	}

	/* Forces the proper stacking order */
	.text-image-stack > .container {
		display: flex;
		flex-direction: column;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.text-image-mobile-bg.bg-dark-blue {
		background-color: #0F293E;
	}

	.text-image-mobile-bg.bg-dark-brown {
		background-color: #290B0B;
	}

	.text-image-mobile-bg.bg-burgundy {
		background-color: #6B313E;
	}

	.text-image-mobile-bg.bg-gold {
		background-color: #B8860B;
	}

	.text-image-mobile-bg.bg-copper {
		background-color: #B87333;
	}

	.text-image-mobile-bg.bg-periwinkle {
		background-color: #CCCCFF;
	}

	.text-image-mobile-bg.bg-deep-blue {
		background-color: #00008B;
	}

	.text-image-mobile-bg.bg-dark-red {
		background-color: #6B313E;
	}

	.text-image-mobile-bg.bg-white {
		background-color: #FFFFFF;
	}

	.text-image-mobile-bg.bg-black {
		background-color: #000000;
	}

	.text-image-container{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Specific styling for the 2024 Convite Banilejo design (burgundy background) */
.text-image-stack .tis-bg-image-cont.bg-burgundy {
	background-color: #6B313E;
}