/* Phone and tablet refinements, shared by every page. Desktop (>1020px) is unchanged. */

@media (max-width:1020px){
  /* Solid header bar on phones and tablets, never see-through */
  header[data-sticky],
  .stratos-scrolled header[data-sticky]{
    background:#001538 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    animation:none !important;
    border-bottom:1px solid rgba(180,180,180,0.26) !important;
  }

  /* Solid, scrollable menu panel */
  header .stratos-mobile-panel{
    height:auto !important;
    background:#001538 !important;
    max-height:calc(100vh - 104px);
    max-height:calc(100dvh - 104px);
    overflow-y:auto;
    overscroll-behavior:contain;
    box-shadow:0 24px 48px rgba(0,0,0,0.5);
  }
  header .stratos-mobile-panel a{min-height:48px}
  .stratos-menu-btn{width:48px !important;height:48px !important}

  /* Homepage hero: full screen with the content centred, no empty band */
  .stratos-hero .stratos-hero-inner{
    min-height:100vh !important;
    min-height:100svh !important;
    justify-content:center !important;
    padding-top:128px !important;
    padding-bottom:72px !important;
  }

  /* Comfortable tap targets (44px+) */
  footer a{min-height:44px;display:inline-flex !important;align-items:center}
  button[aria-label*=" grade "]{width:40px !important;height:40px !important}

  /* Readable small labels */
  [style*=" 9.5px/"],[style*=" 10px/"],[style*=" 9.5px /"],[style*=" 10px /"]{font-size:11px !important}
}

@media (max-width:640px){
  header .stratos-mobile-panel{
    max-height:calc(100vh - 88px);
    max-height:calc(100dvh - 88px);
    padding:14px 20px 28px !important;
  }
  .stratos-hero .stratos-hero-inner{padding-top:112px !important;padding-bottom:56px !important}
  /* Text spans the full width here, so even out the video overlay to keep it readable */
  .stratos-hero > video + div{background:linear-gradient(180deg,rgba(0,21,56,0.55) 0%,rgba(0,21,56,0.5) 60%,#001538 100%) !important}
}

/* Any touchscreen, including tablets in landscape that get the desktop layout */
@media (pointer:coarse){
  footer a{min-height:44px;display:inline-flex !important;align-items:center}
  button[aria-label*=" grade "]{width:40px !important;height:40px !important}
  [style*=" 9.5px/"],[style*=" 10px/"],[style*=" 9.5px /"],[style*=" 10px /"]{font-size:11px !important}
}

/* Page heroes on phones: text spans the full width, so even out the photo overlay */
@media (max-width:640px){
  .stratos-hero-alt > img + div{background:linear-gradient(180deg,rgba(0,21,56,0.6) 0%,rgba(0,21,56,0.55) 60%,#001538 100%) !important}
}

/* ---- Mobile spacing scale ----
   Section rhythm: 40px on a 390px phone, growing with the screen to 56px on tablets.
   Selectors are more specific than the per-page rules so this file sets the scale. */
@media (max-width:1020px){
  main > section:not(.stratos-hero):not(.stratos-hero-alt){
    padding-top:clamp(40px,8vw,56px) !important;
    padding-bottom:clamp(40px,8vw,56px) !important;
  }
  /* No trailing margin on the last block of a section, so gaps stay even */
  main > section > .stratos-reveal > :last-child{margin-bottom:0 !important}

  /* Content is always visible on phones and tablets. The scroll-in effect hid each
     section until it was well on screen, which showed as empty bands while scrolling. */
  .stratos-reveal[data-hidden],
  .stratos-reveal[data-hidden] .stratos-pop{opacity:1 !important;transform:none !important}
}
@media (pointer:coarse){
  .stratos-reveal[data-hidden],
  .stratos-reveal[data-hidden] .stratos-pop{opacity:1 !important;transform:none !important}
}

/* ---- Compact footer on phones ----
   One left edge, one row height (32px links), labels 8px above their links. */
@media (max-width:640px){
  html body footer{padding:28px 20px 16px !important}
  footer > div > div:first-child{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:20px 16px !important;
    padding-bottom:20px !important;
  }
  /* Brand spans the width; Company on the left, Solutions and Contact stacked on the right */
  footer > div > div:first-child > div:first-child{grid-column:1 / -1}
  footer > div > div:first-child > div:nth-child(2){grid-row:span 2}
  footer > div > div:first-child > div{gap:0 !important;align-items:flex-start}
  footer > div > div:first-child img{height:32px !important;margin:0 !important}
  /* The line under the logo repeats the logo's own tagline */
  footer > div > div:first-child > div:first-child > p{display:none}
  footer > div > div:first-child > div > div:first-child{margin:0 0 8px !important;font-size:11px !important;line-height:1 !important}
  footer > div > div:first-child a,
  footer > div > div:first-child span{
    display:inline-flex !important;align-items:center;
    min-height:32px !important;margin:0 !important;
    font-size:14px !important;line-height:1.3 !important;
  }
  footer > div > div:first-child > div:last-child svg{width:16px;height:16px}
  footer > div > div:last-child{padding-top:14px !important}
  footer > div > div:last-child span{font-size:12px !important}
}
@media (max-width:360px){
  footer > div > div:first-child a,
  footer > div > div:first-child span{font-size:13px !important}
}