/* ==========================================================================
   E. Responsive -- Lake Auburn Legal's tablet and narrow layers, loaded after
   lake-auburn-legal.css. The phone layout below 768px is phone-chrome.css and phone-sections.css.
   ========================================================================== */

@media (max-width: 1024px) {
	.lal-header__top {
		grid-template-columns: 200px 1fr;
	}

	.lal-header__call {
		display: none;
	}

	/* The call group is hidden here, so its 279.3px column would only push the pill past the row. */
	.lal-header__strip {
		grid-template-columns: 1fr;
	}

	.lal-nav {
		gap: 20px;
	}

	.lal-nav a {
		font-size: 15px;
	}

	/* The service and contact variants set their desktop columns with a two-class selector, so the
	   collapse repeats those selectors to outrank them. */
	.lal-cta__grid,
	.lal-cta--service .lal-cta__grid,
	.lal-cta--stack .lal-cta__grid {
		grid-template-columns: 1fr;
	}

	/* The contact band's card hangs 117.6px left of the row on desktop; below this width that would
	   push it off the screen. */
	.lal-cta--stack .lal-cta__grid {
		margin-left: 0;
	}
}

@media (max-width: 860px) {
	.lal {
		--lal-section-y: 44px;
		/* The 57px row padding is a desktop measurement; a phone needs the space back. */
		--lal-gutter: 20px;
	}

	.lal-header__top {
		grid-template-columns: 1fr auto;
	}

	.lal-header__strip {
		display: none;
	}

	/* The toggle and the collapsing both wait for `lal-js` on the root, which lal_js_class() sets in
	   the head. Without JavaScript the menu stays open as a column and no dead button shows. */
	.lal-js .lal-header__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.lal-header__navbar .lal-nav {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding-block: 12px;
	}

	/* Collapsed until the toggle sets `data-open` on the navbar. */
	.lal-js .lal-header__navbar:not([data-open='true']) .lal-nav {
		display: none;
	}

	/* The bar grows to fit an open menu. */
	.lal-header__navbar {
		min-height: 72px;
	}

	/* A placed hero carries its desktop height and title offset inline (see lal_sec_hero), and
	   only !important reaches past an inline style: on a phone every hero takes this size. */
	.lal-hero,
	.lal-hero--placed {
		min-height: 460px !important;
		padding: 64px 0 !important;
	}

	.lal-hero h1 {
		font-size: 28px;
	}

	.lal-hero .lal-hero__arc {
		display: none;
	}

	.lal-intro__grid,
	.lal-local__grid,
	.lal-why,
	.lal-tips,
	.lal-team__grid,
	.lal-team__row--reverse .lal-team__grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	/* The home page pins these inline (see lal_sec_why); on a phone every page takes this. */
	.lal-why__photo,
	.lal-tips__photo {
		min-height: 340px !important;
	}

	.lal-why__body,
	.lal-tips__body {
		max-width: none;
		margin-inline: auto;
		padding: 40px var(--lal-gutter);
	}

	/* Keep the photograph above the copy on a reversed row, as the original does. */
	.lal-team__row--reverse .lal-team__photo {
		order: 0;
	}

	.lal-cards__grid {
		grid-template-columns: 1fr;
	}

	/* The lone third tier card is pinned to the desktop column width; on one column it spans it. */
	.lal-cards__grid > .lal-card--tier:nth-child(3):last-child {
		width: auto;
		justify-self: stretch;
	}

	.lal-process__step {
		grid-template-columns: 84px 1fr;
		gap: 18px;
		min-height: 0;
		padding-block: 14px;
	}

	.lal-process__num {
		font-size: 34px;
	}

	.lal-footer__cols {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.lal .lal-divider {
		height: 160px;
	}
}