/* ═══════════════════════════════════════════════════════
   RESPONSIVE.CSS — Mobile & Tablet Breakpoints
   Shortlisted Resume Builder

   Breakpoints:
   - ≤1024px : Tablet landscape / small laptop
   - ≤768px  : Tablet portrait
   - ≤480px  : Mobile phones

   Linked AFTER page <style> blocks so cascade order wins.
   ═══════════════════════════════════════════════════════ */

/* ─── SHARED MOBILE OPTIMISATIONS ─── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.btn,
.nav-tab,
.auth-tab,
.credit-chip,
.action-card,
.intake-opt,
.template-card {
  touch-action: manipulation;
}


/* ═══════════════════════════════════════════════════════
   TABLET LANDSCAPE  (≤ 1024px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Base ── */
  .container       { padding: 0 24px; }
  .navbar          { padding: 16px 24px; }

  /* ── Editor: narrower sidebar ── */
  .editor-shell    { grid-template-columns: 320px 1fr; }

  /* ── Templates: 2 cols ── */
  .templates-grid  { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* ── Preview: stack ── */
  .preview-layout  { grid-template-columns: 1fr; }
  .action-panel    { position: static; }

  /* ── Lightbox ── */
  .preview-lightbox       { padding: 24px; }
  .preview-lightbox-inner { width: 90vw; max-width: 560px; }
}


