/**
 * Section: Text Row Component Styles
 * Figma reference: Desktop (1:2448) and Mobile (1:2182)
 * Layout: flow-based so height is driven by headline + blocks; no absolute positioning.
 */

.section-text-row {
	width: 100%;
	background-color: #E3E4FE; /* Light purple/blue background from Figma */
	padding: 0;
	margin: 0;
}

.section-text-row__container {
	max-width: 1280px;
	margin: 0 auto;
	width: 100%;
	padding: 0;
}

/* ========================================
   DESKTOP VERSION (1024px+)
   ======================================== */
@media (min-width: 1024px) {
	.section-text-row__container {
		display: flex;
		align-items: flex-start;
		gap: 81px; /* Space between headline and blocks (Figma: 387 - 93 - 213) */
		padding: 32.89px 93px 48px 93px;
	}

	.section-text-row__headline {
		flex-shrink: 0;
		width: 213px;
	}

	.section-text-row__title {
		/* Typography handled by .typog-h3 */
		margin: 0;
		white-space: pre-line; /* Preserve line breaks */
	}

	.section-text-row__blocks {
		display: flex;
		flex-direction: column;
		gap: 0;
		flex: 1;
		min-width: 0;
		max-width: 800px;
	}

	.text-block {
		display: flex;
		flex-direction: column;
		gap: 16px; /* Gap between title and content from Figma */
		padding-top: 24px; /* Top padding from Figma */
	}

	.text-block:first-child {
		padding-top: 0; /* First block has no top padding */
	}

	.text-block__title {
		/* Typography handled by .text-subtitle-bold-md (H4 style) */
		/* Figma: 20px, Bricolage Grotesque, bold, letter-spacing -0.5% */
		color: var(--color-primary-text);
		margin: 0;
		width: 556px; /* Width from Figma for first block */
	}

	.text-block:last-child .text-block__title {
		width: 607px; /* Width from Figma for second block */
	}

	.text-block__content {
		/* Typography handled by .text-body */
		/* Figma: 18px, Bricolage Grotesque, letter-spacing -0.5% */
		color: var(--color-primary-text);
		margin: 0;
		width: 100%;
	}

	.text-block__content p {
		margin: 0 0 1em 0;
	}

	.text-block__content p:last-child {
		margin-bottom: 0;
	}
}

/* ========================================
   MOBILE VERSION (below 1024px)
   ======================================== */
@media (max-width: 1023px) {
	.section-text-row__container {
		padding: 39px 24px 48px 24px;
	}

	.section-text-row__headline {
		text-align: center;
		margin-bottom: 38px; /* Space between headline and blocks (131 - 39 - 54 = 38px) */
		width: 100%;
	}

	.section-text-row__title {
		/* Typography handled by .typog-h3 */
		margin: 0 auto;
		max-width: 327px;
		white-space: pre-line; /* Preserve line breaks */
		text-align: center;
	}

	.section-text-row__blocks {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100%;
		max-width: 327px;
		margin: 0 auto;
	}

	.text-block {
		display: flex;
		flex-direction: column;
		gap: 16px; /* Gap between title and content from Figma */
		padding-top: 24px; /* Top padding from Figma */
	}

	.text-block:first-child {
		padding-top: 0; /* First block has no top padding */
	}

	.text-block__title {
		/* Typography handled by .text-subtitle-bold-md (H4 style) */
		/* Figma: 16px, Bricolage Grotesque, bold, letter-spacing -0.5% */
		color: var(--color-primary-text);
		margin: 0;
		width: 100%;
		font-size: 16px;
		line-height: 1.4500000476837158em;
	}

	.text-block__content {
		/* Typography handled by .text-body */
		/* Figma: 14px, Bricolage Grotesque, letter-spacing -0.5% */
		color: var(--color-primary-text);
		margin: 0;
		width: 100%;
		font-size: 14px;
		line-height: 1.5399999618530273em;
	}

	.text-block__content p {
		margin: 0 0 1em 0;
	}

	.text-block__content p:last-child {
		margin-bottom: 0;
	}
}