/*
 * Breakpoint overrides. Mobile-first: base styles in base/layout/components
 * target small screens; rules here progressively enhance for larger
 * viewports. Breakpoints match the scale documented in variables.css.
 */

/* sm: 640px */
@media (min-width: 40em) {
	.grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.search-form:not(.search-form--hero) {
		max-width: 28rem;
	}

	.newsletter-form {
		flex-direction: row;
		max-width: 32rem;
	}

	.newsletter-form .form-control {
		flex: 1;
	}

	.tools-toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.tools-toolbar__search {
		max-width: 24rem;
	}

	.tools-toolbar__sort .form-control {
		width: auto;
	}

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

	.prompt-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.prompt-row__title {
		flex: 1;
		min-width: 0;
	}
}

/* md: 768px */
@media (min-width: 48em) {
	.grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

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

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

	.feature-strip__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-widgets {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.tool-detail-hero__inner {
		flex-direction: row;
		align-items: center;
	}

	.pros-cons {
		grid-template-columns: repeat(2, 1fr);
	}

	.comparison-vs {
		grid-template-columns: repeat(2, 1fr);
	}

	.comparison-vs:has(.comparison-vs__col:nth-child(3)) {
		grid-template-columns: repeat(3, 1fr);
	}

	.prompt-example {
		grid-template-columns: repeat(2, 1fr);
	}

	.tool-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* lg: 1024px — primary breakpoint where mobile nav becomes desktop nav */
@media (min-width: 64em) {
	.primary-navigation {
		display: block;
	}

	.menu-toggle,
	.mobile-navigation {
		display: none;
	}

	.header-search-inline {
		display: flex;
	}

	.header-search {
		display: none;
	}

	.favorites-toggle {
		display: inline-flex;
	}

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

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

	.feature-strip__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.footer-widgets {
		grid-template-columns: repeat(4, 1fr);
	}

	.footer-columns {
		grid-template-columns: 1.4fr repeat(3, 1fr);
	}

	.tool-detail-layout {
		grid-template-columns: 2fr 1fr;
	}

	.tool-detail-sidebar {
		position: sticky;
		top: calc(var(--header-height) + var(--space-6));
	}

	.hero__inner {
		grid-template-columns: 1.05fr 1fr;
	}
}

/* xl: 1280px */
@media (min-width: 80em) {
	.page-header__inner {
		max-width: 56rem;
	}
}