/* =============================================================================
   responsive.css - Mobile-first breakpoints
   ============================================================================= */

/* ── 1280px: wide containers ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
	.footer-columns { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-2xl); }
	.primary-menu > li > a { padding: 0.5rem 0.7rem; font-size: 0.82rem; }
}

/* ── 1280px: collapse primary menu to hamburger (10 nav items need the room) ─ */
@media (max-width: 1280px) {
	.primary-menu { display: none; }
	.menu-toggle  { display: flex; }
	.nav-cta      { display: none; }
}

/* ── 1024px: tablet landscape ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
	/* Layout */
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }

	/* Stats */
	.stats-grid    { grid-template-columns: repeat(2, 1fr); }
	.hero__stats   { gap: var(--sp-xl); }

	/* Programs / News */
	.programs-grid { grid-template-columns: repeat(2, 1fr); }
	.news-grid     { grid-template-columns: repeat(2, 1fr); }
	.sectors-grid  { grid-template-columns: repeat(2, 1fr); }

	/* Quick Access */
	.quick-access-grid { grid-template-columns: repeat(2, 1fr); }

	/* Footer */
	.footer-columns { grid-template-columns: 1fr 1fr; }
}

/* ── 768px: tablet portrait ───────────────────────────────────────────────── */
@media (max-width: 768px) {
	:root {
		--container-pad: 1rem;
		--sp-4xl: 4rem;
		--sp-3xl: 3rem;
	}

	/* Nav: hide desktop menu, show hamburger */
	.primary-menu { display: none; }
	.menu-toggle  { display: flex; }
	.top-bar__contact { display: none; }
	/* Make room for the two CTAs on small screens */
	.top-bar .social-links { display: none; }
	.top-bar__cta { padding: .3rem .75rem; }

	/* Hero */
	.hero { min-height: 75vh; }
	.hero__ctas { flex-direction: column; align-items: flex-start; }
	.hero__stats { gap: var(--sp-lg); }

	/* Grids */
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
	.stats-grid     { grid-template-columns: repeat(2, 1fr); }
	.quick-access-grid { grid-template-columns: repeat(2, 1fr); }
	.programs-grid  { grid-template-columns: 1fr; }
	.news-grid      { grid-template-columns: 1fr; }
	.sectors-grid   { grid-template-columns: 1fr; }

	/* Footer */
	.footer-columns {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-xl);
		padding-block: var(--sp-3xl);
	}
	.footer-tagline { max-width: 100%; }
	.footer-bottom .container { flex-direction: column; text-align: center; }

	/* Page hero */
	.page-hero { padding-block: var(--sp-3xl) var(--sp-2xl); }
}

/* ── 640px: large phone ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
	/* Stats */
	.stats-grid    { grid-template-columns: repeat(2, 1fr); }
	.hero__stats   { flex-wrap: wrap; gap: var(--sp-lg); }
	.hero__stat-item { flex: 1 1 40%; }

	/* Quick access: single column */
	.quick-access-grid { grid-template-columns: 1fr 1fr; }

	/* Footer: stack all */
	.footer-columns { grid-template-columns: 1fr; gap: var(--sp-2xl); }

	/* Buttons */
	.btn-lg { padding: 0.875rem 1.5rem; }

	/* Section header */
	.section-header h2 { font-size: var(--fs-3xl); }

	/* Top bar */
	.top-bar__right { gap: var(--sp-sm); }
}

/* ── 480px: small phone ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
	:root { --container-pad: 0.875rem; }

	.hero { min-height: 65vh; }
	.stats-grid { grid-template-columns: 1fr 1fr; }
	.quick-access-grid { grid-template-columns: 1fr; }
	.hero__ctas .btn { width: 100%; justify-content: center; }

	/* Notice meta: stack */
	.notice-item { flex-direction: column; gap: var(--sp-md); }
	.notice-item__icon { width: 40px; height: 40px; }

	/* Contact card grid single column */
	.contact-cards-grid { grid-template-columns: 1fr; }

	/* Filter bar: scrollable */
	.filter-bar {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--sp-xs);
	}
	.filter-btn { flex-shrink: 0; }
}

