/* 工艺解码页面样式 */

/* 页面标题横幅 */
.page-banner {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://pub-debae0c106784b6c9bb10aeba98dfabd.r2.dev/images/bg.png');
    background-size: cover;
    background-position: center;
    height: 18.75rem; /* 300px -> 18.75rem */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.banner-content h1 {
    font-size: 3rem;
    margin-bottom: 0.625rem; /* 10px -> 0.625rem */
    text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5); /* 2px 4px -> 0.125rem 0.25rem */
}

.banner-content p {
    font-size: 1.2rem;
    max-width: 43.75rem; /* 700px -> 43.75rem */
    margin: 0 auto;
}

/* 工艺内容布局 */
.craft-container {
    display: flex;
    max-width: 75rem; /* 1200px -> 75rem */
    margin: 2.5rem auto; /* 40px -> 2.5rem */
    padding: 0 1.25rem; /* 20px -> 1.25rem */
}

.craft-menu {
    flex: 0 0 15.625rem; /* 250px -> 15.625rem */
    margin-right: 2.5rem; /* 40px -> 2.5rem */
    position: sticky;
    top: 6.25rem; /* 100px -> 6.25rem */
    align-self: flex-start;
    background-color: #fff;
    border-radius: 0.5rem; /* 8px -> 0.5rem */
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1); /* 2px 10px -> 0.125rem 0.625rem */
    padding: 1.25rem; /* 20px -> 1.25rem */
}

.craft-menu h3 {
    color: #8c1c13;
    font-size: 1.5rem;
    margin-bottom: 1.25rem; /* 20px -> 1.25rem */
    padding-bottom: 0.625rem; /* 10px -> 0.625rem */
    border-bottom: 0.125rem solid #f0e6d8; /* 2px -> 0.125rem */
}

.craft-menu ul {
    list-style: none;
}

.craft-menu li {
    margin-bottom: 0.9375rem; /* 15px -> 0.9375rem */
}

.craft-menu a {
    display: block;
    padding: 0.625rem 0.9375rem; /* 10px 15px -> 0.625rem 0.9375rem */
    border-radius: 0.25rem; /* 4px -> 0.25rem */
    transition: all 0.3s ease;
    font-weight: 500;
}

.craft-menu a:hover, .craft-menu a.active {
    background-color: #f0e6d8;
    color: #8c1c13;
}

.craft-content {
    flex: 1;
}

.craft-section {
    margin-bottom: 5rem; /* 80px -> 5rem */
}

.section-desc {
    text-align: center;
    max-width: 50rem; /* 800px -> 50rem */
    margin: 0 auto 2.5rem; /* 40px -> 2.5rem */
    font-size: 1.1rem;
    color: #555;
}

/* 工序时间线 */
.process-timeline {
    position: relative;
    max-width: 50rem; /* 800px -> 50rem */
    margin: 0 auto;
}

.process-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.875rem; /* 30px -> 1.875rem */
    height: 100%;
    width: 0.25rem; /* 4px -> 0.25rem */
    background-color: #f0e6d8;
}

.timeline-item {
    position: relative;
    padding-left: 5rem; /* 80px -> 5rem */
    margin-bottom: 3.75rem; /* 60px -> 3.75rem */
}

.timeline-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 3.75rem; /* 60px -> 3.75rem */
    height: 3.75rem; /* 60px -> 3.75rem */
    background-color: #8c1c13;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    z-index: 1;
}

.timeline-content {
    background-color: #fff;
    border-radius: 0.5rem; /* 8px -> 0.5rem */
    box-shadow: 0 0.1875rem 0.625rem rgba(0, 0, 0, 0.1); /* 3px 10px -> 0.1875rem 0.625rem */
    padding: 1.5625rem; /* 25px -> 1.5625rem */
}

.timeline-content h3 {
    color: #8c1c13;
    font-size: 1.8rem;
    margin-bottom: 1.25rem; /* 20px -> 1.25rem */
}

.timeline-image {
    margin-bottom: 1.25rem; /* 20px -> 1.25rem */
    border-radius: 0.5rem; /* 8px -> 0.5rem */
    overflow: hidden;
    box-shadow: 0 0.1875rem 0.625rem rgba(0, 0, 0, 0.1); /* 3px 10px -> 0.1875rem 0.625rem */
}

