/*
-----------------------------------------
HERO
Startsidans bild med mörk toning, budskapet och en fylld knapp (källans .section.map.with-hero .map-hero).
Kartan (map-search) ligger i samma sektion och går 46 px upp över bilden när den visas.
-----------------------------------------
*/

/* Heron (källans .section.map.with-hero) har varken luft eller linje under: nästa sektion börjar där bilden slutar */
.hero {
  text-align: center;
}

.hero__media {
  position: relative;
}

.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-shade);
  background: var(--surface-hero-shade);
}

/* Som på källsajten ligger bilden i radens flöde (inline, vertical-align middle): sidan under heron hamnar då på samma bråkdel av en pixel */
.hero__image {
  display: inline;
  vertical-align: middle;
  inline-size: 100%;
  block-size: auto;
}

.hero__content {
  position: absolute;
  inset-block-start: 35%;
  inset-inline-start: 50%;
  z-index: var(--z-map);
  inline-size: 90%;
  transform: translate(-50%, -50%);
  color: var(--text-inverse);
  text-align: center;
}

.hero__title {
  max-inline-size: var(--size-section-title);
  margin: 0;
  font-size: var(--fs-20);
  font-weight: var(--font-weight-bold);
  line-height: 2.2rem;
  text-transform: uppercase;
}

.hero__eyebrow {
  display: block;
  font-size: var(--fs-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-eyebrow);
  text-transform: none;
}

.hero__button {
  margin-block-start: var(--space-10);
  padding: 0.2rem 0.6rem;
  font-size: var(--fs-12);
}

@media (width >= 768px) {
  .hero__content {
    inset-block-start: 50%;
    inline-size: auto;
  }

  .hero__title {
    font-size: var(--fs-40);
    line-height: 4.4rem;
  }

  .hero__eyebrow {
    margin-block-end: var(--space-10);
    font-size: var(--fs-20);
  }

  .hero__button {
    margin-block-start: var(--space-30);
    padding: 0.6rem var(--space-10) 0.5rem;
    font-size: var(--fs-16);
  }
}

/* Kartan går 46 px upp över heroens nederkant och slutar där sektionen slutar */
.hero__map {
  position: relative;
  z-index: var(--z-map);
  margin-block: -4.6rem 0;
}