/**
 * homepage.css
 * Front page only: hero, feature blocks, calls to action.
 * VUB Champions Academy
 */

/* Astra layout reset ------------------------------------------------------ */

/*
 * Astra lays out .ast-container with flexbox so the content area and sidebar
 * sit side by side. Our front page sections are direct children of that
 * container, so without this they line up horizontally instead of stacking.
 */
.home .site-content .ast-container {
	display: block;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.home .site-content #primary,
.home .site-content .content-area {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* Full-bleed sections ----------------------------------------------------- */

.vub-hero,
.vub-cta {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Hero -------------------------------------------------------------------- */

.vub-hero {
	position: relative;
	min-height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-block: 80px;
	background-color: var(--vub-primary);
	color: var(--vub-light);
}

/* Astra sets its own heading colours, so state ours explicitly. */
.vub-hero .vub-hero__title,
.vub-hero h1 {
	color: var(--vub-light);
	font-size: 3.25rem;
	line-height: 1.1;
	margin: 0 0 16px;
}

.vub-hero .vub-hero__subtitle {
	font-size: 1.25rem;
	line-height: 1.5;
	max-width: 620px;
	margin: 0 auto 32px;
	color: rgba( 255, 255, 255, 0.85 );
}

/* A navy button on a navy hero is invisible, so flip it to the accent. */
.vub-hero .vub-btn {
	background-color: var(--vub-secondary);
	color: var(--vub-dark);
}

.vub-hero .vub-btn:hover,
.vub-hero .vub-btn:focus {
	background-color: var(--vub-light);
	color: var(--vub-primary);
}

/* Feature grid ------------------------------------------------------------ */

#programs {
	padding-block: 80px;
}

.vub-features {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 32px;
	align-items: stretch;
}

.vub-features__item {
	min-width: 0; /* Let grid items shrink instead of overflowing. */
	padding: 32px;
	border-radius: 6px;
	background-color: #f7f8fa;
}

.vub-features__item h2 {
	font-size: 1.5rem;
	line-height: 1.25;
	margin: 0 0 12px;
	color: var(--vub-primary);
}

.vub-features__item p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--vub-muted);
}

/* Call to action ---------------------------------------------------------- */

.vub-cta {
	padding-block: 64px;
	text-align: center;
	background-color: var(--vub-secondary);
	color: var(--vub-dark);
}

.vub-cta h2 {
	color: var(--vub-dark);
	margin: 0 0 12px;
}

.vub-cta p {
	margin: 0 0 28px;
}

.vub-cta .vub-btn {
	background-color: var(--vub-primary);
	color: var(--vub-light);
}

.vub-cta .vub-btn:hover,
.vub-cta .vub-btn:focus {
	background-color: var(--vub-dark);
	color: var(--vub-light);
}