/* ================================================================
   pages/media.css — PT Asuransi Intra Asia
   Halaman: media.php, siaran-pers.php
   Mobile-first. Base = smartphone (<=480px).
   Breakpoints: 361 | 481 | 600 | 769 | 1024 | 1201
   Menggantikan: media-responsive.css (74 !important, desktop-first)
   + inline <style> dari media.php dan siaran-pers.php
   Dimuat via $page_head_styles -> terakhir di <head> -> menang cascade.

   Root cause !important yang dihapus:
   Selector .section-media-page-content .header-tab-media .nav (0,3,1)
   mengalahkan main.css (0,3,1 juga tapi dimuat LEBIH AWAL) dan Bootstrap
   .nav (0,1,0) via cascade order. Tidak perlu !important.
   Sisa 0 !important — selector cukup spesifik dan dimuat terakhir.
================================================================ */

/*
 * 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 — tinggi desktop + struktur hero2-wrapper
   CATATAN: media.php sudah dibangun ulang dengan .page-hero (lihat components/page-hero.css).
   Rule .banner_man/.banner_man2/.hero2-wrapper/.huruf_banner_contact di bawah DIPERTAHANKAN
   karena masih dipakai oleh siaran-pers.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 */
  /* overflow:hidden + position:relative diurus banner-hero.css */
}

/* hero2-wrapper: static di mobile (gambar stack di atas teks),
   absolut hanya di desktop ≥992px (banner-hero.css juga handle) */
/* EDIT: gambar/logo hero — path gambar ada di media.php baris ~31:
 *   <img src="assets/img/hero-image-jumbroton-media.png" ...>
 *   Untuk mengganti gambar: ubah nilai src di media.php.
 *   Di mobile, gambar mengisi penuh lebar kolom (width:100% di bawah).
 *   Di desktop ≥992px, gambar diposisikan absolut di kanan dengan lebar 42% (lihat @media 992px).
 *   Lebih besar (width 42%) = gambar lebih dominan tapi bisa overflow keluar section atau menutupi teks. Lebih kecil = gambar kurang terlihat. */
.hero2-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
  width: 100%;
}
.hero2-img {
  width: 100%; /* EDIT: lebar gambar hero (mobile). Lebih besar = gambar lebih dominan/besar di mobile. Lebih kecil = gambar menyusut. */
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center top;
}

@media (min-width: 992px) {
  .banner_man  { height: 560px; padding-bottom: 50px; }
  .banner_man2 { height: 520px; }
  /* EDIT: gambar/logo hero di desktop — posisi absolut di kanan section.
   * width: 42% = lebar gambar relatif terhadap section. Lebih besar = gambar lebih dominan tapi bisa overlap teks. Lebih kecil = gambar kurang terlihat/kurang jadi fokus visual. */
  .hero2-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 42%;
  }
  .hero2-img {
    height: 100%;
    width: auto;
    max-width: none;
  }
}


/* 
   HERO TEXT INLINE — dipindah dari HTML
    */
.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;
  /* 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. */
  /* 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; }
}
@media (min-width: 600px) {
  /* EDIT: ukuran font judul hero (≥600px). Lebih besar = judul lebih dominan tapi bisa overflow/wrap. Lebih kecil = kurang menonjol. */
  .huruf_banner_contact h1 { font-size: 38px; }
  /* EDIT: ukuran font subtitle hero (≥600px). 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: 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; }
}


/* 
   KARTU ARTIKEL — card-article, card-article-top, dll.
    */
