/* Product lines — the layout the two solar pump line pages add to the shared
   blocks.

   The AC and BLDC page templates put .product-line on <main>, so every rule in
   this file is scoped to those two pages and reaches nothing else on the site.
   The blocks themselves — .panel, .card-grid, .media-frame, .icon-grid,
   .step-list, .compare, .pill-list, .jobs-list — come from style.css,
   sections.css and pages.css and are not redefined here: what follows is only
   what these two pages need on top of them, and each rule is scoped so it holds
   whatever order the sheets are printed in.

   Values come from assets/css/tokens.css. Movement is 2px and 150–200ms, the
   same as the shared blocks. */

/* -------------------------------------------------------------- Pump cards -- */
/* Eight cards on the AC page, so they state four columns and read as two rows of
   four. A BLDC group holds two or three families, so that one is auto-fit: a
   group of two fills its row instead of leaving a third of it empty. */
.product-line--ac .pump-type-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.product-line--bldc .pump-type-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* The picture area is the card's own pale block rather than a frame inside a
   frame: the .panel already carries the border the card is read by. Its height
   is the 4:3 ratio .media-frame--4x3 states, read from the card's width, so the
   block holds its shape on a card whose record carries no picture at all and
   the cards of a row stay the same height. */
.product-line .pump-type-card__media{
  margin:0 0 18px;
  border:0;
  background:var(--color-pale);
}

/* The picture is scaled to the block it is given and held clear of the block's
   edge, so the pictures of a row read as one set whatever their proportions. */
.product-line .pump-type-card__photo{
  padding:12px;
  object-fit:contain;
}

/* The AC cards carry the shot of the pump with the drive it is supplied with
   rather than a cut-out of the pump alone, so the picture is read inside the
   block's frame: the inset is the shared spacing step, which clears the 12px
   corner the .media-frame draws, so a picture that fills its block edge to edge
   is not cut by that curve, and the picture is scaled up to the block it is
   given rather than printed at its own size, so a small file is not left small
   in a large block. Scoped to the AC page: the BLDC cards keep the rule above. */
.product-line--ac .pump-type-card__media .pump-type-card__photo{
  padding:var(--space-2);
  object-fit:contain;
}

/* The series code above the card's name: the label a buyer scans for. */
.product-line .pump-type-card__code{
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-accent);
}

/* The two classification rows a record carries. A record that carries neither
   prints no list at all, so the rule is written for the list, not for the card. */
.product-line .pump-type-card__facts{
  margin:18px 0 0;
  padding:14px 0 0;
  border-top:1px solid var(--color-line);
}

.product-line .pump-type-card__facts > div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:5px 0;
  font-size:13px;
}

.product-line .pump-type-card__facts dt{flex:none;color:var(--color-muted)}
.product-line .pump-type-card__facts dd{margin:0;font-weight:600;text-align:right;color:var(--color-navy)}

/* The family card in Models & Performance: the model table sits where a card's
   picture would, so the three families read as one row of the same shape. */
.product-line .pump-type-card--models .compare__wrap{margin-top:18px}
.product-line .pump-type-card--models .compare{font-size:13px}
.product-line .pump-type-card--models .compare th,
.product-line .pump-type-card--models .compare td{padding:8px 10px}

.product-line .panel__title a{color:inherit;text-decoration:none}
.product-line .panel__title a:hover{color:var(--color-accent)}

/* ------------------------------------------------------------ Source cards -- */
/* The water-source card: a cross-section, then the pump types that source is read
   in, each one a link down the page. The chip is the link rather than holding
   one, so the whole pill is clickable.

   These classes carry the 'water-source-' prefix rather than the .source-card
   names the pump page uses: page-products.css is loaded on every page and styles
   .source-card*, so a shared name here would be styled by another page's sheet. */
.product-line .water-source-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

.product-line .water-source-card__scene{margin:0 0 18px}
.product-line .water-source-card__scene .scene__caption{margin-top:10px}

