/* ─────────────────────────────────────────────────────────────────────────
   Ideofuzion — Responsive stylesheet
   Covers: mobile (≤767px) · tablet (768–1023px) · large desktop (≥1440px)
   All rules use !important to override inline React styles.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Grid utility classes ───────────────────────────────────────────────── */
/* Applied via className in JSX components */

/* ── TABLET: 768px – 1023px ─────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Section padding */
  #about-us, #services, #why-choose-us, #projects, #process,
  #ai-agents, #rwa-tokenization, #team, #awards,
  #insights, #careers, #contact {
    padding: 80px 40px !important;
  }
  section { padding-left: 40px !important; padding-right: 40px !important; }
  footer  { padding-left: 40px !important; padding-right: 40px !important; }

  /* 4 and 5 column grids → 2 columns */
  .r-grid-4,
  .r-grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* 3 column grids → 2 columns */
  .r-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 2 column grids: tighten gap */
  .r-grid-2 { gap: 40px !important; }

  /* Heading font sizes */
  .r-heading { font-size: clamp(32px, 4.5vw, 48px) !important; }

  /* Hero content padding */
  #hero > div:not(canvas):not([style*="position:absolute"]) {
    padding: 120px 40px 80px !important;
  }
}

/* ── MOBILE: ≤ 767px ────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── Section padding ── */
  #about-us, #services, #why-choose-us, #projects, #process,
  #ai-agents, #rwa-tokenization, #team, #awards,
  #insights, #careers, #contact {
    padding: 56px 20px !important;
  }
  section { padding-left: 20px !important; padding-right: 20px !important; }
  footer  { padding: 52px 20px 28px !important; }

  /* ── All r-grid classes collapse to 1 column ── */
  .r-grid,
  .r-grid-2,
  .r-grid-3,
  .r-grid-4,
  .r-grid-5 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Services 4-col: keep 2 cols on mobile (cards are short) */
  #services .r-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Stats bar (dark) 4-col: keep 2 cols */
  section[style*="#080C18"] .r-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Heading font sizes ── */
  .r-heading {
    font-size: clamp(26px, 7.5vw, 38px) !important;
    letter-spacing: -0.5px !important;
  }

  /* ── Hero ── */
  #hero > div[style] {
    padding: 100px 20px 56px !important;
  }
  /* Hero subtitle font */
  #hero p { font-size: 15px !important; }

  /* ── Header ── */
  header { padding: 0 20px !important; }

  /* ── Project cards: stack image below content ── */
  #projects .r-grid-2 > div:first-child { order: 1 !important; }
  #projects .r-grid-2 > div:last-child  { order: 2 !important; min-height: 220px !important; }

  /* ── Project content padding ── */
  #projects div[style*="52px 52px"] {
    padding: 28px 20px !important;
  }

  /* ── Testimonials: stop marquee, wrap cards ── */
  section[style*="padding:'80px 0'"] div[style*="animation"],
  section div[style*="marquee"] {
    animation: none !important;
    flex-wrap: wrap !important;
  }

  /* ── Awards flex: reduce gap ── */
  #awards div[style*="gap:48"] {
    gap: 20px !important;
    justify-content: center !important;
  }
  #awards img { max-height: 36px !important; width: auto !important; }

  /* ── CTA form: full width on mobile ── */
  #contact .r-grid-2 > div:last-child {
    padding: 28px 20px !important;
  }

  /* ── Footer bottom row ── */
  footer div[style*="justifyContent:'space-between'"] {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  /* ── Modals: fit viewport ── */
  div[style*="maxWidth:680"],
  div[style*="maxWidth:720"],
  div[style*="max-width: 680px"],
  div[style*="max-width: 720px"] {
    max-width: calc(100vw - 32px) !important;
    margin: 16px !important;
    max-height: 90vh !important;
  }
  /* Modal inner padding */
  div[style*="padding:'36px 40px"],
  div[style*="padding: 36px 40px"] {
    padding: 20px !important;
  }

  /* ── Timeline: horizontal scroll ── */
  #about-us section div[style*="justifyContent:'space-between'"],
  section[style*="0 80px 80px"] .reveal > div {
    overflow-x: auto !important;
    padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Logo strip ── */
  #partners div[style*="gap:64"] {
    gap: 32px !important;
  }

  /* ── Stats strip: 2 col layout ── */
  .r-grid-4.reveal {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Section header + description 2-col: stack ── */
  #services .r-grid-2 { margin-bottom: 28px !important; }

  /* ── Process section: horizontal scroll on mobile ── */
  #process .r-grid-5,
  .r-grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* ── RWA process ── */
  #rwa-tokenization .r-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* ── General large text reduction ── */
  div[style*="fontSize:52"],
  div[style*="font-size: 52px"] {
    font-size: 28px !important;
    letter-spacing: -0.5px !important;
  }
  div[style*="fontSize:36"],
  div[style*="font-size: 36px"] {
    font-size: 26px !important;
  }

  /* ── Misc spacing ── */
  div[style*="gap:80"] { gap: 24px !important; }
  div[style*="gap:60"] { gap: 20px !important; }

  /* ── Ensure no horizontal overflow ── */
  body { overflow-x: hidden; }
  section, footer, header { max-width: 100vw; }
}

/* ── LARGE DESKTOP: ≥ 1440px ────────────────────────────────────────────── */
@media (min-width: 1440px) {
  /* Inner containers already have maxWidth:1280 in inline styles — nothing to override */
}