/**
 * retech/footer block styles —— 全站页脚(原型 assets/css/retech.css 第 1784 段起,
 * 响应式覆盖见原型第 1950–2010 段)。
 *
 * 深色(--graphite 底)是原型基色;.retech-x-footer--light 是同结构的浅色变体,
 * 仅在 footerTone = light 时由 render.php 挂上。设计令牌全部来自
 * blocks/style-index.css 的 :root(--retech-x-*)。
 *
 * 规范:所有规则必须写在 @layer 内;@media 只能出现在 @layer retech-responsive;
 * class 一律 retech-x- 前缀;断点只用 1240 / 1080 / 700。
 */
@layer retech-block {
  /* ── 底座(原型 .site-footer)───────────────────────────────────────── */
  .retech-x-footer {
    padding: 78px 0 34px;
    background: var(--retech-x-graphite);
    color: var(--retech-x-w60);
  }

  /* 原型 .footer-grid:品牌列宽 1.5fr + 四列链接 */
  .retech-x-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
    gap: 44px;
    padding-bottom: 52px;
    border-bottom: 1px solid var(--retech-x-w12);
  }

  /* 原型 .logo--footer:页脚空间充足,Logo 放大到 76px 高(页头 76px,竖版锁定) */
  .retech-x-footer__logo {
    display: block;
    margin-bottom: 20px;
  }
  .retech-x-footer__logo-img {
    width: auto;
    height: 76px;
  }

  .retech-x-footer__tagline {
    max-width: 34ch;
    color: var(--retech-x-w60);
    font-size: 14px;
    line-height: 1.66;
  }

  .retech-x-footer__contact {
    display: grid;
    gap: 8px;
    margin-top: 22px;
  }
  .retech-x-footer__contact a {
    color: var(--retech-x-w72);
    font-size: 13px;
    transition: color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-footer__contact a:hover {
    color: var(--retech-x-flow);
  }

  .retech-x-footer__social {
    display: flex;
    gap: 16px;
    margin-top: 18px;
  }
  .retech-x-footer__social a {
    color: var(--retech-x-w40);
    font-size: 13px;
    transition: color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-footer__social a:hover {
    color: var(--retech-x-w90);
  }

  /* ── 导航列(原型 .footer-col / .footer-col-title)──────────────────── */
  .retech-x-footer__col-title {
    margin-bottom: 18px;
    color: var(--retech-x-white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .retech-x-footer__col ul {
    display: grid;
    gap: 11px;
  }
  .retech-x-footer__col a {
    color: var(--retech-x-w60);
    font-size: 13px;
    line-height: 1.5;
    transition: color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-footer__col a:hover {
    color: var(--retech-x-flow);
  }

  /* ── 版权行(原型 .footer-bottom / .footer-copy / .footer-legal)────── */
  .retech-x-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 26px;
  }
  .retech-x-footer__copy {
    color: var(--retech-x-w40);
    font-size: 13px;
  }
  .retech-x-footer__legal {
    display: flex;
    gap: 22px;
  }
  .retech-x-footer__legal a {
    color: var(--retech-x-w40);
    font-size: 13px;
    transition: color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-footer__legal a:hover {
    color: var(--retech-x-w90);
  }

  /* ── 浅色变体(footerTone = light):同结构,浅底深字 ────────────────── */
  .retech-x-footer--light {
    background: var(--retech-x-white);
    color: var(--retech-x-ink-3);
  }
  .retech-x-footer--light .retech-x-footer__grid {
    border-bottom-color: var(--retech-x-line);
  }
  .retech-x-footer--light .retech-x-footer__tagline {
    color: var(--retech-x-ink-3);
  }
  .retech-x-footer--light .retech-x-footer__col-title {
    color: var(--retech-x-ink);
  }
  .retech-x-footer--light .retech-x-footer__contact a,
  .retech-x-footer--light .retech-x-footer__col a {
    color: var(--retech-x-ink-2);
  }
  .retech-x-footer--light .retech-x-footer__contact a:hover,
  .retech-x-footer--light .retech-x-footer__col a:hover {
    color: var(--retech-x-flow-dark);
  }
  .retech-x-footer--light .retech-x-footer__social a {
    color: var(--retech-x-ink-3);
  }
  .retech-x-footer--light .retech-x-footer__social a:hover {
    color: var(--retech-x-ink);
  }
  .retech-x-footer--light .retech-x-footer__copy,
  .retech-x-footer--light .retech-x-footer__legal a {
    color: var(--retech-x-ink-3);
  }
  .retech-x-footer--light .retech-x-footer__legal a:hover {
    color: var(--retech-x-ink);
  }
}

@layer retech-responsive {
  /* 原型 @media (max-width: 1080px):品牌列独占整行,链接列两列 */
  @media (max-width: 1080px) {
    .retech-x-footer__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 36px;
    }
    .retech-x-footer__brand {
      grid-column: 1 / -1;
    }
  }

  /* 原型 @media (max-width: 700px):单列,版权行纵向堆叠 */
  @media (max-width: 700px) {
    .retech-x-footer {
      padding: 56px 0 28px;
    }
    /* 原型 retech.css:2206-2208 —— ≤700px 时 `.logo--footer .logo-img { height: 66px }`
       (基座 76px 见 retech.css:1793)。属主类是本块的 `.retech-x-footer__logo-img`;
       不落这条,手机页脚 Logo 会一直停在 76px,在单列布局里显得过大。 */
    .retech-x-footer__logo-img {
      height: 66px;
    }
    .retech-x-footer__grid {
      grid-template-columns: 1fr;
      gap: 30px;
    }
    .retech-x-footer__bottom {
      flex-direction: column;
      align-items: flex-start;
    }
    .retech-x-footer__legal {
      flex-wrap: wrap;
      gap: 16px;
    }
  }
}