/*
 * banner.css — Home page: Banner section.
 *
 * Centered layout: tagline → heading → description → CTA → image, all
 * centered, in that document order at every breakpoint (no flex/grid
 * reordering needed — see template-parts/home/banner.php).
 *
 * Only enqueued on the front page / Home Page template (see inc/enqueue.php)
 * — keeps this section's CSS out of every other page's payload.
 *
 * @package Greenova
 */

.home-banner {
	padding-block: 80px;
	text-align:    center;
}

.home-banner__content {
	max-width:     820px;
	margin-inline: auto;
}

.home-banner__tagline {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      13px;
	font-weight:    600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          #55606a;
	margin:         0 0 16px;
}

.home-banner__heading {
	font-size: 4.25rem;
	font-weight: 400;
	line-height: 4.675rem;
	color: #000000;
	margin:      0 0 20px;
}

.home-banner__description {
	font-size:     1.125rem;
	line-height:   1.6rem;
	font-weight:   400;
	color:         #55606a;
	max-width:     560px;
	margin:        0 auto 32px;
}

.home-banner__image-wrap {
	display:         flex;
	justify-content: center;
	margin-top:      56px;
}

.home-banner__image {
	width:         100%;
	max-width:     980px;
	height:        auto;
	border-radius: 20px;
}

/* =============================================================================
   CTA Buttons wrapper — the .cta-button component itself (layout, hover,
   icon, alignment modifiers) is global now, in assets/css/custom.css, since
   more than one page's sections reuse it (see Solutions page banner).
   ============================================================================= */

.home-banner__cta {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             16px;
}

/* =============================================================================
   Responsive — same content order throughout; only spacing/scale change.
   ============================================================================= */

@media ( max-width: 991.98px ) {
	.home-banner {
		padding-block: 56px;
	}

	.home-banner__heading {
		font-size: 2.125rem;
	}

	.home-banner__image-wrap {
		margin-top: 40px;
	}
}

@media ( max-width: 575.98px ) {
	.home-banner {
		padding-block: 40px;
	}

	.home-banner__tagline {
		font-size: 11px;
	}

	.home-banner__heading {
		font-size:   1.625rem;
		line-height: 1.25;
	}

	.home-banner__description {
		font-size: 1rem;
		max-width: none;
	}

	.home-banner__image-wrap {
		margin-top: 32px;
	}

	.home-banner__cta {
		flex-direction: column;
		align-items:    center;
	}
}