/* =========================================================================
   RCV Marketing Site — global tweaks + responsive overrides
   Imports the design-system tokens and adds:
     - smooth defaults & accessible focus
     - mobile breakpoints (the components are inline-styled at desktop sizes;
       we narrow them down here without touching JSX)
   ========================================================================= */

@import url("colors_and_type.css");

/* ---- accessibility & defaults ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--rcv-light-grey); }
img { max-width: 100%; height: auto; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--rcv-growth);
  outline-offset: 3px;
  border-radius: 2px;
}

/* hide nav-toggle by default; shown on mobile */
.nav-toggle { display: none; }

/* ---- TABLET ≤1024px ---- */
@media (max-width: 1024px) {
  /* Hero: stack columns */
  section[style*="grid-template-columns: 1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Intro / Team lead / Portfolio header: stack columns */
  section[style*="grid-template-columns: minmax(0, 5fr) minmax(0, 7fr)"] > div,
  section[style*="grid-template-columns: 1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Carousel slide: stack photo over text */
  section[style*="grid-template-columns: 1.6fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* CTA: stack */
  section[style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Founder Perspective: 1 column */
  section[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  /* Team grid: 2 cols */
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Portfolio grid: 3 cols */
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Footer: stack */
  footer div[style*="grid-template-columns: 1.6fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  /* Section padding */
  section { padding-left: 32px !important; padding-right: 32px !important; }
  header { padding-left: 24px !important; padding-right: 24px !important; }
  footer { padding-left: 32px !important; padding-right: 32px !important; }
}

/* ---- MOBILE ≤640px ---- */
@media (max-width: 640px) {
  /* Show hamburger; hide desktop nav links */
  .nav-toggle { display: inline-flex !important; }
  header nav { display: none !important; }
  header nav.nav-open { display: flex !important; }
  header .nav-cta { display: none !important; }

  /* Mobile open-nav drawer */
  header nav.nav-open {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: inherit;
    padding: 16px 24px 24px !important;
    gap: 16px !important;
    border-bottom: 1px solid rgba(33,58,44,0.08);
  }

  /* Logo size in nav */
  header img[alt="Renewal Climate Ventures"] { height: 40px !important; }

  /* Hero sizing */
  section h1[style*="clamp(56px, 6.5vw, 96px)"] {
    font-size: 44px !important;
    line-height: 1.0 !important;
  }
  /* Intro / Team / Portfolio lead headlines */
  section h1[style*="font-size: 56px"],
  section h2[style*="font-size: 56px"] {
    font-size: 36px !important;
    line-height: 1.05 !important;
  }
  section h2[style*="font-size: 40px"] {
    font-size: 30px !important;
    line-height: 1.1 !important;
  }
  section h3[style*="font-size: 48px"] {
    font-size: 32px !important;
  }

  /* Body text scale */
  section p[style*="font-size: 20px"] { font-size: 17px !important; }
  section p[style*="font-size: 19px"] { font-size: 17px !important; }
  section p[style*="font-size: 18px"] { font-size: 16px !important; }

  /* Section padding */
  section { padding: 64px 20px !important; }
  header { padding: 14px 20px !important; }
  footer { padding: 56px 20px 32px !important; }

  /* Team grid: 1 col on phone */
  div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Portfolio grid: 2 cols on phone */
  section div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer: 1 col */
  footer div[style*="grid-template-columns: 1.6fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  footer div[style*="justify-content: space-between"] {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  /* Founder Perspective: portrait + text vertical on phone */
  article[style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }
}

/* Ensure team-card + portfolio-card aspect ratios stay reasonable on phone */
@media (max-width: 480px) {
  article[style*="aspect-ratio: 4 / 5"] { aspect-ratio: 4 / 5; }
}

/* Print: simplify */
@media print {
  header, footer, .nav-toggle { display: none !important; }
  section { padding: 24px !important; break-inside: avoid; }
}