/* The series page body — the new NIS page, and every series record switched on.
   A white ground, the engineering blue on the actions, the product itself as the
   one picture, and no second banner: the brief for this page is white, blue and
   the real pump.

   The layout is the shared one — .section, .container, .section__head, .eyebrow,
   .section__sub, .series-group, .series-facts, .spec-table-wrap, .cards,
   .series-grid, .faq, .form, .fields, .field, .field__hint, .img-todo, .prose,
   .series-features — and every rule below is written against the classes this
   template alone renders, so nothing here reaches another page. Colours, spacing
   and radii come from assets/css/tokens.css; no colour is stated here for the
   first time.

   Layout: two columns in the opening block and in the build, two groups side by
   side in the supply, and one column of prose and chips in the series' own
   account; all of them single column on a narrow screen.

   Rhythm: the vertical spacing of this page is set here as well, shorter than
   the shared --section-space, because the page is a run of dense, factual
   sections that are scanned one after another rather than a sequence of
   separate bands. */

/* Hidden when the template says so. The site's other sheets carry the same
   fallback, because a rule that sets display would otherwise outrank it. */
[hidden]{display:none}

/* ---------------------------------------------------------- Page rhythm -- */
/* The page is read as one document rather than as six separate bands. The shared
   --section-space is generous for a page that is one block; this page is a run of
   dense, factual sections a buyer scans one after another, so its rhythm is set
   shorter here — on the one page this sheet is loaded for — and the shared sheet
   keeps its own value for every other page. No new scale is invented: the same
   clamp() runs at a shorter length. */
#main .section{padding-block:clamp(36px,4.4vw,60px)}
#main .section__head{margin-bottom:clamp(18px,2.2vw,28px)}
#main .section__head h2{margin-block:0}

/* -------------------------------------------------------------- Opening -- */
/* The first band of the page: the record's photograph on a pale panel on the
   left, and its family, name, purpose, figures and two ways on at the right.
   It is white rather than navy, so the photograph is what the eye lands on. */
.series-hero{
  background:var(--color-surface);
  padding-block:clamp(20px,2.6vw,36px) clamp(24px,3.2vw,44px);
  border-bottom:1px solid var(--color-line);
}
.series-hero__inner{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(28px,4.4vw,64px);
  align-items:center;
}
.series-hero__media{margin:0}
.series-hero__frame{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(20px,3vw,36px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-pale);
}
.series-hero__photo{
  display:block;
  width:100%;
  height:auto;
  max-height:clamp(240px,32vw,420px);
  object-fit:contain;
  mix-blend-mode:multiply;
}
.series-hero__placeholder{width:min(280px,62vw);min-height:clamp(220px,26vw,320px)}
.series-hero__copy{min-width:0}
.series-hero__title{margin:0;font-size:clamp(28px,3.4vw,46px)}
.series-hero__lede{margin:14px 0 0;max-width:56ch;font-size:18px;color:var(--color-muted)}

/* The figures the record holds, read as a short strip rather than a list: a
   label over its value, two to a row, each one ruled off from the one above. */
.series-hero__specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:20px 0 0}
.series-hero__specs div{padding:10px 0;border-top:1px solid var(--color-line)}
.series-hero__specs dt{margin:0;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
.series-hero__specs dd{
  margin:5px 0 0;
  font-size:19px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--color-heading);
}

/* What those ranges are: the line that says which models they cover and that
   the two ends are not read at one duty point. Quiet, because it qualifies the
   figures above it rather than making a claim of its own. */
.series-hero__note{margin:12px 0 0;max-width:62ch;font-size:13.5px;color:var(--color-muted)}
.series-hero__actions{margin-top:22px}

/* --------------------------------------- Applications & conditions -- */
/* Two groups of label-and-value rows under one heading: the applications the
   series is recorded for, and the conditions it works in. The rows reuse
   .series-facts as the site already draws it; the wrapper only spaces the two
   groups apart and takes over the spacing .series-group carries elsewhere,
   because here the two are one section rather than two. */
