/* ==========================================================
   Component: Hero Banner
   Figma node: 3:268 | 414px × 532px
   Background image + gradient overlay + heading + search bar
   ========================================================== */

.cs-hero {
  position: relative;
  width: 100%;
  height: 532px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Background image */
.cs-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Gradient overlay: transparent → #0d1b2a 50% */
.cs-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(13, 27, 42, 0.5) 100%
  );
  pointer-events: none;
}

/* Heading — "Pesquise..." */
.cs-hero__heading {
  position: absolute;
  bottom: 106px; /* 532 - 306 - 120 = clears search bar */
  left: 20px;
  width: 311px;
  font-family: var(--cs-font-base);
  font-weight: var(--cs-fw-bold);
  font-size: var(--cs-fs-2xl);
  line-height: var(--cs-lh-tight);
  color: var(--cs-text-on-dark);
  margin: 0;
  z-index: 1;
}

/* Search bar lives inside hero, pinned to bottom edge */
.cs-hero .cs-search-bar {
  position: absolute;
  bottom: 50px;
  left: 20px;
  z-index: 1;
}