/*
 * responsive.css — RECONFLO v2
 * Breakpoints: 1024px tablet | 768px mobile | 480px small
 */

/* ── TABLET 1024px ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .footer__brand { grid-column: 1 / -1; }
  .stats-band__inner { grid-template-columns: repeat(2,1fr); }
  .split { gap: var(--space-10); }
  .feature-section__layout { gap: var(--space-10); }
  .story-section__layout { gap: var(--space-10); }
  .contact-layout { gap: var(--space-10); }
  .demo-layout { gap: var(--space-10); }
  .tile-grid-3 { grid-template-columns: repeat(2,1fr); }
  .section-heading { font-size: var(--text-3xl); }
  .buyer-profiles-grid { grid-template-columns: repeat(2,1fr); }
  .icp-groups-grid { grid-template-columns: 1fr; }
  .roi-strip { grid-template-columns: repeat(2,1fr); }
  .bw-table__header, .bw-table__row { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── MOBILE 768px ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --nav-height: 60px; }

  .section { padding-block: var(--space-16); }
  .section--lg { padding-block: var(--space-20); }
  .container { padding-inline: var(--space-4); }

  /* Nav */
  .nav__links, .nav__cta { display: none; }
  .nav__hamburger { display: flex; }
  .nav__inner { padding-inline: var(--space-4); }
  .nav__logo img { height: 36px; max-width: 160px; }

  /* Hero */
  .hero { min-height: auto; padding-top: calc(var(--nav-height) + var(--space-10)); padding-bottom: var(--space-16); }
  .hero__title { font-size: clamp(2.25rem, 9vw, 3.5rem); }
  .hero__subtitle { font-size: var(--text-base); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .trust-bar__logos { gap: var(--space-6); }
  .trust-bar__logos img { height: 20px; }

  /* Page hero */
  .page-hero { padding-top: calc(var(--nav-height) + var(--space-8)); padding-bottom: var(--space-12); }
  .page-hero__title { font-size: clamp(2rem, 8vw, 2.75rem); }

  /* Headings */
  .section-heading { font-size: var(--text-2xl); }
  .section-header { margin-bottom: var(--space-8); }

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

  /* Stats band */
  .stats-band__inner { grid-template-columns: repeat(2,1fr); }
  .stat-block__number { font-size: var(--text-5xl); }

  /* Split → stacked */
  .split { grid-template-columns: 1fr; gap: var(--space-8); direction: ltr; }
  .split--reverse { direction: ltr; }
  .feature-section__layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .story-section__layout { grid-template-columns: 1fr; gap: var(--space-8); }

  /* CTA */
  .cta-section { padding-block: var(--space-20); }
  .cta-section__title { font-size: clamp(2rem, 8vw, 2.75rem); }

  /* Cards */
  .card { padding: var(--space-6); }
  .tile-grid-2, .tile-grid-3 { grid-template-columns: 1fr; }
  .recon-ai-features { grid-template-columns: 1fr; }

  /* Footer */
  .footer__top { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__brand { grid-column: auto; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-4); }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-10); }
  .demo-layout { grid-template-columns: 1fr; gap: var(--space-10); }
  .form-row { grid-template-columns: 1fr; }

  /* Team */
  .team-grid { grid-template-columns: 1fr 1fr; max-width: 100%; }
  .offices-grid { grid-template-columns: 1fr; max-width: 100%; }

  /* FAQ */
  .faq-item__question { padding: var(--space-5); }
  .faq-item__answer { padding: 0 var(--space-5) var(--space-5); }

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

  /* Who we serve */
  .icp-groups-grid { grid-template-columns: 1fr; }
  .buyer-profiles-grid { grid-template-columns: 1fr; }
  .roi-strip { grid-template-columns: repeat(2,1fr); }

  /* Before/with table */
  .bw-table { overflow-x: auto; }
  .bw-table__header, .bw-table__row { min-width: 580px; }

  /* Stat pills */
  .stat-pills { gap: var(--space-3); }
  .stat-pill { flex: 1 1 calc(50% - var(--space-3)); }

  /* Platform teaser */
  .platform-teaser__caption { flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); }

  /* Trust badges */
  .trust-badges__inner { gap: var(--space-5); }
  .social-proof-logos { gap: var(--space-5); }
}

