/* DPR — interior page patterns.
   Companion to site.css. Uses only the tokens already defined there
   (--ink, --bone, --copper/#E85D22, --iron/#8FA3B1, --steel-*, type vars).
   Load AFTER site.css. No new colors introduced. */

/* ---------- page hero (compact banner for interior pages) ---------- */
.phero{position:relative;background:var(--ink);color:var(--white);padding:clamp(90px,12vw,150px) 0 clamp(40px,5vw,64px)}
.phero--iron{border-bottom:6px solid var(--iron)}
.phero--copper{border-bottom:6px solid var(--copper)}
.phero--bone{background:var(--bone);color:var(--ink)}
.phero-media{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28}
.phero--bone .phero-media{opacity:.16}
.phero .wrap{position:relative}
.phero h1{font-family:var(--display);text-transform:uppercase;letter-spacing:-.02em;line-height:.94;
  font-size:clamp(2.4rem,6vw,4.6rem);margin:10px 0 0;max-width:18ch}
.phero-sub{margin-top:20px;font-size:1.14rem;max-width:56ch;color:var(--steel-300)}
.phero--bone .phero-sub{color:var(--steel-700)}
.phero .btn{margin-top:28px}

/* ---------- breadcrumb ---------- */
.crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-500)}
.crumbs a{color:var(--steel-500);text-decoration:none}
.crumbs a:hover{color:var(--copper)}
.crumbs span{margin:0 8px;opacity:.5}
.phero:not(.phero--bone) .crumbs,.phero:not(.phero--bone) .crumbs a{color:var(--steel-300)}

/* ---------- prose (long-form copy, answer-first) ---------- */
.prose{max-width:64ch}
.prose p{margin:0 0 18px;font-size:1.08rem;line-height:1.7;color:var(--steel-700)}
.sec--ink .prose p,.sec--steel .prose p{color:var(--steel-300)}
.prose .lead{font-size:1.28rem;line-height:1.55;color:var(--ink);margin-bottom:26px}
.sec--ink .prose .lead{color:var(--white)}
.prose h3{font-family:var(--display);text-transform:uppercase;letter-spacing:-.01em;
  font-size:1.5rem;margin:34px 0 12px}
.prose strong{color:inherit;font-weight:700}

/* ---------- two-column layout ---------- */
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,5vw,72px);align-items:start}
.split--even{grid-template-columns:1fr 1fr}
@media (max-width:860px){.split,.split--even{grid-template-columns:1fr;gap:36px}}

/* ---------- material / spec list ---------- */
.spec{border-top:2px solid var(--steel-100)}
.sec--ink .spec,.sec--steel .spec{border-top-color:var(--steel-700)}
.spec-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--steel-100)}
.sec--ink .spec-row,.sec--steel .spec-row{border-bottom-color:var(--steel-700)}
.spec-row dt{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-500)}
.spec-row dd{margin:0;font-size:1.02rem}

/* ---------- material chips grid ---------- */
.mat-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px 34px;margin:0;padding:0;list-style:none}
@media (max-width:560px){.mat-cols{grid-template-columns:1fr}}
.mat-cols li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--steel-100);
  font-family:var(--mono);font-size:.86rem;letter-spacing:.04em;text-transform:uppercase}
.sec--ink .mat-cols li,.sec--steel .mat-cols li{border-bottom-color:var(--steel-700)}
.mat-cols li::before{content:"";width:11px;height:11px;flex:none;background:var(--iron)}
.mat-cols.mat--copper li::before{background:var(--copper)}

/* ---------- info cards ---------- */
.cardset{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cardset--2{grid-template-columns:1fr 1fr}
@media (max-width:860px){.cardset,.cardset--2{grid-template-columns:1fr}}
.pcard{background:var(--card);color:var(--white);padding:30px 28px;border-top:4px solid var(--iron)}
.pcard--copper{border-top-color:var(--copper)}
.sec--bone .pcard{background:var(--white);color:var(--ink);border:1px solid var(--steel-100);border-top:4px solid var(--iron)}
.sec--bone .pcard--copper{border-top:4px solid var(--copper)}
.pcard h3{font-family:var(--display);text-transform:uppercase;font-size:1.3rem;letter-spacing:-.01em;margin:0 0 10px}
.pcard p{margin:0;color:var(--steel-300);font-size:1rem;line-height:1.6}
.sec--bone .pcard p{color:var(--steel-700)}
.pcard .pcard-i{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);display:block;margin-bottom:14px}

/* ---------- FAQ (answer-first, marked up as FAQPage in the .cshtml) ---------- */
.faq{border-top:2px solid var(--steel-100);max-width:70ch}
.faq-item{border-bottom:1px solid var(--steel-100);padding:22px 0}
.faq-item h3{font-family:var(--body);font-weight:600;font-size:1.12rem;margin:0 0 8px;color:var(--ink)}
.faq-item p{margin:0;color:var(--steel-700);line-height:1.65}

