/*
 * governance-responsive.css
 * Responsive overrides for all governance pages.
 * Each inline <style> block already handles ≤991px basics (banner height, box padding, grid stacking).
 * This file covers: shared layout fixes + per-page fine-tuning below 768px.
 * Loaded last (before </body>) so it wins cascade.
 * Breakpoints: 1024 → 768 → 600 → 480 → 360
 */

/* ============================================================
   SHARED — all governance pages
   ============================================================ */

/* Container padding (style.css hardcodes 64px 112px, only fixes ≤428px) */
@media (max-width: 1024px) {
  .section-customer-care-page-content {
    padding: 48px 40px !important;
  }
}

@media (max-width: 768px) {
  .section-customer-care-page-content {
    padding: 32px 20px !important;
  }

  /* Hero banner: center text when col-lg-7 stacks to full width */
  .banner_man2 .huruf_banner {
    text-align: center !important;
    padding: 20px 16px 0 !important;
  }

  .banner_man2 .huruf_banner h1 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }

  .banner_man2 .huruf_banner h3 {
    font-size: 15px !important;
    text-align: center !important;
  }

  /* Hero image — shrink on tablet portrait */
  .banner_man2 .hero-img .hero2 img {
    max-width: 260px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Side menu mobile button */
  .section-customer-care-page .side-menu-mobile {
    border-radius: 12px !important;
    margin-bottom: 8px !important;
  }

  .section-customer-care-page .--menu-wrap button {
    font-size: 15px !important;
  }
}

@media (max-width: 600px) {
  .section-customer-care-page-content {
    padding: 24px 16px !important;
  }

  .banner_man2 .huruf_banner h1 {
    font-size: 22px !important;
  }

  .banner_man2 .huruf_banner h3 {
    font-size: 14px !important;
  }

  .banner_man2 .hero-img .hero2 img {
    max-width: 200px !important;
  }
}

@media (max-width: 480px) {
  .section-customer-care-page-content {
    padding: 16px 12px !important;
  }

  .banner_man2 .huruf_banner h1 {
    font-size: 20px !important;
  }
}

@media (max-width: 360px) {
  .section-customer-care-page-content {
    padding: 12px 10px !important;
  }

  .banner_man2 .huruf_banner h1 {
    font-size: 18px !important;
  }

  .banner_man2 .hero-img .hero2 img {
    max-width: 160px !important;
  }
}

/* ============================================================
   governance.php — Laporan Keuangan
   .financial-report-box, .financial-grid, .financial-card
   ============================================================ */

/* main.css has a global @media(max-width:428px){ svg { width:250px } } that hits
   all SVGs. Lock the icon to 44px with !important so it wins on every device.
   Container (.icon-wrap) is 52px with overflow:visible — gives 4px breathing room
   so stroke-width:2 paths never get clipped by sub-pixel rounding on Android. */
.financial-card .icon-wrap svg {
    width: 44px !important;
    height: 44px !important;
    display: block;
    flex-shrink: 0;
}

@media (max-width: 768px) {
  .financial-report-box {
    padding: 20px !important;
  }

  .financial-report-box h1 {
    font-size: 18px !important;
  }

  .financial-card {
    padding: 16px !important;
    flex: 1 1 100% !important; /* force single col below tablet */
  }
}