.card-article {
  background-color: #fff;
  border-radius: 12px;
  padding: 10px;
  text-decoration: none;
  box-shadow: 0 -2px 12px rgba(0,0,0,.05), 0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.02);
}
.card-article-top {
  border-radius: 12px;
  overflow: hidden;
  height: 160px; /* base: <=360px */
  box-sizing: border-box;
}
.card-article-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-article-bottom { padding: 16px 8px 8px; }
.card-article-title {
  color: #22313f;
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-article-desc {
  color: #556472;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  line-height: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-article-footer { padding: 8px 8px 4px; }
.card-article-time {
  color: #808b95;
  font-family: Tahoma, sans-serif;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-article-time i { font-size: 14px; }

@media (min-width: 361px) {
  .card-article-top { height: 180px; }
  .card-article-title { font-size: 14px; line-height: 20px; }
  .card-article-desc  { font-size: 13px; line-height: 20px; }
}
@media (min-width: 481px) {
  .card-article-top { height: 200px; }
  .card-article { border-radius: 16px; padding: 12px; }
  .card-article-title { font-size: 15px; line-height: 22px; }
  .card-article-desc  { font-size: 13px; line-height: 20px; }
}
@media (min-width: 600px) {
  .card-article-top { height: 160px; }
  .card-article-title { font-size: 14px; line-height: 20px; }
  .card-article-desc  { font-size: 12px; line-height: 18px; }
}
@media (min-width: 769px) {
  .card-article-top { height: 180px; }
}
@media (min-width: 1024px) {
  .card-article-top { height: 200px; }
  .card-article-title { font-size: 16px; line-height: 22px; }
  .card-article-desc  { font-size: 13px; line-height: 20px; }
}


/* 
   PAGINATION
    */
.pagination-iai {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.pagination-iai .pagination {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.pagination-iai .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #fff;
  color: #22313f;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
}
.pagination-iai .page-item.active .page-link {
  background: #3696d1;
  color: #fff;
  border-color: #3696d1;
}
.pagination-iai .page-item .page-link:hover { background: #ebf5fa; }
.pagination-iai .page-item .page-link.next  { border: none; background: none; }

@media (min-width: 361px) {
  .pagination-iai .page-item .page-link { width: 34px; height: 34px; font-size: 13px; border-radius: 6px; }
  .pagination-iai .pagination { gap: 6px; flex-wrap: nowrap; justify-content: unset; }
}
@media (min-width: 481px) {
  .pagination-iai .page-item .page-link { width: 40px; height: 40px; font-size: 14px; border-radius: 8px; }
  .pagination-iai .pagination { gap: 8px; }
  .pagination-iai { margin-top: 10px; }
}


/*
   SECTION HEADER TEKS (body-tab-media__title / desc)
    */
.body-tab-media__title {
  text-align: center;
  font-family: Tahoma, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #22313f;
}
.body-tab-media__desc {
  text-align: center;
  color: #556472;
}
@media (min-width: 481px) { .body-tab-media__title { font-size: 24px; } }
@media (min-width: 769px) { .body-tab-media__title { font-size: 32px; } }


/*
   SECTION CONTAINER PADDING — naik bertahap mobile ke desktop
   main.css .section-media-page-content-container { padding: 48px 112px 104px }
    */
.section-media-page-content-container {
  padding: 12px 10px 24px;
  box-sizing: border-box;
}
@media (min-width: 361px) { .section-media-page-content-container { padding: 16px 12px 32px; } }
@media (min-width: 481px) { .section-media-page-content-container { padding: 20px 16px 40px; } }
@media (min-width: 600px) { .section-media-page-content-container { padding: 28px 20px 48px; } }
@media (min-width: 1024px) { .section-media-page-content-container { padding: 40px 40px 60px; } }
@media (min-width: 1201px) { .section-media-page-content-container { padding: 48px 112px 104px; } }


/*
   GRID KARTU — 1 col mobile, 2 col tablet, 3 col desktop
   main.css .body-tab-media__item-box { grid-template-columns: repeat(3,1fr); gap:32px }
    */
.section-media-page-content .body-tab-media__item-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 20px;
}
.section-media-page-content .body-tab-media__item-box .card-article { width: 100%; }

@media (min-width: 361px) {
  .section-media-page-content .body-tab-media__item-box { gap: 12px; }
}
@media (min-width: 481px) {
  .section-media-page-content .body-tab-media__item-box { gap: 14px; }
}
@media (min-width: 600px) {
  .section-media-page-content .body-tab-media__item-box {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
    margin-bottom: 24px;
  }
}
@media (min-width: 769px) {
  .section-media-page-content .body-tab-media__item-box { gap: 16px; }
}
@media (min-width: 1024px) {
  .section-media-page-content .body-tab-media__item-box {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 28px;
    margin-bottom: 32px;
  }
}
@media (min-width: 1201px) {
  .section-media-page-content .body-tab-media__item-box {
    gap: 32px;
    margin-top: 40px;
    margin-bottom: 54px;
  }
}


/* 
   TAB NAVIGASI — mobile: dropdown; desktop: nav pills
   main.css menyembunyikan .header-tab-media-mobile { display:none }
   Di sini override ke visible untuk base mobile.
    */

/* Mobile base: tampilkan dropdown, sembunyikan pills */
.section-media-page-content .header-tab-media.header-tab-media-mobile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 16px;
  width: 100%;
}
.header-tab-media-title {
  font-family: Tahoma, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #556472;
  margin: 0;
}
.select-tab {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #c8dcea;
  border-radius: 10px;
  font-family: Tahoma, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #22313f;
  background: #fff;
  cursor: pointer;
  appearance: auto;
}
.select-tab:focus { outline: none; border-color: #3696d1; }

.section-media-page-content .header-tab-media.header-tab-media-dekstop { display: none; }

/* 600px+: switch ke nav pills */
@media (min-width: 600px) {
  .section-media-page-content .header-tab-media.header-tab-media-mobile { display: none; }
  .section-media-page-content .header-tab-media.header-tab-media-dekstop { display: flex; }
  .section-media-page-content .header-tab-media { margin-bottom: 16px; }

  /* Pills: full width, no-wrap, tiap item share equal space */
  .section-media-page-content .header-tab-media .nav {
    width: 100%;
    flex-wrap: nowrap;
    column-gap: 4px;
    padding: 6px 10px;
  }
  .section-media-page-content .header-tab-media .nav-item {
    flex: 1;
    min-width: 0;
  }
  .section-media-page-content .header-tab-media .nav-item .nav-link {
    width: 100%;
    font-size: 13px;
    padding: 8px 4px;
    white-space: nowrap;
  }
}
@media (min-width: 769px) {
  .section-media-page-content .header-tab-media { margin-bottom: 24px; }
  .section-media-page-content .header-tab-media .nav { column-gap: 8px; }
  .section-media-page-content .header-tab-media .nav-item .nav-link {
    font-size: 15px;
    padding: 9px 6px;
  }
}
@media (min-width: 1201px) {
  .section-media-page-content .header-tab-media { margin-bottom: 40px; }
  /* Kembalikan ke nilai main.css: fixed 272px per pill */
  .section-media-page-content .header-tab-media .nav {
    width: auto;
    flex-wrap: wrap;
    column-gap: 16px;
    padding: 8px 16px;
  }
  .section-media-page-content .header-tab-media .nav-item {
    flex: none;
    min-width: auto;
  }
  .section-media-page-content .header-tab-media .nav-item .nav-link {
    width: 272px;
    font-size: 24px;
    padding: 12px 0;
    white-space: normal;
  }
}
