/* ===== 全局样式与重置 ===== */
/* 重置浏览器默认样式，确保跨浏览器一致性 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 使用边框盒模型，便于计算元素尺寸 */
}

/* 启用平滑滚动效果 */
html {
    scroll-behavior: smooth;
}

/* 设置页面默认字体、背景和布局 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Noto Sans SC", sans-serif; /* 优先使用支持中文的系统字体 */
    line-height: 1.6; /* 增强文字可读性 */
    color: #333; /* 默认文字颜色 */
    background-color: #fff; /* 白色背景 */
    display: flex; /* 启用flex布局以实现sticky footer */
    flex-direction: column; /* 垂直排列子元素 */
    min-height: 100vh; /* 确保页面至少占满视口高度 */
}

/* 让主内容区域占据剩余空间 */
main {
    flex-grow: 1; /* 扩展以填充body的剩余空间 */
}

/* 链接默认样式 */
a {
    text-decoration: none; /* 移除下划线 */
    color: #555; /* 默认链接颜色 */
    transition: color 0.3s ease; /* 颜色过渡动画 */
}

/* 链接悬停效果 */
a:hover {
    color: #000; /* 悬停时变为黑色 */
}

/* 图片样式优化 */
img {
    max-width: 100%; /* 图片宽度不超过容器 */
    height: auto; /* 保持图片比例 */
    display: block; /* 避免行内元素间距 */
    vertical-align: middle; /* 消除图片底部空隙 */
}

/* 移除无序列表默认样式 */
ul {
    list-style: none;
}

/* ===== 容器与通用布局 ===== */
/* 页面内容容器 */
.container {
    max-width: 1600px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 0 0px; /* 左右内边距 */
}

/* 通用区块的上下内边距 */
.section-padding {
    padding: 20px 0;
    text-align: center; /* 使子元素（section-title）水平居中 */
}

/* 通用区块标题 */
.section-title {
    font-size: 2rem; /* 标题字体大小 */
    font-weight: 300; /* 轻量字体 */
    margin-bottom: 20px; /* 下外边距 */
    color: #333; /* 标题颜色 */
    border: 1.2px solid #000; /* 黑色边框 */
    display: inline-block; /* 使边框宽度适配文字长度 */
    padding: 0px 30px; /* 内边距，边框与文字的间距 */
    border-radius: 50px; /* 添加圆角效果 */
}

/* ===== 导航栏 ===== */
/* 顶部导航栏 */
header {
    background-color: rgba(255, 255, 255, 0.95); /* 半透明白色背景 */
    padding: 15px 0; /* 上下内边距 */
    position: sticky; /* 粘性定位，滚动时固定在顶部 */
    top: 0;
    left: 0;
    width: 100%; /* 占满宽度 */
    z-index: 1000; /* 确保在其他元素之上 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
    backdrop-filter: blur(5px); /* 背景模糊效果 */
    -webkit-backdrop-filter: blur(5px); /* 兼容Safari */
}

/* 导航栏容器 */
header .container {
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
}

/* 网站logo样式 */
.logo {
    font-size: 1.5rem; /* 字体大小 */
    font-weight: bold; /* 加粗 */
    color: #111; /* 深色文字 */
    margin-left: 10px; /* 距离左侧20px */
}

/* 导航链接列表 */
.nav-links {
    display: flex; /* 水平排列 */
    gap: 30px; /* 链接间距 */
    margin-right: 20px; /* 距离右侧10px */
}

/* 导航链接样式 */
.nav-links a {
    font-size: 1rem; /* 字体大小 */
    color: #555; /* 文字颜色 */
    padding: 5px 0; /* 上下内边距 */
    position: relative; /* 用于下划线效果定位 */
}

/* 导航链接下划线效果 */
.nav-links a::after {
    content: ''; /* 伪元素内容 */
    position: absolute; /* 绝对定位 */
    bottom: 0; /* 底部对齐 */
    left: 0; /* 左对齐 */
    width: 0; /* 初始宽度为0 */
    height: 1px; /* 下划线高度 */
    background-color: #333; /* 下划线颜色 */
    transition: width 0.3s ease; /* 宽度过渡动画 */
}

