/*
 * Our Story — frontend styles.
 *
 * Pixel values below come directly from this build's supplied spec
 * (background, container width, section padding, image sizes, typography).
 *
 * @package Greenova
 */

.our-story-section {
	background-color: #F6F9F3;
	padding-block:     120px;
}

.our-story-section__inner {
	max-width: 1320px;
	margin:    0 auto;
}

/*
 * Two SEPARATE grids, one per row — the top row's text/image split (58/42,
 * both fluid) and the bottom row's fixed 533px image + fluid remainder
 * need different column tracks, which a single grid spanning both rows
 * can't express (every row in one grid shares the same columns).
 */
.our-story-section__row--top {
	display:               grid;
	grid-template-columns: 58% 42%;
	column-gap:  90px;
	align-items: center;
}

.our-story-section__row--bottom {
	display:               grid;
	grid-template-columns: 533px minmax(0, 1fr);
	column-gap:  64px;
	align-items: start;
	margin-top:  70px;
}

/* =============================================================================
   Typography
   ============================================================================= */

.our-story-section__tagline {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      80px;
	font-weight:    500;
	line-height:    100px;
	letter-spacing: -4px;
	color:          #000000;
	margin:         0;
}

.our-story-section__heading {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      56px;
	font-weight:    400;
	line-height:    63px;
	letter-spacing: -2px;
	color:          #000000;
	margin:         24px 0 24px;
}

.our-story-section__content,
.our-story-section__right-content {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   18px;
	font-weight: 400;
	line-height: 28.8px;
	color:       #000000;
	max-width:   742px;
}

.our-story-section__content p {
	margin: 0 0 20px;
}

.our-story-section__right-content p {
	margin: 0 0 24px;
}

.our-story-section__content > *:last-child,
.our-story-section__right-content > *:last-child {
	margin-bottom: 0;
}

/* =============================================================================
   Images — fixed size, never stretched.
   ============================================================================= */

.our-story-section__image {
	display:       block;
	width:         533px;
	height:        317px;
	max-width:     100%;
	object-fit:    cover;
	border-radius: 24px;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 1199.98px ) {
	/* Below the 1320px container width, add back a safe side gutter — the
	   desktop spec's 0 horizontal padding relies on the container itself
	   being narrower than the viewport. */
	.our-story-section__inner {
		padding-inline: 24px;
	}
}

@media ( max-width: 1199.98px ) and ( min-width: 768px ) {
	.our-story-section {
		padding-block: 80px;
	}

	.our-story-section__row--top,
	.our-story-section__row--bottom {
		grid-template-columns: 1fr 1fr;
		column-gap: 48px;
	}

	.our-story-section__row--bottom {
		margin-top: 48px;
	}

	.our-story-section__tagline {
		font-size:   3.5rem;
		line-height: 1.15;
	}

	.our-story-section__heading {
		font-size:   2.25rem;
		line-height: 1.2;
	}

	.our-story-section__content,
	.our-story-section__right-content {
		max-width: none;
	}
}

@media ( max-width: 767.98px ) {
	.our-story-section {
		padding-block: 60px;
	}

	.our-story-section__row--top,
	.our-story-section__row--bottom {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	.our-story-section__row--bottom {
		margin-top: 32px;
	}

	.our-story-section__tagline {
		font-size:      2.5rem;
		line-height:    1.15;
		letter-spacing: -0.02em;
	}

	.our-story-section__heading {
		font-size:   1.5rem;
		line-height: 1.25;
		margin:      16px 0 16px;
	}

	.our-story-section__content,
	.our-story-section__right-content {
		font-size:   1rem;
		line-height: 1.6;
		max-width:   none;
	}

	.our-story-section__image {
		width:  100%;
		height: auto;
		aspect-ratio: 533 / 317;
	}
}