/* =============================================================
   PILOT AUTOMATES — Responsive Styles
   Mobile-first breakpoint system
   ============================================================= */

/* ── Base (mobile-first) ────────────────────────────────────── */

/* Hero */
.hero-grid { grid-template-columns: 1fr; }
.hero-visual { order: -1; }
.workflow-visual { padding: var(--space-4); }

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

/* Feature Split */
.feature-split { grid-template-columns: 1fr; }
.feature-split--reverse .feature-split-visual { order: 0; }

/* Footer */
.footer-grid { grid-template-columns: 1fr 1fr; }

/* Form */
.form-row { grid-template-columns: 1fr; }

/* Nav */
.site-nav { display: none; }
.header-cta { display: none; }
.nav-toggle { display: flex; }
.mobile-nav { display: block; }

/* Step items */
.step-item { flex-direction: column; gap: var(--space-4); }

/* Stats */
.stat-divider { display: none; }

/* ── Small Mobile: 375px ────────────────────────────────────── */
@media (min-width: 375px) {
  :root {
    --section-padding-x: 1.25rem;
  }
}

/* ── Standard Mobile: 480px ─────────────────────────────────── */
@media (min-width: 480px) {
  .hero-ctas { flex-wrap: nowrap; }
  .grid-auto-sm { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet: 640px ──────────────────────────────────────────── */
@media (min-width: 640px) {
  :root {
    --section-padding-x: 1.5rem;
    --header-height: 76px;
  }

  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .step-item { flex-direction: row; gap: var(--space-6); }
}

/* ── Tablet / Small Laptop: 768px ───────────────────────────── */
@media (min-width: 768px) {
  :root {
    --section-padding-x: 2rem;
    --header-height: 72px;
  }

  /* Navigation */
  .site-nav { display: flex; }
  .header-cta { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }

  /* Grids */
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

  /* Feature Split */
  .feature-split { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
  .feature-split--reverse .feature-split-visual { order: -1; }

  /* Footer */
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }

  /* Hero */
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-visual { order: 0; }

  /* Stats */
  .stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 5vw, 4rem);
  }
  .stat-divider { display: block; height: 48px; }
}

/* ── Laptop: 1024px ─────────────────────────────────────────── */
@media (min-width: 1024px) {
  :root {
    --section-padding-x: 2rem;
  }

  /* Grids */
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  /* Footer */
  .footer-grid { grid-template-columns: 2fr repeat(3, 1fr); }

  /* Dropdowns */
  .nav-has-dropdown:hover .nav-dropdown,
  .nav-has-dropdown:focus-within .nav-dropdown {
    display: block;
  }
}

/* ── Wide Desktop: 1280px ───────────────────────────────────── */
@media (min-width: 1280px) {
  :root {
    --section-padding-x: 2.5rem;
  }
}

/* ── XL Desktop: 1600px ─────────────────────────────────────── */
@media (min-width: 1600px) {
  :root {
    --section-padding-x: 3rem;
  }
}

/* ── Mobile-specific overrides ──────────────────────────────── */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
  .hero { min-height: auto; padding-block: clamp(3rem, 8vw, 5rem); }
  .workflow-visual { max-width: 480px; margin-inline: auto; }
  .page-hero-desc { font-size: var(--text-base); }
  .back-to-top { bottom: var(--space-6); right: var(--space-6); }
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-buttons .btn { width: 100%; max-width: 320px; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal-links { flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
  .booking-iframe-container { min-height: 600px; }
  .booking-iframe-container iframe { height: 600px; }
  .industry-card-tags { display: none; }
}

@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .card { padding: var(--space-6); }
  .problem-card { padding: var(--space-6); }
  .nav-dropdown { min-width: 200px; }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .back-to-top, .nav-toggle, .mobile-nav { display: none; }
  body { color: #000; background: #fff; }
  .page-top { padding-top: 0; }
  .cta-section { background: #f5f5f5; color: #000; }
  .cta-section::before { display: none; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}