/**
 * Tornado — Specs Matrix (light CSS)
 * Path: assets/css/specs-matrix.css
 * Version: V25.12.24.1-seo1
 *
 * Goal:
 * - Match Price List cards 1:1 (welcome + notice)
 * - Keep specs table readable (no tiny cells, no fixed-layout squeeze)
 * - Provide horizontal scroll + rounded corners without clipping
 * - Include SEO helper classes used by the shortcode (sr-only + intro)
 */

/* ======================================================================
 * SEO helpers (H1 hidden + short intro)
 * ====================================================================== */
.tnd-sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.tnd-seo-intro{
  margin: 0 0 1rem;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
  max-width: 88ch;
}

/* ---------- Cards (copied from pricing-table.css) ---------- */

.tnd-pricing--specs-matrix .tnd-pricing__notice,
.tnd-pricing--specs-matrix .tnd-pricing--restricted p,
.tnd-pricing--specs-matrix .tnd-pricing--error p {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: #fff8e1;
  border: 1px solid #ffe0a3;
}

/* limited notice (public view) — match Price List */
.tnd-pricing--specs-matrix .tnd-pricing__notice--limited{
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #111827;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.tnd-pricing--specs-matrix .tnd-pricing__welcome {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: #f6f7fb;
  border: 1px solid #e1e4ea;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  margin-bottom: 1rem;
}

.tnd-pricing--specs-matrix .tnd-pricing__welcome p {
  margin: 0.15rem 0;
}

/* ---------- Optional: small button style (for public teaser CTA) ---------- */
.tnd-pricing--specs-matrix .tnd-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.55rem .9rem;
  border-radius:999px;
  border:1px solid #c9ced6;
  background:#fff;
  color:#111827;
  text-decoration:none;
  font-weight:600;
  font-size:13px;
  box-shadow:0 2px 10px rgba(15, 23, 42, 0.05);
}
.tnd-pricing--specs-matrix .tnd-btn:hover{ background:#f6f7fb; }

/* ---------- Matrix wrapper (scroll + rounded) ---------- */

.tnd-pricing--specs-matrix .tnd-pricing-matrix-shell {
  border-radius: 12px;
  overflow: hidden; /* clips corners correctly */
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  background: #ffffff;
}

.tnd-pricing--specs-matrix .tnd-pricing-matrix-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Table (readable; avoid "tiny" look) ---------- */

.tnd-pricing--specs-matrix .tnd-pricing-matrix {
  border-collapse: collapse;
  min-width: 900px;      /* enough columns space; still scrolls on mobile */
  width: 100%;
  background: #ffffff;
  border: 1px solid #e1e4ea;

  /* IMPORTANT: do NOT squeeze columns like pricing-table.css */
  table-layout: auto;
}

.tnd-pricing--specs-matrix .tnd-pricing-matrix th,
.tnd-pricing--specs-matrix .tnd-pricing-matrix td {
  padding: 0.65rem 0.8rem;  /* slightly more generous than price list */
  border-bottom: 1px solid #edf0f4;
  text-align: right;
  white-space: nowrap;
  font-size: 14px;
}

.tnd-pricing--specs-matrix .tnd-pricing-matrix thead th {
  background: #f6f7fb;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
  z-index: 3;
  border-bottom: 1px solid #e1e4ea;
}

/* Sticky first column like Price List (optional but nice) */
.tnd-pricing--specs-matrix .tnd-pricing-matrix__col-model,
.tnd-pricing--specs-matrix .tnd-pricing-matrix__model {
  text-align: left;
  background: #f9fafc;
  font-weight: 600;
  min-width: 220px;
  position: sticky;
  left: 0;
  z-index: 4;
}

.tnd-pricing--specs-matrix .tnd-pricing-matrix thead .tnd-pricing-matrix__col-model {
  z-index: 6;
}

.tnd-pricing--specs-matrix .tnd-pricing-matrix tbody tr:nth-child(odd) .tnd-pricing-matrix__model {
  background: #f3f5f9;
}
.tnd-pricing--specs-matrix .tnd-pricing-matrix tbody tr:nth-child(even) .tnd-pricing-matrix__model {
  background: #f9fafc;
}

/* Value styling reusing existing classes */
.tnd-pricing--specs-matrix .tnd-pricing-matrix__price {
  display: inline-block;
  min-width: 3.5ch;
  font-variant-numeric: tabular-nums;
}

.tnd-pricing--specs-matrix .tnd-pricing-matrix__price--na {
  color: #c3c7d0;
}