/*
  HOME PAGE STYLES
*/

.hero {
  position: relative;
  padding-block-start: calc(var(--space-7) * 1.4);
  padding-block-end: calc(var(--space-6) * 2);
  /* Mobile fallback: solid gradient wash, no image request — see
     assets/README.md for the project's photo-background convention. */
  background: linear-gradient(160deg, var(--color-accent-green-200), var(--color-accent-amber-100));
}

@media (min-width: 600px) {
  .hero {
    /* Full-bleed photo background: the tint gradient and photo are stacked
       as two background layers so a single `background-size`/`position`/
       `attachment` value (repeated across layers per the CSS spec) applies
       to both. `fixed` pins the image to the viewport so it stays put while
       the hero's own content, and every section after it, scrolls over it —
       the effect ends the moment the hero box scrolls out of view, since
       later sections have opaque backgrounds. Known limitation: iOS Safari
       has historically ignored `background-attachment: fixed` and silently
       falls back to normal scroll there — harmless, just no parallax. */
    background-image:
      linear-gradient(160deg, rgba(250, 246, 239, 0.78), rgba(250, 246, 239, 0.6)),
      url('../assets/images/Backgrounds/Slide-background-green1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

.hero__eyebrow {
  margin-bottom: var(--space-3);
}

.hero__title {
  /* 20% down from --fs-display (clamp(2.5rem, 1.8rem + 3.2vw, 5rem)) —
     scoped here rather than in the shared token since case study titles
     also use --fs-display and shouldn't shrink with it. */
  font-size: clamp(2rem, 1.44rem + 2.56vw, 4rem);
  max-width: 20ch;
}

.hero__lede {
  font-size: 1.2rem;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.work-preview__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}