/* ========================================================
   LiGaMu Mobile Final Audit v2.10.11
   Scoped responsive guardrails for public + member pages.
   Tujuan: mengurangi overflow, menjaga header/bottom-nav/chat,
   dan merapikan kartu/form/tabel pada layar HP tanpa mengubah flow.
   ======================================================== */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

main,
.site-header,
.site-footer,
.container,
.member-wrap,
.member-layout,
.member-content {
  min-width: 0;
}

img,
video,
iframe,
table {
  max-width: 100%;
}

/* Header public: jangan terlalu padat di HP/tablet kecil. */
@media (max-width: 768px) {
  .site-header { z-index: 1200; }
  .site-header-inner {
    min-height: 62px;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .brand-link { min-width: 0; gap: 8px; }
  .brand-logo,
  .brand-logo-img {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px;
  }
  .brand-logo-img img {
    max-height: 38px !important;
    width: auto !important;
  }
  .brand-text { min-width: 0; display: block; }
  .brand-name {
    font-size: .98rem !important;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 46vw;
  }
  .brand-sub { display: none !important; }
  .nav-actions {
    margin-left: auto;
    gap: 6px !important;
    flex: 0 0 auto;
  }
  .cmdk-trigger {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    justify-content: center;
  }
  .cmdk-trigger-label,
  .cmdk-trigger-kbd { display: none !important; }
  .a11y-trigger,
  .mobile-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    padding: 0 !important;
  }
  .nav-actions > .btn {
    min-height: 40px;
    padding-inline: 11px !important;
  }
  .nav-actions > .btn i + * { display: none; }

  .main-nav.is-open {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    max-height: min(72vh, calc(100dvh - 92px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 10px !important;
    border-radius: 18px !important;
    z-index: 1250 !important;
  }
  .main-nav.is-open .nav-link,
  .main-nav.is-open .nav-dropdown-toggle {
    min-height: 44px;
    padding: 11px 13px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 420px) {
  .brand-name { max-width: 40vw; }
  .nav-actions { gap: 5px !important; }
  .a11y-trigger { display: none !important; }
}

/* Ruang aman untuk bottom-nav mobile, floating chat, dan install banner. */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .site-footer {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  .ligamu-bottom-nav {
    z-index: 1400 !important;
    min-height: 62px;
  }
  #ligaChatRoot {
    right: 12px !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1350 !important;
  }
  .liga-toggle {
    min-width: 48px;
    min-height: 48px;
    box-shadow: 0 12px 26px rgba(27,77,62,.28) !important;
  }
  .liga-panel {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 76px !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 18px !important;
  }
  .install-banner {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1320 !important;
  }
}

@media (max-width: 480px) {
  #ligaChatRoot { right: 12px !important; }
  .liga-panel {
    left: 10px !important;
    right: 10px !important;
    top: 70px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .liga-header { padding: 12px 14px !important; }
  .liga-body { padding: 12px !important; }
  .liga-bubble { max-width: 92% !important; font-size: 13.5px !important; }
}

/* Public page guardrails: cards, grids, hero, and CTA sections. */
@media (max-width: 768px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  .section,
  .section-sm,
  .section-lg { padding-top: 34px; padding-bottom: 34px; }

  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-auto,
  .book-grid,
  .news-grid,
  .stats-grid,
  .feature-grid,
  .action-hub-layout,
  .guide-shortcuts,
  .faq-popular-grid,
  .faq-cat-grid,
  .ta-personas-grid,
  .ta-flow-grid,
  .ta-contact-grid,
  .bl-grid,
  .bl-kecamatan-grid,
  .bl-activity-grid,
  .bl-profile-grid,
  .bl-member-cta,
  .bl-kecamatan-stats,
  .bl-stats-grid {
    grid-template-columns: 1fr !important;
  }

  .hero,
  .guide-hero,
  .faq-hero,
  .ta-hero,
  .bl-hero {
    text-align: left;
  }
  .hero h1,
  .guide-hero h1,
  .faq-hero h1,
  .ta-hero h1,
  .bl-hero h1 {
    overflow-wrap: anywhere;
  }

  .btn,
  .guide-btn,
  .faq-btn,
  .ta-btn,
  .bl-btn,
  .bl-member-cta-btn,
  .bl-member-cta-actions a {
    min-height: 42px;
  }

  .guide-hero-actions,
  .guide-cta-actions,
  .faq-hero-actions,
  .faq-cta-actions,
  .ta-hero-actions,
  .bl-actions,
  .bl-member-cta-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .guide-hero-actions a,
  .guide-cta-actions a,
  .faq-hero-actions a,
  .faq-cta-actions a,
  .ta-hero-actions a,
  .bl-actions a,
  .bl-member-cta-actions a {
    width: 100%;
    justify-content: center;
  }

  .table-wrap,
  .admin-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  .card,
  .guide-help-card,
  .guide-flow,
  .guide-cta,
  .faq-card,
  .faq-cta,
  .ta-card,
  .ta-hero-card,
  .bl-card,
  .bl-member-cta {
    border-radius: 18px !important;
  }
}

/* Bunda Literasi: dashboard/form contributor tetap lega di HP. */
@media (max-width: 768px) {
  .bl-dashboard,
  .bl-contributor-page,
  .bl-profile-edit-page,
  .bl-form-page {
    width: 100% !important;
    max-width: 100% !important;
  }
  .bl-dashboard-head,
  .bl-profile-edit-head,
  .bl-form-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .bl-dashboard-actions,
  .bl-profile-edit-actions,
  .bl-form-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .bl-dashboard-actions .btn,
  .bl-profile-edit-actions .btn,
  .bl-form-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .bl-admin-editor-grid,
  .bl-profile-edit-form,
  .bl-profile-edit-grid,
  .bl-form-grid,
  .bl-inline-grid {
    grid-template-columns: 1fr !important;
  }
  .bl-profile-side { position: static !important; }
  .bl-profile-photo-preview { height: 220px !important; }
}

/* Member area: menjaga sidebar/konten tidak overflow pada layar kecil. */
@media (max-width: 768px) {
  .member-wrap { overflow-x: hidden; }
  .member-layout {
    display: block !important;
    width: 100% !important;
  }
  .member-content {
    width: 100% !important;
    max-width: 100% !important;
  }
  .member-content-head,
  .member-hero-inner,
  .member-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .member-hero-actions .btn,
  .member-content-head .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Tiny devices: avoid cramped typography and invisible controls. */
@media (max-width: 360px) {
  body { font-size: 13.5px !important; }
  .brand-name { max-width: 34vw; font-size: .9rem !important; }
  .cmdk-trigger,
  .mobile-toggle,
  .nav-actions > .btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }
  .lbn-item span { font-size: .58rem; }
}