/* Halaman detail tur -- penyesuaian Ara di atas tema.
 *
 * ## Yang diatur di sini, dan yang SENGAJA tidak
 *
 * Berkas ini HANYA bekerja pada layar >= 992px. Di bawah itu tidak ada satu
 * pun aturan di sini yang menyala, jadi tampilan ponsel tetap persis seperti
 * yang sudah dirancang tema: kerangka bootstrap-nya masih utuh di template
 * (`row gx-10`, `col-lg-7`, `col-lg-5`, `col-sm-6`), dan kelas `ara-galeri*`
 * cuma menumpang sebagai pegangan aturan di sini.
 *
 * ## Kenapa blok foto perlu diatur sama sekali
 *
 * Rancangan tema tidak pernah menyebut tinggi satu gambar pun. Ia rapi semata
 * karena kelima foto contohnya kebetulan sama bentuknya. Begitu diisi foto
 * asli -- tegak, mendatar, dan persegi bercampur -- tiap kotak mengikuti
 * bentuk fotonya sendiri dan barisnya tidak rata.
 *
 * ## Tinggi diambil dari LEBAR blok, bukan dari isinya
 *
 * Percobaan pertama memberi perbandingan hanya pada foto besar dan menyuruh
 * kolom kanan "mengikuti tinggi baris". Itu berputar: tinggi baris diambil
 * dari isi tertinggi, isi kolom kanan adalah foto berukuran aslinya, jadi
 * barisnya melar seukuran foto mentah dan foto besar ikut diregangkan --
 * blok raksasa yang menembus lebar halaman. Sekarang tingginya dipatok dari
 * lebar bloknya sendiri, lalu dibagi ke baris kisi. Tidak ada satu ukuran pun
 * yang berasal dari ukuran foto, jadi tidak ada lagi putaran.
 */

@media (min-width: 992px) {
  .ara-galeri {
    display: grid;
    /* 1,217 : 1 -- perbandingan lebar yang sama dengan susunan aslinya
       (kolom 7/12 dikurangi margin 45px, lawan kolom 5/12 ditambah 45px). */
    grid-template-columns: minmax(0, 1.217fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 10px;
    /* Tinggi blok = lebarnya x 0,36. Diikat ke lebar BLOK, bukan lebar layar,
       supaya ikut wadah yang membatasi halaman ini di 1280px. */
    aspect-ratio: 1280 / 460;
    margin: 0 0 10px;
  }

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

  /* Kerangka bootstrap-nya sengaja dibiarkan di template supaya tampilan
     ponsel tidak berubah sama sekali. Di layar besar kerangka itu harus
     dilepas dari perhitungan, dan yang paling mudah terlewat adalah LEBARNYA:
     `col-lg-7` tetap memaksa 58,33% -- bukan lagi dari barisnya, melainkan
     dari petak kisi yang sudah menampungnya. Akibatnya tiap foto hanya
     mengisi separuh petaknya dan sisanya jadi ruang kosong. Padding gutter
     dan margin negatif `row` ikut dinolkan; jaraknya diurus `gap`. */
  .ara-galeri > .ara-galeri__kolom {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }

  /* `gallery-col-1` (margin kanan 45px) dan `tp-tour-gallery-inner`
     (margin kiri -45px) adalah pergeseran yang dipakai tema untuk merapatkan
     kedua kolom. Perbandingan kolom di atas sudah memperhitungkannya. */
  .ara-galeri__utama,
  .ara-galeri__kolom > .tp-tour-gallery-inner {
    margin: 0;
    height: 100%;
    min-height: 0;
  }

  .ara-galeri__kotak {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    height: 100%;
    min-height: 0;
  }

  .ara-galeri__kotak > .ara-galeri__slot {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }

  /* Satu foto kecil: isi seluruh kolom kanan. */
  .ara-galeri--1 .ara-galeri__kotak {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  /* Dua foto: bertumpuk selebar kolom, bukan dua kotak kecil dengan separuh
     baris kosong di bawahnya. */
  .ara-galeri--2 .ara-galeri__kotak {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Tiga foto -- yang paling sering terjadi kalau paket punya sampul plus
     tiga foto galeri. Dua di atas, yang ketiga melebar di bawah. */
  .ara-galeri--3 .ara-galeri__kotak > .ara-galeri__slot:nth-child(3) {
    grid-column: 1 / -1;
  }

  .ara-galeri__utama,
  .ara-galeri__sel {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }

  .ara-galeri__utama > a,
  .ara-galeri__sel > a {
    display: block;
    width: 100%;
    height: 100%;
  }

  .ara-galeri__utama img,
  .ara-galeri__sel img {
    display: block;
    width: 100%;
    height: 100%;
    /* Foto dipotong mengisi selnya -- tidak ada yang gepeng, dan tidak ada
       yang menentukan tinggi barisnya sendiri. */
    object-fit: cover;
  }
}

/* Bintang penilaian di kepala halaman. Kelimanya dulu dipaku penuh; yang
 * melebihi nilai rata-rata sekarang dipudarkan, bukan dihilangkan, supaya
 * bentuk deretannya tetap sama seperti rancangan aslinya. Berlaku di semua
 * ukuran layar karena ini soal isi, bukan susunan. */
.tp-tour-review .ara-bintang-kosong {
  opacity: 0.25;
}

/* Lima bintang itu `<span>` sebaris di dalam `.tp-tour-review-meta` yang
 * `d-flex`. Sebagai anak flex, kotaknya menyusut sampai selebar satu bintang,
 * jadi kelimanya membungkus ke bawah dan terbaca sebagai tiang, bukan
 * deretan penilaian. (Sudah begitu sejak sebelum halaman ini disentuh.) */
.tp-tour-review-meta > .tp-tour-review {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

/*
 * Syarat & ketentuan paket (ARA-126). Butirnya datang dari `syarat_tur`, yang
 * jatuh ke `websiteSetting.default_tour_rules` kalau paketnya belum menulis
 * syarat sendiri. Warnanya ikut token Appearance, bukan hex mati, supaya blok
 * ini tidak menjadi satu-satunya bagian halaman yang mengabaikan palet klien.
 */
.tp-tour-details-terms-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-tour-details-terms-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-family: var(--tp-ff-p);
  color: var(--tp-grey-1);
  line-height: 1.6;
}

.tp-tour-details-terms-list li:last-child {
  margin-bottom: 0;
}

.tp-tour-details-terms-list li::before {
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  content: "";
  background: var(--tp-theme-1);
}