/**
 * MyVideoStudio — Mobile responsive overrides for FRONTEND customer (v1.22.1)
 *
 * Sprint 2: FRONTEND customer surfaces (admin done in v1.22.0).
 *
 * Target minimum: 375px (iPhone SE moderne).
 * Loaded LAST in frontend cascade so it overrides shortcode-specific CSS.
 *
 * Breakpoint strategy:
 *   < 480px  → small phone (iPhone SE base case)
 *   < 640px  → mobile portrait
 *   < 768px  → mobile / tablet portrait
 *   >= 768px → tablet landscape & desktop (untouched by this file)
 *
 * Scope: each rule prefixed by its shortcode root class
 *   .mvs-land       → landing page
 *   .mvs-auth-page  → login mesh v3
 *   .mvs-dash       → customer dashboard SPA
 *   .mvs-bill       → billing / Stripe
 *   .mvs-mkt        → marketplace
 *   .mvs-onb        → onboarding wizard
 *   .mvs-ssb        → slideshow builder
 */

/* =====================================================================
   GLOBAL — TOUCH FRIENDLY DEFAULTS (frontend only)
   ===================================================================== */

@media (max-width: 767px) {
  /* iOS Safari anti-zoom on input focus (font-size must be >= 16px) */
  .mvs-land input,
  .mvs-land select,
  .mvs-land textarea,
  .mvs-auth-page input,
  .mvs-auth-page select,
  .mvs-auth-page textarea,
  .mvs-dash input,
  .mvs-dash select,
  .mvs-dash textarea,
  .mvs-bill input,
  .mvs-bill select,
  .mvs-bill textarea,
  .mvs-mkt input,
  .mvs-mkt select,
  .mvs-onb input,
  .mvs-onb select,
  .mvs-onb textarea,
  .mvs-ssb input,
  .mvs-ssb select,
  .mvs-ssb textarea {
    font-size: 16px !important;
  }

  /* Touch targets — buttons min 44px tall (Apple HIG) */
  .mvs-land__btn,
  .mvs-auth-page__btn,
  .mvs-dash__btn,
  .mvs-bill__btn,
  .mvs-mkt__btn,
  .mvs-onb__btn,
  .mvs-ssb__btn {
    min-height: 44px;
  }
}

/* =====================================================================
   LANDING PAGE
   ===================================================================== */

