/*
 * Zlix public mobile polish v1
 * -----------------------------------------------
 * Authoritative mobile presentation layer.
 *
 * Purpose:
 * - keep mobile layouts compact without redesigning desktop;
 * - prevent broad legacy hero rules from enlarging carousel controls;
 * - centralize future public mobile adjustments in one obvious file.
 *
 * Loaded after the base, theme, logo, and branding stylesheets.
 */

@media (max-width: 720px) {

  /* ----------------------------------------------------------
     Homepage hero
     ---------------------------------------------------------- */

  html[data-theme="arctic-navy"] body.page-home main > section:first-of-type {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html[data-theme="arctic-navy"] body.page-home .hero {
    gap: 18px !important;
    padding: 26px 0 34px !important;
  }

  html[data-theme="arctic-navy"] body.page-home .hero-copy {
    margin-bottom: 0 !important;
  }

  html[data-theme="arctic-navy"] body.page-home .hero h1 {
    font-size: clamp(2rem, 9vw, 2.55rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
    margin-bottom: 0 !important;
  }

  html[data-theme="arctic-navy"] body.page-home .hero-lede {
    max-width: 100% !important;
    margin: 14px 0 0 !important;
    font-size: .96rem !important;
    line-height: 1.5 !important;
  }

  html[data-theme="arctic-navy"] body.page-home .hero-copy .button-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }

  html[data-theme="arctic-navy"] body.page-home .hero-copy .button {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: .88rem !important;
  }

  html[data-theme="arctic-navy"] body.page-home .hero-module-wrap {
    margin-top: 0 !important;
  }


  /* ----------------------------------------------------------
     Homepage module spotlight
     ---------------------------------------------------------- */

  html[data-theme="arctic-navy"] body.page-home .module-carousel,
  html[data-theme="arctic-navy"] body.page-home .hero-carousel {
    border-radius: 20px !important;
  }

  html[data-theme="arctic-navy"] body.page-home .module-carousel .carousel-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 15px !important;
    font-size: .88rem !important;
  }

  html[data-theme="arctic-navy"] body.page-home .module-carousel .carousel-header span,
  html[data-theme="arctic-navy"] body.page-home .module-carousel .carousel-header a {
    white-space: nowrap !important;
  }

  /*
   * Legacy Arctic Navy hero rules assign min-height:48px to every
   * link/button in the first section. Do not let that enlarge this
   * simple text link.
   */
  html[data-theme="arctic-navy"] body.page-home .module-carousel .carousel-header a {
    min-height: 0 !important;
  }

  html[data-theme="arctic-navy"] body.page-home .module-carousel .carousel-slide {
    min-height: 0 !important;
    padding: 20px 18px !important;
  }

  html[data-theme="arctic-navy"] body.page-home .carousel-slide .module-name {
    margin-bottom: 9px !important;
  }

  html[data-theme="arctic-navy"] body.page-home .carousel-slide h3 {
    font-size: 1.6rem !important;
    line-height: 1.08 !important;
    margin-bottom: 3px !important;
  }

  html[data-theme="arctic-navy"] body.page-home .carousel-slide p {
    margin-top: 10px !important;
    font-size: .94rem !important;
    line-height: 1.5 !important;
  }

  html[data-theme="arctic-navy"] body.page-home .carousel-audience {
    gap: 6px !important;
  }

  html[data-theme="arctic-navy"] body.page-home .carousel-audience span {
    padding: 5px 8px !important;
    font-size: .72rem !important;
  }

  html[data-theme="arctic-navy"] body.page-home .carousel-slide .button-row {
    margin-top: 15px !important;
  }

  html[data-theme="arctic-navy"] body.page-home .carousel-slide .button {
    min-height: 42px !important;
    padding: 9px 12px !important;
    font-size: .86rem !important;
  }

  html[data-theme="arctic-navy"] body.page-home .carousel-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
  }

  html[data-theme="arctic-navy"] body.page-home .carousel-buttons {
    flex: 0 0 auto !important;
    gap: 6px !important;
  }

  /*
   * Restore compact carousel controls after the broad first-section
   * 48px minimum-height rule.
   */
  html[data-theme="arctic-navy"] body.page-home .carousel-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
  }

  html[data-theme="arctic-navy"] body.page-home .carousel-dots {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  html[data-theme="arctic-navy"] body.page-home .carousel-dots button {
    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    padding: 0 !important;
  }


  /* ----------------------------------------------------------
     General mobile content rhythm
     ---------------------------------------------------------- */

  html[data-theme="arctic-navy"] .section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  html[data-theme="arctic-navy"] .section-header {
    margin-bottom: 20px !important;
  }

  html[data-theme="arctic-navy"] .section-header h2 {
    font-size: clamp(1.85rem, 8vw, 2.3rem) !important;
    line-height: 1.08 !important;
  }

  html[data-theme="arctic-navy"] .card,
  html[data-theme="arctic-navy"] .module-card,
  html[data-theme="arctic-navy"] .product-card,
  html[data-theme="arctic-navy"] .content-card,
  html[data-theme="arctic-navy"] .contact-card {
    padding: 20px !important;
  }

  html[data-theme="arctic-navy"] .page-hero,
  html[data-theme="arctic-navy"] .page-hero-compact {
    padding: 24px 18px !important;
  }

  html[data-theme="arctic-navy"] .cta-band {
    padding: 24px 20px !important;
    margin-top: 26px !important;
    margin-bottom: 54px !important;
  }


  /* ----------------------------------------------------------
     Footer
     ---------------------------------------------------------- */

  html[data-theme="arctic-navy"] .site-footer {
    padding-top: 30px !important;
    padding-bottom: 18px !important;
  }

  html[data-theme="arctic-navy"] .footer-nav {
    margin-top: 18px !important;
  }

  html[data-theme="arctic-navy"] .footer-bottom {
    margin-top: 20px !important;
    padding-top: 16px !important;
  }
}


/*
 * Very narrow devices:
 * allow the two primary hero actions to stack only when they truly
 * need the extra room.
 */
@media (max-width: 340px) {
  html[data-theme="arctic-navy"] body.page-home .hero-copy .button-row {
    grid-template-columns: 1fr !important;
  }

  html[data-theme="arctic-navy"] body.page-home .module-carousel .carousel-header {
    font-size: .82rem !important;
    gap: 8px !important;
  }
}