/* ============================================================
   about.css — KUN "Om mig"-sidens egne regler (Fase 6A)
   Kræver tokens.css + base.css + components.css.

   Struktur følger referencens /about tæt:
     OM MIG.  (tekst + portrætplaceholder, portræt til højre)
     TILGANG. (billedplaceholder til venstre + tekst, spejlvendt)
     TALLENE FORTÆLLER. (intro + stat-grid, 6 tal)
     UDVALGTE KUNDER. (genbrugt marquee — synlig OGSÅ på mobil)
     YDELSER. (3 grupper, ingen billeder)
     Kontakt-CTA
     Sort footer "LAD OS ARBEJDE SAMMEN."

   Genbruger masthead, sticky nav, mobilheader/-menu, Lenis, klient-
   marquee (components.css) og footer fra Fase 1–5. Ingen komponent-CSS
   duplikeres her.

   Gutters: 20px på ALLE bredder (referencens /about måler 80px 20px, også
   på mobil) — derfor ingen 10px-override; kun projektgriddet
   (.container--work) på forside/oversigt bruger 10px ≤768.
   ============================================================ */

/* Fælles sektionsrytme (referencen: 80px block, alle bredder) */
.about-section { padding-block: 80px; }

/* Sidetitel + sektionsintro ------------------------------------------ */
.about-h1 {
  font-size: var(--fs-2xl);            /* 54/40 — som .section-title      */
  font-weight: var(--fw-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.about-lead {
  margin-top: var(--space-s);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  max-width: 68ch;
}

/* ============================================================
   TO-KOLONNE (OM MIG + TILGANG) — tekst ved siden af billede
   Stakket 1 kolonne ≤809, to kolonner ≥810 (referencens skifte).
   ============================================================ */
.about-intro__grid,
.approach__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  margin-top: var(--space-s);
}
/* OM MIG: tekst venstre, portræt højre (referencens portræt ~2:3) */
@media (min-width: 810px) {
  .about-intro__grid { grid-template-columns: 1.7fr 1fr; gap: 40px; }
}
/* TILGANG: billede venstre, tekst højre (spejlvendt, referencens ~3:4).
   På mobil (1 kolonne) vises billedet FØR teksten — som referencen. */
@media (min-width: 810px) {
  .approach__grid { grid-template-columns: 1fr 1.7fr; gap: 40px; }
}

/* Forenklet OM MIG (uden 2-kolonne-grid): begræns tekstbredden til læsbar linjelængde. */
.about-intro__copy { max-width: 72ch; }
.about-copy > * + * { margin-top: var(--fs-sm); }
.about-copy p {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--fg);
  max-width: 62ch;
}

/* ============================================================
   BILLEDPLADSHOLDER (neutral CSS — ingen billedgenerering, ingen
   eksterne billeder, ingen data-URL). Aspect ratios målt på referencen.
   ============================================================ */
.about-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #EFEFEF;
  color: #757575;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: center;
}
.about-placeholder--portrait { aspect-ratio: 2 / 3; }   /* OM MIG  (målt ~2:3) */
.about-placeholder--approach { aspect-ratio: 3 / 4; }   /* TILGANG (målt ~3:4) */

/* ============================================================
   TALLENE FORTÆLLER — 3 kolonner ≥810, 2 kolonner ≤809 (referencen)
   ============================================================ */
.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--space-s);
}
@media (min-width: 810px) {
  .about-stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.about-stat { min-width: 0; }
.about-stat__num {
  font-size: var(--fs-md);             /* 20px — målt                     */
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-body);
  color: var(--fg);
  margin: 0;
}
.about-stat__desc {
  margin-top: 4px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: -0.42px;
  color: #757575;                      /* grå — målt                      */
}

/* ============================================================
   UDVALGTE KUNDER — genbruger marquee (.clients/.clients__track/.client
   fra components.css), men UDEN .clients-section-wrapperen, så
   ≤809-skjulet ikke gælder: sektionen vises OGSÅ på mobil, som
   referencens /about. Samme 80px-rytme som .clients-section.
   ============================================================ */
.about-clients { padding-block: 80px; }

/* ============================================================
   YDELSER — 3 grupper (3 kol ≥810, 1 kol ≤809), hver: overskrift + liste
   ============================================================ */
.about-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s) 12px;
  margin-top: var(--space-s);
  border-top: 1px solid var(--line);
  padding-top: var(--space-xs);
}
@media (min-width: 810px) {
  .about-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.about-service { min-width: 0; }
.about-service__name {
  font-size: var(--fs-md);             /* 20px                            */
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-body);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 var(--fs-sm);
}
.about-service__list { list-style: none; margin: 0; padding: 0; }
.about-service__list li {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--ls-body);
  color: var(--fg-muted);
  padding-block: 8px;
  border-top: 1px solid var(--line);
}
.about-service__list li:first-child { border-top: 0; }

/* ============================================================
   KONTAKT-CTA (kun på Om mig — genindføres ikke på forsiden)
   ============================================================ */
.about-cta {
  border-top: 1px solid var(--line);
  padding-top: var(--space-s);
}
.about-cta__title {
  font-size: var(--fs-xl);             /* 40/32 — CTA, mindre end 54      */
  font-weight: var(--fw-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
  max-width: 22ch;
}
.about-cta__lead {
  margin-top: var(--fs-sm);
  color: var(--fg-muted);
  max-width: 60ch;
}
.about-cta__btn { margin-top: var(--space-s); }

/* ============================================================
   D5-mobilsikring: line-height 0.8 giver overlap når de store danske
   overskrifter ombryder ≤600. .section-title er allerede dækket globalt
   i components.css; her sikres sidens egne store overskrifter.
   ============================================================ */
@media (max-width: 600px) {
  .about-h1,
  .about-cta__title { line-height: 1; }
}