/* ============================================================
   堆栈云软件官网 - 统一样式文件
   主色调: #1a6c7a
   ============================================================ */

/* 引入Google字体 */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap');

/* ============================================================
   基础重置与全局样式
   ============================================================ */

/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 根字体大小 */
html {
    font-size: 100%;
}

/* 页面主体样式 */
body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #3a3a3a;
}

/* 标题样式 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 1;
    color: #000f2b;
}

h1 {
    font-size: 3.125rem;
}

h2 {
    font-size: 1.75rem;
    text-transform: lowercase;
}

h3 {
    font-size: 1.875rem;
    text-transform: lowercase;
}

/* 链接样式 */
a {
    color: #1a6c7a;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #3a3a3a;
}

/* ============================================================
   页面布局结构
   ============================================================ */

/* 页面容器 - 最小高度100vh，flex布局 */
#page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 内容区域 - 自动填充剩余空间 */
#content {
    flex: 1;
}

/* ============================================================
   半屏/全屏背景Banner
   ============================================================ */

/* 半屏Banner基础样式 */
.site-banner {
    position: relative;
    height: 70vh;
    /* 高度：半屏 */
    background-image: url('../images/banner_bg.webp');
    /* 背景图片 */
    background-size: cover;
    /* 覆盖整个容器 */
    background-position: center;
    /* 居中显示 */
    background-attachment: fixed;
    /* 背景固定（视差效果） */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 背景遮罩层 - 黑色半透明，降低图片亮度 */
.site-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    /* 黑色 + 30%透明度 */
    z-index: 1;
}

/* 确保Banner内所有内容在遮罩之上 */
.site-banner>* {
    position: relative;
    z-index: 2;
}

/* 全屏Banner - 首页使用 */
.site-banner-full {
    height: 100vh;
    /* 高度：全屏 */
}

/* ============================================================
   导航栏样式
   ============================================================ */

/* 导航栏容器 */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

/* 导航栏主体 - 背景色和内边距 */
.main-header-bar {
    padding: 0;
    background-color: rgba(0, 0, 0, 0.1);
}

/* ============================================================
   Banner中央文字
   ============================================================ */

/* 文字容器 - 垂直居中 */
.banner-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

/* 中央标题区域（logo + 文字） */
.banner-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 400;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 1em 3em;
    border-radius: 16px;
}

.banner-title img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    margin-bottom: 0.5em;
}

/* 首页纯文字标题（无logo，紧凑内边距） */
.banner-title-text {
    font-size: 2.2rem;
    padding: 0.25em 1.5em;
    border-radius: 12px;
}

/* ============================================================
   容器与网格布局
   ============================================================ */

/* 通用容器 - 最大宽度和居中 */
.ast-container {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

/* 网格行 */
.ast-builder-grid-row {
    display: grid;
    grid-template-columns: 1fr;
}

/* 导航栏右侧区域 - 居中 */
.site-header-primary-section-right {
    display: flex;
    justify-content: center;
}

/* 菜单列表样式 */
.ast-builder-menu-1 {
    display: flex;
    list-style: none;
}

/* 主菜单 - flex布局 */
.main-header-menu {
    display: flex;
    list-style: none;
    gap: 2em;
}

/* ============================================================
   导航链接样式
   ============================================================ */

/* 导航链接默认样式 */
.menu-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-indent: 2px;  /* 补偿 letter-spacing 造成的视觉偏左 */
    font-size: 0.75rem;
    padding: 0.8em 14px;  /* 垂直内边距填满导航栏高度 */
    transition: background-color 0.3s, color 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 悬停/聚焦状态 */
.menu-link:hover,
.menu-link:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.15);
}

