/* ==============================================================
   Vistaarly · assets/css/responsive.css
   -----------------------------------------------------------------
   All responsive rules live here (spec point 5: keep media queries
   in their own file, not mixed into the base stylesheet). Loaded
   AFTER global.css and any page-specific CSS so it can override.

   Breakpoints:
     xs  < 480
     sm  < 640
     md  < 900
     lg  < 1200
     xl  >=1200
   ============================================================== */

/* ---------- Header / nav ---------- */
/* NOTE: breakpoint intentionally matches the 1024px breakpoint that
   components/nav-header.css uses to switch .v-nav-primary on — these two
   breakpoints must always stay in sync, or there's a dead zone where
   neither the desktop nav nor the mobile hamburger is visible. */
@media (max-width: 1023px) {
  .v-header-inner { padding: 12px 16px; }
  .v-nav-primary { display: none; }
  .v-mobile-toggle { display: inline-flex !important; }
  .v-account-name { display: none; }
  .v-brand-name { font-size: 1.05rem; }
}
@media (min-width: 1024px) {
  .v-mobile-toggle { display: none !important; }
  .v-mobile-drawer { display: none; }
}

/* ---------- Browse layout ---------- */
/* NOTE: .browse-filters position override moved into browse.css itself
   (same file that sets position: sticky in the first place) to avoid
   a cross-file load-order race. Only the grid-column collapse stays here. */
@media (max-width: 900px) {
  .browse-layout { grid-template-columns: 1fr !important; }
}

/* ---------- Listing card grid: 4 → 3 → 2 → 1 ---------- */
.listing-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .listing-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px)  { .listing-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px)  { .listing-grid { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Plans grid ---------- */
@media (max-width: 900px) {
  .plans-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Listing detail split ---------- */
@media (max-width: 1024px) {
  .listing-detail { grid-template-columns: 1fr !important; }
  .listing-detail-side { position: static !important; }
}

/* ---------- Admin shell ---------- */
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr !important; }
  .admin-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 280px; z-index: 200;
    transform: translateX(-100%); transition: transform .28s ease;
  }
  body.admin-mobile-open .admin-sidebar { transform: translateX(0); }
  body.admin-mobile-open::before {
    content: ''; position: fixed; inset: 0; background: rgba(11,15,25,0.5); z-index: 190;
  }
  .admin-mobile-toggle { display: inline-flex !important; }
}
@media (min-width: 901px) { .admin-mobile-toggle { display: none !important; } }

/* ---------- Paywall ---------- */
@media (max-width: 600px) {
  .v-paywall { padding: 32px 20px; }
  .v-paywall h2 { font-size: 1.4rem; }
}

/* ---------- Footer ---------- */
@media (max-width: 900px) {
  .v-footer-inner { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
}
@media (max-width: 520px) {
  .v-footer-inner { grid-template-columns: 1fr !important; }
}

/* ---------- Booking select-tier ---------- */
@media (max-width: 700px) {
  .select-tier-page { padding: 20px 16px !important; }
}

/* ---------- Profile top action bar ---------- */
@media (max-width: 640px) {
  .v-profile-action-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .v-profile-action-bar .v-btn { width: 100%; justify-content: center; }
}

/* ---------- Landing page: sections had desktop-only padding
   (80-100px top/bottom) with no mobile override, wasting screen
   space and pushing content down needlessly on phones. ---------- */
@media (max-width: 640px) {
  .v-section-bleed { padding: 44px 16px; }
  .v-section { padding: 56px 16px; }
  .v-section-dark { padding: 56px 16px; }
  .v-final-cta { padding: 56px 16px; }
  .v-hero { padding: 40px 16px 56px; }
  .v-section-header { margin-bottom: 36px; }
}

/* ==========================================================
   HERO SEARCH BAR — SINGLE SOURCE OF TRUTH (all breakpoints)
   -----------------------------------------------------------
   Desktop base lives in hero.css (pill shape, icon centered via
   top:50%, button floating absolute-right). This block is the
   ONLY place that overrides it for smaller screens. Loaded last
   (responsive.css), so it always wins. Order below = mobile-first
   inside each range: 640px first, then the narrower 480px range
   refines it further — nothing here touches desktop (>640px).
   ========================================================== */

/* ---- ≤640px: button drops out of the pill, stacks full-width
   underneath instead of floating absolute — bigger tap target,
   nothing overlapping. ---- */
@media (max-width: 640px) {
  .v-hero-search {
    max-width: 100%;
  }
  .v-hero-search-input {
    padding: 14px 16px 14px 44px;
    border-radius: 14px;
    font-size: 16px; /* keep >=16px or iOS Safari auto-zooms on focus */
  }
  .v-hero-search::before {
    left: 16px;
    font-size: 14px;
    /* top: 50% + translateY(-50%) inherited from hero.css still
       centers correctly here because .v-hero-search-btn becoming
       position:static adds height BELOW the input — but the icon
       is only ever meant to track the input, so pin it explicitly
       to avoid relying on that coincidence as sizes change: */
    top: 25px;
    transform: none;
  }
  .v-hero-search-btn {
    position: static;
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 14px;
    border-radius: 12px;
    font-size: 15px;
  }
  #landing-search-results {
    top: calc(100% + 4px);
  }
}

/* ---- ≤480px: tighter padding/sizing for narrow phones. Refines
   the 640px rules above; does not repeat anything unnecessarily. ---- */
@media (max-width: 480px) {
  .v-hero-search-input {
    padding-left: 44px;
    padding-right: 16px;
    text-align: center;
  }
  .v-hero-search-input::placeholder {
    text-align: center;
  }
  .v-hero-search::before {
    left: 16px;
    font-size: 13px;
    top: 22px; /* input shrinks slightly at this width, re-pin */
  }
  .v-hero-search-btn {
    padding: 0 14px;
    font-size: 13px;
  }
}

/* ---------- Featured-influencer carousel: see index-featured.css
   for the full mobile treatment (card width, snap behaviour, touch
   handling) — kept together in one file now instead of split
   across two, since it's all one component. ---------- */

@media (max-width: 640px) {
  .v-chip-row {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; flex-wrap: nowrap !important;
  }
  .v-chip-row::-webkit-scrollbar { display: none; }
}