/* ═══════════════════════════════════════════════════════
   TABLET PORTRAIT  (≤ 768px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Base ── */
  .container    { padding: 0 16px; }
  .container-sm { padding: 0 16px; }
  .container-md { padding: 0 16px; }

  /* Prevent iOS input zoom (inputs < 16px trigger zoom) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* ── Navbar ── */
  .navbar {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .navbar-logo {
    flex: 1;
    min-width: 0;
  }

  .navbar-actions {
    order: 0;
    gap: 8px;
  }

  .nav-tabs {
    order: 3;
    width: 100%;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

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

  /* ── Page header ── */
  .page-header        { padding: 24px 0 16px; }
  .page-header h1     { font-size: 24px; }

  /* ── Progress steps — hide labels, compact ── */
  .steps              { gap: 4px; }
  .step span          { display: none; }
  .step-line          { min-width: 16px; max-width: 32px; }

  /* ───────────────────────────────────
     INDEX (Login / Signup)
     ─────────────────────────────────── */
  /* Two-column body → single column */
  body {
    grid-template-columns: 1fr !important;
  }

  .hero-panel {
    padding: 32px 24px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .hero-content { padding: 24px 0; }

  .hero-title {
    font-size: 28px;
  }

  .hero-desc {
    font-size: 14px;
    max-width: 100%;
  }

  .hero-stats { gap: 20px; }

  .auth-panel {
    padding: 32px 24px;
  }

  /* ───────────────────────────────────
     DASHBOARD
     ─────────────────────────────────── */
  .action-grid {
    grid-template-columns: 1fr;
  }

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

  .no-credits-banner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .no-credits-banner-left {
    flex-direction: column;
  }

  /* ───────────────────────────────────
     INTAKE
     ─────────────────────────────────── */
  .intake-options {
    grid-template-columns: 1fr;
  }

  .intake-question {
    font-size: 28px;
  }

  .intake-resume-context {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  /* ───────────────────────────────────
     BUILDER
     ─────────────────────────────────── */
  .builder-layout {
    grid-template-columns: 1fr;
  }

  .saved-resume-banner {
    flex-direction: column;
    text-align: center;
  }

  .saved-resume-actions {
    width: 100%;
    justify-content: center;
  }

  /* ── Bottom bar (shared: builder + templates) ── */
  .bottom-bar {
    padding: 12px 16px;
    flex-direction: column;
    gap: 8px;
  }

  .bottom-bar .btn-lg,
  .bottom-bar .btn {
    width: 100%;
  }

  .bottom-bar-left {
    text-align: center;
    font-size: 12px;
  }

  /* ───────────────────────────────────
     EDITOR
     Body is overflow:hidden; height:100vh
     — must allow scroll on mobile.
     ─────────────────────────────────── */
  body {
    overflow: auto !important;
    height: auto !important;
  }

  .editor-shell {
    grid-template-columns: 1fr;
    overflow: visible;
    height: auto;
    flex: none;
  }

  .edit-panel {
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow: visible;
    max-height: none;
  }

  .edit-panel-body {
    overflow: visible;
  }

  /* ───────────────────────────────────
     PREVIEW
     ─────────────────────────────────── */
  .preview-layout {
    grid-template-columns: 1fr;
  }

  .action-panel {
    position: static;
  }

  .pdf-viewer iframe {
    height: 500px;
  }

  /* ───────────────────────────────────
     TEMPLATES
     ─────────────────────────────────── */
  .templates-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* ── Drop zone ── */
  .drop-zone {
    padding: 28px 16px;
  }

  /* ── Pay modal ── */
  .pay-modal-overlay { padding: 16px; }
  .pay-modal-box     { padding: 24px; max-width: 100%; }

  /* ── Lightbox ── */
  .preview-lightbox         { padding: 16px; }
  .preview-lightbox-inner   { width: 95vw; }
  .preview-lightbox-content { padding: 24px 20px; }

  /* ── Toast ── */
  .toast {
    left: 16px !important;
    right: 16px !important;
    max-width: none !important;
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════════════
   MOBILE PHONES  (≤ 480px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Base ── */
  .container,
  .container-sm,
  .container-md {
    padding: 0 12px;
  }

  /* ── Navbar ── */
  .navbar       { padding: 10px 12px; }
  .navbar-logo  { font-size: 18px; }

  .navbar-actions { gap: 6px; }

  /* Hide "Hi, Name" greeting to save space */
  .navbar-actions > span:not(.credits-nav-pill) {
    display: none;
  }

  .nav-tab {
    padding: 6px 10px;
    font-size: 12px;
  }

  .credits-nav-pill {
    font-size: 11px;
    padding: 3px 8px;
  }

  /* ── Page header ── */
  .page-header h1 { font-size: 20px; }
  .page-header p   { font-size: 13px; }

  /* ───────────────────────────────────
     INDEX
     ─────────────────────────────────── */
  .hero-panel     { padding: 24px 16px; }
  .hero-content   { padding: 20px 0; }
  .hero-title     { font-size: 24px; }
  .hero-stats     { flex-wrap: wrap; gap: 16px; }
  .stat-num       { font-size: 22px; }
  .hero-quote     { padding: 14px 16px; }
  .auth-panel     { padding: 24px 16px; }
  .auth-tabs      { margin-bottom: 20px; }

  /* ───────────────────────────────────
     DASHBOARD
     ─────────────────────────────────── */
  .stats-row {
    grid-template-columns: 1fr;
  }

  .stat-card          { padding: 16px; }
  .stat-card-value    { font-size: 24px; }
  .action-card        { padding: 16px; }
  .action-card-icon   { font-size: 24px; }
  .action-card-title  { font-size: 16px; }
  .resume-card        { padding: 16px; }

  .resume-card-actions {
    flex-direction: column;
  }

  .resume-card-actions .btn {
    width: 100%;
  }

  /* ───────────────────────────────────
     INTAKE
     ─────────────────────────────────── */
  .intake-wrap       { padding: 0 12px 60px; }
  .intake-question   { font-size: 22px; }
  .intake-opt        { padding: 20px 16px 16px; }
  .intake-opt-icon   { font-size: 32px; margin-bottom: 12px; }
  .intake-opt-title  { font-size: 18px; }
  .step-progress     { padding: 32px 0 36px; }

  /* ───────────────────────────────────
     BUILDER
     ─────────────────────────────────── */
  .section-card          { padding: 16px; }
  .section-card-header   { gap: 10px; margin-bottom: 14px; }
  .drop-zone             { padding: 20px 12px; }
  .drop-zone-icon        { font-size: 28px; }
  .bottom-bar            { padding: 10px 12px; }

  /* ───────────────────────────────────
     EDITOR
     ─────────────────────────────────── */
  .edit-panel-header { padding: 12px 14px; }
  .edit-panel-body   { padding: 12px 14px; }

  /* ───────────────────────────────────
     PREVIEW
     ─────────────────────────────────── */
  .pdf-viewer         { min-height: auto; }
  .pdf-viewer iframe  { height: 400px; }
  .watermark-text     { font-size: 32px; }
  .watermark-text-2   { font-size: 22px; }
  .watermark-text-3   { font-size: 28px; }
  .paywall-overlay    { height: 240px; padding: 24px 16px; }
  .paywall-title      { font-size: 18px; }
  .price-amount       { font-size: 24px; }

  /* ───────────────────────────────────
     TEMPLATES
     ─────────────────────────────────── */
  .templates-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 300px;
  }

  .template-name { font-size: 14px; }

  /* ── Credit picker ── */
  .credit-picker {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Pay modal ── */
  .pay-modal-box         { padding: 20px; }
  .pay-modal-title       { font-size: 18px; }
  .pay-modal-price-value { font-size: 18px; }
  .pay-modal-actions     { flex-direction: column; }

  /* ── Lightbox ── */
  .preview-lightbox             { padding: 8px; }
  .preview-lightbox-inner       { width: 100%; max-height: 85vh; }
  .preview-lightbox-content     { padding: 20px 16px; }
  .preview-lightbox-close       { top: 12px; right: 12px; }
  .preview-lightbox-footer      { padding: 10px 16px; flex-direction: column; gap: 8px; }

  /* ── Buttons ── */
  .btn-lg { padding: 12px 20px; font-size: 14px; }

  /* ── Alerts ── */
  .alert { font-size: 12px; padding: 10px 12px; }

  /* ── Cards ── */
  .card { padding: 16px; }

  /* ── Toast ── */
  .toast {
    left: 12px !important;
    right: 12px !important;
    bottom: 16px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   SAFE-AREA INSETS (iPhone notch / home indicator)
   ═══════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-bar {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .navbar {
    padding-top: calc(12px + env(safe-area-inset-top));
  }
}