/*
 * marketing/index.html 专用的响应式修复层。
 *
 * 背景：源站 aista.tech/index.php 的 Hero 区块用内联 style 写死了桌面端的绝对定位
 * （position:absolute; left:20%; padding-left:25rem; 等），内联样式优先级高于
 * style.css 里 @media (max-width: 1024px) 的响应式覆盖规则，导致源站在窄屏下
 * 文案互相重叠、按钮错位——这是源站本身的缺陷，会被我们的移动端适配要求放大。
 * 这里把这些定位相关的内联样式改写成 class，交给下面的媒体查询正常接管，
 * 视觉表现（颜色/字号/间距等纯装饰性内联样式）保持不变，未删改。
 */

/* 源站 .hero 高度写死 92vh：浏览器窗口足够高时，92vh 用完后紧接着的 .about
   白色区块顶部会在同一屏内露出，与 Hero 深色背景形成一条突兀的硬切分界线。
   改为至少占满一屏（min-height:100vh，兼容 92vh 更小的情况保留原值），让用户
   需要滚动才会看到 About 区块，减少这种深色/白色同框的机会。 */
.hero {
    min-height: 100vh;
}

.opc-hero-info {
    position: absolute;
    left: 20%;
    width: 100%;
    top: 15%;
}

.opc-hero-info-content {
    padding-left: 25rem;
}

.opc-hero-cta-buttons {
    position: absolute;
    left: 30%;
    bottom: -10%;
}

