@charset "UTF-8";
/* ==========================================================================
   宏鼎五金 · 页面层  pages.css
   --------------------------------------------------------------------------
   负责：首页各区块 + 内页专属布局（产品、详情、能力、关于、联系）
   依赖：base.css / layout.css / components.css
   ========================================================================== */

/* ==========================================================================
   首页 · 首屏
   ========================================================================== */
.hero {
  position: relative;
  background: var(--c-950);
  color: var(--on-invert);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
/* 双层遮罩：左侧压暗保证文字可读，底部过渡到数据带 */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(10, 13, 17, .95) 0%, rgba(10, 13, 17, .86) 34%,
                    rgba(12, 15, 20, .58) 62%, rgba(12, 15, 20, .42) 100%),
    linear-gradient(to top, rgba(10, 13, 17, .92) 0%, rgba(10, 13, 17, 0) 42%);
}
.hero__inner {
  padding-block: clamp(58px, 8vw, 118px) clamp(40px, 5vw, 66px);
  max-width: 46rem;
}
.hero h1 {
  color: #fff;
  letter-spacing: -.028em;
}
.hero h1 em {
  font-style: normal;
  color: var(--temper-bright);
}
.hero__lead {
  margin-top: var(--sp-6);
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 1.7;
  color: #d5dbe2;
  max-width: 40rem;
}
.hero__lead b { color: #fff; font-weight: 600; }
.hero__actions {
  margin-top: clamp(28px, 3.2vw, 42px);
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.hero__facts {
  margin-top: clamp(30px, 3.6vw, 46px);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: #a8b1bb;
}
.hero__facts li { display: flex; align-items: center; gap: 8px; }
.hero__facts svg { width: 14px; height: 14px; color: var(--temper-bright); flex: none; }

/* 首屏底部的关键数据 */
.hero__stats {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .16);
  background: rgba(15, 18, 22, .82);
  backdrop-filter: blur(6px);
}
@media (max-width: 720px) {
  .hero__media img { object-position: 70% 50%; }
  .hero__media::after {
    background:
      linear-gradient(to bottom, rgba(10, 13, 17, .8) 0%, rgba(10, 13, 17, .93) 55%, rgba(10, 13, 17, .97) 100%);
  }
}

/* ==========================================================================
   首页 · 产品分类
   ========================================================================== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cat-grid .tile { border: 0; box-shadow: none; }
.cat-grid .tile:hover { transform: none; box-shadow: inset 0 0 0 1px var(--c-400); }
@media (max-width: 1024px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   首页 · 加工能力（左图右列）
   ========================================================================== */
.capability {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
}
.capability__figure {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  padding: 10px;
}
.capability__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.capability__figure figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 12px 4px 2px;
  font-size: var(--fs-2xs);
  font-family: var(--font-tech);
  letter-spacing: .08em;
  color: var(--ink-mute);
}

.process-list { display: grid; }
.process {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
}
.process:first-child { border-top: 1px solid var(--line); }
.process__name {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink-strong);
}
.process__desc {
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 52ch;
}
.process__spec {
  font-family: var(--font-tech);
  font-size: var(--fs-2xs);
  letter-spacing: .06em;
  color: var(--ink-mute);
  text-align: right;
  white-space: nowrap;
  padding-top: 5px;
}
@media (max-width: 960px) {
  .capability { grid-template-columns: minmax(0, 1fr); }
  .capability__figure { order: -1; }
}
@media (max-width: 560px) {
  .process { grid-template-columns: minmax(0, 1fr); }
  .process__spec { text-align: left; padding-top: 0; }
}

/* ==========================================================================
   首页 · 行业应用
   ========================================================================== */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.industry {
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--line-invert);
  background: rgba(255, 255, 255, .035);
  transition: background var(--t-base), border-color var(--t-base);
}
.industry:hover {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(255, 255, 255, .26);
}
.industry__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: #fff;
}
.industry__name svg { width: 17px; height: 17px; color: var(--temper-bright); flex: none; }
.industry__parts {
  margin-top: var(--sp-5);
  display: grid;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--on-invert);
}
.industry__parts li { display: flex; gap: 9px; align-items: baseline; }
.industry__parts li::before {
  content: "";
  flex: none;
  width: 5px; height: 1px;
  background: var(--temper-bright);
  transform: translateY(-3px);
}
@media (max-width: 960px) { .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .industry-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   首页 · 案例
   ========================================================================== */
.case-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.case {
  display: grid;
  grid-template-columns: 210px 1fr 200px;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: var(--sp-8) var(--sp-6);
  background: var(--bg-surface);
  transition: background var(--t-base);
}
.case:hover { background: var(--c-50); }
.case__industry {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink-strong);
}
.case__client {
  margin-top: 6px;
  font-family: var(--font-tech);
  font-size: var(--fs-2xs);
  letter-spacing: .08em;
  color: var(--ink-mute);
}
.case__body { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.68; }
.case__body b { color: var(--ink-strong); font-weight: 600; }
.case__result {
  display: grid;
  gap: 10px;
  padding-left: clamp(20px, 3vw, 44px);
  border-left: 1px solid var(--line);
}
.case__metric { display: flex; align-items: baseline; gap: 8px; }
.case__metric .tech { font-size: 1.5rem; font-weight: 700; color: var(--ink-strong); line-height: 1; }
.case__metric span { font-size: var(--fs-xs); color: var(--ink-mute); }
@media (max-width: 960px) {
  .case { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--sp-5); }
  .case__result { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: var(--sp-4); }
}