/* 当前页面高亮 */
.current-menu-item .menu-link {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   Elementor页面内容区域
   ============================================================ */

/* 内容区块 */
.elementor-section {
    position: relative;
    padding: 5em 0;
}

/* 全高区块 */
.elementor-section-height-full {
    min-height: 50vh;
}

.elementor-section-height-full .elementor-widget-image img {
    width: 100%;
    height: 50vh;
    object-fit: cover;
}

/* 内容容器 */
.elementor-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.elementor-section:not(.elementor-inner-section) .elementor-container {
    justify-content: center;
    gap: 70px;  /* 大屏下图片区与文字区的间距，可自由调整 */
}

.product-area-1 {
    width: 45%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 50px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
    padding-bottom: 30px;  /* 滚动条与图片底部的间距 */
}

.product-area-1 .elementor-column {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: center;
}

.product-area-2 {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.product-slide {
    flex: 0 0 auto;
    scroll-snap-align: center;
}

.product-slide img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: contain;
}

/* 大屏幕 - 最多显示3张图片 */
@media (min-width: 1200px) {
    .product-slide {
        width: calc((100% - 100px) / 3);
    }
}

/* 中等屏幕 - 最少显示2张图片 */
@media (max-width: 1199px) and (min-width: 922px) {
    .product-slide {
        width: calc((100% - 50px) / 2);
    }
}

/* 小屏幕 - 最少显示2张图片 */
@media (max-width: 921px) {
    .product-slide {
        width: calc((100% - 50px) / 2);
    }
}

.product-text {
    flex: 1;
    text-align: left;
    margin-bottom: 1.5em;
}

.product-text p {
    margin-bottom: 1em;
}

.product-buttons {
    display: flex;
    justify-content: space-evenly;  /* 一行时均匀分布 */
    gap: 20px;
}

/* 内层section - 首页三APP均匀横向排列 */
.elementor-inner-section {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.elementor-inner-section .elementor-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    width: 100%;
}

/* 行 */
.elementor-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

/* 列 */
.elementor-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 列宽定义 */
.elementor-col-100 {
    width: 100%;
}

.elementor-col-50 {
    width: 50%;
}

.elementor-col-25 {
    width: 25%;
}

.product-area-1 .elementor-col-50 {
    width: calc(50% - 7.5px);
}

.product-area-2 .elementor-col-100 {
    width: 100%;
}

/* 产品页面右侧文字区域 - 竖向排列、垂直居中 */
.elementor-col-50 > .elementor-widget-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* 产品页面文字段落 - 左对齐 */
.elementor-widget-text-editor {
    text-align: left;
    margin-bottom: 1.5em;
}

/* 产品页面按钮区域 - 横向排列、水平居中 */
.elementor-widget-text-editor + .elementor-inner-section {
    display: flex;
    justify-content: center;
}

.elementor-widget-text-editor + .elementor-inner-section .elementor-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.elementor-widget-text-editor + .elementor-inner-section .elementor-col-50 {
    flex: 0 0 auto;
    width: auto;
}

/* 列宽 - 三列均匀分布 */
.elementor-col-33 {
    flex: 1;
}

/* 小部件包裹 */
.elementor-widget-wrap {
    display: block;
    width: 100%;
}

/* ============================================================
   图片与图标样式
   ============================================================ */

/* 图片通用样式 */
.elementor-widget-image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* 首页APP图标卡片 - 白色圆角边框 + 阴影 */
.elementor-image-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 36px 20px;
    transition: box-shadow 0.3s, transform 0.3s;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* 光泽扫过效果 */
.elementor-image-box-wrapper::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        transparent 40%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 60%
    );
    transform: translateX(-100%) translateY(-100%);
    transition: none;
    pointer-events: none;
}

.elementor-image-box-wrapper:hover::after {
    transform: translateX(30%) translateY(30%);
    transition: transform 1.5s ease;
}

.elementor-image-box-wrapper:hover {
    box-shadow: 0 8px 35px rgba(26, 108, 122, 0.2);
    transform: translateY(-4px);
}

/* 首页APP图标 - 圆角矩形 */
.elementor-image-box-img img {
    max-width: 120px;
    height: auto;
    border-radius: 20px;
    margin-bottom: 1em;
}

