/*
  Homepage — Website Refresh 2026 1e (Figma), "Home" frame.
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=35-9753

  Unlike /features/*.php, the homepage isn't assembled from a small
  set of reusable content-block types — most sections here are
  one-off compositions. Where a section reuses an existing primitive
  (Testimonial, Accordion, Form CTA, Feature Icon) this file only
  adds the homepage-specific layout around it; it does not redefine
  anything those components' own stylesheets already own.

  Requires tokens.css, icons.css, typography.css, buttons.css,
  feature.css (for .rs-feature-icon), testimonial.css,
  accordion.css, and content-block.css (for .rs-content-block-row__
  inner--wide, reused throughout this file — see CONTAINMENT below)
  to be loaded first.

  CONTAINMENT: every section below is a full-bleed outer element
  (background colour, responsive side padding) wrapping a single
  inner element that carries the actual layout (flex/grid) and is
  also given content-block.css's .rs-content-block-row__inner--wide
  class (max-width: 1344px; margin: 0 auto) — the exact same
  two-tier "full-bleed row, capped+centred content" pattern
  content-block.css itself uses, so content stops growing past its
  Figma-intended 1344px width on viewports wider than the 1440px
  desktop canvas instead of stretching edge to edge. The Logo Marquee
  is the one deliberate exception — its scrolling track is meant to
  span (and overflow past) the full viewport width.
*/

/* ---------- Stat Pills ---------- */
/* Small rounded "proof point" badges — appear twice: light (under
   the Hero, on white) and dark (in the AI section, on Blue/800).
   The light usage sits in its own full-bleed/capped row (below); the
   dark usage nests inside .rs-ai-section__content instead, which is
   already contained by the AI section's own inner wrapper. */

.rs-stat-pills-row {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-32) var(--space-48) 0 var(--space-48);
}

.rs-stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
  align-items: center;
}

.rs-stat-pills-row .rs-stat-pills {
  justify-content: center;
}

.rs-stat-pill {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--space-24);
  background-color: var(--color-neutral-100);
  white-space: nowrap;
}
.rs-stat-pill__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-transparency-dark-90);
}
.rs-stat-pill__label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
  color: var(--color-transparency-dark-90);
}

.rs-stat-pill--dark {
  background-color: var(--color-transparency-light-20);
}
.rs-stat-pill--dark .rs-stat-pill__icon,
.rs-stat-pill--dark .rs-stat-pill__label {
  color: var(--color-transparency-light-90);
}

/* ---------- Logo Marquee ---------- */
/* Continuously-scrolling customer logo strip. The source image
   (assets/homepage/logo-marquee-strip.png) is a single flattened
   export of Figma's Logo Scroll row rather than 12 separate logo
   assets — two of Figma's own logos (UNICEF, 911 Memorial) didn't
   survive that flatten (empty/broken fills in the source file, same
   class of issue as the Hero's placeholder Museum background), so
   the strip has 10.

   The track repeats the strip 4 times and animates translateX by
   exactly -50% (not a hardcoded pixel value — an earlier version
   used calc(-1440px - gap) assuming the strip always renders at
   exactly 1440px, which produced a visible judder at the loop point
   because the browser's actual sub-pixel rendered width didn't
   always match that assumption exactly). -50% of the track is, by
   construction, the exact midpoint between copy 2 and copy 3 —
   whatever the strip's real rendered width turns out to be — so
   copies 3+4 are pixel-identical to copies 1+2 and the loop is
   seamless. Four copies (rather than two) also means the track
   comfortably exceeds very wide desktop viewports, where two copies
   alone could run out before the loop resets. */

.rs-logo-marquee {
  overflow: hidden;
  width: 100%;
  padding: var(--space-48) 0;
  background-color: var(--color-neutral-white-50);
}

