/* =========================================================================
   chrille.nu - Enskild artikel
   Följer områdets ljushet. Färgerna kommer ur universe.css.
   ========================================================================= */

.c-artikel {
  background: var(--u-bg);
  color: var(--u-text);
}
.c-artikel__inner {
  max-width: var(--wrap-text);
  margin-inline: auto;
  padding-inline: var(--s-7);
}

/* --- Huvudet ------------------------------------------------------------- */
.c-artikel__head { padding: var(--s-8) 0 0; }

.c-artikel .u-monitor { font: var(--t-label); }
.c-artikel__larm { font: var(--t-label); color: var(--u-text-dim); }

.c-artikel__prompt {
  margin: 0;
  font: 500 13px/1.6 var(--f-mono);
  color: var(--u-text);
}
.c-artikel__cmd { color: var(--u-text); }
.c-artikel .u-path { color: var(--u-accent); }

.c-artikel .u-ekg { margin-top: var(--s-3); width: 62%; height: 44px; }

.c-artikel__meta {
  margin: var(--s-6) 0 var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: baseline;
  font: var(--t-label);
  letter-spacing: .08em;
  color: var(--u-text-dim);
}
.c-artikel__kind { color: var(--u-accent); font-weight: 700; }

.c-artikel__title {
  margin: 0 0 var(--s-5);
  font-family: var(--u-heading-font);
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.08;
  font-weight: 700;
  color: var(--u-text);
  text-wrap: pretty;
}

.c-artikel__lead {
  margin: 0 0 var(--s-6);
  max-width: 60ch;
  font: 400 20px/1.6 var(--f-sans);
  color: var(--u-text);
}

/* --- Bilden -------------------------------------------------------------- */
.c-artikel__bild {
  margin: 0 auto var(--s-7);
  max-width: 1000px;
  padding-inline: var(--s-7);
}
.c-artikel__bild img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--u-line);
}

/* --- Brödtexten ---------------------------------------------------------- */
.c-artikel__body { padding-bottom: var(--s-8); }

.c-artikel__body p,
.c-artikel__body li {
  font: 400 17px/1.75 var(--f-sans);
  color: var(--u-text);
}
.c-artikel__body h2 {
  margin: var(--s-7) 0 var(--s-4);
  font: 700 clamp(24px, 2.6vw, 30px)/1.2 var(--u-heading-font);
  color: var(--u-text);
}
.c-artikel__body h3 {
  margin: var(--s-6) 0 var(--s-3);
  font: 700 21px/1.25 var(--f-sans);
  color: var(--u-text);
}
.c-artikel__body img { max-width: 100%; height: auto; }
.c-artikel__body a { color: var(--u-accent); }

/* Elementor-byggda inlägg får inte spränga läsbredden */
.c-artikel__body .elementor-section-boxed > .elementor-container { max-width: 100%; }

/* --- Delningsraden ------------------------------------------------------- */
.c-artikel .chrille-share-bar,
.c-artikel .social-share-bar {
  border-top: 1px solid var(--u-line);
  border-bottom: 1px solid var(--u-line);
  background: var(--u-surface);
  padding: var(--s-6) 0;
}

/* --- Relaterat ----------------------------------------------------------- */
/* Ligger alltid på sajtens mörka skal, som en fot under artikeln. */
.c-relaterat {
  background: var(--c-ink-800);
  color: var(--c-green-300);
  padding: var(--s-8) 0;
}
.c-relaterat__inner { max-width: var(--wrap); }

.c-relaterat__label {
  margin: 0 0 var(--s-5);
  font: var(--t-label);
  letter-spacing: .14em;
  color: var(--c-moss);
}

.c-relaterat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-5);
}

.c-artikel .c-relaterat__kort {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(208, 230, 165, .14);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.c-artikel .c-relaterat__kort:hover { border-top-color: var(--c-green-100); }
.c-artikel .c-relaterat__kort:focus-visible {
  outline: 2px solid var(--c-green-100);
  outline-offset: 3px;
}

.c-relaterat__kind {
  font: var(--t-label);
  letter-spacing: .08em;
  /* Områdets accent är vald för artikelns botten. På det mörka skalet
     behöver vård och utbildning ljusare varianter. */
  color: var(--c-green-100);
}
.universe-vard .c-relaterat__kind { color: #e8654f; }
.universe-utbildning .c-relaterat__kind { color: var(--c-green-500); }
.universe-foretagande .c-relaterat__kind { color: var(--c-green-700); }

.c-relaterat__titel {
  font: 600 17px/1.35 var(--f-sans);
  color: var(--c-paper);
}
.c-artikel .c-relaterat__kort:hover .c-relaterat__titel { color: var(--c-green-100); }

/* =========================================================================
   Responsivt
   ========================================================================= */
@media (max-width: 900px) {
  .c-artikel__inner { padding-inline: var(--s-5); }
  .c-artikel__bild { padding-inline: var(--s-5); }
  .c-artikel__head { padding-top: var(--s-7); }
  .c-artikel__lead { font-size: 18px; }
}


/* =========================================================================
   Delningsraden och diskussionsuppmaningen

   Båda injiceras via the_content-filtret i functions.php avsnitt 7 och var
   färgsatta för den mörka sajten. Etiketten låg på 1,94 mot 1 och knappen
   på 1,18 när artiklarna blev ljusa.
   ========================================================================= */
.c-artikel .social-share-bar .share-label,
.c-artikel .share-label {
  color: var(--u-text-dim);
  font: var(--t-label);
  letter-spacing: .14em;
}

.c-artikel .btn-primary,
.c-artikel a.btn-primary {
  background: var(--u-accent);
  border: 1px solid var(--u-accent);
  color: var(--u-bg);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-5);
  border-radius: var(--radius-sm);
  font: 600 15px/1 var(--f-sans);
  text-decoration: none;
}
.c-artikel .btn-primary:hover { opacity: .88; color: var(--u-bg); }