/* Responsive CSS for Relowcaters */

/* Desktop / Laptop (1024px to 1440px handled by max-width on .container) */

/* Tablet Landscape */
@media (max-width: 1024px) {
  .section {
    padding: 5rem 0;
  }
  
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet Portrait */
@media (max-width: 1100px) {
  .nav-links, .header-cta { display: none; }
  .mobile-menu-btn { display: block; }
  .mobile-drawer { display: block; position: fixed; top: 0; right: -100%; width: min(86%, 400px); height: 100vh; background: var(--white); z-index: 2000; box-shadow: -10px 0 30px rgba(0,0,0,.12); transition: right .4s ease; padding: 2rem; overflow-y: auto; }
  .mobile-drawer.open { right: 0; }
  .mobile-overlay { display: block; position: fixed; inset: 0; height: 100vh; background: rgba(17,24,39,.55); backdrop-filter: blur(4px); z-index: 1999; opacity: 0; visibility: hidden; transition: var(--transition); }
  .mobile-overlay.open { opacity: 1; visibility: visible; }
  .mobile-drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
  .close-menu-btn { background: none; border: 0; font-size: 2rem; color: var(--dark); cursor: pointer; }
  .mobile-nav { display: flex; flex-direction: column; gap: 1.25rem; }
  .mobile-nav a { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; color: var(--dark); display: block; }
  .mobile-dropdown-menu { padding-left: 1rem; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: .85rem; }
  .mobile-dropdown-menu a { font-size: .95rem; font-weight: 500; color: var(--text); }
}

@media (max-width: 768px) {
  .section {
    padding: 4rem 0;
  }

  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-2 {
    grid-template-columns: 1fr;
  }

  /* Header adjustments for tablet/mobile */
  .nav-links, .header-cta {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .header.scrolled {
    padding: 0.75rem 0;
  }

  /* Mobile Drawer (implemented via JS class) */
  .mobile-drawer {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background: var(--white);
    z-index: 2000;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    transition: right 0.4s ease;
    padding: 2rem;
    overflow-y: auto;
  }

  .mobile-drawer.open {
    right: 0;
  }

  .mobile-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
  }

  .mobile-overlay.open {
    opacity: 1;
    visibility: visible;
  }

  .mobile-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }

  .close-menu-btn {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--dark);
    cursor: pointer;
  }

  .mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .mobile-nav a {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark);
    display: block;
  }

  .mobile-nav a:hover {
    color: var(--primary);
  }

  .mobile-dropdown-menu {
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .mobile-dropdown-menu a {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
  }
}

@media (max-width: 1024px) {
  .partner-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .partner-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-logo { min-height: 100px; padding: .85rem; }
  .partner-logo img { height: 60px; }
  .realtor-track-group { gap: .7rem; padding-right: .7rem; }
  .site-footer { padding-top: 3.5rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

/* Large Mobile */
@media (max-width: 430px) {
  .section {
    padding: 3.5rem 0;
  }
  
  .grid-2, .grid-3, .grid-4, .grid-auto {
    grid-template-columns: 1fr;
  }
  
  .btn {
    width: 100%;
  }
}

/* Small Mobile */
@media (max-width: 320px) {
  .container {
    padding: 0 1rem;
  }
  
  .card {
    padding: 1.5rem;
  }
}