/* =============================================================================
 * Krannon Archaeology — Home Hero Fullscreen v1.4.6
 *
 * Makes the hero on the front page fill the entire first viewport.
 *
 * Scope is limited to body.home so internal pages keep their refined
 * heights from v1.4.4 (390 / 340 / 280 px). Three hero markup paths are
 * covered, since the front page can be served by any of them depending
 * on Reading settings and Krannon Sections configuration:
 *
 *   1. front-page.php fallback  → .krannon-editorial-home-hero
 *      (already carries .krannon-hero-height-full; we reinforce it here
 *      so the minimum height stays in sync with the rest of the rules
 *      in this file across the small/normal viewport units).
 *   2. Static page set as front page, rendered through page.php with a
 *      Krannon Section hero  → .krannon-section-hero on body.home.
 *   3. Static page set as front page, with the Page Hero metabox active
 *      → .krannon-page-hero on body.home.
 *
 * Typography is intentionally untouched — hero font sizes remain under
 * the control of the Customizer Typography module.
 * ========================================================================== */


/* -----------------------------------------------------------------------------
 * 1. Full viewport sizing — desktop and tablet baseline.
 * Use 100vh first (universal), then override with svh where supported so
 * mobile browsers don't leave a gap when the address bar collapses.
 * -------------------------------------------------------------------------- */

body.home .krannon-editorial-home-hero,
body.home .krannon-section-hero,
body.home .krannon-page-hero {
  min-height: 100vh;
  min-height: calc(100vh - var(--krannon-header-height, 0px));

  display: flex;
  align-items: center;

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


/* -----------------------------------------------------------------------------
 * 2. Mobile-safe viewport handling.
 * 100svh keeps the hero at exactly one screen even when the browser bar
 * is shown, preventing the awkward jump that 100vh produces on iOS / Android.
 * -------------------------------------------------------------------------- */

@supports (height: 100svh) {
  body.home .krannon-editorial-home-hero,
  body.home .krannon-section-hero,
  body.home .krannon-page-hero {
    min-height: 100svh;
    min-height: calc(100svh - var(--krannon-header-height, 0px));
  }
}


/* -----------------------------------------------------------------------------
 * 3. Inner column — keep the editorial left-aligned layout.
 * The hero copy stays in the existing inner column. We do not centre it
 * horizontally; we only ensure vertical centring inside the now-larger
 * hero box. The default padding inside .krannon-section-hero-inner is
 * left intact so spacing scales naturally with content length.
 * -------------------------------------------------------------------------- */

body.home .krannon-editorial-home-hero > .krannon-container,
body.home .krannon-section-hero > .krannon-container,
body.home .krannon-page-hero > .krannon-container {
  width: 100%;
}


/* -----------------------------------------------------------------------------
 * 4. Reading overlay — strong on the left, fading right, plus a soft top
 * vignette so the navigation reads cleanly over bright photography.
 * Applied only to body.home so it does not double up with the v1.4.4
 * overlay used on internal pages.
 * -------------------------------------------------------------------------- */

body.home .krannon-editorial-home-hero.has-image::before,
body.home .krannon-section-hero.has-image::before,
body.home .krannon-page-hero.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, .58) 0%,
    rgba(0, 0, 0, .36) 42%,
    rgba(0, 0, 0, .18) 100%
  );
  pointer-events: none;
  z-index: 0;
}

body.home .krannon-editorial-home-hero.has-image::after,
body.home .krannon-section-hero.has-image::after,
body.home .krannon-page-hero.has-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 0;
}

body.home .krannon-editorial-home-hero > .krannon-container,
body.home .krannon-section-hero > .krannon-container,
body.home .krannon-page-hero > .krannon-container {
  position: relative;
  z-index: 1;
}


/* -----------------------------------------------------------------------------
 * 5. Next section flow — make sure the section that follows the hero
 * starts cleanly at the top of the second screen, with no negative
 * margin or overlap from previous refinements.
 * -------------------------------------------------------------------------- */

body.home .krannon-editorial-home-hero + .krannon-section,
body.home .krannon-section-hero + .krannon-section,
body.home .krannon-page-hero + .krannon-section {
  margin-top: 0;
}