/* =========================================================
   Cars & Care · foer-og-efter.css
   Kun til foer-og-efter.html. Linkes efter site.css.
   Bruger udelukkende tokens og temavariabler fra site.css.

   Indhold
    1  Sidehoved: et lille foto med billedtekst
    2  Filterrække
    3  Cases: tre pr. række
    4  Seneste opgaver: seks pr. række
    5  Noter til ejer
   ========================================================= */

/* Trykflade: selvstændige links og links i tillidsrækken får mindst 44 px højde (WCAG, mål for hele sitet) */
main .link { min-height: 44px; }
main .trust__item a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- 1  Sidehoved ---------- */
.fe-head__media { margin: 0; display: grid; justify-items: end; }
.fe-head__media .photo { width: 100%; }
.fe-head__caption { margin-top: var(--space-3); font-size: var(--fs-xs); font-weight: 600; color: var(--fg-muted); }
.trust__item .ph { margin-left: .4rem; font-size: var(--fs-xs); }

/* ---------- 2  Filterrække ---------- */
.fe-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-6); padding-block: var(--space-4); border-block: 1px solid var(--line); }
.fe-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.fe-filter__label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
.fe-tools__count { font-size: var(--fs-small); font-weight: 600; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.fe-tools__note { margin-top: var(--space-3); }

/* ---------- 3  Cases ----------
   Tre cases pr. række på brede skærme, to på tablet og én på mobil.
   Fakta står som etiket over værdi, fordi kolonnerne er smalle. */
.fe-cases { margin-top: var(--space-7); }
.cases--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); }
.cases--three .case__facts > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; padding-block: .75rem; }
.cases--three .case__facts dt { padding-top: 0; }
.cases--three .case__title { font-size: 1.25rem; }

/* ---------- 4  Seneste opgaver ---------- */
/* position: relative holder den skjulte linktekst (.visually-hidden) inde i den vandrette rulleliste på mobil */
.feed--six .feed__item { position: relative; }
.fe-feed__lead { margin-top: var(--space-4); color: var(--fg-muted); font-size: var(--fs-lead); }
.feed--six .feed__item .link { margin-top: auto; padding-top: var(--space-3); align-self: flex-start; }
.feed--six .feed__note { margin-bottom: var(--space-2); }
.fe-feed__more { justify-content: center; padding-top: var(--space-6); border-top: 1px solid var(--line); }
.fe-feed__done { font-size: var(--fs-small); color: var(--fg-muted); font-weight: 600; }

/* ---------- 5  Noter til ejer ---------- */
.fe-notes { display: grid; gap: var(--space-2); margin-top: var(--space-7); }
.fe-notes .ph-note { margin-top: 0; }

/* ---------- Brud ---------- */
@media (min-width: 1081px) {
  .feed--six { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
}
@media (min-width: 641px) and (max-width: 1080px) {
  .feed--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .cases--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .cases--three { max-width: none; gap: var(--space-7) var(--space-5); }
  .fe-head__media { justify-items: start; }
}
@media (max-width: 640px) {
  .cases--three { grid-template-columns: minmax(0, 1fr); }
  .fe-tools { align-items: flex-start; }
  .fe-filter { gap: var(--space-3); }
  .fe-filter__label { flex-basis: 100%; }
  .fe-feed__more { justify-content: flex-start; }
  .fe-feed__more .btn { flex: 1 1 100%; }
}