/* ============================================================
   home.css — Forsidespecifikke sektioner (Fase 2)
   Kræver tokens.css + base.css + components.css.
   ============================================================ */

/* ---- Hero ----
   Stor luft mellem masthead og hero, som i referencen (~268px ved 1280). */
.hero { padding-block: clamp(56px, 20vw, 256px) var(--space-m); }

/* Typografien er målt på referencens intro ved 375/809/810/1024/1280/1440/1920.
   Den er KONSTANT på alle bredder — ingen clamp, ingen vw-skalering.
   Eneste responsive skifte er brødtekstens 18px → 17px under 810.
   Alle tre niveauer har SAMME farve (--fg). Referencen bruger ingen
   dæmpet grå i introen.                                                */
.hero__title {
  font-size: 32px;                    /* målt: 32px ved alle bredder     */
  font-weight: var(--fw-medium);      /* 500                             */
  text-transform: none;               /* referencen bruger ikke versaler */
  letter-spacing: var(--ls-body);     /* −0.04em = −1.28px ved 32px      */
  line-height: var(--lh-body);        /* 1.4 = 44.8px                    */
  color: var(--fg);
  max-width: var(--hero-measure);     /* 600px — kun overskriften        */
}
/* Lead og brødtekst løber i fuld containerbredde som på referencen.
   max-width: none ophæver base.css' generelle p { max-width: 68ch }. */
.hero__lead {
  margin-top: 16px;                   /* referencens kolonne-gap ≥810    */
  font-size: 18px;
  font-weight: var(--fw-semibold);    /* 600 — selvhostet skæring        */
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--fg);
  max-width: none;
}
.hero__desc {
  margin-top: 20px;                   /* referencens margin-top          */
  font-size: 18px;
  font-weight: var(--fw-medium);      /* 500                             */
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--fg);
  max-width: none;
}

/* ---- Ydelser ---- */
.services__intro { max-width: 62ch; margin-bottom: var(--space-s); }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-s) var(--space-xs);
  border-top: 1px solid var(--line);
  padding-top: var(--space-xs);
}
.service__num {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  color: var(--fg-faint);
  margin-bottom: 10px;
}
.service__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-tight);
  margin-bottom: 8px;
}
.service__desc { color: var(--fg-muted); font-size: var(--fs-sm); }

/* ---- Værktøjer ---- */
.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--space-xs);
  align-items: baseline;
  margin-top: var(--space-s);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--line);
}
.tools__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.tools__list { color: var(--fg-muted); font-size: var(--fs-sm); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Referencens eget skifte for introteksten ligger ved 809.98 — ikke ved 768.
   Målt: brødtekst 18px → 17px og kolonne-gap 16px → 12px.               */
@media (max-width: 809px) {
  .hero__lead { margin-top: 12px; font-size: 17px; }
  .hero__desc { font-size: 17px; }
}

@media (max-width: 768px) {
  .hero { padding-block: var(--space-s) var(--space-s); }
  .services__grid { grid-template-columns: 1fr; gap: var(--space-xs); }
}