/**
 * Section: Image Tout Component Styles
 * Figma reference: Home - Desktop Feature cards 3 (1:266) and Mobile (2:1258)
 * Layout: Desktop - image left, headline/description right; Mobile - stacked/centered
 */

.section-image-tout {
	width: 100%;
	background-color: var(--color-bg-white);
	padding: 0;
	margin: 0;
}

.section-image-tout__inner {
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 4rem;
	padding: 6rem 3rem;
}

.section-image-tout__image-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.section-image-tout__image-container {
	width: 100%;
	max-width: 600px;
}

/* Optional ACF “Image link URL” wraps the tout image(s) */
a.section-image-tout__image-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

a.section-image-tout__image-link:focus-visible {
	outline: 2px solid var(--color-teal);
	outline-offset: 4px;
	border-radius: 4px;
}

.section-image-tout__image {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

/* Desktop/Mobile image switching */
.section-image-tout__image--desktop {
	display: block;
}

.section-image-tout__image--mobile {
	display: none;
}

.section-image-tout__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 600px;
}

.section-image-tout__headline {
	/* Typography handled by global.css text classes if applied */
	margin: 0;
}

.section-image-tout__subheading {
	/* Typography handled by typog-h4 */
	margin: 0;
}

/* Download buttons alignment - left-aligned on desktop */
.section-image-tout__content .download-buttons-group {
	justify-content: flex-start;
}

.section-image-tout__description {
	/* Typography handled by global.css text classes if applied */
	margin: 0;
}

/* Text on right (image on left): 30px right margin on desktop */
@media (min-width: 1024px) {
	.section-image-tout:not(.section-image-tout--centered):not(.section-image-tout--image-right) .section-image-tout__headline,
	.section-image-tout:not(.section-image-tout--centered):not(.section-image-tout--image-right) .section-image-tout__description {
		margin-right: 30px;
	}
}

/* Centered layout variant */
.section-image-tout--centered .section-image-tout__inner {
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 119.89px 3rem 0 3rem; /* Top padding from Figma y:119.89 */
}

.section-image-tout--centered .section-image-tout__content {
	order: 1;
	text-align: center;
	max-width: 822px; /* From Figma layout_UK994R width */
}

.section-image-tout--centered .section-image-tout__headline {
	text-align: center;
}

.section-image-tout--centered .section-image-tout__description {
	text-align: center;
}

.section-image-tout--centered .section-image-tout__image-wrapper {
	order: 2;
	width: 100%;
	max-width: 892px; /* From Figma layout_0MF6UV width */
}

.section-image-tout--centered .section-image-tout__image-container {
	padding-bottom: 120px;
}

/* Image on right variant (desktop only) */
.section-image-tout--image-right .section-image-tout__inner {
	flex-direction: row-reverse;
}

.section-image-tout__footer {
	width: 100%;
	flex-basis: 100%;
	order: 999;
}

.section-image-tout__footer-header {
	/* Typography handled by typog-h3 */
	margin: 0 0 1rem 0;
}

.section-image-tout__footer-content {
	/* Typography handled by text-body */
	margin: 0;
}

/* ========================================
   MOBILE VERSION (below 1024px)
   ======================================== */
@media (max-width: 1023px) {
	.section-image-tout__inner {
		flex-direction: column;
		gap: 2rem;
		padding: 3rem 1.5rem;
	}

	.section-image-tout__image-wrapper {
		order: 1; /* Image appears first (on top) on mobile */
		width: 100%;
	}

	.section-image-tout__content {
		order: 2; /* Content appears second on mobile */
		text-align: center;
		max-width: 100%;
	}
	
	/* Download buttons centered on mobile */
	.section-image-tout__content .download-buttons-group {
		justify-content: center;
	}
	
	/* Show mobile image, hide desktop image on mobile */
	.section-image-tout__image--desktop {
		display: none;
	}
	
	.section-image-tout__image--mobile {
		display: block;
	}
	
	/* Centered layout mobile */
	.section-image-tout--centered .section-image-tout__inner {
		padding: 68px 24px 0 24px; /* Mobile top padding */
	}
	
	.section-image-tout--centered .section-image-tout__content {
		max-width: 327px; /* Mobile max width */
	}
	
	/* Reset image-right on mobile - image appears on top by default */
	.section-image-tout--image-right .section-image-tout__inner {
		flex-direction: column;
	}
	
	/* Mobile image on bottom variant */
	.section-image-tout--mobile-image-bottom .section-image-tout__image-wrapper {
		order: 2; /* Image appears second (below content) on mobile */
	}
	
	.section-image-tout--mobile-image-bottom .section-image-tout__content {
		order: 1; /* Content appears first (on top) on mobile */
	}

	.section-image-tout--centered .section-image-tout__image-container {
		padding-bottom: 60px;
	}
	
}