/* ============================================================
   Detourers — Home page mobile/layout fixes (assets/mobile.css)
   Covers: About section stacking, the reviews slider (native
   scroll + JS auto-drift, see assets/reviews-slider.js), and a
   quieter/flatter "minimal" look on phone. Linked from index.html
   only — #about/#reviews/#faq only exist on that page.
   ============================================================ */

/* ---------- ABOUT: stack to one column on phone/tablet ---------- */
@media (max-width: 860px){
  #about{
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    padding-top: 60px !important;
  }
  #about > div:last-child{
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
  }
}

/* ---------- REVIEWS: natively scrollable track, auto-driven by JS ---------- */
.dt-review-viewport{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.dt-review-viewport::-webkit-scrollbar{ display: none; }
.dt-review-track{
  display: flex;
  width: max-content;
  gap: 20px;
}
.dt-review-card{
  flex: 0 0 300px;
  width: 300px;
}
@media (max-width: 520px){
  .dt-review-card{ flex-basis: 260px; width: 260px; }
}

/* ---------- MINIMAL MODE (phone only) ----------
   Quieter, flatter home page on small screens: no drifting cloud
   decoration, calmer floating badge, lighter card shadows. */
@media (max-width: 860px){
  .dt-cloud-wrap{ display: none !important; }

  .dt-float-badge{
    animation: none !important;
    box-shadow: 0 6px 16px -12px rgba(58,72,42,.4) !important;
  }

  .dt-card, .dt-review-card{
    box-shadow: 0 6px 16px -14px rgba(58,72,42,.28) !important;
  }
}