/* ============================================================
   HOMIES — Mobile Fixes
   Add to every HTML page AFTER style.css:
   <link rel="stylesheet" href="css/mobile.css">

   All rules use max-width: 860px so desktop is NEVER affected.
   ============================================================ */

/* ── Hide mobile nav on desktop — ALWAYS ────────────────── */
.mobile-nav { display: none; }

/* ── Navigation bar ─────────────────────────────────────── */
@media (max-width: 860px) {
  .nav-inner {
    padding: 0 16px;
    gap: 12px;
  }

  /* Hide text nav links on small screens — show hamburger-style below */
  .nav-links {
    display: none;
  }

  /* Show a compact bottom nav bar instead on mobile */
  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--wh);
    border-top: 1px solid var(--g200);
    z-index: 200;
    height: 60px;
    padding: 0 8px;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    text-decoration: none;
    color: var(--g400);
    font-size: 0.625rem;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    padding: 8px 4px;
    border-radius: var(--r-sm);
    transition: color 0.15s;
  }

  .mobile-nav-item.active {
    color: var(--or);
  }

  .mobile-nav-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  /* Add bottom padding to page content so it doesn't sit behind bottom nav */
  body {
    padding-bottom: 60px;
  }

  /* Adjust sticky bars to sit above bottom nav */
  .sticky-bar {
    bottom: 60px !important;
    bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }

  .ld-sticky {
    bottom: 60px !important;
    bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }

  .wa-bar {
    bottom: 60px !important;
    bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }

  .action-bar {
    bottom: 60px !important;
    bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }
}

/* ── Upload images grid ──────────────────────────────────── */
@media (max-width: 860px) {
  .upload-grid {
    /* 2 columns on mobile instead of 5 */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }

  /* Make the first slot span full width as the hero/main photo */
  .upload-grid .upload-slot:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16/9;
  }

  /* Keep remaining slots square */
  .upload-grid .upload-slot:not(:first-child) {
    aspect-ratio: 1;
  }
}

/* ── Room details form ───────────────────────────────────── */
@media (max-width: 860px) {
  /* Stack the city/state 2-col row */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0;
  }

  /* Stack the 3-col DOB row */
  .form-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }

  /* On very small screens, stack DOB fully */
  @media (max-width: 400px) {
    .form-row-3 {
      grid-template-columns: 1fr !important;
    }
  }

  /* Postcode field — full width on mobile */
  #zip {
    max-width: 100% !important;
  }

  /* Room details sections */
  .rd-wrap {
    padding: 24px 16px 120px;
  }

  .rd-section {
    padding: 18px 16px;
  }
}

/* ── Activity page split panel ───────────────────────────── */
@media (max-width: 860px) {
  .activity-layout {
    display: block !important;
    position: relative;
  }

  /* Detail panel hidden by default on mobile — slides in on tap */
  .detail-panel {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    bottom: 60px !important;
    z-index: 300;
    border-radius: 0 !important;
    border: none !important;
    overflow-y: auto;
    background: var(--wh);
    animation: slideInRight 0.25s ease;
  }

  .detail-panel.mobile-open {
    display: flex !important;
    flex-direction: column;
  }

  @keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0.5; }
    to   { transform: translateX(0);    opacity: 1; }
  }

  /* Back button — shown inside detail panel on mobile */
  .mobile-detail-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: var(--wh);
    border-bottom: 1px solid var(--g100);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--g600);
    cursor: pointer;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .mobile-detail-back:active {
    background: var(--g50);
  }
}

/* ── General mobile polish ───────────────────────────────── */
@media (max-width: 860px) {
  /* Bigger tap targets for list items */
  .a-item {
    padding: 16px !important;
  }

  /* Filter panel full width on mobile */
  .filter-panel {
    width: 100% !important;
    padding: 20px 16px;
  }

  /* Modal padding on mobile */
  .modal-overlay {
    padding: 16px !important;
    align-items: flex-end !important;
  }

  .modal-box {
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
    padding: 28px 20px 32px;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Auth pages */
  .auth-card {
    padding: 32px 24px;
    border-radius: var(--r-xl);
    box-shadow: none;
    border: none;
  }

  .auth-wrap {
    align-items: flex-start;
    padding: 16px;
  }

  /* Page wraps — tighter padding on mobile */
  .page-wrap,
  .ps-wrap,
  .rd-wrap,
  .pref-wrap,
  .act-wrap,
  .ld-wrap,
  .tp-wrap,
  .profile-body,
  .ui-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Properties page card */
  .prop-card-body {
    padding: 16px;
  }

  /* Home page cards full width */
  .home-cards {
    max-width: 100% !important;
  }

  /* Profile header less padding */
  .profile-header {
    padding: 32px 16px;
  }

  /* Listing detail image height */
  .img-carousel-track,
  .img-carousel .img-carousel-track {
    height: 220px !important;
  }

  /* IC grid on mobile */
  .ic-grid {
    grid-template-columns: 1fr !important;
  }

  /* Prop stage full width */
  #stage {
    max-width: 100% !important;
  }

  /* Prop CTA buttons */
  .prop-cta {
    max-width: 100% !important;
    padding: 0 16px;
  }
}

/* ── Very small screens (360px Android budget phones) ────── */
@media (max-width: 380px) {
  .nav-logo-text {
    display: none;
  }

  .tab-bar {
    width: 100% !important;
  }

  .tab-btn {
    padding: 8px 12px !important;
    font-size: 0.8125rem !important;
  }

  h1 {
    font-size: 1.5rem !important;
  }
}