/* 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. */
.product-line .pump-type-card__media{
  margin:0 0 18px;
  border:0;
  background:var(--color-pale);
}

.product-line .pump-type-card__photo{
  padding:12px;
  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}
}