/* ============================================
   RESPONSIVE STYLES
   Breakpoints: 1440+ (big screen), 1024 (tablet landscape),
                768 (tablet portrait), 480 (mobile)
   ============================================ */

/* ─── Global overflow fix ─── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* ─── Big Screens (1440px+) ─── */
@media (min-width: 1441px) {
  :root {
    --container-max: 1320px;
  }

  .hero-particle-heading {
    font-size: 4rem;
  }

  .particle-head-canvas {
    height: 560px;
  }

  .two-col,
  .two-col-reverse {
    gap: var(--space-4xl);
  }
}

/* ─── Tablet Landscape (max 1024px) ─── */
@media (max-width: 1024px) {
  :root {
    --font-size-5xl: 2.75rem;
    --font-size-4xl: 2rem;
    --font-size-3xl: 1.75rem;
  }

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

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

  .hero-particle-section {
    min-height: auto;
  }

  .particle-head-canvas {
    height: 400px;
  }

  .two-col,
  .two-col-reverse {
    gap: var(--space-2xl);
  }

  /* Comparison table scroll */
  .cmp-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-table {
    min-width: 700px;
  }
}

/* ─── Tablet Portrait (max 768px) ─── */
@media (max-width: 768px) {
  :root {
    --font-size-5xl: 2.25rem;
    --font-size-4xl: 1.75rem;
    --font-size-3xl: 1.5rem;
    --space-4xl: 4rem;
    --space-3xl: 3rem;
  }

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

  section {
    padding: var(--space-3xl) 0;
  }

  /* Navigation */
  .hamburger {
    display: flex;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

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

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

  /* Two-col layouts → stacked */
  .two-col,
  .two-col-reverse {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .two-col-reverse .col-text { order: 1; }
  .two-col-reverse .col-mockup { order: 2; }

  .col-text {
    text-align: center;
  }

  .col-text ul {
    display: inline-block;
    text-align: left;
  }

  .col-text .btn {
    display: inline-flex;
  }

  /* Hero */
  .hero-particle-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }

  .hero-particle-sub {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-particle-section {
    min-height: auto;
    padding-bottom: var(--space-3xl);
  }

  .particle-head-canvas {
    height: 300px;
  }

  /* Buttons */
  .btn-group {
    flex-direction: column;
    align-items: center;
  }

  .btn-group .btn {
    text-align: center;
    width: 100%;
    max-width: 320px;
  }

  /* Trust badges */
  .trust-bar {
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
  }

  .trust-badge {
    padding: 8px 14px;
    font-size: 0.6875rem;
  }

  /* Phone mockup */
  .phone-frame {
    width: 220px;
    height: 440px;
    margin: 0 auto;
  }

  /* Section headers */
  .section-header h2 {
    font-size: var(--font-size-3xl);
  }

  /* Cards — constrain content */
  .card {
    overflow: hidden;
  }

  /* Browser frames inside cards */
  .browser-frame {
    max-width: 100% !important;
  }

  .browser-content img {
    width: 100%;
    height: auto;
    display: block;
  }

  .browser-url {
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

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

  /* Comparison table → scrollable */
  .cmp-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--space-lg));
    padding: 0 var(--space-lg);
  }

  .comparison-table {
    min-width: 600px;
    font-size: var(--font-size-sm);
  }

  .comparison-table th,
  .comparison-table td {
    padding: 0.75rem;
  }

  /* How-it-works timeline */
  .timeline-content {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }

  .timeline-text {
    text-align: center;
  }

  /* N8N workflow diagram — horizontal scroll wrapper */
  .wf-window {
    overflow: hidden;
  }

  .wf-canvas {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Logo marquee */
  .logo-track {
    animation-duration: 30s;
  }

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

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

  /* About page stats bar */
  .stats-bar {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Tech badges */
  .tech-badges {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Inline style overrides for features page cards */
  .card[style*="padding: var(--space-2xl)"] {
    padding: var(--space-lg) !important;
  }

  /* Feature card headings */
  .card h3[style*="font-size: var(--font-size-2xl)"] {
    font-size: var(--font-size-xl) !important;
  }
}

/* ─── Mobile Portrait (max 480px) ─── */
@media (max-width: 480px) {
  :root {
    --font-size-5xl: 1.875rem;
    --font-size-4xl: 1.5rem;
    --font-size-3xl: 1.25rem;
    --space-4xl: 3rem;
    --space-3xl: 2.5rem;
  }

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

  section {
    padding: var(--space-2xl) 0;
  }

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

  /* Hero */
  .hero-particle-heading {
    font-size: 1.75rem;
    min-height: auto;
  }

  .hero-particle-sub {
    font-size: var(--font-size-base);
  }

  .particle-head-canvas {
    height: 220px;
  }

  .hero-particle-section {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: var(--space-2xl);
  }

  /* Buttons */
  .btn {
    padding: 0.625rem 1.25rem;
    font-size: var(--font-size-sm);
  }

  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-base);
  }

  /* Phone mockup */
  .phone-frame {
    width: 200px;
    height: 400px;
    border-radius: 28px;
  }

  .phone-screen {
    border-radius: 22px;
  }

  .phone-notch {
    width: 80px;
    height: 20px;
  }

  /* Browser frame */
  .browser-toolbar {
    padding: 6px 10px;
  }

  .browser-dots span {
    width: 7px;
    height: 7px;
  }

  .browser-url {
    font-size: 8px;
    padding: 3px 8px;
  }

  /* Cards */
  .card {
    padding: var(--space-md) !important;
    border-radius: var(--radius-md);
  }

  .card-icon {
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-md);
  }

  .card h3 {
    font-size: var(--font-size-lg) !important;
  }

  .card p {
    font-size: var(--font-size-xs);
  }

  /* Dashboard stats */
  .dash-stats {
    grid-template-columns: 1fr;
  }

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

  /* Logos */
  .logo-track {
    gap: var(--space-xl);
    animation-duration: 25s;
  }

  .logo-img {
    height: 20px;
  }

  /* Trust badges → compact horizontal */
  .trust-bar {
    gap: var(--space-xs);
  }

  .trust-badge {
    padding: 6px 10px;
    font-size: 0.625rem;
  }

  .trust-badge-icon {
    display: none;
  }

  /* Section header */
  .section-header {
    margin-bottom: var(--space-xl);
  }

  .section-header p {
    font-size: var(--font-size-sm);
  }

  /* Col text */
  .col-text h2 {
    font-size: var(--font-size-2xl) !important;
  }

  .col-text p {
    font-size: var(--font-size-sm);
  }

  /* Isolation cards */
  .isolation-card {
    padding: var(--space-md);
  }

  .isolation-card-icon {
    width: 40px;
    height: 40px;
  }

  /* Timeline */
  .timeline-dot {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-xs);
  }

  /* N8N workflow */
  .wf-canvas {
    min-width: 600px;
    min-height: auto !important;
  }

  /* Subject pills */
  .subject-pills {
    grid-template-columns: 1fr;
  }

  /* CTA section */
  .section-dark h2[style*="font-size"] {
    font-size: var(--font-size-2xl) !important;
  }

  .section-dark p[style*="font-size"] {
    font-size: var(--font-size-sm) !important;
  }

  /* Comparison table (pricing — keep horizontal scroll) */
  .comparison-table {
    min-width: 500px;
    font-size: var(--font-size-xs);
  }

  .comparison-table th,
  .comparison-table td {
    padding: 0.5rem;
  }

  /* Features comparison table → card layout on mobile */
  .features-cmp {
    min-width: unset !important;
  }

  .features-cmp thead {
    display: none;
  }

  .features-cmp tbody tr {
    display: block;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 8px rgba(33, 50, 94, 0.06);
  }

  .features-cmp tbody tr:hover {
    background: #fff !important;
  }

  .features-cmp tbody td {
    display: block;
    text-align: left !important;
    padding: 0.35rem 0 !important;
    border-bottom: none !important;
  }

  .features-cmp tbody td:first-child {
    font-size: var(--font-size-base) !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-light) !important;
  }

  .features-cmp tbody td:nth-child(2)::before {
    content: "Without AI Agent: ";
    font-weight: 600;
    color: var(--text-dark);
    font-size: var(--font-size-xs);
  }

  .features-cmp tbody td:nth-child(3)::before {
    content: "With WardiereAI: ";
    font-weight: 600;
    color: var(--text-dark);
    font-size: var(--font-size-xs);
  }

  .features-cmp tbody tr:last-child td {
    border-bottom: none !important;
  }

  /* Header */
  .header {
    height: 60px;
  }

  .logo {
    font-size: var(--font-size-lg);
  }

  .logo-icon {
    width: 26px;
    height: 26px;
  }

  /* Badge */
  .badge {
    font-size: 0.625rem;
    padding: 0.2rem 0.5rem;
  }

  /* Footer compact */
  .footer-compliance-badge {
    font-size: 0.5625rem !important;
  }
}

