/* ==========================================================================
   Shared footer skin  ·  2026-10-23  (r45)
   --------------------------------------------------------------------------
   全站 977 个页面共用的页尾样式。

   背景：页尾的 slogan 重设计、邮箱订阅框、放大半透明的 logo
   之前只写进了 home-contact-r37.css —— 那份 CSS 只有首页加载，
   导致 976 个页面仍是旧页尾（用户批注：/oem-odm/ 页尾跟首页不统一）。
   现在收口到这个文件，全站共用。

   本文件只含页尾相关规则：
     1. 背景 logo 层（放大、半透明、避免压字）
     2. slogan 版式（kicker + 衬线主句 + 斜体强调）
     3. 邮箱订阅框
     4. 以上三项的响应式断点

   为什么手写而不是从 home-contact-r37.css 抽取：
   第一版用「按行切块」抽取，@media 的包装行被丢掉，
   断点内的 width:88vw 变成全局生效，桌面端 logo 被撑到 75%（首页 62%）。
   手写可控，且这个文件以后要独立维护，不该依赖抽取脚本。
   ========================================================================== */

/* ============================== 1. 背景 logo 层 ============================ */

footer#site-footer.site-footer.shared-footer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

footer#site-footer.site-footer.shared-footer
  > div.shell-footer-top
  > div:first-child
  > a.wordmark.r14-brand {
    position: absolute !important;
    /* 左缘拉到容器外，让 logo 主体落在页尾中部偏左，避开左上角的 slogan */
    left: -14% !important;
    top: 52% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 1.1vw !important;
    width: 62vw !important;
    max-width: 1080px !important;
    min-width: 380px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: .17 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

footer#site-footer.site-footer.shared-footer
  > div.shell-footer-top
  > div:first-child
  > a.wordmark.r14-brand > img {
    position: static !important;
    width: auto !important;
}

footer#site-footer.site-footer.shared-footer
  > div.shell-footer-top
  > div:first-child
  > a.wordmark.r14-brand > img.r14-brand-symbol {
    height: 10.6vw !important;
    min-height: 84px !important;
    max-height: 200px !important;
    width: auto !important;
}

footer#site-footer.site-footer.shared-footer
  > div.shell-footer-top
  > div:first-child
  > a.wordmark.r14-brand > img.r14-brand-name {
    height: 6.7vw !important;
    min-height: 53px !important;
    max-height: 126px !important;
    width: auto !important;
}

/* 前景内容抬到 logo 之上 */
footer#site-footer.site-footer.shared-footer > div.shell-footer-top > div,
footer#site-footer.site-footer.shared-footer > div.shell-footer-bottom {
    position: relative !important;
    z-index: 2 !important;
}

/* ============================== 2. slogan 版式 ============================ */

footer#site-footer.site-footer.shared-footer
  > div.shell-footer-top
  > div:first-child
  > div.qs-footer-lead {
    margin: 0 0 20px !important;
    position: relative !important;
    z-index: 3 !important;
    max-width: 300px;
    min-height: 0 !important;
}

footer#site-footer.site-footer.shared-footer
  .qs-footer-lead .qs-lead-kicker {
    font-size: 9px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: rgba(214, 221, 204, .56) !important;
    margin: 0 0 13px !important;
    line-height: 1.4 !important;
    font-family: JingsSans, Arial, sans-serif !important;
}