/* ── Inner pages (Employers/About/Progress/TVET/Contact) responsive ──────── */
@media (max-width: 1024px) {
	.pg-hero-split        { grid-template-columns: 1fr; }
	.pg-support-grid      { grid-template-columns: 1fr; }
	.pg-countries         { grid-template-columns: repeat(4, 1fr); }
	.pg-steps             { grid-template-columns: repeat(2, 1fr); }
	.pg-next__grid        { grid-template-columns: 1fr; }
	.pg-inquiry           { grid-template-columns: 1fr; }
	.pg-greenbox          { grid-template-columns: 1fr; }
	.about-intro          { grid-template-columns: 1fr; }
	.about-vm             { grid-template-columns: 1fr; }
	.about-values__grid   { grid-template-columns: repeat(2, 1fr); }
	.about-regions        { grid-template-columns: repeat(3, 1fr); }
	.about-region-stats   { grid-template-columns: repeat(2, 1fr); }
	.about-hierarchy      { grid-template-columns: repeat(2, 1fr); }
	.rp-annual-grid       { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
	.rp-list-grid         { grid-template-columns: 1fr; }
	.contact-faq-grid     { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.pg-countries         { grid-template-columns: repeat(2, 1fr); }
	.pg-steps             { grid-template-columns: 1fr 1fr; }
	.pg-next__stats-grid  { grid-template-columns: 1fr 1fr; }
	.pg-greenbox__stats   { grid-template-columns: 1fr 1fr; }
	.about-messages .about-message,
	.about-messages .about-message.is-rev { grid-template-columns: 1fr; }
	.about-messages .about-message.is-rev .about-message__person { order: 0; }
	.about-values__grid   { grid-template-columns: 1fr 1fr; }
	.about-regions        { grid-template-columns: repeat(2, 1fr); }
	.about-hierarchy      { grid-template-columns: 1fr 1fr; }
	.tvet-banner          { flex-direction: column; align-items: flex-start; }
	.tvet-apex            { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
	.pg-hero-stats__grid  { grid-template-columns: 1fr; }
	.pg-steps             { grid-template-columns: 1fr; }
	.pg-greenbox__stats   { grid-template-columns: 1fr; }
	.about-values__grid   { grid-template-columns: 1fr; }
	.about-regions        { grid-template-columns: 1fr; }
	.about-region-stats   { grid-template-columns: 1fr 1fr; }
	.about-hierarchy      { grid-template-columns: 1fr; }
}

/* ── Homepage responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.home-roles__grid     { grid-template-columns: repeat(2, 1fr); }
	.home-why__grid       { grid-template-columns: repeat(2, 1fr); }
	.home-flagship__grid  { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
	.home-sectors__grid   { grid-template-columns: repeat(3, 1fr); }
	.home-intl__grid      { grid-template-columns: 1fr; }
	.home-services__grid  { grid-template-columns: repeat(2, 1fr); }
	.home-services__secondary { grid-template-columns: repeat(2, 1fr); }
	.home-quick__grid     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.home-roles__grid     { grid-template-columns: 1fr; }
	.home-why__grid       { grid-template-columns: 1fr; }
	.home-sectors__grid   { grid-template-columns: repeat(2, 1fr); }
	.home-intl__countries { grid-template-columns: repeat(2, 1fr); }
	.home-intl__partners  { grid-template-columns: 1fr; }
	.home-services__grid  { grid-template-columns: 1fr; }
	.home-services__secondary { grid-template-columns: 1fr; }
	.home-quick__grid     { grid-template-columns: 1fr; }
	.hero--home .hero__ctas { flex-direction: column; }
}

@media (max-width: 480px) {
	.home-sectors__grid   { grid-template-columns: 1fr 1fr; }
	.home-intl__countries { grid-template-columns: 1fr; }
}

/* ── Courses / Students responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
	.courses-grid               { grid-template-columns: repeat(2, 1fr); }
	.course-hero__grid          { grid-template-columns: 1fr; }
	.course-intro__grid         { grid-template-columns: 1fr; }
	.course-career__grid        { grid-template-columns: repeat(2, 1fr); }
	.course-related__grid       { grid-template-columns: repeat(2, 1fr); }
	.stu-benefits__grid         { grid-template-columns: repeat(2, 1fr); }
	.stu-popular__grid          { grid-template-columns: repeat(2, 1fr); }
	.stu-apply__steps           { grid-template-columns: repeat(2, 1fr); }
	.stu-testimonials__grid     { grid-template-columns: repeat(2, 1fr); }
	.stu-videos__grid           { grid-template-columns: repeat(2, 1fr); }
	.stu-services__grid         { grid-template-columns: repeat(2, 1fr); }
	.stu-project-card__stats    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.courses-grid               { grid-template-columns: 1fr; }
	.course-learn-list          { grid-template-columns: 1fr; }
	.course-why-grid            { grid-template-columns: 1fr; }
	.course-modules-grid        { grid-template-columns: 1fr; }
	.course-eligibility__grid   { grid-template-columns: 1fr; }
	.course-career__grid        { grid-template-columns: repeat(2, 1fr); }
	.course-related__grid       { grid-template-columns: 1fr; }
	.course-brochure__icon      { display: none; }
	.stu-eligibility__grid      { grid-template-columns: 1fr; }
	.stu-project-card__cols     { grid-template-columns: 1fr; }
	.stu-testimonials__grid     { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.course-career__grid        { grid-template-columns: 1fr; }
	.stu-benefits__grid         { grid-template-columns: 1fr; }
	.stu-popular__grid          { grid-template-columns: 1fr; }
	.stu-apply__steps           { grid-template-columns: 1fr; }
	.stu-videos__grid           { grid-template-columns: 1fr; }
	.stu-services__grid         { grid-template-columns: 1fr; }
	.stu-project-card__stats    { grid-template-columns: 1fr 1fr; }
	.course-hero__meta          { flex-direction: column; gap: var(--sp-sm); }
}

/* ── Programs page responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.prog-flagship__grid  { grid-template-columns: 1fr 1fr; }
	.prog-nvqf__grid      { grid-template-columns: repeat(2, 1fr); }
	.prog-resources__grid { grid-template-columns: repeat(2, 1fr); }
	.prog-trades-grid     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.prog-flagship__grid  { grid-template-columns: 1fr; }
	.prog-stats-bar__grid { grid-template-columns: repeat(2, 1fr); }
	.prog-nvqf__grid      { grid-template-columns: repeat(2, 1fr); }
	.prog-resources__grid { grid-template-columns: repeat(2, 1fr); }
	.prog-trades-grid     { grid-template-columns: repeat(2, 1fr); }
	.prog-cta__btns       { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
	.prog-nvqf__grid      { grid-template-columns: 1fr; }
	.prog-resources__grid { grid-template-columns: 1fr; }
	.prog-stats-bar__grid { grid-template-columns: repeat(2, 1fr); }
	.prog-trades-grid     { grid-template-columns: 1fr; }
	.prog-search__wrap    { border-radius: var(--r-lg); }
}

/* ── International responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.intl-hero__inner       { grid-template-columns: 1fr; }
	.intl-highlights__inner { grid-template-columns: 1fr; }
	.intl-projects__grid    { grid-template-columns: repeat(2, 1fr); }
	.intl-partners__grid    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.intl-hero { min-height: 60vh; }
	.intl-hero__stats { gap: var(--sp-lg); }
	.intl-highlights__stats { grid-template-columns: 1fr 1fr; }
	.intl-projects__grid    { grid-template-columns: 1fr; }
	.intl-partners__grid    { grid-template-columns: repeat(2, 1fr); }
	.intl-mou-item  { flex-direction: column; gap: var(--sp-md); }
	.intl-embassy-strip { flex-direction: column; align-items: flex-start; }
	.intl-subnav .container { overflow-x: auto; }
}

@media (max-width: 480px) {
	.intl-partners__grid    { grid-template-columns: 1fr; }
	.intl-highlights__stats { grid-template-columns: 1fr 1fr; }
	.intl-hero__stats       { flex-wrap: wrap; gap: var(--sp-md); }
}

/* ── Region responsive ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.region-ecosystem__grid   { grid-template-columns: repeat(2, 1fr); }
	.region-institutes__stats { grid-template-columns: repeat(2, 1fr); }
	.region-contact__grid     { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.region-ecosystem__grid   { grid-template-columns: 1fr; }
	.region-institutes__stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.region-institutes__stats { grid-template-columns: 1fr 1fr; }
}

/* ── Wing responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.wing-hero__inner { grid-template-columns: 1fr; }
	.wing-hero__stats { grid-template-columns: repeat(2, 1fr); max-width: 480px; }
	.wing-features__grid { grid-template-columns: repeat(2, 1fr); }
	.wing-team__grid { grid-template-columns: repeat(2, 1fr); }
	.wing-leader-featured { grid-template-columns: 1fr; }
	.wing-leader-featured__img { aspect-ratio: 3/2; }
}

@media (max-width: 768px) {
	.wing-hero { min-height: 60vh; }
	.wing-hero__ctas { flex-direction: column; }
	.wing-hero__stats { grid-template-columns: 1fr 1fr; }
	.wing-features__grid { grid-template-columns: 1fr; }
	.wing-process__steps { flex-direction: column; align-items: center; }
	.wing-step__arrow { display: none; }
	.wing-team__grid { grid-template-columns: repeat(2, 1fr); }
	.wing-contact-strip__inner { flex-wrap: wrap; }
}

@media (max-width: 480px) {
	.wing-hero__stats { grid-template-columns: 1fr 1fr; }
	.wing-team__grid { grid-template-columns: 1fr; }
	.wing-extra__row { grid-template-columns: 1fr; gap: var(--sp-xs); }
	.wing-download-card { flex-wrap: wrap; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
	.site-header, .site-footer, .scroll-top,
	.notification-bar, .mobile-nav { display: none !important; }

	body { font-size: 12pt; color: #000; }
	a { color: #000; text-decoration: underline; }
	.container { max-width: 100%; padding: 0; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
	html { scroll-behavior: auto; }
}