/*
 * Mobile layout corrections — found by visual QA at 390px, 16 Aug 2026,
 * then corrected again after Dan photographed the live site on a real phone.
 *
 * Kept OUT of llp.css deliberately, for the same reason gallery-polish.css is:
 * llp.css stays byte-comparable against the approved b24 prototype so it can be
 * diffed against it. Corrections live here, each with the measurement that
 * justified it.
 *
 * Loaded after llp.css, so a plain tie goes to this file.
 *
 * @package llp2026
 */

/* ---------------------------------------------------------------------------
 * 1. MASTHEAD BADGES OVERLAPPED EACH OTHER AT PHONE WIDTH
 *
 * At 390px "FRISCO, TX" and "CALIFORNIA" sat on top of one another, staggered
 * and colliding. Screenshotted, not inferred.
 *
 * llp.css already contains a QA correction for this, in @media (max-width:1040px).
 * It never took effect, because an OLDER rule in @media (max-width:720px) is
 * more specific and wins regardless of source order:
 *
 *   .masthead .badges-row .badge                 (0,3,0)  the correction
 *   .masthead .badges-row:last-of-type .badge    (0,4,0)  the old rule — wins
 *                                                          margin-top:-25px
 *
 * Specificity beats source order. Fixed by matching the offending selectors
 * exactly and zeroing the offsets.
 * ------------------------------------------------------------------------ */

@media (max-width: 1040px) {
	.masthead .badges-row:first-of-type .badge,
	.masthead .badges-row:last-of-type .badge {
		grid-column: auto;
		justify-self: auto;
		margin: 0;
		position: static;
	}

	.masthead .badges-row {
		display: flex;
		flex: 0 0 auto;
		gap: 12px;
	}

	/* -----------------------------------------------------------------------
	 * LOGO SCALING — the wordmark was pinned at 550px until the container
	 * physically forced it smaller, so it grew to dominate as the window
	 * narrowed. Measured before this change:
	 *
	 *     1200px viewport   logo 550px   46% of screen
	 *      900px            logo 550px   61%
	 *      700px            logo 550px   79%
	 *      560px            logo 513px   92%   <- crowding both edges
	 *
	 * Not a distortion bug — aspect skew measured 0% at every width, and it is
	 * never upscaled past its natural 550x155. It simply had no instruction to
	 * shrink until it ran out of room.
	 *
	 * min(550px, 68vw) is ONE continuous rule, deliberately: a breakpoint-based
	 * fix would step visibly at the boundary. 550px is still the ceiling, so
	 * desktop is exactly as Liz approved; below ~810px it eases down smoothly.
	 *
	 *     1040px  550    900px  550    700px  476    560px  381    390px  265
	 * -------------------------------------------------------------------- */
	.masthead .logo img {
		width: min(550px, 68vw);
		max-width: 550px;
		height: auto;
	}
}

/* ---------------------------------------------------------------------------
 * 2. THE NAV BAR — TWO BUGS, THE SECOND ONE MINE
 *
 * ORIGINAL BUG: llp.css says
 *
 *     .nav { height:50px; flex-wrap:wrap; }
 *
 * flex-wrap says "make a second row when you need one", height says "you are
 * 50px tall whatever happens". So the wrapped row was laid out but the box did
 * not grow, and with no overflow:hidden it painted over the content beneath.
 *
 * MY FIX MADE A NEW BUG. I let the bar grow AND set
 *
 *     background-size: 100% 100%;
 *
 * The background is not a tiling texture — it is the COMPLETE 1000x50 nav
 * artwork, carrying the frame's top rule and the left/right edge ink.
 * Stretching it to an 88px-tall two-row bar smears that top rule into a thick
 * dark grainy band across the whole width. It is very visible on a real phone
 * at 3x, which is where Dan caught it; my own 390px iframe screenshot showed it
 * too and I did not look hard enough at it.
 *
 * Measured on live before this fix:
 *
 *     360px  rows=2  navH=88  bg-size=100% 100%   <- artwork stretched 1.76x
 *     390px  rows=2  navH=88  bg-size=100% 100%   <- Dan's phone
 *     420px  rows=1  navH=50
 *     440px  rows=2  navH=88                      <- and NON-MONOTONIC:
 *     460px  rows=1  navH=50                         440 wrapped, 460 did not,
 *                                                    because my tighter type
 *                                                    only applied below 420
 *
 * THE APPROACH NOW
 *
 *   a. Never scale the artwork vertically. It is a fixed illustration.
 *   b. Keep all five links on ONE row as far down as the type will allow, so
 *      the bar stays 50px and the artwork is used at its natural size.
 *   c. Below the width where five links genuinely cannot fit, stop pretending:
 *      drop the texture entirely and use a flat bar with real rules, so a
 *      two-row nav reads as deliberate instead of broken.
 * ------------------------------------------------------------------------ */

