/*
-----------------------------------------
SIDANS INLEDNING
1. Startsidans hero (Figma: Huvudbudskap)
2. Undersidans inledning (Figma: Sidintroduktion + Sub page header Block): brödsmulor, bannerbild, rubrikband
-----------------------------------------
*/

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

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: var(--size-hero-height);
  overflow: hidden;
  background: var(--surface-brand);
  color: var(--text-inverse);
}

/* Bild och toning är överlägg i bakgrunden (bildfyllnad och dekor) */
.hero__media,
.hero__media::after {
  position: absolute;
  inset: 0;
}

.hero__media::after {
  content: "";
  background: var(--gradient-hero);
}

.hero__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top;
}

.hero__inner {
  position: relative;
  padding-block: var(--space-section);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  max-inline-size: var(--size-hero-text);
}

.hero__title {
  font: var(--font-hero);
  text-transform: uppercase;
  overflow-wrap: break-word;
}

@media (width < 40rem) {
  .hero__media::after {
    background: var(--color-hero-70);
  }
}

/* ---- Undersidans inledning ---------------------------------------------------- */

.breadcrumbs {
  padding-block: var(--space-16);
  background: var(--surface-light);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  font: var(--font-small);
  color: var(--text-muted);
}

.breadcrumbs__item {
  display: flex;
  gap: var(--space-12);
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
}

.breadcrumbs__current {
  font: var(--font-crumb-current);
  color: var(--text-heading);
}

@media (hover: hover) {
  .breadcrumbs__link:hover {
    color: var(--text-heading);
    text-decoration: underline;
  }
}

.page-intro__banner {
  block-size: var(--size-banner-height);
  overflow: hidden;
}

.page-intro__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--position-banner);
}

.page-intro__band {
  padding-block: var(--space-32);
  background: var(--surface-light);
}

.page-intro__title {
  font: var(--font-h1);
  color: var(--text-heading);
  text-transform: uppercase;
  overflow-wrap: break-word;
}