/**
 * sinopak/machine-hero block styles
 *
 * Prototype: 汇杰 sinopak-h5-homepage machines/beverage-filling-machines
 * .hero / .hero-facts — a full-bleed DARK band. The product photo bleeds in
 * from the right (55%, dimmed); a left-weighted navy gradient (::before) and a
 * faint grid (::after) sit over it; the copy is vertically centred; a
 * full-width glass facts bar (4 label/value cells) closes the section.
 *
 * Product singles use the solid white header (not body.spk-x-hero-top), so the
 * section reserves header clearance with padding-top: var(--spk-x-header-h).
 * Values are prototype literals. Breakpoints: 1180 / 820 / 520.
 */
@layer spk-block {
  .spk-x-machine-hero {
    position: relative;
    overflow: hidden;
    padding-top: var(--spk-x-header-h, 72px);
    background: #061f42;
    color: #fff;
  }

  /* Product photo bleeding in from the right, dimmed under the gradient. */
  .spk-x-machine-hero__img {
    position: absolute;
    top: var(--spk-x-header-h, 72px);
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 0;
    width: 55%;
    height: auto;
    min-height: 0;
    /* contain —— 按框宽等比缩放,不裁切。素材比例与右侧 55% 框不一致时
       宁可留白也不切掉机器本体(客户端明确要求「等比不裁」)。 */
    object-fit: contain;
    object-position: center;
    opacity: 0.58;
  }
  /* Left-weighted navy wash + cyan glow (prototype .hero::before). */
  .spk-x-machine-hero::before {
    position: absolute;
    inset: var(--spk-x-header-h, 72px) 0 0;
    z-index: 1;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(6, 43, 92, 0.99) 0%, rgba(6, 43, 92, 0.94) 42%, rgba(6, 43, 92, 0.56) 70%, rgba(6, 43, 92, 0.34) 100%),
      radial-gradient(circle at 82% 20%, rgba(8, 168, 210, 0.35), transparent 34%);
  }
  /* Faint blueprint grid (prototype .hero::after). */
  .spk-x-machine-hero::after {
    position: absolute;
    inset: var(--spk-x-header-h, 72px) 0 0;
    z-index: 2;
    content: "";
    pointer-events: none;
    opacity: 0.32;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 90px 90px;
  }

  /* Centred copy column over the media (page 版心 min(85vw, 1240px)). */
  .spk-x-machine-hero__inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    min-height: 318px;
    width: min(85vw, 1240px);
    padding: 34px 0 32px;
  }
  .spk-x-machine-hero__copy {
    max-width: 760px;
  }

  .spk-x-machine-hero__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .spk-x-machine-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.18s ease;
  }
  .spk-x-machine-hero__breadcrumb a:hover,
  .spk-x-machine-hero__breadcrumb a:focus-visible {
    color: #fff;
  }
  .spk-x-machine-hero__crumb,
  .spk-x-machine-hero__sep {
    color: rgba(255, 255, 255, 0.72);
  }

  .spk-x-machine-hero__eyebrow {
    margin: 0 0 14px;
    color: #9beafb;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .spk-x-machine-hero__heading {
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(54px, 7vw, 92px);
    font-weight: 950;
    line-height: 0.88;
    letter-spacing: -0.075em;
  }

  .spk-x-machine-hero__kicker {
    max-width: 800px;
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(23px, 2.2vw, 34px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.045em;
  }
  .spk-x-machine-hero .spk-x-machine-hero__lead {
    max-width: 820px;
    margin: 0 0 22px;
  }
  .spk-x-machine-hero .spk-x-machine-hero__lead p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.55;
    font-weight: 400;
  }

  .spk-x-machine-hero__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
  }
  .spk-x-machine-hero__cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 8px;
    padding: 16px 24px;
    background: #f28a2e;
    color: #fff;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease;
  }
  .spk-x-machine-hero__cta:hover,
  .spk-x-machine-hero__cta:focus-visible {
    transform: translateY(-2px);
    background: #ff8d2c;
  }

  /* Full-width glass facts bar closing the band (prototype .hero-facts). */
  .spk-x-machine-hero__facts {
    /* 客户 2026-09-20 修正 2 要求加 width:100%。**实测这行是 no-op**:
       本 section 是 position:relative + 普通块级子元素(不是 G14 里那种
       display:flex 的 wf-* section),块级子元素本来 width:auto 就等于 100%。
       headless Chrome 在 390/520/600/768/820/900/1024/1100/1280/1440/1920
       共 11 档视口、5 个 L1/L2 页面上量过:scrollWidth === innerWidth,
       末格右缘距视口右缘始终 17~340px,无横向溢出;注入 width:auto 复现"修复前"
       状态,几何逐项相同(格右/格宽/末格位置完全一致)。
       保留此行(客户指定 + 万一将来 section 改成 flex 时有防御性),但不作为
       "已修复"的依据 —— 真实症状需要客户提供视口宽度与截图再定位。 */
    width: 100%;
    position: relative;
    z-index: 4;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(4, 24, 49, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .spk-x-machine-hero__facts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(85vw, 1240px);
  }
  .spk-x-machine-hero__fact {
    min-height: 88px;
    padding: 22px 26px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
  .spk-x-machine-hero__fact:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.16);
  }
  .spk-x-machine-hero__fact span {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.17em;
    text-transform: uppercase;
  }
  .spk-x-machine-hero__fact strong {
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
  }
}

@layer spk-responsive {
  @media (max-width: 820px) {
    .spk-x-machine-hero__facts-grid {
      grid-template-columns: 1fr 1fr;
    }
    .spk-x-machine-hero__fact:nth-child(2) {
      border-right: 1px solid rgba(255, 255, 255, 0.16);
    }
  }
  @media (max-width: 720px) {
    .spk-x-machine-hero {
      padding-top: 68px;
    }
    .spk-x-machine-hero__img {
      top: 68px;
      width: 100%;
      opacity: 0.34;
    }
    .spk-x-machine-hero::before,
    .spk-x-machine-hero::after {
      inset: 68px 0 0;
    }
    .spk-x-machine-hero__inner {
      min-height: 0;
      padding: 28px 0;
    }
    .spk-x-machine-hero__heading {
      font-size: clamp(38px, 12vw, 48px);
    }
    .spk-x-machine-hero__kicker {
      font-size: 22px;
    }
    .spk-x-machine-hero .spk-x-machine-hero__lead p {
      font-size: 15px;
    }
  }
  @media (max-width: 520px) {
    .spk-x-machine-hero__facts-grid {
      grid-template-columns: 1fr;
    }
    .spk-x-machine-hero__fact {
      border-right: 1px solid rgba(255, 255, 255, 0.16);
    }
  }
}