/**
 * responsive.css
 * Breakpoint overrides. Loaded last so these rules win.
 * VUB Champions Academy
 *
 * Selectors here are scoped the same way as in homepage.css so they carry
 * enough specificity to override the desktop rules.
 */

/* Tablet and below -------------------------------------------------------- */

@media (max-width: 921px) {

	.vub-features {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	#programs {
		padding-block: 56px;
	}

	.vub-hero {
		min-height: 420px;
		padding-block: 64px;
	}

	.vub-hero .vub-hero__title,
	.vub-hero h1 {
		font-size: 2.25rem;
	}
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 544px) {

	.vub-container {
		padding-inline: 16px;
	}

	.vub-features {
		grid-template-columns: minmax( 0, 1fr );
		gap: 20px;
	}

	#programs {
		padding-block: 40px;
	}

	.vub-features__item {
		padding: 24px;
	}

	.vub-hero {
		min-height: 340px;
		padding-block: 48px;
	}

	.vub-hero .vub-hero__title,
	.vub-hero h1 {
		font-size: 1.75rem;
	}

	.vub-hero .vub-hero__subtitle {
		font-size: 1rem;
	}

	.vub-cta {
		padding-block: 48px;
	}

	.site-header .custom-logo-link img {
		max-height: 44px;
	}
}