/* 导航链接悬停或激活时的下划线 */
.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%; /* 下划线扩展至全宽 */
}

/* 激活状态的导航链接 */
.nav-links a.active {
    color: #111; /* 深色文字 */
    font-weight: 500; /* 中等粗细 */
}

/* 移动端菜单按钮（默认隐藏） */
.menu-toggle {
    display: none; /* 默认隐藏 */
    background: none; /* 无背景 */
    border: none; /* 无边框 */
    cursor: pointer; /* 手型光标 */
    padding: 10px; /* 内边距 */
    z-index: 1001; /* 确保在导航菜单之上 */
}

/* 汉堡菜单图标线条 */
.menu-toggle span {
    display: block; /* 块级元素 */
    width: 25px; /* 线条宽度 */
    height: 2px; /* 线条高度 */
    background-color: #333; /* 线条颜色 */
    margin: 5px 0; /* 线条间距 */
    transition: all 0.3s ease-in-out; /* 动画效果 */
}

/* 汉堡菜单打开时的X形动画 */
.menu-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px); /* 第一条线旋转并平移 */
}
.menu-toggle.open span:nth-child(2) {
    opacity: 0; /* 第二条线隐藏 */
}
.menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px); /* 第三条线旋转并平移 */
}

/* ===== 英雄区域（Hero Section） ===== */
/* 首页首屏区域 */
.hero {
    height: 20vh; /* 高度占视口80% */
    min-height: 450px; /* 最小高度 */
    background-image: url('../images/C0038.webp'); /* 背景图片 */
    background-size: 1600px auto; /* 固定宽度1600px，高度按比例缩放 */
    background-position: center center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 不重复 */
    display: flex; /* flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    text-align: center; /* 文字居中 */
    color: #fff; /* 文字颜色 */
    position: relative; /* 用于叠加层定位 */
}

/* 英雄区域暗色叠加层 */
.hero::before {
    content: ''; /* 伪元素内容 */
    position: absolute; /* 绝对定位 */
    top: 0;
    left: 0;
    width: 100%; /* 占满宽度 */
    height: 100%; /* 占满高度 */
    background-color: rgba(0, 0, 0, 0.1); /* 半透明黑色 */
    z-index: 1; /* 在背景图之上，内容之下 */
}

/* 英雄区域内容容器 */
.hero-content {
    position: relative; /* 相对定位 */
    z-index: 2; /* 确保在叠加层之上 */
}

/* 英雄区域主标题 */
.hero h1 {
    font-size: 5em; /* 大标题字体 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文字阴影 */
}

/* 英雄区域副标题 */
.hero-content p {
    font-size: 2rem; /* 副标题字体 */
    font-weight: 300; /* 轻量字体 */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); /* 文字阴影 */
}

/* ===== 通用网格布局 ===== */
/* 网格容器 */
.grid {
    display: grid; /* 使用grid布局 */
    grid-template-columns: repeat(3, 1fr); /* 默认3列等宽 */
    gap: 3px; /* 网格项间距 */
}

/* 网格项 */
.grid-item {
    background-color: #f9f9f9; /* 默认背景色 */
    overflow: hidden; /* 隐藏图片溢出部分 */
    display: flex; /* flex布局，用于图片和标题 */
    flex-direction: column; /* 垂直排列 */
    border-radius: 3px; /* 添加圆角效果 */
}

/* 网格项图片 */
.grid-item img {
    width: 100%; /* 图片占满宽度 */
    height: auto; /* 保持比例 */
    object-fit: cover; /* 图片铺满容器 */
    aspect-ratio: 4 / 3; /* 固定图片比例 */
    transition: transform 0.4s ease, opacity 0.4s ease; /* 悬停动画 */
}