.timeline-image img {
    width: 100%;
    display: block;
}

.timeline-detail {
    margin-top: 1.25rem; /* 20px -> 1.25rem */
    background-color: #f9f5f0;
    padding: 0.9375rem; /* 15px -> 0.9375rem */
    border-radius: 0.375rem; /* 6px -> 0.375rem */
}

.timeline-detail h4 {
    color: #8c1c13;
    margin-bottom: 0.625rem; /* 10px -> 0.625rem */
    font-size: 1.2rem;
}

.timeline-detail ul {
    padding-left: 1.25rem; /* 20px -> 1.25rem */
}

.timeline-detail li {
    margin-bottom: 0.3125rem; /* 5px -> 0.3125rem */
}

/* 工具展示 */
.tools-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); /* 400px -> 25rem */
    gap: 1.875rem; /* 30px -> 1.875rem */
}

.tool-card {
    background-color: #fff;
    border-radius: 0.5rem; /* 8px -> 0.5rem */
    box-shadow: 0 0.1875rem 0.625rem rgba(0, 0, 0, 0.1); /* 3px 10px -> 0.1875rem 0.625rem */
    overflow: hidden;
}

.tool-image {
    height: 15.625rem; /* 250px -> 15.625rem */
    overflow: hidden;
}

.tool-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tool-card:hover .tool-image img {
    transform: scale(1.05);
}

.tool-info {
    padding: 1.25rem; /* 20px -> 1.25rem */
}

.tool-info h3 {
    color: #8c1c13;
    font-size: 1.5rem;
    margin-bottom: 0.625rem; /* 10px -> 0.625rem */
}

.tool-info p {
    margin-bottom: 0.9375rem; /* 15px -> 0.9375rem */
}

.tool-params {
    background-color: #f9f5f0;
    padding: 0.9375rem; /* 15px -> 0.9375rem */
    border-radius: 0.375rem; /* 6px -> 0.375rem */
    margin-top: 0.9375rem; /* 15px -> 0.9375rem */
}

.tool-params h4 {
    color: #8c1c13;
    margin-bottom: 0.625rem; /* 10px -> 0.625rem */
}

.tool-params table {
    width: 100%;
    border-collapse: collapse;
}

.tool-params th, .tool-params td {
    padding: 0.5rem 0.75rem; /* 8px 12px -> 0.5rem 0.75rem */
    text-align: left;
    border-bottom: 0.0625rem solid #ddd; /* 1px -> 0.0625rem */
}

.tool-params th {
    font-weight: bold;
    color: #333;
}

/* 工序视频展示 */
.craft-process {
    max-width: 75rem; /* 1200px -> 75rem */
    margin: 3.75rem auto; /* 60px auto -> 3.75rem auto */
    padding: 0 1.25rem; /* 20px -> 1.25rem */
}

.process-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(21.875rem, 1fr)); /* 350px -> 21.875rem */
    gap: 2.5rem; /* 40px -> 2.5rem */
    margin-top: 2.5rem; /* 40px -> 2.5rem */
}

.process-video-item {
    background-color: #fff;
    border-radius: 0.625rem; /* 10px -> 0.625rem */
    box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.1); /* 5px 15px -> 0.3125rem 0.9375rem */
    overflow: hidden;
    transition: transform 0.3s ease;
}

.process-video-item:hover {
    transform: translateY(-0.3125rem); /* -5px -> -0.3125rem */
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15); /* 8px 20px -> 0.5rem 1.25rem */
}

.process-video-item h3 {
    color: #8c1c13;
    font-size: 1.5rem;
    margin: 0;
    padding: 1.25rem 1.25rem 0.625rem; /* 20px 20px 10px -> 1.25rem 1.25rem 0.625rem */
    border-bottom: 0.125rem solid #f0e6d8; /* 2px -> 0.125rem */
}

.video-box {
    width: 100%;
    padding-top: 56.25%; /* 16:9宽高比 */
    position: relative;
}

.video-box video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.process-video-item p {
    padding: 1.25rem; /* 20px -> 1.25rem */
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
}

/* 添加自动缩放脚本支持 */
@media screen and (max-width: 1200px) {
    html, body {
        width: 1200px;
    }
}

/* 移除响应式设计部分，改用整体缩放 */