.series-pairs{display:grid;gap:clamp(18px,2.2vw,28px)}
.series-pairs > .series-group{margin-top:0}
.series-pairs .series-group h3{margin-top:0}

/* ---------------------------------------------------------------- About -- */
/* The series' own account of itself, between the model table and the build: the
   description the site owner wrote, and the functions confirmed for the series
   as the site's shared chip list draws them (.series-features, from
   product-series.css, which this page loads with it).

   Only the steps are set here: the description takes the shared .prose measure
   at the page's own shorter rhythm, the heading follows it by the same step the
   other sections use between a heading and what it introduces, and the chips
   follow their heading by the short step the supply panels use. The chips wrap
   by themselves, so nothing has to be laid out again on a narrow screen, and
   there is only ever one column to stack. */
.series-about__intro{margin-top:clamp(16px,2.2vw,26px)}
.series-about__intro > :first-child{margin-top:0}
.series-about__intro > :last-child{margin-bottom:0}
.series-about__title{margin:clamp(16px,2.2vw,26px) 0 0;font-size:19px;color:var(--color-heading)}
.series-about .series-features{margin-top:14px}

/* ---------------------------------------------------------------- Build -- */
/* The picture of the series beside the facts of its construction. The panel is
   white on the pale section, so the pump reads as an object on a page rather
   than as another tinted block. */
.series-structure{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(20px,3.2vw,44px);
  align-items:center;
  margin-top:clamp(16px,2.2vw,26px);
}
.series-structure__media{
  display:flex;
  justify-content:center;
  margin:0;
  padding:clamp(20px,3vw,32px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
}
.series-structure__frame{position:relative;display:block;width:100%;line-height:0}
.series-structure__photo{
  display:block;
  margin:0 auto;
  max-width:100%;
  max-height:clamp(240px,30vw,440px);
  object-fit:contain;
  mix-blend-mode:multiply;
}
.series-structure__placeholder{
  width:min(280px,62vw);
  min-height:clamp(240px,28vw,360px);
  margin:0 auto;
}

/* A number the record placed on the picture itself. It repeats the list under
   the picture, so the list carries the parts and this is only a place on the
   photograph; a pointer shows the part's own name beside its number. */
.series-structure__hot{
  position:absolute;
  left:var(--hot-x);
  top:var(--hot-y);
  display:flex;
  align-items:center;
  gap:var(--space-1);
  transform:translate(-50%,-50%);
}
.series-structure__dot{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:2px solid var(--color-surface);
  border-radius:50%;
  background:var(--color-navy);
  color:var(--color-surface);
  font-size:13px;
  font-weight:600;
  line-height:1;
}
.series-structure__chip{
  max-width:200px;
  padding:4px 10px;
  border:1px solid var(--color-line);
  border-radius:999px;
  background:var(--color-surface);
  color:var(--color-heading);
  font-size:12px;
  line-height:1.35;
  white-space:normal;
  opacity:0;
  transition:opacity var(--transition-fast);
}
@media(hover:hover){
  .series-structure__hot:hover .series-structure__chip{opacity:1}
}

/* The numbered parts, read as a list beside the picture. */
.series-structure__parts{margin:0;padding:0;list-style:none}
.series-structure__part{display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--space-2);padding:10px 0;border-top:1px solid var(--color-line)}
.series-structure__part:first-child{border-top:0;padding-top:0}
.series-structure__num{padding-top:3px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-accent)}
.series-structure__label{display:block;color:var(--color-heading)}
.series-structure__note{display:block;font-size:15px;color:var(--color-muted)}
.series-structure__body .series-facts{margin-top:clamp(14px,1.8vw,20px)}
.series-structure__body > :first-child{margin-top:0}

/* ------------------------------------------------------------- Materials -- */
/* The materials the catalogue lists for the parts of the build, printed under the
   facts of construction and inside the build's own column. Some parts are listed
   in two materials, so the second stands beside the first rather than under it:
   three columns, each heading the one it belongs to.

   The table keeps the shared .spec-table look and the shared .spec-table-wrap
   scroll region (assets/css/product-series.css). The width the shared sheet gives
   a .spec-table's first cell is the width of a label column, which is right for a
   table of label-and-value rows and wrong for a table of parts, so it is set back
   here; a narrow screen scrolls the table rather than squeezing a column into a
   smaller type size, and the table states the width below which it does. */
