/*
 * Layout changes that intrinsic sizing cannot express on its own.
 * Everything else responds through clamp(), flex-basis and auto-fill grids.
 */

/* Desktop navigation ------------------------------------------------- */

@media (max-width: 999px) {
	.primary-nav,
	.header__utility {
		display: none;
	}

	.header__compact {
		display: flex;
	}

	.mega {
		display: none !important;
	}

	.article__tools {
		flex: 1 1 100%;
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		order: 2;
		min-width: 0;
		padding-top: var(--space-6);
		border-top: 1px solid var(--color-border);
	}

	.article__col {
		order: 1;
		flex-basis: 100%;
		max-width: 100%;
		margin-inline: auto;
	}

	.article__widgets {
		flex-basis: 100%;
	}

	.feed-day__label {
		flex: 1 1 100%;
		position: static;
		margin-bottom: var(--space-3);
	}
}

@media (min-width: 1000px) {
	.header__compact {
		display: none;
	}

	.mobile-nav {
		display: none !important;
	}
}

/* Tablet ------------------------------------------------------------- */

@media (max-width: 860px) {
	.collection__top,
	.hero__inner,
	.feature-block__inner {
		align-items: flex-start;
	}

	.author-head__portrait {
		flex-basis: 140px;
	}

	.series__media {
		max-width: 320px;
	}

	.card--media-lg .card__media,
	.card--media-md .card__media {
		flex-basis: 160px;
		max-width: 34%;
	}
}

/* Phone -------------------------------------------------------------- */

@media (max-width: 639px) {
	.card-grid {
		grid-template-columns: 1fr;
	}

	.card--media-sm .card__media,
	.card--media-md .card__media,
	.card--media-lg .card__media,
	.card--feed .card__media {
		flex-basis: 116px;
		max-width: 38%;
	}

	.video-card--row .video-card__trigger,
	.video-card--row .video-card__media {
		flex-basis: 128px;
	}

	.newsletter__row {
		flex-direction: column;
		align-items: stretch;
	}

	.newsletter__row .btn {
		width: 100%;
	}

	.author-card {
		padding: 22px;
	}

	.author-card__avatar {
		width: 96px;
		height: 96px;
	}

	.article__tools {
		gap: var(--space-2);
	}

	.error-page__actions .btn,
	.mobile-nav__cta {
		width: 100%;
	}

	.footer__legal {
		justify-content: flex-start;
	}
}

@media (max-width: 420px) {
	.card--row {
		gap: var(--space-4);
	}

	.byline {
		gap: 10px;
	}

	.byline__rule {
		display: none;
	}

	.search-panel__head {
		flex-wrap: wrap;
		gap: var(--space-3);
	}
}

/* Print --------------------------------------------------------------- */

@media print {
	.site-header,
	.site-footer,
	.article__tools,
	.newsletter,
	.related,
	.search-overlay,
	.mobile-nav,
	.toast {
		display: none !important;
	}

	.article__col {
		max-width: none;
	}

	body {
		color: #000;
	}
}