/*
 * ⚠️ **Every media query in the theme lives in this file**, so §AB's three tiers can be read
 * and checked in one place instead of being hunted through a thousand lines of layout.
 *
 * jobs.css describes the desktop shape. This file reshapes it:
 *
 *   ≥ 1200px   map 66% / list 34%  (jobs.css's own values — nothing here)
 *   768–1199   map 60% / list 40%, tighter spacing, smaller card media
 *   < 768      one column, a List/Map switch, a bottom tab bar, no side-by-side
 *
 * The breakpoints are §AB's, not round numbers chosen for neatness.
 */

/* ===================================================================================
 * Tablet — §AB's middle tier
 * =================================================================================== */

@media (max-width: 1199px) {
	:root {
		/* §AB: 58–62% map, 38–42% list. */
		--sjb-map-share: 60fr;
		--sjb-list-share: 40fr;
		--sjb-rail-h: 88px;
	}

	.sjb-chip {
		width: 98px;
		min-height: 72px;
		gap: 3px;
		padding: 6px 6px 7px;
		border-radius: 11px;
	}

	.sjb-chip__icon {
		width: 38px;
		height: 38px;
	}

	.sjb-chip__label {
		font-size: 10.5px;
	}

	.sjb-brand__tagline {
		display: none;
	}

	.sjb-nav__link {
		padding: 8px 9px;
		font-size: 13px;
	}

	.sjb-card__media {
		min-height: 100px;
	}

	.sjb-card__img,
	.sjb-card__fallback {
		width: 100px;
	}

	.sjb-single__grid {
		gap: 20px;
	}

	.sjb-related__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.sjb-about {
		padding-inline: 22px;
	}

	.sjb-about-hero {
		grid-template-columns: minmax(0, 1fr) minmax(380px, 0.92fr);
		gap: 30px;
	}

	.sjb-about-industries__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Below the width where six menu items and four tools can share one bar. */
@media (max-width: 1023px) {
	.sjb-burger {
		display: inline-flex;
		order: 3;
	}

	.sjb-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: var(--sjb-header-h);
		z-index: 55;
		display: none;
		padding: 10px 16px 14px;
		background: var(--sjb-header-bg);
		border-bottom: 1px solid var(--sjb-border);
		box-shadow: var(--sjb-shadow-lg);
	}

	.sjb-nav.is-open {
		display: block;
	}

	.sjb-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.sjb-nav__item {
		display: block;
	}

	.sjb-nav__item + .sjb-nav__item::before {
		display: none;
	}

	.sjb-nav__link {
		padding: 11px 12px;
		font-size: 15px;
	}

	.sjb-header__cta span {
		display: none;
	}

	.sjb-header__cta {
		width: 38px;
		padding: 0;
	}
}

/* ===================================================================================
 * Phone — §AA and §AB's bottom tier
 * =================================================================================== */

