/**
 * Banner Image Block Styles
 *
 * @package made-to-thrive-2026-base
 * @since 1.0.0
 */

/* Container */
.banner-image {
	width: 100%;
	position: relative;
	overflow: hidden;
	padding: 0 0 74px;
}

.banner-image-container {
	position: relative;
	width: 88%;
	min-height: 819px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	max-width: 1228px;
}

/* Background Image */
.banner-image-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
	border-radius: 12px;
}

/* Mobile Image - Hidden by default, shown at mobile breakpoint */
.banner-image-mobile {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Content Overlay */
.banner-image-content {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	padding: 0 0 0 0;
}

/* Title - Positioned in upper right */
.banner-image-title-wrapper {
	position: absolute;
	top: 3.7rem;
	right: 0;
	max-width: 50%;
	z-index: 3;
}

.banner-image-title-shadow {
	position: absolute;
	width: 110%;
	height: 100%;
	background: #4C4C3B;
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	top: 10px;
	left: -10px;
	z-index: 1;
}

.banner-image-title {
	margin: 0;
	padding: 0.7rem 2rem 1rem;
	font-size: 35px;
	line-height: 41px;
	text-align: left;
	position: relative;
	background: #C1B588;
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	color: #4C4C3B;
	z-index: 2;
}
/* Subtitle - Different alignment per line */
.banner-image-subtitle {
	margin: -55px auto 0;
	padding: 0;
	font-size: 60px;
	font-weight: 400;
	line-height: 37px;
	color: #F8F2DF;
	position: absolute;
	left: 0;
	max-width: 100%;
	z-index: 3;
	font-family: 'Palmer Lake Print';
	transform: rotate(-8deg);
	width: 100%;
	max-width: 255px;
	right: 52px;
}
.banner-image-subtitle br {
	display:none;
}

.banner-image-subtitle .subtitle-line {
	display: block;
}

.banner-image-subtitle .subtitle-line-1 {
	text-align: left;
	padding: 0 0 0 49px;
}

.banner-image-subtitle .subtitle-line-2 {
	text-align: center;
}

.banner-image-subtitle .subtitle-line-3 {
	text-align: right;
}
@media (max-width:1280px) {
	.banner-image-title-wrapper {
		max-width:55%;
	}
}
@media (max-width:1140px) {
	.banner-image-title-wrapper {
		max-width:60%;
	}
}
/* Responsive Design - Mobile Breakpoint */
@media (max-width: 768px) {
	.banner-image-container {
		min-height: 417px;
		border-radius: 12px;
		overflow: hidden;
	}

	/* Hide desktop background image */
	.banner-image-background {
		background-image: none !important;
	}

	/* Show mobile image */
	.banner-image-mobile {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	/* Adjust title positioning for mobile */
	.banner-image-title-wrapper {
		top: 130px;
		right: 0;
		max-width: 60%;
		left: 0;
		margin: auto;
	}
	.banner-image-title {
		padding: 0;
		font-size: 25px;
		line-height: 23px;
		color: #F8F2DF;
		text-align: center;
		background: transparent;
	}
	.banner-image-title-shadow {
		display:none;
	}

	/* Adjust subtitle positioning for mobile */
	.banner-image-subtitle {
		padding: 0;
		max-width: 120px;
		font-size: 26px;
		line-height: 0.7;
		top: inherit;
		bottom: -59px;
	}
	.banner-image-subtitle .subtitle-line-1 {
    text-align: left;
    padding: 0 0 0 20px;
}
}

/* Extra Small Devices */
@media (max-width: 500px) {
	.banner-image-container {
       width: 93%;
       height: auto;
       aspect-ratio: 8/10;
    }
	.banner-image-subtitle {
        padding: 0;
        max-width: 120px;
        font-size: 26px;
        line-height: 0.7;
        top: inherit;
        bottom: 89px;
        right: 0;
    }
	.banner-image {
		padding-bottom:30px;
	}
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
	.banner-image-title,
	.banner-image-subtitle {
		text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.6);
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.4);
		padding: 1rem 1.5rem;
		border: 2px solid #ffffff;
	}
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	.banner-image-background,
	.banner-image-mobile {
		transition: none;
	}
}

/* Print Styles */
@media print {
	.banner-image-background,
	.banner-image-mobile {
		display: none;
	}

	.banner-image-title,
	.banner-image-subtitle {
		color: #000000;
		text-shadow: none;
		position: static;
		transform: none;
		background: transparent;
		border: none;
	}
}