/* ============================================================
   RESPONSIVE STYLESHEET — nudeaigenerator.com
   Mobile-first breakpoints
   ============================================================ */

/* ── Breakpoints ──
   xs:  < 480px
   sm:  480px – 767px
   md:  768px – 1023px
   lg:  1024px – 1279px
   xl:  1280px+
   ──────────────── */

/* ================================================================
   LARGE DESKTOP (xl: 1280px+)
   ================================================================ */

@media (min-width: 1280px) {
  .models-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ================================================================
   DESKTOP (max-width: 1199px)
   ================================================================ */

@media (max-width: 1199px) {
  .models-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}

/* ================================================================
   TABLET (768px – 1023px)
   ================================================================ */

@media (max-width: 1023px) {
  /* ── Sidebar becomes slide-over ── */
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--ease-default);
    width: 280px;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 40px rgba(0, 0, 0, 0.6);
  }

  /* Overlay only shows when sidebar is open */
  .sidebar-overlay.open { display: block; }

  .main-wrapper { margin-left: 0; }

  /* ── App / Generator layout ── */
  .generator-layout { grid-template-columns: 1fr; }
  .generator-panel {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: none;
  }

  /* ── Topnav ── */
  .topnav-nav { display: none; }
  .hamburger-btn { display: flex; }
  .topnav-actions .btn-outline { display: none; }

  /* Mobile header order: logo left, Start Free + hamburger right */
  .topnav-logo    { order: 1; }
  .topnav-actions { order: 2; margin-left: auto; }
  .hamburger-btn  { order: 3; }

  /* ── Grid adjustments ── */
  .features-grid    { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid{ grid-template-columns: repeat(2, 1fr); }
  .pricing-grid     { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .pricing-card.featured { transform: none; }
  .steps-grid       { gap: var(--space-4); }
  .steps-grid::before { display: none; }
  .blog-grid        { grid-template-columns: repeat(2, 1fr); }
  .contact-grid     { grid-template-columns: 1fr; }
  .footer-grid      { grid-template-columns: 1fr 1fr; }
}

/* ================================================================
   MOBILE (max-width: 767px)
   ================================================================ */

@media (max-width: 767px) {

  /* ── Root overrides ── */
  :root {
    --topnav-height: 56px;
    --space-10: 52px;
    --space-9:  44px;
    --space-8:  36px;
  }

  /* ================================================================
     TOPNAV
     ================================================================ */

  .topnav {
    padding: 0 var(--space-4);
    padding-left:  calc(var(--space-4) + env(safe-area-inset-left,  0px));
    padding-right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    gap: var(--space-2);
    width: 100%;
  }

  .topnav-logo {
    font-size: var(--text-base);
    gap: 6px;
    flex-shrink: 0;
  }

  .topnav-logo .logo-icon {
    width: 30px;
    height: 30px;
  }

  .topnav-nav { display: none; }

  .topnav-actions {
    gap: var(--space-2);
    flex-shrink: 0;
  }

  .topnav-actions .btn-outline { display: none; }

  .topnav-actions .btn-primary {
    padding: 8px 14px;
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  /* ================================================================
     HERO
     ================================================================ */

  .hero {
    min-height: calc(100svh - var(--topnav-height));
    padding-top: calc(var(--topnav-height) + var(--space-7));
    padding-bottom: var(--space-8);
    align-items: flex-start;
  }

  /* Container handles horizontal gutter — hero-content adds nothing */
  .hero-content { padding: 0; }

  .hero-eyebrow {
    font-size: 10px;
    padding: 5px 12px;
    margin-bottom: var(--space-4);
  }

  .hero-title {
    font-size: clamp(26px, 8.5vw, 38px);
    line-height: 1.13;
    letter-spacing: -0.025em;
    margin-bottom: var(--space-4);
  }

  .hero-subtitle {
    font-size: var(--text-base);
    line-height: 1.6;
    margin-bottom: var(--space-5);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-6);
  }

  .hero-actions .btn { width: 100%; justify-content: center; }

  /* ── Buttons: comfortable but not chunky ── */
  .btn-lg {
    padding: 12px 22px;
    font-size: 15px;
  }

  /* ── Stats: 2×2 grid, no overflowing row ── */
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    max-width: 100%;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    backdrop-filter: none; /* prevent mobile GPU compositing issues */
    -webkit-backdrop-filter: none;
  }

  /* Each stat fills its grid cell */
  .hero-stat {
    flex: unset;
    min-width: unset;
    text-align: center;
    padding: var(--space-4) var(--space-3);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  /* Remove extra borders on right column and bottom row */
  .hero-stat:nth-child(even)         { border-right: none; }
  .hero-stat:nth-last-child(-n+2)    { border-bottom: none; }

  /* Hide dividers — they're grid children that must vanish cleanly */
  .hero-stat-divider { display: none !important; }

  .hero-stat-number { font-size: var(--text-xl); }
  .hero-stat-label  { font-size: var(--text-xs); }

  /* ================================================================
     SECTIONS  (consistent vertical rhythm)
     ================================================================ */

  .section { padding: var(--space-8) 0; }
  .section-header { margin-bottom: var(--space-6); }

  .section-title {
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.25;
    letter-spacing: -0.02em;
  }

  .section-subtitle {
    font-size: var(--text-sm);
    line-height: 1.65;
  }

  .section-tag { font-size: 10px; }

  /* ================================================================
     STEP CARDS  — horizontal layout with CSS Grid (no HTML change)
     ================================================================ */

  .steps-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .step-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    align-items: start;
    padding: var(--space-4) var(--space-5);
    text-align: left;
  }

  .step-number {
    grid-column: 1;
    grid-row: 1 / 3;   /* spans both title and desc rows */
    width: 44px;
    height: 44px;
    font-size: var(--text-base);
    margin: 0;
    align-self: center;
  }

  .step-title {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--text-base);
    margin-bottom: 0;
  }

  .step-desc {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--text-sm);
    margin: 0;
  }

  /* ================================================================
     FEATURE CARDS
     ================================================================ */

  .features-grid { grid-template-columns: 1fr; gap: var(--space-3); }

  .feature-card { padding: var(--space-5); }
  .feature-title { font-size: var(--text-sm); }
  .feature-desc  { font-size: var(--text-sm); }

  /* ================================================================
     MODELS GRID
     ================================================================ */

  .models-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

  /* ================================================================
     GALLERY STRIP
     ================================================================ */

  .gallery-card { width: 130px; height: 174px; }

  /* ================================================================
     TESTIMONIALS
     ================================================================ */

  .testimonials-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .testimonial-card  { padding: var(--space-5); }

  /* ================================================================
     PRICING
     ================================================================ */

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: var(--space-4);
  }

  .pricing-card { padding: var(--space-6); }
  .pricing-amount { font-size: var(--text-3xl); }

  /* ── Comparison table: compact cells on mobile ── */
  .pricing-compare-table th,
  .pricing-compare-table td {
    padding: var(--space-3) var(--space-2) !important;
    font-size: var(--text-xs) !important;
  }

  .pricing-compare-table th:first-child,
  .pricing-compare-table td:first-child {
    padding-left: var(--space-3) !important;
    min-width: 80px;
  }

  /* ── Trust signals: stack on mobile ── */
  .trust-grid {
    grid-template-columns: 1fr !important;
  }

  /* ================================================================
     CTA SECTION
     ================================================================ */

  .cta-section { padding: var(--space-8) 0; }
  .cta-card    { padding: var(--space-7) var(--space-4); }

  .cta-title {
    font-size: clamp(20px, 7vw, 28px);
    line-height: 1.25;
  }

  .cta-subtitle { font-size: var(--text-sm); }

  /* CTA buttons stack vertically and stretch full width */
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    gap: var(--space-3);
  }

  .cta-actions .btn { width: 100%; justify-content: center; }

  /* ================================================================
     FOOTER
     ================================================================ */

  .footer {
    padding: var(--space-8) 0 var(--space-6);
    /* safe-area bottom inset for home-indicator devices */
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
  }

  .footer-desc {
    max-width: 100%;
    font-size: var(--text-sm);
  }

  .footer-col-title { margin-top: var(--space-2); }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
  }

  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }

  /* ================================================================
     MODALS
     ================================================================ */

  .modal-backdrop {
    padding: var(--space-4);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
  }

  .modal {
    padding: var(--space-5);
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md);
    max-width: 100%;
    width: 100%;
  }

  .auth-modal {
    padding: var(--space-5);
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md);
    max-width: 100%;
    width: 100%;
  }

  /* ================================================================
     BLOG
     ================================================================ */

  .blog-grid { grid-template-columns: 1fr; gap: var(--space-4); }

  .blog-header { padding: var(--space-9) 0 var(--space-6); }

  /* ================================================================
     LEGAL PAGES
     ================================================================ */

  .legal-page { padding: var(--space-6) var(--space-4); }
  .legal-title { font-size: var(--text-2xl); }

  /* ================================================================
     CONTACT PAGE
     ================================================================ */

  .contact-grid { grid-template-columns: 1fr; }
  .contact-form { padding: var(--space-5); }

  /* ================================================================
     SIDEBAR (mobile slide-over refinements)
     ================================================================ */

  .sidebar-nav {
    padding: var(--space-2);
  }

  .nav-item {
    padding: 12px var(--space-3);
    font-size: var(--text-sm);
    gap: var(--space-3);
    min-height: 44px;
  }

  .nav-badge {
    padding: 2px 7px;
    font-size: 10px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .sidebar-bottom {
    padding: var(--space-2);
  }

  .sidebar-bottom .nav-item {
    padding: 12px var(--space-3);
  }

  .sidebar-footer {
    padding: var(--space-3);
  }

  /* ================================================================
     GENERATOR
     ================================================================ */

  /* App topnav — prevent title from wrapping and squeezing controls */
  .app-topnav {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  .app-topnav-title {
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
  }

  /* Credits badge — hide text, keep compact */
  .app-topnav [style*="margin-left:auto"] {
    gap: var(--space-2);
    flex-shrink: 0;
  }

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

  /* ================================================================
     TOAST
     ================================================================ */

  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
  .toast { max-width: 100%; font-size: var(--text-xs); }
}

/* ================================================================
   EXTRA SMALL (max-width: 479px)
   ================================================================ */

@media (max-width: 479px) {

  .container { padding: 0 var(--space-4); }

  /* ── Topnav tighter on small screens ── */
  .topnav {
    padding-left:  calc(var(--space-4) + env(safe-area-inset-left,  0px));
    padding-right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
  }

  .topnav-logo .logo-icon { width: 28px; height: 28px; }
  .topnav-actions .btn-primary { padding: 7px 12px; font-size: 11px; }

  /* ── Hero ── */
  .hero-title {
    font-size: clamp(23px, 9.5vw, 28px);
    line-height: 1.15;
  }

  /* ── Stats ── */
  .hero-stats { border-radius: var(--radius-lg); }

  .hero-stat { padding: var(--space-3) var(--space-2); }
  .hero-stat-number { font-size: var(--text-lg); }
  .hero-stat-label  { font-size: 10px; }

  /* ── Section titles ── */
  .section-title { font-size: clamp(20px, 8.5vw, 26px); }

  /* ── Grids ── */
  .models-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .output-grid { grid-template-columns: 1fr; }

  /* ── Generator controls ── */
  .ratio-grid { flex-wrap: wrap; }

  /* App topnav — extra compact on xs */
  .app-topnav {
    padding: 0 var(--space-2);
  }

  .app-topnav-title {
    font-size: var(--text-xs);
  }

  .credits-badge {
    padding: 6px 10px !important;
  }

  .credits-badge .credits-text {
    display: none;
  }

  /* ── Cards ── */
  .pricing-card { padding: var(--space-5); }
  .step-card    { padding: var(--space-4); }
  .feature-card { padding: var(--space-4); }

  /* ── Step card: tighter on 320px ── */
  .step-card {
    grid-template-columns: 36px 1fr;
    column-gap: var(--space-3);
  }

  .step-number {
    width: 36px;
    height: 36px;
    font-size: var(--text-sm);
  }

  /* ── CTA buttons full-width at all sizes ── */
  .btn-lg {
    padding: 11px 18px;
    font-size: 14px;
  }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .gallery-track { animation: none; }
  .sidebar { transition: none; }
}

/* ================================================================
   PRINT
   ================================================================ */

@media print {
  .topnav, .sidebar, .modal-backdrop, .toast-container { display: none !important; }
  .page-wrapper { padding-top: 0; }
  body { background: white; color: black; }
}