/* ==========================================================================
   首页 · 询价区
   ========================================================================== */
.cta-band {
  position: relative;
  background: var(--c-850);
  color: var(--on-invert);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(76% 118% at 86% 4%, rgba(232, 130, 60, .17), transparent 58%),
    linear-gradient(116deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(0deg, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, 0) 48%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
}
.cta-band h2 { color: #fff; }
.cta-band__list {
  margin-top: var(--sp-6);
  display: grid;
  gap: 14px;
  font-size: var(--fs-sm);
}
.cta-band__list li { display: flex; gap: 11px; align-items: flex-start; }
.cta-band__list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--temper-bright); }
.cta-band__call {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-invert);
}
.cta-band__call small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--on-invert-mute);
  margin-bottom: 6px;
}
.cta-band__call a {
  font-family: var(--font-tech);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
  transition: color var(--t-fast);
}
.cta-band__call a:hover { color: var(--temper-bright); }
@media (max-width: 900px) { .cta-band__grid { grid-template-columns: minmax(0, 1fr); } }

/* 深色区内的表单控件 */
.form-panel {
  background: rgba(255, 255, 255, .97);
  border-top: 3px solid var(--temper);
  padding: clamp(22px, 2.4vw, 34px);
  box-shadow: var(--shadow-lg);
}
.form-panel__head { margin-bottom: var(--sp-5); }
.form-panel__head h3 { font-size: var(--fs-h3); color: var(--ink-strong); }
.form-panel__head p { margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-mute); }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   内页 · 通用两栏布局
   ========================================================================== */
.with-side {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 52px);
  align-items: start;
}
@media (max-width: 900px) { .with-side { grid-template-columns: minmax(0, 1fr); } }

.sidenav {
  border: 1px solid var(--line);
  background: var(--bg-surface);
  position: sticky;
  top: 92px;
}
.sidenav__title {
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-850);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .05em;
}
.sidenav__list { padding: var(--sp-2) 0; }
.sidenav__list a {
  position: relative;
  display: block;
  padding: 11px var(--sp-5) 11px calc(var(--sp-5) + 2px);
  font-size: var(--fs-sm);
  color: var(--ink);
  border-left: 2px solid transparent;
  transition: all var(--t-fast);
}
.sidenav__list a:hover {
  background: var(--c-50);
  color: var(--ink-strong);
  border-left-color: var(--c-400);
}
.sidenav__list a[aria-current="page"] {
  background: var(--temper-wash);
  color: var(--temper);
  font-weight: 600;
  border-left-color: var(--temper);
}
.sidenav__foot {
  padding: var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--c-50);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.sidenav__foot .tech { display: block; font-size: 1.05rem; color: var(--ink-strong); margin: 6px 0 10px; }
@media (max-width: 900px) { .sidenav { position: static; } }

/* 内容区标题与正文 */
.prose > * + * { margin-top: var(--sp-6); }
.prose h2 { font-size: var(--fs-h3); }
.prose h3 { font-size: var(--fs-h4); }
.prose p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.prose ul { display: grid; gap: 9px; font-size: var(--fs-sm); }
.prose ul li { display: flex; gap: 10px; align-items: baseline; }
.prose ul li::before {
  content: "";
  flex: none;
  width: 6px; height: 1px;
  background: var(--temper);
  transform: translateY(-4px);
}

/* ==========================================================================
   内页 · 产品列表
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .product-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   内页 · 产品详情
   ========================================================================== */
.pd__top {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 56px);
  align-items: start;
}
@media (max-width: 960px) { .pd__top { grid-template-columns: minmax(0, 1fr); } }