/* APP图标标题 */
.elementor-image-box-title {
    font-size: 1.125rem;
    margin-bottom: 0.5em;
    color: #000f2b;
}

/* APP图标描述 */
.elementor-image-box-description {
    font-size: 0.875rem;
    color: #666;
}

/* ============================================================
   文字编辑器与按钮样式
   ============================================================ */

/* 文字编辑器 */
.elementor-widget-text-editor {
    padding: 1em 0;
}

.elementor-widget-text-editor p {
    margin-bottom: 1em;
    line-height: 1.8;
}

/* 按钮容器 */
.elementor-button-wrapper {
    display: flex;
    justify-content: center;
}

/* 按钮样式 */
.elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    border: 2px solid #1a6c7a;
    background-color: transparent;
    color: #1a6c7a;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    border-radius: 12px;
}

/* 按钮悬停状态 */
.elementor-button:hover,
.elementor-button:focus {
    background-color: #1a6c7a;
    border-color: #1a6c7a;
    color: #ffffff;
}

/* ============================================================
   页脚样式
   ============================================================ */

/* 页脚容器 */
.site-footer {
    border-top: 1px solid #dbe8eb;
    padding: 20px 0;
    margin-top: auto;
}

/* 页脚内容区域 */
.site-below-footer-wrap {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 版权信息 */
.ast-footer-copyright {
    text-align: center;
    color: #1a6c7a;
    font-size: 0.875rem;
}

.ast-footer-copyright p {
    margin-bottom: 0.5em;
}

.ast-footer-copyright a {
    color: #1a6c7a;
}

.ast-footer-copyright a:hover {
    color: #3a3a3a;
}

/* ============================================================
   移动端响应式
   ============================================================ */

/* 移动端隐藏元素 */
.ast-mobile-header-wrap {
    display: none;
}

/* 汉堡菜单按钮 - 默认隐藏，小屏显示 */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 25px 10px;  /* 上下加足 padding，背景带比图标更高 */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 101;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #ffffff;
    margin: 5px 0;
    transition: transform 0.3s, opacity 0.3s;
}

/* 汉堡按钮打开状态 - X形动画 */
.nav-open .nav-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* 中等屏幕及以下 */
@media (max-width: 921px) {
    html {
        font-size: 91.2%;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.875rem;
    }

    h3 {
        font-size: 1.5625rem;
    }

    .ast-desktop-header-content {
        display: none;
    }

    .ast-mobile-header-wrap {
        display: block;
    }

    .main-header-bar {
        position: relative;
        padding: 1.5em 0;  /* 增加上下内边距，汉堡按钮不再紧贴边缘 */
    }

    .nav-toggle {
        display: block;
    }

    .main-header-menu {
        display: none;
        flex-direction: column;
        gap: 0;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.1);
        padding: 10px 0;
        z-index: 100;
    }

    .nav-open .main-header-menu {
        display: flex;
    }

    .main-header-menu .menu-item {
        width: 100%;
    }

    .main-header-menu .menu-link {
        display: block;
        padding: 12px 20px;
        text-align: center;
    }

    /* 列宽调整为100%，竖向排列 */
    .elementor-col-25,
    .elementor-col-33,
    .elementor-col-50 {
        width: 100%;
        margin-bottom: 1em;
    }

    /* 首页卡片容器：竖向堆叠 */
    .elementor-inner-section .elementor-container {
        flex-direction: column;
        align-items: center;
    }

    .elementor-container {
        padding: 0 15px;
    }

    .product-area-1,
    .product-area-2 {
        width: 100%;
        margin-bottom: 1em;
    }

    .product-buttons {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .product-buttons .elementor-button {
        width: 100%;
        max-width: 200px;
    }
}

/* 小屏幕及以下 */
@media (max-width: 544px) {
    .ast-container {
        padding: 0 10px;
    }

    .site-below-footer-wrap {
        padding: 20px;
    }

    .elementor-section {
        padding: 1em 0;
    }
}