/* utilities/mobile-spacing.css — vertical rhythm on small screens */
@media ( max-width: 680px ) {
	:root {
		--section-padding-block: 1.25rem;
		--mobile-stack-gap: 0.75rem;
		--mobile-card-gap: 1rem;
		--mobile-block-gap: var( --mobile-card-gap );
	}

	.hero.wp-block-group,
	section.hero {
		display: flex;
		flex-direction: column;
		gap: var( --mobile-card-gap );
	}

	.hero > .container.hero-grid,
	.hero > .wp-block-group.container.hero-grid,
	.hero-grid,
	.hero-grid > .wp-block-group__inner-container {
		gap: var( --mobile-card-gap );
	}

	.hero-grid > .hero-login-card,
	.hero-grid > .hero-card.hero-login-card,
	.hero-copy > .hero-login-card,
	.hero-copy > .hero-card.hero-login-card {
		margin-top: 0;
	}

	.hero-copy,
	.hero-copy > .wp-block-group__inner-container {
		gap: var( --mobile-stack-gap );
	}

	.hero-copy__headline,
	.hero-copy__headline > .wp-block-group__inner-container {
		gap: var( --mobile-stack-gap );
	}

	.status-notice,
	.status-notice > .wp-block-group__inner-container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var( --mobile-stack-gap );
		grid-template-columns: unset;
	}

	.status-notice__links {
		justify-content: flex-start;
	}

	#courses .container > .status-notice {
		width: 100%;
	}

	body.home section.hero + section#courses {
		padding-top: 0;
	}

	#courses .section-heading.corporate {
		margin-bottom: 0;
	}

	.section > .container,
	.section > .wp-block-group.container {
		display: flex;
		flex-direction: column;
		gap: var( --mobile-block-gap );
	}

	.section .section-heading,
	#courses .section-heading.corporate,
	#courses .programs-cards,
	#courses .section-heading.end,
	#courses .programs-marquee {
		margin-top: 0;
		margin-bottom: 0;
	}

	#courses .status-notice {
		margin-top: 12px;
		margin-bottom: 10px;
	}

	.section-heading {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var( --mobile-stack-gap );
		margin-bottom: 0;
	}

	#courses .section-heading.end {
		align-items: flex-end;
	}

	.corporate-head__content {
		display: flex;
		flex-direction: column;
		gap: var( --mobile-stack-gap );
	}

	#courses .section-heading.corporate .corporate-head__content h2,
	#courses .section-heading.corporate .corporate-head__content .wp-block-heading {
		margin-bottom: 0;
	}

	.two-column,
	.two-column > .wp-block-group__inner-container {
		gap: var( --mobile-block-gap );
	}

	.feature-list,
	.feature-list > .wp-block-group__inner-container,
	.steps,
	.steps > .wp-block-group__inner-container,
	.card-grid,
	.card-grid > .wp-block-group__inner-container {
		gap: var( --mobile-card-gap );
	}

	.callout.split,
	.callout.split > .wp-block-group__inner-container {
		gap: var( --mobile-block-gap );
	}

	.cta-row,
	.cta-row > .wp-block-group__inner-container,
	#get-involved .cta-row.compact,
	#get-involved .cta-row.compact > .wp-block-group__inner-container {
		gap: var( --mobile-stack-gap );
	}

	.callout.split > .wp-block-group,
	.callout.split > .wp-block-group__inner-container > .wp-block-group {
		display: flex;
		flex-direction: column;
		gap: var( --mobile-stack-gap );
	}
}

@media ( max-width: 900px ) {
	:root {
		--mobile-stack-gap: 0.75rem;
		--mobile-card-gap: 1rem;
		--mobile-block-gap: var( --mobile-card-gap );
	}

	.hero.wp-block-group,
	section.hero {
		display: flex;
		flex-direction: column;
		gap: var( --mobile-card-gap );
	}

	.status-notice {
		margin-top: 0;
	}

	.hero-grid,
	.hero-grid > .wp-block-group__inner-container,
	.two-column,
	.two-column > .wp-block-group__inner-container,
	.callout.split,
	.callout.split > .wp-block-group__inner-container,
	.feature-list,
	.feature-list > .wp-block-group__inner-container,
	.steps,
	.steps > .wp-block-group__inner-container,
	.card-grid,
	.card-grid > .wp-block-group__inner-container {
		gap: var( --mobile-card-gap );
	}

	.hero-grid > .hero-login-card,
	.hero-grid > .hero-card.hero-login-card,
	.hero-copy > .hero-login-card,
	.hero-copy > .hero-card.hero-login-card {
		margin-top: 0;
	}

	body.home section.hero {
		gap: var( --mobile-card-gap );
	}

	#get-involved .cta-row.compact,
	#get-involved .cta-row.compact > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		gap: var( --mobile-stack-gap );
	}
}