.rs-logo-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-64);
  width: max-content;
  /* 60s, not 30s: moving to a 4-copy track (see comment above) means
     each loop now travels 2 strip-widths instead of 1, so the
     duration is doubled too, to keep the same on-screen scroll speed
     rather than silently doubling it. */
  animation: rs-logo-marquee-scroll 60s linear infinite;
}

.rs-logo-marquee__strip {
  display: block;
  height: 80px;
  width: auto;
  flex-shrink: 0;
}

@keyframes rs-logo-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs-logo-marquee__track {
    animation: none;
  }
}

/* ---------- Sector Card ("Demo CTA" in Figma) ---------- */
/* A Feature Icon + heading + body, with an optional "See how X use
   ResourceSpace" link row. Two sizings: Wide (the 5-card "Every
   sector" grid) and Compact (the 4-card grid inside the Open
   Source/WHY section) — same shell, different width/background/icon
   treatment per their real context. */

/* CSS grid rather than flex-wrap: with 5 cards in 2 columns, a
   flex-wrap row's lone last item would grow to fill its empty row
   (flex-grow) unless carefully zeroed out — a grid's implicit last
   row just leaves the second column empty, which is what "half card
   until things stack" actually wants, with no extra rule needed. */
.rs-sector-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-32);
  width: 100%;
}

@media (max-width: 720px) {
  .rs-sector-grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
}

.rs-sector-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  padding: var(--space-24);
  border-radius: var(--space-16);
}

.rs-sector-card .rs-sector-card__heading {
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
  margin: 0;
  color: var(--color-transparency-dark-90);
}

.rs-sector-card .rs-sector-card__body {
  margin: 0;
  color: var(--color-transparency-dark-90);
}

.rs-sector-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-16);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-transparency-dark-90);
  text-decoration: underline;
}
.rs-sector-card__link .rs-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.rs-sector-card--wide {
  background-color: var(--color-neutral-100);
}
.rs-sector-card--wide .rs-feature-icon--60 {
  background-color: var(--color-neutral-white-50);
}

.rs-sector-card--compact {
  background-color: var(--color-neutral-white-50);
}
.rs-sector-card--compact .rs-feature-icon--60 {
  background-color: var(--color-neutral-100);
}

/* ---------- Sectors Intro / Open Source sections shared layout ---------- */
/* Both are a fixed-width heading+copy column next to a flexible
   content column — the same two-column shape, different content. */

.rs-content-block-row--sectors-intro {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-48) var(--space-48) 0 var(--space-48);
}
.rs-content-block-row--sectors-intro .rs-content-block-row__inner--wide {
  display: flex;
  gap: var(--space-48);
  align-items: flex-start;
}
.rs-content-block-row--sectors-intro .rs-content-block-row__heading {
  flex: 0 0 532px;
  margin: 0;
}
.rs-content-block-row--sectors-intro .rs-content-block-row__detail {
  flex: 1 1 0%;
  max-width: 764px;
}
.rs-content-block-row--sectors-intro .rs-content-block-row__detail .rs-body {
  margin-bottom: var(--space-24);
}

.rs-content-block-row--sectors-grid {
  padding: var(--space-48) var(--space-48) var(--space-72) var(--space-48);
}
.rs-content-block-row--sectors-grid .rs-sector-grid {
  max-width: 1344px;
  margin: 0 auto;
}

.rs-why-section {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-72) var(--space-48);
  background-color: var(--color-neutral-100);
}
.rs-why-section .rs-content-block-row__inner--wide {
  display: flex;
  gap: var(--space-48);
  align-items: flex-start;
}

.rs-why-section__intro {
  /* flex-shrink: 0 (i.e. flex: 0 0 648px) would refuse to shrink even
     once the container gets narrower than 648px + the sector grid's
     own minimum content width — overflowing horizontally rather than
     compressing, in the gap between "everything fits" and the
     1100px breakpoint below that stacks this into a column instead.
     0 1 648px keeps 648px as the preferred width but lets it actually
     shrink first. */
  flex: 0 1 648px;
}
.rs-why-section__intro .rs-heading {
  margin-bottom: var(--space-32);
}

