/* ============================================================
   Responsive layer — Aerospace Experiences.

   Imported by tailwind.css AFTER the utilities layer, so these
   rules win over the base utility without needing !important
   on every declaration (the !importants that remain are the
   ones the approved layer already carried).

   This replaces the old assets/css/screen.css. That file keyed
   off inline styles ([style*="repeat(4"]); now that the
   templates ship Tailwind classes, the same behaviour is keyed
   off those classes and the .ae-* hooks instead. Breakpoints,
   collapse order and spacing are unchanged from the approved
   design.

   Adding a new grid to a screen? Either use one of the column
   classes below, or give the element a responsive variant in
   the template (grid-cols-4 tablet:grid-cols-2 phone:grid-cols-1).
   ============================================================ */

/* ---------- Tablet and below (≤1024px) ---------- */
@media (max-width: 1024px) {
	/* The filter bar's tracks are an arbitrary grid, so the generic
	   .grid-cols-N collapse below never matched it — the fields simply squeezed
	   until they were unusable. Two per row here, one on a phone. */
	.ae-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ae-filterbar > button { grid-column: span 1; }

	:root { --text-display: 52px; --text-h1: 38px; --text-h2: 26px; --text-h3: 22px; }

	.grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Data tables become stacked cards. The data-label attributes carry the
	   column headings; .ae-tbl-primary stays the card's title row. */
	.ae-tbl-head { display: none; }
	.ae-tbl-row {
		display: block;
		border: 1px solid var(--border-default);
		border-radius: var(--radius-md);
		padding: 14px 16px;
		margin-bottom: 10px;
	}
	.ae-tbl-row > * {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 5px 0;
		text-align: left;
		min-width: 0;
	}
	.ae-tbl-row > *::before {
		content: attr(data-label);
		flex: none;
		font-size: var(--text-2xs);
		font-weight: var(--fw-bold);
		letter-spacing: var(--ls-wide);
		text-transform: uppercase;
		color: var(--slate-400);
	}
	.ae-tbl-row > *:empty { display: none; }
	.ae-tbl-row > .ae-tbl-primary {
		border-bottom: 1px solid var(--border-subtle);
		padding-bottom: 10px;
		margin-bottom: 4px;
	}
	.ae-tbl-row > .ae-tbl-primary::before { display: none; }
}

/* ---------- Narrow tablet (≤820px) ---------- */
@media (max-width: 820px) {
	/* Two-column page shells collapse: sidebar under content. */
	.ae-stack-1024,
	.slots-cols,
	.buy-cols,
	.stu-cols,
	.grid-cols-\[264px_1fr\],
	.grid-cols-\[minmax\(0\2c 1\.6fr\)_minmax\(0\2c 1fr\)\],
	.grid-cols-\[minmax\(0\2c 1\.5fr\)_minmax\(0\2c 1fr\)\],
	.grid-cols-\[1\.5fr_1fr\] {
		grid-template-columns: minmax(0, 1fr);
	}
	.stu-cols { gap: 24px; }
	.slots-field-row { grid-template-columns: 1fr; gap: 8px; align-items: start; }
}

