/* Hero — v2 Figma node 1089:8071. Full-bleed image, dark heading on the light
   left side of the photo, red CTA, and a slotted red search band at the bottom.
   Desktop / tablet (<=1023) / mobile (<=600) breakpoints per BUILD_PLAN §11. */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 640px;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* <video> is inline by default; match the image's full-bleed box. */
.hero__video {
  display: block;
  pointer-events: none;
}

/* A soft light wash on the left so the dark heading stays legible. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.25) 40%,
    rgba(255, 255, 255, 0) 70%
  );
}

.hero__image--mobile {
  display: none;
}

.hero__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 160px var(--secan-space-3xl) var(--secan-space-4xl);
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--secan-space-l);
  max-width: 620px;
}

.hero__heading {
  margin: 0;
  font-family: var(--secan-font-heading);
  font-weight: var(--secan-fw-regular);
  font-size: var(--secan-fs-h1);
  line-height: var(--secan-lh-h1);
  color: var(--secan-black);
}

.hero__subheading {
  margin: 0;
  max-width: 46ch;
  font-family: var(--secan-font-body);
  font-weight: var(--secan-fw-regular);
  font-size: var(--secan-fs-subheading);
  line-height: var(--secan-lh-subheading);
  color: var(--secan-gray-dark);
}

.hero__content .secan-button {
  align-self: flex-start;
}

/* Homepage hero with search: scale vertical rhythm to laptop viewport height
   without a one-off 1280×631 rule. Interior heroes (no search band) stay put. */
@media (min-width: 1024px) {
  .hero:has(.hero__search) {
    min-height: 100vh;
    min-height: min(640px, 100svh);
  }

  .hero:has(.hero__search) .hero__inner {
    padding-top: clamp(96px, 20vh, 160px);
    padding-bottom: clamp(16px, 4vh, var(--secan-space-4xl));
  }

  .hero:has(.hero__search) .hero__content {
    gap: clamp(12px, 2.5vh, var(--secan-space-l));
  }

  .hero:has(.hero__search) .hero__heading {
    font-size: clamp(36px, 9vh, var(--secan-fs-h1));
  }
}

@media (min-width: 1024px) and (max-height: 740px) {
  .hero:has(.hero__search) .hero__inner {
    padding-top: calc(var(--secan-header-height) + 16px);
    padding-bottom: 16px;
  }

  .hero:has(.hero__search) .hero__content {
    gap: 16px;
  }

  .hero:has(.hero__search) .hero__heading {
    font-size: var(--secan-fs-h2);
    line-height: var(--secan-lh-h2);
  }
}

/* Tablet */
@media (max-width: 1023px) {
  .hero {
    min-height: 520px;
  }

  .hero__inner {
    padding: 140px var(--secan-space-2xl) var(--secan-space-3xl);
  }

  .hero__subheading {
    font-size: var(--secan-fs-body);
    line-height: var(--secan-lh-body);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .hero {
    min-height: 0;
  }

  .hero__media::after {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.15) 45%,
      rgba(255, 255, 255, 0) 80%
    );
  }

  /* Desktop media stays as the fallback when no mobile banner is set. */
  .hero__media--has-mobile .hero__image--desktop {
    display: none;
  }

  .hero__image--mobile {
    display: block;
  }

  .hero__inner {
    padding: 110px var(--secan-space-s) var(--secan-space-2xl);
  }

  .hero__inner .hero__content a.secan-button {
    width: 100% !important;
  }
}