/* 网格项图片悬停效果 */
.grid-item a:hover img {
    transform: scale(1.05); /* 略微放大 */
    opacity: 0.85; /* 降低透明度 */
}

/* ===== 首页作品集网格 ===== */
/* 作品集图片链接 */
.portfolio-grid .grid-item a.portfolio-image-link {
    display: block; /* 填满图片区域 */
    line-height: 0; /* 避免底部空隙 */
}

/* 作品集标题 */
.portfolio-grid .grid-item h3 {
    color: #333; /* 标题颜色 */
    font-size: 1.05rem; /* 字体大小 */
    font-weight: 500; /* 中等粗细 */
    text-align: center; /* 居中 */
    padding: 10px 10px; /* 内边距 */
    margin: 0; /* 无外边距 */
    line-height: 1.2; /* 行高 */
    background-color:#dcdcdc; /* 庚斯博罗灰背景 */
    border-top: 1px solid #eee; /* 分隔线 */
    flex-shrink: 0; /* 防止被压缩 */
}

/* ===== 图库页网格 ===== */
/* 图库页链接 */
.gallery-grid .grid-item a {
    display: block; /* 填满网格项 */
    line-height: 0; /* 避免图片下方空隙 */
}

/* 图库页网格项 */
.gallery-grid .grid-item {
    background-color: transparent; /* 无背景 */
    border: none; /* 无边框 */
    box-shadow: none; /* 无阴影 */
    border-radius: 3px; /* 添加圆角效果 */
}

/* ===== 内容页面（关于、联系） ===== */
/* 内容页面容器 */
.content-page {
    background-color: #fff; /* 白色背景 */
}

/* 内容页面标题 */
.content-page .section-title {
    border: none; /* 移除“关于”和“联系”页面的标题边框 */
}

/* 内容页面容器宽度 */
.content-page .container {
    max-width: 900px; /* 较窄的容器 */
}

/* 内容文本样式 */
.content-text {
    line-height: 1.8; /* 行高 */
    font-size: 1.05rem; /* 字体大小 */
    color: #444; /* 文字颜色 */
}

/* 内容文本间距 */
.content-text p,
.content-text ul,
.content-text h2 {
    margin-bottom: 20px; /* 下外边距 */
}

/* 内容页面列表 */
.content-text ul {
    padding-left: 20px; /* 左内边距 */
    list-style: disc; /* 项目符号 */
}

/* 列表项间距 */
.content-text li {
    margin-bottom: 10px;
}

/* 内容页面链接 */
.content-text a {
    color: #1a73e8; /* 蓝色链接 */
    text-decoration: underline; /* 下划线 */
}

/* 内容页面链接悬停 */
.content-text a:hover {
    color: #0b57b3; /* 深蓝色 */
}

/* 联系表单组 */
.contact-form .form-group {
    margin-bottom: 20px; /* 下外边距 */
}

/* 表单标签 */
.contact-form label {
    display: block; /* 块级显示 */
    margin-bottom: 5px; /* 下外边距 */
    font-weight: bold; /* 加粗 */
    color: #555; /* 文字颜色 */
}

/* 表单输入框和文本区域 */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%; /* 占满宽度 */
    padding: 12px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 4px; /* 圆角 */
    font-size: 1rem; /* 字体大小 */
    font-family: inherit; /* 继承字体 */
}

/* 文本区域调整大小 */
.contact-form textarea {
    resize: vertical; /* 仅垂直调整 */
}

/* 表单聚焦效果 */
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none; /* 移除默认轮廓 */
    border-color: #888; /* 边框颜色 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 聚焦阴影 */
}

/* 通用按钮样式 */
.btn {
    display: inline-block; /* 行内块元素 */
    background-color: #333; /* 背景颜色 */
    color: #fff; /* 文字颜色 */
    padding: 12px 25px; /* 内边距 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 圆角 */
    cursor: pointer; /* 手型光标 */
    font-size: 1rem; /* 字体大小 */
    transition: background-color 0.3s ease, transform 0.2s ease; /* 动画效果 */
    text-decoration: none; /* 移除下划线 */
}

