/*
 * ZLIX MOBILE PRESENTATION V1.4R
 * ----------------------------------------------------------
 * Final restrained mobile presentation polish.
 *
 * This stylesheet owns mobile-only presentation refinements.
 *
 * No desktop rules.
 * No navigation mechanics.
 * No independent color palette.
 * No carousel JavaScript changes.
 */


/* ==========================================================
   MOBILE HOMEPAGE
   ========================================================== */

@media (max-width: 700px) {

  /* --------------------------------------------------------
     MODULE CAROUSEL HEADER

     Keep the title and action on separate lines so neither can
     clip at phone widths.

     The action is intentionally quieter than the section title.
     -------------------------------------------------------- */

  html[data-theme="arctic-navy"]
  body.page-home
  .module-carousel
  .carousel-header,

  html[data-theme="arctic-navy"]
  body.page-home
  .hero-carousel
  .carousel-header {

    display:
      flex
      !important;

    flex-direction:
      column
      !important;

    align-items:
      flex-start
      !important;

    justify-content:
      flex-start
      !important;

    gap:
      2px
      !important;

    width:
      100%
      !important;

    min-width:
      0
      !important;

    box-sizing:
      border-box
      !important;

    padding:
      11px
      14px
      10px
      !important;
  }


  html[data-theme="arctic-navy"]
  body.page-home
  .module-carousel
  .carousel-header
  > span,

  html[data-theme="arctic-navy"]
  body.page-home
  .hero-carousel
  .carousel-header
  > span {

    display:
      block
      !important;

    width:
      100%
      !important;

    max-width:
      100%
      !important;

    min-width:
      0
      !important;

    white-space:
      normal
      !important;

    line-height:
      1.2
      !important;
  }


  html[data-theme="arctic-navy"]
  body.page-home
  .module-carousel
  .carousel-header
  > a,

  html[data-theme="arctic-navy"]
  body.page-home
  .hero-carousel
  .carousel-header
  > a {

    display:
      inline-block
      !important;

    width:
      auto
      !important;

    max-width:
      100%
      !important;

    min-width:
      0
      !important;

    margin-top:
      1px
      !important;

    white-space:
      normal
      !important;

    font-size:
      .88em
      !important;

    font-weight:
      700
      !important;

    line-height:
      1.2
      !important;
  }


  /* --------------------------------------------------------
     PLATFORM FOCUS

     Keep the same card design, but reduce unnecessary vertical
     travel on phones.
     -------------------------------------------------------- */

  body.page-home
  .home-focus-grid {

    gap:
      14px
      !important;
  }


  body.page-home
  .home-focus-card {

    padding:
      17px
      !important;
  }


  body.page-home
  .home-focus-head {

    min-height:
      42px
      !important;

    margin-bottom:
      6px
      !important;

    gap:
      10px
      !important;
  }


  body.page-home
  .home-focus-icon {

    flex-basis:
      42px
      !important;

    width:
      42px
      !important;

    height:
      42px
      !important;

    min-width:
      42px
      !important;

    min-height:
      42px
      !important;
  }


  body.page-home
  .home-focus-card
  > p {

    line-height:
      1.48
      !important;
  }


  /* --------------------------------------------------------
     WHO IT SERVES

     Same visual language, slightly more efficient mobile rhythm.
     -------------------------------------------------------- */

  body.page-home
  .soft-band
  .grid-3 {

    gap:
      14px
      !important;
  }


  body.page-home
  .soft-band
  .grid-3
  > .card {

    padding:
      17px
      !important;
  }


  body.page-home
  .soft-band
  .grid-3
  > .card
  p {

    margin-top:
      8px
      !important;

    line-height:
      1.48
      !important;
  }
}


/* ==========================================================
   EXTRA-NARROW PHONES
   ========================================================== */

@media (max-width: 420px) {

  html[data-theme="arctic-navy"]
  body.page-home
  .module-carousel
  .carousel-header,

  html[data-theme="arctic-navy"]
  body.page-home
  .hero-carousel
  .carousel-header {

    padding:
      10px
      12px
      9px
      !important;
  }


  body.page-home
  .home-focus-card,

  body.page-home
  .soft-band
  .grid-3
  > .card {

    padding:
      16px
      !important;
  }
}

/* ==================================================================
   ZLIX PRODUCT OVERVIEW V1.4S
   Products-page mobile rhythm only.

   Product cards, navigation and desktop presentation are unchanged.
   ================================================================== */

@media (max-width: 700px) {

  body.page-products
  .section.compact {

    padding-top:
      40px
      !important;

    padding-bottom:
      40px
      !important;
  }


  body.page-products
  .soft-band
  > .section {

    padding-top:
      40px
      !important;

    padding-bottom:
      40px
      !important;
  }
}

/* ==================================================================
   ZLIX PLATFORM PAGE V1.4T
   Mobile Platform-page density refinement.

   Structure, icons, desktop layout and navigation remain unchanged.
   ================================================================== */

@media (max-width: 700px) {

  /*
   * Slightly reduce section travel while preserving the existing
   * typography and overall visual hierarchy.
   */
  body.page-platform
  #pageContent
  > .section,

  body.page-platform
  #pageContent
  > .capability-band
  > .section {

    padding-top:
      42px
      !important;

    padding-bottom:
      42px
      !important;
  }


  /*
   * Keep stacked Platform cards comfortable but less oversized.
   */
  body.page-platform
  #pageContent
  .grid {

    gap:
      16px
      !important;
  }


  body.page-platform
  #pageContent
  .card,

  body.page-platform
  #pageContent
  .content-card {

    padding:
      20px
      !important;
  }


  body.page-platform
  #pageContent
  .section-header {

    gap:
      14px
      !important;

    margin-bottom:
      20px
      !important;
  }


  /*
   * The final Module Directory block is a concluding CTA, not another
   * major content section. Keep it visually substantial but shorter.
   */
  body.page-platform
  #pageContent
  > .cta-band.cta-band-subtle {

    padding:
      26px
      20px
      18px
      !important;

    gap:
      0
      !important;
  }


  /*
   * Explicitly separate the concluding action from its copy.
   * This works regardless of whether the CTA container is using
   * flex, grid, or block stacking at this breakpoint.
   */
  body.page-platform
  #pageContent
  > .cta-band.cta-band-subtle
  > .button {

    margin-top:
      28px
      !important;

    margin-bottom:
      0
      !important;
  }


  body.page-platform
  #pageContent
  > .cta-band.cta-band-subtle
  h2 {

    margin-top:
      5px
      !important;

    margin-bottom:
      9px
      !important;
  }


  body.page-platform
  #pageContent
  > .cta-band.cta-band-subtle
  p {

    line-height:
      1.48
      !important;
  }
}



/* ==================================================================
   ZLIX PLATFORM CTA V1.4U

   Mobile-only spacing correction:
   creates clearer separation between the explanatory copy and
   View Modules action without materially increasing card height.
   ================================================================== */

/* ==================================================================
   ZLIX PLATFORM CTA V1.4V

   Uses an explicit button margin rather than container gap so the
   mobile separation is deterministic regardless of CTA layout mode.
   ================================================================== */