/* ==========================================================================
   Responsive fixes — The Black Squirrel

   Situs ini adalah mirror statis dari Squarespace 7.1. Beberapa aturan CSS
   yang aslinya dikirim dari bundle universal Squarespace tidak ikut ter-mirror,
   sehingga dua hal rusak:

     1. site.css mendefinisikan --sqs-site-gutter / --sqs-mobile-site-gutter,
        tapi tidak ada satu pun aturan yang memakainya. Akibatnya
        `.sqs-layout > .sqs-row { margin: 0 -17px }` menjorok keluar viewport
        dan memunculkan horizontal scroll 17px di semua ukuran layar.

     2. Aturan untuk `.fluid-image-container` hilang total, jadi <img> dirender
        pada ukuran asli (mis. 2318x1190) di dalam kontainer selebar layar.

   File ini dimuat SETELAH site.css supaya menang spesifisitas/urutan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Site gutter — mengembalikan padding horizontal section

   Dikecualikan untuk `.full-bleed-section`: section itu memakai Fluid Engine
   yang sudah punya gutter sendiri lewat `--grid-gutter`, jadi kalau diberi
   padding lagi hasilnya dobel.
   -------------------------------------------------------------------------- */
.page-section:not(.full-bleed-section) > .content-wrapper {
  box-sizing: border-box;
  padding-left: var(--sqs-site-gutter, 3vw);
  padding-right: var(--sqs-site-gutter, 3vw);
}

/* Batasi lebar konten pada layar sangat lebar, sesuai tweak maxPageWidth. */
.page-section:not(.full-bleed-section) > .content-wrapper > .content {
  max-width: var(--sqs-site-max-width, 1600px);
  min-width: 0;
}

@media screen and (max-width: 767px) {
  .page-section:not(.full-bleed-section) > .content-wrapper {
    padding-left: var(--sqs-mobile-site-gutter, 6vw);
    padding-right: var(--sqs-mobile-site-gutter, 6vw);
  }
}

/* Kolom grid klasik tidak boleh memaksa lebar minimum. */
.sqs-layout .sqs-row .col,
.sqs-layout .sqs-row [class*="sqs-col-"] {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   2. Fluid image — gambar ikut lebar kontainer, tinggi mengikuti rasio

   `.fluid-image-container` punya inline style `height: 100%`, dan <img> punya
   atribut width/height ukuran asli. Keduanya perlu !important untuk ditimpa.
   -------------------------------------------------------------------------- */
.fluid-image-container {
  width: 100%;
  height: auto !important;
  overflow: hidden;
}

.fluid-image-container > .content-fill {
  width: 100%;
  height: auto;
}

.fluid-image-container img,
.fluid-image-animation-wrapper > .fluid-image-container img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}

/* Blok gambar yang di-stretch tidak lagi dipaksa tinggi 100%. */
.sqs-block-image.sqs-stretched > .sqs-block-content {
  height: auto !important;
}

/* --------------------------------------------------------------------------
   3. Media & embed tidak boleh melebihi kontainernya

   `.thumb-image` dikecualikan: galeri strip (blok Instagram) memang memakai
   deretan gambar lebih lebar dari viewport dan sudah di-clip oleh
   `.sqs-gallery-design-strip { overflow: hidden }`.
   -------------------------------------------------------------------------- */
.sqs-block img:not(.thumb-image),
.sqs-block video,
.sqs-block svg {
  max-width: 100%;
}

iframe,
embed,
object {
  max-width: 100%;
}

/* Embed pihak ketiga (OpenTable, peta, video) ikut lebar blok. */
.sqs-block-code .sqs-block-content > iframe,
.sqs-block-embed iframe,
.sqs-block-video iframe {
  width: 100%;
}

/* --------------------------------------------------------------------------
   4. Teks panjang & tabel tidak memecah layout
   -------------------------------------------------------------------------- */
.sqs-block-html h1,
.sqs-block-html h2,
.sqs-block-html h3,
.sqs-block-html p,
.sqs-block-html a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.sqs-block table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   5. Pengaman terakhir

   `clip` dipakai (bukan `hidden`) supaya tidak membuat scroll container baru
   dan tidak merusak `position: sticky` di dalamnya. Browser lama jatuh ke
   `hidden` lewat deklarasi pertama.
   -------------------------------------------------------------------------- */
body {
  overflow-x: hidden;
  overflow-x: clip;
}