.rs-why-section__logos {
  display: flex;
  align-items: center;
  gap: var(--space-48);
}
.rs-why-section__logos img {
  display: block;
}
.rs-why-section__logos .rs-homepage-bcorp-logo {
  height: 134px;
  width: auto;
}
.rs-why-section__logos .rs-homepage-eo-logo {
  height: 80px;
  width: auto;
  mix-blend-mode: multiply;
  opacity: 0.9;
}

/* ---------- AI Video Section ---------- */

.rs-ai-section {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-72) var(--space-48);
  background-color: var(--color-blue-800);
}
.rs-ai-section .rs-content-block-row__inner--wide {
  display: flex;
  gap: var(--space-72);
  align-items: flex-start;
}

/* aspect-ratio matches homepage.mp4's actual native resolution
   (700x538, confirmed via ffprobe) — it was previously 766/431 (a
   16:9-ish ratio guessed from the design frame's own width, not the
   real footage), which is significantly wider than the video's real
   ~1.3:1 shape. With object-fit: cover below, that mismatch forced
   the video to crop its top/bottom to fill the wider box, cutting
   off on-screen UI text near the edges of the frame. Matching the
   real ratio means cover never needs to crop anything — the box's
   shape already equals the video's own shape. */
.rs-ai-section__video {
  position: relative;
  flex: 1 1 0%;
  max-width: 766px;
  aspect-ratio: 16 / 9;
  border-radius: var(--space-8);
  background-color: var(--color-green-300);
  overflow: hidden;
}

/* Without this, <video> has no intrinsic reason to fill the wrapper —
   it renders at its own native resolution instead, and overflow:
   hidden above just clips whatever corner of that (much larger) box
   happens to fall inside the frame, instead of showing the whole
   thing scaled to fit. object-fit: cover is now a no-op in practice
   (the wrapper's aspect-ratio exactly matches the video's own), kept
   rather than switched to "contain" so nothing changes if the video
   file is ever swapped for one with a slightly different ratio —
   cover just crops the (hopefully small) difference instead of
   letterboxing it. */
.rs-ai-section__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  clip-path: none;
  margin: 0;
}

/* .rs-video-toggle itself is the existing Controls component
   (css/controls.css, incl. its own play/pause icon stroke-width
   fix) — only its position within the video frame is homepage-
   specific, added here rather than redefining the button. */
.rs-ai-section__video .rs-video-toggle {
  position: absolute;
  left: var(--space-32);
  bottom: var(--space-32);
}

.rs-ai-section__content {
  flex: 1 1 0%;
  min-width: 0;
  color: var(--color-neutral-white-50);
}
.rs-ai-section__content .rs-heading,
.rs-ai-section__content .rs-body {
  color: var(--color-neutral-white-50);
}
.rs-ai-section__content .rs-heading {
  margin-bottom: var(--space-24);
}
.rs-ai-section__content .rs-stat-pills {
  margin-bottom: var(--space-24);
}
.rs-ai-section__content .rs-body {
  max-width: 507px;
  margin-bottom: var(--space-24);
}

/* ---------- FAQ Section ---------- */

.rs-faq-section {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-72) var(--space-48);
}
.rs-faq-section .rs-content-block-row__inner--wide {
  display: flex;
  gap: var(--space-48);
  align-items: flex-start;
}

.rs-faq-section__intro {
  /* Paired with .rs-faq-section__list below, also flex: 0 0 648px —
     two rigid, non-shrinking 648px columns + a 48px gap is a hard
     1344px minimum with nowhere to give, so it overflowed
     horizontally in the gap between "everything fits" and the
     1100px breakpoint that stacks this into a column instead. 0 1
     lets both actually shrink to fit first. */
  flex: 0 1 648px;
}
.rs-faq-section__intro .rs-heading {
  margin-bottom: var(--space-24);
}
.rs-faq-section__intro .rs-body {
  margin-bottom: var(--space-32);
}