/* ---------- step list ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;list-style:none;margin:0;padding:0}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{border-top:2px solid var(--copper);padding-top:16px}
.steps li h3{font-family:var(--display);text-transform:uppercase;font-size:1.06rem;margin:6px 0 8px}
.steps li .step-n{font-family:var(--display);font-size:1.4rem;color:var(--steel-500)}
.steps li p{margin:0;font-size:.98rem;color:var(--steel-700);line-height:1.55}
.sec--ink .steps li p{color:var(--steel-300)}

/* ---------- inline call band ---------- */
.callrow{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.callrow .btn{flex:0 0 auto}

/* ---------- trust strip (scale certification, etc.) ---------- */
.trust{display:flex;align-items:center;gap:18px;background:var(--card);color:var(--white);
  padding:20px 24px;border-left:5px solid var(--copper);margin-top:8px}
.sec--bone .trust{background:var(--ink)}
.trust .trust-k{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.trust p{margin:4px 0 0;font-size:1.04rem;line-height:1.5}

/* ============================================================
   INTERIOR POLISH (DPR-001e) — photographic page heroes, an
   on-brand "photo pending" treatment (hatch + tag, matching the
   homepage), a copper art-direction for the non-ferrous page,
   and the News surfaces. Existing tokens only; no new colors.
   ferrous = steel (--iron) · non-ferrous = orange (--copper).
   ============================================================ */

/* --- Page hero: full-bleed & photographic, like the homepage hero --- */
.phero{min-height:clamp(340px,44vw,540px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding-block:clamp(96px,12vw,150px) clamp(34px,4vw,56px)}
.phero .wrap{width:100%}
.phero-media{opacity:1;z-index:-2}
.phero--bone .phero-media{opacity:.14}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(8,9,10,.32),transparent 26%,rgba(8,9,10,.30) 58%,rgba(8,9,10,.94)),
  linear-gradient(90deg,rgba(8,9,10,.82),rgba(8,9,10,.46) 46%,rgba(8,9,10,.10) 82%)}
.phero--bone::after{background:linear-gradient(180deg,transparent,rgba(239,239,236,.55))}
/* ferrous / copper hairline above the scrim */
.phero--iron,.phero--copper{border-bottom:0}
.phero--iron::before,.phero--copper::before{content:"";position:absolute;inset:auto 0 0 0;height:6px;z-index:2}
.phero--iron::before{background:var(--iron)}
.phero--copper::before{background:var(--copper)}
/* graphic hero when there is no photo (non-ferrous): copper glow + fine hatch */
.phero--copperwall{background:
  radial-gradient(130% 95% at 80% 12%,rgba(232,93,34,.24),transparent 58%),
  repeating-linear-gradient(-45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 17px),
  var(--ink)}
.phero--copperwall .phero-media{display:none}

/* --- On-brand "photo pending" tag on .shot placeholders (site.css owns .shot) --- */
.shot--tall.shot,.shot--wide.shot{min-height:220px}
.shot .shot-tag{position:relative;z-index:1}

/* --- Non-ferrous copper "material wall": graphic stand-in for a copper photo --- */
.copperwall{position:relative;aspect-ratio:4/5;overflow:hidden;color:var(--white);
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px;
  background:
    radial-gradient(120% 80% at 20% 0%,rgba(232,93,34,.30),transparent 55%),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 18px),
    var(--ink-2);
  border:1px solid rgba(255,255,255,.10);border-top:6px solid var(--copper)}
.copperwall .cw-k{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper)}
.copperwall .cw-h{font-family:var(--display);text-transform:uppercase;letter-spacing:-.02em;line-height:.92;font-size:clamp(1.8rem,3vw,2.6rem);margin:8px 0 0}
.copperwall .cw-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.copperwall .cw-list span{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-100);border:1px solid rgba(232,93,34,.5);padding:5px 9px}

/* --- Answer-first intro block (page lede that leads with the answer) --- */
.answer{border-left:0;max-width:62ch}
.answer .lead{font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.4;color:var(--ink);font-family:var(--body);font-weight:500}
.sec--ink .answer .lead,.sec--steel .answer .lead{color:var(--white)}

/* ============================ NEWS ============================ */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(20px,2.4vw,32px)}
.news-card{display:flex;flex-direction:column;background:var(--card);border:1px solid rgba(255,255,255,.08);
  text-decoration:none;color:inherit;transition:transform .25s var(--ease),border-color .25s}
.news-card:hover{transform:translateY(-5px);border-color:rgba(232,93,34,.5)}
.news-fig{position:relative;aspect-ratio:16/9;overflow:hidden;background:#15181A;
  background-size:cover;background-position:center;
  background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.035) 0 14px,transparent 14px 28px)}
.news-fig .cat{position:absolute;left:0;top:0;font-family:var(--mono);font-size:.64rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;background:var(--hazard);color:var(--ink);padding:5px 10px}
.news-body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.news-date{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-500)}
.news-card h3{font-family:var(--display);text-transform:uppercase;letter-spacing:-.01em;font-size:1.35rem;line-height:1.02;color:var(--white)}
.news-card p{margin:0;color:var(--steel-300);font-size:.98rem;line-height:1.55}
.news-card .rd{margin-top:auto;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hazard)}

/* Article detail */
.article{max-width:72ch;margin-inline:auto}
.article .article-lead{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.45;color:var(--ink);margin-bottom:26px}
.sec--ink .article .article-lead{color:var(--white)}
.article p{font-size:1.08rem;line-height:1.75;color:var(--steel-700);margin:0 0 20px}
.article h2{font-family:var(--display);text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.5rem,2.4vw,2rem);margin:38px 0 14px}
.article h3{font-family:var(--display);text-transform:uppercase;font-size:1.3rem;margin:28px 0 10px}
.article ul{margin:0 0 20px;padding-left:0;list-style:none}
.article ul li{position:relative;padding:8px 0 8px 26px;border-bottom:1px solid var(--steel-100);color:var(--steel-700)}
.article ul li::before{content:"";position:absolute;left:0;top:16px;width:11px;height:11px;background:var(--hazard)}
.article-meta{display:flex;flex-wrap:wrap;gap:10px 20px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-500);margin-bottom:26px}

@media (prefers-reduced-motion:reduce){
  .news-card:hover{transform:none}
}