footer#site-footer.site-footer.shared-footer
  .qs-footer-lead .qs-lead-main {
    font-family: JingsDisplay, Georgia, serif !important;
    font-size: clamp(23px, 2vw, 30px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.02em !important;
    color: #eef1e7 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

footer#site-footer.site-footer.shared-footer
  .qs-footer-lead .qs-lead-main em {
    font-style: italic !important;
    color: rgba(238, 241, 231, .74) !important;
}

/* 旧版 <p class="qs-footer-lead"> 若残留则隐藏 */
footer#site-footer.site-footer.shared-footer p.qs-footer-lead {
    display: none !important;
}

/* ============================== 3. 订阅框 ================================ */

footer#site-footer.site-footer.shared-footer
  > div.shell-footer-top
  > div:first-child
  > form.qs-subscribe {
    position: relative !important;
    max-width: 330px;
    padding: 15px 17px 14px !important;
    margin: 4px 0 0 -17px !important;
    border-radius: 10px !important;
    background-image:
        radial-gradient(130% 145% at 0% 0%,
            rgba(26, 38, 31, .86) 0%,
            rgba(26, 38, 31, .60) 55%,
            rgba(26, 38, 31, 0) 100%) !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
}

footer#site-footer.site-footer.shared-footer .qs-subscribe-label {
    display: block !important;
    font-size: 10px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #bdc6b6 !important;
    margin: 0 0 9px !important;
}

footer#site-footer.site-footer.shared-footer .qs-subscribe-row {
    display: flex !important;
    align-items: stretch !important;
    border-bottom: 1px solid rgba(227, 231, 218, .38) !important;
}

footer#site-footer.site-footer.shared-footer
  .qs-subscribe input[type="email"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 9px 2px 10px !important;
    font: inherit;
    font-size: 13.5px !important;
    line-height: 1.4;
    color: #eef1e7 !important;
    -webkit-appearance: none;
    appearance: none;
}

footer#site-footer.site-footer.shared-footer .qs-subscribe input::placeholder {
    color: rgba(227, 231, 218, .45);
}

footer#site-footer.site-footer.shared-footer .qs-subscribe button.qs-subscribe-btn {
    flex: 0 0 auto !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 4px 0 12px !important;
    color: #e3e7da !important;
    font-size: 16px !important;
    line-height: 1;
    cursor: pointer !important;
    -webkit-appearance: none;
    appearance: none;
    transition: transform .25s ease, color .25s ease;
}
footer#site-footer.site-footer.shared-footer .qs-subscribe-btn:hover {
    transform: translateX(3px);
    color: #fff !important;
}
footer#site-footer.site-footer.shared-footer .qs-subscribe-btn:disabled {
    opacity: .45;
    cursor: default;
    transform: none;
}

footer#site-footer.site-footer.shared-footer .qs-subscribe-note {
    margin: 9px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
    color: rgba(208, 212, 198, .72) !important;
    transition: color .25s ease;
}
footer#site-footer.site-footer.shared-footer .qs-subscribe-note[data-state="error"] {
    color: #e6a79a !important;
}
footer#site-footer.site-footer.shared-footer .qs-subscribe-note[data-state="ok"] {
    color: #b7d8a8 !important;
}

footer#site-footer.site-footer.shared-footer
  .qs-subscribe[data-done="true"] .qs-subscribe-row {
    opacity: .35;
    pointer-events: none;
}

/* ============================== 4. 响应式 ================================ */

/* 平板：logo 缩小、透明度降低，避免糊住文字 */
@media (max-width: 1024px) {
    footer#site-footer.site-footer.shared-footer
      > div.shell-footer-top
      > div:first-child
      > a.wordmark.r14-brand {
        width: 88vw !important;
        left: -12% !important;
        opacity: .13 !important;
    }
    footer#site-footer.site-footer.shared-footer
      .qs-footer-lead .qs-lead-main {
        font-size: 22px !important;
    }
}

/* 手机：进一步降低 */
@media (max-width: 640px) {
    footer#site-footer.site-footer.shared-footer
      > div.shell-footer-top
      > div:first-child
      > a.wordmark.r14-brand {
        opacity: .10 !important;
        width: 96vw !important;
    }
    footer#site-footer.site-footer.shared-footer
      > div.shell-footer-top
      > div:first-child
      > form.qs-subscribe {
        max-width: none;
    }
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
    footer#site-footer.site-footer.shared-footer .qs-subscribe-btn {
        transition: none !important;
    }
}