@media (max-width: 480px) {
  .financial-report-box {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  .financial-select {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }

  .btn-download-laporan {
    font-size: 13px !important;
    min-height: 38px !important;
  }
}

/* ============================================================
   governance-anti-fraud.php
   .anti-fraud-box, .anti-fraud-grid, .anti-fraud-image, etc.
   ============================================================ */

@media (max-width: 768px) {
  .anti-fraud-box {
    padding: 18px !important;
  }

  .anti-fraud-title {
    font-size: 26px !important;
  }

  .anti-fraud-subtitle {
    font-size: 15px !important;
    margin-bottom: 18px !important;
  }

  .anti-fraud-image {
    height: auto !important;
    max-height: 260px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .anti-fraud-text {
    font-size: 18px !important;
  }
}

@media (max-width: 600px) {
  .anti-fraud-title {
    font-size: 22px !important;
  }

  .anti-fraud-subtitle {
    font-size: 14px !important;
  }

  .anti-fraud-text {
    font-size: 16px !important;
  }

  .anti-fraud-number {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    font-size: 18px !important;
  }

  .anti-fraud-image {
    max-height: 200px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
  }
}

@media (max-width: 480px) {
  .anti-fraud-title {
    font-size: 20px !important;
  }

  .anti-fraud-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .anti-fraud-number {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    font-size: 16px !important;
  }

  .anti-fraud-point {
    gap: 10px !important;
  }
}

/* ============================================================
   governance-whistle-blowing-system.php
   .wbs-box, .wbs-title, .wbs-radio-wrap, .wbs-file-box, etc.
   ============================================================ */

@media (max-width: 768px) {
  .wbs-box {
    padding: 18px !important;
  }

  .wbs-title {
    font-size: 26px !important;
    margin-bottom: 8px !important;
  }

  .wbs-subtitle {
    font-size: 15px !important;
    margin-bottom: 14px !important;
  }
}

@media (max-width: 600px) {
  .wbs-box {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .wbs-title {
    font-size: 22px !important;
  }

  .wbs-subtitle {
    font-size: 14px !important;
  }

  .wbs-radio-wrap {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .wbs-radio-item {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }

  .wbs-input,
  .wbs-select,
  .wbs-textarea {
    font-size: 14px !important;
    padding: 9px 12px !important;
  }

  .wbs-form-label {
    font-size: 12px !important;
  }

  .wbs-submit {
    font-size: 15px !important;
    min-height: 42px !important;
  }

  .wbs-file-status {
    font-size: 13px !important;
  }

  .wbs-help {
    font-size: 11px !important;
  }
}

@media (max-width: 480px) {
  .wbs-title {
    font-size: 20px !important;
  }

  .wbs-textarea {
    min-height: 100px !important;
  }
}

@media (max-width: 360px) {
  .wbs-title {
    font-size: 18px !important;
  }

  .wbs-radio-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ============================================================
   governance-komite-direksi.php & governance-komite-dewan-komisaris.php
   .komite-box, .komite-grid, .komite-card, .komite-modal
   ============================================================ */

@media (max-width: 768px) {
  .komite-box {
    padding: 18px !important;
  }

  .komite-title {
    font-size: 20px !important;
    margin-bottom: 14px !important;
  }

  .komite-card {
    padding: 16px !important;
  }

  .komite-card-title {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  /* Fix font-size: 10px from inline 991px query — too small */
  .komite-btn {
    font-size: 13px !important;
    min-height: 38px !important;
    gap: 8px !important;
  }

  .komite-btn svg {
    width: 22px !important;
    height: 22px !important;
  }
}

@media (max-width: 600px) {
  .komite-title {
    font-size: 18px !important;
  }

  .komite-card-title {
    font-size: 15px !important;
  }

  .komite-btn {
    font-size: 13px !important;
    padding: 0 12px !important;
  }

  /* Custom modal — full screen on small devices */
  .komite-modal-content {
    width: 95vw !important;
    height: 85vh !important;
    padding: 10px !important;
  }

  .komite-modal-title {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  .komite-modal-close {
    width: 32px !important;
    height: 32px !important;
    font-size: 24px !important;
  }
}

@media (max-width: 360px) {
  .komite-grid {
    gap: 12px !important;
  }

  .komite-card {
    padding: 12px !important;
  }

  .komite-card-title {
    font-size: 14px !important;
  }

  .komite-btn {
    font-size: 12px !important;
    gap: 6px !important;
  }

  .komite-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ============================================================
   governance-laporan-berkelanjutan.php
   .laporan-box, .laporan-grid, .laporan-card, .laporan-cover,
   .btn-unduh, .laporan-pagination
   ============================================================ */

@media (max-width: 768px) {
  .laporan-box {
    padding: 18px !important;
  }

  .laporan-title {
    font-size: 18px !important;
  }

  .laporan-subtitle {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }

  .laporan-pagination {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 16px !important;
  }
}

@media (max-width: 600px) {
  .laporan-box {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  /* Ensure cards are 1 col on small phones (inline style already handles ≤575px) */
  .laporan-card {
    flex: 0 1 100% !important;
  }

  .laporan-title {
    font-size: 16px !important;
  }

  .laporan-subtitle {
    font-size: 13px !important;
  }

  .btn-unduh {
    font-size: 14px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .laporan-pagination .page-num {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .laporan-cover {
    border-radius: 8px !important;
    margin-bottom: 8px !important;
  }

  .btn-unduh {
    font-size: 13px !important;
    padding: 10px !important;
    gap: 6px !important;
  }

  .btn-unduh svg {
    width: 16px !important;
    height: 16px !important;
  }
}