/* ==================================================================
   wr-solution.20261112b.css
   Incremental styles for the /#/solution page. Loaded AFTER
   style.20261030b.css and wr-home.20261112a.css so these rules can
   fine-tune the shared layout classes. No existing CSS file is edited.
   All new selectors are prefixed `sol-` to avoid touching other pages.

   20261112b -- product link cards are laid out as exactly three cards
   per row on desktop (was auto-fill / up to five). The CSS file name is
   versioned because the server sends `Cache-Control: max-age=604800`,
   so an in-place edit would keep serving the old grid for a week.
   ================================================================== */

/* ---- 1. Header: the eighth menu item ---------------------------------
   Desktop >=861px: eight nowrap links share one bar; tighten the gap in
   the 861-1140px budget so the row never wraps or overflows the 72px
   header. <=860px: the same #topNav is an off-canvas flex column with
   overflow-y:auto, so an extra vertical item can only add scroll height,
   never horizontal width. */
@media (min-width:861px) and (max-width:1140px){
  .header-inner{gap:8px}
  .top-nav{gap:10px;margin-left:4px;font-size:13.5px}
  .top-nav a{white-space:nowrap}
  .header-tools{gap:6px}
}
@media (min-width:861px) and (max-width:980px){
  .top-nav{gap:8px;font-size:12.8px}
  .cart-btn{padding:7px 9px;font-size:12px}
}
@media (max-width:860px){
  .top-nav{font-size:16px}
  .top-nav a{padding:12px;white-space:nowrap}
}

/* ---- 2. Section rhythm ------------------------------------------------ */
/* sticky header is 72px tall; keep smooth-scroll targets clear of it */
.sol-anchor{scroll-margin-top:84px}
.sol-jump-sec{padding:26px 0}
.sol-lede{max-width:840px;margin:0 auto 28px;color:var(--muted);
  font-size:15.5px;line-height:1.7;text-align:center}
.sol-subhead{margin:28px 0 12px;font-size:13px;font-weight:800;
  letter-spacing:.9px;text-transform:uppercase;color:var(--brand2)}
.sol-spec-wrap{max-width:820px}
.sol-deploy-note{margin-top:22px;text-align:center}

/* ---- 3. Architecture matrix tweaks ------------------------------------ */
.sol-arch .matrix-cell{min-height:76px}
@media (max-width:860px){
  .sol-arch .matrix-row{grid-template-columns:1fr}
}

/* ---- 4. Product link cards -------------------------------------------
   Three cards per row on desktop. The column count is fixed rather than
   auto-fill so the row always reads as a tidy 3-up strip, matching the
   site's own 3-column card grids (.industry-grid / .cap-grid use
   repeat(3,1fr);gap:20px). minmax(0,1fr) keeps a long product name or
   specification line from pushing a column wider than its track. */
.sol-prod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sol-prod-card{display:flex;flex-direction:column;gap:6px;padding:17px 18px 15px;
  min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.sol-prod-card:hover{transform:translateY(-3px);border-color:var(--brand2);
  box-shadow:0 14px 34px rgba(16,32,60,.13)}
.sol-prod-kicker{font-size:11px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--brand2)}
.sol-prod-name{font-size:16.5px;font-weight:800;line-height:1.3;color:var(--ink);
  overflow-wrap:break-word}
.sol-prod-meta{flex:1;font-size:13px;line-height:1.5;color:var(--muted);
  overflow-wrap:break-word}
.sol-prod-link{margin-top:4px;font-size:13px;font-weight:700;color:var(--brand2)}
.sol-prod-card:hover .sol-prod-link{color:var(--brand)}

/* ---- 5. Specification-only note --------------------------------------
   Models without a live product page are shown as plain text here. */
.sol-spec-note{margin-top:18px;line-height:1.6}
.sol-spec-note b{color:var(--brand)}

/* ---- 6. Scenario jump navigation -------------------------------------
   These are buttons, not hash links: a plain href="#..." would change
   location.hash and re-trigger the SPA router. The global [data-goto]
   handler in app.js scrolls to the target section instead. */
.scene-wall .sol-jump{display:inline-block;background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  font-family:inherit;font-weight:700;font-size:14px;color:var(--ink);
  box-shadow:var(--shadow);cursor:pointer;line-height:1.4;
  transition:border-color .15s ease,color .15s ease}
.scene-wall .sol-jump:hover{border-color:var(--brand2);color:var(--brand2)}

/* ---- 7. Responsive --------------------------------------------------- */
@media (max-width:860px){
  .sol-jump-sec{padding:20px 0}
  .sol-lede{font-size:14.5px}
  .sol-prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .scene-wall .sol-jump{padding:8px 14px;font-size:13px}
  .sol-subhead{margin-top:24px}
  .metric{padding:20px 12px}
  .sol-arch .matrix-items{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric{border-right:0;border-bottom:1px solid var(--line)}
  .metrics .metric:nth-last-child(-n+2){border-bottom:0}
  .metric-value{font-size:25px}
  .sol-prod-grid{grid-template-columns:1fr}
  .sol-arch .matrix-items{grid-template-columns:1fr}
}
@media (max-width:400px){
  .metrics{grid-template-columns:1fr}
  .metric{border-bottom:1px solid var(--line)}
  .metric:last-child{border-bottom:0}
}

/* ---- 8. Solution imagery ---------------------------------------------
   Both files are compressed WebP (85 KB / 128 KB) from the PDF plates.
   The hero plate is 1600x500 (3.2:1): keep it full-width on desktop and
   use `contain` on narrow screens so no robot is cropped out of the family
   shot. The campus plate is 1600x841 (~1.9:1) and sits above scenario 3. */
.sol-hero-visual{margin:34px 0 0;border:1px solid rgba(255,255,255,.35);
  border-radius:14px;overflow:hidden;background:#eef2f7;
  box-shadow:0 18px 44px rgba(0,0,0,.22)}
.sol-hero-visual img{display:block;width:100%;height:auto;
  aspect-ratio:1600/500;object-fit:cover}
.sol-hero-visual figcaption{margin:0;padding:10px 16px;font-size:12.5px;
  line-height:1.5;color:#3c4a5e;background:#e3eaf3}
.sol-scene-visual{margin:0 0 26px;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:var(--surface);
  box-shadow:var(--shadow)}
.sol-scene-visual img{display:block;width:100%;height:auto;
  aspect-ratio:1600/841;object-fit:cover}
.sol-scene-visual figcaption{margin:0;padding:11px 16px;font-size:12.5px;
  line-height:1.5;color:var(--muted);background:var(--surface);
  border-top:1px solid var(--line)}
@media (max-width:860px){
  .sol-hero-visual{margin-top:24px}
  .sol-hero-visual img{aspect-ratio:2.2/1;object-fit:contain}
  .sol-scene-visual img{aspect-ratio:16/9}
}
@media (max-width:640px){
  .sol-hero-visual img{aspect-ratio:2/1}
  .sol-scene-visual img{aspect-ratio:16/10}
}