/* ============================================================
   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; }

/* ============================================================
   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: keep image, restack beliefs */
  .d2r-hero-panel-inner { padding: 20px 24px 28px !important; }
  .d2r-hero-beliefs {
    grid-template-columns: 1fr !important;
    gap: 20px !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;
  }
}

/* ─── 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;
  }
}