/* ============================================================
   MOBILE FIX — tridekointerior.com
   Upload ke: /public_html/assets/css/mobile-fix.css
   Include di header-meta.php sebelum </head>
   Fix: overflow horizontal, grid collapse, WA float visible
   ============================================================ */

/* --- GLOBAL OVERFLOW FIX --- */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
*, *::before, *::after {
  box-sizing: border-box !important;
}

/* --- QUICK STATS 4 kolom → 2 → 2 --- */
@media (max-width: 639px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- GALLERY GRID collapse --- */
@media (max-width: 1023px) {
  #area-gallery-grid,
  #fasad-gallery-grid,
  #kanopi-area-gallery,
  #ci-gallery,
  [id$="-gallery"],
  [id$="-gallery-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 639px) {
  #area-gallery-grid,
  #fasad-gallery-grid,
  #kanopi-area-gallery,
  #ci-gallery,
  [id$="-gallery"],
  [id$="-gallery-grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- CHILD CARD GRID collapse --- */
@media (max-width: 767px) {
  [style*="grid-template-columns:repeat(auto-fill,minmax(280px"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(220px"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(240px"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(250px"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(200px"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- AREA HUB GRID --- */
@media (max-width: 1023px) {
  #area-grid,
  #cw-child-grid,
  #acp-child-grid,
  #spider-grid,
  #alu-child-grid,
  #alu-child-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 639px) {
  #area-grid,
  #cw-child-grid,
  #acp-child-grid,
  #spider-grid,
  #alu-child-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- TRUST BADGES flex wrap --- */
.trust-badge {
  font-size: 12px !important;
  padding: 8px 12px !important;
  flex-shrink: 0;
}
@media (max-width: 639px) {
  .trust-badge {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
}

/* --- HERO H1 tidak overflow --- */
h1 {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* --- TABEL overflow scroll di mobile --- */
table,
.price-table,
.comparison-table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100% !important;
}
@media (min-width: 768px) {
  table,
  .price-table,
  .comparison-table {
    display: table !important;
  }
}

/* --- CHILD CARD tidak overflow --- */
.child-card {
  min-width: 0 !important;
  word-break: break-word;
}
.child-card-title,
.child-card-desc {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* --- REGION CARD --- */
.region-card {
  min-width: 0 !important;
  word-break: break-word;
}

/* --- WA FLOAT — SELALU VISIBLE DI MOBILE --- */
.wa-float {
  position: fixed !important;
  bottom: 20px !important;
  right: 16px !important;
  z-index: 99999 !important;
  max-width: 56px !important;
}
.wa-icon {
  width: 52px !important;
  height: 52px !important;
}
@media (max-width: 639px) {
  .wa-float {
    bottom: 16px !important;
    right: 12px !important;
  }
}

/* --- BREADCRUMB wrap di mobile --- */
.breadcrumb-list {
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
  font-size: 12px !important;
}

/* --- BUTTON tidak overflow --- */
.btn-primary,
.btn-outline,
.btn-whatsapp,
.btn-nav-cta {
  max-width: 100%;
  white-space: normal !important;
  word-break: break-word;
}
@media (max-width: 639px) {
  .btn-primary,
  .btn-whatsapp {
    padding: 10px 18px !important;
    font-size: 0.875rem !important;
  }
  /* Stack CTA buttons vertically on mobile */
  section .flex.flex-wrap.gap-4 {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  section .flex.flex-wrap.gap-4 a {
    text-align: center !important;
    justify-content: center !important;
  }
}

/* --- SPIDER GRID fix --- */
@media (max-width: 639px) {
  #spider-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- FINISH GRID fix --- */
@media (max-width: 767px) {
  #finish-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- ALU GALLERY masonry fix mobile --- */
@media (max-width: 1023px) {
  #alu-gallery-wrap {
    grid-template-columns: 1fr 1fr !important;
  }
  #alu-gallery-wrap figure:first-child {
    grid-row: auto !important;
    grid-column: span 2 !important;
  }
}
@media (max-width: 639px) {
  #alu-gallery-wrap {
    grid-template-columns: 1fr !important;
  }
  #alu-gallery-wrap figure:first-child {
    grid-column: auto !important;
  }
}

/* --- TIER INDICATOR wrap --- */
.tier-label {
  font-size: 0.6875rem !important;
  padding: 5px 10px !important;
}
@media (max-width: 639px) {
  .tier-arrow { display: none !important; }
  div:has(> .tier-label) {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }
}

/* --- SECTION padding mobile --- */
@media (max-width: 639px) {
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .w-full.px-4 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* --- max-width container tidak overflow --- */
.max-w-3xl,
.max-w-4xl,
.max-w-5xl,
.max-w-6xl {
  max-width: min(100%, var(--mw, 100%)) !important;
  padding-left: 0;
  padding-right: 0;
}

/* --- INLINE STYLE grid override untuk mobile --- */
@media (max-width: 639px) {
  [style*="display:grid"] {
    min-width: 0 !important;
  }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 1023px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}