/* ================================================================
   pages/contact.css — PT Asuransi Intra Asia
   Halaman: contact.php, contact_cabang.php
   Mobile-first. Base = smartphone (<=480px).
   Breakpoints: 481 | 769 | 992
   Menggantikan: inline <style> dari contact.php dan contact_cabang.php
   Dimuat via $page_head_styles -> terakhir di <head> -> menang cascade.

   Catatan: responsive.css sudah handle #map/#map2 (width:100%!important)
   dan .info_contact/.box-contact-* (width:100%!important via !important).
   pages/contact.css berisi hero + normalisasi layout KONTEN KONTAK
   (lihat section "KONTEN KONTAK" di bawah — perbaikan .contact_denah
   yang absolute di main.css sehingga section tampak kosong).
================================================================ */

/*
 * HERO SECTION — PANDUAN EDIT MANUAL
 * Cari komentar "EDIT:" di file ini untuk nemuin bagian yang perlu disesuaikan.
 * Bagian yang bisa diubah:
 * - Ukuran & warna font judul dan subtitle
 * - Alignment teks
 * - Gambar/logo hero (path gambar ada di file PHP halaman masing-masing)
 */


/* ============================================================
   HERO BANNER — desktop heights
   CATATAN: contact.php sudah dibangun ulang dengan .page-hero (lihat components/page-hero.css).
   Rule .banner_man/.banner_man2/.huruf_banner_contact di bawah DIPERTAHANKAN
   karena masih dipakai oleh contact_cabang.php yang belum diperbarui.
   ============================================================ */
.banner_man {
  z-index: 2;
  border: 0;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}
.banner_man2 {
  border: 0;
  width: 100%;
  height: auto;
  background: #4d9cd3; /* EDIT: warna background hero */
}
@media (min-width: 992px) {
  .banner_man  { height: 560px; padding-bottom: 50px; }
  .banner_man2 { height: 520px; }
}


/* EDIT: gambar/logo hero — path gambar ada di contact.php baris ~45:
 *   <img src="assets/img/hero-image-jumbroton-contact.png" ...>
 *   Untuk mengganti gambar: ubah nilai src di contact.php.
 *   Ukuran gambar diatur di components/banner-hero.css (mobile: width:100%, desktop: posisi absolut kanan lebar 42%).
 *   Lebih besar (width di banner-hero.css) = gambar lebih dominan tapi bisa overflow keluar section atau menutupi teks. Lebih kecil = gambar kurang terlihat. */

/* ============================================================
   HERO TEXT — dipindah dari inline style di HTML
   color: #ffffff diurus banner-hero.css; di sini hanya layout.
   ============================================================ */
