/* ==========================================================
   beranda-mobile.css
   Perbaikan tampilan ponsel untuk halaman Beranda.
   ----------------------------------------------------------
   Ditaruh di  public/css/beranda-mobile.css  dan dipanggil
   langsung lewat <link> di beranda.blade.php.

   Kenapa tidak digabung ke resources/css/frontend/beranda.css?
   Karena berkas di resources/ harus melewati "npm run build"
   dan hasil ber-hash-nya belum tentu ikut terupload ke hosting.
   Berkas di public/ dibaca apa adanya — cukup upload, selesai.

   Dimuat SETELAH beranda.css, jadi aturan di sini menang.
   ========================================================== */

@media (max-width: 767px) {

  /* ===== Statistik hero =====
     Gaya dasar .hero-stats memakai display:flex dengan gap besar,
     sehingga tiga kartu menumpuk di kiri dan menyisakan ruang
     kosong di kanan. Grid membuat tiap kolom benar-benar sama
     lebar, berapa pun panjang labelnya. */
  .hero-body .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: .4rem !important;
    flex-wrap: nowrap;
    margin-top: 26px;
    padding-top: 18px;
    text-align: center;
    justify-items: center;
    align-items: start;
  }

  .hero-body .hero-stats > div {
    width: 100%;
    min-width: 0;
  }

  .hero-body .stat-num {
    font-size: 1.25rem;
    margin-bottom: 2px;
  }

  .hero-body .stat-label {
    font-size: .6rem;
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  /* ===== Ikon hero =====
     Di ponsel kolom ikon turun ke bawah teks dan statistik,
     sehingga berada di bawah lipatan saat halaman dibuka.
     Selama kolom itu masih membawa kelas .reveal, ia bertahan
     dalam keadaan .tersembunyi (opacity:0 + geser) sampai
     pengguna menggulir — itulah sebabnya gambar seolah hilang.
     Di sini dipaksa tampil. */
  .hero-ikon-wrap,
  .hero-ikon-wrap.tersembunyi,
  .hero .reveal.tersembunyi {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  .hero-ikon-wrap {
    margin-top: 10px;
  }

  .hero-ikon,
  .hero-ikon img {
    display: block !important;
  }

  .hero-ikon img {
    width: 100%;
    max-width: 320px;
    max-height: 300px;
    height: auto;
    margin-inline: auto;
    margin-bottom: -18px;
  }

  .hero-body {
    padding-bottom: 30px;
  }
}