/**
 * Image Panel Headline Block Front-end CSS
 */

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

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

.iph-bg-image-cont.bg-burgundy {
	background-color: #800020;
}

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

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

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

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

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

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

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

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

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

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

.iph-container{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: 0;
	padding-left: 0;
}

/* Eyebrow Styles */
.image-panel-headline .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 */
.image-panel-headline .eyebrow-style-default {
	font-weight: 400;
	text-transform: uppercase;
}


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

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

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

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

.image-panel-headline .eyebrow-style-bold {
	font-weight: 700;
}

.image-panel-headline .eyebrow-style-elegant {
	font-style: italic;
}

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

.image-panel-headline .image-panel-headline-description,
.image-panel-headline .text-description {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	line-height: 21px;
	max-width: 580px;
}

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

/* Button Style 1: Default (Blue Background) */
.image-panel-headline .wp-block-button.is-style-default .wp-block-button__link {
	background-color: #A6B8E3;
	color: #000000;
	font-family: 'DM Sans', sans-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-panel-headline .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-panel-headline .wp-block-button.is-style-solid .wp-block-button__link {
	background-color: #AA632C;
	color: #FFFFFF;
	font-family: 'DM Sans', sans-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-panel-headline .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-panel-headline .wp-block-button.is-style-arrow .wp-block-button__link {
	background-color: transparent;
	color: inherit;
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	font-weight: 400;
	position: relative;
	border-radius: 0;
}

.image-panel-headline .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-panel-headline .wp-block-button.is-style-arrow .wp-block-button__link:hover::after {
	transform: translateX(5px);
}

/**
 * Image Panel Headline Main Layout CSS
 */

/* Main block structure */
.image-panel-headline {
	position: relative;
	display: flex;
	min-height: 500px;
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden;
	padding-bottom: 160px !important; /* Restore desktop padding */
}

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

.image-panel-headline.image-left .iph-bg-image-cont {
	right: 0;
	left: auto;
}

.image-panel-headline.image-right .iph-bg-image-cont {
	left: 0;
	right: auto;
}

/* Image container - Now 50% for 1:1 ratio */
.iph-image-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 480px;
	z-index: 1;
}

.image-panel-headline.image-left .iph-image-container {
	left: 0;
}

.image-panel-headline.image-right .iph-image-container {
	right: 0;
	left: auto;
}

/* Image styles */
.iph-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

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

/* Text content area - Now 50% for 1:1 ratio with adjusted padding to maintain spacing */
.text-content {
	width: 50%;
	margin-left: auto;
	position: relative;
	padding-top: 128px;
	padding-left: 64px; /* Reduced from 128px to account for smaller width */
	padding-right: 64px; /* Increased from 28px for better balance */
	padding-bottom: 56px;
	display: flex;
	justify-content: center;
}

.image-panel-headline.image-left .text-content {
	margin-left: auto;
	margin-right: 0;
	margin-top: 80px;
}

.image-panel-headline.image-right .text-content {
	margin-left: 0;
	margin-right: auto;
	padding-left: 64px; /* Consistent padding for right alignment */
	padding-right: 64px;
}

/* Mobile styles */
@media (max-width: 768px) {
	.image-panel-headline {
		flex-direction: column;
		min-height: auto;
		padding-top: 0 !important; /* Override padding only on mobile */
		padding-bottom: 0 !important; /* Override padding only on mobile */
	}

	.image-panel-headline .container {
		flex-direction: column;
		padding: 0;
		min-height: auto !important;
	}

	.image-panel-headline.image-left .text-content {
		margin-top: 0px;
	}
	/* Stack image on top */
	.iph-image-container {
		position: relative !important;
		width: 100% !important;
		height: 240px !important; /* Slightly shorter on mobile */
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
	}

	/* Text content takes full width below image */
	.text-content {
		width: 100% !important;
		margin: 0 !important;
		padding: 32px 24px !important;
		position: relative !important;
	}

	/* Background color section takes full width */
	.iph-bg-image-cont {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: 100px !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
	}

	/* Remove all padding on mobile */
	.image-panel-headline.pt-\[192px\],
	.image-panel-headline.pb-\[160px\] {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Adjust button layout for mobile */
	.image-panel-headline .wp-block-buttons {
		justify-content: flex-start;
		margin-top: 20px;
	}

	/* Make the text area for specific color - like in the image */
	.image-panel-headline .iph-bg-image-cont.bg-burgundy {
		background-color: #800020 !important;
	}

	/* Make some extra space at the bottom */
	.text-content > div {
		padding-bottom: 20px;
	}
}


/* Tablet/Medium screens - Increase padding even more for narrower screens */
@media (max-width: 1400px) and (min-width: 1201px) {
	.image-panel-headline.image-left .text-content {
		padding-left: 170px !important;
	}

}

/* Tablet/Medium screens - Increase padding even more for narrower screens */
@media (max-width: 1200px) and (min-width: 769px) {
	.image-panel-headline.image-left .text-content {
		padding-left: 150px !important; /* Even more padding for smaller screens */
	}

	.image-panel-headline.image-right .text-content {
		padding-right: 150px !important;
	}
}

/* Small tablets - Maximum padding before mobile breakpoint */
@media (max-width: 992px) and (min-width: 769px) {
	.image-panel-headline.image-left .text-content {
		padding-left: 150px !important; /* Maximum padding to ensure clearance */
	}

	.image-panel-headline.image-right .text-content {
		padding-right: 180px !important;
	}
}