/* ============================================================
   DENTAL 2026 - RESPONSIVE CSS
   ============================================================ */

/* ---- TABLET (max 1024px) ---- */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .search-layout {
    grid-template-columns: 240px 1fr;
  }
}

/* ---- TABLET SMALL (max 768px) ---- */
@media (max-width: 768px) {
  :root {
    --header-h: 60px;
  }

  #top-bar { display: none; }

  /* Header */
  .header-nav { display: none; }
  .hamburger { display: flex; }
  .btn-login, .btn-register { display: none; }

  .btn-post span { display: none; }
  .btn-post {
    width: 38px; height: 38px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }

  /* Hero */
  #hero-search { padding: 40px 0 30px; }
  .hero-text h1 { font-size: 28px; }
  .hero-text p { font-size: 15px; }

  .search-fields {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .search-card { border-radius: var(--radius-lg); }
  .search-field { padding: 0; }

  .hero-stats {
    gap: 12px;
    flex-direction: column;
    align-items: flex-start;
  }
  .stat-sep { display: none; }

  /* Categories */
  .cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }
  .cat-card { padding: 18px 12px; }
  .cat-icon-wrap { width: 50px; height: 50px; }
  .cat-icon-wrap i { font-size: 20px; }

  /* Items grid */
  .items-grid { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* Search layout */
  .search-layout { grid-template-columns: 1fr; }
  .search-sidebar {
    position: static;
    display: none;
  }
  .search-sidebar.mobile-open { display: block; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-body { padding: 36px 0 28px; }

  /* User layout */
  .user-layout { grid-template-columns: 1fr; }
  .user-sidebar { display: none; }

  /* Mobile bottom nav */
  #mobile-bottom-nav { display: block; }
  footer#main-footer { padding-bottom: 64px; }
  .site-main { padding-bottom: 64px; }

  /* Section */
  #home-categories { padding: 40px 0; }
  #home-featured { padding: 36px 0 0; }
  #home-recent { padding: 32px 0 40px; }
  .section-header h2 { font-size: 20px; }

  /* Mobile filter button */
  .mobile-filter-btn { display: flex; }

  /* Page */
  .page-wrap { padding: 20px; border-radius: var(--radius); }
  .user-content { padding: 20px; }
}

/* ---- MOBILE (max 480px) ---- */
@media (max-width: 480px) {
  .items-grid { grid-template-columns: 1fr; }

  .cat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .cat-icon-wrap { width: 42px; height: 42px; }
  .cat-card { padding: 14px 8px; gap: 8px; }
  .cat-card h3 { font-size: 11px; }

  .hero-text h1 { font-size: 24px; }
  .hero-badge { font-size: 11px; padding: 5px 12px; }

  .search-card { padding: 6px; border-radius: var(--radius); }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .xcontent { flex-direction: column; }
  .xcontent .side { width: 100%; border-right: none; border-bottom: 1px solid var(--grey-200); max-height: 160px; }
  .xcontent .box .cat1 { width: calc(33.33% - 7px); }

  .user-content-title { font-size: 16px; }
}

/* ---- PRINT ---- */
@media print {
  #top-bar, #main-header, #mobile-bottom-nav,
  #mobile-drawer, #mobile-overlay, footer#main-footer { display: none !important; }
}