/* =============================================================
   HERO.CSS
   Two-column hero: serif headline + CTA buttons on the left,
   single-column edge-to-edge scrolling image on the right.
   Structure mirrors the working service-hero pattern (fixed-height
   flex container + stretch + negative-margin bleed) — colors and
   typography come from the site's own variables.
   Depends on: global.css
   ============================================================= */

/* ----------------------------------------------------------
   1. SECTION
   ---------------------------------------------------------- */
.hero {
  background-color: var(--color-neutral-canvas);
  background-image:
    linear-gradient(var(--color-neutral-grid-gray) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-neutral-grid-gray) 1px, transparent 1px);
  background-size: 32px 32px;
  overflow: hidden;
  padding: 0 var(--space-16); /* the ONE horizontal gutter for the whole section — nothing else adds to it */
}

.hero-inner {
  max-width: var(--grid-desktop-max);
  margin: 0 auto;
  height: auto;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: var(--space-32, 32px);
  padding: var(--space-48) 0; /* vertical only — horizontal gutter lives solely on .hero now */
  position: relative;
}

/* ----------------------------------------------------------
   2. HEADLINE + COPY + CTAS
   ---------------------------------------------------------- */
.hero-content {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: var(--amm-header-h);
}

.hero-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.25;
  color: var(--color-primary-black);
  margin: 0 0 var(--space-16);
  max-width: 720px;
}

.hero-subtext {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-neutral-text-gray);
  max-width: 480px;
  margin: 0 0 var(--space-16);
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------
   3. IMAGE SCROLL — single column, edge-to-edge, auto-scrolling
   ---------------------------------------------------------- */
.hero-image-scroll {
  flex: none;
  width: 100%;
  height: 260px;
  overflow: hidden;
  /* mobile: bleed bottom only; horizontal gutter now comes solely from .hero's own padding */
  margin: 0 0 calc(-1 * var(--space-48)) 0;
}

.hero-image-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: heroImgScroll 26s linear infinite;
}

.hero-image-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 5;
  overflow: hidden;
  flex-shrink: 0;
}

.hero-image-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes heroImgScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.hero-image-scroll:hover .hero-image-track {
  animation-play-state: paused;
}

/* ----------------------------------------------------------
   4. DESKTOP OVERRIDES
   ---------------------------------------------------------- */
@media (min-width: 1024px) {
  .hero {
   /* padding: 0 var(--grid-desktop-margins); the ONE horizontal gutter, desktop size */
     padding: 0 40px; /* the ONE horizontal gutter, desktop size */
  }

  .hero-inner {
    flex-direction: row;
    justify-content: space-between;
    height: 600px;               /* fixed hero height, same mechanism as the service hero */
    gap: 64px;
    padding: 40px 0;              /* vertical only */
  }

  .hero-content {
     /* flex: 1 1 62%; */
     flex: 1 1 80%;
    max-width: 680px;
  }

  .hero-heading { font-size: 44px; max-width: 24ch; }
  .hero-subtext { font-size: var(--fs-body); }

  .hero-image-scroll {
    flex: 1 1 38%;
    max-width: 480px;
    height: auto;   /* let align-items: stretch size it to the fixed 600px hero */
    /* bleed top/bottom only — horizontal gutter is handled entirely by .hero's own padding now */
    margin: -64px 0 -64px 0;
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-image-track { animation: none !important; }
}