@media (max-width: 767px) {
	:root {
		--sjb-header-h: 54px;
		--sjb-rail-h: 76px;
		--sjb-tabbar-h: 58px;
		scroll-behavior: smooth;
	}

	.sjb-rail__list {
		gap: 6px;
	}

	.sjb-rail__list::before,
	.sjb-rail__list::after {
		flex-basis: 44px;
	}

	.sjb-rail__scroller {
		scroll-padding-inline: 50px;
	}

	.sjb-rail::before,
	.sjb-rail::after {
		width: 58px;
	}

	.sjb-rail__control {
		width: 36px;
		height: 36px;
	}

	.sjb-rail__control--previous {
		left: 6px;
	}

	.sjb-rail__control--next {
		right: 6px;
	}

	.sjb-chip {
		width: 88px;
		min-height: 62px;
		gap: 2px;
		padding: 4px 5px 6px;
	}

	.sjb-chip__icon {
		width: 34px;
		height: 34px;
	}

	.sjb-chip__label {
		font-size: 10px;
	}

	body {
		font-size: 15px;
		padding-top: var(--sjb-header-h);
	}

	/*
	 * Mobile engines may zoom a focused editable control until its caret is legible. Keep every
	 * public form control at that legible size so opening a form or starting to type does not
	 * change the page scale. Buttons and compact non-editable labels keep their existing sizes.
	 */
	.sjb-search__input,
	.sjb-select,
	.sjb-input,
	.sjb-textarea,
	.sjb-richtext__editor,
	.sjb-richtext__link-input {
		font-size: 16px;
	}

	/* Keep only the navigation chrome in view; the workspace below it scrolls normally. */
	.sjb-header {
		position: fixed;
		left: 0;
		right: 0;
		top: var(--sjb-adminbar-h);
		z-index: 1200;
	}

	.sjb-skip {
		position: fixed;
		top: var(--sjb-adminbar-h);
		z-index: 1300;
	}

	/*
	 * --- The header has to fit 390px. ---
	 *
	 * Brand, burger, language switcher, theme toggle, saved-count and the green button come
	 * to about 420px together, which pushed the burger past the right edge and gave the whole
	 * document a horizontal scrollbar. Saved-count and the burger are the two to drop: the
	 * bottom tab bar already carries "Saved" (with its own live counter) and "Menu" (which opens
	 * this same nav), so nothing is lost — only a duplicate control that fought the tab bar for
	 * the same job.
	 */
	.sjb-header__inner {
		gap: 10px;
		padding: 0 12px;
	}

	.sjb-header__tools {
		gap: 5px;
	}

	.sjb-iconbtn--count {
		display: none;
	}

	.sjb-burger {
		display: none;
	}

	.sjb-brand__name {
		font-size: 17px;
	}

	.sjb-brand__site-title {
		max-width: 150px;
	}

	.sjb-iconbtn,
	.sjb-header__cta {
		width: 34px;
		height: 34px;
	}

	.sjb-langs__toggle {
		height: 34px;
		padding: 0 7px;
	}

	/* --- The app shell becomes one column with a switch (§AA, §AB). --- */

	.sjb-app {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 0;
		height: auto;
		min-height: calc(100vh - var(--sjb-header-h) - var(--sjb-rail-h) - var(--sjb-tabbar-h) - var(--sjb-adminbar-h));
		min-height: calc(100dvh - var(--sjb-header-h) - var(--sjb-rail-h) - var(--sjb-tabbar-h) - var(--sjb-adminbar-h));
	}

	body.sjb-body--workspace {
		overflow-x: hidden;
		overflow-y: auto;
		padding-bottom: calc(var(--sjb-tabbar-h) + env(safe-area-inset-bottom));
	}

	.sjb-app__map,
	.sjb-app__list {
		border: 0;
		border-radius: 0;
	}

	/*
	 * The switch is driven by an attribute on <html> that the server renders as "list" and an
	 * inline head script rewrites from sessionStorage before the first paint — so a reader
	 * who left in map mode does not see the list flash first, and a reader with no JavaScript
	 * gets the list, which §AA names as the default.
	 */
	:root[data-sjb-view="list"] .sjb-app__map { display: none; }
	:root[data-sjb-view="map"] .sjb-app__list { display: none; }

	:root[data-sjb-view="map"] .sjb-app__map { display: flex; }
	:root[data-sjb-view="list"] .sjb-app__list { display: flex; }

	/*
	 * List mode belongs to the document scroller: the profession rail, search and filters all
	 * leave the viewport before the cards do. Desktop keeps its deliberately isolated pane.
	 */
	:root[data-sjb-view="list"] .sjb-app__list {
		overflow: visible;
	}

	:root[data-sjb-view="list"] .sjb-listpane {
		height: auto;
	}

	:root[data-sjb-view="list"] .sjb-listpane__scroll {
		flex: 0 0 auto;
		min-height: auto;
		overflow: visible;
		overscroll-behavior: auto;
	}

	/* In map mode the map takes essentially the whole screen (§AA). */
	:root[data-sjb-view="map"] .sjb-app {
		padding: 0;
		height: calc(100vh - var(--sjb-header-h) - var(--sjb-rail-h) - var(--sjb-tabbar-h) - var(--sjb-adminbar-h));
		height: calc(100dvh - var(--sjb-header-h) - var(--sjb-rail-h) - var(--sjb-tabbar-h) - var(--sjb-adminbar-h));
		min-height: 0;
	}

	/* Stack the save action above the live map status and keep attribution readable. */
	.sjb-map__corner--bl {
		bottom: 62px;
	}

	.sjb-map__corner--br {
		left: 12px;
		right: 12px;
		bottom: 22px;
	}

	.sjb-map-status {
		width: fit-content;
		max-width: 100%;
		margin-left: auto;
	}

	/* Keep all three filter controls on one compact row; the sliders icon retains an
	 * accessible text label while yielding its visible text on a phone. */

	.sjb-filters__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
	}

	.sjb-filters__more {
		width: 44px;
		min-height: 44px;
		padding: 0;
		gap: 0;
	}

	.sjb-filters__more-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.sjb-filters__more .sjb-filters__badge {
		position: absolute;
		top: -5px;
		right: -5px;
	}

	.sjb-more__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* --- Cards --- */

	.sjb-card__media {
		min-height: 96px;
	}

	.sjb-card__img,
	.sjb-card__fallback {
		width: 96px;
	}

	.sjb-card__body {
		padding-right: 26px;
	}

	/* The locate button is a hover affordance; on a touch screen it is always there. */
	.sjb-card__locate {
		opacity: 1;
	}

	.sjb-card {
		padding-bottom: 8px;
	}

	/* --- The bottom bar --- */

	.sjb-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		/* Leaflet's corner controls reach 1000; the raised Map tab must clear them. */
		z-index: 1100;
		display: flex;
		height: calc(var(--sjb-tabbar-h) + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--sjb-header-bg);
		border-top: 1px solid var(--sjb-border);
	}

	.sjb-tabbar__item {
		position: relative;
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--sjb-text-faint);
		font: inherit;
		font-size: 10px;
		font-weight: 600;
		text-decoration: none;
		cursor: pointer;
	}

	.sjb-tabbar__item.is-current,
	.sjb-tabbar__item[aria-pressed="true"],
	.sjb-tabbar__item[aria-expanded="true"] {
		color: var(--sjb-accent-text);
	}

	.sjb-tabbar__item--apply.is-available {
		color: var(--sjb-accent-text);
	}

	.sjb-tabbar__item--apply:disabled {
		opacity: 0.55;
		color: var(--sjb-text-faint);
		cursor: default;
	}

	/*
	 * Apply is raised out of the bar rather than sitting flush with the other four. The ring
	 * around the icon is the bar's own background, cut into whatever sits behind it.
	 */
	.sjb-tabbar__item--featured .sjb-icon {
		box-sizing: content-box;
		padding: 6px;
		margin-top: -20px;
		border-radius: 50%;
		background: var(--sjb-surface-3);
		box-shadow: 0 0 0 4px var(--sjb-header-bg);
		transition: filter 0.15s ease, color 0.15s ease;
	}

	.sjb-tabbar__item--apply.is-available .sjb-icon {
		filter: drop-shadow(0 0 3px var(--sjb-accent-line));
	}

	.sjb-tabbar__count {
		position: absolute;
		top: 4px;
		right: 50%;
		transform: translateX(18px);
		min-width: 15px;
		padding: 0 4px;
		border-radius: var(--sjb-radius-pill);
		background: var(--sjb-accent);
		color: var(--sjb-text-on-accent);
		font-size: 9px;
		line-height: 15px;
	}

	/* Everything that is not the workspace needs clearance for the bar. */
	body:not(.sjb-body--workspace) .sjb-main {
		padding-bottom: calc(var(--sjb-tabbar-h) + env(safe-area-inset-bottom));
	}

	body:not(.sjb-body--workspace) .sjb-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	body:not(.sjb-body--workspace) .sjb-footer__legal {
		margin-left: 0;
	}

	/* --- The single offer becomes one column (§AB). --- */

	.sjb-single {
		padding: 14px 16px 40px;
	}

	.sjb-single__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.sjb-single__side {
		position: static;
	}

	.sjb-report-dialog {
		width: calc(100% - 20px);
		max-height: calc(100dvh - 20px);
	}

	.sjb-report-dialog__panel {
		padding: 18px;
	}

	.sjb-report-form__actions {
		flex-direction: column-reverse;
	}

	.sjb-report-form__actions .sjb-btn {
		width: 100%;
	}

	.sjb-box--apply {
		scroll-margin-top: calc(var(--sjb-header-h) + 12px);
	}

	.sjb-hero__title {
		font-size: 22px;
	}

	.sjb-hero__media {
		aspect-ratio: 4 / 3;
	}

	.sjb-hero__content {
		padding: 14px;
	}

	/* The provenance link stays useful without becoming the hero's widest, heaviest chip. */
	.sjb-source--has-domain {
		margin-top: 10px;
		padding: 5px 9px;
	}

	.sjb-source--has-domain .sjb-source__label {
		display: none;
	}

	.sjb-source__domain {
		display: block;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.sjb-expired {
		flex-wrap: wrap;
	}

	.sjb-expired .sjb-btn {
		margin-left: 0;
		width: 100%;
	}

	/* Chrome's phone PDF UI cannot be inspected from the parent page. A moderator-supplied image
	 * therefore replaces the iframe deterministically on phones; without one, the iframe remains. */
	.sjb-preview__image-link {
		display: block;
	}

	.sjb-preview__image-link + iframe {
		display: none;
	}

	/* --- Forms and pages --- */

	.sjb-grid2,
	.sjb-grid3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.sjb-tiles__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sjb-savedpage__title,
	.sjb-formpage__title {
		font-size: 24px;
	}

	.sjb-savedpage,
	.sjb-formpage {
		padding: 22px 16px 40px;
	}

	/* --- About page --- */

	.sjb-about {
		padding: 34px 16px 20px;
	}

	.sjb-about::before {
		left: 0;
		width: 100%;
		height: 480px;
	}

	.sjb-about-hero,
	.sjb-about-why {
		grid-template-columns: minmax(0, 1fr);
	}

	.sjb-about-hero {
		gap: 30px;
	}

	.sjb-about-hero__copy {
		padding: 0;
	}

	.sjb-about-hero__title {
		font-size: clamp(42px, 13vw, 60px);
	}

	.sjb-about-hero__lede {
		margin-top: 18px;
	}

	.sjb-about-hero__actions .sjb-btn {
		flex: 1 1 145px;
	}

	.sjb-about-hero__facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		margin-top: 22px;
	}

	.sjb-about-hero__media {
		border-radius: 18px;
	}

	.sjb-about-hero__media img {
		aspect-ratio: 4 / 3;
	}

	.sjb-about-principles,
	.sjb-about-process__steps,
	.sjb-about-audiences {
		grid-template-columns: minmax(0, 1fr);
	}

	.sjb-about-principles {
		gap: 14px;
		margin-top: 28px;
	}

	.sjb-about-principle {
		min-height: 0;
	}

	.sjb-about-why {
		gap: 30px;
		margin-top: 72px;
	}

	.sjb-about-why__list > li {
		grid-template-columns: 40px minmax(0, 1fr);
		padding: 13px 15px;
	}

	.sjb-about-why__list > li > span:last-child {
		display: none;
	}

	.sjb-about-industries,
	.sjb-about-process {
		margin-top: 72px;
	}

	.sjb-about-industries__grid {
		display: flex;
		margin-inline: -16px;
		padding-inline: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.sjb-about-industries__grid li {
		flex: 0 0 112px;
		scroll-snap-align: start;
	}

	.sjb-about-process__steps {
		gap: 13px;
	}

	.sjb-about-process__steps::before {
		display: none;
	}

	.sjb-about-audiences {
		gap: 14px;
	}

	.sjb-about-audience {
		padding: 24px 20px;
	}

	.sjb-about-cta {
		grid-template-columns: minmax(0, 1fr);
		gap: 15px;
		padding: 24px 20px;
	}

	.sjb-about-cta > .sjb-icon {
		display: none;
	}

	.sjb-about-cta .sjb-btn {
		width: 100%;
	}
}

/* ===================================================================================
 * Small phones — the rail and the tab bar both get tight below this
 * =================================================================================== */

@media (max-width: 380px) {
	.sjb-chip {
		width: 80px;
	}

	.sjb-chip__label {
		font-size: 10px;
	}

	.sjb-tabbar__item span {
		font-size: 9px;
	}
}

/* At 349px and below the header's Post shortcut no longer fits beside the brand and tools. */
@media (max-width: 349px) {
	.sjb-header__cta {
		display: none;
	}
}

/* ===================================================================================
 * Motion
 * =================================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ===================================================================================
 * Print — the offer page is the only thing worth printing
 * =================================================================================== */

@media print {
	.sjb-header,
	.sjb-rail,
	.sjb-tabbar,
	.sjb-footer,
	.sjb-backlink,
	.sjb-map,
	.sjb-related {
		display: none !important;
	}

	.sjb-single__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}