/* === MOBILE RESPONSIVENESS FIXES (2026-03-29) === */

/* FIX 1: Homepage grids — stack on mobile */
@media (max-width: 600px) {
  .hp4-cards-row, .hp4-cards-container {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .hp4-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }
  .hp4-grid-3, .hp4-grid-5 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  .hp4-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .hp4-grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* FIX 2: Terminal/code blocks — horizontal scroll on mobile */
@media (max-width: 768px) {
  .terminal-window, .terminal-body, pre, code {
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
    word-break: break-all;
  }
  .terminal-body {
    max-width: calc(100vw - 48px);
  }
  .terminal-body div {
    white-space: nowrap;
  }
}

/* FIX 3: Tables — scrollable on mobile */
@media (max-width: 768px) {
  .mmc-table-wrap, .entry-content table, article table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .mmc-table {
    min-width: 500px;
  }
}

/* FIX 4: Blog card grid — single column on mobile */
@media (max-width: 600px) {
  #mmc-blog-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  #mmc-blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* FIX 5: Tap targets — minimum 48x48px */
.mm-mobile-toggle, 
button.mm-mobile-toggle,
.announcement-close,
.footer-social a,
.mmc-cta-btn {
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* FIX 6: Small text — minimum 12px, key elements 14px */
.mmc-phase-pill {
  font-size: 12px !important;
}
@media (max-width: 768px) {
  .mmc-blog-card-excerpt {
    font-size: 14px !important;
  }
  .mmc-blog-card-date {
    font-size: 13px !important;
  }
  .mmc-faq-a, .mmc-callout p, .mmc-table td {
    font-size: 14px !important;
  }
}

/* FIX 7: Main content padding on mobile */
@media (max-width: 768px) {
  main.wp-block-group {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .mmc-post {
    padding: 0 !important;
  }
}