/* Uniform inner-page hero (palvelut, huoltopalvelu, yritys, tietosuoja, ota-yhteytta).
   - Hero is one solid section with no overlap from the section below.
   - Heading sits 32px above the hero's actual bottom edge.
   - Same height per breakpoint on every page. */

/* ------ Hero section ------ */

.rt-hero-huoltopalvelu,
.rt-hero-contact {
  height: 70vh;
  min-height: 540px;
  max-height: 680px;
}

/* ------ Hero background image: ensure full coverage on narrow / portrait viewports.

   Two problems combine to leave a gray band above the photo on subpage heros at
   mobile / portrait sizes:

   1. The base .rt-hero-image rule sizes the image to ~80% height with width >100%
      for a wide, artistic crop on desktops — but at portrait that leaves the top
      ~20% of the section uncovered, exposing the section's gray bg-primary color.

   2. The subpage hero <img> has inline `transform: translate3d(0,0,0) scale3d(1.3,...)`
      which Webflow's IX2 interaction script replaces at runtime with a stale
      `translate3d(0, ~104px, 0)` initial-state matrix — i.e. the photo gets pushed
      down ~104px and the animation that should slide it back never fires. The home
      page hero (`.rt-hero-image.hero`) has no inline transform and isn't affected.

   Fix on portrait / ≤991px: make the photo fully cover the section AND override the
   broken IX2 transform with !important. We keep a mild scale so the crop still feels
   intentional rather than a flat letterbox. */
@media (orientation: portrait), (max-width: 991px) {
  .rt-hero-huoltopalvelu .rt-hero-image,
  .rt-hero-contact .rt-hero-image {
    width: 100%;
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: 50% 50%;
    transform: scale(1.15) !important;
  }
}

/* Use the same overlay as the index page hero. The base .div-block already
   sets background-color: #0000006e + the two corner gradients in the main
   stylesheet; we only need the explicit z-index here because the hero photo
   creates its own stacking context via transform. */
.rt-hero-huoltopalvelu .div-block,
.rt-hero-contact .div-block {
  z-index: 1;
}

.rt-hero-huoltopalvelu .rt-hero-v11-main,
.rt-hero-huoltopalvelu .rt-hero-text-wrap,
.rt-hero-contact .rt-hero-v11-main,
.rt-hero-contact .rt-hero-text-wrap {
  z-index: 2;
  position: relative;
}

/* ------ Hero inner box: heading 32px above hero bottom ------ */

.rt-hero-main-huoltopalvelu,
.rt-hero-main-huoltopalvelu.ts,
.rt-hero-main-contact,
.rt-hero-main-contact.y {
  height: 100%;
  padding-bottom: 2rem;
  justify-content: flex-end;
}

.rt-hero-huoltopalvelu .rt-hero-v11-content,
.rt-hero-huoltopalvelu .rt-hero-v11-content.yhteys,
.rt-hero-contact .rt-hero-v11-content,
.rt-hero-contact .rt-hero-v11-content.yhteys {
  margin-bottom: 0;
}

.rt-hero-huoltopalvelu .rt-color-text-inverse.rt-gap-bottom-md,
.rt-hero-contact .rt-color-text-inverse.rt-gap-bottom-md {
  margin-bottom: 0;
}

/* ------ Drop the legacy negative-margin overlap on the section below the hero.
   The original design pulled the next white section up over the hero; with a
   real hero height per breakpoint that trick is no longer needed and made the
   inner-page heros cramped + inconsistent. ------ */

.hp2bx,
.ty2-s,
.section-3,
.section-2.yhteys {
  margin-top: 0;
}

/* ------ Responsive ------ */

@media screen and (max-width: 991px) {
  .rt-hero-huoltopalvelu,
  .rt-hero-contact {
    height: 65vh;
    min-height: 500px;
    max-height: 640px;
  }

  .rt-hero-main-huoltopalvelu,
  .rt-hero-main-huoltopalvelu.ts,
  .rt-hero-main-contact,
  .rt-hero-main-contact.y {
    height: 100%;
    padding-bottom: 2rem;
    justify-content: flex-end;
  }

  .hp2bx,
  .ty2-s,
  .section-3,
  .section-2.yhteys {
    margin-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .rt-hero-huoltopalvelu,
  .rt-hero-contact {
    height: 60vh;
    min-height: 460px;
    max-height: 600px;
  }

  .rt-hero-main-huoltopalvelu,
  .rt-hero-main-huoltopalvelu.ts,
  .rt-hero-main-contact,
  .rt-hero-main-contact.y {
    height: 100%;
    padding-bottom: 2rem;
    justify-content: flex-end;
  }

  .hp2bx,
  .ty2-s,
  .section-3,
  .section-2.yhteys {
    margin-top: 0;
  }
}

@media screen and (max-width: 479px) {
  .rt-hero-huoltopalvelu,
  .rt-hero-contact {
    height: 58vh;
    min-height: 420px;
    max-height: 520px;
  }

  .rt-hero-main-huoltopalvelu,
  .rt-hero-main-huoltopalvelu.ts,
  .rt-hero-main-contact,
  .rt-hero-main-contact.y {
    height: 100%;
    padding-bottom: 2rem;
    justify-content: flex-end;
  }

  .hp2bx,
  .ty2-s,
  .section-3,
  .section-2.yhteys {
    margin-top: 0;
  }
}