/* =====================================================================
   Halaman Umum @HOM Kudus - halaman yang dibuka siapa pun tanpa login,
   hampir selalu dari ponsel (QR di meja resepsionis dan di kamar).

   Yang bergaya mockup - kartu membulat, galeri kamar, carousel promo -
   TIDAK ada di sini: itu tinggal
   di application/views/umum/_gaya.php. Berkas ini hanya mengurus
   rangkanya: bar atas, kaki, tombol melekat, dan penyesuaian layar kecil.
   ===================================================================== */

:root {
    --hom-merah: #b80a14;
}

.vg-umum-body {
    background: #f6f7f9;
}

/* Ruang untuk tombol melekat di kaki layar. Tanpa ini, isi paling bawah
   halaman tertutup tombol itu dan tidak bisa digulung lagi - justru
   bagian yang biasanya memuat nomor telepon hotel.

   Kelasnya dipasang HALAMANNYA (lewat $body_kelas), bukan dipukul rata
   ke .vg-umum-body: halaman yang tidak punya tombol melekat - informasi
   pembayaran, misalnya - akan berakhir dengan pita kosong setinggi 92px
   di bawah kakinya tanpa ada yang tahu kenapa. */
.vg-umum-ada-aksi {
    padding-bottom: 92px;
}

@media (min-width: 992px) {
    /* Tombol melekatnya hanya ada di layar sempit, jadi ruangnya ikut
       dilepas. */
    .vg-umum-ada-aksi { padding-bottom: 0; }
}

.vg-umum-bar {
    background: #fff;
    border-bottom: 1px solid rgba(16, 24, 40, .08);
}

.vg-umum-logo {
    height: 38px;
    width: auto;
    display: block;
}

.vg-umum-kaki {
    background: #fff;
    border-top: 1px solid rgba(16, 24, 40, .08);
}

/* ------------------------------------------------- kepala halaman umum */

/* Foto gedung berselubung merah merek, pola yang sama dengan panel
   branding halaman masuk. Gambarnya dipasang lewat CSS, bukan <img>:
   ia hiasan, dan tidak perlu ikut ke pembaca layar maupun ke hasil
   cetak. */
.vg-umum-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(120, 6, 13, .88), rgba(184, 10, 20, .80)),
        url('../../img/foto-depan.webp') center / cover no-repeat;
    color: #fff;
}

.vg-umum-hero .vg-umum-hero-isi {
    position: relative;
    padding: 56px 0 64px;
}

@media (max-width: 575.98px) {
    .vg-umum-hero .vg-umum-hero-isi { padding: 36px 0 40px; }
}

.vg-umum-hero h1 {
    color: #fff;
    font-weight: 800;
    line-height: 1.2;
}

.vg-umum-hero .vg-umum-hero-sub {
    color: rgba(255, 255, 255, .88);
}

/* Tombol di atas selubung merah: putih pekat, bukan btn-light-* yang
   setengah tembus - di atas foto, tombol tembus pandang tidak terbaca
   sebagai tombol. */
.vg-umum-hero .btn-light {
    background: #fff;
    color: var(--hom-merah);
    font-weight: 700;
}
.vg-umum-hero .btn-light:hover { background: rgba(255, 255, 255, .9); color: var(--hom-merah); }

/* ------------------------------------------- tombol melekat (ponsel) */

/* Satu-satunya yang melekat di halaman ini. Tamu yang sedang membaca
   daftar kamar di tengah halaman tidak harus menggulung balik ke atas
   untuk mendaftar.

   env(safe-area-inset-bottom) ikut dihitung: di iPhone berdagu, tombol
   yang dipatok bottom:0 jatuh di bawah bilah gestur dan separuhnya tidak
   bisa ditekan. */
.vg-umum-aksi {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(16, 24, 40, .10);
}

@media (min-width: 992px) {
    .vg-umum-aksi { display: none; }
}

/* ---------------------------------------------- penyesuaian layar kecil */

@media (max-width: 575.98px) {
    /* Padding p-8 Metronic (2rem) memakan 64px dari lebar 375px - isi
       kartunya tinggal 311px. Dikecilkan hanya di layar sempit, supaya
       tampilan desktop tetap sama dengan mockup. */
    .vg-umum-body .vg-card .p-8 { padding: 1.25rem !important; }

    .vg-umum-body .vg-member .vg-nama { font-size: 1.5rem; }

    /* Galeri kamar dan slide promo dibuat lebih pendek: di ponsel, foto
       setinggi 200px berarti hanya satu kamar yang terlihat sekali layar
       dan sisanya harus ditebak. */
    .vg-umum-body .vg-member .vg-kamar-foto { height: 170px; }
}