/*
 * Karriär och studier (karriar-och-studier.html), 2026-10-02.
 *
 * Sidan ersätter de två nyhetsinläggen /blogg/karriar och /blogg/trs, som nu leder hit
 * (vercel.json). Den är byggd som löptext i en spalt; citaten visas ett i taget i en
 * karusell (js/karriar.js). På dator står ett kontaktkort till höger och följer med när
 * man skrollar; på mobil och surfplatta finns i stället knappen Kontakta oss i heron och
 * kontaktdelen längst ned (.kar-bara-smal). Allt som är unikt för
 * sidan har prefixet kar- så att inget krockar med Webflow-klasserna. Menyn, heron,
 * knapparna, rubrikerna och sidfoten är sajtens egna.
 *
 * Färger och typsnitt är sajtens: Spectral för rubriker och citat, Inter för brödtext,
 * heroverlaufet #071229 → #102d5a → #255898, accentblått #1a4a8f, kräm #f2eee6,
 * kantlinje #d9d1c2 och sekundär text #6b665c.
 */

.kar-sektion {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.kar-creme {
  background-color: var(--_colors---color--bg-cream);
}

.kar-vit {
  background-color: var(--_colors---color--bg-white);
}

/* Menyn ligger fast överst; ankarlänkar (#kontakt, #trs) ska inte hamna under den. */
#kontakt,
.kar-text [id] {
  scroll-margin-top: 7rem;
}

/* ---------------------------------------------------------------- hero */

/* Rubriken ska rymma "under och efter karriären" på en rad på dator; ingressen hålls smalare. */
.kar-hero-text {
  max-width: 46rem;
}

/* Den kursiva delen står på egen rad och bryts jämnt på mobilen ("under och / efter karriären"). */
.kar-hero-text h1 em {
  display: block;
  text-wrap: balance;
}

.kar-hero-ingress {
  max-width: 36rem;
}

.kar-brodsmula {
  text-decoration: none;
}

.kar-brodsmula:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- spalten och kontaktkortet */

.kar-huvud {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  min-width: 0;
}

/* Kortet visas bara på dator, se längst ned. */
.kar-sidokort {
  display: none;
}

@media screen and (min-width: 992px) {
  .kar-layout {
    display: grid;
    grid-template-columns: minmax(0, 44rem) 19rem;
    justify-content: center;
    gap: 5rem;
    align-items: start;
    width: 100%;
  }

  .kar-sidokort {
    position: sticky;
    top: 7rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem;
    border-radius: 1.25rem;
    background-color: var(--_colors---color--bg-cream);
  }

  .kar-bara-smal {
    display: none;
  }
}

.kar-sidokort-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 48% 30%;
  border-radius: .875rem;
}

/* ---------------------------------------------------------------- löptexten */

.kar-text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
}

.kar-text p,
.kar-text li {
  color: var(--_colors---color--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.kar-text strong {
  color: var(--_colors---color--text-primary);
  font-weight: 600;
}

.kar-text .kar-ingress {
  color: var(--_colors---color--text-primary);
  font-size: 1.375rem;
  line-height: 1.5;
}

.kar-text h2 {
  margin-top: 3rem;
  font-size: 2.75rem;
  letter-spacing: -1.2px;
}

.kar-text > h2:first-child {
  margin-top: 0;
}

.kar-text > h3 {
  margin-top: 1rem;
  font-family: Spectral, serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -.5px;
  line-height: 1.3;
}

.kar-text .kar-markerad {
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--_colors---color--accent-blue);
  border-radius: 0 12px 12px 0;
  background-color: var(--_colors---color--bg-cream);
  color: var(--_colors---color--text-primary);
  font-weight: 500;
}

.kar-text .kar-smatt {
  font-size: .875rem;
  line-height: 1.6;
}

/* Kompetensutvecklingens åtta punkter: nummer, rubrik och text, uppstaplade. */
.kar-punkter {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: kar-punkt;
  border-top: 1px solid var(--_colors---color--border-default);
}

.kar-punkter li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.5rem 0 1.5rem 3.5rem;
  border-bottom: 1px solid var(--_colors---color--border-default);
  counter-increment: kar-punkt;
}

.kar-punkter li::before {
  content: counter(kar-punkt, decimal-leading-zero);
  position: absolute;
  top: 1.45rem;
  left: 0;
  font-family: Spectral, serif;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.3;
  color: var(--_colors---color--accent-blue);
}

.kar-punkter h3 {
  font-family: Spectral, serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -.5px;
  line-height: 1.3;
  color: var(--_colors---color--text-primary);
}

.kar-punkter p {
  font-size: 1rem;
  line-height: 1.6;
}

/* TRS-stödet: en vanlig lista med blå bockar. Bocken är en SVG där ringen och bocken
   delar mittpunkt, så att den står mitt i ringen; ringen står mitt för första textraden
   (radhöjd 1.6rem: .6rem + .8rem − halva ringen). */