.huruf_banner_contact h1 {
  font-size: 28px; /* EDIT: ukuran font judul hero (base mobile ≤480px). Lebih besar = judul lebih dominan tapi bisa overflow ke gambar/wrap ke banyak baris. Lebih kecil = judul kurang menonjol tapi lebih aman dari overflow. */
  font-weight: 800;
  line-height: 1.25;
  text-align: left; /* EDIT: alignment judul hero */
  /* EDIT: warna font judul hero — diatur di components/banner-hero.css */
}
.huruf_banner_contact h3 {
  font-size: 16px; /* EDIT: ukuran font subtitle hero (base mobile ≤480px). Lebih besar = lebih mudah dibaca tapi makan tempat vertikal, bisa mendorong section berikutnya turun. Lebih kecil = hemat tempat tapi kurang terbaca di mobile kecil. */
  text-align: left; /* EDIT: alignment subtitle hero */
  /* EDIT: warna font subtitle hero — diatur di components/banner-hero.css */
}
@media (min-width: 481px) {
  /* EDIT: ukuran font judul hero (≥481px). Lebih besar = judul lebih dominan tapi bisa overflow/wrap. Lebih kecil = kurang menonjol. */
  .huruf_banner_contact h1 { font-size: 30px; }
  /* EDIT: ukuran font subtitle hero (≥481px). Lebih besar = lebih mudah dibaca tapi makan tempat vertikal. Lebih kecil = hemat tempat tapi kurang terbaca. */
  .huruf_banner_contact h3 { font-size: 18px; }
}
@media (min-width: 769px) {
  /* EDIT: ukuran font judul hero (≥769px). Lebih besar = judul lebih dominan tapi bisa overflow/wrap. Lebih kecil = kurang menonjol. */
  .huruf_banner_contact h1 { font-size: 44px; }
  /* EDIT: ukuran font subtitle hero (≥769px). Lebih besar = lebih mudah dibaca tapi makan tempat vertikal. Lebih kecil = hemat tempat tapi kurang terbaca. */
  .huruf_banner_contact h3 { font-size: 20px; }
}
@media (min-width: 992px) {
  /* EDIT: ukuran font judul hero (desktop ≥992px). Lebih besar = judul lebih dominan tapi bisa overflow ke gambar/wrap. Lebih kecil = judul kurang menonjol. */
  .huruf_banner_contact h1 { font-size: 60px; }
  /* EDIT: ukuran font subtitle hero (desktop ≥992px). Lebih besar = lebih mudah dibaca tapi makan tempat vertikal. Lebih kecil = hemat tempat tapi kurang terbaca. */
  .huruf_banner_contact h3 { font-size: 22px; }
}


/* ============================================================
   KONTEN KONTAK — contact.php (#call-to-action .info_contact)

   Akar masalah "halaman kosong": main.css mencabut .contact_denah
   dari flow (position:absolute; top:0; left:0; height:1600px;
   z-index:5) sehingga parent .info_contact collapse dan section
   tampak kosong — kontennya sebenarnya ter-load tapi nemplok di
   luar flow. Ditambah lebar/tinggi hard-code (box 1270px, kolom
   900px/380px, #map max-height 200px) yang meleset di semua layar.

   Semua dinormalkan kembali ke flow di sini, mobile-first
   (breakpoint file ini: 481 | 769 | 992). File dimuat terakhir di
   <head> → menang cascade pada specificity sama/lebih tinggi.
   contact_cabang.php TIDAK memakai .info_contact/.contact_denah,
   jadi scope .info_contact aman untuk halaman itu.
   ============================================================ */

/* Row bootstrap dipakai tanpa col-* di kedua halaman kontak;
   margin negatifnya (responsive.css ≤575px: -12px !important)
   bikin konten lebih lebar dari container. */
#call-to-action .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Kartu putih pembungkus */
.info_contact {
  float: none;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(13, 63, 113, 0.12);
  overflow: hidden;
}

/* Kembalikan konten ke flow normal */
.info_contact .contact_denah {
  position: static;
  width: 100%;
  height: auto;
  max-height: none;
  z-index: auto;
  margin: 0;
  padding: 20px 16px 8px;
  box-sizing: border-box;
}

/* Judul "Kantor Pusat" */
.info_contact .contact_denah > h1 {
  width: auto;
  max-width: none;
  margin: 0 0 14px;
  padding: 0;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 22px;
  line-height: 1.3;
  color: #1e333e;
}

/* Peta kantor pusat */
.info_contact #map {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 260px;
  max-height: none;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 12px;
}

/* Box biru muda: mobile = kolom (teks di atas, kontak di bawah) */
.info_contact .box-contact-mini,
.info_contact .box-contact-mini-xl {
  float: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 0 14px;
  padding: 16px;
  background: #d9effa;
  border-radius: 12px;
  box-sizing: border-box;
}

/* Kolom teks — main.css ≤428px: max-height 130px → teks kepotong */
.info_contact .box-contact-mini .info_contact_box,
.info_contact .box-contact-mini-xl .info_contact_box-xl {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
}

