/* ============================================================
   RESPONSIVE — TABLET (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .start-grid,
  .apps-grid,
  .post-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }

  .guide-promo { flex-direction: column; padding: var(--space-8); }
  .guide-promo-visual { width: 100%; height: 180px; }

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

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

  /* Directory: sidebar → horizontal pill bar */
  .directory-layout {
    grid-template-columns: 1fr !important;
    gap: 0;
  }

  .category-nav {
    position: sticky;
    top: var(--header-height);
    z-index: 50;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-5);
    margin: 0 calc(-1 * var(--space-8));
    width: calc(100% + var(--space-8) * 2);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .category-nav::-webkit-scrollbar {
    display: none;
  }

  .category-nav-label {
    display: none;
  }

  .category-nav ul {
    display: flex;
    gap: var(--space-2);
    white-space: nowrap;
  }

  .category-nav li {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .category-nav a {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-white);
  }

  .category-nav a:hover {
    border-color: var(--color-gray-400);
    background: var(--color-gray-50);
  }

  .category-nav a.active {
    border-color: var(--color-red);
    background: var(--color-red-light);
  }

  .category-nav a i {
    display: none;
  }

  .category-count {
    display: none;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root { --header-height: 60px; }

  .section { padding: var(--space-16) var(--space-5); }

  /* Nav collapse */
  .header-inner {
    position: relative;
  }

  .primary-nav { display: none; }

  .primary-nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    gap: var(--space-1);
  }

  .primary-nav.is-open .nav-item {
    width: 100%;
  }

  .primary-nav.is-open .nav-link {
    display: block;
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-base);
    border-radius: var(--radius-md);
  }

  .primary-nav.is-open .nav-link:hover {
    background: var(--color-gray-50);
  }

  /* Mobile dropdowns: inline flow instead of absolute overlay */
  .primary-nav.is-open .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 var(--space-2) var(--space-4);
    display: none;
  }

  .primary-nav.is-open .nav-item.dropdown-open .nav-dropdown {
    display: block;
  }

  .primary-nav.is-open .dropdown-link {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
  }

  .primary-nav.is-open .dropdown-link:hover {
    background: var(--color-gray-100);
    color: var(--color-red);
  }

  /* Rotate caret when dropdown is open */
  .primary-nav.is-open .nav-item.dropdown-open .nav-link i {
    transform: rotate(180deg);
  }

  /* Grid stacking */
  .start-grid,
  .apps-grid,
  .post-grid { grid-template-columns: 1fr; }

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

  .tag-post-grid { grid-template-columns: 1fr; }

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

  /* Footer stacking */
  .footer-top { grid-template-columns: 1fr; gap: var(--space-8); }

  /* Newsletter form stacking */
  .newsletter-form { flex-direction: column; }

  /* Hero scaling */
  .hero { min-height: 70vh; }
  .hero-title { font-size: var(--text-4xl); }

  /* Workflow row stacking */
  .workflow-row { flex-direction: column; gap: var(--space-3); }
  .workflow-arrow { transform: rotate(90deg); }

  /* Post nav stacking */
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-item.next { text-align: left; }
  .post-nav-item.next .post-nav-label { justify-content: flex-start; }

  /* Ghost card responsive stacking */
  .kg-product-card { flex-direction: column; }
  .kg-audio-card { flex-direction: column; align-items: stretch; }
  .kg-audio-thumbnail { width: 100%; height: 120px; }
  .kg-bookmark-container { flex-direction: column; }
  .kg-bookmark-thumbnail { width: 100%; height: 160px; }
  .kg-signup-card.kg-layout-split { grid-template-columns: 1fr; }
  .kg-signup-card-form { flex-direction: column; }
  .kg-video-player { flex-wrap: wrap; }

  /* Directory: app listing cards stack vertically */
  .app-listing {
    flex-direction: column;
  }

  .app-listing-actions {
    align-items: flex-start;
    flex-direction: row;
    gap: var(--space-3);
  }

  /* Directory: tighten pill bar spacing */
  .category-nav {
    padding: var(--space-2) var(--space-4);
    margin: 0 calc(-1 * var(--space-5));
    width: calc(100% + var(--space-5) * 2);
  }
}

/* ============================================================
   MOBILE HAMBURGER MENU
   ============================================================ */
.mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--color-gray-600);
  cursor: pointer;
  font-size: var(--text-lg);
  transition: all var(--duration-fast) var(--ease-out);
}

.mobile-menu-btn:hover {
  background: var(--color-gray-100);
  color: var(--color-black);
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
  }
}