/* ============================================================
   FRONT PAGE — MOBILE OPTIMIZED STYLES
   Applies only below 768px
============================================================ */

@media (max-width: 768px) {

  /* -----------------------------
     TOP STRIP
  ------------------------------ */
  .top-strip {
    padding: 10px 12px;
    gap: 10px;
  }

  .top-search {
    padding: 0 10px;
  }

  .top-search input {
    padding: 8px 12px;
    font-size: .9rem;
  }

  /* -----------------------------
     NAVIGATION
  ------------------------------ */
  .pro-nav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 18px;
  }
  .pro-nav ul::-webkit-scrollbar { display: none; }

  .pro-nav .nav-item {
    white-space: nowrap;
    font-size: .85rem;
  }

  /* -----------------------------
     COLLAPSIBLE SECTIONS
  ------------------------------ */
  .fp-section {
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .fp-toggle-btn {
    width: 100%;
    padding: 14px 16px;
    background: #1a1c27;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size: 1rem;
    color: var(--ink);
    cursor: pointer;
  }

  .fp-arrow {
    font-size: .9rem;
    transition: transform .3s ease;
  }

  .fp-content {
    padding: 14px 0;
  }

  /* -----------------------------
     LOCATION STRIP
  ------------------------------ */
  .location-strip {
    display: block;
    padding: 14px 12px;
  }

  .location-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .pro-filters {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 14px;
  }

  .pro-filters .chip {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
    padding: 10px 8px;
  }

  /* -----------------------------
     BANNERS
  ------------------------------ */
  .banner-wrap {
    display: block;
    padding: 14px 12px;
  }

  .banner-main {
    padding: 14px;
    margin-bottom: 14px;
  }

  .banner-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .banner-grid img {
    border-radius: 8px;
  }

  .banner-side {
    margin-top: 10px;
  }

  /* -----------------------------
     LISTING SECTION
  ------------------------------ */
  .main-layout {
    display: block;
    padding: 12px;
  }

  .card-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .escort-card img {
    aspect-ratio: 2.3 / 3;
  }

  /* -----------------------------
     SIDEBAR (Mobile Always Open)
  ------------------------------ */
  .main-right {
    margin-top: 20px;
  }

  .mini-section {
    padding: 14px;
  }

  .mini-two-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* -----------------------------
     RECOMMENDED LINKS
  ------------------------------ */
  .recommended-links .rec-item img {
    height: 48px;
  }

  /* -----------------------------
     SORTING BAR
  ------------------------------ */
  .pro-sort {
    flex-direction: column;
    gap: 12px;
    text-align: left;
  }

  .sort-select-wrap {
    width: 100%;
  }

}
/* ============================================================
   MOBILE HARD OVERRIDE — FORCE 2 MODELS PER ROW
   This bypasses ALL legacy constraints
============================================================ */

@media (max-width: 768px) {

  /* -----------------------------
     FORCE ROW TO BE FLEXIBLE
  ------------------------------ */
  .card-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* -----------------------------
     FORCE CARD WIDTH (CRITICAL)
  ------------------------------ */
  .card-row > .escort-card {
    flex: 0 0 calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
  }

  /* Safety: nested links */
  .card-row > .escort-card > a {
    display: block;
    width: 100%;
  }

  /* -----------------------------
     KILL ALL DESKTOP LIMITERS
  ------------------------------ */
  .escort-card,
  .listing-block .escort-card,
  .listing-block > .escort-card {
    max-width: none !important;
  }

  /* -----------------------------
     IMAGE CONSISTENCY
  ------------------------------ */
  .escort-card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }

  /* -----------------------------
     SECTION SAFETY
  ------------------------------ */
  .listing-block {
    overflow: hidden;
  }

}
/* ============================================================
   MOBILE — TRUE FULL SCREEN STRETCH
   Edge-to-edge sections + 2 cards per row
============================================================ */

@media (max-width: 768px) {

  /* ===============================
     GLOBAL MOBILE RESET
  =============================== */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ===============================
     FORCE ALL MAJOR SECTIONS TO EDGE
  =============================== */
  .top-strip,
  .main-nav,
  .pro-nav,
  .location-strip,
  .banner-wrap,
  .main-layout {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Remove boxed feeling */
  .banner-main,
  .listing-block,
  .main-left,
  .main-right {
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ===============================
     FORCE 2 MODELS PER ROW (HARD)
  =============================== */
  .card-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .card-row > *,
  .card-row > .escort-card {
    flex: 0 0 calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
  }

  /* Kill all desktop safety limits */
  .escort-card {
    max-width: none !important;
    margin: 0 !important;
  }

  /* ===============================
     IMAGE CONSISTENCY
  =============================== */
  .escort-card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }

  /* ===============================
     LOCATION GRID FULL WIDTH
  =============================== */
  .location-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* ===============================
     BANNERS FULL WIDTH
  =============================== */
  .banner-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* ===============================
     SIDEBAR FULL WIDTH
  =============================== */
  .main-right {
    margin-top: 16px;
    padding: 0;
  }

  .mini-two-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* ===============================
     SORT BAR FULL WIDTH
  =============================== */
  .pro-sort {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }
}

@media (max-width: 768px) {

  .main-left {
    gap: 14px;
  }

  .listing-block {
    padding: 12px;
  }

  .block-head {
    margin-bottom: 8px;
  }

  .banner-wrap {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .location-strip {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}