/* ============================================================
   RateMyVSO — Responsive / Mobile Styles
   ============================================================ */

/* Hide mobile-only auth links on desktop */
.nav-auth-mobile { display: none; }
@media (max-width: 767px) {
  .nav-auth-mobile { display: list-item; }
}

/* ── Tablet (768px – 1023px) ── */
@media (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .profile-columns { grid-template-columns: 1fr; }
  .profile-sidebar { order: -1; }

  /* Find-rep filters: 3 columns on tablet */
  .filters-bar.filters-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }

  .container { padding: 0 1rem; }
  .page-content { padding: 1rem 0; }

  .hero { padding: 2.5rem 0 2rem; }
  .hero p { font-size: 1rem; }

  /* Hero search: stack as 2-col pairs */
  .search-box {
    grid-template-columns: 1fr 1fr;
  }

  /* Find-rep filters: 2 columns on mobile */
  .filters-bar.filters-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Filters fallback */
  .filters-bar:not(.filters-grid) { flex-direction: column; align-items: stretch; }
  .filter-group { min-width: auto; }

  /* Nav */
  .navbar .container { flex-wrap: wrap; }
  .nav-toggle { display: block; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; padding: .25rem; line-height: 1; }
  .navbar-links {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: .5rem 1rem;
    background: var(--color-primary);
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    z-index: 101;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
  }
  .navbar-links.open { display: flex; }
  .navbar-links li a {
    display: block;
    padding: .65rem 0;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .navbar-links li:last-child a { border-bottom: none; }

  /* On mobile, hide the separate auth div — links are cloned into navbar-links */
  .nav-auth { display: none !important; }

  .grid-3, .grid-2 { grid-template-columns: 1fr; }

  /* Profile hero */
  .profile-hero-inner { flex-direction: column; align-items: flex-start; }
  .profile-icon { width: 56px; height: 56px; font-size: 1.5rem; }
  .profile-info h1 { font-size: 1.3rem; }

  /* Rating panel */
  .rating-panel-top { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .rating-big { display: flex; align-items: center; gap: 1rem; }
  .rating-big .score-num { font-size: 2.2rem; }

  /* Score bar labels */
  .score-bar-label { width: 90px; font-size: .72rem; }

  /* Modal */
  .modal { max-height: 95vh; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .modal-overlay { align-items: flex-end; padding: 0; }

  /* Categories grid → single column */
  .categories-grid { grid-template-columns: 1fr; }

  /* Review categories inline */
  .review-categories { display: none; }

  /* Tab bar */
  .tab-btn { padding: .5rem .875rem; font-size: .825rem; }

  .info-row { gap: 1rem; }

  /* Breadcrumb */
  .breadcrumb { font-size: .75rem; flex-wrap: wrap; }

  /* Toast */
  .toast-container { left: 1rem; right: 1rem; bottom: 1rem; }
  .toast { max-width: 100%; }
}

/* ── Small phones (< 480px) ── */
@media (max-width: 479px) {
  .filters-bar.filters-grid {
    grid-template-columns: 1fr;
  }
  .filters-grid .filter-group input,
  .filters-grid .filter-group select,
  .filters-grid .filter-group .btn {
    width: 100%;
    font-size: 1rem;
    padding: .6rem .75rem;
  }
}

/* ── Print ── */
@media print {
  .navbar, .hero .search-box, .filters-bar, .pagination,
  .btn, .modal-overlay, .toast-container { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}