/* ================================================================
   SAHAM — mobile.css  Comprehensive Mobile & Responsive Fixes
   Load LAST — after styles.css and utilities.css
   ================================================================ */

/* ================================================================
   0. GLOBAL OVERFLOW PROTECTION
   ================================================================ */
html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; max-width: 100vw; }
section, main, header, footer, nav { overflow-x: hidden; max-width: 100%; }
img, video, svg, canvas { max-width: 100%; height: auto; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Prevent iOS zoom on input focus */
input, textarea, select { font-size: max(16px, 1rem); }

/* Minimum touch target */
.button, .btn, a.button, button.button { min-height: 48px; }

/* ================================================================
   1. NAVIGATION DRAWER — Ensure drawer is always full viewport
   ================================================================ */
#nav-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important; /* dynamic viewport height for mobile browsers */
  z-index: 1000 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ensure the drawer's inner content container fills the height */
#nav-drawer > div {
  min-height: 100%;
  box-sizing: border-box;
}

/* On very small screens reduce the large menu font size */
@media (max-width: 479px) {
  #nav-drawer button[id^="acc-"],
  #nav-drawer li > a[style*="font-size:1.5rem"],
  #nav-drawer li > a[style*="font-size: 1.5rem"] {
    font-size: 1.25rem !important;
    padding: 1rem 0 !important;
  }
}

/* ================================================================
   2. HERO SECTION — reduce height & padding on mobile
   ================================================================ */
@media (max-width: 767px) {
  #hero {
    min-height: auto !important;
    padding-top: 5.5rem !important;
    padding-bottom: 2.5rem !important;
    align-items: flex-start !important;
    display: block !important;
  }
  #hero .container { padding-top: 0.5rem !important; }
  section.py-28 { padding-top: 5rem !important; padding-bottom: 2.5rem !important; }
  section.py-28 .container.pt-12 { padding-top: 0.5rem !important; }
}

/* ================================================================
   3. TYPOGRAPHY — Scale down on mobile
   ================================================================ */
@media (max-width: 639px) {
  .hero-title {
    font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
  }
  .section-title {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important;
    line-height: 1.2 !important;
  }
  .section-title-rolling-primary,
  .section-title-rolling-secondary,
  .section-title-rolling-custom {
    font-size: clamp(1.25rem, 6vw, 1.875rem) !important;
    -webkit-text-stroke-width: 1px !important;
    line-height: 1.15 !important;
  }
  .text-4xl  { font-size: 1.75rem !important; }
  .text-3xl  { font-size: 1.4rem  !important; }
  .text-2xl  { font-size: 1.15rem !important; }
  .text-xl   { font-size: 1rem    !important; }
  .text-lg   { font-size: 0.95rem !important; }
  /* large inline text numbers (stats) */
  .text-\[3rem\]   { font-size: 2rem !important; }
  .text-\[3\.5rem\] { font-size: 2.25rem !important; }
}

/* ================================================================
   4. SECTION VERTICAL SPACING — Reduce on mobile
   ================================================================ */
@media (max-width: 639px) {
  .py-20    { padding-top: 3rem    !important; padding-bottom: 3rem    !important; }
  .py-section { padding-top: 3rem !important; padding-bottom: 3rem    !important; }
  .py-16    { padding-top: 2.5rem  !important; padding-bottom: 2.5rem  !important; }
  .py-12    { padding-top: 2rem    !important; padding-bottom: 2rem    !important; }
  .mb-16    { margin-bottom: 2rem  !important; }
  .mb-12    { margin-bottom: 1.75rem !important; }
  .mb-10    { margin-bottom: 1.5rem  !important; }
  .pt-12    { padding-top: 0.75rem !important; }
}

/* ================================================================
   5. CARD PADDING — Reduce on small screens
   ================================================================ */
