/* Ledige stillinger — samme hero / seksjonsbånd som homepage & app-landing (DESIGN_HANDBOOK §3–6) */

#bv-careers-list-h {
  scroll-margin-top: calc(var(--bv-home-nav-offset) + 12px);
}

/*
 * Hero uten media: fyll 100svh og fordel innhold vertikalt (ikke én klump i midten).
 * Kolonnen strekkes; space-between gir luft fra topp til bunn; gap = minimum mellom blokker.
 */
body.bv-careers-page main > .bv-hero {
  flex-direction: column;
  min-height: 100svh;
  min-height: 100dvh;
  padding-top: calc(var(--bv-home-nav-offset) + var(--space-4));
  padding-bottom: clamp(var(--space-8), 5vw, var(--space-10));
  box-sizing: border-box;
}

body.bv-careers-page main > .bv-hero .bv-hero__content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: clamp(var(--space-4), 3vw, var(--space-8));
  width: 100%;
}

body.bv-careers-page main > .bv-hero .bv-hero__kicker {
  margin: 0 auto;
}

body.bv-careers-page main > .bv-hero .bv-hero__title {
  max-width: min(24ch, 100%);
  margin: calc(-1 * var(--space-2)) auto 0;
}

@media (max-width: 480px) {
  body.bv-careers-page main > .bv-hero .bv-hero__content {
    gap: clamp(var(--space-4), 3.5vw, var(--space-7));
  }
}

/* Lav viewport: ikke tving stor vertikal spredning */
@media (max-height: 720px) {
  body.bv-careers-page main > .bv-hero {
    min-height: min(100dvh, 100svh);
  }

  body.bv-careers-page main > .bv-hero .bv-hero__content {
    justify-content: flex-start;
    gap: clamp(var(--space-3), 2.5vw, var(--space-5));
  }
}

/* Ingress under H2 — samme typografi som .bv-hero__subtitle (homepage.css) */
.bv-homepage .bv-careers-section .bv-careers-section__intro {
  margin: 0 auto clamp(var(--space-8), 4.5vw, var(--space-10));
  max-width: 38em;
  text-align: center;
  padding: 0;
  font-size: clamp(0.9rem, 2.1vw, var(--font-size-md));
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.62;
}

/* Kort / jobber — surface + elevation (§6), konsistent med paneler på forsiden */
.bv-careers-job {
  position: relative;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--color-text) 3.5%, transparent),
    0 6px 18px -2px color-mix(in srgb, var(--color-text) 4.5%, transparent),
    0 3px 10px -2px color-mix(in srgb, var(--color-text) 2.5%, transparent);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.bv-careers-job:last-child {
  margin-bottom: 0;
}

.bv-careers-job:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  box-shadow:
    0 2px 6px color-mix(in srgb, var(--color-text) 5%, transparent),
    0 12px 28px -4px color-mix(in srgb, var(--color-text) 6%, transparent),
    0 4px 14px -2px color-mix(in srgb, var(--color-text) 4%, transparent);
}

.bv-careers-job__title {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.bv-homepage .bv-careers-job__title.heading-component {
  margin: 0 0 var(--space-4);
}

.bv-careers-job__block {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-bg) 12%);
}

.bv-careers-job__block:first-of-type {
  margin-top: 0;
}

.bv-careers-job__label {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.bv-careers-job__text {
  margin: 0;
  line-height: 1.55;
}

.bv-careers-job__text + .bv-careers-job__text {
  margin-top: var(--space-3);
}

.bv-careers-job__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.bv-careers-open {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface-muted) 45%, var(--color-bg-alt));
  box-shadow: none;
}

.bv-careers-open:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--color-text) 3.5%, transparent),
    0 6px 18px -2px color-mix(in srgb, var(--color-text) 4.5%, transparent);
}