/* ═══════════════════════════════════════════════════════════════
   Pagex – mobile-first responsive layer
   Base styles  →  mobile  (no media query)
   @media min-width  →  desktop enhancement
   Loaded last, after Bootstrap + pgx_129.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Global ─────────────────────────────────────────────────── */
html,
body { overflow-x: hidden; }

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

/* ── 2. Listing card images – consistent height ─────────────────
   No explicit height is set on .listing-one__image img so cards
   vary in height depending on the uploaded image ratio.          */
.listing-one__image img:not(.smallogo) {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  .listing-one__image img:not(.smallogo) {
    height: 220px;
  }
}
@media (min-width: 992px) {
  .listing-one__image img:not(.smallogo) {
    height: 250px;
  }
}

/* ── 3. Business page header (free + premium pages) ─────────────
   Bootstrap col-md-* already stacks on mobile.
   Fix the share button float and share button width.             */
.header-container .col-md-2 .btn,
.header-container .col-md-2 button {
  float: none !important;
  width: 100%;
}
@media (min-width: 768px) {
  .header-container .col-md-2 .btn,
  .header-container .col-md-2 button {
    float: right !important;
    width: auto;
  }
}

/* ── 4. Professional / similar-listing card ─────────────────────
   Image column (col-md-4) stacks to full-width on mobile;
   without a height constraint it can be huge.                    */
.professional-card .col-md-4 img,
.professional-card .professional-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
@media (min-width: 768px) {
  .professional-card .col-md-4 img,
  .professional-card .professional-image {
    height: 100%;
    min-height: 140px;
  }
}

/* ── 5. Touch targets ───────────────────────────────────────────
   Minimum 44 × 44 px for comfortable tapping on mobile.         */
.btn,
.btn-theme,
.btn-action,
.pgx-share-btn,
.fpgx-card-header,
.pgx-carousel-btn,
a.btn,
button { min-height: 44px; }

/* ── 6. Horizontal-scroll tables ────────────────────────────────
   Prevents tables from breaking the viewport on small screens.  */
.table-responsive-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 7. Modal positioning on very small screens ─────────────────  */
@media (max-width: 575px) {
  .modal-dialog {
    margin: 8px;
    max-width: calc(100vw - 16px);
  }
}

/* ── 8. Typography: fluid scale on mobile ───────────────────────
   Clamp ensures text is readable on every screen without
   overriding desktop sizes (desktop picks the max value).       */
h1, .pgx-title       { font-size: clamp(1.3rem, 5vw,  2.5rem); }
h2                   { font-size: clamp(1.1rem, 4vw,  2rem);   }
h3                   { font-size: clamp(1rem,   3vw,  1.5rem); }

/* ── 9. Padding on small containers ────────────────────────────
   Bootstrap container has 12px gutters at <576px; give a bit
   more breathing room for the custom content sections.          */
@media (max-width: 575px) {
  .container,
  .container-xxl { padding-left: 14px; padding-right: 14px; }
}

/* ── 10. Swiper card: no overflow clipping issue ───────────────  */
.swiper-slide .listing-one__single {
  min-width: 0 !important; /* override the 25vw min-width */
  width: 100%;
}