/*
 * iOS Safari viewport fix — must be the LAST stylesheet loaded.
 *
 * Why a cascade layer: an !important declaration inside any @layer beats
 * every unlayered !important declaration, regardless of selector
 * specificity or source order. That lets this small file override the
 * hardcoded !important rules in the other stylesheets without editing them.
 *
 * Why svh/lvh: on iOS, `vh` = the LARGE viewport (toolbars hidden) and `dvh`
 * changes size while the address bar / bottom bar slide in and out. Mixing
 * them (wrapper in vh, sticky hero in dvh) leaves blank space and makes the
 * hero resize mid-scroll. `svh` (small, toolbars shown) and `lvh` (large)
 * never change while scrolling. The var(--app-vh) line is a fallback for
 * iOS < 15.4 and is set by js/core/viewport.js; browsers that understand
 * svh/lvh use the next line.
 */
@layer ios-viewport-fix {
  body {
    min-height: calc(var(--app-vh, 1vh) * 100) !important;
    min-height: 100svh !important;
  }

  .ch-contact {
    min-height: calc(var(--app-vh, 1vh) * 100) !important;
    min-height: 100svh !important;
  }

  /*
   * Phone hero: the background fills the LARGE viewport (lvh, also stable) so
   * it reaches under Safari's floating bottom bar with no dark strip, while the
   * extra bottom padding (lvh - svh = the toolbar height) keeps the content
   * inside the area that is always visible. Browsers without lvh/svh drop
   * those lines and use the --app-vh fallback with the original padding.
   */
  @media (max-width: 768px), (max-width: 1366px) and (orientation: portrait) {
    .hero-pin-wrapper {
      height: calc(var(--app-vh, 1vh) * 100 + 780px) !important;
      height: calc(100lvh + 780px) !important;
      min-height: 0 !important;
    }

    .hero-cinematic {
      height: calc(var(--app-vh, 1vh) * 100) !important;
      height: 100lvh !important;
      min-height: 0 !important;
      max-height: none !important;
      padding-bottom: calc(20px + 100lvh - 100svh) !important;
      /* Lets hero-responsive.css pick the compact layout from the hero's real
         visible height (@container hero) instead of the full screen height. */
      container: hero / size !important;
    }
  }

  /* Compact hero polish (same condition as the compact block in
     hero-responsive.css): spread the free space between the left-column
     blocks instead of leaving one big gap under the name, and lift the
     "A healthier tomorrow" tagline off the 01–05 pagination. */
  @container hero (max-height: 748px) {
    .hero-col--left {
      flex: 1 1 auto !important;
      justify-content: space-evenly !important;
    }

    .impact-mantra {
      top: 8px !important;
    }
  }

  @media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .hero-cinematic {
      min-height: calc(var(--app-vh, 1vh) * 100) !important;
      min-height: 100svh !important;
    }
  }
}