/* (a) + (b) — one row, artwork at its natural height, progressively tighter. */
@media (max-width: 720px) {
	.nav {
		height: 50px;
		min-height: 50px;
		background-size: 100% 50px;
		background-position: center top;
		background-repeat: no-repeat;
		padding: 0 10px;
		gap: 0 12px;
	}

	.nav a {
		font-size: 10.5px;
		letter-spacing: 0.5px;
		padding: 16px 3px;
	}
}

@media (max-width: 560px) {
	.nav {
		gap: 0 7px;
		padding: 0 6px;
	}

	.nav a {
		font-size: 10px;
		letter-spacing: 0.3px;
		padding: 16px 2px;
	}
}

/* (c) — below this the five labels cannot fit on one row at a legible size, so
   the bar is allowed to grow and the texture is replaced with a flat treatment.
   The colour is sampled from the artwork's own background so the frame still
   reads continuously; the rules replace the top/bottom ink the image carried.

   BREAKPOINT SET BY MEASUREMENT, not by guess. Swept every 20px from 320 to
   1200 on the real page: the five links hold one row down to 360px and first
   wrap at 340px. So the flat fallback starts at 350 — the widest point where
   the artwork genuinely cannot be used at its natural height. Setting it at
   400 (the first attempt) needlessly stripped the texture from 360-400, which
   fit on one row perfectly well. */
@media (max-width: 350px) {
	.nav {
		height: auto;
		min-height: 50px;
		background-image: none;
		background-color: #f4efe8;
		border-top: 1px solid #ded2cb;
		border-bottom: 1px solid #ded2cb;
		padding: 3px 10px 7px;
		row-gap: 0;
	}

	.nav a {
		padding: 11px 3px;
	}
}

/* ---------------------------------------------------------------------------
 * 3. <picture> WRAPPER, added in 0.9.0 for the WebP source.
 *
 * The page's own rule is `#llp-portfolio .grid img { width:100% !important;
 * display:block !important }`. A block-level img inside a default `inline`
 * <picture> does resolve its percentage width against the figure, but relying
 * on block-in-inline layout for a photographer's grid is not worth the risk.
 * ------------------------------------------------------------------------ */

#llp-portfolio#llp-portfolio .grid picture,
#llp-portfolio#llp-portfolio .bestof-grid picture,
.grid picture,
.bestof-grid picture {
	display: block !important;
}

/* ---------------------------------------------------------------------------
 * 4. THE TWO CONTACT BUTTONS DID NOT MATCH
 *
 * Dan spotted this on a phone and asked whether it was deliberate. It was not.
 *
 * Neither button has a width, so each one sizes itself to its own label — and
 * "Family, Senior or Newborn" is simply a longer phrase than "Corporate
 * Event". Measured on /contact-liz/:
 *
 *     viewport   Family/Senior/Newborn   Corporate Event
 *       320px       233 x 66  (2 lines)     197 x 49
 *       360px       273 x 66  (2 lines)     197 x 49
 *       375px+      276 x 47                197 x 49
 *
 * Below 375px the longer label wraps and that button jumps to 66px against the
 * other's 49px. Two stacked buttons of different widths read as unfinished.
 *
 * WHAT CAN AND CANNOT BE FIXED FROM CSS HERE
 *
 * Both anchors carry INLINE styles marked !important — display, padding,
 * background, colour, font-size, letter-spacing. Inline !important beats an
 * author stylesheet's !important, so none of those can be touched from this
 * file. In particular the font cannot be shrunk to stop the wrap.
 *
 * `width` is NOT among the inline declarations, so it is ours to set. Matching
 * the widths is therefore the fix that is actually available, and it is also
 * the one that matters: equal-width stacked buttons read as deliberate whether
 * or not one of them runs to two lines.
 *
 * Scoped to #llp-contact. Swept all seven public pages for this markup shape
 * (a bare <div> of anchors directly inside .pg-hero) — /contact-liz/ is the
 * only page that has it, so nothing else can be caught by this.
 *
 * :has() carries the rule. If a browser does not support it the whole block is
 * dropped and the buttons look exactly as they do today — a safe failure.
 * ------------------------------------------------------------------------ */

@media (max-width: 760px) {
	#llp-contact .pg-hero > div:has(> a) {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	#llp-contact .pg-hero > div:has(> a) > a {
		width: 100%;
		max-width: 320px;
		box-sizing: border-box;
	}
}