/**
 * sinopak/mp-hero block styles
 * 原型出处:CSD src/styles.css L201–451(.hero / .hero-grid / .hero-subtitle /
 * .hero-lead / .hero-actions / .hero-media / .hero-slide-frame / .carousel-* /
 * .hero-facts)。
 *
 * 共享类(版心 .spk-x-mp-shell、按钮 .spk-x-mp-btn、轮播 .spk-x-mp-carousel /
 * .spk-x-mp-slideframe / .spk-x-mp-slide / .spk-x-mp-ctrl / .spk-x-mp-dot)已在
 * blocks/style-index.css 的 mp-* 段定义;需要覆盖共享类时用两段选择器
 * (如 .spk-x-mp-hero__media .spk-x-mp-slideframe),避免跨块属主冲突。
 */
@layer spk-block {
  /* 首屏深色渐变底 + 固定页头让位(契约 §9:站点页头 fixed,桌面 72px)。
     原型 `.hero-grid { padding: 76px 0 124px }`,本块把同一份留白放到分区上,
     底部 124px 是给绝对定位数据条留出的空间。 */
  .spk-x-mp-hero {
    position: relative;
    padding: calc(76px + var(--spk-x-header-h, 72px)) 0 124px;
    background: linear-gradient(120deg, #062b5c 0%, #073968 48%, #087eae 100%);
    color: var(--spk-mp-white);
  }

  /* 左文案列 / 右轮播列;原型 grid-template-columns: minmax(0,.9fr) minmax(560px,1.1fr) */
  .spk-x-mp-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(560px, 1.1fr);
    gap: 76px;
    align-items: center;
  }
  /* 没有切片时右列不存在,让文案列铺满(原型不会有这种状态,纯防御) */
  .spk-x-mp-hero__copy:only-child {
    grid-column: 1 / -1;
  }

  /* 原型 .hero-copy 没有宽度限制(只有 h1 760 / 副标题 620 / 正文 650);≤1180
     单列时给它 760 会让文案列比原型窄 84px。宽度交给栅格列。 */
  .spk-x-mp-hero__copy {
    min-width: 0;
  }

  /* 原型 h1 { max-width:760px; margin-bottom:22px; color:#fff; 72px/0.98/840 } */
  .spk-x-mp-hero__h1 {
    max-width: 760px;
    margin: 0 0 22px;
    color: var(--spk-mp-white);
    font-size: 72px;
    line-height: 0.98;
    font-weight: 840;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  .spk-x-mp-hero__subtitle {
    max-width: 620px;
    margin: 0 0 16px;
    color: var(--spk-mp-white);
    font-size: 26px;
    font-weight: 760;
    line-height: 1.22;
  }

  /* 原型 `.hero-lead { max-width:650px; margin-bottom:32px; color:rgba(255,255,255,.8); 18px }`,
     行高继承原型 `p { line-height:1.65 }` */
  .spk-x-mp-hero__lead {
    max-width: 650px;
    margin: 0 0 32px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    line-height: 1.65;
  }

  /* 原型 `.hero-actions { display:flex; flex-wrap:wrap; gap:14px }` */
  .spk-x-mp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  /* 原型 `.hero-media`(轮播定位容器):透明、不裁切,箭头允许溢出到版心外侧 */
  .spk-x-mp-hero__media {
    display: grid;
    min-height: 0;
    align-items: center;
    overflow: visible;
  }

  /* 原型 `.hero-slide-frame`(高度写死在框上:共享 .spk-x-mp-slide 是绝对定位,
     需要框本身有确定高度才能 inset:0 铺满) */
  .spk-x-mp-hero__media .spk-x-mp-slideframe {
    display: grid;
    height: 448px;
    place-items: center;
    border-radius: var(--spk-mp-radius);
    background: #f5f9fc;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
    position: relative;
  }

  /* 数据条:贴分区底边的版心宽白条(原型 `.hero-facts` 与 `.hero-grid` 同级,
     都是 `.shell`),所以这里同时挂 .spk-x-mp-shell 提供宽度。 */
  .spk-x-mp-hero__facts {
    position: absolute;
    bottom: -7%;
    left: 50%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--spk-mp-shadow);
    transform: translateX(-50%);
  }

  .spk-x-mp-hero__fact {
    min-height: 116px;
    padding: 26px 28px;
    border-right: 1px solid var(--spk-mp-line);
  }
  .spk-x-mp-hero__fact:last-child {
    border-right: 0;
  }
  .spk-x-mp-hero__fact strong {
    display: block;
    color: var(--spk-mp-navy);
    font-size: 23px;
    font-weight: 840;
    line-height: 1.05;
  }
  .spk-x-mp-hero__fact span {
    display: block;
    margin-top: 10px;
    color: var(--spk-mp-muted);
    font-size: 12px;
    font-weight: 820;
    letter-spacing: 0;
    text-transform: uppercase;
  }
}

@layer spk-responsive {
  /* 原型 @media (max-width:1180px):单列 + gap 38 + 顶部留白 62px + 数据条 2 列。
     差异:数据条在这里改为静态流式(原型仍 absolute,单列排布下会压住图片),
     因此底部留白从 124px 收到 40px(40px 取自原型 ≤760px 的静态数据条状态)。 */
  @media (max-width: 1180px) {
    .spk-x-mp-hero {
      padding: calc(62px + var(--spk-x-header-h, 72px)) 0 40px;
    }
    .spk-x-mp-hero__grid {
      grid-template-columns: 1fr;
      gap: 38px;
    }
    .spk-x-mp-hero__media {
      min-height: 420px;
    }
    .spk-x-mp-hero__facts {
      position: static;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      /* 38px = 上面单列栅格的 gap,数据条与图片保持同一节奏 */
      margin: 38px auto 0;
      transform: none;
    }
    .spk-x-mp-hero__fact:nth-child(2n) {
      border-right: 0;
    }
  }

  /* 原型 @media (max-width:760px):分区留白 48/40、h1 48px、副标题 22px、
     框 260px 高、箭头 42px、按钮整行、数据条单列(格子改成下边框)。 */
  @media (max-width: 760px) {
    .spk-x-mp-hero {
      padding: calc(48px + var(--spk-x-header-h, 72px)) 0 40px;
    }
    .spk-x-mp-hero__copy {
      max-width: 100%;
    }
    .spk-x-mp-hero__h1 {
      font-size: 48px;
      line-height: 1;
    }
    .spk-x-mp-hero__subtitle {
      font-size: 22px;
    }
    .spk-x-mp-hero__media {
      min-height: 310px;
      padding: 16px;
    }
    .spk-x-mp-hero__media .spk-x-mp-slideframe {
      min-height: 260px;
      height: 260px;
    }
    .spk-x-mp-hero .spk-x-mp-ctrl {
      width: 42px;
      height: 42px;
      font-size: 28px;
    }
    .spk-x-mp-hero__actions .spk-x-mp-btn {
      width: 100%;
    }
    .spk-x-mp-hero__facts {
      grid-template-columns: 1fr;
    }
    .spk-x-mp-hero__fact,
    .spk-x-mp-hero__fact:nth-child(2n) {
      border-right: 0;
      border-bottom: 1px solid var(--spk-mp-line);
    }
    .spk-x-mp-hero__fact:last-child {
      border-bottom: 0;
    }
  }
}