.gallery__main {
  border: 1px solid var(--line);
  background: var(--bg-surface);
  padding: 10px;
}
.gallery__main img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.gallery__thumbs {
  margin-top: var(--sp-3);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.gallery__thumb {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  padding: 5px;
  transition: border-color var(--t-fast);
}
.gallery__thumb[aria-selected="true"] { border-color: var(--c-700); }
.gallery__thumb:hover { border-color: var(--c-500); }
.gallery__thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.pd__code {
  font-family: var(--font-tech);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  color: var(--ink-mute);
}
.pd__title { margin-top: 10px; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem); }
.pd__intro {
  margin-top: var(--sp-4);
  font-size: var(--fs-body);
  color: var(--ink-soft);
  line-height: 1.72;
}
.pd__price-note {
  margin-top: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-50);
  border-left: 3px solid var(--c-700);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.pd__price-note .tech { font-size: var(--fs-xs); letter-spacing: .1em; color: var(--ink-mute); }
.pd__actions {
  margin-top: var(--sp-6);
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.pd__points {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 11px;
  font-size: var(--fs-sm);
}
.pd__points li { display: flex; gap: 10px; align-items: flex-start; }
.pd__points svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--temper); }

/* ==========================================================================
   内页 · 关于 / 发展历程
   ========================================================================== */
.timeline { display: grid; gap: 0; border-left: 1px solid var(--line); }
.tl {
  position: relative;
  padding: 0 0 var(--sp-8) var(--sp-6);
}
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: "";
  position: absolute;
  left: -4.5px; top: 7px;
  width: 8px; height: 8px;
  background: var(--c-0);
  border: 2px solid var(--c-400);
  border-radius: 50%;
}
.tl:hover::before { border-color: var(--temper); background: var(--temper); }
.tl__year {
  font-family: var(--font-tech);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: .02em;
}
.tl__title { margin-top: 6px; font-size: var(--fs-h4); font-weight: 600; color: var(--ink-strong); }
.tl__desc { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.68; }

/* 厂区/设备展示 */
.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.shots figure { border: 1px solid var(--line); background: var(--bg-surface); padding: 8px; }
.shots img, .shots .shot-ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.shots figcaption {
  padding: 11px 3px 3px;
  font-size: var(--fs-2xs);
  font-family: var(--font-tech);
  letter-spacing: .07em;
  color: var(--ink-mute);
}
.shot-ph {
  display: grid;
  place-content: center;
  background: var(--metal-face);
  color: var(--c-600);
  position: relative;
}
.shot-ph::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--metal-brushed);
  opacity: .4;
}
.shot-ph span {
  position: relative;
  font-family: var(--font-tech);
  font-size: var(--fs-2xs);
  letter-spacing: .1em;
}
@media (max-width: 860px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .shots { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   内页 · 联系我们
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 58px);
  align-items: start;
}
@media (max-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.contact-card { background: var(--bg-surface); padding: var(--sp-6) var(--sp-5); }
.contact-card svg { width: 21px; height: 21px; color: var(--c-500); }
.contact-card__label {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  letter-spacing: .04em;
}
.contact-card__value {
  margin-top: 6px;
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink-strong);
  word-break: break-word;
}
.contact-card__value.tech { font-size: 1.15rem; }
.contact-card__note { margin-top: 6px; font-size: var(--fs-2xs); color: var(--ink-mute); }
@media (max-width: 560px) { .contact-cards { grid-template-columns: minmax(0, 1fr); } }

/* 地图（Leaflet + 高德瓦片） */
.map-frame {
  margin-top: var(--sp-6);
  height: clamp(320px, 42vw, 460px);
  border: 1px solid var(--line);
  background: var(--c-50);
  position: relative;
  z-index: 0; /* 形成独立堆叠上下文，地图内部控件不会盖过吸顶导航 */
}
.map-frame .leaflet-container { height: 100%; width: 100%; }
.map-frame .leaflet-popup-content { font-family: inherit; margin: 14px 18px; }
.map-frame .leaflet-popup-content strong { font-size: var(--fs-base); }
.map-frame .leaflet-control-attribution { font-size: 10px; }

/* 新闻列表页 / 关于页的通用网格 */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
@media (max-width: 960px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .news-grid { grid-template-columns: minmax(0, 1fr); } }

.ncard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.ncard:hover { border-color: var(--c-400); box-shadow: var(--shadow-sm); }
.ncard__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ncard__date {
  font-family: var(--font-tech);
  font-size: var(--fs-2xs);
  letter-spacing: .1em;
  color: var(--ink-mute);
}
.ncard__title { font-size: var(--fs-h4); font-weight: 600; color: var(--ink-strong); line-height: 1.5; }
.ncard:hover .ncard__title { color: var(--temper); }
.ncard__desc { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.66; }
.ncard__foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
}

/* ==========================================================================
   打印：隐藏交互元素
   ========================================================================== */
@media print {
  .masthead, .topbar, .side-rail, .to-top, .nav-scrim, .cta-band, .sitefoot { display: none; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
}