/* ==========================================================================
   WaterCare — responsive.css
   Breakpoint overrides only. Tokens & components live in style.css.

   Verified layouts: 320 / 375 / 390 / 414 / 480 / 768 / 1024 / 1280 / 1440 / 1920
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≥1600px — wide desktop: let the layout breathe, cap line lengths
   -------------------------------------------------------------------------- */

@media (min-width: 1600px) {
  :root {
    --container: 1440px;
    --header-h: 76px;
  }

  .hero {
    min-height: min(94svh, 980px);
  }

  .product-media {
    width: min(100%, 520px);
  }
}

/* --------------------------------------------------------------------------
   ≤1280px — standard laptop: tighten column gaps
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .trust__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trust__item {
    border-bottom: 1px solid var(--hairline);
  }

  .trust__item:nth-child(3n) {
    border-right: 0;
  }

  .trust__item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   ≤1024px — tablet landscape / small laptop
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --section-y: clamp(4.5rem, 9vw, 7rem);
  }

  /* 5-step flow → 3 + 2 grid, still horizontal in feel */
  .steps__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: clamp(2rem, 4vw, 3rem);
  }

  .steps__rail {
    display: none;
  }

  /* Applications and benefit pillars 4-up → 2-up */
  .apps__grid,
  .benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Showcase: visual on top, copy below — reads better at this width */
  .showcase__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase__stage {
    order: 1;
  }

  .showcase__body {
    order: 2;
  }

  .showcase__stage .product-media {
    width: min(100%, 280px);
  }

  /* Installation + smart control stack */
  .install__grid,
  .smart__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 3.5rem);
  }

  .smart__stage {
    order: 2;
  }

  .smart__body {
    order: 1;
  }

  .smart__stage .product-media {
    width: min(100%, 340px);
  }

  .about__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   ≤900px — hamburger takes over, hero becomes single column
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .nav,
  .header__cta {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }

  /* Hero: copy first, then product — a purpose-built stack, not a squeeze */
  .hero {
    min-height: 0;
    padding-block: calc(var(--header-h) + clamp(2rem, 8vw, 3.5rem))
      clamp(3rem, 8vw, 4.5rem);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 8vw, 4rem);
    text-align: left;
  }

  /* Single column frees the full measure, so the headline can ramp harder
     than the desktop clamp allows: 40px @320 → 48px @480 → 56px @560 →
     72px cap. Verified to stay on two lines at every width. */
  .hero__title {
    font-size: clamp(2.5rem, 10vw, 4.5rem);
  }

  .hero__lead {
    max-width: 38rem;
  }

  .hero__stage {
    padding-block: var(--sp-4);
  }

  .product-media {
    width: min(78%, 360px);
  }

  .hero__cue {
    display: none;
  }

  /* Problem/solution: unstick and stack */
  .overflow-split__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 7vw, 3.5rem);
  }

  /* Unpin and let the section collapse to its content height on mobile */
  #overflow {
    min-height: 0;
  }

  .overflow-split__copy,
  .overflow-split__stage {
    position: static;
    top: auto;
  }

  .tank {
    width: min(72%, 300px);
  }

  .tank-steps {
    width: 100%;
    max-width: 420px;
  }

  /* Wholesale / retail stack */
  .channels__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Secondary product models stack */
  .model-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Footer: brand block full width, then two link columns */
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 6vw, 3rem);
  }

  .footer__brand-col {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   ≤768px — tablet portrait
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --section-y: clamp(4rem, 12vw, 5.5rem);
  }

  .steps__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust__item:nth-child(3n) {
    border-right: 1px solid var(--hairline);
  }

  .trust__item:nth-child(2n) {
    border-right: 0;
  }

  .trust__item:last-child {
    border-bottom: 0;
  }

  .trust__item:nth-last-child(2) {
    border-bottom: 1px solid var(--hairline);
  }

  .feature-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .about__meta-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
}

