/*
 * UPResults - responsive layer
 *
 * main.css is the 320px design. Everything here is an enhancement for wider
 * viewports, which is why every rule sits inside a min-width query.
 *
 * Tested widths: 320, 360, 375, 390, 412, 768, 1024, 1280 and up.
 */

/* ==========================================================================
   480px - small phones landscape and up
   ========================================================================== */

@media (min-width: 30em) {
	:root {
		--upr-gutter: 1.25rem;
	}

	.upr-card__actions,
	.upr-howto__cta,
	.upr-howto__ctas {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.upr-entry {
		flex-direction: row;
		align-items: flex-start;
	}

	.upr-entry__thumb {
		flex: 0 0 8.5rem;
	}

	.upr-entry__body {
		flex: 1 1 auto;
		min-width: 0;
	}

	.upr-post-nav {
		grid-template-columns: 1fr 1fr;
	}

	.upr-post-nav__link--next {
		text-align: right;
	}
}

/* ==========================================================================
   640px - large phones and small tablets
   ========================================================================== */

@media (min-width: 40em) {
	.upr-card,
	.upr-section,
	.upr-single,
	.upr-page,
	.upr-result-page,
	.upr-related,
	.upr-archive-header,
	.upr-404,
	.upr-empty {
		padding: var(--upr-space-6);
	}

	.upr-hero {
		padding: var(--upr-space-6);
	}

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

	.upr-updates__item {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--upr-space-4);
	}

	.upr-updates__link {
		flex: 1 1 auto;
	}

	.upr-updates__meta {
		flex: none;
		margin-top: 0;
	}

	/* Restore the real table once there is room for four columns. */
	.upr-table thead {
		display: table-header-group;
	}

	.upr-table {
		display: table;
	}

	.upr-table tbody {
		display: table-row-group;
	}

	.upr-table tr {
		display: table-row;
		margin-bottom: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.upr-table th,
	.upr-table td {
		display: table-cell;
		border-bottom: 1px solid var(--upr-border);
	}

	.upr-table tr > :first-child {
		background: transparent;
	}

	.upr-table td::before {
		content: none;
	}

	.upr-table tbody tr:nth-child(odd) {
		background: var(--upr-surface);
	}
}

/* ==========================================================================
   768px - tablets: horizontal navigation
   ========================================================================== */

@media (min-width: 48em) {
	.upr-nav-toggle {
		display: none;
	}

	/* The collapsed state is a small-screen concern only. */
	.upr-nav[data-upr-collapsed="true"],
	.upr-nav[data-upr-collapsed="false"] {
		display: flex;
	}

	.upr-nav {
		flex: 1 1 auto;
		flex-basis: auto;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--upr-space-4);
	}

	.upr-menu {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--upr-space-1);
	}

	.upr-menu a {
		padding: var(--upr-space-2) var(--upr-space-3);
	}

	.upr-menu .current-menu-item > a,
	.upr-menu .current_page_item > a {
		box-shadow: inset 0 -3px 0 var(--upr-primary);
		border-radius: var(--upr-radius-sm) var(--upr-radius-sm) 0 0;
	}

	/* Sub-menus become a dropdown, opened by hover and by keyboard focus. */
	.upr-menu li {
		position: relative;
	}

	.upr-menu .sub-menu {
		position: absolute;
		left: 0;
		top: 100%;
		z-index: 30;
		min-width: 13rem;
		padding: var(--upr-space-2);
		border: 1px solid var(--upr-border);
		border-radius: var(--upr-radius-sm);
		background: var(--upr-base);
		box-shadow: var(--upr-shadow);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.12s ease;
	}

	.upr-menu li:hover > .sub-menu,
	.upr-menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
	}

	.upr-nav__search {
		flex: 0 0 15rem;
		padding-block: 0;
	}

	.upr-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

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

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

	.upr-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: var(--upr-space-6);
	}

	/* The brand column stops spanning once there are three real columns. */
	.upr-footer__col--brand {
		grid-column: auto;
	}

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

	/* The mobile-only ad slot stops rendering once the tablet layout begins. */
	.upr-ad--mobile {
		display: none;
	}

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

	.upr-facts__row {
		flex-direction: column;
		gap: var(--upr-space-1);
	}

	.upr-facts dt {
		min-width: 0;
	}
}

/* ==========================================================================
   1024px - desktop: sidebar column
   ========================================================================== */

@media (min-width: 64em) {
	:root {
		--upr-gutter: 1.5rem;
	}

	.upr-shell {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--upr-space-6);
		align-items: start;
	}

	body:not(.upr-no-sidebar) .upr-shell {
		grid-template-columns: minmax(0, 1fr) 20rem;
	}

	.upr-sidebar {
		margin-top: 0;
		position: sticky;
		top: var(--upr-space-5);
	}

	.upr-header--sticky ~ .upr-shell .upr-sidebar {
		top: 6rem;
	}

	.upr-ad--sidebar {
		display: block;
	}

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

	.upr-hero__title {
		max-width: 24ch;
	}

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

/* ==========================================================================
   1280px and up
   ========================================================================== */

@media (min-width: 80em) {
	.upr-section,
	.upr-card {
		padding: var(--upr-space-6) var(--upr-space-7);
	}

	.upr-hero {
		padding: var(--upr-space-7);
	}
}

/* ==========================================================================
   Wide screens with no sidebar: keep prose readable
   ========================================================================== */

@media (min-width: 64em) {
	body.upr-no-sidebar .upr-prose {
		max-width: var(--upr-content);
	}

	body.upr-no-sidebar .upr-archive-lead,
	body.upr-no-sidebar .upr-section__lead {
		max-width: 70ch;
	}
}