/* ==========================================================================
   NH Marathon — hero info box: local "size & shape" in live colors.
   Loaded at wp_head 115 by includes/nhm-hero.php — after Customizer
   Additional CSS (101) and nhm-header.css (110), before the local-only
   full redesign CSS (120).

   Shape from the local redesign hero card:
     480px wide (home, ≥1025px) · 14px radius · padding 36/40/32 · deep shadow
     + 4px top border.
   Colors stay live: frosted-glass white panel (rgba(255,255,255,.82) +
   backdrop blur, so it stays readable over the photo) and yellow #ffc120
   top border (same yellow as the Register pill). Text colors are untouched —
   this only changes the card's size, shape, border and panel opacity/blur.

   The matching Customizer rules are !important, so the properties they set
   use !important here too; we load later (wp_head 115 > 101) and win ties.

   To disable: delete this file + includes/nhm-hero.php.
   ========================================================================== */

/* Hero card shape — every page with a photo banner (home + interior banners).
   NOTE: no `body` element in the selector — specificity must stay equal to the
   local redesign's rule (.nhm-redesign …) so that, when both load locally,
   the later-loaded redesign CSS (wp_head 120) wins. On live only this file
   applies. */
.nhm-hero .banner-area.has-bg-image .inner-light {
	background-color: rgba(255, 255, 255, .82) !important; /* frosted glass over photo */
	-webkit-backdrop-filter: blur(6px);                    /* keeps it readable over the image */
	backdrop-filter: blur(6px);
	border-top: 4px solid #ffc120;                         /* live yellow. Green alt: #00754e */
	border-radius: 14px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 18px 48px rgba(0, 0, 0, .14);
	padding: 36px 40px 32px;
}

/* Home hero card width (local size). Interior pages keep their Customizer widths. */
@media (min-width: 1025px) {
	.nhm-hero.home .banner-area .section-content.width-md {
		max-width: 480px !important; /* live Customizer sets 620px */
	}
}

/* ==========================================================================
   Mobile (≤1024px): move the home hero info box lower.

   Mirrors the local full-redesign's mobile layout (assets/css/nhm-redesign.css,
   @media max-width:1024px) but in LIVE colors. On phones/tablets the hero photo
   stops filling the whole banner and becomes a fixed-height band on top; the
   info card drops below it instead of floating over the middle of the photo.

   What changes vs. the redesign (all color, no layout):
     - band background  navy-deep (#151e27)  -> slate #394a53
     - card             solid navy            -> unchanged live frosted white
                                                 glass + yellow #ffc120 top border
   The card's own rules above are left untouched, so it keeps its current look.

   Notes:
   - `background-color` needs !important: the banner <section> carries an inline
     style="background-color:#f2f2f2" from Mai, which beats a normal rule.
   - padding-top/padding-bottom override the Customizer's `.home .banner-area
     .height-xl` (loaded earlier at wp_head 101); our selector is more specific,
     so it wins without !important.
   ========================================================================== */
@media (max-width: 1024px) {
	.nhm-hero.home {
		--nhm-hero-photo-h: min(72vw, 600px);
	}

	/* Solid slate band fills the space below the photo (replaces the redesign's
	   navy-deep). !important overrides the inline #f2f2f2. */
	.nhm-hero.home .banner-area.has-bg-image {
		background-color: #394a53 !important;
	}

	/* Photo anchors to the top as a fixed-height band instead of filling the
	   whole banner. object-position keeps the runner (left of centre) in frame. */
	.nhm-hero.home .banner-area .bg-image {
		height: var(--nhm-hero-photo-h);
		bottom: auto;
		object-position: 32% 50%;
	}

	/* Push the info card down so it sits just below the photo band (the -36px
	   tucks its top edge up under the photo, matching the redesign). */
	.nhm-hero.home .banner-area .wrap.height-xl {
		padding-top: calc(var(--nhm-hero-photo-h) - 36px);
		padding-bottom: 28px;
		justify-content: center; /* Mai's end-xs right-aligns it on mobile */
	}

	/* Centre the card with a comfortable max-width (matches the redesign). */
	.nhm-hero.home .banner-area .section-content.width-md {
		max-width: 640px !important;
		margin-left: auto;
		margin-right: auto;
	}
}