/* ── Off The Wall — Mobile Overrides ─────────────────────────────────────────
   Import after components.css in every page head.
   Rules: @media (max-width: 768px) for tablet+mobile
          @media (max-width: 480px) for phone-specific
   Do NOT rewrite page layouts — only add overrides.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Universal: inputs & buttons ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .otw-input, .otw-textarea, input, textarea, select {
    font-size: 16px !important; /* prevents iOS zoom */
    min-height: 44px;
  }

  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; padding: 8px 16px; }

  /* All grids → single column */
  .featured-grid,
  .listings-grid,
  .performer-grid,
  .sub-features {
    grid-template-columns: 1fr !important;
  }

  /* Horizontal pill rows that overflow */
  .skills-grid,
  .hero-skills,
  .format-grid {
    flex-wrap: wrap !important;
  }

  /* Ensure minimum 16px horizontal padding everywhere */
  .hero,
  .main-content,
  .section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Bebas headings cap */
  .otw-display-xl  { font-size: clamp(48px, 10vw, 88px) !important; }
  .otw-display-lg  { font-size: clamp(40px, 8vw, 72px) !important; }
  .otw-display-md  { font-size: clamp(32px, 6vw, 56px) !important; }
}

/* ── Hamburger nav ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hide center nav links, show hamburger */
  .nav-center { display: none !important; }
  .otw-nav > a:not(.otw-logo) { display: none !important; }

  .hamburger-btn {
    background: none; border: none; cursor: pointer; padding: 8px;
    display: flex; flex-direction: column; gap: 5px; align-items: center;
  }
  .hamburger-btn span {
    display: block; width: 22px; height: 2px; background: var(--text);
    border-radius: 2px; transition: all 200ms;
  }

  .mobile-nav-overlay {
    position: fixed; inset: 0; z-index: 999;
    background: var(--black); display: none;
    flex-direction: column; padding: 24px 32px;
  }
  .mobile-nav-overlay.open { display: flex; }
  .mobile-nav-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
  .mobile-nav-close {
    background: none; border: none; cursor: pointer; font-size: 22px;
    color: var(--text-dim);
  }
  .mobile-nav-links { display: flex; flex-direction: column; gap: 8px; }
  .mobile-nav-links a {
    font-family: var(--font-display); font-size: 40px; color: var(--text);
    text-decoration: none; line-height: 1.1;
  }
  .mobile-nav-links a:hover { color: var(--red); }
}

/* ── Homepage (/) ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-right { display: none !important; }   /* hide tonight's show preview */

  .editorial { grid-template-columns: 1fr !important; }
  .editorial-cell:first-child { border-right: none !important; border-bottom: 1px solid var(--border); }

  .hero-headline { font-size: clamp(56px, 14vw, 100px) !important; }

  /* Tonight's Bill rows */
  .show-row { flex-wrap: wrap; gap: 8px !important; }

  /* Creator Network cards: 2-col on mobile */
  .sub-features { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Signup / Signin ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hide left principle panel */
  .auth-left,
  .signup-left,
  .signin-left { display: none !important; }

  /* Right form panel takes full width */
  .auth-right,
  .signup-right,
  .signin-right {
    width: 100% !important;
    max-width: 100% !important;
    padding: 32px 24px !important;
  }

  /* Role selector cards: single column */
  .role-grid,
  .role-selector { grid-template-columns: 1fr !important; }

  /* SSO buttons: full width */
  .sso-btn { width: 100% !important; }
}

/* ── Onboarding ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Left context panel → slim top banner */
  .onboarding-left {
    width: 100% !important; max-width: 100% !important;
    height: auto !important; min-height: 0 !important;
    padding: 16px 24px !important;
    flex-direction: row !important;
    align-items: center; justify-content: space-between;
  }
  .onboarding-left .step-title,
  .onboarding-left .step-body,
  .onboarding-left .step-bullets { display: none !important; }
  .onboarding-left .step-eyebrow { display: block !important; margin: 0 !important; }

  /* Progress dots: centered */
  .step-dots { justify-content: center !important; }

  /* Onboarding layout: column */
  .onboarding-wrap,
  .onboarding-layout { flex-direction: column !important; }

  /* Right form: full width */
  .onboarding-right {
    width: 100% !important; padding: 32px 24px !important;
  }
}

/* ── /home/performer ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .performer-home-grid,
  .home-grid { grid-template-columns: 1fr !important; }

  /* Stat strip: 2×2 */
  .stat-strip { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── /home/audience ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .audience-home-grid { grid-template-columns: 1fr !important; }
}

/* ── /network ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .otw-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .otw-tab { white-space: nowrap; font-size: 13px; padding: 10px 14px; }

  /* Filter bar: stack search + city to column */
  .filter-bar { flex-direction: column; align-items: stretch !important; gap: 8px; }
  .filter-bar .otw-search { width: 100%; }
  .filter-bar .otw-search input { width: 100%; }
  .segment-group { flex-wrap: wrap; }

  /* Cards: single column */
  .network-grid,
  .theaters-grid,
  .performers-grid,
  .troupes-grid { grid-template-columns: 1fr !important; }
}

/* ── /performer/:id ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 40px 16px 32px !important;
  }
  .performer-avatar.lg { width: 100px !important; height: 100px !important; font-size: 36px !important; }
  .hero-text h1 { font-size: clamp(36px, 10vw, 56px) !important; }
  .edit-field.display-input { font-size: clamp(28px, 8vw, 48px) !important; }
}

/* ── /theater/:id ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-name { font-size: clamp(40px, 10vw, 72px) !important; }
  .performer-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── /dashboard ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .otw-sidebar { display: none !important; }
  .main-header { padding: 24px 16px 16px !important; }
  .main-content { padding: 20px 16px !important; }
  .stat-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .row-actions { flex-wrap: wrap; gap: 6px; }
  .otw-table th:nth-child(3),
  .otw-table td:nth-child(3) { display: none; } /* hide date col on small */
}

/* ── /settings/* ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .settings-sidebar {
    width: 100% !important; height: auto !important; position: static !important;
    display: flex !important; overflow-x: auto !important; padding: 0 !important;
    border-right: none !important; border-bottom: 1px solid var(--border);
    flex-direction: row !important;
  }
  .settings-sidebar-title { display: none !important; }
  .settings-nav-item {
    white-space: nowrap; border-left: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 12px 16px !important;
  }
  .settings-nav-item.active {
    border-left: none !important; border-bottom-color: var(--red) !important;
    padding-left: 16px !important;
  }
  .page-wrap { flex-direction: column !important; }
  .settings-content { padding: 24px 16px !important; }
  .two-col { grid-template-columns: 1fr !important; }
  .two-col-edit { grid-template-columns: 1fr !important; }
}

/* ── /marketplace (Coming Soon) ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .coming-soon-wrap { padding: 48px 24px !important; }
  .cs-form { flex-direction: column !important; }
  .cs-form input { min-width: 0 !important; }
  .cs-form button { width: 100% !important; }
}

/* ── /join/:code ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .join-wrap, .join-form { padding: 24px 16px !important; }
}

/* ── /host/:showId ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .host-action-bar { flex-wrap: wrap; gap: 8px; }
}

/* ── Global: prevent horizontal overflow ─────────────────────────────────── */
@media (max-width: 768px) {
  * { max-width: 100%; box-sizing: border-box; }
  img, video, iframe { max-width: 100%; height: auto; }
  .otw-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}