.rs-faq-section__actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
.rs-faq-section__actions .rs-text-link {
  color: var(--color-transparency-dark-80);
}

.rs-faq-section__list {
  flex: 0 1 648px;
}

/* ---------- Dual Testimonial Row ---------- */
/* Two Testimonial instances side by side at their real Figma
   widths (509px / 787px) rather than an even split — that's what
   the actual homepage content calls for (a short quote next to a
   longer one), not a systemic ratio. */

.rs-testimonial-duo {
  width: 100%;
  padding: 0 var(--space-48) var(--space-72) var(--space-48);
  box-sizing: border-box;
}
.rs-testimonial-duo .rs-content-block-row__inner--wide {
  display: flex;
  gap: var(--space-48);
  align-items: stretch;
}
.rs-testimonial-duo .rs-testimonial {
  min-width: 0;
}
.rs-testimonial-duo .rs-testimonial:first-child {
  flex: 0 0 509px;
}
.rs-testimonial-duo .rs-testimonial:last-child {
  flex: 1 1 auto;
}

@media (max-width: 1100px) {
  .rs-content-block-row--sectors-intro .rs-content-block-row__inner--wide,
  .rs-why-section .rs-content-block-row__inner--wide,
  .rs-ai-section .rs-content-block-row__inner--wide,
  .rs-faq-section .rs-content-block-row__inner--wide,
  .rs-testimonial-duo .rs-content-block-row__inner--wide {
    flex-direction: column;
  }
  .rs-content-block-row--sectors-intro .rs-content-block-row__heading,
  .rs-why-section__intro,
  .rs-faq-section__intro,
  .rs-faq-section__list,
  .rs-testimonial-duo .rs-testimonial:first-child {
    flex-basis: auto;
    width: 100%;
  }
}

/* 640px, not 1100px above: this is specifically about phone-width
   padding, the same breakpoint content-block.css and footer.css
   already use for their own narrowest padding step — a separate
   concern from the tablet-width column-stacking above, so kept in
   its own block rather than folded into it. Every section here was
   carrying the desktop 48px horizontal padding (and often a 72px
   vertical one) with no mobile reduction at all. */
@media (max-width: 640px) {
  .rs-stat-pills-row {
    padding: var(--space-20) var(--space-16) 0 var(--space-16);
  }

  .rs-logo-marquee {
    padding: var(--space-20) 0;
  }

  .rs-testimonial-duo {
    padding: 0 var(--space-16) 0 var(--space-16);
  }

  /* The two testimonials already stack (see the 1100px breakpoint
     above) — this is just the gap between them once they do. */
  .rs-testimonial-duo .rs-content-block-row__inner--wide {
    gap: var(--space-16);
  }

  .rs-content-block-row--sectors-intro {
    padding: var(--space-32) var(--space-16) 0 var(--space-16);
  }

  .rs-content-block-row--sectors-intro .rs-content-block-row__inner--wide {
    gap: var(--space-16);
  }

  .rs-content-block-row--sectors-grid,
  .rs-ai-section,
  .rs-why-section,
  .rs-faq-section {
    padding: var(--space-32) var(--space-16);
  }

  /* Left-aligned reads fine next to a wide intro column on desktop;
     once that column is full-width and stacked (1100px breakpoint
     above), centring the two logos looks more deliberate. */
  .rs-why-section__logos {
    justify-content: center;
  }

  /* 80% of desktop (134px/80px), not a fixed redesigned size — keeps
     the two logos' relative proportion to each other unchanged. */
  .rs-why-section__logos .rs-homepage-bcorp-logo {
    height: 107px;
  }
  .rs-why-section__logos .rs-homepage-eo-logo {
    height: 64px;
  }
}