/* ── SMALL 480px ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .container { padding-inline: var(--space-4); }
  .hero__title { font-size: 2rem; letter-spacing: -0.02em; }
  .trust-bar__logos { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-2); -webkit-overflow-scrolling: touch; }
  .stat-pills { flex-direction: column; }
  .stat-pill { flex: none; width: 100%; }
  .stats-band__inner { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; max-width: 280px; margin-inline: auto; }
  .cert-grid { grid-template-columns: 1fr; }
  .tile { flex-direction: column; gap: var(--space-3); }
  .outcome-card { flex-direction: column; gap: var(--space-3); }
  .faq-item__text { font-size: var(--text-sm); }
  .btn--lg { padding: 0.875rem 1.5rem; }
  .page-hero__title { font-size: 1.875rem; }
  .section-heading { font-size: var(--text-2xl); }
  .roi-strip { grid-template-columns: 1fr; }
  .buyer-profiles-grid { grid-template-columns: 1fr; }
}

/* ── PRINT ───────────────────────────────────────────────────────────────── */
@media print {
  .nav, .trust-badges, .cta-section, .footer__bottom .footer__social { display: none; }
  body { background: #fff; color: #000; padding-top: 0; }
  .legal-body { max-width: 100%; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #555; }
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .fade-in { opacity: 1; transform: none; transition: none; }
}

/* ── FOCUS VISIBLE ───────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* ── ADDITIONAL MOBILE FIXES ─────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Stats band — 2 cols on mobile */
  .stats-band__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stat block padding reduce */
  .stat-block {
    padding: var(--space-6) var(--space-4);
  }

  /* Platform screenshot 3-col → 1-col */
  .grid-3 {
    grid-template-columns: 1fr;
  }

  /* Platform teaser caption stack */
  .platform-teaser__caption {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  /* Field guide section — stack, center cover */
  .guide-panel { padding: var(--space-10) var(--space-6); }
  .guide-split { grid-template-columns: 1fr; gap: var(--space-10); text-align: center; }
  .guide-cover { max-width: 300px; }
  .guide-content__sub { margin-inline: auto; }
  .guide-content__actions { justify-content: center; }

  /* Before/with table horizontal scroll */
  .bw-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bw-table__header,
  .bw-table__row {
    min-width: 560px;
  }

  /* ROI strip — 2 cols */
  .roi-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ICP who-we-serve cards — stack */
  .icp-groups-grid {
    grid-template-columns: 1fr;
  }

  /* Buyer profiles — stack */
  .buyer-profiles-grid {
    grid-template-columns: 1fr;
  }

  /* Flow diagram steps — wrap */
  .flow-steps-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hero proof bar — wrap text */
  .hero__proof {
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
  }

  /* Nav inner — tighten */
  .nav__inner {
    padding-inline: var(--space-4);
    gap: var(--space-3);
  }

  /* Footer bottom — stack */
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

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

  /* Team grid mobile */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  /* Who-we-serve ICP list cards — reduce padding */
  .icp-list-card-inner {
    grid-template-columns: auto 1fr !important;
    gap: var(--space-4) !important;
    padding: var(--space-5) var(--space-5) !important;
  }

  /* Section heading line breaks */
  .section-heading br {
    display: none;
  }

  /* CTA section padding */
  .cta-section {
    padding-block: var(--space-16);
  }

  /* Tile grid 2 → single */
  .tile-grid-2 {
    grid-template-columns: 1fr;
  }

  .tile-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  /* Stats band — single col on smallest screens */
  .stats-band__inner {
    grid-template-columns: 1fr;
  }

  /* ROI strip — single col */
  .roi-strip {
    grid-template-columns: 1fr;
  }

  /* Hero title smaller */
  .hero__title {
    font-size: 1.75rem;
  }

  /* Page hero title */
  .page-hero__title {
    font-size: 1.625rem;
  }

  /* Section heading */
  .section-heading {
    font-size: 1.375rem;
  }

  /* Stat block number */
  .stat-block__number {
    font-size: 2rem;
  }

  /* Nav logo smaller on tiny screens */
  .nav__logo img {
    height: 34px;
    max-width: 140px;
  }

  /* BW table — reduce min-width */
  .bw-table__header,
  .bw-table__row {
    min-width: 480px;
  }

  /* Card padding reduce */
  .card {
    padding: var(--space-5);
  }

  /* Remove br in headings on mobile */
  h1 br, h2 br {
    display: none;
  }
}