/* =========================================================
   HÖJDRESAN · Teleskoplastare till salu — TEMA
   Temar bara den delade listnings-motorn (assets/till-salu/base.css)
   till höjdresans tokens. Motorns funktion rörs inte.
   Vit bas · Magni-röd #AE171A på nyckeltal + knapp · grå #2F383C text ·
   Open Sans + IBM Plex Mono. Denna sida har INGEN höjdmätare → neutralisera
   höjdresans meter-offset från ../styles.css.
   ========================================================= */

/* ---------- Ingen mätare här: ta bort meter-spaltens offset ---------- */
.tspage .meter { display: none !important; }
.tspage .nav__inner,
.tspage .footer__inner,
.tspage .footer__copy { padding-left: var(--pad); }

/* container-bredd för rubrikstrip + motor */
.tsstrip,
.section--ts {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---------- TOKEN-MAPPNING: motorns --ts-* → höjdresans 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: 4px;                     /* höjdresans nästan-raka hörn (= sidans kort) */
  --ts-font: var(--sans);
  --ts-mono: var(--mono);
  --ts-gap: clamp(16px, 2vw, 28px);
}

/* ---------- ÖVERSTYRNINGAR (ovanpå base.css) ---------- */

/* Toolbar: tunn underlinje, mono-etiketter, rena rektangulära fält */
.ts .ts-toolbar {
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule-strong);
}
.ts .ts-search,
.ts .ts-brand,
.ts .ts-cat,
.ts .ts-sort {
  border-radius: 2px;
  background: var(--white);
}
.ts .ts-count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-55);
  letter-spacing: 0.01em;
}

/* Kort: rena rektanglar, raka hörn, 1px-ram (= höjdresans station-kort) */
.ts .ts-card {
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.ts .ts-card__media { aspect-ratio: 4 / 3; background: #f1f2f3; }

/* Badge: höjdresans fyrkantiga språk i stället för pill */
.ts .ts-badge {
  border-radius: 2px;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.ts .ts-badge--used { background: var(--ink); }
.ts .ts-badge--demo { background: var(--red); }

/* Titel: rak rubrik */
.ts .ts-card__title {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.22;
}

/* Spec-rader: tabulära mono-siffror; 1px-linjer i stället för prickade. */
.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: 0.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) som mono-tal.
   #AE171A på vitt = 5.66:1 → WCAG AA-ok. */
.ts .ts-card__spec > div:nth-child(2) dd,
.ts .ts-card__spec > div:nth-child(3) dd {
  color: var(--red);
}

/* CTA-knappar: raka hörn, höjdresans knappspråk */
.ts .ts-btn {
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ts .ts-btn--primary { background: var(--red); color: #fff; }
.ts .ts-btn--ghost {
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  background: transparent;
}

/* Pager: aktiv = röd, mono-siffror */
.ts .ts-page-btn { border-radius: 2px; }
.ts .ts-page-btn.is-active { background: var(--red); border-color: var(--red); color: #fff; }

/* Källrad */
.ts .ts-source a { color: var(--red); }

/* =========================================================
   RUBRIKSTRIP (sidans egen, ovanför motorn)
   ========================================================= */
.tsstrip {
  padding-block: clamp(48px, 7vw, 88px) clamp(26px, 4vw, 40px);
  border-top: none;
}
.tsstrip__inner { max-width: 60rem; }
.tsstrip__kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 0 0 16px;
}
.tsstrip__title {
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
}
.tsstrip__lede {
  margin-top: 16px;
  max-width: 56ch;
  color: var(--ink-70);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
}
.tsstrip__lede .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--red);
  font-weight: 600;
}

/* Motorns sektion: tunn topplinje */
.section--ts {
  border-top: 1px solid var(--rule);
  padding-top: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

/* Aktiv nav-post: röd hårlinje (matchar höjdresans nav) */
.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; }
}