/* =========================================================
   DATABLADET · Teleskoplastare till salu — TEMA
   Temar bara den delade listnings-motorn (assets/till-salu/base.css)
   till databladets tokens. Motorns funktion rörs inte.
   Vit bas · Magni-röd #AE171A på nyckeltal + knapp · grå #2F383C text ·
   Open Sans + IBM Plex Mono · rena rektanglar · 1px-linjer · strikt rutnät.
   ========================================================= */

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

/* ---------- DATABLADS-Ö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: flush rektanglar, raka hörn, ren 1px-ram */
.ts .ts-card {
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.ts .ts-card__media { aspect-ratio: 4 / 3; background: #f1f2f3; }

/* Badge: databladets 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 datablads-rubrik */
.ts .ts-card__title {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.22;
}

/* Spec-rader: tabulära mono-siffror som bär allt; drifttimmar i RÖTT mono.
   1px-linjer i stället för prickade. 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: 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.
   Stora tal → rött är WCAG-ok (#AE171A på vitt = 5.66:1). */
.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, databladets knappspråk */
.ts .ts-btn {
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.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 rektangulära mono-knappar */
.ts .ts-page-btn {
  border-radius: 2px;
  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: databladets sakliga underrad */
.ts .ts-source { color: var(--ink-40); }
.ts .ts-source a { color: var(--red); }

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

/* =========================================================
   RUBRIKSTRIP (sidans egen, ovanför motorn)
   ========================================================= */
.tsstrip {
  padding-block: clamp(56px, 8vw, 92px) clamp(28px, 4vw, 44px);
  border-top: none;
}
.tsstrip__inner { grid-column: 1 / span 12; }
.tsstrip__kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 16px;
}
.tsstrip__title {
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.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: full bredd i rutnätet, tunn topplinje */
.section--ts { border-top: 1px solid var(--rule); }
.section--ts .ts { grid-column: 1 / span 12; }

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

@media (max-width: 560px) {
  /* mono-siffror behåller läsbarhet på små kort */
  .ts .ts-card__spec dt { font-size: 12px; }
}