/* A series page — the specification block of a drive series.
   The block the inverter series pages read instead of a hydraulic model table:
   the figures the series states for its own drive, one table per group, and one
   table of the models with the supply figures each of them states.

   The tables keep the shared .spec-table look and the shared .spec-table-wrap
   scroll region (assets/css/product-series.css), so this sheet adds only what
   the block itself needs: the step between one group and the next, the heading
   over each of them, and the row of column headings the model table carries.
   Every value comes from assets/css/tokens.css and no colour is defined here.

   The shared sheet gives every .spec-table th the width of a label column, which
   is right for a table of label-and-value rows and wrong for a table whose first
   column is a model code, so the model table sets its own width back. */

/* One group under the next: the heading, then the table it introduces. The
   group that lists the models is ruled off from the figures above it, because it
   is a different kind of table rather than more of the same one. */
.series-spec__group + .series-spec__group{margin-top:clamp(18px,2.4vw,28px)}
.series-spec .series-spec__group--models{
  margin-top:clamp(18px,2.4vw,28px);
  padding-top:clamp(14px,2vw,22px);
  border-top:1px solid var(--color-line);
}
.series-spec__title{margin:0 0 10px;font-size:17px;color:var(--color-heading)}

/* ------------------------------------------------------------- Model table -- */
/* One row per model: the model itself, the power it is rated at, and the supply
   figures its own row states. The columns keep the width they need rather than
   the width of the page, so a narrow screen scrolls the table inside
   .spec-table-wrap instead of squeezing a column into a smaller type size. */
.series-spec .series-spec__models{min-width:620px}
.series-spec .series-spec__models th{width:auto}
.series-spec .series-spec__models thead th{
  padding-block:10px;
  background:var(--color-pale);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--color-muted);
}
.series-spec .series-spec__models tbody th{
  white-space:nowrap;
  font-weight:600;
  color:var(--color-heading);
}
.series-spec .series-spec__models td{font-variant-numeric:tabular-nums}

/* A figure the series states for all of its models, marked as coming from the
   series: the sign stands beside the figure it belongs to, and the line under
   the table says what it means. */
.series-spec__mark{margin-left:5px;color:var(--color-muted)}

/* Where the series-level figures come from, and what the sign above means. Both
   stand one short step under what they qualify, and stay quiet: they qualify the
   tables rather than making a claim of their own. */
.series-spec__source,
.series-spec__note{margin:8px 0 0;max-width:78ch;font-size:13px;color:var(--color-muted)}

/* -------------------------------------------------------------- Responsive -- */
/* The label-and-value tables read on a phone without being squeezed: tighter
   padding, and the label column given a little more room than at full width.
   The model table keeps its own minimum and scrolls. */
@media(max-width:720px){
  .series-spec .spec-table th,
  .series-spec .spec-table td{padding:11px 13px}
  .series-spec .series-spec__table tbody th{width:44%}
  .series-spec .series-spec__models{min-width:560px}
  .series-spec__title{font-size:16px}
}