/**
 * Phone layout layer — enqueued last.
 *
 * Desktop pages stack card inside card (container → article → section → inner box), each
 * with 24–40px side padding. On a 390px phone that left ~150–230px text columns, 226px
 * charts, and 176px gaps between sections. This file flattens that stack below 640px.
 *
 * @package EDsmartData
 */

/* -------------------------------------------------------------------------
   Tables: wide tables scroll inside their column (body has overflow-x: clip,
   so an unwrapped wide table is silently cut off). main.js adds the hint + fade.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	main :is(section, .chart-section-left, .chart-section-right, .analysis-panel) > table:not(.ed-no-scroll),
	main table.ed-table-scroll {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	main :is(section, .chart-section-left, .chart-section-right, .analysis-panel) > table:not(.ed-no-scroll) :is(th, td) {
		padding-left: 8px;
		padding-right: 8px;
		white-space: normal;
	}

	main :is(section, .chart-section-left, .chart-section-right, .analysis-panel) > table:not(.ed-no-scroll) th {
		letter-spacing: 0.02em;
	}

	main :is(section, .chart-section-left, .chart-section-right, .analysis-panel) > table:not(.ed-no-scroll) > caption {
		display: block;
		white-space: normal;
		text-align: left;
	}

	.has-x-overflow:not(.is-scrolled-end) {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
	}

	.table-scroll-hint {
		margin: 0 0 0.4rem;
		font-size: 0.78rem;
		font-weight: 600;
		color: var(--text-secondary, #5a6478);
	}
}

@media (max-width: 640px) {

	/* ---------------------------------------------------------------------
	   Gutters. theme.json root padding is 0, so anything outside .container
	   (hub headings, query loops, pages without .container) ran edge to edge.
	   --------------------------------------------------------------------- */
	body:not(.home) .entry-content > .container {
		padding-left: 12px;
		padding-right: 12px;
	}

	.entry-content > nav.breadcrumbs,
	.entry-content > article {
		margin-left: 12px;
		margin-right: 12px;
	}

	body:not(.home) main > .wp-block-group > :not(.entry-content):not(.wp-block-spacer):not(.alignfull) {
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}

	.site-footer {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* ---------------------------------------------------------------------
	   Card stack: one light card, not four nested ones.
	   --------------------------------------------------------------------- */
	.entry-content article,
	.entry-content article.report-whitepaper,
	.entry-content article.ed-page-ranking {
		padding: 20px 14px;
		border-radius: 12px;
	}

	body:not(.home) .entry-content h1 {
		font-size: clamp(1.55rem, 6.4vw, 2rem);
		line-height: 1.2;
	}

	body:not(.home) .entry-content h2 {
		font-size: clamp(1.3rem, 5.4vw, 1.6rem);
		line-height: 1.25;
	}

	.entry-content :is(pre, code) {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	/* Unclassed lists had no indent, so bullets sat on the card border. */
	.entry-content article :is(ul, ol):not([class]),
	.entry-content .hub-main :is(ul, ol):not([class]),
	.related-degree-list {
		padding-left: 1.25rem;
	}

	:is(
		.tldr-section,
		.insights-section,
		section.methodology,
		.methodology--split,
		.key-facts,
		.editorial-disclaimer,
		details.sources,
		section.sources,
		.sources-section,
		.also-important,
		.download-cta,
		.analysis-split,
		.ranking-table-section,
		.school-guide-value,
		.school-guide-tldr,
		.findings-bullets,
		.profile-internal-links--cards,
		.plain-english-box,
		.words-to-know,
		.report-hero-metrics
	) {
		padding-left: 16px;
		padding-right: 16px;
	}

	:is(.tldr-section, .insights-section, section.methodology, .methodology--split, .editorial-disclaimer, .download-cta, .analysis-split) {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.tldr-hero-stat {
		padding: 16px;
	}

	.chart-insight {
		padding: 12px;
	}

	:is(.insight-takeaway, .insight-evidence, .insight-implication, .insight-block) {
		padding: 12px 14px;
	}

	.report-navigator-header {
		padding: 12px 14px;
	}

	.table-filter-input,
	.table-filter-select {
		padding: 10px 12px;
	}

	details.faq-item {
		padding-left: 12px;
		padding-right: 12px;
	}

	details.faq-item > summary {
		padding: 14px 28px 14px 0;
	}

	details.faq-item > .faq-answer {
		padding: 0 0 14px;
	}

	/* ---------------------------------------------------------------------
	   Vertical rhythm. .hub-main is a flex column with a 48px gap, and each
	   section also keeps 64px margins (flex margins don't collapse) → 176px gaps.
	   --------------------------------------------------------------------- */
	:is(.hub-main, .profile-report-body, .hub-layout) {
		gap: 28px;
		row-gap: 28px;
	}

	:is(.hub-main, .profile-report-body) > :is(section, details, aside, div) {
		margin-top: 0;
		margin-bottom: 0;
	}

	article.report-whitepaper > section,
	.entry-content article > section {
		margin-top: 28px;
		margin-bottom: 28px;
	}

	.chart-section-content {
		gap: 16px;
		row-gap: 16px;
	}

	/* ---------------------------------------------------------------------
	   Charts. charts-import.js sets per-chart heights on phones; drop the
	   fixed desktop boxes so there's no 200px slack under each canvas.
	   --------------------------------------------------------------------- */
	.chart-container {
		padding: 8px;
		min-height: 0;
	}

	.chart-container.chart-container--auto {
		height: auto !important;
		min-height: 0 !important;
		padding-top: 8px !important;
	}

	.chart-section-right,
	.chart-section-left {
		min-height: 0;
		height: auto;
	}

	.chart-section-right .chart-actions {
		flex-direction: row;
		gap: 8px;
	}

	.chart-actions {
		display: flex;
		gap: 8px;
		margin-top: 10px;
	}

	:is(.btn-export, .btn-chart-download, .btn-chart-export) {
		flex: 1 1 0;
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
		padding: 10px 12px;
		border: 1px solid var(--border, #d8e0ed);
		border-radius: 8px;
		background: var(--surface, #fff);
		color: var(--color-primary, #0a1c4a);
		font-weight: 600;
		font-size: 0.85rem;
		text-align: center;
	}

	/* ---------------------------------------------------------------------
	   In-page navigation: vertical 12-link lists become one swipeable chip row
	   (same pattern school profiles already use).
	   --------------------------------------------------------------------- */
	.hub-layout:not(.ed-page-school) .report-navigator {
		padding: 12px;
		border-radius: 12px;
	}

	.hub-layout:not(.ed-page-school) .report-navigator-header {
		padding: 0 0 8px;
		background: none;
		border: none;
	}

	.hub-layout:not(.ed-page-school) .report-navigator-header .report-navigator-label,
	.hub-layout:not(.ed-page-school) .report-navigator > .report-navigator-label {
		margin: 0 0 8px;
		color: var(--text-meta, #6b7486);
		font-size: 0.75rem;
	}

	.hub-layout:not(.ed-page-school) .report-navigator-sub {
		display: none;
	}

	.hub-layout:not(.ed-page-school) .report-navigator nav {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		padding: 0 0 4px;
		max-height: none;
		scrollbar-width: none;
	}

	.hub-layout:not(.ed-page-school) .report-navigator nav .report-nav-link {
		flex: 0 0 auto;
		width: auto;
		white-space: nowrap;
		padding: 8px 12px;
		border: 1px solid var(--border, #d8e0ed);
		border-left: 1px solid var(--border, #d8e0ed);
		border-radius: 999px;
		background: var(--surface-alt, #f4f6fb);
		font-size: 0.82rem;
	}

	.hub-layout:not(.ed-page-school) .report-navigator nav .report-nav-link:is(.is-active, .active) {
		background: var(--color-primary, #0a1c4a);
		border-color: var(--color-primary, #0a1c4a);
		color: #fff;
	}

	.hub-sidebar,
	.hub-sidebar-sticky {
		gap: 16px;
	}

	.sidebar-download-card {
		padding: 16px;
	}

	/* ---------------------------------------------------------------------
	   Benchmark / geo tables in card mode: label and value on one grid row.
	   The desktop rule absolutely positions a 35%-wide label, so two-line
	   labels spill into the next row and values drift.
	   --------------------------------------------------------------------- */
	:is(.ranking-table-container, .ranking-table-wrapper:not(:has(td.school-name))) .ranking-table :is(td, tbody th) {
		display: grid;
		grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
		column-gap: 12px;
		align-items: baseline;
		padding: 6px 0;
		overflow-wrap: anywhere;
	}

	:is(.ranking-table-container, .ranking-table-wrapper:not(:has(td.school-name))) .ranking-table :is(td, tbody th)::before {
		position: static;
		width: auto;
		font-size: 0.72rem;
		line-height: 1.3;
		letter-spacing: 0.03em;
	}

	:is(.ranking-table-container, .ranking-table-wrapper:not(:has(td.school-name))) .ranking-table tr {
		padding: 10px 14px;
		margin-bottom: 10px;
	}

	:is(.ranking-table-container, .ranking-table-wrapper:not(:has(td.school-name))) .ranking-table tbody th {
		font-weight: 700;
		border-bottom: 1px solid var(--border-light, #e2e8f0);
		margin-bottom: 4px;
	}

	/* ---------------------------------------------------------------------
	   Ranking cards (7 columns: Rank | School | State | Control | Enrollment |
	   Metric | Also see). ~650px per card → ~140px: rank, name and metric on
	   one line; meta and "also see" as compact inline rows.
	   --------------------------------------------------------------------- */
	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody {
		gap: 10px;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 6px 10px;
		padding: 12px 14px;
		border-radius: 12px;
		box-shadow: 0 1px 2px rgba(10, 28, 74, 0.05);
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td {
		gap: 0;
		padding: 0;
		border: none;
		font-size: 0.8rem;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(1) {
		position: static;
		order: 1;
		flex: 0 0 auto;
		width: 30px;
		min-height: 30px;
		padding: 0;
		border-radius: 8px;
		clip-path: none;
		box-shadow: none;
		font-size: 0.95rem;
	}

	/* Basis leaves room for rank + metric only, so the meta cells wrap to line two. */
	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2) {
		order: 2;
		flex: 1 1 calc(100% - 40px - 124px);
		min-width: 0;
		padding: 4px 0 0;
		border: none;
		font-size: 0.98rem;
		line-height: 1.3;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(2)::after {
		content: none;
		display: none;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6) {
		order: 3;
		flex: 0 0 114px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		padding: 0;
		border: none;
		border-radius: 0;
		background: none;
		text-align: right !important;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(6)::before {
		font-size: 0.62rem;
		white-space: nowrap;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) .ranking-metric-value {
		font-size: 1.12rem;
		white-space: nowrap;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) .ranking-metric-note {
		display: none;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:is(:nth-child(3), :nth-child(4), :nth-child(5)) {
		flex: 0 0 auto;
		display: inline-flex;
		flex-direction: row;
		align-items: baseline;
		gap: 4px;
		padding: 0;
		border: none;
		font-weight: 600;
		color: var(--text-primary, #1a2332);
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(3) {
		order: 4;
		margin-left: 40px;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(4) {
		order: 5;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(5) {
		order: 6;
		flex: 1 1 calc(100% - 40px);
		margin-left: 40px;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:nth-child(5)::before {
		display: inline;
		font-size: 0.62rem;
	}

	/* State and control values read fine without labels. */
	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:is(:nth-child(3), :nth-child(4))::before {
		content: none;
		display: none;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:last-child {
		order: 7;
		flex: 1 1 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 2px 14px;
		margin: 2px 0 0 40px;
		padding: 6px 0 0;
		border-top: 1px solid var(--border-light, #e2e8f0);
		border-radius: 0;
		background: none;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) > td:last-child::before {
		content: none;
		display: none;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) .ranking-also-item {
		flex-direction: row;
		align-items: baseline;
		gap: 4px;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) .ranking-also-item--wide {
		flex-basis: 100%;
		border-bottom: none;
		font-size: 0.8rem;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) .ranking-also-label {
		font-size: 0.72rem;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table tbody tr:has(> td:nth-child(7)) .ranking-also-value {
		font-size: 0.82rem;
	}

	html .ed-page-ranking .table-responsive-wrapper table.data-table .school-card-profile-link::after {
		border-radius: 12px;
	}

	/* Degree / major school lists (Rank | School | State | Metric): one row per school. */
	html .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) tbody {
		gap: 8px;
	}

	html .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) tbody tr {
		display: grid;
		grid-template-columns: 30px minmax(0, 1fr) auto;
		column-gap: 10px;
		row-gap: 2px;
		align-items: center;
		padding: 10px 12px;
		border-radius: 12px;
		box-shadow: 0 1px 2px rgba(10, 28, 74, 0.05);
	}

	html .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.rank {
		position: static;
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 30px;
		min-height: 30px;
		padding: 0;
		border-radius: 8px;
		clip-path: none;
		box-shadow: none;
		font-size: 0.95rem;
	}

	html .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.school-name {
		grid-column: 2;
		grid-row: 1;
		padding: 0;
		border: none;
		font-size: 0.95rem;
	}

	html .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.school-name::after {
		content: none;
		display: none;
	}

	html .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.school-state {
		grid-column: 2;
		grid-row: 2;
		padding: 0;
		font-size: 0.78rem;
		font-weight: 600;
		color: var(--text-secondary, #5a6478);
	}

	html .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.school-state::before {
		display: none;
	}

	html .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.value {
		grid-column: 3;
		grid-row: 1 / span 2;
		align-items: flex-end;
		padding: 0;
		border: none;
		border-radius: 0;
		background: none;
		text-align: right !important;
	}

	html .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) td.value::before {
		font-size: 0.6rem;
	}

	html .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) .ranking-metric-value {
		font-size: 1.05rem;
	}

	html .ranking-table-wrapper.filterable-table table.ranking-table:has(td.school-name) .school-card-profile-link::after {
		border-radius: 12px;
	}

	/* Long card lists: main.js hides rows past the first N and adds "Show all". */
	table.ed-rows-limited tr.ed-row-extra {
		display: none !important;
	}

	/* ---------------------------------------------------------------------
	   Collapsible long sections (main.js adds .ed-collapsible + toggle).
	   --------------------------------------------------------------------- */
	.ed-collapsible:not(.is-expanded) {
		position: relative;
		max-height: 620px;
		overflow: hidden;
	}

	.ed-collapsible:not(.is-expanded)::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 140px;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--surface, #fff) 80%);
		pointer-events: none;
	}

	.ed-collapse-toggle {
		display: block;
		width: 100%;
		margin: 8px 0 0;
		padding: 12px 16px;
		border: 1px solid var(--border, #d8e0ed);
		border-radius: 10px;
		background: var(--surface-alt, #f4f6fb);
		color: var(--color-primary, #0a1c4a);
		font-family: var(--font-heading, "Montserrat", system-ui, sans-serif);
		font-size: 0.9rem;
		font-weight: 700;
		cursor: pointer;
	}

	.ed-collapse-toggle:hover,
	.ed-collapse-toggle:focus-visible {
		border-color: var(--color-aqua, #00b3c6);
	}

	.ed-collapsible + .ed-collapse-toggle {
		margin-top: -12px;
		position: relative;
		z-index: 1;
	}

	/* ---------------------------------------------------------------------
	   Minimum label size: 9.6–10.4px kickers are unreadable on a phone.
	   --------------------------------------------------------------------- */
	:is(
		.kf-label,
		.profile-badge,
		.report-hero-metric-label,
		.report-status-badge,
		.related-profile-kicker,
		.home-hero-eyebrow,
		.hub-section-link,
		.source-card-badge,
		.tldr-hero-label,
		.page-header-kicker
	) {
		font-size: 0.75rem;
	}

	.sidebar-download-card a,
	.download-cta a {
		font-size: 0.8rem;
	}

	.ranking-leader-card {
		min-height: 0;
		grid-template-rows: auto auto auto;
		gap: 8px;
	}

	.ranking-leader-card .ranking-leader-name {
		min-height: 0;
	}

	/* Archive hub filter card: keep inside the new gutter. */
	body:not(.home) main > .wp-block-group > .ed-archive-hub {
		margin-left: 12px !important;
		margin-right: 12px !important;
		padding: 14px;
		max-width: none;
		border-radius: 12px;
	}
}