/* widgets/faktaboks/faktaboks.css
   Sjove faktabokse — rolige talbokse i et grid, med valgfri count-up.
   Kun var(--token); BEM med -graesmarken-suffix; 0 !important.
   Grid genbruger delt .grid--2/--3/--4 (auto-fit). */

/* ---- Intro ---- */
.faktaboks-graesmarken__intro {
  max-width: var(--measure);
  margin-bottom: var(--space-xl);
}
.faktaboks-graesmarken__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-heading);
  text-wrap: balance;
  margin: var(--space-sm) 0 0 0;
}
.faktaboks-graesmarken__title em {
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-green-700);
}
.faktaboks-graesmarken__intro-body {
  color: var(--color-text-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-top: var(--space-sm);
}

/* ---- Liste / grid ---- */
.faktaboks-graesmarken__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Kort ---- */
.faktaboks-graesmarken__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  height: 100%;
  padding: var(--space-lg);
  background-color: var(--color-bg-card);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* Klikbart kort (link) — blødt hover-løft. */
a.faktaboks-graesmarken__card {
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
a.faktaboks-graesmarken__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ---- Ikon ---- */
.faktaboks-graesmarken__media {
  display: block;
  width: var(--icon-xl);
  height: var(--icon-xl);
  margin-bottom: var(--space-xs);
}
.faktaboks-graesmarken__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--aspect-square);
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ---- Tal ---- */
.faktaboks-graesmarken__value {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: var(--ls-h1);
  color: var(--color-heading);
}
.faktaboks-graesmarken__prefix,
.faktaboks-graesmarken__suffix {
  font-family: var(--font-body);
  font-size: 0.5em;
  font-weight: var(--fw-semibold);
  color: var(--color-text-soft);
}

/* ---- Label ---- */
.faktaboks-graesmarken__label {
  margin: 0;
  font-size: var(--fs-accent);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--color-text-soft);
}

/* ---- Uddybende tekst ---- */
.faktaboks-graesmarken__body {
  margin-top: var(--space-2xs);
  color: var(--color-text-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure-tight);
}

/* ---- Reveal-fade ----
   Gated bag .is-reveal-ready, som JS kun tilføjer når den faktisk animerer.
   Uden JS / reduced-motion er boksene synlige fra start. */
.faktaboks-graesmarken.is-reveal-ready .faktaboks-graesmarken__item[data-faktaboks-reveal] {
  opacity: 0;
  transform: translateY(var(--space-xs));
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.faktaboks-graesmarken.is-reveal-ready .faktaboks-graesmarken__item.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  a.faktaboks-graesmarken__card,
  a.faktaboks-graesmarken__card:hover {
    transform: none;
    transition: none;
  }
}