/* --------------------------------------------------------------------------
   ≤900px — the system schematic stops shrinking and becomes pannable, so
   its labels stay readable instead of collapsing to 4px type.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .story__scroller {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* max-width:none is required — the global svg reset would otherwise clamp
     this back to the container and re-shrink the labels. */
  .story__svg {
    width: 840px;
    max-width: none;
  }

  .story__hint {
    display: block;
    margin-top: var(--sp-5);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.42);
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   ≤560px — phones. Layouts rebuilt, not scaled.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  :root {
    --gutter: 1.25rem;
    --section-y: 4rem;
    --r-xl: 24px;
    --r-lg: 18px;
    --header-h: 74px;
  }

  .brand__logo {
    height: 46px;
  }

  .brand--plate .brand__logo {
    height: 54px;
  }

  /* Full-width stacked CTAs — thumb-friendly */
  .hero__actions .btn,
  .final-cta .btn,
  .channel__cta {
    width: 100%;
  }

  .hero__actions,
  .final-cta .btn-row {
    display: grid;
    gap: var(--sp-3);
  }

  .product-media {
    width: min(88%, 300px);
  }

  /* Steps: single column vertical timeline with a left rail */
  .steps__track {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .step {
    padding: 0 0 var(--sp-6) 44px;
  }

  .step:last-child {
    padding-bottom: 0;
  }

  /* Vertical connector between markers */
  .step::before {
    position: absolute;
    top: 30px;
    bottom: 6px;
    left: 12.25px;
    width: 1.5px;
    background: var(--gray-200);
    content: "";
  }

  .step:last-child::before {
    display: none;
  }

  .step__marker {
    top: 0;
  }

  .step__num {
    margin-bottom: 0.2rem;
  }

  /* Applications: single column, shorter art */
  .apps__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .threshold {
    grid-template-columns: minmax(0, 1fr);
  }

  .benefit__icon {
    margin-bottom: var(--sp-3);
  }

  .app-tile {
    flex-direction: row;
    gap: var(--sp-4);
    align-items: center;
  }

  .app-tile__art {
    flex: none;
    width: 88px;
    margin-bottom: 0;
    aspect-ratio: 1;
  }

  /* Trust: two-up compact, no dividers on the right edge */
  .trust__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .trust__item {
    padding: var(--sp-5) var(--sp-4) var(--sp-5) 0;
  }

  .trust__icon {
    margin-bottom: var(--sp-3);
  }

  /* Process: numbers above labels */
  .process__item {
    flex-direction: column;
    gap: 0.35rem;
  }

  /* Showcase card: edge-to-edge feel */
  .showcase__card {
    padding: var(--sp-5);
  }

  /* Footer: single column */
  .footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-7);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  /* Compact FAB — icon only, keeps the 48px+ touch target */
  .wa-fab {
    width: 52px;
    padding-inline: 0;
    justify-content: center;
  }

  .wa-fab__label {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   ≤400px — 320 / 375 / 390 safety pass
   -------------------------------------------------------------------------- */

@media (max-width: 400px) {
  :root {
    --gutter: 1.125rem;
  }

  .btn {
    padding-inline: 1.25rem;
  }

  .mobile-menu__link {
    font-size: 1.25rem;
  }

  .app-tile__art {
    width: 72px;
  }

  .trust__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .trust__item {
    display: flex;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-4) 0;
    border-right: 0 !important;
    border-bottom: 1px solid var(--hairline) !important;
  }

  .trust__item:last-child {
    border-bottom: 0 !important;
  }

  .trust__icon {
    flex: none;
    margin-bottom: 0;
  }

  .spec-row {
    flex-direction: column;
    gap: 0.15rem;
  }
}

/* --------------------------------------------------------------------------
   Landscape phones — avoid a hero that needs scrolling to read
   -------------------------------------------------------------------------- */

@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: 0;
  }

  .hero__cue {
    display: none;
  }

  .mobile-menu {
    max-height: calc(100dvh - var(--header-h));
  }
}

/* --------------------------------------------------------------------------
   Pointer-coarse: remove hover-lift on touch devices
   -------------------------------------------------------------------------- */

@media (hover: none) {
  .btn:hover,
  .app-tile:hover,
  .wa-fab:hover {
    transform: none;
  }
}