/*
 * JAIP Portal — Mobile Responsive CSS
 * Salin ke: public/css/responsive.css
 */

/* ══════════════════════════════════════════════════════
   TABLET (max 1024px)
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  .header-inner { padding: 0 16px !important; gap: 8px !important; }
  .brand-name   { font-size: 13px !important; }
  .brand-sub    { display: none !important; }
  .main-nav     { display: none !important; }
  #mobileToggle { display: flex !important; }

  .hero-section { height: auto !important; min-height: 280px !important; }
  .hero-content { padding: 0 24px !important; }
  .hero-title   { font-size: 26px !important; }

  .services-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .news-sidebar-layout { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  footer > div:first-child { grid-template-columns: 1fr 1fr !important; }
}

/* ══════════════════════════════════════════════════════
   MOBILE MENU — Hidden by default, toggle burger
══════════════════════════════════════════════════════ */

/* Sembunyikan mobile menu by default */
#mobileMenu { display: none; }

/* Burger button — sorok pada desktop */
@media (min-width: 1025px) {
  #mobileToggle { display: none !important; }
  #mobileMenu   { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   MOBILE (max 768px)
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Util Bar ── */
  .util-top {
    padding: 0 12px !important;
    height: auto !important;
    min-height: 38px !important;
  }

  /* Sorok teks "Laman Web Rasmi" pada mobile */
  .util-left { display: none !important; }

  /* Nav links dalam util — sorok label, tunjuk icon sahaja */
  .util-link { padding: 0 8px !important; font-size: 10px !important; }
  .util-link span { display: none !important; }

  /* ── Carian dalam util — fix overflow ── */
  .util-top form,
  [role="search"] {
    display: none !important; /* Sorok carian dalam util bar pada mobile */
  }

  /* Util bottom */
  .util-bottom {
    padding: 4px 12px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: flex-end !important;
  }

  /* ── Header ── */
  .header-inner {
    padding: 0 12px !important;
    height: 60px !important;
    gap: 8px !important;
  }
  .brand-logo  { width: 40px !important; height: 40px !important; }
  .brand-tag   { display: none !important; }
  .brand-name  { font-size: 12px !important; }
  .brand-sub   { display: none !important; }

  /* Carian dalam header — sorok pada mobile */
  .header-search { display: none !important; }

  /* Burger */
  #mobileToggle { display: flex !important; }
  .main-nav     { display: none !important; }

  /* Mobile menu */
  #mobileMenu { max-height: 80vh !important; overflow-y: auto !important; }

  /* ── Hero ── */
  .hero-section {
    height: auto !important;
    min-height: 240px !important;
  }
  .hero-content { padding: 28px 16px !important; }
  .hero-title   { font-size: 20px !important; line-height: 1.3 !important; }
  .hero-desc    { display: none !important; }
  .hero-btns    { flex-direction: column !important; gap: 8px !important; }
  .hero-btns a, .hero-btns button {
    width: 100% !important;
    justify-content: center !important;
    padding: 11px 16px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }

  /* ── Services ── */
  .services-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1px !important;
  }
  .svc-card-item { padding: 14px 8px 12px !important; }
  .svc-label     { font-size: 10px !important; }
  .svc-desc      { display: none !important; }

  /* ── Section padding ── */
  [style*="padding:32px 24px"],
  [style*="padding:28px 24px"],
  [style*="padding:36px 24px"],
  [style*="padding:40px 24px"],
  [style*="padding:56px 32px"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ── News ── */
  .news-card-featured { grid-template-columns: 1fr !important; }
  .news-card-featured > div:first-child { height: 160px !important; }
  .news-card-small { grid-template-columns: 80px 1fr !important; }
  .news-sidebar-layout { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* ── Stats ── */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-inner { padding: 28px 12px !important; }
  .stat-num    { font-size: 30px !important; }

  /* ── Footer ── */
  footer > div:first-child,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 28px 16px !important;
  }
  .footer-bottom-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px 16px !important;
  }

  /* ── Detail pages layout ── */
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:1fr 296px"],
  [style*="grid-template-columns:1fr 280px"],
  [style*="grid-template-columns:1fr 240px"],
  [style*="grid-template-columns:1fr 260px"],
  [style*="grid-template-columns:280px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  aside[style*="position:sticky"] {
    position: relative !important;
    top: auto !important;
  }

  /* ── Galeri ── */
  .photo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }

  /* ── Carian lanjutan ── */
  #panelLanjutan > div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #panelLanjutan { max-width: 100% !important; }
  #panelLanjutan input, #panelLanjutan select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Tables ── */
  table { display: block !important; overflow-x: auto !important; white-space: nowrap !important; }

  /* ── Back to top ── */
  #backTop { bottom: 16px !important; right: 12px !important; width: 36px !important; height: 36px !important; }

  /* ── Max width ── */
  [style*="max-width:1200px"],
  [style*="max-width:1280px"] { max-width: 100% !important; }

  /* ── Page headers ── */
  [style*="padding:32px 24px"][style*="background:linear-gradient"] {
    padding: 20px 16px !important;
  }

  /* ── Grids 2 col → 1 col ── */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:10px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:14px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:16px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Apps grid ── */
  .apps-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Filter buttons ── */
  .filter-btn, .kat-tab { padding: 6px 10px !important; font-size: 11px !important; }

  /* ── Lightbox ── */
  #lightbox img { max-width: 95vw !important; max-height: 70vh !important; }
  #lightbox-prev { left: 8px !important; width: 36px !important; height: 36px !important; }
  #lightbox-next { right: 8px !important; width: 36px !important; height: 36px !important; }
}

