/* ==========================================================
   Suncore Mobile Fixes
   ========================================================== */

@media (max-width: 768px) {

  /* ── Utility grid overrides ─────────────────────────── */
  .mob-2col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .mob-1col {
    grid-template-columns: 1fr !important;
  }
  .mob-stack {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  /* ── Hero CTA buttons: stack vertically ─────────────── */
  .mob-btn-stack {
    flex-direction: column !important;
    white-space: normal !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .mob-btn-stack a,
  .mob-btn-stack button {
    text-align: center;
    justify-content: center;
    display: block;
  }

  /* ── hero-feature-grid (inhouse) ────────────────────── */
  .hero-feature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Enquiry form: reduce large padding on mobile ───── */
  .pg-enquiry-wrap {
    padding: 22px 14px !important;
    margin: 16px 0 !important;
    border-radius: 12px !important;
  }
  .pg-enquiry {
    padding: 18px 12px !important;
  }
  .pg-enquiry-wrap h3 {
    font-size: 18px !important;
  }
  .pg-enquiry-wrap p.sub {
    margin-bottom: 16px !important;
  }

  /* ── Form rows: single column on mobile ─────────────── */
  .enq-row {
    grid-template-columns: 1fr !important;
  }

  /* ── Tables: horizontal scroll on mobile ────────────── */
  .spec-table,
  .sel-table,
  .comp-table,
  .ts-spec-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .spec-table th, .spec-table td,
  .sel-table th, .sel-table td,
  .comp-table th, .comp-table td,
  .ts-spec-table th, .ts-spec-table td {
    min-width: 90px;
    white-space: normal;
    word-break: break-word;
  }

  /* ── about.html: Our Mission section gap fix ─────────── */
  .ot-about-space-3 {
    padding-top: 60px !important;
    padding-bottom: 50px !important;
    margin-top: 0 !important;
  }

  /* ── service page pg container side padding ──────────── */
  div.pg {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ── Very small screens (<480px): mob-2col stays 2-col ─── */
@media (max-width: 480px) {
  .mob-2col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ── our-solutions & about: Bootstrap col-xl fix ─────────
   col-xl-* without smaller breakpoint class stays auto-width
   on mobile in Bootstrap 5. Force full-width below xl.     */
@media (max-width: 1199px) {
  .col-xl-4:not([class*="col-lg"]):not([class*="col-md"]):not([class*="col-sm"]),
  .col-xl-5:not([class*="col-lg"]):not([class*="col-md"]):not([class*="col-sm"]),
  .col-xl-7:not([class*="col-lg"]):not([class*="col-md"]):not([class*="col-sm"]),
  .col-xl-8:not([class*="col-lg"]):not([class*="col-md"]):not([class*="col-sm"]) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}