/*
 * responsive.css — breakpoint overrides.
 * Loaded on every page, last in the cascade.
 *
 * The base styles are desktop-leaning for grid counts only; every other rule
 * is size-agnostic. Breakpoints step down: 1024, 900, 768, 600, 400.
 */

@media (max-width: 1024px) {
	:root {
		--fag-header-h: 76px;
	}

	.site-logo__img {
		max-height: 48px;
	}

	.hero--bg {
		min-height: clamp(380px, 46vw, 480px);
	}

	.site-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.footer-col--about {
		grid-column: 1 / -1;
	}

	.steps-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	:root {
		--fag-sp-8: 3rem;
		--fag-sp-9: 3.5rem;
	}

	.hero {
		padding: var(--fag-sp-7) 0;
	}

	/*
	 * Narrow screens: the text can no longer sit clear of the photograph, so
	 * the scrim turns near-solid at the top and the image reads as a tint
	 * rather than a picture. Readability wins over the effect.
	 */
	.hero--bg {
		min-height: 0;
		padding-block: var(--fag-sp-7) calc(var(--fag-sp-7) + 32px);
	}

	.hero__bg-img {
		object-position: 65% center;
	}

	.hero__scrim {
		background:
			linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.96) 0%,
				rgba(255, 255, 255, 0.92) 55%,
				rgba(255, 255, 255, 0.72) 100%
			);
	}

	.hero__curve {
		height: 40px;
	}

	.post-grid,
	.post-grid--related {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	/* Below this width the primary nav is replaced by the menu button. */
	.primary-nav {
		display: none;
	}

	.header-btn--menu {
		display: inline-flex;
	}

	.site-header__inner {
		gap: var(--fag-sp-3);
	}

	:root {
		--fag-header-h: 66px;
	}

	.site-logo__img {
		max-height: 42px;
	}

	.section-head--row {
		flex-direction: column;
		align-items: flex-start;
	}

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

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

	.post-nav__link--next {
		grid-column: 1;
		text-align: left;
	}

	.comments__list .children {
		padding-left: var(--fag-sp-3);
	}
}

@media (max-width: 600px) {
	:root {
		--fag-fs-base: 1rem;
		--fag-fs-md: 1.0625rem;
		--fag-sp-8: 2.5rem;
	}

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--fag-sp-5);
	}

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

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

	.category-card__link {
		padding: var(--fag-sp-3);
		gap: var(--fag-sp-3);
	}

	.category-card__icon {
		width: 40px;
		height: 40px;
	}

	.category-card__desc {
		display: none;
	}

	.empty-state {
		padding: var(--fag-sp-5) var(--fag-sp-4);
	}

	/* Keep the hero from eating the phone screen. */
	.hero__actions .btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.hero__badges {
		gap: var(--fag-sp-2) var(--fag-sp-4);
	}

	.hero__badge {
		font-size: var(--fag-fs-xs);
		/* Narrow screens have no room to keep every phrase on one line. */
		white-space: normal;
	}

	.prose .alignleft,
	.prose .alignright {
		float: none;
		margin: 0 0 var(--fag-sp-4);
	}
}

@media (max-width: 400px) {
	.site-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.search-form__submit {
		width: 40px;
	}
}

/* Long words and URLs must never widen the page. */
@media (max-width: 480px) {
	.article__title,
	.post-card__title,
	.archive-header__title,
	.prose {
		hyphens: auto;
	}
}