.series-materials{margin-top:clamp(14px,1.8vw,20px)}
.series-materials__title{margin:0 0 10px;font-size:15px;color:var(--color-heading)}
.series-materials__table{min-width:420px}
.series-materials .spec-table th{width:auto}
.series-materials .spec-table 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-materials .spec-table tbody th{font-weight:600;color:var(--color-heading)}
.series-materials__note{margin:10px 0 0;max-width:70ch;font-size:13px;color:var(--color-muted)}

/* ---------------------------------------------------------------- Supply -- */
/* Two groups that must not read as one: what is included, and what is quoted
   with the project. Each is its own bordered panel with its own heading, so the
   second one is never mistaken for part of the first. */
.series-supply{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,32px);
  margin-top:clamp(16px,2.2vw,26px);
}
.series-supply__group{
  display:flex;
  flex-direction:column;
  padding:clamp(18px,2.2vw,26px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
}
.series-supply__title{margin:0;font-size:19px;color:var(--color-heading)}
.series-supply__note{margin:8px 0 0;max-width:70ch;font-size:14px;color:var(--color-muted)}
/* One fact per line: a group is half the panel, so the two-column list the
   shared block draws at full width would read as a wall here. The list starts a
   short step under the panel's own two lines, and the cards or lists below it
   follow it by the same step. */
.series-supply .series-facts{grid-template-columns:minmax(0,1fr);margin-top:14px}
.series-supply .series-grid{margin-top:14px}
.series-supply .cards{margin-top:14px}

/* ------------------------------------------------------------- Documents -- */
/* One row per file the record carries: the role in its own chip, the document's
   own title, and the type and size beside it. */
.series-docs{
  overflow:hidden;
  margin:0;
  padding:0;
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
  list-style:none;
}
.series-docs__item + .series-docs__item{border-top:1px solid var(--color-line)}
.series-docs .resource-link{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 10px;
  margin-top:0;
  padding:14px clamp(16px,2.4vw,24px);
  font-size:16px;
  text-decoration:none;
  transition:background var(--transition-fast);
}
.series-docs .resource-link:hover{background:var(--color-accent-pale)}
.series-docs__role{
  flex:none;
  align-self:center;
  padding:3px 10px;
  border:1px solid var(--color-line);
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-muted);
}
.series-docs__sep{color:var(--color-field-line)}
.series-docs__title{font-weight:600;color:var(--color-heading)}
.series-docs .resource-link:hover .series-docs__title,
.series-docs .resource-link:focus-visible .series-docs__title{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}
.series-docs__meta{font-size:13.5px;font-weight:400;color:var(--color-muted)}
.series-docs .arrow{margin-left:auto;color:var(--color-accent)}

/* ------------------------------------------------------------- Questions -- */
/* The record's own questions, opened by the browser's own <details>. The site
   already draws this list (.faq), so only its measure is set here: a question
   and its answer are read at a length a reader can hold. */
.series-faq{max-width:860px}
.series-faq details:last-child{border-bottom:0}

/* --------------------------------------------------------------- Inquiry -- */
/* The form every button on the page points at. The section is pale, so the form
   itself is white: the fields keep the site's own panel inside a band that is
   already tinted. */
.series-inquiry__wrap{max-width:820px}

/* The model the visitor arrived with, said back to them before they type, so
   the inquiry they send names it. It is the first thing in the form's column,
   and the form follows it by one short step. */
.series-inquiry__topic{
  margin:0;
  padding:12px 16px;
  border-left:3px solid var(--color-accent);
  background:var(--color-accent-pale);
  font-size:15px;
  font-weight:600;
  color:var(--color-navy);
}
.form.series-inquiry__form{margin-top:18px;background:var(--color-surface)}

