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

  /* ── Tablet: WhyUs grid-column spans — clamp to full row ── */
  /* Card 01 (gridColumn:1/3) is fine in 2-col grid (lines 1,2,3 → spans both).
     Card 06 (gridColumn:1/4) would create implicit 4th line — reset to 1/-1.  */
  #why-choose-us .r-grid-3 > div[style*="grid-column"] {
    grid-column: 1 / -1 !important;
  }

  /* ── Tablet: Projects heading row ── */
  #projects [style*="justify-content: space-between"][style*="align-items: flex-end"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* ── Tablet: reduce project card content padding ── */
  #projects div[style*="52px 52px"] {
    padding: 36px 28px !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; }

  /* ── Section heading rows: flex space-between/flex-end → column ──
     Catches: Projects header · Process header · TechStack header ·
              YouTube header · WhyUs Card01 bottom row            */
  section [style*="justify-content: space-between"][style*="align-items: flex-end"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }

  /* ── WhyUs: reset gridColumn spans so 1-col grid doesn't create implicit tracks ── */
  /* Card 01 (gridColumn:1/3) and Card 06 (gridColumn:1/4) both reset to full row */
  #why-choose-us .r-grid-3 > div[style*="grid-column"] {
    grid-column: 1 / -1 !important;
  }

  /* ── WhyUs Card 06: flexDirection row → column ── */
  #why-choose-us div[style*="flex-direction: row"] {
    flex-direction: column !important;
    padding: 24px 20px !important;
    align-items: flex-start !important;
  }
  /* Inner flex row (text + button) → also column */
  #why-choose-us div[style*="flex-direction: row"] > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !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;
  }

  /* ── Projects section: description paragraph → full width ── */
  #projects [style*="max-width: 340px"] {
    max-width: 100% !important;
  }

  /* ── Testimonials marquee: let it animate (overflow:hidden handles clipping) ── */
  /* No changes needed — the marquee works fine on mobile inside overflow:hidden */

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

  /* ── RWA process box: reduce inner padding ── */
  #rwa-tokenization div[style*="padding: 44px 48px"] {
    padding: 28px 20px !important;
    border-radius: 16px !important;
  }

  /* ── RWA stats panel padding ── */
  #rwa-tokenization div[style*="padding: 36px 40px"] {
    padding: 24px 20px !important;
  }

  /* ── Stats section: reduce per-item horizontal padding ── */
  section[style*="#080C18"] div[style*="padding: 20px 40px"] {
    padding: 16px 14px !important;
  }
  /* Stats section: shrink 52px numbers on mobile 2-col */
  section[style*="#080C18"] div[style*="font-size: 52px"] {
    font-size: 34px !important;
    letter-spacing: -1px !important;
  }

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

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

  /* ── Modals: fit viewport ── */
  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 — target header (36px 40px 28px) and body (28px 40px 36px) */
  div[style*="padding: 36px 40px"],
  div[style*="padding: 28px 40px"] {
    padding: 20px !important;
  }

  /* ── Timeline milestones: horizontal scroll ──
     Anchor on the unique position:relative + margin-top:40px parent div
     (browsers normalize padding "0" → "0px" so section[style*="0 80px…"]
     would never match — using DOM-safe selector instead).              */
  div[style*="position: relative"][style*="margin-top: 40px"] > div[style*="justify-content: space-between"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding-bottom: 16px !important;
  }
  div[style*="position: relative"][style*="margin-top: 40px"] > div[style*="justify-content: space-between"]::-webkit-scrollbar {
    display: none;
  }
  /* Each milestone: fixed width so they don't shrink below readable size */
  div[style*="position: relative"][style*="margin-top: 40px"] > div[style*="justify-content: space-between"] > div {
    flex: 0 0 90px !important;
    min-width: 90px !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: 2-col 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;
  }

  /* ── Careers job listing rows: stack tag/title on top, meta below ── */
  #careers div[style*="padding: 20px 24px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  /* Metadata row (dept · location · type · arrow): wrap on mobile */
  #careers div[style*="padding: 20px 24px"] > div:last-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
    flex-shrink: 1 !important;
  }
  /* Hide the decorative arrow chevron on mobile to save space */
  #careers div[style*="padding: 20px 24px"] > div:last-child > svg {
    display: none !important;
  }

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

  /* ── Misc spacing ── */
  div[style*="gap: 80px"] { gap: 24px !important; }
  div[style*="gap: 60px"] { 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 */
}