/*
-----------------------------------------
INLEDNING
1. Startsidans hero (Figma: Hero): bild med toning, rubrik, ingress och knapp
2. Undersidans inledning (Figma: Sidintroduktion): banner, titelband och brödsmulor
-----------------------------------------
*/

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

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

/* Bildfyllnad och toning är dekor bakom innehållet */
.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-toning);
}

.hero__image {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}

.hero__inner {
  position: relative;
}

.hero :focus-visible {
  outline-color: var(--focus-ring-color-inverse);
}

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

.hero__title {
  font: var(--font-hero-heading);
  text-transform: uppercase;
}

.hero__lead {
  font: var(--font-hero-lead);
}

/* Under 1440 px (Figma har bara 1440 px) ligger den vita texten över hela bilden: Figmas toning tonar ut åt höger och ger under 3:1 för rubriken
   redan vid 1024 och 1280 px, så en jämn toning håller kontrasten (mätt i verifiera.mjs: minst 3:1 rubrik och 4,5:1 ingress). 1440 px är Figmas egen toning. */
@media (width < 90rem) {
  .hero__media::after {
    background: var(--surface-hero-toning-narrow);
  }
}

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

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

.page-intro__image {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}

.page-intro__band {
  display: flex;
  align-items: center;
  min-block-size: var(--size-title-band);
  background: var(--surface-light);
}

.page-intro__band .container {
  padding-block: var(--space-16);
}

.page-intro__title {
  font: var(--font-section-heading);
  color: var(--text-heading);
  text-transform: uppercase;
}

.breadcrumbs {
  border-block-end: 1px solid var(--border-subtle);
}

.breadcrumbs .container {
  display: flex;
  align-items: center;
  min-block-size: calc(var(--size-breadcrumbs) - 1px); /* linjen under ingår i Figmas 62 px */
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-14);
  font: var(--font-link);
  color: var(--text-body);
}

/* Avgränsaren är dekor: tom alternativtext döljer den för skärmläsare */
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/" / "";
  margin-inline-end: var(--space-14);
}

.breadcrumbs__current {
  color: var(--text-accent);
}

@media (hover: hover) {
  .breadcrumbs__link:hover {
    color: var(--text-accent);
  }
}