/* =========================================================
   PromptForge — responsive.css
   Mobile / tablet behavior. Desktop keeps 40/60 split.
   ========================================================= */

/* Large desktop — give panels a touch more breathing room */
@media (min-width: 1440px) {
  :root { --maxw: 1760px; }
  .panel__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
  .output, .history { padding: var(--sp-6) var(--sp-8); }
}

/* Tablet landscape & small laptops — keep split but tighten */
@media (max-width: 1280px) {
  .app { grid-template-columns: 42% 58%; }
  .panel__body { padding: var(--sp-4); }
  .output, .history { padding: var(--sp-4) var(--sp-5); }
  .ratio-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Tablet portrait & smaller — switch to hamburger menu, stack panels */
@media (max-width: 980px) {
  .app {
    grid-template-columns: 1fr;
    /* Issue #2: no row min-height — let content drive height. */
  }
  .panel--left {
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    /* Issue #2: disable sticky + fixed height; let panel size to content. */
    position: static;
    height: auto;
    overflow: visible;
  }
  .panel--right { display: flex; flex-direction: column; }
  /* Issue #2: panel__body no longer needs to scroll on tablet; page scrolls. */
  .panel__body {
    overflow: visible;
    max-height: none;
  }
  .navbar__inner { padding: 0 var(--sp-4); gap: var(--sp-4); }

  /* === Issue #1: Mobile navigation ===
     Hide desktop nav links + GitHub button; show hamburger toggle.
     The mobile drawer itself stays display:none until .is-open is added
     (see .nav--mobile rule in style.css). This guarantees the off-canvas
     drawer never extends the document's scrollable width. */
  .nav--desktop { display: none; }
  .navbar__github { display: none; }
  .nav-toggle {
    display: inline-flex;
  }

  .footer__inner { grid-template-columns: 1fr; text-align: center; gap: var(--sp-4); }
  .footer__links {
    justify-content: center;
    /* Increase separation between GitHub / Issues / License on tablet/mobile */
    gap: var(--sp-6);
    flex-wrap: wrap;
  }
  .footer__links a {
    font-size: 13.5px;
    padding: 8px 6px;
  }
  .footer__copy { text-align: center; }
  .footer_title { text-align: left; }
  .footer_brand { justify-content: center; }
}

/* Mobile */
@media (max-width: 640px) {
  :root { --navbar-h: 56px; }
  body { font-size: 13px; }
  .navbar__inner { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .brand__name { font-size: 15px; }
  /* Issue #3: on mobile, logo stays clearly visible — slightly smaller
     but still prominent. */
  .brand__mark { height: 32px; }
  .brand { gap: var(--sp-2); }

  .panel__header { padding: var(--sp-4); }
  .panel__body { padding: var(--sp-3); }
  .output, .history { padding: var(--sp-4); }
  .output__header { flex-wrap: wrap; }
  .output__actions { width: 100%; }
  .output__actions .btn { flex: 1; }

  .ratio-grid { grid-template-columns: repeat(3, 1fr); }
  .chip-grid { gap: 6px; }
  .chip { padding: 6px 10px; font-size: 12px; }

  .accordion__head { padding: 12px 12px; }
  .accordion__body > .field,
  .accordion__body > .seg,
  .accordion__body > .color-row,
  .accordion__body > .palette-preview,
  .accordion__body > .chip-grid,
  .accordion__body > .ratio-grid,
  .accordion__body > .dropzone,
  .accordion__body > .previews { padding: 0 12px; }

  .history__body { max-height: none; }

  /* Issue: Footer — generous spacing on phones for readability */
  .footer__inner { padding: var(--sp-5) var(--sp-4); gap: var(--sp-5); }
  .footer__links {
    gap: var(--sp-5);
    /* Each link on its own breathing room */
    flex-wrap: wrap;
  }
  .footer__links a { font-size: 14px; padding: 10px 8px; }

  .toast { bottom: 16px; left: 12px; right: 12px; transform: translateY(20px); max-width: none; }
  .toast.is-visible { transform: translateY(0); }
}

/* Very small */
@media (max-width: 380px) {
  .ratio-grid { grid-template-columns: repeat(2, 1fr); }
  .nav__link { padding: 5px 6px; font-size: 11.5px; }
  .brand__name { font-size: 14px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Print (basic) */
@media print {
  .navbar, .footer, .output__actions, .entry__actions, .toast { display: none !important; }
  .app { display: block; }
  .panel--left { position: static; height: auto; overflow: visible; }
  body { background: #fff; color: #000; }
}