/* Gemensam visuell rytm för HDH:s tre publika ingångar. */
:root {
  --public-header-height: 70px;
  --public-brand-size: 104px;
  --public-hero-width: 940px;
  --public-title-width: 900px;
  --public-intro-width: 720px;
  --public-hero-gap: 22px;
  --public-hero-top-space: 64px;
  --public-hero-content-height: 680px;
  --public-card-radius: 22px;
  --public-control-height: 48px;
  --public-control-radius: 11px;
  --public-display-weight: 500;
}

body[data-hdh-audience="public"],
body[data-hdh-audience="company"] {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-kerning: normal;
}

.header-modern.header-modern--public-dark,
.header-modern--public-dark .header-container,
.header-modern--public-dark .header-content {
  min-height: var(--public-header-height);
}

.header-modern--public-dark .header-logo--circle,
.header-modern--public-dark .header-logo-img--circle {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  min-height: 48px;
  margin: 0 !important;
  object-fit: contain;
  object-position: center;
}

#hero.hero-landing .hero-logo-wrap,
#hero.hero-landing--foretag .hero-logo-wrap,
.brf-hero__brand-wrap {
  width: var(--public-brand-size) !important;
  max-width: var(--public-brand-size) !important;
  height: var(--public-brand-size);
  min-height: var(--public-brand-size);
  margin: 0 auto 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero.hero-landing .hero-logo-wrap .hero-logo,
#hero.hero-landing--foretag .hero-logo-wrap .hero-logo,
.brf-hero__brand {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;
  object-position: center;
}

.public-hero-eyebrow,
.company-landing-hero__eyebrow,
.brf-eyebrow {
  margin: 0 0 12px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.25;
  text-transform: uppercase;
}

.public-hero-eyebrow { color: #cfe7de; }

#hero.hero-landing .hero-lead h1,
#hero.hero-landing--foretag .hero-lead h1,
.brf-hero h1 {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: var(--public-display-weight) !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}

#hero.hero-landing .hero-lead .hero-lead-sub,
#hero.hero-landing--foretag .hero-lead .hero-lead-sub,
.brf-hero__lead {
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}

.brf-hero__brand-wrap { margin-inline: 0 !important; }

@media (min-width: 768px) {
  .landing-first-fold > #hero.hero-landing.hero-landing--guided,
  .landing-first-fold > #hero.hero-landing.hero-landing--foretag-start {
    min-height: calc(var(--public-hero-content-height) + var(--public-hero-top-space));
    justify-content: flex-start;
    padding-top: var(--public-hero-top-space) !important;
  }

  .brf-hero {
    padding-top: var(--public-hero-top-space);
  }

  #hero.hero-landing--guided > .max-w-4xl,
  #hero.hero-landing--foretag-start > .max-w-4xl,
  .brf-hero .brf-container {
    width: min(var(--public-hero-width), calc(100% - 40px));
    max-width: var(--public-hero-width);
  }

  #hero.hero-landing--guided .hero-lead,
  #hero.hero-landing--foretag-start .hero-lead {
    margin-bottom: 0 !important;
    padding-inline: 0;
  }

  #hero.hero-landing--guided .hero-lead h1,
  #hero.hero-landing--foretag-start .hero-lead h1,
  .brf-hero h1 {
    width: 100%;
    max-width: var(--public-title-width);
    margin-inline: auto;
    font-size: clamp(2.5rem, 3.75vw, 3rem) !important;
    line-height: 1.12 !important;
  }

  #hero.hero-landing--guided .hero-lead .hero-lead-sub,
  #hero.hero-landing--foretag-start .hero-lead .hero-lead-sub,
  .brf-hero__lead {
    width: min(100%, var(--public-intro-width));
    max-width: var(--public-intro-width) !important;
    margin: 12px auto 0 !important;
    line-height: 1.45 !important;
  }

  #hero.hero-landing--guided .landing-intent--glass,
  #hero.hero-landing--foretag-start .company-start-glass {
    margin-top: var(--public-hero-gap);
  }

  #hero.hero-landing--guided .landing-intent--glass,
  #hero.hero-landing--foretag-start .company-start-glass,
  .brf-hero-card {
    width: min(100%, var(--public-hero-width)) !important;
    max-width: var(--public-hero-width);
  }

  .brf-hero {
    padding-bottom: 20px;
  }

  .brf-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--public-hero-gap);
    align-items: start;
  }

  .brf-hero__grid > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .brf-hero__brand-wrap {
    margin-inline: auto !important;
  }

  .brf-actions {
    justify-content: center;
    margin-top: 0;
  }

  .brf-trust {
    justify-content: center;
  }

  .brf-hero-card {
    margin-inline: auto;
    padding: 24px;
    border-radius: var(--public-card-radius);
    text-align: left;
  }

  .brf-hero-card__cta {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .brf-hero-card__cta .brf-trust {
    margin: 0;
  }

  .brf-hero-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .brf-hero-list li {
    min-height: 64px;
  }

  #hero .landing-intent--glass .landing-intent__inner,
  #hero.hero-landing--foretag-start .company-start-glass__inner {
    border-radius: var(--public-card-radius);
  }

  #hero .landing-intent--glass button,
  #hero.hero-landing--foretag-start .company-start-glass__submit,
  .brf-button {
    min-height: var(--public-control-height);
    border-radius: var(--public-control-radius);
  }
}

@media (max-width: 767px) {
  :root {
    --public-header-height: 60px;
    --public-brand-size: 78px;
  }

  .header-modern--public-dark .header-logo--circle,
  .header-modern--public-dark .header-logo-img--circle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    min-height: 42px;
  }

  .brf-hero__brand-wrap { margin-inline: auto !important; }

  .brf-hero { padding-top: 0; }

  .public-hero-eyebrow,
  .company-landing-hero__eyebrow,
  .brf-eyebrow { font-size: 0.7rem !important; }
}