/* ─── Very Small Screens (max 360px) ─── */
@media (max-width: 360px) {
  :root {
    --font-size-5xl: 1.5rem;
    --font-size-4xl: 1.25rem;
  }

  .container {
    padding: 0 12px;
  }

  .hero-particle-heading {
    font-size: 1.375rem;
  }

  .particle-head-canvas {
    height: 180px;
  }

  .phone-frame {
    width: 180px;
    height: 360px;
  }

  .col-text h2 {
    font-size: var(--font-size-xl) !important;
  }
}

/* ─── Landscape phones ─── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-particle-section {
    min-height: auto;
    padding-top: calc(var(--header-height) + 1.5rem);
    padding-bottom: var(--space-xl);
  }

  .hero-particle-grid {
    grid-template-columns: 1fr 1fr;
  }

  .particle-head-canvas {
    height: 250px;
  }

  .mobile-menu a {
    font-size: var(--font-size-lg);
    padding: 8px 24px;
  }
}

/* ─── Touch devices ─── */
@media (hover: none) {
  .card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  .pricing-card:hover {
    transform: none;
  }

  .pricing-card.featured:hover {
    transform: none;
  }

  .btn:hover {
    transform: none;
  }
}

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

  .logo-track { animation: none; }
  .particle-head-canvas { display: none; }
}

/* ─── Print ─── */
@media print {
  .header, .mobile-menu, .particle-head-canvas, .hamburger, .logo-marquee, footer {
    display: none !important;
  }

  section { padding: 1rem 0; break-inside: avoid; }
  .browser-frame { box-shadow: none; border: 1px solid #ccc; }
  body { font-size: 12pt; color: #000; }
}