/* Custom Layout Adjustments for Index Page Header */

/* Override the boxed layout for page header to allow custom positioning */
body.tt-boxed #page-header .page-header-inner.tt-wrap {
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 10vw !important;  /* Increased to move content inward */
	padding-right: 10vw !important; /* Increased to move content inward */
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: visible !important;
}

body:not(.tt-boxed) .page-header-inner, 
.page-header-inner:not(.tt-wrap) {
	padding-left: 10vw !important;
	padding-right: 10vw !important;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: visible !important;
}

/* Allow page header to overflow */
#page-header {
	overflow: visible !important;
}

/* Move the caption container itself to the left and remove max-width constraint */
#page-header .ph-caption.max-width-1000 {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 5vw !important; /* Reduced spacing to give more room for slideshow */
	padding-left: 0 !important;
	flex: 0 1 auto;
	position: relative;
	top: -100px !important; /* Move paragraphs higher to align with slideshow */
	z-index: 3;
	order: 2; /* Paragraphs appear second (on the right in HTML, but we want them on left visually) */
}

/* Adjust image positioning to work with flexbox */
.ph-image {
	position: relative !important;
	top: -100px !important; /* Center slideshow vertically */
	right: auto !important;
	flex: 0 0 auto;
	flex-shrink: 0 !important;
	z-index: 2;
	order: 3; /* Image appears third (on the left in HTML, but we want it on right visually) */
	width: 900px !important; /* Smaller container for 3 slides */
	min-width: 900px !important;
	overflow: visible !important;
}

.ph-image .ph-image-inner {
	width: 100% !important;
	overflow: visible !important;
}

/* Responsive width adjustments for slideshow container */
@media (max-width: 1920px) {
	.ph-image {
		width: 750px !important;
		min-width: 750px !important;
		top: -80px !important;
	}
	
	#page-header .ph-caption.max-width-1000 {
		top: -80px !important;
	}
}

@media (max-width: 1600px) {
	.ph-image {
		width: 650px !important;
		min-width: 650px !important;
		top: -60px !important;
	}
	
	#page-header .ph-caption.max-width-1000 {
		top: -60px !important;
	}
}

@media (max-width: 1400px) {
	.ph-image {
		width: 600px !important;
		min-width: 600px !important;
		top: -50px !important;
	}
	
	#page-header .ph-caption.max-width-1000 {
		top: -50px !important;
	}
}

/* Responsive adjustments */
@media (max-width: 1400px) {
	body.tt-boxed #page-header .page-header-inner.tt-wrap {
		padding-left: 8vw !important;
		padding-right: 8vw !important;
	}
	
	body:not(.tt-boxed) .page-header-inner, 
	.page-header-inner:not(.tt-wrap) {
		padding-left: 8vw !important;
		padding-right: 8vw !important;
	}
	
	#page-header .ph-caption.max-width-1000 {
		margin-right: 8vw !important;
	}
}

@media (max-width: 1024px) {
	body.tt-boxed #page-header .page-header-inner.tt-wrap {
		padding-left: 4vw !important;
		padding-right: 4vw !important;
		flex-direction: column;
		align-items: flex-start;
	}
	
	body:not(.tt-boxed) .page-header-inner, 
	.page-header-inner:not(.tt-wrap) {
		padding-left: 4vw !important;
		padding-right: 4vw !important;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.ph-image {
		order: 1; /* Image on top on mobile */
		margin-bottom: 4vw !important;
		width: 640px !important; /* For 4 slides: 640 ÷ 4 × 2 = 320px center */
		min-width: 640px !important;
	}
	
	#page-header .ph-caption.max-width-1000 {
		order: 2; /* Paragraphs below image on mobile */
		margin-right: 0 !important;
	}
}

@media (max-width: 768px) {
	.ph-image {
		width: 480px !important; /* For 3 slides: 480 ÷ 3 × 2 = 320px center */
		min-width: 480px !important;
	}
}

@media (max-width: 540px) {
	.ph-image {
		width: 100% !important;
		max-width: 375px !important; /* For 3 slides: 375 ÷ 3 × 2 = 250px center (50% viewport) */
		min-width: auto !important;
	}
}