/* =========================================================================
   CATALYST ADVISORY — RESPONSIVE BEHAVIOUR
   -------------------------------------------------------------------------
   Base styles in components.css assume a desktop layout; this file adds the
   tablet/mobile overrides. Checked at 1440/1280/1024/768/390/375.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Desktop-only chrome (>=1024px)
   ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.topbar { display: block; }
	.btn--header { display: inline-flex; }
	.nav-toggle { display: none; }
}

/* -------------------------------------------------------------------------
   Below desktop (<1024px) — off-canvas navigation
   ---------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.site-header__inner { flex-wrap: wrap; }

	.nav-toggle { display: inline-flex; order: 3; }

	.site-nav {
		order: 4;
		flex-basis: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s var(--ca-ease);
	}
	.site-nav.is-open { max-height: 2000px; }

	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-block: 0.5rem 0; border-top: 1px solid var(--ca-border); margin-top: 0.75rem; }
	.site-nav__list .menu-item { width: 100%; }
	.site-nav__list > .menu-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
	.site-nav__list > .menu-item > a { flex: 1; padding-block: 0.85em; }

	.sub-menu {
		display: none;
		position: static;
		width: 100%;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		background: var(--ca-surface-alt);
		margin-bottom: 0.4rem;
	}
	.has-dropdown.is-open > .sub-menu { display: flex; }

	.site-nav__actions { flex-basis: 100%; flex-direction: column; align-items: stretch; margin: 1rem 0 1.25rem; gap: 0.75rem; }
	.site-nav__search { justify-content: center; border: 1.5px solid var(--ca-border); border-radius: var(--ca-radius-sm); padding: 0.6em; }
	.btn--header { display: inline-flex; justify-content: center; }

	body.has-open-menu { overflow: hidden; }
}

/* -------------------------------------------------------------------------
   1024px — tablet landscape
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__visual { order: -1; aspect-ratio: 16/9; }
	.hero__stat-chip { position: static; margin-top: -2rem; align-self: flex-start; }

	.card-grid--4 { grid-template-columns: repeat(3, 1fr); }
	.grid-4 { grid-template-columns: repeat(2, 1fr); }

	.timeline { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
	.timeline::before { display: none; }

	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------------------------
   768px — tablet portrait
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
	.card-grid--3,
	.card-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

	.stats__grid { grid-template-columns: repeat(2, 1fr); }
	.stats__item:nth-child(2n+1) { border-left: 0; }
	.stats__item:nth-child(-n+2) { border-bottom: 1px solid var(--ca-border); padding-bottom: 1.75rem; }
	.stats__item:nth-child(n+3) { padding-top: 1.75rem; }

	.timeline { grid-template-columns: 1fr; row-gap: 1.75rem; text-align: left; }
	.timeline__step { display: flex; align-items: flex-start; gap: 1rem; }
	.timeline__number { margin-bottom: 0; flex-shrink: 0; }
	.timeline__body { text-align: left; }

	.promo { grid-template-columns: 1fr; }
	.promo__media { order: -1; aspect-ratio: 16/9; }

	.cta-banner { flex-direction: column; align-items: flex-start; text-align: left; }

	.site-footer__grid { grid-template-columns: 1fr; }
	.site-footer__bar-inner { flex-direction: column; align-items: flex-start; }

	.form-row--2 { grid-template-columns: 1fr; }
	.university-filter-form { grid-template-columns: 1fr 1fr; }
	.university-filter-form > *:first-child,
	.university-filter-form > button { grid-column: 1 / -1; }
	.scholarship-filter-form { grid-template-columns: 1fr 1fr; }
	.scholarship-filter-form > button { grid-column: 1 / -1; }

	h1 { font-size: var(--ca-step-4); }
	.hero__title { font-size: var(--ca-step-4); }
}

/* -------------------------------------------------------------------------
   480px and below — small mobile
   ---------------------------------------------------------------------- */
@media (max-width: 480px) {
	.card-grid--2,
	.card-grid--3,
	.card-grid--4 { grid-template-columns: 1fr; }

	.stats__grid { grid-template-columns: 1fr; }
	.stats__item { border-left: 0 !important; border-bottom: 1px solid var(--ca-border); padding: 1.5rem 0 !important; }
	.stats__item:last-child { border-bottom: 0; }

	.hero__actions { flex-direction: column; align-items: stretch; }
	.hero__actions .btn { width: 100%; justify-content: center; }

	.cta-banner__actions { width: 100%; flex-direction: column; }
	.cta-banner__actions .btn { width: 100%; justify-content: center; }

	.search-form { flex-direction: column; }
	.university-filter-form { grid-template-columns: 1fr; }
	.scholarship-filter-form { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Prevent horizontal scroll for wide embedded content
   ---------------------------------------------------------------------- */
table, pre, .table-scroll { display: block; max-width: 100%; overflow-x: auto; }