/* ===== responsive.css — Mobile-first breakpoints ===== */

/* Tablets and below: stack editor panels */
@media (max-width: 768px) {
  .editor-panels {
    grid-template-columns: 1fr;
  }
  .editor-panel + .editor-panel {
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
  .editor-textarea,
  .output-area,
  .preview-frame {
    min-height: 240px;
  }

  /* Steps stack vertically */
  .steps-list {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Hero */
  .hero {
    padding: var(--space-4) 0;
  }
  .hero-subtitle {
    font-size: 1rem;
  }

  /* Section spacing */
  .section { padding: var(--space-4) 0; }
  .content-section { padding: var(--space-4) 0; }

  /* Related tool CTA stacks */
  .related-tool {
    flex-direction: column;
    text-align: center;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-2);
  }

  .site-header .container {
    height: 56px;
  }

  .nav-links {
    gap: var(--space-2);
  }
  .nav-links a {
    font-size: .825rem;
  }

  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.2rem; }

  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }

  .editor-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Large screens */
@media (min-width: 1200px) {
  .container {
    padding: 0 var(--space-4);
  }
}