/* =============================================================
   WBA — SITE-WIDE MOBILE HERO FIX
   -------------------------------------------------------------
   Problem: every inner-page hero follows the consistency rule
   `height: 58vh` with flex-centred content. On mobile the
   content (wrapped display headline + lede + pills + stacked
   full-width CTA) is TALLER than 58vh, so the flex-centred
   overflow clips out the top (under the sticky nav) and the
   bottom (over the anchor nav).

   Fix: on mobile, the hero's height becomes content-driven.
   `height: auto` + `min-height` keeps the visual weight but
   lets tall content grow the section instead of clipping.

   Load order: this file must be enqueued AFTER all page CSS
   (use priority 99 on wp_enqueue_scripts — snippet in the
   install notes).

   Selector strategy: every page hero is a <section> whose
   block class ends in "-hero" (verbatim copies of .ah-hero).
   The :not([class*="__"]) guard excludes BEM child elements
   (e.g. .ah-hero__inner) so only the section itself is
   targeted. If any future hero is not a <section>, add its
   class to the list explicitly.
   ============================================================= */

@media (max-width: 900px) {

	/* --- 1. Let the hero grow with its content ------------- */
	section[class*="-hero"]:not([class*="__"]) {
		height: auto !important;
		min-height: 480px !important;
		/* svh = small viewport height — stable when the mobile
		   URL bar shows/hides. Falls back gracefully. */
		min-height: max(480px, 58svh) !important;
		padding-top: 56px !important;
		padding-bottom: 64px !important;
		/* Belt & braces: if content still momentarily exceeds
		   the box during font load, never clip it. */
		overflow: visible !important;
	}
}

@media (max-width: 700px) {

	/* --- 2. Tighter floor on small phones, per the original
	         consistency rule's 440px mobile figure ----------- */
	section[class*="-hero"]:not([class*="__"]) {
		min-height: 440px !important;
		padding-top: 48px !important;
		padding-bottom: 56px !important;
	}

	/* --- 3. Rein in display-scale headlines on mobile.
	         Desktop hero H1s are display-scale; unclamped they
	         wrap to 4–5 lines and are the main reason content
	         exceeds 58vh. clamp() keeps them big but sane. ---- */
	section[class*="-hero"]:not([class*="__"]) h1 {
		font-size: clamp(1.9rem, 8.5vw, 2.6rem) !important;
		line-height: 1.12 !important;
	}

	/* --- 4. Trim the lede's bottom margin so the CTA row
	         doesn't push so far down ------------------------- */
	section[class*="-hero"]:not([class*="__"]) p {
		margin-bottom: 24px;
	}
}

/* =============================================================
   OPTIONAL — explicit selector list.
   If you ever hit a page where the attribute selector misses
   (e.g. the hero is a <div> or <header>), uncomment and add
   its block class here rather than editing the page CSS:

   @media (max-width: 900px) {
       .cs-hero,
       .co-hero {
           height: auto !important;
           min-height: max(480px, 58svh) !important;
           padding: 56px 0 64px !important;
       }
   }
   ============================================================= */