/* ==========================================================================
   ProcessPlan Responsive — responsive.css
   Mobile-first breakpoints and responsive overrides
   ========================================================================== */

/* ---------- Tablet and below (< 1024px) ---------- */
@media (max-width: 1023px) {
  /* Typography scaling */
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }

  /* Grid adjustments */
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Feature rows stack */
  .feature-row {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .feature-row--reverse .feature-row__content,
  .feature-row--reverse .feature-row__visual {
    order: unset;
  }

  /* Stats */
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer__brand {
    grid-column: 1 / -1;
    max-width: 100%;
  }

  /* Section spacing */
  .section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .section--lg { padding-top: var(--space-20); padding-bottom: var(--space-20); }

  /* Hero */
  .hero { min-height: 70vh; }
  .hero__title { font-size: var(--text-4xl); }
  .hero__description { font-size: var(--text-lg); }

  /* CTA banner */
  .cta-banner {
    padding: var(--space-12) var(--space-8);
  }

  .cta-banner__title {
    font-size: var(--text-3xl);
  }
}

/* ---------- Tablet breakpoint — show mobile nav (< 768px) ---------- */
@media (max-width: 767px) {
  /* Navigation */
  .nav__links,
  .nav__actions {
    display: none;
  }

  .nav__toggle {
    display: block;
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding-top: calc(72px + var(--space-12));
    padding-bottom: var(--space-12);
  }

  .hero__title {
    font-size: var(--text-3xl);
  }

  .hero__description {
    font-size: var(--text-base);
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
    text-align: center;
  }

  /* Grids all single column */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  /* Steps */
  .steps {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Stats */
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  /* Pricing cards */
  .pricing-card {
    padding: var(--space-8);
  }

  /* Section spacing */
  .section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .section--lg {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .section-header {
    margin-bottom: var(--space-10);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer__legal {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Page hero */
  .page-hero {
    padding: calc(72px + var(--space-10)) 0 var(--space-10);
  }

  .page-hero__title {
    font-size: var(--text-3xl);
  }

  /* CTA Banner */
  .cta-banner {
    padding: var(--space-10) var(--space-6);
    border-radius: var(--radius-xl);
  }

  .cta-banner__title {
    font-size: var(--text-2xl);
  }

  .cta-banner__actions {
    flex-direction: column;
  }

  .cta-banner__actions .btn {
    width: 100%;
  }

  /* Container padding */
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Feature rows */
  .feature-row {
    gap: var(--space-6);
  }

  /* Accordion */
  .accordion__trigger {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }

  .accordion__body {
    padding: 0 var(--space-4) var(--space-3);
    font-size: var(--text-sm);
  }

  /* Legal content */
  .legal-content h2 {
    font-size: var(--text-xl);
  }

  .legal-content h3 {
    font-size: var(--text-lg);
  }
}

/* ---------- Small mobile (< 480px) ---------- */
@media (max-width: 479px) {
  html {
    font-size: 15px;
  }

  .hero__title {
    font-size: var(--text-2xl);
  }

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

  .stat__number {
    font-size: var(--text-3xl);
  }

  .pricing-card__price {
    font-size: var(--text-4xl);
  }

  .footer__social {
    justify-content: center;
  }

  .tag-grid {
    gap: var(--space-1);
  }

  .tag {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
  }
}

/* ---------- Large desktop (> 1400px) ---------- */
@media (min-width: 1401px) {
  .hero__title {
    font-size: 4.5rem;
  }

  .container--wide {
    max-width: 1600px;
  }
}

/* ---------- Print ---------- */
@media print {
  .nav, .footer, .cta-banner, .btn {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .section {
    padding: 1rem 0;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .hero {
    min-height: auto;
    padding: 2rem 0;
  }
}