/**
 * Section: Text Tout Component Styles
 * Figma reference: Desktop (1:1931)
 * Supports theme variants: purple (#BB8CF8 with white text) and light-purple (#E3E4FE with dark text)
 */

.section-text-tout {
	width: 100%;
	padding: 0;
	margin: 0;
}

/* Purple theme (default) */
.section-text-tout--purple {
	background-color: #BB8CF8;
}

/* Light purple theme */
.section-text-tout--light-purple {
	background-color: #E3E4FE;
}

.section-text-tout__container {
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* ========================================
   DESKTOP VERSION (1024px+)
   ======================================== */
@media (min-width: 1024px) {
	.section-text-tout__container {
		padding: 110px 200px 110px 200px; /* Default padding */
		min-height: auto;
	}

	/* Light purple theme padding (119px top/bottom, 184px sides) */
	.section-text-tout--light-purple .section-text-tout__container {
		padding: 119px 184px;
	}

	/* Purple theme with h3 padding (119px top/bottom, 184px sides from Figma) */
	.section-text-tout--purple .section-text-tout__container:has(.section-text-tout__heading-h3) {
		padding: 119px 184px;
		padding-top: 138px; /* 119px + 19px from text container padding-top */
	}

	/* Text container padding-top adjustment for Hero 3 (19px from Figma) */
	.section-text-tout--purple .section-text-tout__container:has(.section-text-tout__heading-h3) > *:first-child {
		margin-top: 19px;
	}

	.section-text-tout__heading {
		/* Typography handled by .typog-h2 */
		/* Figma: 52px, Bricolage Grotesque, letter-spacing -5% */
		margin: 0;
		text-align: center;
		max-width: 880px; /* Default width from Figma */
	}

	/* Light purple theme heading width (790px from Figma Hero 2) */
	.section-text-tout--light-purple .section-text-tout__heading {
		max-width: 790px;
	}

	.section-text-tout__heading-h3 {
		/* Typography handled by .typog-h3 */
		/* Figma: 36px, Instrument Serif, letter-spacing -1% */
		margin: 0;
		text-align: center;
		max-width: 1210px; /* Width from Figma Hero 3 */
	}

	.section-text-tout__body {
		/* Typography handled by .text-body */
		/* Figma: 18px, Bricolage Grotesque, letter-spacing -0.5% */
		margin: 0;
		text-align: center;
		max-width: 812px; /* Default width from Figma */
	}

	/* Light purple theme body width (790px from Figma Hero 2) */
	.section-text-tout--light-purple .section-text-tout__body {
		max-width: 790px;
	}

	/* Purple theme colors */
	.section-text-tout--purple .section-text-tout__heading,
	.section-text-tout--purple .section-text-tout__heading-h3,
	.section-text-tout--purple .section-text-tout__body {
		color: #FFFFFF; /* White text on purple background */
	}

	/* Light purple theme colors */
	.section-text-tout--light-purple .section-text-tout__heading,
	.section-text-tout--light-purple .section-text-tout__heading-h3,
	.section-text-tout--light-purple .section-text-tout__body {
		color: #2B2B2B; /* Dark text on light purple background */
	}

	/* Spacing between elements */
	.section-text-tout__heading + .section-text-tout__heading-h3,
	.section-text-tout__heading + .section-text-tout__body {
		margin-top: 38px; /* Default gap for purple theme */
	}

	.section-text-tout__heading-h3 + .section-text-tout__body {
		margin-top: 24px; /* Gap between h3 and body */
	}

	.section-text-tout__figure {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin: 60px 0;
		padding: 0;
	}

	.section-text-tout__container > .section-text-tout__figure:first-child {
		margin-top: 0;
	}

	.section-text-tout__image-img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	/* Light purple theme specific spacing (49px gap from Figma) */
	.section-text-tout--light-purple .section-text-tout__heading + .section-text-tout__body {
		margin-top: 49px;
	}

	.section-text-tout__downloads {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.section-text-tout__container > .section-text-tout__downloads:first-child {
		margin-top: 0;
	}

	.section-text-tout__heading + .section-text-tout__downloads,
	.section-text-tout__body + .section-text-tout__downloads {
		margin-top: 38px;
	}

	.section-text-tout__heading-h3 + .section-text-tout__downloads {
		margin-top: 24px;
	}

	.section-text-tout__figure + .section-text-tout__body,
	.section-text-tout__figure + .section-text-tout__downloads {
		margin-top: 0;
	}

	.section-text-tout--light-purple .section-text-tout__heading + .section-text-tout__downloads {
		margin-top: 49px;
	}
}

/* ========================================
   MOBILE VERSION (below 1024px)
   ======================================== */
@media (max-width: 1023px) {
	.section-text-tout__container {
		padding: 74px 24px 74px 24px; /* Top and bottom padding */
		min-height: auto;
	}

	.section-text-tout__heading {
		/* Typography handled by .typog-h2 */
		/* Mobile: 32px, Bricolage Grotesque, letter-spacing -5% */
		margin: 0;
		text-align: center;
		width: 100%;
		max-width: 327px;
	}

	.section-text-tout__heading-h3 {
		/* Typography handled by .typog-h3 */
		/* Mobile: 27px, Instrument Serif, letter-spacing -1% */
		margin: 0;
		text-align: center;
		width: 100%;
		max-width: 327px;
	}

	.section-text-tout__body {
		/* Typography handled by .text-body */
		/* Mobile: 14px, Bricolage Grotesque, letter-spacing -0.5% */
		margin: 0;
		text-align: center;
		width: 100%;
		max-width: 327px;
	}

	/* Purple theme colors */
	.section-text-tout--purple .section-text-tout__heading,
	.section-text-tout--purple .section-text-tout__heading-h3,
	.section-text-tout--purple .section-text-tout__body {
		color: #FFFFFF; /* White text on purple background */
	}

	/* Light purple theme colors */
	.section-text-tout--light-purple .section-text-tout__heading,
	.section-text-tout--light-purple .section-text-tout__heading-h3,
	.section-text-tout--light-purple .section-text-tout__body {
		color: #2B2B2B; /* Dark text on light purple background */
	}

	/* Light purple theme mobile padding (34px top/bottom, centered from Figma) */
	.section-text-tout--light-purple .section-text-tout__container {
		padding: 34px 24px;
	}

	/* Purple theme with h3 mobile padding-top adjustment (19px from Figma) */
	.section-text-tout--purple .section-text-tout__container:has(.section-text-tout__heading-h3) > *:first-child {
		margin-top: 19px;
	}

	/* Spacing between elements on mobile */
	.section-text-tout__heading + .section-text-tout__heading-h3,
	.section-text-tout__heading + .section-text-tout__body {
		margin-top: 23px; /* Mobile gap */
	}

	.section-text-tout__heading-h3 + .section-text-tout__body {
		margin-top: 23px; /* Mobile gap */
	}

	.section-text-tout__figure {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin: 40px 0;
		padding: 0;
	}

	.section-text-tout__container > .section-text-tout__figure:first-child {
		margin-top: 0;
	}

	.section-text-tout__image-img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	.section-text-tout__figure + .section-text-tout__body,
	.section-text-tout__figure + .section-text-tout__downloads {
		margin-top: 0;
	}

	.section-text-tout__downloads {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.section-text-tout__container > .section-text-tout__downloads:first-child {
		margin-top: 0;
	}

	.section-text-tout__heading + .section-text-tout__downloads,
	.section-text-tout__body + .section-text-tout__downloads {
		margin-top: 23px;
	}

	.section-text-tout__heading-h3 + .section-text-tout__downloads {
		margin-top: 23px;
	}
}