/* ============================================================
   HOME — MOBILE OVERRIDE
   Save to: public/css/home-mobile.css
   Load SETELAH home.css

   Permintaan: di mobile, setelah hero slider lgsg ke section
   "Kenapa Pilih Kami" (why-us-section, TETAP TAMPIL di mobile —
   card grid trust info, bukan marquee lagi). Trust marquee lama
   (.trust-strip, sekarang posisinya di bawah dekat footer) dan
   promo split tetap disembunyikan di mobile.

   NOTE: Rule filter-bar, prod-grid, prod-card, prod-cat, prod-name,
   prod-price, btn-wishlist, btn-cart-mobile yang DULU ada di sini
   SUDAH DIPINDAH ke css/shop.css + shop-desktop.css. JANGAN tambah
   rule itu lagi di file ini — akan duplikat & bikin tampilan
   katalog/shop jadi konflik/rusak lagi.
   ============================================================ */

@media (max-width: 900px) {
  .trust-strip,
  .promo-split {
    display: none !important;
  }

  /* FIX — hero-swiper di home.css pakai height:100vh, yang di HP
     portrait jadi kontainer sangat tinggi & sempit (mis. lebar 390px
     tapi tinggi 844px). Gambar landscape dipaksa object-fit:cover ke
     kotak setinggi itu → hasilnya crop brutal kiri-kanan (komposisi
     kepotong parah). Override di sini: ambil yang LEBIH KECIL antara
     tinggi layar (100svh — svh lebih stabil dari vh karena gak
     kepengaruh address bar Chrome yang muncul-hilang) vs 125% lebar
     layar. Hasilnya rasio crop jadi wajar (~4:5), bukan crop ekstrem. */
  .hero-swiper {
    height: min(100svh, 125vw);
  }
}

/* ════════════════════════════════════════════
   FEATURED COVERFLOW — proporsi ulang di mobile
   biar kartu gak numpuk/tabrakan
   (nilai selaras dengan getSpacing() di home.js)
═══════════════════════════════════════════ */
@media (max-width: 575px) {
  .coverflow-viewport {
    height: 320px;
  }
  .coverflow-card {
    width: 190px;
    height: 190px;
  }
}

@media (max-width: 380px) {
  .coverflow-viewport {
    height: 275px;
  }
  .coverflow-card {
    width: 160px;
    height: 160px;
  }
}