/*
 * Lake Auburn Legal -- phone layer: page sections, hero to closing call to action.
 *
 * Measured like phone-chrome.css, at 390px against the snapshot, and loaded after it. Page-to-page
 * placement on the original varies by a few pixels on phones too; the values here are the ones
 * most pages share, and a rule names the page it was read from where that is one.
 */

@media (max-width: 767px) {
	/* Hero. The title is 28px throughout on a 277.4px measure (the fraction keeps "Accounting and"
	   on one line of the home title), tracked 0.04em as on desktop, and the
	   button is 138px wide at 15px. The home page places its own: title 100px down, button 47px
	   under it, 103px beneath. */
	.lal .lal-hero h1 {
		max-width: 277.4px;
		letter-spacing: 0.04em;
	}

	.lal-hero .lal-hero__xl {
		font-size: inherit;
	}

	.lal-hero,
	.lal-hero--placed {
		min-height: 0 !important;
		padding: 100px 0 103px !important;
	}

	.lal-hero__inner {
		gap: 47px;
	}

	.lal-hero .wp-block-button__link,
	.lal-cta .wp-block-button__link {
		width: 138px;
		min-height: 0;
		padding: 10px 0;
		font-size: 15px;
		line-height: 19px;
	}

	/* The pattern adds the desktop button offset inline; on a phone the gap above sets it. */
	.lal-hero .lal-buttons,
	.lal-cta .lal-buttons {
		margin-top: 0 !important;
	}

	/* The arcs come back on a phone: 195x115 and 182x120 boxes, the art fitted, hung 74px and
	   70px below the title's top on the home page, just either side of centre. */
	.lal .lal-hero__arc {
		display: block;
		max-width: none;
		height: 115px;
		width: 195px;
		top: 74px !important;
	}

	.lal-hero__arc--left {
		margin-right: 9px;
	}

	.lal .lal-hero__arc--right {
		width: 182px;
		height: 120px;
		top: 70px !important;
		margin-left: -2px !important;
	}

	/* Every other page's hero is one pattern on a phone, whatever its desktop placement: the title
	   45px down, the arcs 18px above it and further apart, the button 52px under the title and 28px
	   above the band's foot. Read off the service pages, which fall within 16px of these. */
	.lal-hero--placed {
		padding: 45px 0 28px !important;
	}

	.lal-hero--placed .lal-hero__inner {
		gap: 52px;
	}

	.lal .lal-hero--placed .lal-hero__arc--left {
		top: -18px !important;
		margin-right: 18px;
	}

	.lal .lal-hero--placed .lal-hero__arc--right {
		top: -17px !important;
		margin-left: 22px !important;
	}

	/* Intro: the copy 39px under the band's top, the photo cluster 45px beneath it and 61px above
	   the band's foot. The cluster is a fixed 345x355 arrangement on a phone. */
	.lal-intro {
		min-height: 0 !important;
		padding: 39px 0 61px;
	}

	.lal-intro__grid > .lal-prose {
		padding-top: 0 !important;
	}

	.lal-intro__grid {
		gap: 45px;
	}

	.lal-intro__cluster {
		width: 344.4px;
		max-width: 100%;
		height: 355px;
		aspect-ratio: auto;
		margin: 0;
	}

	.lal-intro__photo--a {
		top: 0;
		left: 21.4px;
		width: 267px;
	}

	.lal-intro__photo--b {
		top: 150px;
		left: 139.4px;
		width: 205px;
	}

	.lal-intro__photo--c {
		top: 234px;
		left: 15.4px;
		width: 112px;
	}

	/* Service cards: 39px above and below, the lede 10px over the first card, cards 10px apart,
	   each padded 20px with its title at 20px and a 143px rule. */
	.lal-cards {
		padding-block: 39px;
	}

	.lal .lal-cards__lede {
		margin-bottom: 10px;
	}

	.lal-cards__grid {
		gap: 10px;
	}

	.lal-card {
		padding: 20px;
	}

	.lal-card h3 {
		font-size: 20px;
		line-height: 30px;
	}

	.lal-card .lal-rule {
		width: 143px;
	}

	/* The nonprofit page's tier cards keep 22.5px lines with 23px between paragraphs; the strapline
	   sits 10px under the title and the rule 14px either side; the price is 16px on 24px lines. */
	.lal .lal-card--tier p {
		margin-bottom: 23px;
		line-height: 22.5px;
	}

	.lal .lal-card--tier .lal-card__strap {
		margin: 10px 0 0;
	}

	.lal .lal-card--tier .lal-rule {
		margin: 14px 0;
	}

	.lal .lal-card--tier .lal-card__price {
		margin-top: 0;
		font-size: 16px;
		line-height: 24px;
	}

	/* Why: the photograph 311px tall on the row, the copy 12px beneath it with 18px more above the
	   heading, which runs on a 300px measure. */
	.lal-why {
		gap: 12px;
		padding-inline: var(--lal-gutter);
		box-sizing: border-box;
	}

	.lal-why__photo {
		min-height: 311px !important;
	}

	.lal-why__body,
	.lal-tips__body {
		padding: 18px 0 0;
	}

	.lal-why .lal-heading__title {
		max-width: 300px;
	}

	/* Pull quote: 16px copy on 24px lines, 242px wide, 20px above and 50px below; with no sentence
	   the band is 120px. */
	.lal-quote__inner {
		min-height: 120px;
		padding: 20px 0 50px;
		box-sizing: border-box;
	}

	.lal-quote p {
		max-width: 242px;
		margin: 0;
		font-size: 16px;
		line-height: 24px;
	}

	/* Process: the heading at the band's top edge, 39px below the closing line. Each step is a
	   51px column of hairlines at least 131px tall and the text 20px to its right, centred on it,
	   10px between steps; the numeral 40px, the step title 19px. */
	.lal-process {
		padding-block: 0 39px;
	}

	.lal-process .lal-process__lede {
		margin-bottom: 10px;
		font-size: 15px;
		line-height: 22.5px;
	}

	.lal-process__step {
		grid-template-columns: 51px 1fr;
		gap: 20px;
		min-height: 131px;
		padding-block: 0;
	}

	.lal-process__num {
		align-self: start;
		height: 131px;
		font-size: 40px;
	}

	.lal-process__step h3 {
		font-size: 19px;
		line-height: 38px;
	}

	.lal-process__step p {
		font-size: 15px;
		line-height: 30px;
	}

	.lal .lal-process__close {
		font-size: 16px;
		line-height: 32px;
	}

	/* Tips: the copy padded 36px above and below, the photograph 12px beneath it, 319px tall on the
	   row. */
	.lal-tips {
		gap: 12px;
		padding-inline: var(--lal-gutter);
		box-sizing: border-box;
	}

	.lal-tips__body {
		padding: 36px 0;
	}

	.lal-tips__photo {
		min-height: 319px !important;
	}

	/* Local: 39px above and below, the copy first and the disc 24px under it, 272px on the left. */
	.lal-local {
		padding: 39px 0 !important;
	}

	.lal-local__grid {
		gap: 24px;
	}

	.lal-local__body {
		order: -1;
	}

	.lal-local__photo {
		width: 272px;
		margin: 0;
	}

	/* Contact biographies: each row pads 20px, the portrait runs the column at its own proportions
	   and the copy, 16px on 24px lines, sits 24px under it. */
	.lal-team__row,
	.lal-team__row--reverse {
		padding-block: 20px;
	}

	.lal-team__grid,
	.lal-team__row--reverse .lal-team__grid {
		gap: 24px;
	}

	.lal-team__photo img {
		width: 100%;
		max-width: 327px;
		height: auto;
	}

	.lal .lal-team__copy p {
		font-size: 16px;
		line-height: 24px;
	}

	/* The divider is a 67px strip; the home page's blue spacer beneath it is 158px. */
	.lal .lal-divider {
		height: 67px;
		margin-bottom: 158px;
	}

	.lal-divider::after {
		height: 158px;
	}

	.lal .lal-divider--flush {
		margin-bottom: 0;
	}

	/* Closing call to action: 39px above and below; the card padded 20px, its glyph in a 108px
	   column and the claim on a 206px measure; the copy 12px under the card. */
	.lal-cta,
	.lal-cta--service {
		padding-block: 39px;
	}

	.lal-cta__grid {
		gap: 12px;
	}

	.lal-cta__card {
		gap: 3px;
		padding: 20px;
	}

	.lal-cta__glyph {
		width: 76px;
		height: 76px;
		margin: 16px;
	}

	.lal .lal-cta__card p {
		flex: 1;
		max-width: 206px;
		padding-block: 16px;
	}

	.lal .lal-cta__body p {
		max-width: none;
	}
}