@media (max-width: 767px) {
  .mvs-land {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Hero — title smaller, subtitle smaller */
  .mvs-land__hero h1,
  .mvs-land__hero-title {
    font-size: 32px !important;
    line-height: 1.15;
  }

  .mvs-land__hero p,
  .mvs-land__hero-subtitle {
    font-size: 15px !important;
  }

  /* CTA row stack vertical, full-width buttons */
  .mvs-land__cta-actions,
  .mvs-land__cta-row {
    flex-direction: column;
    gap: 10px;
  }

  .mvs-land__cta-actions .mvs-land__btn,
  .mvs-land__cta-row .mvs-land__btn,
  .mvs-land__btn--lg {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  /* Grids → 1 column */
  .mvs-land__models-grid,
  .mvs-land__presets-grid,
  .mvs-land__features-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Sections padding more compact */
  .mvs-land__section {
    padding: 32px 16px !important;
  }

  /* Header brand + theme toggle compact */
  .mvs-land__header {
    padding: 14px 16px;
  }

  .mvs-land__brand {
    font-size: 16px;
  }

  .mvs-land__brand-mark {
    width: 32px;
    height: 32px;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  /* Slightly more breathing room on bigger phones */
  .mvs-land__models-grid,
  .mvs-land__presets-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 479px) {
  .mvs-land__hero h1,
  .mvs-land__hero-title {
    font-size: 26px !important;
  }
}

/* =====================================================================
   LOGIN MESH v3 (.mvs-auth-page)
   ===================================================================== */

@media (max-width: 767px) {
  .mvs-auth-page {
    flex-direction: column;
    min-height: 100vh;
  }

  /* Hide brand panel on mobile (decorative — save vertical space for form) */
  .mvs-auth-page__brand,
  .mvs-auth-page__brand-content {
    display: none !important;
  }

  /* Form panel full-width */
  .mvs-auth-page__form,
  .mvs-auth-page__form-panel {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 20px !important;
  }

  .mvs-auth-page__form-inner {
    max-width: 100% !important;
  }

  /* Inputs full-width */
  .mvs-auth-page__input {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Submit button bigger touch */
  .mvs-auth-page__btn,
  .mvs-auth-page__submit {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
  }
}

/* =====================================================================
   DASHBOARD CUSTOMER SPA (.mvs-dash)
   ===================================================================== */

@media (max-width: 767px) {
  .mvs-dash {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Header brand + credits pill compact */
  .mvs-dash__header {
    padding: 12px 16px !important;
    gap: 8px;
  }

  .mvs-dash__brand {
    font-size: 15px;
  }

  .mvs-dash__brand-mark {
    width: 32px;
    height: 32px;
  }

  .mvs-dash__credits-pill {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Content area */
  .mvs-dash__content {
    padding: 16px !important;
  }

  /* Recent generations grid → 1 column on mobile */
  .mvs-dash__recent-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Quick Gen inline panel */
  .mvs-dash__quickgen,
  .mvs-dash__quick-gen {
    padding: 16px !important;
  }

  .mvs-dash__quickgen-actions,
  .mvs-dash__quick-gen-actions {
    flex-direction: column;
    gap: 8px;
  }

  .mvs-dash__quickgen-actions button,
  .mvs-dash__quick-gen-actions button {
    width: 100%;
    min-height: 44px;
  }

  /* KPI stats — 2 cols on small mobile */
  .mvs-dash__stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Model switcher / preset cards */
  .mvs-dash__presets {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Bottom nav (mobile tab bar) ALWAYS visible on mobile */
  .mvs-dash__bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: white;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding: 6px 4px env(safe-area-inset-bottom, 6px);
  }

  /* Body padding-bottom so content doesn't hide behind bottom nav */
  .mvs-dash__content {
    padding-bottom: 80px !important;
  }

  /* Empty state */
  .mvs-dash__empty {
    padding: 32px 16px;
  }
}

@media (max-width: 479px) {
  .mvs-dash__stats {
    grid-template-columns: 1fr !important;
  }

  .mvs-dash__presets {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
   BILLING / STRIPE (.mvs-bill)
   ===================================================================== */

@media (max-width: 767px) {
  /* Modal overlay → full-screen on mobile */
  .mvs-bill {
    align-items: flex-end !important;
  }

  .mvs-bill__body {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
  }

  .mvs-bill__header {
    padding: 16px 20px !important;
  }

  /* Packages grid → 1 column */
  .mvs-bill__packages,
  .mvs-bill__grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .mvs-bill__package,
  .mvs-bill__card {
    padding: 18px !important;
  }

  /* Buy buttons full-width */
  .mvs-bill__btn,
  .mvs-bill__buy {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  /* Footer + current balance compact */
  .mvs-bill__footer {
    padding: 14px 20px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .mvs-bill__current-balance {
    font-size: 13px;
  }

  .mvs-bill__close {
    width: 36px;
    height: 36px;
  }
}

/* =====================================================================
   MARKETPLACE (.mvs-mkt)
   ===================================================================== */

@media (max-width: 767px) {
  .mvs-mkt {
    padding: 16px !important;
  }

  /* Tools grid → 1 column */
  .mvs-mkt__grid,
  .mvs-mkt__tools {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Category filters scroll horizontal */
  .mvs-mkt__categories,
  .mvs-mkt__filters,
  .mvs-mkt__nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .mvs-mkt__categories::-webkit-scrollbar,
  .mvs-mkt__filters::-webkit-scrollbar,
  .mvs-mkt__nav::-webkit-scrollbar {
    display: none;
  }

  .mvs-mkt__category,
  .mvs-mkt__filter,
  .mvs-mkt__nav-item {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Tool cards more compact */
  .mvs-mkt__tool,
  .mvs-mkt__card {
    padding: 16px !important;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .mvs-mkt__grid,
  .mvs-mkt__tools {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =====================================================================
   ONBOARDING WIZARD (.mvs-onb)
   ===================================================================== */

@media (max-width: 767px) {
  /* Overlay full-screen on mobile */
  .mvs-onb {
    padding: 0 !important;
    align-items: stretch !important;
  }

  .mvs-onb__card {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100vh;
    max-height: 100vh;
    border-radius: 0 !important;
    padding: 24px 20px !important;
    overflow-y: auto;
  }

  /* Interest cards grid 2 cols mobile */
  .mvs-onb__interests {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Preset cards stack */
  .mvs-onb__presets {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Navigation buttons stack with primary first (column-reverse on flex row-reverse) */
  .mvs-onb__nav {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .mvs-onb__btn,
  .mvs-onb__btn--primary,
  .mvs-onb__btn--ghost {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  /* Step dots smaller */
  .mvs-onb__dots {
    margin: 12px 0;
  }

  .mvs-onb__dot {
    width: 6px;
    height: 6px;
  }

  /* Close button top right */
  .mvs-onb__close {
    width: 36px;
    height: 36px;
    top: 12px;
    right: 12px;
  }
}

@media (max-width: 479px) {
  .mvs-onb__interests {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
   SLIDESHOW BUILDER (.mvs-ssb)
   ===================================================================== */

@media (max-width: 1023px) {
  /* Layout 2-col → stack */
  .mvs-ssb {
    grid-template-columns: 1fr !important;
  }

  .mvs-ssb__canvas {
    aspect-ratio: 16 / 9;
    width: 100%;
  }

  .mvs-ssb__sidebar,
  .mvs-ssb__panel {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  /* Actions toolbar */
  .mvs-ssb__actions,
  .mvs-ssb__toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .mvs-ssb__btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    min-height: 44px;
  }

  /* Canvas overlay */
  .mvs-ssb__canvas-overlay {
    padding: 16px;
  }

  .mvs-ssb__canvas-overlay-icon {
    font-size: 32px;
  }
}

/* =====================================================================
   STUDIO SHORTCODE (generation form)
   Note: Studio uses React SPA at #mvs-studio mount point with its own CSS
   ===================================================================== */

@media (max-width: 767px) {
  /* Generic 2-col → stack for any studio layout */
  #mvs-studio .studio-layout,
  #mvs-studio .mvs-studio-grid,
  .mvs-studio__layout {
    grid-template-columns: 1fr !important;
  }

  /* Preview area on top on mobile (typical pattern) */
  #mvs-studio .studio-preview,
  .mvs-studio__preview {
    order: -1;
  }

  /* Generate button full-width */
  #mvs-studio .studio-generate,
  .mvs-studio__btn-generate {
    width: 100%;
    min-height: 50px;
    font-size: 15px;
  }
}

/* =====================================================================
   ANTI-OVERFLOW SAFETY NET (frontend)
   ===================================================================== */

@media (max-width: 767px) {
  .mvs-land,
  .mvs-auth-page,
  .mvs-dash,
  .mvs-bill,
  .mvs-mkt,
  .mvs-onb,
  .mvs-ssb {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Long unbreakable strings wrap */
  .mvs-land code,
  .mvs-dash code,
  .mvs-bill code {
    word-break: break-all;
    overflow-wrap: break-word;
  }

  /* Images never overflow */
  .mvs-land img,
  .mvs-auth-page img,
  .mvs-dash img,
  .mvs-bill img,
  .mvs-mkt img,
  .mvs-onb img,
  .mvs-ssb img {
    max-width: 100%;
    height: auto;
  }

  /* Videos in cards */
  .mvs-dash video,
  .mvs-land video {
    max-width: 100%;
    height: auto;
  }
}