/* =========================================================================
   HNZ Constructions — home hero

   Overrides for the offset hero block (.section--hero / .hero__*). Loads
   after sections.css (see hnz_style_parts() in inc/enqueue.php) so these
   rules win the cascade without !important.

   Measured off Home.png (1442px export = the 1440px artboard). Hard landmarks
   only — image edges and cap heights, not line-box guesses:

     image block      x 359–1262, y 28–741  ->  904 x 714  (ratio 1.2661)
                      = 24.93% in from the left, 12.29% from the right;
                      the tokens carry those two insets
     image top        y 28 = flush under the utility bar (bar is y 0–27)
     heading          left edge x 417, i.e. 58px in from the image edge
                      cap height 69px  -> ~98px type, matching --fs-800 (97px)
                      cap top line 1 y 407, line 2 y 530
                      -> 123px baseline-to-baseline = line-height 1.25
     CTA              "Learn More" x 415 (56px in), cap height 16px -> 24px
                      type, matching --fs-500; cap top y 661
     CTA -> image btm 60px from the CTA's line box to y 741

   Two things the design does NOT have, which earlier drafts guessed at:

   - No text-shadow on the heading. Sampling across the 'S' of "Shopfitter"
     the luminance goes 78 -> 210 -> 255 in a single pixel, and the background
     next to the glyph is no darker than the background 40px away. A blurred
     shadow would leave a measurable halo; there is none.
   - The heading is not a link and never was. base.css already sets
     `a { color: inherit; text-decoration: none }`, so a nested anchor could
     not produce the blue underline seen in the browser — that came from
     outside the theme (see the note in the handover).
   ========================================================================= */

/* Heading ---------------------------------------------------------------
   base.css gives every heading --lh-tight (1). At the hero's ~98px that
   stacks the two lines 25px tighter than the design. This is the single
   most visible correction in this file. */
.hero__heading {
	line-height: var(--lh-snug); /* 1.25 -> 123px baseline spacing at 98px */
	margin-bottom: var(--sp-6);  /* 32px, derived from the measured line boxes */
}

/* Media ---------------------------------------------------------------- */

/*
 * The Home export has a deliberate breathing space after the offset image:
 * the photo ends at y=741 and the next section's divider lands at y=841.
 * A neighbouring section owns its divider, so this belongs to the home hero
 * rather than to the About block. Without it the divider is drawn flush to
 * the image, which makes the opening composition noticeably denser than the
 * supplied design.
 */
@media (min-width: 1300px) {
	.section--hero {
		padding-bottom: 6.125rem; /* 98px at the 1440px reference artboard. */
	}
}

@media (min-width: 1300px) {
	/*
	 * The shared inner-page hero ratio is 904/534. Home is deliberately taller:
	 * its measured block is 904 x 714, giving the 452/357 ratio below.
	 */
	.hero__image {
		aspect-ratio: 452 / 357;
	}

  .home .hero__image {
		aspect-ratio: 904 / 743;
  }

	/*
	 * sections.css only sets padding-inline at this breakpoint, so
	 * padding-block-end still falls through to the base rule's --sp-6.
	 * The measured insets are 56px from the image's left edge and 60px from
	 * its bottom.
	 */
	.hero__content {
		padding-inline-start: 3.5rem; /* 56px */
		padding-inline-end: var(--sp-7);
		padding-block-end: 3.75rem;   /* 60px */
	}
}