/* ================================================================
   components/page-hero.css — PT Asuransi Intra Asia
   Dipakai oleh: management.php, governance.php, media.php, contact.php

   Mobile-first. Base = ≤479px.
   Breakpoints: 480 | 768 | 992 | 1200 | 1400

   Standalone — tidak bergantung pada banner-hero.css, Bootstrap grid,
   atau class hero lama (.banner_man, .huruf_banner, .hero2, dll).
   Dimuat via $page_head_styles bersama CSS halaman masing-masing.
   Tidak ada !important — semua menang cascade karena dimuat terakhir
   dan tidak ada class .section yang memicu padding: 60px dari main.css.
================================================================ */


/* ══════════════════════════════════════════════════════════════
   SECTION WRAPPER
   Tidak pakai class .section (Bootstrap theme) supaya tidak dapat
   padding: 60px dari main.css. Semua spacing diatur di sini saja.
══════════════════════════════════════════════════════════════ */

.page-hero {
  background: #4d9cd3;  /* EDIT: warna background hero */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}


/* ══════════════════════════════════════════════════════════════
   INNER FLEX CONTAINER
   Mobile & tablet (<992px): column-reverse → gambar nempel pojok
           kanan-atas section (tanpa spasi di atasnya, bg biru penuh),
           title + subtitle di bawah gambar.
           (DOM order: teks dulu — baik untuk SEO.)
   ≥992px : row → teks kiri, gambar kanan.
══════════════════════════════════════════════════════════════ */

.page-hero__inner {
  display: flex;
  flex-direction: column-reverse;  /* mobile/tab: image di atas */
  align-items: stretch;
  width: 100%;
}


/* ══════════════════════════════════════════════════════════════
   KOLOM KIRI — teks (title + subtitle)
══════════════════════════════════════════════════════════════ */

.page-hero__left {
  box-sizing: border-box;
  padding: 24px 20px 32px;
  text-align: center;
}


/* ── Title ── */

.page-hero__title {
  font-family: Tahoma, sans-serif;
  font-size: 26px;     /* EDIT: ukuran font judul hero (base ≤479px). Lebih besar = lebih dominan tapi bisa overflow/wrap. Lebih kecil = kurang menonjol. */
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;       /* EDIT: warna font judul hero */
  margin: 0 0 10px;
}


/* ── Subtitle / deskripsi ── */

.page-hero__subtitle {
  font-family: Tahoma, sans-serif;
  font-size: 14px;     /* EDIT: ukuran font subtitle hero (base ≤479px). Lebih besar = lebih terbaca tapi makan tempat vertikal. Lebih kecil = hemat tempat. */
  line-height: 1.55;
  color: #e8f4fd;       /* EDIT: warna font subtitle hero */
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════
   KOLOM KANAN — gambar
══════════════════════════════════════════════════════════════ */

/* Mobile/tab: gambar nempel pojok kanan-atas — tanpa margin/padding
   di atas & kanannya sehingga bg biru penuh sampai tepi layar. */
.page-hero__right {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.page-hero__image-box {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.page-hero__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 280px;    /* EDIT: lebar maks gambar hero (base mobile ≤479px). Lebih besar = gambar lebih dominan. Lebih kecil = gambar lebih ringkas. */
  margin: 0 0 0 auto;  /* dorong ke kanan */
}


/* ══════════════════════════════════════════════════════════════
   BREAKPOINTS
══════════════════════════════════════════════════════════════ */

@media (min-width: 480px) {
  .page-hero__left {
    padding: 28px 24px 36px;
  }
  .page-hero__title {
    font-size: 28px;   /* EDIT: ukuran font judul hero (≥480px) */
  }
  .page-hero__subtitle {
    font-size: 15px;   /* EDIT: ukuran font subtitle hero (≥480px) */
  }
  .page-hero__img {
    max-width: 320px;
  }
}


/* ── 768–991px (tablet): masih pola tumpuk — gambar pojok kanan-atas,
   teks di bawahnya. Hanya ukuran yang membesar. ── */

@media (min-width: 768px) {
  .page-hero__img {
    max-width: 400px;  /* EDIT: lebar maks gambar hero (tablet 768–991px) */
  }
  .page-hero__left {
    padding: 28px 32px 40px;
  }
  .page-hero__title {
    font-size: 36px;   /* EDIT: ukuran font judul hero (≥768px) */
  }
  .page-hero__subtitle {
    font-size: 17px;   /* EDIT: ukuran font subtitle hero (≥768px) */
  }
}


/* ── 992px: beralih ke flex row (teks kiri, gambar kanan) ── */

@media (min-width: 992px) {
  .page-hero__inner {
    flex-direction: row;
    align-items: stretch;
    height: 460px; /* EDIT: tinggi hero (≥992px) */
  }

  /* Kolom teks — mengambil ruang sisa setelah kolom gambar */
  .page-hero__left {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;  /* EDIT: alignment teks hero (≥992px) */
    padding: 60px 40px 60px 60px;
    box-sizing: border-box;
  }

  /* Kolom gambar — lebar tetap 42% */
  .page-hero__right {
    flex: 0 0 42%;     /* EDIT: lebar kolom gambar (≥992px). Lebih besar = gambar lebih dominan. Lebih kecil = teks dapat lebih banyak ruang. */
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    overflow: hidden;
  }

  .page-hero__image-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }

  /* Desktop: gambar mengisi tinggi penuh kolom kanan, rata bawah-kanan */
  .page-hero__img {
    max-width: none;
    width: auto;
    height: 100%;
    margin: 0;
  }

  .page-hero__title {
    font-size: 52px;   /* EDIT: ukuran font judul hero (≥992px) */
  }
  .page-hero__subtitle {
    font-size: 19px;   /* EDIT: ukuran font subtitle hero (≥992px) */
  }
}

@media (min-width: 1200px) {
  .page-hero__inner {
    height: 520px; /* EDIT: tinggi hero (≥1200px) — target: 520px sesuai referensi produksi */
  }
  .page-hero__left {
    padding: 60px 60px 60px 100px;
  }
  .page-hero__title {
    font-size: 60px;   /* EDIT: ukuran font judul hero (≥1200px) — target produksi: 60px, font-weight 800 */
  }
  .page-hero__subtitle {
    font-size: 21px;   /* EDIT: ukuran font subtitle hero (≥1200px) */
  }
}

@media (min-width: 1400px) {
  .page-hero__left {
    padding: 60px 80px 60px 140px;
  }
}