/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet and below */
@media (max-width: 1024px) {
  .page-with-sidebar {
    grid-template-columns: 1fr var(--sidebar-right);
  }

  .page-with-sidebar .sidebar-left,
  .page-with-sidebar > .home-left-sidebar {
    display: none;
  }

  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }

  .messages-layout {
    grid-template-columns: 1fr;
  }

  .message-view {
    display: none;
  }

  .admin-sidebar {
    position: fixed;
    left: 0;
    top: var(--header-height);
    z-index: var(--z-modal);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  .admin-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
  }

  .admin-sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .admin-menu-toggle {
    display: inline-flex;
  }

  .hero-title {
    font-size: var(--text-4xl);
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --header-height: 52px;
  }

  .page-container {
    padding: var(--sp-3) var(--sp-3);
  }

  .page-with-sidebar {
    grid-template-columns: 1fr;
  }

  .page-sidebar {
    display: none;
  }

  .header-nav {
    display: none;
  }

  .header-search {
    display: none;
  }

  .header-actions .btn {
    display: none;
  }

  .header-actions .user-dropdown {
    display: none;
  }

  .header-actions .notification-bell {
    display: none;
  }

  .header-actions .btn-icon {
    display: none;
  }

  .hamburger-btn {
    display: flex;
  }

  .mobile-nav-backdrop.open,
  .mobile-nav {
    display: block;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    padding: var(--sp-6) var(--sp-4) var(--sp-4);
  }

  .footer-bottom-inner {
    flex-direction: column;
    gap: var(--sp-2);
    text-align: center;
  }

  .profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-5);
  }

  .profile-stats {
    justify-content: center;
  }

  .auth-card {
    padding: var(--sp-5);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .forum-categories-grid {
    grid-template-columns: 1fr;
  }

  .page-title-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  h1 {
    font-size: var(--text-xl);
  }

  .post-header h1 {
    font-size: var(--text-2xl);
  }

  .featured-post-content .post-card-title {
    font-size: var(--text-xl);
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .messages-layout {
    grid-template-columns: 1fr;
  }

  .admin-content {
    padding: var(--sp-4);
  }

  .related-posts .posts-grid {
    grid-template-columns: 1fr !important;
  }

  /* Hero responsive */
  .hero-section {
    min-height: 50vh;
  }

  .hero-title {
    font-size: var(--text-3xl);
  }

  .hero-description {
    font-size: var(--text-base);
  }

  .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-btn-primary,
  .hero-btn-outline {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: var(--sp-3) var(--sp-6);
    font-size: var(--text-base);
  }

  /* Post card responsive: stack vertically on mobile */
  .post-card {
    flex-direction: column;
  }

  .post-card-image-side {
    width: 100%;
    height: 180px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .page-container {
    padding: var(--sp-2);
  }

  .post-card {
    flex-direction: column;
  }

  .post-card-image-side {
    width: 100%;
    height: 160px;
  }

  .post-card-content-side {
    padding: var(--sp-3);
  }

  .featured-post-content {
    padding: var(--sp-3);
  }

  .thread-content {
    padding: var(--sp-3);
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .tabs-bar {
    gap: 0;
  }

  .tab-item {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--text-xs);
  }

  .hero-title {
    font-size: var(--text-2xl);
  }
}