.info_contact .box-contact-mini .info_contact_box h1,
.info_contact .box-contact-mini-xl .info_contact_box-xl h1 {
  width: auto;
  max-width: 100%;
  margin: 0 0 6px;
  padding: 0;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 17px;
  line-height: 1.35;
  color: #20526c;
}

.info_contact .box-contact-mini .info_contact_box h6,
.info_contact .box-contact-mini-xl .info_contact_box-xl h6 {
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333333;
}

/* Kartu putih nomor/email di dalam box — selalu di bawah teks,
   lebarnya mengikuti isi (bukan melar selebar box biru).
   Fighting responsive.css ≤768px: .box-contact-mini .info_contact_box2
   { width: 100% !important } → perlu !important + specificity lebih tinggi. */
.info_contact .box-contact-mini .info_contact_box2,
.info_contact .box-contact-mini-xl .info_contact_box2-xl {
  float: none;
  /* main.css ≤428px: position absolute + margin-top 150px + max-height
     100px → kartu putih menimpa teks dan keluar dari box biru. Reset: */
  position: static;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 240px;
  height: auto;
  max-height: none;
  align-self: flex-start;
  margin: 0;
  padding: 10px 14px;
  background: #ffffff;
  border: none;
  border-radius: 10px;
  font-family: Tahoma, sans-serif;
  box-sizing: border-box;
}

.info_contact .info_contact_box2 h2,
.info_contact .info_contact_box2-xl h2 {
  float: none;
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 0;
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  color: #1a7bb2;
  overflow-wrap: break-word;
}

.info_contact .info_contact_box2 h2:last-child,
.info_contact .info_contact_box2-xl h2:last-child {
  margin-bottom: 0;
}

/* Badge "Fast Respone" */
.info_contact .info_contact_box2 h5 {
  display: inline-block;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0 0 8px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  border-radius: 10px;
  background: #eac4bc;
  color: #9e2005;
}

.info_contact .info_contact_box2 a {
  text-decoration: none;
}

/* Fighting responsive.css GLOBAL heading rules di mobile:
   h2 { font-size: 28px !important } (≤768), 22px (≤480), 18px (≤360)
   dan h1 { 32px/26px/22px !important } — tanpa ini semua teks di box
   kontak ikut membesar paksa dan box putih jadi tinggi/panjang.
   Specificity 0,2,1+ + !important mengalahkan 0,0,1 + !important. */
@media (max-width: 768px) {
  .info_contact .contact_denah > h1 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  .info_contact .box-contact-mini .info_contact_box h1,
  .info_contact .box-contact-mini-xl .info_contact_box-xl h1 {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .info_contact .box-contact-mini .info_contact_box h6,
  .info_contact .box-contact-mini-xl .info_contact_box-xl h6 {
    font-size: 13px;
  }

  .info_contact .info_contact_box2 h2,
  .info_contact .info_contact_box2-xl h2 {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 6px;
  }

  .info_contact .info_contact_box2 h5 {
    font-size: 10px;
    padding: 3px 10px;
    margin-bottom: 6px;
  }
}

/* ── Tablet ≥769px: layout tetap kolom (teks di atas, kartu putih
   di bawah) — hanya spacing & ukuran font yang menyesuaikan ── */
@media (min-width: 769px) {
  .info_contact .contact_denah {
    padding: 28px 24px 14px;
  }

  .info_contact .contact_denah > h1 {
    font-size: 26px;
  }

  .info_contact #map {
    height: 340px;
  }

  .info_contact .box-contact-mini,
  .info_contact .box-contact-mini-xl {
    padding: 18px 20px;
  }
}