/* The figure a visitor may not know yet: a box beside the words that say so,
   under the field it belongs to. The site's own rule gives every control the
   full width of its cell, which is right for a text box and wrong for this one,
   so the box is sized to the box it is and the words keep the line's own type. */
.series-inquiry .field__check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:8px 0 0;
  font-size:13px;
  font-weight:400;
  line-height:1.35;
  color:var(--color-muted);
  cursor:pointer;
}
.series-inquiry .field__check input{width:16px;height:16px;min-height:0;margin:0;accent-color:var(--color-accent)}
.series-inquiry .field__check:focus-within{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:2px}
.series-inquiry .field__check input:checked + span{color:var(--color-accent-dark);font-weight:600}

/* ------------------------------------------------------------ Responsive -- */
/* The two-column rows stack, and the opening block leads with the photograph on
   a narrow screen: the pump is what the page is about, so it is what is seen
   first when there is room for one thing at a time. */
@media(max-width:980px){
  .series-structure,
  .series-supply{grid-template-columns:minmax(0,1fr)}
  .series-structure__photo{max-height:400px}
}
@media(max-width:900px){
  .series-hero{padding-block:18px 28px}
  .series-hero__inner{grid-template-columns:minmax(0,1fr);gap:24px}
  .series-hero__photo{max-height:clamp(220px,44vw,340px)}
}
@media(max-width:620px){
  .series-hero__specs{grid-template-columns:minmax(0,1fr);gap:0}
  .series-hero__specs div:first-child{border-top:0;padding-top:0}
  .series-docs .arrow{display:none}
  .series-materials .spec-table th,
  .series-materials .spec-table td{padding:11px 13px}
  .series-materials__title{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .series-structure__chip{transition:none}
}

/* The inverter range on a pump page: the ways into it, read as the range it is.
   The supply section above the block is where a series may be named for a duty
   point; this block names none, so a card here is never read as the inverter
   that comes with the pump above it. */
.series-inverters__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(24px,3vw,38px)}
.series-inverters__card{display:flex;flex-direction:column;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.series-inverters__media{display:flex;align-items:center;justify-content:center;height:190px;padding:22px;background:var(--color-pale)}
.series-inverters__photo{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.series-inverters__placeholder{display:flex;align-items:center;justify-content:center;height:100%;margin:0;font-size:13px;color:var(--color-muted);text-align:center}
.series-inverters__body{display:flex;flex:1;flex-direction:column;gap:12px;padding:24px}
.series-inverters__title{margin:0;font-size:19px}
.series-inverters__title a{color:var(--color-heading);text-decoration:none}
.series-inverters__title a:hover,.series-inverters__title a:focus{color:var(--color-accent);text-decoration:underline}
.series-inverters__range{margin:0;font-size:15px;font-weight:600;color:var(--color-heading)}
.series-inverters__range-label{margin-right:6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
.series-inverters__text{margin:0;font-size:15px;color:var(--color-muted)}
.series-inverters__link{margin-top:auto;align-self:flex-start}

@media (max-width:960px){
  .series-inverters__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:620px){
  .series-inverters__grid{grid-template-columns:minmax(0,1fr)}
  .series-inverters__media{height:160px}
  .series-inverters__body{padding:20px}
}

/* --- the supply section after the merge: one section, three groups --------- */

/* A supply section with no accessory group in it is one column, not half a grid. */
.series-supply--one{grid-template-columns:minmax(0,1fr)}

/* The sentence about accessories when the record lists none: a line under the
   section rather than a heading over an empty group. */
.series-supply__footnote{margin:18px 0 0;max-width:78ch;font-size:14px;color:var(--color-muted)}

/* The inverter range as a group of the same section: set off by a rule, one step
   below the supply groups, carrying the cards the range used to carry in a
   section of its own. */
.series-supply__range{margin-top:clamp(30px,3.6vw,48px);padding-top:clamp(24px,3vw,38px);border-top:1px solid var(--color-line)}
.series-supply__range .series-inverters__grid{margin-top:18px}