/* ==========================================================================
   Hero — MyRoomTool Blog (listing)
   Full-bleed background. Typography, container, spacing → Foundation.
   Search styles → components/common/search/search.css
   ========================================================================== */

.site-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: clamp(280px, 48vw, 520px);
  padding-top: var(--space-s);
  padding-bottom: var(--space-xxl);
  background-color: var(--color-text);
  background-image: url("../../../images/hero/hero-home.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Soft scrim for readable type on photo (not a decorative badge) */
.site-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(34, 50, 69, 0.72) 0%,
    rgba(34, 50, 69, 0.35) 45%,
    rgba(34, 50, 69, 0.15) 100%
  );
  pointer-events: none;
}

.site-hero .container {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
}

.site-hero__content {
  max-width: 40rem;
}

.site-hero__title,
.site-hero__lead {
  color: var(--color-surface);
}

.site-hero__search {
  max-width: 36rem;
}

@media (max-width: 768px) {
  .site-hero {
    align-items: center;
    min-height: clamp(240px, 70vw, 420px);
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xl);
    background-position: center;
  }

  .site-hero__content {
    max-width: none;
  }
}