/* The scroll-reveal IntersectionObserver that drives these fade/scale/slide
   classes lives in app.blade.php. If JS is disabled entirely there's no
   observer to add data-animation-state="active", so fall back to showing
   everything immediately rather than leaving it stuck at opacity:0. */


.top-blocks--sticky.top-blocks {
  z-index: 100;
  isolation: isolate;
}

/* The fleet aircraft photo (#zhw4-Z) is a background image with
   object-fit:cover, sized by its container's height. Desktop scales
   that height with viewport width (~50vw), keeping close to the
   image's own ~2.1:1 aspect ratio so little gets cropped. Tablet was
   pinned to a fixed 114px regardless of width, which at ~800px wide
   is a ~7:1 box — cover has to zoom in drastically, cropping most of
   the aircraft off both sides (the tail visibly cut off). Give it the
   same vw-based scaling desktop already uses correctly. */
@media screen and (min-width: 361px) and (max-width: 920px) {
  #zhw4-Z .block-layout--layout {
    min-height: 48vw !important;
  }
}

html,
body {
  height: auto;
  min-height: 100%;
}

/* The contact map is full-bleed edge-to-edge on desktop, but on
   mobile/tablet it sits inside the section's normal 16px content
   padding like the form fields above it, making it look cramped.
   Break it out to the full viewport width.

   NOTE: this used to also set overflow-x:hidden on html/body as a
   guard against 100vw being a hair wider than the viewport when a
   non-overlay scrollbar is present. Removed — setting overflow-x
   without overflow-y on the root elements triggers a CSS quirk where
   the visible axis gets promoted to auto, turning body into its own
   scroll container instead of the window scrolling normally. That
   silently broke position:sticky *and* every scroll-position-reading
   script on the page (including the header shrink-on-scroll JS) on
   ALL viewports, not just mobile/tablet. Real phones/tablets use
   overlay scrollbars (no width reserved), so 100vw already equals the
   visible viewport there — this was only ever a desktop-devtools-
   resize testing artifact, not a real production risk. */
@media screen and (max-width: 920px) {
  .grid-map {
    width: 100vw !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* Keep the header CTA consistent with the hero CTA on mobile. */
@media screen and (min-width: 921px) {
  .block-header__button {
    min-height: 52px !important;
    padding: 0 38px !important;
    justify-content: center;
  }
}

@media screen and (max-width: 920px) {
  .block-header__button {
    min-height: 44px !important;
    padding: 0 28px !important;
    justify-content: center;
  }
}

/* Shrink the sticky header once scrolled past the hero, so it stops
   eating so much of the viewport on every section below it. The
   .block-header--with-shadow class is already toggled by the scroll
   listener in app.blade.php; !important is required because the sizes
   being overridden are set as inline custom properties (page-builder
   markup), which normal-specificity rules can't beat. */
.block-header-layout-desktop,
.block-header-layout-mobile {
  transition: padding 0.3s ease;
}

.block-header-logo {
  transition: width 0.3s ease, height 0.3s ease;
}

.block-header--with-shadow .block-header-layout-desktop,
.block-header--with-shadow .block-header-layout-mobile {
  --padding: 16px 16px 16px 16px !important;
  --m-padding: 12px 16px 12px 16px !important;
}

.block-header--with-shadow .block-header-logo {
  --v6f401cb2: 52px !important;
  --v5ef47fbb: 61px !important;
  --v66b767ed: 34px !important;
  --v56669be0: 40px !important;
}

/* Center the mobile nav menu (it ships right-aligned by default). No
   mobile-specific gap was ever set, so it fell back to the desktop
   horizontal nav spacing (64px) as its vertical gap too — far too
   much space between stacked links. */
.block-header-layout-mobile__dropdown {
  align-items: center !important;
  gap: 20px !important;
}

.block-header-layout-mobile__dropdown .block-header__nav-links {
  justify-content: center !important;
}

.block-header-layout-mobile__dropdown .item-content-wrapper {
  justify-content: center !important;
}

.block-header-layout-mobile__dropdown .item-content {
  text-align: center !important;
}

/* Tablet (600-920px) shares the same hamburger layout as narrow
   phones, sized with the exact same values — a small logo with a lot
   of dead space before the hamburger button, and an open dropdown
   whose text/links look sparse against the much wider canvas. Give
   tablet its own, larger size tier instead of just stretching the
   phone one. */
@media screen and (min-width: 600px) and (max-width: 920px) {
  .block-header-logo {
    --v66b767ed: 100px !important;
    --v56669be0: 118px !important;
  }

  .block-header--with-shadow .block-header-logo {
    --v66b767ed: 46px !important;
    --v56669be0: 54px !important;
  }

  .block-header-layout-mobile {
    --m-padding: 32px 24px 32px 24px !important;
  }

  .block-header--with-shadow .block-header-layout-mobile {
    --m-padding: 16px 24px 16px 24px !important;
  }

}

/* Side-drawer nav for everything <=920px (phones and tablets alike):
   slides in from the right, starts below the header (so it never
   covers the close button), and only as wide as it needs to be — with
   a dimmed backdrop behind it. top/height are driven by
   --header-height-mobile, which app.blade.php already keeps synced to
   the header's live (possibly scrolled-compact) height. width+max-width
   together let it size down to 85vw on narrow phones without a
   separate breakpoint. */
@media screen and (max-width: 920px) {
  .block-header-layout-mobile__dropdown {
    gap: 28px !important;
  }

  .block-header-layout-mobile__dropdown .item-content {
    font-size: 22px !important;
  }

  .block-header-layout-mobile__dropdown {
    position: fixed !important;
    top: var(--header-height-mobile) !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 380px !important;
    max-width: 85vw !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    justify-content: flex-start !important;
    padding: 48px 32px !important;
    overflow-y: auto !important;
    transform: translateX(100%);
    transition: transform 0.35s ease, top 0.3s ease !important;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.25) !important;
    z-index: 5;
  }

  .block-header-layout-mobile__dropdown--open {
    transform: translateX(0) !important;
  }

  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    top: var(--header-height-mobile);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 20, 26, 0.45);
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease, top 0.3s ease;
  }

  .mobile-nav-backdrop--visible {
    opacity: 1;
    visibility: visible;
  }
}

@media screen and (min-width: 921px) {
  .mobile-nav-backdrop {
    display: none;
  }
}

/* Scroll lock while the side-drawer nav is open. overflow (shorthand,
   both axes together) rather than overflow-x/-y separately — setting
   only one axis promotes the other to auto per the CSS overflow spec,
   which previously broke position:sticky and every scroll-reading
   script on the page. */
html.nav-open {
  overflow: hidden !important;
}

/* Hover micro-interactions */
.grid-button {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.grid-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(26, 26, 26, 0.15);
}

.grid-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(26, 26, 26, 0.12);
}

.image--link {
  transition: filter 0.2s ease, transform 0.4s ease;
}

.image--link:hover {
  transform: scale(1.03);
}