/* ============================================================
   BrightSol-AI Website — Shared CSS
   Last updated: 2026-05-24

   This file holds:
   1. Base resets and font feature settings
   2. Mobile responsive overrides (768px tablet + 480px phone)

   Because the site is built with React inline styles (which win
   on specificity), the breakpoint rules below use !important to
   reliably override grid templates, padding, and font sizes on
   small viewports. ClassName hooks are defined in d2-refined.jsx.
   ============================================================ */

/* ─── 1. Shared resets ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
input, textarea { font: inherit; }
.site { font-feature-settings: "ss01", "ss02"; }
.mono { font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; }

@keyframes bsa-marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes bsa-marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.bsa-tool-track {
  animation: bsa-marquee-left 34s linear infinite;
  will-change: transform;
}

.bsa-tool-track-reverse {
  animation-name: bsa-marquee-left;
  animation-duration: 42s;
  animation-delay: -10s;
}

.bsa-tool-marquee:hover .bsa-tool-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .bsa-tool-track,
  .bsa-tool-track-reverse {
    animation: none !important;
    transform: none !important;
    flex-wrap: wrap;
    width: auto !important;
  }
}

/* ============================================================
   2. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ─── Tablet (≤768px) ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* Nav: hide middle links, hide status badge, collapse padding */
  .d2r-nav-inner {
    padding: 16px 24px !important;
    gap: 16px !important;
    grid-template-columns: 1fr auto !important;
  }
  .d2r-nav-links { display: none !important; }
  .d2r-nav-badge { display: none !important; }
  .d2r-nav-cta { gap: 0 !important; }

  /* Hero text block */
  .d2r-hero-text { padding: 24px 24px 0 !important; }
  .d2r-hero-eyebrow {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .d2r-hero h1 { font-size: clamp(40px, 9vw, 64px) !important; }

  /* Hero dark panel: hide console viz on mobile, restack beliefs */
  .d2r-hero-panel-inner { padding: 20px 24px 28px !important; }
  .d2r-hero-viz { display: none !important; }
  .d2r-hero-beliefs {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Bind rows: 120/1fr/200 → stacked */
  .d2r-bind-header { padding: 56px 24px 0 !important; }
  .d2r-bind-row-inner {
    padding: 28px 24px !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .d2r-bind-pivot-inner {
    padding: 28px 24px !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Methodology: 4-col → 2-col */
  .d2r-method-inner { padding: 80px 24px !important; }
  .d2r-method-header {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 40px !important;
  }
  .d2r-method-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .d2r-method-grid > div:nth-child(2) { border-right: none !important; }
  .d2r-method-grid > div:nth-child(1),
  .d2r-method-grid > div:nth-child(2) {
    border-bottom: 1px solid rgba(15, 28, 20, 0.09) !important;
  }

  /* Founder: 1fr/1.4fr → stacked */
  .d2r-founder { padding: 80px 24px !important; }
  .d2r-founder-header {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
  }
  .d2r-founder-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .d2r-founder-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* CTA: 1.4fr/1fr → stacked, reduce padding */
  .d2r-cta-section { padding: 0 24px !important; }
  .d2r-cta-grid {
    grid-template-columns: 1fr !important;
    padding: 64px 28px !important;
    gap: 32px !important;
  }

  /* Footer: 4-col → 2-col */
  .d2r-footer { padding: 32px 24px !important; }
  .d2r-footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
  .d2r-footer-meta {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* Ensure touch targets stay readable */
  .d2r-cta-grid a {
    padding: 18px 22px !important;
    min-height: 56px !important;
  }

  /* BrightSol 2026 homepage */
  .bsa-hero > div,
  .bsa-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .bsa-hero-grid,
  .bsa-operator-stage,
  .bsa-hero-copy,
  .bsa-hero-subline,
  .bsa-section-header,
  .bsa-pricing-head,
  .bsa-services-head-grid,
  .bsa-method-compact-head,
  .bsa-problem-grid,
  .bsa-report-grid,
  .bsa-owner-relief,
  .bsa-tooling-grid,
  .bsa-guide-grid,
  .bsa-leadership-grid,
  .bsa-final-cta,
  .bsa-insights {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .bsa-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .bsa-console-card-grid {
    grid-template-columns: 1fr !important;
  }
  .bsa-pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .bsa-workflow-visual {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .bsa-flow-arrow {
    display: none !important;
  }
  .bsa-price-row,
  .bsa-row,
  .bsa-analysis-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .bsa-price-head-row {
    display: none !important;
  }
  .bsa-price-row > div:last-child {
    text-align: left !important;
  }
  .bsa-analysis-row > div:last-child {
    text-align: left !important;
  }
  .bsa-hero-console {
    min-height: 440px !important;
  }

  /* Tooling: hide the decorative floating report-cover cards on mobile —
     on the full-width rail they overlap and hide the category-tile text. */
  .bsa-report-cover { display: none !important; }

  /* Tooling report frame: trim the large cascade padding on mobile so the
     report keeps usable width. */
  .bsa-report-frame { padding: 48px 34px 30px 20px !important; }
}

/* ─── Phone (≤480px) ──────────────────────────────────────── */
@media (max-width: 480px) {

  .d2r-nav-inner { padding: 14px 20px !important; }

  /* Hero text: smaller display type */
  .d2r-hero-text { padding: 20px 20px 0 !important; }
  .d2r-hero h1 { font-size: clamp(34px, 11vw, 48px) !important; }

  .d2r-hero-panel-inner { padding: 16px 20px 24px !important; }

  /* Bind sections */
  .d2r-bind-header { padding: 48px 20px 0 !important; }
  .d2r-bind-row-inner { padding: 24px 20px !important; }
  .d2r-bind-pivot-inner { padding: 24px 20px !important; }

  /* Methodology: 2-col → 1-col */
  .d2r-method-inner { padding: 64px 20px !important; }
  .d2r-method-grid {
    grid-template-columns: 1fr !important;
  }
  .d2r-method-grid > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(15, 28, 20, 0.09) !important;
  }
  .d2r-method-grid > div:last-child { border-bottom: none !important; }

  /* Founder */
  .d2r-founder { padding: 64px 20px !important; }
  .d2r-founder-stats {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* CTA */
  .d2r-cta-section { padding: 0 20px !important; }
  .d2r-cta-grid {
    padding: 56px 24px !important;
  }
  .d2r-cta-grid h2 { font-size: clamp(36px, 10vw, 56px) !important; }

  /* Footer: 2-col → 1-col */
  .d2r-footer { padding: 28px 20px !important; }
  .d2r-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* BrightSol 2026 homepage */
  .bsa-hero > div,
  .bsa-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .bsa-card-grid,
  .bsa-pricing-grid,
  .bsa-workflow-visual,
  .bsa-mini-matrix,
  .bsa-tooling-grid > div:first-child {
    grid-template-columns: 1fr !important;
  }
  .bsa-final-cta {
    padding: 56px 24px !important;
  }
  .bsa-hero h1 {
    font-size: clamp(38px, 12vw, 56px) !important;
  }
  .bsa-hero-editorial {
    padding-top: 36px !important;
    padding-bottom: 42px !important;
  }
  .bsa-hero-console {
    min-height: 380px !important;
  }
}