/* Page Intro Hero — light-bg centered intro block.
   Tokens only; no raw hex/px where a token exists.
   Figma 693:3265 (desktop) / 1009:7686 (mobile). */

.rw-block-page-intro-hero {
  background: var(--rw-color-bg-mist); /* #E8E8E9 — matches product-cards section bg */
  color: var(--rw-color-primary-green);
  text-align: center;
}

/* Content column — flex stack, centered. Capped at 1130px to control measure. */
.rw-block-page-intro-hero .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rw-space-lg); /* 2rem = 32px — Figma spec gap between content items */
  max-width: 1130px;
  margin-inline: auto;
}

/* Eyebrow — inherits global .rw-eyebrow; no overrides needed on light bg */

/* Heading — h1 uses display token (36→80px); h2 inherits global h2 clamp. */
.rw-block-page-intro-hero h1.heading {
  font-size: var(--rw-display-size);
  line-height: var(--rw-display-line);
  letter-spacing: var(--rw-display-tracking);
}

/* Body — muted grey, constrained width, centered */
.rw-block-page-intro-hero .body {
  margin: 0;
  max-width: 37.5rem; /* ~600px */
  color: var(--rw-color-grey-01);
}

/* CTA — block-scoped .btn-primary styles (yellow bg, ink-deep text).
   Mirrors hero-media pattern; global .rw-btn alias not applied here
   because markup uses .btn-primary class for parity with other hero blocks. */
.rw-block-page-intro-hero .btn-primary {
  display: inline-flex;
  align-items: center;
  height: 3.125rem; /* 50px — Figma-exact, matches hero-media */
  padding: 0 var(--rw-space-md);
  font-family: var(--rw-font-text);
  font-weight: 600;
  font-size: var(--rw-p1-size);
  line-height: 1;
  color: var(--rw-color-ink-deep);
  background: var(--rw-color-primary-yellow);
  border-radius: var(--rw-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
.rw-block-page-intro-hero .btn-primary:hover {
  background: var(--rw-color-primary-yellow-hover);
  opacity: 1; /* override generic a:hover opacity */
}
.rw-block-page-intro-hero .btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--rw-state-focus-ring);
}

/* CTA wrapper — keeps button + microcopy as a single flex item so microcopy
   sits tight below the button (12px) instead of inheriting the parent 32px gap. */
.rw-block-page-intro-hero .cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem; /* 4px */
}
.rw-block-page-intro-hero .cta-microcopy {
  margin: 0;
  color: var(--rw-color-grey-01);
  font-size: 0.75rem; /* 12px */
  line-height: 1.75rem; /* 28px */
  letter-spacing: 0.015em;
}

/* Mobile — ≤768px */
@media (max-width: 768px) {
  .rw-block-page-intro-hero .content {
    gap: var(--rw-space-md); /* 1.5rem = 24px — reduced gap on mobile */
  }
}