/**
 * NAIOSH HUB — Mobile / Tablet homepage layout
 * Mobile-first stacking: Hero → actions → image → search → catalog → rest
 * Floating stack: Guide (left) · AI (right) · Install (bottom bar above safe area)
 */
@media (max-width: 900px) {
  html {
    overflow-x: clip;
  }

  body.homepage {
    overflow-x: clip;
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  body.homepage .hero,
  body.homepage .hero-inner,
  body.homepage .hero-media-stack,
  body.homepage .hero-media-frame,
  body.homepage .hub-product-gallery,
  body.homepage .hub-engage,
  body.homepage main.container {
    max-width: 100%;
    overflow-x: clip;
  }

  /* —— Header: compact brand + hamburger row —— */
  body.homepage .top-nav .container.inner,
  body.homepage .top-nav .inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 56px !important;
    max-height: none !important;
    padding: 8px 12px !important;
  }

  body.homepage .nav-main {
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
  }

  body.homepage .nav-main > .brand {
    flex: 0 1 auto !important;
    max-width: calc(100% - 56px) !important;
    min-width: 0 !important;
  }

  body.homepage .nav-main > .brand img,
  body.homepage #site-logo-header,
  body.homepage .site-header-logo {
    width: auto !important;
    max-width: min(120px, 40vw) !important;
    height: auto !important;
    max-height: 34px !important;
    object-fit: contain !important;
  }

  body.homepage .nav-main > .brand .logo-text {
    display: inline-flex !important;
    align-items: baseline !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.homepage .top-nav.is-mobile-nav-ready .mobile-nav-toggle {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    margin-inline-start: auto !important;
  }

  /* —— Hero structure —— */
  body.homepage .container.hero-inner {
    padding: 16px 14px 28px !important;
    gap: 16px !important;
  }

  body.homepage .hero-content {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  body.homepage .hero-offer-shortcuts,
  body.homepage .hero-offer-chip {
    display: none !important;
  }

  body.homepage .hero-content h1,
  body.homepage .hero-content h1.hero-heading-white {
    font-size: clamp(26px, 7.2vw, 34px) !important;
    line-height: 1.28 !important;
    margin: 0 0 10px !important;
  }

  body.homepage .hero-content > p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin: 0 0 14px !important;
    max-width: none !important;
  }

  body.homepage .hero-ctas {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    /* clear left guide + right FABs so labels stay tappable */
    padding-inline: 0 !important;
    margin-bottom: 4px !important;
  }

  body.homepage .hero-ctas .btn,
  body.homepage .hero-ctas .hero-cta-pill {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
    padding: 11px 10px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    min-height: 44px !important;
    border-radius: 14px !important;
  }

  body.homepage .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  body.homepage .hero-stats .stat {
    padding: 8px 6px !important;
    text-align: center !important;
  }

  body.homepage .hero-stats .stat strong {
    font-size: 18px !important;
  }

  body.homepage .hero-stats .stat span {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /* Image full width, no overlay cards */
  body.homepage .hero-media-stack {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.homepage .hero-media-frame {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.homepage .hero-visual,
  body.homepage .hero-visual-media,
  body.homepage .hero-visual-media img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
  }

  body.homepage .hero-visual-media img {
    display: block !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  /* —— Compact search cards (below image, not over it) —— */
  body.homepage .hero-search-engines {
    position: static !important;
    inset: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }

  body.homepage .hero-search-engines .hero-float-card,
  body.homepage .hero-search-engines a.hero-float-card,
  body.homepage .hero-search-engines .hero-float-card.is-search-trigger,
  body.homepage .hero-search-engines .hero-float-card.is-google-search,
  body.homepage .hero-float-card {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    gap: 10px !important;
    box-shadow: 0 8px 20px rgba(8, 10, 18, 0.14) !important;
    animation: none !important;
  }

  body.homepage .hero-search-engines .hero-float-card.is-google-search {
    padding: 0 !important;
  }

  body.homepage .hero-search-engines .hero-float-icon,
  body.homepage .hero-float-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  body.homepage .hero-float-title {
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
  }

  body.homepage .hero-float-desc {
    font-size: 11px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.homepage .hero-google-hit {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  body.homepage .hero-search-engines .is-expanded {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Service actions above image */
  body.homepage .hero-service-actions {
    margin-bottom: 10px;
  }

  body.homepage .hero-service-actions-compact {
    gap: 6px;
  }

  body.homepage .hero-service-actions .hero-service-consult,
  body.homepage .hero-service-actions .hero-service-cost,
  body.homepage .hero-service-actions .hero-service-solutions {
    min-height: 38px;
    font-size: 11.5px;
    padding: 7px 6px;
  }

  body.homepage .hero-service-actions .hero-service-suggest,
  body.homepage .hero-service-actions .hero-service-complaint {
    min-height: 44px;
    font-size: 13px;
    padding: 10px 12px;
  }

  body.homepage .hub-balance-strip {
    margin-bottom: 10px;
  }

  /* Sidebar as horizontal chips */
  body.homepage .hero-sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* —— Floating UI stack —— */
  /* Guide: above install bar, physical left */
  body.homepage .hub-guide-button {
    left: 12px !important;
    right: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    min-width: 72px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    z-index: 1200 !important;
  }

  /* AI: above install bar, physical right */
  body.homepage .hub-ai-fab {
    left: auto !important;
    right: 12px !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 1200 !important;
  }

  body.homepage .hub-ai-panel {
    left: auto !important;
    right: 12px !important;
    bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(22rem, calc(100vw - 24px)) !important;
    max-height: min(70dvh, calc(100dvh - 160px)) !important;
  }

  /* Install: thin bar at the very bottom */
  body.homepage .hub-pwa-notice {
    inset-inline: 12px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 1190 !important;
  }

  /* When install bar is visible, keep FABs clear of CTA row on first paint:
     floats live in the bottom safe band; content has matching padding */
  body.homepage:has(.hub-pwa-notice:not([hidden])) {
    --hub-float-band: calc(120px + env(safe-area-inset-bottom, 0px));
  }

  body.homepage {
    --hub-float-band: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  body.homepage .hero {
    padding-bottom: 8px !important;
  }

  body.homepage .hub-pwa-notice-inner {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    border-radius: 14px !important;
  }

  body.homepage .hub-pwa-notice-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  body.homepage .hub-pwa-notice-copy strong {
    font-size: 12px !important;
  }

  body.homepage .hub-pwa-notice-copy span {
    display: none !important;
  }

  body.homepage .hub-pwa-notice-cta {
    order: 0 !important;
    width: auto !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  body.homepage .hub-pwa-notice-close {
    width: 28px !important;
    height: 28px !important;
  }

  /* Cart fab: above AI on the physical right */
  body.homepage .hub-cart-fab {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    left: auto !important;
    right: 12px !important;
    bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 1185 !important;
  }

  /* Floating side rail → inline under content (already static in styles) */
  body.homepage .floating-actions {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 8px auto 0 !important;
    gap: 10px !important;
  }

  /* Sections spacing */
  body.homepage .hub-product-gallery {
    padding: 28px 0 32px !important;
  }

  body.homepage .hub-engage {
    padding-block: 28px !important;
  }

  body.homepage #layers.container,
  body.homepage main.container {
    padding-inline: 14px !important;
  }

  body.homepage .cards {
    gap: 14px !important;
  }

  body.homepage .card {
    max-width: 100% !important;
  }

  body.homepage img:not(#site-logo-header):not(.brand img) {
    max-width: 100%;
    height: auto;
  }

  /* Keep CTAs clear of right-side FABs */
  body.homepage .hero-ctas {
    padding-inline-end: 0;
  }

  body.homepage .hero-ctas .btn,
  body.homepage .hero-ctas .hero-cta-pill {
    padding-inline-end: 14px !important;
  }

  /* Hide secondary floats while still in upper hero (first screen) —
     they remain fixed; content padding avoids permanent occlusion */
  body.homepage .hero-content {
    padding-bottom: 8px;
  }

  body.homepage a,
  body.homepage p,
  body.homepage span,
  body.homepage .hub-gallery-domain {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  body.homepage .hero-offer-shortcuts,
  body.homepage .hero-offer-chip {
    display: none !important;
  }

  body.homepage .hero-stats .stat strong {
    font-size: 16px !important;
  }

  body.homepage .hero-stats .stat span {
    font-size: 10px !important;
  }
}

@media (max-width: 340px) {
  body.homepage .hero-ctas {
    grid-template-columns: 1fr !important;
  }

  body.homepage .hero-stats {
    grid-template-columns: 1fr !important;
  }

  body.homepage .hero-stats .stat {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: right !important;
    padding: 10px 12px !important;
  }
}

@media (max-width: 360px) {
  body.homepage .container.hero-inner {
    padding: 12px 10px 22px !important;
  }

  body.homepage .hero-content h1,
  body.homepage .hero-content h1.hero-heading-white {
    font-size: clamp(22px, 7.5vw, 28px) !important;
  }

  body.homepage .hub-guide-button {
    min-width: 64px !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
  }
}

/* Landscape phones */
@media (max-width: 900px) and (orientation: landscape) {
  body.homepage .hero-content h1,
  body.homepage .hero-content h1.hero-heading-white {
    font-size: clamp(22px, 4.5vw, 30px) !important;
  }

  body.homepage .hub-pwa-notice {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.homepage .hub-ai-panel {
    max-height: min(80dvh, calc(100dvh - 96px)) !important;
  }
}