/* ============================================================
   responsive.css — mobile / iPhone layout
   Off-canvas nav drawer, stacked grids, mobile demo overlay.
   ============================================================ */

/* Hamburger + backdrop are desktop-hidden by default */
.hamburger {
  display: none;
  width: 40px; height: 40px;
  flex-shrink: 0;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 9px;
  color: var(--text-primary);
  cursor: pointer;
  margin-right: 0.75rem;
}
.hamburger svg { width: 20px; height: 20px; }
body.theme-light .hamburger { background: rgba(28, 22, 14, 0.04); }

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 95;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

/* ============================================================
   Tablet and below
   ============================================================ */
@media (max-width: 900px) {
  .bento-card.col-4,
  .bento-card.col-6,
  .bento-card.col-8 { grid-column: span 12; }
  .builder-grid,
  .skills-studio-grid,
  .hook-simulator-details { grid-template-columns: 1fr; }
  .keyboard-section { flex-direction: column; }
  .shortcut-details-card { width: 100%; }
  .hero-layout { flex-direction: column; align-items: stretch; }
  .hero-visual { width: 100%; }
}

/* ============================================================
   Phone (iPhone) layout
   ============================================================ */
@media (max-width: 768px) {
  /* Sidebar becomes an off-canvas drawer */
  .sidebar {
    transform: translateX(-100%);
    width: 80vw;
    max-width: 320px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    z-index: 100;
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .nav-backdrop { display: block; opacity: 1; }

  .main-wrapper {
    margin-left: 0;
    width: 100%;
  }

  .hamburger { display: flex; }

  /* Header: hamburger · search · actions, all on one row */
  .top-header {
    padding: 0 1rem;
    gap: 0.5rem;
    position: sticky;
    /* respect iOS notch / status bar */
    padding-top: env(safe-area-inset-top, 0);
    height: calc(64px + env(safe-area-inset-top, 0));
  }
  .search-container {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  .header-actions { gap: 0.5rem; flex-shrink: 0; }
  .model-badge { display: none; }

  .content-container { padding: 1.25rem 1rem 3rem; }

  .section-title { font-size: 1.7rem; letter-spacing: -0.5px; }
  .section-desc { font-size: 0.98rem; }

  .bento-grid { gap: 1rem; margin-bottom: 1.5rem; }
  .bento-card { padding: 1.25rem; border-radius: 14px; }
  .bento-card[data-demo] { padding-bottom: 2.4rem; }
  .stats-card-container { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  /* Section header action buttons stack nicely */
  .section-title-wrap .demo-play-btn { width: 100%; justify-content: center; }

  /* Hooks timeline stays swipeable */
  .hooks-timeline { padding: 1rem 0; }

  /* Demo overlay → near full-screen sheet */
  .cc-overlay { padding: 0; align-items: flex-end; }
  .cc-modal {
    width: 100%;
    max-height: 94vh;
    border-radius: 18px 18px 0 0;
  }
  .cc-caption { padding: 0.85rem 1rem; }
  .cc-caption-title { font-size: 0.95rem; }
  .cc-term, .cc-desktop, .cc-statusbar, .cc-transport { margin: 0 0.5rem; }
  .cc-transport { flex-wrap: wrap; gap: 0.5rem; padding: 0.7rem; padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0)); }
  .cc-transport .cc-progress { order: -1; flex-basis: 100%; }
  .cc-body { font-size: 0.8rem; padding: 0.9rem 1rem; }

  /* Desktop-app demo: hide the rail on phones, show just the main pane */
  .cc-dt-rail { display: none; }

  /* Hero terminal a touch shorter on phones */
  .hero-terminal .cc-body { height: 240px; }
}

/* Small phones */
@media (max-width: 420px) {
  .stats-card-container { grid-template-columns: 1fr; }
  .section-title { font-size: 1.45rem; }
  .search-shortcut { display: none; }
  .os-tabs { flex-wrap: wrap; }
  .cc-caption-sub { display: none; }
}

/* Larger tap targets on touch devices */
@media (hover: none) and (pointer: coarse) {
  .nav-link { padding: 0.85rem 0.75rem; }
  .key { min-height: 48px; }
  .demo-play-btn { padding: 0.65rem 1rem; }
  .cc-btn { padding: 0.55rem 0.85rem; }
}