/* ============================================================
   INNER PAGES — Slide Deck + Slide Mode (Aerospace + Capabilities only)
   Does NOT touch Home page
   ============================================================ */


/* ------------------------------------------------------------
   Background "mystery" layer:
   - Fixed behind slides
   - Fades between images (no horizontal travel)
   - Blur + dim are adjustable via CSS variables below
   ------------------------------------------------------------ */

html.inner-stepper{
  --inner-bg-i: 0;              /* current slide index (0..n-1) */
  --inner-bg-n: 1;              /* number of slides */
  --inner-bg-blur: 12px;        /* blur amount */
  --inner-bg-dim: 0.7;         /* dark veil strength */
  --inner-bg-speed: 720ms;      /* fade speed */
}

/* Make sure the fixed background can be seen */
html.inner-stepper{
  background: var(--bg) !important;
}
html.inner-stepper body{
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* Fixed background layer (behind content) */
html.inner-stepper .innerBg{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

html.inner-stepper .innerBg__track{
  position: absolute;
  inset: 0;
}

html.inner-stepper .innerBg__frame{
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;
  transition: opacity var(--inner-bg-speed) ease;
  will-change: opacity;
}

html.inner-stepper .innerBg__frame.is-active{
  opacity: 1;
}

html.no-motion.inner-stepper .innerBg__frame{ transition: none; }

@media (prefers-reduced-motion: reduce){
  html.inner-stepper .innerBg__frame{ transition: none; }
}

/* Blur + dim overlay (tune here) */
html.inner-stepper .innerBg__fx{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0,0,0,0.01); /* activates backdrop-filter */
  -webkit-backdrop-filter: blur(var(--inner-bg-blur));
  backdrop-filter: blur(var(--inner-bg-blur));
}

html.inner-stepper .innerBg__veil{
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(0,0,0,var(--inner-bg-dim));
}

/* Keep content above the fixed background */
html.inner-stepper header.siteHeader{
  /* preserve sticky header behavior on inner slide pages */
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Our Process: keep navbar visible on desktop landscape slides.
   Portrait/tablet cases can still use the proc-nav-hide class. */
@media (min-width: 921px){
  html.process-page.inner-stepper header.siteHeader{
    position: fixed; /* do not reserve vertical space on slide pages */
    left: 0;
    right: 0;
    transition: transform 220ms ease, opacity 220ms ease;
    will-change: transform, opacity;
  }
}

@media (min-width: 921px) and (orientation: portrait){
  html.process-page.inner-stepper.proc-nav-hide header.siteHeader{
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
  }
}

html.inner-stepper main.main{
  position: relative;
  z-index: 2;
}


/* ------------------------------------------------------------
   Deck layout is STABLE (no jump when snap toggles)
   Applied only on pages that opt-in (html.inner-stepper)
   ------------------------------------------------------------ */

html.inner-stepper main.main{
  padding: 0;
}
html.inner-stepper main.main > section{
  margin: 0;
}


/* ------------------------------------------------------------
   Media container sizing (inner pages only)
   - Keep image fully filling its container
   - You can adjust container height via --inner-media-h
   ------------------------------------------------------------ */

html.inner-stepper{
  --inner-media-h: clamp(340px, 56vh, 620px);
}

html.inner-stepper .editorialSection__media{
  height: var(--inner-media-h);
  overflow: hidden;
}

html.inner-stepper .editorialSection__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* On small screens, let media size naturally */
@media (max-width: 920px){
  html.inner-stepper .editorialSection__media{
    height: auto;
  }
  html.inner-stepper .editorialSection__media img{
    height: auto;
  }
}


/* Slides: hero + editorial sections (always 100svh on these pages) */
html.inner-stepper .pageHero,
html.inner-stepper main.main > section.editorialSection,
html.inner-stepper main.main > section.editorialBand,
html.inner-stepper main.main > section.procDiagSlide{
  height: 100vh;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
}

/* Vertically center the content inside each slide */
html.inner-stepper main.main > section.editorialSection{
  display: flex;
  align-items: center;
}
html.inner-stepper .editorialSection__inner{
  height: 100%;
  align-items: center; /* grid vertical alignment */
}

html.inner-stepper main.main > section.editorialBand{
  display: flex;
  align-items: center;
}
html.inner-stepper .editorialBand__inner{
  height: 100%;
  display: flex;
  align-items: center;
}

/* ------------------------------------------------------------
   Slide MODE: snap behavior only (can be toggled without layout shift)
   ------------------------------------------------------------ */

html.inner-slideMode,
html.inner-slideMode body{
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: none;
}

html.inner-slideMode .pageHero,
html.inner-slideMode main.main > section.editorialSection,
html.inner-slideMode main.main > section.editorialBand,
html.inner-slideMode main.main > section.procDiagSlide{
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@media (min-width: 921px){
  html.inner-slideMode,
  html.inner-slideMode body{
    scroll-snap-type: none !important;
  }

  html.inner-slideMode .pageHero,
  html.inner-slideMode main.main > section.editorialSection,
  html.inner-slideMode main.main > section.editorialBand,
  html.inner-slideMode main.main > section.procDiagSlide{
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
}

/* Safety: allow normal flow on small screens */
@media (max-width: 920px){
  html.inner-slideMode,
  html.inner-slideMode body{
    scroll-snap-type: none;
  }

  html.inner-stepper .pageHero,
  html.inner-stepper main.main > section.editorialSection,
  html.inner-stepper main.main > section.editorialBand,
  html.inner-stepper main.main > section.procDiagSlide{
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  html.inner-slideMode .pageHero,
  html.inner-slideMode main.main > section.editorialSection,
  html.inner-slideMode main.main > section.editorialBand,
  html.inner-slideMode main.main > section.procDiagSlide{
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  html.inner-stepper main.main{
    padding: initial;
  }
  html.inner-stepper main.main > section{
    margin: initial;
  }

  html.process-page.inner-slideMode,
  html.process-page.inner-slideMode body,
  html.company-page.inner-slideMode,
  html.company-page.inner-slideMode body{
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: none;
  }

  html.process-page.inner-stepper .pageHero,
  html.process-page.inner-stepper main.main > section.editorialSection,
  html.process-page.inner-stepper main.main > section.editorialBand,
  html.process-page.inner-stepper main.main > section.procDiagSlide,
  html.company-page.inner-stepper .pageHero,
  html.company-page.inner-stepper main.main > section.editorialSection,
  html.company-page.inner-stepper main.main > section.editorialBand,
  html.company-page.inner-stepper main.main > section.procDiagSlide{
    height: 100vh;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  html.process-page.inner-slideMode .pageHero,
  html.process-page.inner-slideMode main.main > section.editorialSection,
  html.process-page.inner-slideMode main.main > section.editorialBand,
  html.process-page.inner-slideMode main.main > section.procDiagSlide,
  html.company-page.inner-slideMode .pageHero,
  html.company-page.inner-slideMode main.main > section.editorialSection,
  html.company-page.inner-slideMode main.main > section.editorialBand,
  html.company-page.inner-slideMode main.main > section.procDiagSlide{
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  html.process-page.inner-stepper main.main,
  html.company-page.inner-stepper main.main{
    padding: 0;
  }
  html.process-page.inner-stepper main.main > section,
  html.company-page.inner-stepper main.main > section{
    margin: 0;
  }
}


/* About page: keep the full menu bar visible on every slide and every viewport. */
html.company-page.inner-stepper header.siteHeader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 95;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: rgba(7, 10, 12, 0.72) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.company-page.inner-stepper .mobileNav{
  z-index: 96;
}

@media (min-width: 921px) and (orientation: landscape){
  html.company-page.nav-dock-enabled .siteHeader,
  html.company-page.nav-dock-enabled.nav-dock-collapsed .siteHeader{
    background: rgba(7, 10, 12, 0.72) !important;
    border-bottom: 1px solid var(--line) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto !important;
  }
}