/* 按钮悬停效果 */
.btn:hover {
    background-color: #555; /* 深色背景 */
    color: #fff; /* 保持白色文字 */
    transform: translateY(-2px); /* 轻微上移 */
}

/* 按钮点击效果 */
.btn:active {
    transform: translateY(0); /* 恢复原位 */
}

/* ===== 页脚 ===== */
/* 页面底部 */
footer {
    background-color: #f8f8f8; /* 浅灰背景 */
    padding: 30px 0; /* 上下内边距 */
    margin-top: auto; /* 推至页面底部 */
    text-align: center; /* 文字居中 */
    color: #666; /* 文字颜色 */
    font-size: 0.9rem; /* 字体大小 */
    border-top: 1px solid #eee; /* 上边框 */
    width: 100%; /* 占满宽度 */
}

/* ===== 响应式设计 ===== */

/* 平板电脑（最大宽度1024px） */
@media (max-width: 1024px) {
    .container {
        padding: 0 20px; /* 减小内边距 */
    }
    .grid {
        grid-template-columns: repeat(2, 1fr); /* 2列布局 */
        gap: 20px; /* 减小间距 */
    }
    .hero {
        height: 70vh; /* 减小高度 */
    }
    .section-title {
        font-size: 1.8rem; /* 减小标题字体 */
    }
    .nav-links {
        gap: 20px; /* 减小导航链接间距 */
    }
}

/* 移动设备（最大宽度768px） */
@media (max-width: 768px) {
    .section-padding {
        padding: 40px 0; /* 减小上下内边距 */
    }
    .section-title {
        font-size: 1.6rem; /* 减小标题字体 */
        margin-bottom: 30px; /* 减小下外边距 */
    }

    /* 移动端导航 */
    .menu-toggle {
        display: block; /* 显示汉堡按钮 */
    }
    .nav-links {
        display: none; /* 默认隐藏 */
        flex-direction: column; /* 垂直排列 */
        position: absolute; /* 绝对定位 */
        top: 100%; /* 在header下方 */
        left: 0;
        width: 100%; /* 占满宽度 */
        background-color: rgba(255, 255, 255, 0.98); /* 半透明白色背景 */
        padding: 15px 0; /* 内边距 */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影 */
        border-top: 1px solid #eee; /* 上边框 */
        gap: 0; /* 移除间距 */
        align-items: center; /* 居中对齐 */
    }
    .nav-links.active {
        display: flex; /* 激活时显示 */
    }
    .nav-links li {
        width: 100%; /* 占满宽度 */
        text-align: center; /* 居中 */
    }
    .nav-links a {
        font-size: 1.1rem; /* 增大字体 */
        padding: 12px 20px; /* 增大点击区域 */
        display: block; /* 填满li */
        width: 100%;
    }
    .nav-links a::after {
        display: none; /* 移除下划线效果 */
    }
    .nav-links a.active {
        font-weight: bold; /* 加粗 */
        background-color: #f0f0f0; /* 高亮背景 */
    }

    .hero {
        height: 60vh; /* 减小高度 */
        min-height: 350px; /* 最小高度 */
    }
    .hero h1 {
        font-size: 2rem; /* 减小标题字体 */
    }
    .grid {
        grid-template-columns: 1fr; /* 单列布局 */
        gap: 15px; /* 减小间距 */
    }
    .portfolio-grid .grid-item h3 {
        font-size: 1rem; /* 减小标题字体 */
        padding: 12px 10px; /* 调整内边距 */
    }
    .content-page .container {
        max-width: 100%; /* 占满宽度 */
    }
    .content-text {
        font-size: 1rem; /* 减小字体 */
    }
    footer {
        padding: 20px 0; /* 减小内边距 */
        font-size: 0.85rem; /* 减小字体 */
    }
}