/* ---------- Phone (≤640px) ---------- */
@media (max-width: 640px) {
	:root {
		--text-display: 36px; --text-h1: 29px; --text-h2: 22px;
		--text-h3: 19px; --text-h4: 17px; --text-h5: 16px;
	}

	.grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6 {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Standalone links sit at 20-24px on their own, which is below the 24px
	   minimum a thumb can reliably hit. Inline links inside a sentence are
	   exempt from that rule and stay as they are. */
	a.inline-flex:not([class*="min-h-"]), a.flex:not([class*="min-h-"]) { min-height: 24px; }

	/* The language switcher comes from WPML with its own tight line-height. */
	.wpml-ls-link { display: inline-flex; align-items: center; min-height: 32px; }

	/* Breadcrumb links are a row of separate targets, not prose, so the
	   inline-link exemption does not apply to them. */
	.ae-crumbs a { display: inline-flex; align-items: center; min-height: 24px; }

	/* Buttons hold their label on one line, which a narrow phone cannot
	   always afford — a long label pushed the page sideways. Wrapping needs
	   a line-height, since the button sets leading-none for the single-line
	   case. */
	.ae-btn { white-space: normal; line-height: 1.25; }

	/* Gravity Forms ships 20px radios and checkboxes, under the 24px a thumb
	   can reliably hit. Its stylesheets load after this one and each of its
	   themes re-declares the size variable, so the size is set on the control
	   itself at a specificity none of them reach. Its own rule uses the
	   logical properties, so those are the ones that have to be answered. */
	.gform_wrapper .gfield-choice-input[type="checkbox"],
	.gform_wrapper .gfield-choice-input[type="radio"] {
		inline-size: 24px;
		block-size: 24px;
		width: 24px;
		height: 24px;
	}

	/* The token entry sits flush with the chips it adds to. */
	.ae-chipentry { min-height: 24px; }
	.ae-keepcols { grid-template-columns: 1.5fr 1fr; }

	.ae-filterbar { grid-template-columns: minmax(0, 1fr); }
	.ae-filterbar > button { width: 100%; }

	/* Footer columns collapse to disclosures, opened from their title. */
	.ae-footer-col { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
	.ae-footer-toggle { cursor: pointer; padding: 16px 0; margin: 0; }
	.ae-footer-toggle .ae-icon {
		display: inline-flex;
		flex: none;
		transition: transform var(--duration-base, 200ms) ease;
	}
	.ae-footer-toggle[aria-expanded="true"] .ae-icon { transform: rotate(180deg); }
	.ae-footer-panel { display: none; padding-bottom: 18px; }
	.ae-footer-toggle[aria-expanded="true"] + .ae-footer-panel { display: block; }

	/* Page gutters. */
	.ae-page { padding-left: 14px; padding-right: 14px; padding-top: 18px; }
	.ae-topbar.ae-topbar--public,
	.ae-public .ae-detailbanner,
	.ae-public .ae-dashbanner,
	.ae-public .ae-popbanner { padding-left: 14px; padding-right: 14px; }

	/* .ae-page already gives the phone its 14px gutter; the container inside it
	   would otherwise add another 32 on top, indenting the content on the one
	   screen with the least room for it. */
	.ae-public .ae-page > div { padding-left: 0; padding-right: 0; }

	/* The home page's sections carry their own container; on a phone it takes
	   the same 14px gutter as everything else rather than px-8. */
	.ae-home-page section > div { padding-left: 14px; padding-right: 14px; }
	.ae-dashbanner, .ae-detailbanner { padding: 18px; min-height: 0; }
	.ae-detailbanner { padding-bottom: 22px; }

	/* Detail banner: breadcrumb rejoins the flow, CTA goes full width. */
	.ae-detailbanner > nav { position: static; margin-bottom: 12px; flex-wrap: wrap; }
	.ae-detailbanner > div { flex-direction: column; align-items: flex-start; gap: 14px; }
	.ae-detailbanner > div > div:last-child { width: 100%; }
	.ae-detailbanner > div > div:last-child a,
	.ae-detailbanner > div > div:last-child button { width: 100%; }

	.ae-dashbanner > div { flex-wrap: wrap; row-gap: 16px; align-items: stretch; }
	.ae-dashbanner > div > div:last-child { flex: 1 1 100%; width: 100%; }
	.ae-dashbanner > div > div:last-child a,
	.ae-dashbanner > div > div:last-child button { width: 100%; }

	.ae-sectionhead { flex-direction: column; align-items: stretch; gap: 12px; }
	.ae-sectionhead > div:last-child { flex: none; }
	.ae-wrap-sm { flex-wrap: wrap; }

	/* Cards whose horizontal track becomes a single column. */
	.grade-track > div { flex: 0 0 88%; }
	.ms-slider { grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; }

	/* Mentor card meta wraps instead of truncating. */
	.ae-mentor-meta { flex-wrap: wrap; row-gap: 2px; }
	.ae-mentor-meta > span { white-space: normal; overflow: visible; text-overflow: clip; }
	.ae-mentor-meta > [data-sep] { display: none; }
	.ae-mentor-meta > [data-loc] { flex-basis: 100%; }

	/* Exhibitor fair hero: image on top, actions stacked. */
	.ae-fair-hero { flex-direction: column; }
	.ae-fair-hero > div:first-child { width: 100%; height: 150px; }
	.ae-fair-actions { width: 100%; flex-direction: column; }
	.ae-fair-actions > a, .ae-fair-actions > button { width: 100%; }

	/* Mentor schedule rows. */
	.ae-session-row { flex-wrap: wrap; }
	.ae-session-side { min-width: 0; width: 100%; align-items: flex-start; }

	/* Sign-up invite banner. */
	.invite-banner { flex-direction: column; align-items: center; text-align: center; }
	.invite-banner > span:first-child { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
	.invite-cta { width: 100%; display: flex; justify-content: center; }

	/* Registration flow. */
	.reg-form-row { grid-template-columns: 1fr; gap: 10px; }
	.reg-subject-grid { grid-template-columns: 1fr; }
	.reg-grade-head { flex-wrap: wrap; }
	.reg-step1-foot { flex-wrap: wrap; justify-content: stretch; }
	.reg-step1-foot > span { margin-right: 0; flex-basis: 100%; text-align: left; }
	.reg-step1-foot > button { width: 100%; }
	.slots-field-row { grid-template-columns: 1fr; gap: 8px; align-items: start; }

	/* Calendar keeps its week grid and scrolls sideways. */
	.ae-cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.ae-cal-scroll .grid-cols-7 { min-width: 600px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ---------- Small phones (≤360px) ---------- */
@media (max-width: 360px) {
	/* The header's three fixed-width parts add up to more than the screen at
	   this size, so the logo — the only one with room to give — steps down. */
	.ae-logo img.ae-logo-full { width: 120px; height: 36px; }
}

/* The home hero tucks under the bar, so this has to equal the bar's height. */
:root { --ae-topbar-h: 117px; }
@media (max-width: 1024px) { :root { --ae-topbar-h: 92px; } }
@media (max-width: 640px) { :root { --ae-topbar-h: 64px; } }

/* ---------- Wide desktop ---------- */
@media (min-width: 2000px) {
	.max-w-content, .max-w-wide { max-width: 100%; }
	.grid-cols-4 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.grid-cols-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 2900px) {
	:root { --text-base: 16px; --text-sm: 15px; --text-xs: 14px; }
	.grid-cols-4 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.grid-cols-3 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 4400px) {
	:root { --text-base: 18px; --text-sm: 16px; --text-xs: 15px; --text-h1: 56px; }
	.grid-cols-4 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
	.grid-cols-3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}