@media (max-width: 639px) {
  .p-10  { padding: 1.5rem  !important; }
  .p-8   { padding: 1.25rem !important; }
  .p-6   { padding: 1rem    !important; }
  .px-12 { padding-left: 1.5rem  !important; padding-right: 1.5rem  !important; }
  .px-8  { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

/* ================================================================
   6. GRID COLLAPSE — ALL multi-column grids
   ================================================================ */

/* md:, lg:, xl: grids all collapse to 1 column below 768px */
@media (max-width: 767px) {
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3,
  .grid.md\:grid-cols-4,
  .grid.lg\:grid-cols-2,
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4,
  .grid.xl\:grid-cols-3,
  .grid.xl\:grid-cols-4 { grid-template-columns: 1fr !important; }
}

/* sm: grids collapse below 480px */
@media (max-width: 479px) {
  .grid.sm\:grid-cols-2,
  .grid.sm\:grid-cols-3 { grid-template-columns: 1fr !important; }
  /* Allow 2-col for tiny stat grids */
  .grid.sm\:grid-cols-2.lg\:grid-cols-3,
  .grid.sm\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns: 1fr 1fr !important; }
}

/* gap-16 and gap-12 are too large on mobile */
@media (max-width: 639px) {
  .gap-16 { gap: 2rem !important; }
  .gap-12 { gap: 1.75rem !important; }
  .gap-10 { gap: 1.5rem !important; }
}

/* ================================================================
   7. FLEX ROW → COLUMN (section heading + button combos)
   ================================================================ */
@media (max-width: 639px) {
  .flex.items-center.justify-between {
    flex-direction: column  !important;
    align-items: flex-start !important;
    gap: 0.75rem            !important;
  }
  .grid.gap-12.lg\:grid-cols-2,
  .grid.gap-16.lg\:grid-cols-2,
  .grid.gap-12.md\:grid-cols-2 { grid-template-columns: 1fr !important; }
}

/* ================================================================
   8. TICKER — Prevent horizontal overflow
   ================================================================ */
.ticker-container, #logos-ticker > .ticker-container { overflow: hidden; width: 100%; white-space: nowrap; }
.ticker-wrap, .ticker-track {
  display: inline-flex; align-items: center; white-space: nowrap;
  animation: saham-ticker 30s linear infinite; will-change: transform;
}
.ticker-wrap:hover, .ticker-track:hover { animation-play-state: paused; }
@keyframes saham-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ================================================================
   9. ACHIEVEMENT & BANNER CARD MIN-HEIGHTS
   ================================================================ */
@media (max-width: 639px) {
  .achievement-card            { min-height: auto !important; }
  [style*="min-height: 220px"] { min-height: auto !important; }
  [style*="min-height: 280px"] { min-height: 140px !important; }
  [style*="min-height: 300px"] { min-height: auto !important; }
  [style*="min-height: 350px"] { min-height: 200px !important; }
  a[style*="min-height"] { min-height: 160px !important; padding: 1.5rem !important; }
  .text-4xl.font-700.max-w-xs  { font-size: 1.75rem !important; }
}

/* ================================================================
   10. FORMS — Full-width inputs, no iOS zoom
   ================================================================ */
@media (max-width: 639px) {
  form input, form textarea, form select { width: 100% !important; }
  form .grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   11. FAQ ACCORDION
   ================================================================ */
@media (max-width: 639px) {
  .faq-question {
    font-size: 0.9rem    !important;
    gap: 0.75rem;
    align-items: flex-start !important;
    padding-top: 0.25rem;
  }
  .faq-question span   { flex: 1; line-height: 1.4; }
  .faq-arrow           { flex-shrink: 0; margin-top: 0.2rem; }
  .faq-answer          { font-size: 0.875rem !important; line-height: 1.65; }
  .faq-item            { padding: 1rem 0; }
}

/* ================================================================
   12. TIMELINE — Mobile dot size
   ================================================================ */
@media (max-width: 639px) {
  .absolute.-left-\[41px\] { width: 0.75rem !important; height: 0.75rem !important; left: -1.375rem !important; }
}

/* ================================================================
   13. HEADER — Container padding on mobile
   ================================================================ */
@media (max-width: 639px) {
  header > div, header > [style] { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ================================================================
   14. FOOTER — 2-col on mobile, 1-col on tiny
   ================================================================ */
@media (max-width: 639px) {
  footer > div > div:first-of-type { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
}
@media (max-width: 400px) {
  footer > div > div:first-of-type { grid-template-columns: 1fr !important; }
}

/* ================================================================
   15. VIDEO SHOWCASE CARD
   ================================================================ */
@media (max-width: 639px) {
  [style*="min-height: 350px"] { min-height: 200px !important; }
  .h-20.w-20 { width: 3rem !important; height: 3rem !important; }
}

/* ================================================================
   16. PROJECT CARD ASPECT RATIO
   ================================================================ */
@media (max-width: 639px) {
  .aspect-\[1\.3\] { aspect-ratio: 16 / 10 !important; }
}

/* ================================================================
   17. CONTACT SECTION 2-COL → 1-COL
   ================================================================ */
@media (max-width: 767px) {
  .grid.gap-16.lg\:grid-cols-2 { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
}

/* ================================================================
   18. CTA BUTTONS — Full width on very small screens
   ================================================================ */
@media (max-width: 479px) {
  section .text-center > .button,
  section .text-center > a.button,
  div.text-center > a.button { width: 100%; max-width: 320px; }
}

/* ================================================================
   19. OUR WORK PAGE — Hall of Fame grid (xl:grid-cols-4)
   ================================================================ */
@media (max-width: 767px) {
  .grid.md\:grid-cols-2.xl\:grid-cols-4 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 479px) {
  .grid.md\:grid-cols-2.xl\:grid-cols-4 { grid-template-columns: 1fr !important; }
}

/* ================================================================
   20. WHY SAHAM — md:grid-cols-4 steps section
   ================================================================ */
@media (max-width: 767px) {
  .grid.gap-6.md\:grid-cols-4 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 479px) {
  .grid.gap-6.md\:grid-cols-4 { grid-template-columns: 1fr !important; }
}

/* ================================================================
   21. LIGHT BACKGROUND SECTION (our-work page)
   ================================================================ */
@media (max-width: 639px) {
  .bg-gray-50 { padding-left: 0 !important; padding-right: 0 !important; }
  .bg-gray-50 .container { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Ensure "Other notable projects" list text is readable */
  .grid.gap-4.sm\:grid-cols-2.md\:grid-cols-3 { grid-template-columns: 1fr !important; }
}

/* ================================================================
   22. REFERENCES / CASE STUDY PAGES — 2-col stat panels on mobile
   ================================================================ */
@media (max-width: 639px) {
  /* Stats row — keep 2-col for brevity on small phones */
  .grid.gap-6.sm\:grid-cols-2.lg\:grid-cols-5 { grid-template-columns: 1fr 1fr !important; }
  .grid.gap-6.sm\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns: 1fr 1fr !important; }
  .grid.gap-8.sm\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns: 1fr 1fr !important; }

  /* Main content/image split → stack */
  .grid.gap-12.lg\:grid-cols-2 { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

/* ================================================================
   23. BLOG PAGE — card images
   ================================================================ */
@media (max-width: 639px) {
  /* Blog card header image */
  .h-40 { height: 10rem; }
  /* Blog grid → single column */
  .grid.gap-8.sm\:grid-cols-2.lg\:grid-cols-3 { grid-template-columns: 1fr !important; }
}

/* ================================================================
   24. TESTIMONIALS — 3-col → 1-col on mobile
   ================================================================ */
@media (max-width: 639px) {
  .grid.gap-8.sm\:grid-cols-2.lg\:grid-cols-3.max-w-5xl { grid-template-columns: 1fr !important; }
}

/* ================================================================
   25. PROCESS STEPS — 4-col / 3-col → 2-col → 1-col
   ================================================================ */
@media (max-width: 767px) {
  .grid.gap-8.sm\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns: 1fr 1fr !important; }
  .grid.gap-8.sm\:grid-cols-2.lg\:grid-cols-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 479px) {
  .grid.gap-8.sm\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns: 1fr !important; }
  .grid.gap-8.sm\:grid-cols-2.lg\:grid-cols-3 { grid-template-columns: 1fr !important; }
}

/* ================================================================
   26. COOKIE BANNER — Full width on very small screens
   ================================================================ */
@media (max-width: 479px) {
  #cookie-consent-banner {
    left: 0.75rem !important;
    right: 0.75rem !important;
    bottom: 0.75rem !important;
  }
}

/* ================================================================
   27. PRINT
   ================================================================ */
@media print {
  header, footer, nav { display: none; }
  body { background: white !important; color: black !important; }
}