/* ============================================================
   Inner-page components (column banner, spec tables, catalog
   sidebar, article prose). Homepage keeps its own styles in
   style.css — this file only adds what inner pages need.
   ============================================================ */
/* page banner (column pages) */
.phero{position:relative;isolation:isolate;color:#fff;background-color:#0E2E4A;background-size:cover;background-position:center;padding:clamp(46px,6vw,82px) 0 clamp(38px,4.6vw,60px)}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(9,34,58,.94) 0%,rgba(9,34,58,.84) 48%,rgba(14,46,74,.58) 100%)}
.phero h1{color:#fff;max-width:20em;margin:0 0 14px}
.phero p{color:#D6E3EE;max-width:46em;margin:0;font-size:17px}
.phero .crumb{font-size:13px;color:#9FC6E4;margin:0 0 12px}
.phero .crumb a{color:#9FC6E4}
.phero .crumb span{margin:0 7px;opacity:.6}
/* title band (detail pages: articles, product SKUs) */
.phero--band{background-image:none;background-color:#0E2E4A;padding:clamp(38px,4.6vw,62px) 0 clamp(32px,3.8vw,48px)}
.phero--band::before{display:none}
.phero--band h1{font-size:clamp(1.65rem,2.6vw,2.35rem)}
/* spec tables */
.spec{width:100%;border-collapse:collapse;font-size:15.5px;margin:0 0 var(--space-3)}
.spec caption{caption-side:top;text-align:left;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-secondary);font-weight:600;padding-bottom:8px}
.spec th,.spec td{border-bottom:1px solid var(--color-border);padding:11px 12px;text-align:left;vertical-align:top}
.spec thead th{background:var(--color-bg);color:var(--color-primary);font-size:13px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--color-border)}
.spec tbody th{color:var(--color-primary);font-weight:600;width:32%}
.spec tbody tr:last-child th,.spec tbody tr:last-child td{border-bottom:0}
.spec-wrap{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow-x:auto;background:var(--color-surface);margin-bottom:var(--space-3)}
.spec-wrap .spec{margin:0}
/* definition list for short facts */
.kv{list-style:none;margin:0 0 var(--space-3);padding:0;font-size:15.5px}
.kv li{display:flex;gap:14px;padding:9px 0;border-bottom:1px dashed var(--color-border)}
.kv li:last-child{border-bottom:0}
.kv b{flex:0 0 172px;color:var(--color-primary);font-weight:600}
.kv span{color:var(--color-text)}
/* catalog sidebar + content */
.with-side{display:grid;grid-template-columns:248px minmax(0,1fr);gap:var(--space-4);align-items:start}
.side-box{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);overflow:hidden;margin-bottom:var(--space-3)}
.side-box h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);margin:0;padding:13px 16px;background:var(--color-bg);border-bottom:1px solid var(--color-border);font-weight:700}
.side-nav{list-style:none;margin:0;padding:0}
.side-nav a{display:block;padding:11px 16px;font-size:15px;color:var(--color-text);border-bottom:1px solid var(--color-border)}
.side-nav li:last-child a{border-bottom:0}
.side-nav a:hover{background:var(--color-bg);color:var(--color-primary);text-decoration:none}
.side-nav a[aria-current]{background:var(--color-primary);color:#fff;font-weight:600}
.side-cta{background:var(--color-primary);color:#fff;border-radius:var(--radius-md);padding:var(--space-3)}
.side-cta strong{display:block;color:#fff;margin-bottom:6px}
.side-cta p{color:#C8D8E6;font-size:14px;margin:0 0 14px}
.side-cta .btn{width:100%}
/* product list rows */
.plist{display:grid;gap:var(--space-3)}
.prow{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:border-color .18s,box-shadow .18s}
.prow:hover{border-color:#B9C7D4;box-shadow:var(--shadow-card)}
.prow img{width:100%;height:100%;min-height:190px;object-fit:cover}
.prow-body{padding:var(--space-3) var(--space-3) var(--space-3) 0;display:flex;flex-direction:column}
.prow-body h3{margin-bottom:6px}
.prow-body p{color:var(--color-muted);font-size:15.5px;margin-bottom:12px}
.mini-spec{list-style:none;margin:0 0 var(--space-2);padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;font-size:14.5px}
.mini-spec li{color:var(--color-muted);padding-left:14px;position:relative}
.mini-spec li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;background:var(--color-accent);border-radius:1px}
.mini-spec b{color:var(--color-primary);font-weight:600}
.prow-body .card-link{margin-top:auto;font-weight:600;font-size:15px}
/* article prose */
.prose{max-width:820px}
.prose h2{font-size:1.42rem;margin-top:var(--space-4)}
.prose h3{font-size:1.08rem;margin-top:var(--space-3)}
.prose p,.prose li{font-size:16.5px;color:#2B3945}
.prose ul,.prose ol{margin-bottom:var(--space-3)}
.prose li{margin-bottom:7px}
.prose .callout{background:var(--color-bg);border-left:3px solid var(--color-accent);border-radius:var(--radius-sm);padding:16px 20px;margin:0 0 var(--space-3)}
.prose .callout p:last-child{margin:0}
.article-meta{display:flex;gap:16px;font-size:14px;color:var(--color-muted);margin:0 0 6px}
.article-lead{font-size:18px;color:#2B3945;max-width:52em}
.toc{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);background:var(--color-surface);margin-bottom:var(--space-4)}
.toc h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);margin-bottom:10px}
.toc ol{margin:0;padding-left:1.1em;font-size:15px}
.toc li{margin-bottom:6px}
.article-foot{border-top:1px solid var(--color-border);margin-top:var(--space-4);padding-top:var(--space-3)}
/* CTA band */
.cta-band{background:var(--color-primary);color:#fff;padding:var(--space-5) 0}
.cta-band h2{color:#fff;max-width:26em}
.cta-band p{color:#C8D8E6;max-width:46em}
.cta-band .btn{margin-top:var(--space-2)}
/* misc */
.list-check{list-style:none;margin:0 0 var(--space-3);padding:0;font-size:16px}
.list-check li{padding:7px 0 7px 26px;position:relative;color:#2B3945}
.list-check li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:10px;background:var(--color-accent);border-radius:2px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:center}
.split img{width:100%;border-radius:var(--radius-md);aspect-ratio:4/3;object-fit:cover}
.dark-note{font-size:14px;color:var(--color-muted)}
@media (max-width:1023px){
  .with-side{grid-template-columns:1fr}
  .prow{grid-template-columns:1fr}
  .prow img{min-height:0;aspect-ratio:16/9}
  .prow-body{padding:var(--space-3)}
  .split{grid-template-columns:1fr;gap:var(--space-3)}
  .kv b{flex:0 0 132px}
}
@media (max-width:700px){
  .mini-spec{grid-template-columns:1fr}
  .spec tbody th{width:auto}
  .prose{max-width:none}
}