/* =========================================================
   REPORTAGET · Teleskoplastare till salu — TEMA
   Temar bara den delade listnings-motorn (assets/till-salu/base.css)
   till reportagets tokens. Motorns funktion (engine.js/base.css/data) rörs inte.
   Vit bas · Magni-röd #AE171A på nyckeltal + knapp · grå #2F383C text ·
   Open Sans + IBM Plex Mono · dokumentär, lugn, editorial.
   ========================================================= */

/* ---------- TOKEN-MAPPNING: motorns --ts-* → reportagets språk ---------- */
.ts {
  --ts-red: var(--red);                 /* #AE171A */
  --ts-fg: var(--ink);                  /* #2F383C */
  --ts-bg: var(--white);                /* #FFFFFF */
  --ts-muted: var(--ink-55);            /* AA-säker grå för småtext */
  --ts-line: var(--rule);               /* 1px hairline */
  --ts-card-bg: var(--white);
  --ts-radius: 5px;                     /* reportagets mjuka editorial-hörn */
  --ts-font: var(--sans);
  --ts-mono: var(--mono);
  --ts-gap: clamp(16px, 2vw, 24px);
}

/* ---------- LAYOUT: bär sidan i reportagets max-bredd ---------- */
.section--ts {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(56px, 8vw, 96px);
}

/* ---------- TOOLBAR: rena fält, mono-räknare ---------- */
.ts .ts-toolbar {
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--rule-strong);
}
.ts .ts-search,
.ts .ts-brand,
.ts .ts-cat,
.ts .ts-sort {
  border-radius: 3px;
  background: var(--white);
  border-color: var(--rule-strong);
}
.ts .ts-count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-55);
  letter-spacing: .01em;
}

/* ---------- KORT: rena editorial-rektanglar ---------- */
.ts .ts-card {
  border: 1px solid var(--rule);
  border-radius: 5px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ts .ts-card:hover {
  border-color: var(--rule-strong);
  box-shadow: 0 6px 22px rgba(20,24,26,.07);
}
.ts .ts-card__media { aspect-ratio: 4 / 3; background: #f1f2f3; }

/* Badge: reportagets editorial-flagga */
.ts .ts-badge {
  border-radius: 3px;
  letter-spacing: .06em;
  font-weight: 500;
}
.ts .ts-badge--used { background: var(--ink); }
.ts .ts-badge--demo { background: var(--red); }

/* Titel */
.ts .ts-card__title {
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.24;
}

/* Spec-rader: tabulära mono-siffror, 1px-linjer, etikett grå, värde mono */
.ts .ts-card__spec > div {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
}
.ts .ts-card__spec dt {
  color: var(--ink-55);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.ts .ts-card__spec dd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
}
/* Nyckeltal i rött: drifttimmar (rad 2) + årsmodell (rad 3).
   #AE171A på vitt = 5.66:1 → WCAG AA. */
.ts .ts-card__spec > div:nth-child(2) dd,
.ts .ts-card__spec > div:nth-child(3) dd {
  color: var(--red);
}

/* CTA-knappar */
.ts .ts-btn {
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: .01em;
}
.ts .ts-btn--primary { background: var(--red); }
.ts .ts-btn--ghost { border: 1px solid var(--rule-strong); color: var(--ink); }
.ts .ts-btn--ghost:hover { border-color: var(--ink); opacity: 1; }

/* Pager: rena mono-knappar */
.ts .ts-page-btn {
  border-radius: 3px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  border-color: var(--rule-strong);
}
.ts .ts-page-btn.is-active { background: var(--red); border-color: var(--red); }

/* Källrad: reportagets fotokredit-ton (mono caption) */
.ts .ts-source {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-40);
}
.ts .ts-source a { color: var(--red); }

/* Fokus: röd 2px-ring */
.ts :focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* =========================================================
   RUBRIKSTRIP (sidans egen, ovanför motorn) — editorial
   ========================================================= */
.tsstrip {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(40px, 7vw, 84px)) var(--pad) clamp(28px, 4vw, 44px);
}
.tsstrip__inner { max-width: 60ch; }
.tsstrip__kicker {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 0 0 16px;
  display: inline-flex; align-items: center; gap: 10px;
}
.tsstrip__kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 99px;
  background: var(--red); flex: 0 0 auto;
}
.tsstrip__title {
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
}
.tsstrip__lede {
  margin-top: 18px;
  max-width: 58ch;
  color: var(--ink-70);
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.6;
}
.tsstrip__lede .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--red);
  font-weight: 600;
}

/* Motorns sektion: tunn topplinje över listan */
.section--ts { border-top: 1px solid var(--rule); padding-top: clamp(28px, 4vw, 40px); }

/* Aktiv nav-post: röd underlinje */
.nav__links a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--red);
}

@media (max-width: 560px) {
  .ts .ts-card__spec dt { font-size: 12px; }
}