/* ══════════════════════════════════════════════════════
   SMALL MOBILE (max 480px)
══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .photo-grid    { grid-template-columns: 1fr 1fr !important; }
  .hero-title    { font-size: 18px !important; }
  .news-card-small { grid-template-columns: 70px 1fr !important; }
  .stat-num      { font-size: 26px !important; }
}

/* ══════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════ */
@media print {
  .util-top, .util-bottom, .site-header,
  #backTop, .hero-btns, aside, footer { display: none !important; }
  body { font-size: 12pt !important; color: #000 !important; }
}

/* ══════════════════════════════════════════════════════
   TABLET (max 1024px)
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Header */
  .header-inner { padding: 0 16px !important; gap: 8px !important; }
  .brand-name   { font-size: 13px !important; }
  .brand-sub    { display: none !important; }

  /* Nav — sembunyikan, guna burger */
  .main-nav     { display: none !important; }

  /* Hero */
  .hero-section { height: auto !important; min-height: 280px !important; }
  .hero-content { padding: 0 24px !important; }
  .hero-title   { font-size: 26px !important; }

  /* Services grid */
  .services-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* News + sidebar layout */
  .news-sidebar-layout { grid-template-columns: 1fr !important; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer */
  footer > div:first-child { grid-template-columns: 1fr 1fr !important; }
}

/* ══════════════════════════════════════════════════════
   MOBILE (max 768px)
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Util Bar ── */
  .util-top  { padding: 0 12px !important; height: auto !important; flex-wrap: wrap !important; }
  .util-bottom { padding: 4px 12px !important; flex-wrap: wrap !important; gap: 6px !important; }
  .util-link { padding: 0 8px !important; font-size: 10px !important; }
  .util-link span { display: none !important; } /* Sorok label, tunjuk icon je */

  /* Search dalam util bar */
  .util-top input[type="search"] { width: 100px !important; }

  /* ── Header ── */
  .header-inner {
    padding: 0 12px !important;
    height: 60px !important;
    gap: 8px !important;
  }
  .brand-logo  { width: 40px !important; height: 40px !important; }
  .brand-tag   { display: none !important; }
  .brand-name  { font-size: 12px !important; }
  .brand-sub   { display: none !important; }

  /* Burger menu */
  #mobileToggle { display: flex !important; }
  .main-nav     { display: none !important; }

  /* Mobile menu full width */
  #mobileMenu {
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  /* ── Hero ── */
  .hero-section {
    height: auto !important;
    min-height: 260px !important;
    padding: 32px 0 !important;
  }
  .hero-content { padding: 0 16px !important; }
  .hero-title   { font-size: 20px !important; line-height: 1.3 !important; }
  .hero-desc    { display: none !important; }
  .hero-btns    { flex-direction: column !important; gap: 8px !important; }
  .hero-btns a, .hero-btns button {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
  }

  /* Hero dots */
  [style*="bottom:16px"][style*="left:50%"] {
    bottom: 10px !important;
  }

  /* ── Services ── */
  .services-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1px !important;
  }
  .svc-card-item { padding: 14px 8px 12px !important; }
  .svc-label     { font-size: 10px !important; }
  .svc-desc      { display: none !important; }
  .svc-icon      { width: 38px !important; height: 38px !important; font-size: 15px !important; margin-bottom: 7px !important; }

  /* ── Section padding ── */
  [style*="padding:32px 24px"],
  [style*="padding:28px 24px"],
  [style*="padding:36px 24px"],
  [style*="padding:40px 24px"],
  [style*="padding:56px 32px"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ── News ── */
  .news-card-featured {
    grid-template-columns: 1fr !important;
  }
  .news-card-featured > div:first-child {
    height: 160px !important;
  }
  .news-card-small {
    grid-template-columns: 80px 1fr !important;
  }
  .news-sidebar-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Berita senarai grid */
  .berita-grid,
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Stats ── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
  }
  .stats-inner { padding: 28px 12px !important; }
  .stat-num    { font-size: 32px !important; }

  /* ── Footer ── */
  footer > div:first-child,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 28px 16px !important;
  }
  .footer-bottom-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px 16px !important;
  }

  /* ── Halaman detail (berita, perkhidmatan dll) ── */
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:1fr 296px"],
  [style*="grid-template-columns:1fr 280px"],
  [style*="grid-template-columns:1fr 240px"],
  [style*="grid-template-columns:1fr 260px"] {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar sticky — buang sticky pada mobile */
  aside[style*="position:sticky"] {
    position: relative !important;
    top: auto !important;
  }

  /* ── Galeri ── */
  .photo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"][class*="album"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Carian lanjutan ── */
  #panelLanjutan > div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Muat turun ── */
  .dl-row { flex-wrap: wrap !important; }

  /* ── Piagam table ── */
  table { display: block !important; overflow-x: auto !important; }

  /* ── Back to top ── */
  #backTop {
    bottom: 16px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }

  /* ── Max width containers ── */
  [style*="max-width:1200px"],
  [style*="max-width:1280px"] {
    max-width: 100% !important;
  }

  /* ── Page headers ── */
  [style*="padding:32px 24px"][style*="background:linear-gradient"] {
    padding: 20px 16px !important;
  }
  [style*="padding:32px 24px"][style*="background:linear-gradient"] h1 {
    font-size: 22px !important;
  }

  /* ── Korporat objektif grid ── */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:10px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Perutusan pengarah ── */
  [style*="grid-template-columns:280px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Apps grid sidebar ── */
  .apps-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Filter buttons ── */
  [style*="display:flex"][style*="gap:6px"][style*="flex-wrap:wrap"] {
    gap: 4px !important;
  }
  .filter-btn, .kat-tab {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  /* ── Aduan steps grid ── */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:14px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Misi nilai grid ── */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:10px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════
   SMALL MOBILE (max 480px)
══════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .stats-grid { grid-template-columns: 1fr 1fr !important; }

  .photo-grid { grid-template-columns: 1fr 1fr !important; }

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

  /* News featured single column */
  .news-card-small { grid-template-columns: 70px 1fr !important; }

  /* Util bar sorok semua link kecuali carian */
  .util-link { display: none !important; }

  /* Show only search in util */
  .util-top nav > div:last-child { display: flex !important; }
}

/* ══════════════════════════════════════════════════════
   LIGHTBOX MOBILE FIX
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #lightbox img {
    max-width: 95vw !important;
    max-height: 70vh !important;
  }
  #lightbox-prev { left: 8px !important; width: 36px !important; height: 36px !important; }
  #lightbox-next { right: 8px !important; width: 36px !important; height: 36px !important; }
}

/* ══════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════ */
@media print {
  .util-top, .util-bottom, .site-header,
  #backTop, .hero-btns, .sidebar,
  footer { display: none !important; }

  body { font-size: 12pt !important; color: #000 !important; }
  a    { text-decoration: none !important; color: #000 !important; }
}