/* ── Desktop ≥992px ── */
@media (min-width: 992px) {
  .info_contact .contact_denah {
    padding: 32px 32px 18px;
  }

  .info_contact .contact_denah > h1 {
    font-size: 30px;
  }

  .info_contact #map {
    height: 400px;
    margin-bottom: 20px;
  }

  .info_contact .box-contact-mini,
  .info_contact .box-contact-mini-xl {
    margin-bottom: 16px;
  }

  .info_contact .box-contact-mini .info_contact_box h1,
  .info_contact .box-contact-mini-xl .info_contact_box-xl h1 {
    font-size: 20px;
  }

  .info_contact .box-contact-mini .info_contact_box h6,
  .info_contact .box-contact-mini-xl .info_contact_box-xl h6 {
    font-size: 15px;
  }
}


/* ============================================================
   KANTOR CABANG — contact_cabang.php
   Scope: .section-contact-page-company-content__main-content
   (class ini UNIK hanya di contact_cabang.php — contact.php tidak
   memakainya, jadi rule di bawah tidak mempengaruhi contact.php.)

   Data cabang di-loop dari tabel website_kantor_cabang. Tiap cabang
   dirender sebagai SATU kartu berisi: nama kantor → peta → alamat +
   link Google Maps. Struktur di main.css membuat .info_contact_box3
   (alamat) position:absolute dengan margin negatif sehingga alamat
   "lepas" dari kartunya dan tampak menempel ke kartu lain. Di sini
   semuanya dikembalikan ke flow normal + layout grid responsif.
   Dimuat terakhir di <head> → menang cascade; !important dipakai
   hanya untuk mengalahkan aturan !important di responsive.css/main.css.
   ============================================================ */

/* Row bootstrap tanpa col-* → netralkan margin negatifnya */
.section-contact-page-company-content__main-content .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Kontainer daftar cabang → grid. Judul "Kantor Cabang" span penuh. */
.section-contact-page-company-content__main-content .card-map-content-address {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 20px 16px;
  box-sizing: border-box;
}

.section-contact-page-company-content__main-content .card-map-content-address > h1 {
  grid-column: 1 / -1;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-weight: bold;
  line-height: 1.3;
  color: #1e333e;
}

/* Satu kartu cabang = kolom: nama → peta → alamat (semua in-flow) */
.section-contact-page-company-content__main-content .box-contact-mini2 {
  display: flex !important;
  float: none !important;
  flex-direction: column;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 16px !important;
  background: #d9effa;
  border-radius: 16px;
  box-sizing: border-box;
}

.section-contact-page-company-content__main-content .box-contact-mini2 .info_contact_box2 {
  display: flex;
  flex-direction: column;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* Nama kantor cabang */
.section-contact-page-company-content__main-content .box-contact-mini2 .info_contact_box2 h1 {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-family: Arial, sans-serif;
  font-size: 18px !important;
  font-weight: bold;
  line-height: 1.3;
  color: #20526c;
}

/* Peta cabang */
.section-contact-page-company-content__main-content #map2 {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 220px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 12px;
}

/* Kotak alamat — kembalikan dari absolute (main.css) ke flow normal */
.section-contact-page-company-content__main-content .box-contact-mini2 .info_contact_box3 {
  position: static !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  background: #ffffff;
  border-radius: 10px;
  box-sizing: border-box;
}

/* Teks alamat */
.section-contact-page-company-content__main-content .box-contact-mini2 .info_contact_box3 h2 {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-family: Arial, sans-serif;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.5;
  text-align: left !important;
  color: #333333;
  overflow-wrap: break-word;
}

/* Link "Buka di Google Maps" */
.section-contact-page-company-content__main-content .box-contact-mini2 .info_contact_box3 h3 {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Arial, sans-serif;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.4;
  text-align: left !important;
  border-radius: 0;
}

/* ── Tablet ≥769px: 2 kolom ── */
@media (min-width: 769px) {
  .section-contact-page-company-content__main-content .card-map-content-address {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 28px 24px;
  }
  .section-contact-page-company-content__main-content #map2 {
    height: 240px !important;
  }
}

/* ── Desktop ≥992px: 3 kolom ── */
@media (min-width: 992px) {
  .section-contact-page-company-content__main-content .card-map-content-address {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding: 32px;
  }
}
