/* ============================================================
   TELFER — components.css
   Reusable component classes on top of colors_and_type.css.
   Signature components (lift, do not redesign): KA badge,
   DETEX compatibility chip, spec table, product card, Amazon CTA.
   ============================================================ */

/* ---- Layout ---- */
.tel-wrap { max-width: var(--tel-container); margin: 0 auto; padding: 0 24px; }
.tel-section { padding: var(--tel-sp-9) 0 var(--tel-sp-10); border-top: 1px solid var(--tel-border); }
.tel-section-title {
  font-family: var(--tel-font-display); text-transform: uppercase;
  font-size: var(--tel-display-m); font-weight: 700; line-height: .98;
  letter-spacing: .01em; margin: 10px 0 6px;
}
.tel-section-sub { color: var(--tel-fg-3); max-width: 62ch; margin: 0 0 var(--tel-sp-7); }

/* ---- KA badge: the buying axis. Brass, machined edge, mono. ---- */
.tel-ka {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tel-brass); color: var(--tel-gunmetal-ink);
  font-family: var(--tel-font-mono); font-weight: 700;
  font-size: var(--tel-mono-m); letter-spacing: .02em;
  border-radius: var(--tel-r-1); padding: 7px 12px;
  box-shadow: var(--tel-brass-edge);
}
.tel-ka small { font-weight: 500; font-size: 10px; letter-spacing: .14em; }
.tel-ka--s { font-size: var(--tel-mono-s); padding: 3px 8px; }
a.tel-ka { text-decoration: none; transition: transform var(--tel-dur-fast) var(--tel-ease), box-shadow var(--tel-dur-fast) var(--tel-ease); }
a.tel-ka:hover { transform: translateY(-1px); box-shadow: var(--tel-brass-edge), var(--tel-shadow-2); }
.tel-ka--off {
  background: var(--tel-paper-3); color: var(--tel-fg-3);
  box-shadow: none; border: 1px dashed var(--tel-border-strong);
}

/* ---- DETEX compatibility chip ---- */
.tel-detex {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--tel-border-strong); border-radius: var(--tel-r-pill);
  padding: 6px 14px; background: var(--tel-paper);
  font-family: var(--tel-font-mono); font-size: var(--tel-mono-s);
  font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tel-fg-2);
}
.tel-detex .tick { color: var(--tel-brass-deep); font-weight: 700; }
.tel-detex--on-dark { border-color: var(--tel-border-on-dark); background: transparent; color: var(--tel-fg-on-dark-2); }
.tel-detex--on-dark .tick { color: var(--tel-brass-hi); }

/* ---- Amazon CTA ---- */
.tel-btn-amz {
  display: inline-block; background: var(--tel-gunmetal); color: var(--tel-fg-on-dark);
  font-family: var(--tel-font-display); text-transform: uppercase;
  font-weight: 700; font-size: 17px; letter-spacing: .05em;
  padding: 11px 22px; border-radius: var(--tel-r-1); text-decoration: none;
  box-shadow: var(--tel-shadow-1);
  transition: transform var(--tel-dur-fast) var(--tel-ease), box-shadow var(--tel-dur-fast) var(--tel-ease);
}
.tel-btn-amz:hover { transform: translateY(-1px); box-shadow: var(--tel-shadow-2); }
.tel-btn-amz span { color: var(--tel-brass-hi); }
.tel-btn-amz--brass { background: var(--tel-brass); color: var(--tel-gunmetal-ink); box-shadow: var(--tel-brass-edge); }
.tel-btn-amz--brass span { color: var(--tel-gunmetal-ink); }

/* ---- Spec table ---- */
.tel-table-scroll { overflow-x: auto; }
table.tel-spec { border-collapse: collapse; width: 100%; font-size: var(--tel-body-s); }
table.tel-spec th {
  font-family: var(--tel-font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tel-nickel-deep);
  text-align: left; padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--tel-border-strong);
}
table.tel-spec td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--tel-border); vertical-align: top; }
table.tel-spec td.mono { font-family: var(--tel-font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---- Product card ---- */
.tel-card {
  background: var(--tel-surface); border: 1px solid var(--tel-border);
  border-radius: var(--tel-r-2); box-shadow: var(--tel-shadow-2);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--tel-dur) var(--tel-ease), box-shadow var(--tel-dur) var(--tel-ease);
}
a.tel-card { text-decoration: none; color: inherit; }
a.tel-card:hover { transform: translateY(-3px); }
.tel-card .ph { background: #fff; border-bottom: 1px solid var(--tel-border); padding: 14px; display: flex; justify-content: center; }
.tel-card .ph img { width: 100%; max-width: 260px; height: auto; display: block; }
.tel-card .bd { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tel-card .model {
  font-family: var(--tel-font-mono); font-size: var(--tel-mono-s); font-weight: 500;
  letter-spacing: .04em; color: var(--tel-nickel-deep); text-transform: uppercase;
}
.tel-card h3 {
  font-family: var(--tel-font-display); text-transform: uppercase;
  font-size: var(--tel-display-s); font-weight: 700; line-height: 1.02;
  letter-spacing: .02em; margin: 0;
}
.tel-card p { font-size: var(--tel-body-s); line-height: 1.45; color: var(--tel-fg-3); margin: 0; }
.tel-card .kas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }

/* ---- Dark band (hero / footer surfaces) ---- */
.tel-band { background: var(--tel-gunmetal); color: var(--tel-fg-on-dark); }
.tel-band .tel-eyebrow { color: var(--tel-brass-hi); }
.tel-band .tel-muted { color: var(--tel-fg-on-dark-2); }

/* ---- Buy row (product page: one KA code -> one Amazon listing) ---- */
.tel-buy-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--tel-surface); border: 1px solid var(--tel-border);
  border-radius: var(--tel-r-2); box-shadow: var(--tel-shadow-1);
  padding: 14px 18px;
}
.tel-buy-row .sku {
  font-family: var(--tel-font-mono); font-size: var(--tel-mono-s);
  color: var(--tel-nickel-deep); letter-spacing: .03em; text-transform: uppercase;
}
.tel-buy-row--off { background: var(--tel-paper-2); border-style: dashed; }