/* The card's photograph of the source. The four pictures are held to one 4:3
   frame, so the cards stay a row of equal pictures; the cross-section drawing
   above keeps its own frame for the fallback, where the caption follows it. */
.product-line .water-source-card__photo{margin:0 0 18px}

.product-line .water-source-card__photo img{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:var(--radius-md);
  background:var(--color-pale);
}

.product-line .water-source-card__types{
  margin-top:auto;
  padding-top:18px;
}

.product-line .water-source-card__label{
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-muted);
}

.product-line .water-source-card .pill-list li{
  padding:0;
  transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);
}

.product-line .water-source-card .pill-list a{
  display:block;
  padding:6px 12px;
  border-radius:inherit;
  color:inherit;
  text-decoration:none;
}

.product-line .water-source-card .pill-list li:hover{
  border-color:var(--color-accent);
  background:var(--color-accent-pale);
  color:var(--color-accent);
}

/* ---------------------------------------------------- The pump-type switch -- */
/* Two anchor links above the two groups. They are links, not a tablist: no script
   changes their state on this page, so the markup does not claim one. */
.product-line .product-line__jump{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  margin:0 0 clamp(24px,3vw,36px);
}

.product-line .product-line__jump-label{
  margin:0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-muted);
}

.product-line .product-line__jump-links{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}

.product-line .product-line__jump-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 18px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  color:var(--color-navy);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);
}

.product-line .product-line__jump-links a:hover,
.product-line .product-line__jump-links a:focus-visible{
  background:var(--color-accent-pale);
  border-color:var(--color-accent);
  color:var(--color-accent);
}

/* --------------------------------------------------------------- Grouping -- */
/* A pump group on the BLDC page: a heading, one line, and the families of that
   type. The second group keeps its distance from the first. */
.product-line .pump-group + .pump-group{margin-top:clamp(40px,6vw,72px)}
.product-line .pump-group .section__head{margin-bottom:24px}

/* An anchor from a source card, or from the pump-type switch, lands below the
   sticky header rather than under it. */
.product-line .pump-group,
.product-line .pump-type-card[id]{scroll-margin-top:calc(var(--header-height) + 20px)}

/* The controller block's drawing, under the icon list it belongs to. */
.product-line .product-line__diagram{
  margin:clamp(32px,4vw,48px) 0 0;
  max-width:900px;
}

/* The two icon lists are sized to the number of items they hold: the four
   reasons on the AC page read as one row, the six on the BLDC page as two rows
   of three. The controller list holds seven and keeps the shared auto-fit. */
.product-line #why .icon-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.product-line #when .icon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* -------------------------------------------------------------- Responsive -- */
@media (max-width:1080px){
  .product-line #why .icon-grid,
  .product-line #when .icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .product-line--ac .pump-type-grid,
  .product-line .water-source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-line--bldc .pump-type-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}

@media (max-width:900px){
  .product-line .feature{gap:32px}
  .product-line .product-line__diagram{max-width:none}
}

@media (max-width:620px){
  .product-line--ac .pump-type-grid,
  .product-line--bldc .pump-type-grid,
  .product-line .water-source-grid,
  .product-line #why .icon-grid,
  .product-line #when .icon-grid{grid-template-columns:minmax(0,1fr)}

  /* The step list stands in a half-width column on a wide screen and in a single
     column here, where the number does not need 56px of the row. */
  .product-line .step-list > li{grid-template-columns:40px minmax(0,1fr);gap:12px;padding-bottom:22px}
  .product-line .step-list > li::before{width:32px;height:32px;font-size:12px}
  .product-line .step-list__title{font-size:16px}

  .product-line .pump-type-card__facts > div{font-size:12px}
  .product-line .pump-type-card__media{margin-bottom:14px}
  .product-line .product-line__jump-links a{flex:1 1 auto;justify-content:center}
}