@media (max-width: 1024px) {
    /* 打破 flex 子元素按内容撑宽父级的循环依赖：整条链路显式钉死为视口宽度，
       而不是让 .hero-info-content 按最宽子元素（kicker 文案）反推自己的宽度。
       选择器特异性需匹配/超过 style.css 里 ".hero .hero-content-home-1"
       （它设了 max-width:1150px + align-items:flex-end，否则会被其覆盖） */
    .hero .hero-content-home-1,
    .opc-hero-info,
    .opc-hero-info-content,
    .cta {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        align-items: stretch;
    }

    .opc-hero-info {
        position: relative;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .opc-hero-info-content {
        padding-left: 0;
        justify-content: flex-start;
        height: auto;
    }

    .cta {
        position: relative;
        margin-top: 4rem;
        flex-shrink: 0;
    }

    .opc-hero-cta-buttons {
        position: relative;
        left: 0;
        bottom: 0;
        margin-top: 1.5rem;
    }
}

/*
 * Hero 文案字号：源站同样用内联 style 写死了桌面端像素值（26px/49px/43px/25px），
 * 同理会盖过任何响应式规则，窄屏下不缩小导致三行标题相互重叠。
 * 这里改用 class + 桌面端媒体查询二次放大，移动端保持较小的基础字号。
 */
.opc-hero-kicker {
    font-size: 16px;
    color: #fff;
    letter-spacing: 3px;
    border-bottom: 1px solid #00daf8;
    padding-bottom: 3%;
    max-width: 100%;
}

.opc-hero-heading {
    font-size: 30px;
    font-weight: normal;
    letter-spacing: 1px;
    margin-bottom: 2%;
}

.opc-hero-subheading {
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 1px;
}

.opc-hero-divider {
    display: block;
    width: 100px;
    height: 2px;
    background: #00dbf5;
    margin-bottom: 6%;
}

.opc-hero-desc {
    font-size: 16px;
}

@media (min-width: 1024px) {
    .opc-hero-kicker {
        font-size: 26px;
        letter-spacing: 5px;
        width: 75%;
    }

    .opc-hero-heading {
        font-size: 49px;
        letter-spacing: 1.5px;
    }

    .opc-hero-subheading {
        font-size: 43px;
        letter-spacing: 1.5px;
    }

    .opc-hero-divider {
        width: 150px;
    }

    .opc-hero-desc {
        font-size: 25px;
    }
}

/* 修正 footer「Contact Info」栏与其余三栏对齐方式不一致的问题：
   globals.css 里 .footer-contact 本身是 flex-direction:column +
   align-items:center + justify-content:center（水平垂直都居中），而
   About/Navigation/Updates 三栏都是左上对齐。4 栏改 flex 布局、行高统一后
   "Updates"栏内容比"Navigation"栏少，justify-content:center 会把标题往
   下推，导致标题看起来比其他栏矮一截；align-items:center 则导致标题、
   内容整体偏右。这里都改成 flex-start，与其余栏目对齐；不直接改
   globals.css，避免下次从源站重新抓取该文件时又丢失这处修正。 */
.footer .footer-contact {
    align-items: flex-start;
    justify-content: flex-start;
}

/* Footer 4 栏 + 底部版权行的左右边界要保持一致，改用一个共享的 wrapper
   （.footer-inner，见各模板 diff：.footer-content 和 .footer-bottom 现在
   都包在这一个 div 里）替换掉原本 display:inline-block + 每栏内联
   width/margin-left 百分比硬编码的做法。硬编码百分比
   （24% / 27%+8% / 15% / 15%+8%）加总不满 100%，Updates 栏内容只有两行链接
   却被分到 15% 宽度，右边出现一大片和内容无关的空白。
   走过三轮弯路：justify-content:space-between 会把剩余空间整个塞进栏间
   空当；不带 justify-content 的紧凑排列会让整组内容贴在 .container 左边；
   .footer-content 单独 justify-content:center 能让 4 栏本身居中，但
   .footer-bottom 若各自居中/撑满，宽度基准和上面 4 栏不是同一个来源，
   会对不齐；给 wrapper 写死 width 数值又要在 4 栏宽度变化时手动同步。
   现在 .footer-inner 用 display:table，宽度由内部最宽的一行自动撑开，
   不需要任何硬编码数字；.footer-inner 再用 margin:auto 在 .container
   内居中，.footer-content 和 .footer-bottom 是同一个 wrapper 的两个子
   元素，天然共享左右边界。 */
.footer .footer-inner {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

/* flex-wrap 桌面端必须是 nowrap，不能是 wrap：Safari/WebKit 给
   display:table 的 .footer-inner 计算自适应宽度时，比 Chrome 少算出
   约 100px（实测 800.95px vs 应有的 904px = 320+140+140+160+3*48），
   四栏总宽超出这个偏小的宽度后，wrap 会把 Contact Info 挤到下一行、
   独占一行且高度错误（截断为内容高度而非兄弟栏高度）。改 nowrap 后
   四栏不再依赖 .footer-inner 的自适应宽度是否精确，只是视觉上略微
   超出该宽度（无 overflow 影响，因为默认可见），两个引擎下都能正确
   横排。移动端仍需要换行堆叠，在下面的媒体查询里改回 wrap。 */
.footer .footer-content {
    display: flex;
    flex-wrap: nowrap;
    gap: 48px;
}

.footer .footer-section {
    width: auto;
    float: none;
    flex: 0 0 auto;
}

/* 每栏用 width 而不是 flex-basis 定宽：Safari 计算 display:table 的 .footer-inner
   自适应宽度时按各栏内容的 max-content 算，不认 flex-basis，算出的宽度比 Chrome
   窄约 100px，.footer-bottom（width:100%）随之变窄，和上面 4 栏左右对不齐。
   width 在两个引擎里都会被当作该栏的固有宽度，两行宽度才一致。 */
.footer .footer-about {
    width: 320px;
    max-width: 320px;
}

.footer .footer-links {
    width: 140px;
}

.footer .footer-services {
    width: 140px;
}

.footer .footer-contact {
    width: 160px;
}

@media (max-width: 1024px) {
    .footer .footer-content {
        flex-wrap: wrap;
        gap: 32px;
    }

    .footer .footer-inner {
        display: block;
        width: 100%;
    }
}

/* globals.css 的 .footer-main 是 padding: 4% 0 + padding-bottom: 2%（vendored，不改），
   桌面宽度下 2% ≈ 29px，footer-bottom 行结束后还留一截与内容无关的空白。
   这里只覆盖 padding-bottom，压缩到固定的 12px，不影响 vendored 文件本身。 */
.footer .footer-main {
    padding-bottom: 12px;
}

/* 源站 globals.css 里 .nav-menu .nav-link 桌面端字号是 18px，但同级的
   .dropdown-toggle（"动态"/"资源"两个下拉菜单项）写成了 20px，导致
   顶部导航文字大小参差不齐。这里覆盖成与 .nav-link 一致的 18px，不改
   globals.css 本身。 */
@media (min-width: 1025px) {
    .header .navbar .nav-menu .dropdown .dropdown-toggle {
        font-size: 18px;
    }
}

/* Footer 底部版权 + About Us + 语言切换行（apple.com 风格），4 栏内容下方新增的一条细分隔线。
   这是次要的辅助信息，不应该跟上方 .footer-link（纯黑 #000）一样重——纯黑测试后
   反而显得突兀、抢戏。用 --opc-text-muted 同级的柔和灰（#666 附近），字号也比正文
   栏略小一档，悬停时才过渡到强调色，平时安静地待在分隔线下面。 */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    gap: 12px;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 13px;
    color: #666;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-bottom-links a {
    position: relative;
    padding-left: 10px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.footer-bottom-links a:first-child {
    padding-left: 0;
}

.footer-bottom-links a:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: rgba(0, 0, 0, 0.2);
}

.footer-bottom-links a:hover {
    color: #64b5f6;
    transform: translateX(5px);
}

.opc-lang-switch--footer {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(0, 0, 0, 0.55);
}

.opc-lang-switch--footer a {
    color: rgba(0, 0, 0, 0.75);
    text-decoration: none;
}

.opc-lang-switch--footer a:hover {
    color: #000;
    text-decoration: underline;
}