/*
 * Sky Educate Responsive Styles
 */

/* ============================================================
   TABLET — max-width: 1100px  (5-col services → 3-col)
============================================================ */
@media (max-width: 1100px) {
	.services-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ============================================================
   TABLET — max-width: 991px
============================================================ */
@media (max-width: 991px) {
	/* Hero */
	.hero-title { font-size: 3rem; }

	/* Services */
	.services-grid { grid-template-columns: repeat(3, 1fr); }

	/* Who We Are */
	.who-we-are-inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.who-images-wrap {
		height: 360px;
		order: 2;
	}
	.who-content { order: 1; }
	.who-content h2 { font-size: 2.2rem; }

	/* Why Us */
	.why-grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.why-heading { font-size: 2.2rem; }

	/* How We Work */
	.timeline-track { display: none; }
	.timeline-steps {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}
	.timeline-step {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 1.5rem;
		text-align: left;
		padding: 0;
	}
	.step-icon-wrap { margin: 0; flex-shrink: 0; }
	.step-number { margin-bottom: 0.25rem; }
	.timeline-step h3 { font-size: 1rem; margin: 0; }

	/* CTA Pillars */
	.cta-pillars { flex-direction: column; }
	.cta-pillar-sep { width: 80px; height: 1px; }
	.cta-schools-heading { font-size: 2rem; }

	/* Footer */
	.footer-widgets { grid-template-columns: repeat(2, 1fr); }

	/* Nav */
	.menu-toggle { display: flex; }
	.header-right { gap: 0.75rem; }
	#primary-menu { display: none; }
}

/* ============================================================
   MOBILE — max-width: 767px
============================================================ */
@media (max-width: 767px) {
	/* Hero */
	.hero-title { font-size: 2.2rem; }
	.hero-stats-row { flex-direction: column; gap: 0.5rem; }
	.hero-stat-divider { display: none; }
	.hero-cta-row { flex-direction: column; align-items: center; }
	.btn-hero-primary, .btn-hero-outline { width: 100%; max-width: 280px; text-align: center; }

	/* Services */
	.services-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

	/* Who We Are images */
	.who-images-wrap { height: 280px; }
	.who-img-primary { width: 60%; height: 230px; }
	.who-img-secondary { width: 48%; height: 180px; }
	.who-img-accent-block { width: 160px; height: 220px; }

	/* How We Work — keep column layout */
	.how-we-work-section { padding: 4rem 1.5rem; }
	.how-we-work-section h2 { font-size: 2rem; margin-bottom: 2.5rem; }

	/* Section headings */
	.section-heading { font-size: 2rem; }
	.cta-schools-heading { font-size: 1.7rem; }
	.why-heading { font-size: 2rem; }

	/* CTA Buttons */
	.cta-schools-btns { flex-direction: column; align-items: center; }
	.btn-cta-yellow, .btn-cta-navy { width: 100%; max-width: 260px; text-align: center; }

	/* Footer */
	.footer-widgets { grid-template-columns: 1fr; gap: 2rem; }

	/* Job grid */
	.jobs-archive-grid { grid-template-columns: 1fr; }

	/* Single job */
	.job-content-layout { grid-template-columns: 1fr; }
	.job-single-header h1 { font-size: 2rem; }
	.job-meta-strip { flex-direction: column; gap: 0.5rem; }

	/* Section header flex */
	.section-header-flex { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ============================================================
   MOBILE — max-width: 480px
============================================================ */
@media (max-width: 480px) {
	.services-grid { grid-template-columns: 1fr; }
	.service-card { flex-direction: row; text-align: left; padding: 1.5rem; }
	.hero-title { font-size: 1.9rem; }
}

/* ============================================================
   JOB BOARD — TABLET (max-width: 1024px)
============================================================ */
@media (max-width: 1024px) {
	.jobs-board-layout {
		grid-template-columns: 280px 1fr;
		gap: 1.75rem;
	}
}

/* ============================================================
   JOB BOARD — MOBILE (max-width: 860px)
============================================================ */
@media (max-width: 860px) {
	/* Collapse to single column, filter as overlay/accordion */
	.jobs-board-layout {
		grid-template-columns: 1fr;
		padding-top: 1.5rem;
		padding-bottom: 3rem;
	}

	.jobs-filter-sidebar {
		position: static;
		display: none; /* toggled by JS */
	}
	.jobs-filter-sidebar.is-open { display: block; }

	.btn-mobile-filter { display: flex; }

	/* Toolbar stacks */
	.jobs-toolbar { flex-direction: column; align-items: flex-start; gap: 0.75rem; }

	/* Cards */
	.job-card-v2-top { flex-direction: column; }
	.job-card-logo { width: 44px; height: 44px; }
	.job-card-v2-footer { flex-wrap: wrap; gap: 0.75rem; }
	.btn-card-apply { margin-left: 0; width: 100%; text-align: center; }

	/* Banner */
	.jobs-page-banner-content h1 { font-size: 2rem; }
}

@media (max-width: 480px) {
	.filter-panel-header { flex-wrap: wrap; gap: 0.5rem; }
	.jobs-sort-select { width: 100%; }
}