.kar-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kar-lista li {
  position: relative;
  padding: .6rem 0 .6rem 2.25rem;
  font-size: 1rem;
  line-height: 1.6;
}

.kar-lista li::before {
  content: "";
  position: absolute;
  top: .7125rem;
  left: 0;
  width: 1.375rem;
  height: 1.375rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23d9e5ff'/%3E%3Cpath d='M7.5 12.4l3 3.1 6-6.6' fill='none' stroke='%231a4a8f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kar-video {
  position: relative;
  width: 100%;
  margin: 1.5rem 0 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1.25rem;
  background-color: var(--_colors---color--bg-dark);
}

.kar-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------------------------------------------------------- citatkarusellen */

/* En blå ruta i spalten, i heroens färger. */
.kar-karusell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 3.5rem;
  border-radius: 1.5rem;
  background-image: linear-gradient(160deg, #071229, #102d5a 55%, #255898);
  color: var(--_colors---color--text-inverse);
  text-align: center;
}

.kar-karusell-etikett {
  color: var(--_colors---color--65-text-inverse-tertiary);
}

/* Utan JavaScript står citaten under varandra. Med JavaScript (is-aktiv) ligger de i
   samma rutnätscell, så att karusellen blir lika hög som det längsta citatet och inte
   hoppar när det byts. */
.kar-karusell-spar {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
}

.kar-karusell.is-aktiv .kar-karusell-spar {
  display: grid;
  touch-action: pan-y;
}

.kar-karusell.is-aktiv .kar-citat {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}

.kar-karusell.is-aktiv .kar-citat.is-vald {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease;
}

.kar-citat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  margin: 0;
}

.kar-citat blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  line-height: inherit;
}

.kar-citat blockquote p {
  font-family: Spectral, serif;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.5px;
  line-height: 1.4;
}

.kar-citat blockquote p::before {
  content: "\201D";
}

.kar-citat blockquote p::after {
  content: "\201D";
}

.kar-citat figcaption {
  color: var(--_colors---color--85-text-inverse-primary);
  font-size: .875rem;
  font-weight: 600;
}

.kar-karusell-styr {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.kar-karusell-styr[hidden] {
  display: none;
}

.kar-pil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--_colors---color--border-glass);
  border-radius: 50%;
  background-color: var(--_colors---color--bg-glass);
  color: var(--_colors---color--text-inverse);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease;
}

.kar-pil:hover {
  background-color: var(--_colors---color--border-glass);
}

.kar-pil:focus-visible,
.kar-prick:focus-visible {
  outline: 2px solid var(--_colors---color--text-inverse);
  outline-offset: 3px;
}

.kar-prickar {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.kar-prick {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: 1rem;
  background-color: var(--_colors---color--border-glass);
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}

.kar-prick[aria-current="true"] {
  width: 1.5rem;
  background-color: var(--_colors---color--text-inverse);
}

@media (prefers-reduced-motion: reduce) {
  .kar-karusell.is-aktiv .kar-citat,
  .kar-karusell.is-aktiv .kar-citat.is-vald,
  .kar-prick {
    transition: none;
  }
}

/* ---------------------------------------------------------------- kontakt */

.kar-kontakt {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
  padding: 4rem;
  border-radius: 1.5rem;
  background-color: var(--_colors---color--bg-white);
}

.kar-kontakt-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.kar-kontakt-text > p {
  max-width: 36rem;
  color: var(--_colors---color--text-secondary);
}

.kar-person {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kar-person-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 48% 30%;
  border-radius: 1rem;
}

.kar-person-vagar {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.kar-person-vagar a {
  color: var(--_colors---color--text-tertiary);
}

/* ---------------------------------------------------------------- mindre skärmar */

@media screen and (max-width: 991px) {
  .kar-kontakt {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 3rem;
  }

  .kar-person {
    max-width: 22rem;
  }
}

@media screen and (max-width: 767px) {
  .kar-text h2 {
    margin-top: 2rem;
    font-size: 2.25rem;
  }

  .kar-text .kar-ingress {
    font-size: 1.25rem;
  }

  .kar-karusell {
    padding: 2.5rem 1.75rem;
  }

  .kar-citat blockquote p {
    font-size: 1.375rem;
  }

  .kar-kontakt {
    padding: 2rem;
  }
}

@media screen and (max-width: 479px) {
  .kar-punkter li {
    padding-left: 2.75rem;
  }

  .kar-punkter h3,
  .kar-punkter li::before {
    font-size: 1.3rem;
  }

  .kar-karusell {
    padding: 2rem 1.25rem;
  }

  .kar-citat blockquote p {
    font-size: 1.25rem;
  }

  .kar-kontakt {
    padding: 1.5rem;
  }
}