/**
 * GIA NGUYEN HOME — MOBILE UI STABILITY v1.1.4
 * Loaded after page-level styles. Purpose: deterministic mobile layout on
 * 320–767px and safe tablet behaviour up to 991px.
 */

/* ---------- Base safety ---------- */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

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

@media (max-width: 991px) {
  main .sticky:not(.site-header) {
    position: static !important;
    top: auto !important;
  }

  /* Sidebars that are useful on desktop must not pin over mobile content. */
  main [class~="top-28"].sticky,
  main [class~="top-20"].sticky {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 767px) {
  /* ---------- Global rhythm ---------- */
  main section[class*="py-20"],
  main section[class*="py-24"],
  main section[class*="py-28"],
  main section[class*="py-32"] {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  main section[class*="py-16"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  main section[class*="py-12"] {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  main h1 {
    font-size: clamp(1.9rem, 9vw, 2.65rem) !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere;
  }

  main h2 {
    font-size: clamp(1.65rem, 7.2vw, 2.15rem) !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
  }

  main h3 {
    overflow-wrap: anywhere;
  }

  main p,
  main li {
    overflow-wrap: break-word;
  }

  /* ---------- HOME: root cause of giant blank cards ---------- */
  #projects > div > .flex:first-child,
  #shop > div > .flex:first-child {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 20px 16px !important;
    margin-bottom: 24px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  #projects > div > .flex:first-child > div:first-child,
  #shop > div > .flex:first-child > div:first-child {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
  }

  #projects > div > .flex:first-child > div:last-child,
  #shop > div > .flex:first-child > div:last-child {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 18px !important;
    padding: 0 2px 7px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  #projects > div > .flex:first-child > div:last-child::-webkit-scrollbar,
  #shop > div > .flex:first-child > div:last-child::-webkit-scrollbar {
    display: none;
  }

  #projects .proj-filter-btn,
  #shop .shop-filter-btn {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    white-space: nowrap !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
  }

  #projects h2,
  #shop h2 {
    font-size: clamp(1.85rem, 8.2vw, 2.35rem) !important;
    line-height: 1.08 !important;
    margin: 8px 0 10px !important;
  }

  #projects > div > .flex:first-child p,
  #shop > div > .flex:first-child p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  /* Homepage sections were visually too tall on phones. */
  #home,
  #why-us,
  #projects,
  #shop,
  #process,
  #quote {
    min-height: 0 !important;
  }

  #home {
    padding-top: 40px !important;
    padding-bottom: 42px !important;
  }

  #why-us,
  #projects,
  #shop,
  #process,
  #quote {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  /* ---------- Listing filter/tool bars ---------- */
  main > section.sticky,
  main section.sticky[class*="top-20"] {
    position: relative !important;
    top: auto !important;
    z-index: 20 !important;
  }

  #shop-filter-buttons,
  #filter-buttons,
  #category-filters,
  .category-filter-bar,
  .proj-filter-container,
  .shop-filter-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 2px 8px !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none !important;
  }

  #shop-filter-buttons::-webkit-scrollbar,
  #filter-buttons::-webkit-scrollbar,
  #category-filters::-webkit-scrollbar,
  .category-filter-bar::-webkit-scrollbar,
  .proj-filter-container::-webkit-scrollbar,
  .shop-filter-container::-webkit-scrollbar {
    display: none !important;
  }

  #shop-filter-buttons > *,
  #filter-buttons > *,
  #category-filters > *,
  .category-filter-bar > *,
  .proj-filter-container > *,
  .shop-filter-container > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    white-space: nowrap !important;
  }

  /* ---------- Cards ---------- */
  .project-card,
  .product-item {
    border-radius: 20px !important;
  }

  #projects .project-card .p-6,
  #shop .product-item .p-5 {
    padding: 16px !important;
  }

  /* ---------- Forms ---------- */
  input,
  select,
  textarea {
    max-width: 100% !important;
    font-size: 16px !important; /* prevent iOS auto zoom */
  }

  form .grid {
    min-width: 0;
  }

  /* Store sort/search becomes readable instead of cramped side-by-side. */
  #sort-select {
    width: 100% !important;
  }

  #search-input {
    width: 100% !important;
  }

  /* ---------- Tables ---------- */
  .overflow-x-auto,
  .gn-table-container,
  .gn-table-wrapper {
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  table {
    max-width: none !important;
  }

  /* ---------- Modals / drawers ---------- */
  #quickview-modal > div,
  #project-modal > div,
  [role="dialog"] {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  #quickview-modal > div,
  #project-modal > div {
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /* ---------- Floating contacts ---------- */
  .fixed.bottom-6.right-6,
  .fixed.bottom-5.right-5 {
    right: 10px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    gap: 7px !important;
    z-index: 38 !important;
  }

  .fixed.bottom-6.right-6 > a,
  .fixed.bottom-6.right-6 > button,
  .fixed.bottom-5.right-5 > a,
  .fixed.bottom-5.right-5 > button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .fixed.bottom-6.right-6 .animate-bounce,
  .fixed.bottom-5.right-5 .animate-bounce {
    animation: none !important;
  }

  /* ---------- Decorative shapes must never create apparent page width ---------- */
  main section {
    max-width: 100%;
  }

  /* ---------- Footer ---------- */
  .site-footer {
    padding-top: 44px !important;
    padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 520px) {
  /* Store toolbar: sort + search stack vertically. */
  #shop-filter-buttons + .flex,
  #filter-buttons + .relative,
  #filter-buttons + .flex {
    width: 100% !important;
  }

  #shop-filter-buttons + .flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 9px !important;
  }

  #shop-filter-buttons + .flex > * {
    width: 100% !important;
  }

  /* Compact topbar on narrow phones while retaining hotline access in header/menu. */
  .site-topbar {
    min-height: 0 !important;
  }

  .site-topbar .cms-address {
    max-width: 48vw;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
  }
}

@media (max-width: 360px) {
  #main-site-header .brand-title,
  .site-header .brand-title {
    font-size: 12.5px !important;
  }

  #main-site-header .brand-sub,
  .site-header .brand-sub {
    display: none !important;
  }

  #projects > div > .flex:first-child,
  #shop > div > .flex:first-child {
    padding: 18px 14px !important;
  }
}