/*
 * Services & Solutions Page Styles
 * 服务与解决方案页面样式
 */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.services-main {
    font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Hero Banner Section */
.services-hero {
    position: relative;
    width: 100%;
    height: 71.5rem; /* 根据banner图片比例(1920x1136)调整，参考新闻页面58rem */
    overflow: hidden;
}

.services-hero-banner {
    width: 100%;
    height: 100%;
    position: relative;
}

.services-hero-banner picture,
.services-hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.services-hero-content {
    position: absolute;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 88rem;
    color: white;
    text-align: center;
    z-index: 2;
}

.services-hero-title {
    font-family: 'AlibabaPuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    color: white;
}

/* Content Section */
.services-content-section {
    padding: 5rem 0;
    background: #fff;
}

.services-container {
    max-width: 90rem;
    margin: 0 auto;
}

.services-section-title {
    font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 3.75rem; /* 阿里巴巴普惠体 105 Heavy 60px → 3.75rem */
    font-weight: 900; /* Heavy */
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 5rem;
    background: linear-gradient(180deg, #FF1426 0%, #951426 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 3rem;
    margin-bottom: 4rem;
}

/* Services Case Item */
.services-case-item {
    background: transparent; /* 移除背景色 */
    border-radius: 0; /* 移除圆角 */
    overflow: hidden;
    box-shadow: none; /* 移除阴影 */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 更平滑的过渡 */
    display: flex;
    flex-direction: column;
    height: auto;
}

.services-case-item:hover {
    transform: translateY(-8px); /* 稍微增加移动距离 */
    box-shadow: none; /* 移除悬浮阴影 */
}

/* Case Image - 基于600×660尺寸 */
.services-case-image {
    width: 37.5rem; /* 600px ÷ 16 = 37.5rem */
    height: 41.25rem; /* 660px ÷ 16 = 41.25rem */
    position: relative;
    overflow: hidden;
    border-radius: 4rem;
    margin: 0 auto; /* 图片居中 */
}

.services-case-image picture,
.services-case-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); /* 更柔和的缓动曲线 */
}

.services-case-item:hover .services-case-image img {
    transform: scale(1.05) rotate(0.2deg); /* 更轻微的缩放和旋转，避免过于生硬 */
}

/* Case Content */
.services-case-content {
    padding: 2rem 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.services-case-title {
    font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2.5rem; /* 阿里巴巴普惠体 85 Bold 40px → 2.5rem */
    font-weight: 700; /* Bold */
    color: #2B2B2B;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    text-align: center; /* 居中 */
}

.services-case-subtitle {
    font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.75rem; /* 阿里巴巴普惠体 55 Regular 28px → 1.75rem */
    font-weight: 400; /* Regular */
    color: #000000;
    margin-bottom: 1rem;
    line-height: 1.4;
    text-align: center; /* 居中 */
}

.services-case-description {
    flex: 1;
    margin-bottom: 1.5rem;
}

.services-case-text {
    font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.5rem; /* 阿里巴巴普惠体 35 Thin 24px → 1.5rem */
    font-weight: 100; /* Thin */
    color: #666;
    line-height: 1.6;
    text-align: left; /* 居左 */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.services-case-text.collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 允许3行，第3行包含文本和Learn More */
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 7.2rem; /* 3行高度: 1.5rem × 1.6行高 × 3行 = 7.2rem */
}

.services-case-text.expanded .text-content {
    display: block;
    overflow: visible;
}

/* 段落间距样式 */
.services-case-text .text-content br {
    line-height: 2.2;
}

.services-case-text .text-content {
    white-space: pre-line; /* 保留换行符 */
}

/* Learn More链接样式 */
.services-learn-more-link {
    color: #B32A28;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.4rem;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
}

/* Learn More紧跟文本 */
.services-learn-more-link {
    margin-left: 0.5rem; /* 与文本之间的间距 */
}

.services-learn-more-link:hover {
    color: #951426;
    text-decoration: underline;
    transform: translateY(-1px);
}

.services-learn-more-link:active {
    transform: translateY(0);
}



/* Responsive Styles */
@media (max-width: 75rem) {
    .services-hero-content {
        width: 90%;
    }
    
    .services-hero-title {
        font-size: 3rem;
    }
    
    .services-section-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 64rem) {
    .services-grid {
        gap: 3rem 2rem;
    }
    
    .services-case-image {
        height: 280px;
    }
    
    .services-case-content {
        padding: 1.5rem;
    }
}

@media (max-width: 48rem) {
    .services-hero {
        height: 60vh;
        min-height: 50vh;
        position: relative;
    }
    
    .services-hero-content {
        bottom: 8vw;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: none;
        text-align: center;
    }
    
    .services-hero-title {
        font-size: 8vw;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1.2;
        margin: 0;
        color: white;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .services-content-section {
        padding: 8vw 4vw;
    }
    
    .services-container {
        width: 100%;
        max-width: none;
        padding: 0;
    }
    
    .services-section-title {
        font-size: 7vw;
        margin-bottom: 8vw;
        text-align: center;
        padding: 0 2vw;
        font-weight: 900;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 8vw;
        margin-bottom: 8vw;
        padding: 0 2vw;
    }
    
    .services-case-item {
        border-radius: 2vw; /* 移动端添加轻微圆角 */
        background: white;
        box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.1);
        overflow: hidden;
        margin-bottom: 2vw;
        transition: all 0.3s ease;
    }
    
    .services-case-image {
        width: 100%;
        height: 70vw; /* 移动端调整高度比例，更适合手机屏幕 */
        margin: 0;
        border-radius: 0;
        position: relative;
        overflow: hidden;
    }
    
    .services-case-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.4s ease;
    }
    
    .services-case-content {
        padding: 6vw 5vw;
    }
    
    .services-case-title {
        font-size: 5.5vw;
        margin-bottom: 3vw;
        line-height: 1.3;
        font-weight: 700;
        text-align: center;
        color: #333;
    }
    
    .services-case-subtitle {
        font-size: 4vw;
        margin-bottom: 4vw;
        color: #000000;
        line-height: 1.4;
        font-weight: 400;
        text-align: center;
    }
    
    .services-case-text {
        font-size: 3.8vw;
        line-height: 1.6;
        text-align: left;
        color: #666;
    }
    
    .services-case-text.collapsed {
        max-height: 15vw; /* 移动端调整高度限制 */
        overflow: hidden;
    }
    
    .services-learn-more-link {
        font-size: 3.6vw;
        margin-left: 1vw;
        padding: 0.5vw 0;
        color: #B32A28;
        font-weight: 600;
    }
    
    /* 移动端优化的悬浮效果 */
    .services-case-item:active {
        transform: translateY(0.5vw);
        box-shadow: 0 0.3vw 1.5vw rgba(0, 0, 0, 0.15);
    }
    
    .services-case-item:active .services-case-image img {
        transform: scale(1.02);
    }
    
    /* 移动端取消桌面悬浮效果 */
    .services-case-item:hover {
        transform: none;
        box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.1);
    }
    
    .services-case-item:hover .services-case-image img {
        transform: none;
    }
}

/* 超小屏幕适配 (iPhone SE等) */
@media (max-width: 30rem) {
    .services-hero {
        height: 55vh;
        min-height: 45vh;
    }
    
    .services-hero-content {
        bottom: 5vw;
        /*! width: 95%; */
    }
    
    .services-hero-title {
        font-size: 5vw;
        line-height: 1.1;
    }
    
    .services-content-section {
        padding: 10vw 3vw;
    }
    
    .services-section-title {
        font-size: 6vw;
        margin-bottom: 8vw;
    }
    
    .services-grid {
        gap: 10vw;
        padding: 0 1vw;
    }
    
    .services-case-image {
        height: 75vw; /* 超小屏幕稍微增加高度 */
    }
    
    .services-case-content {
        padding: 7vw 6vw;
    }
    
    .services-case-title {
        font-size: 5.2vw;
        margin-bottom: 3.5vw;
    }
    
    .services-case-subtitle {
        font-size: 4.2vw;
        margin-bottom: 4.5vw;
    }
    
    .services-case-text {
        font-size: 4vw;
        line-height: 1.7;
    }
    
    .services-case-text.collapsed {
        max-height: 20vw; /* 超小屏幕调整 */
    }
    
    .services-learn-more-link {
        font-size: 3.8vw;
    }
}

/* 横屏手机适配 */
@media (max-width: 48rem) and (max-height: 30rem) and (orientation: landscape) {
    .services-hero {
        height: 80vh;
        min-height: 70vh;
    }
    
    .services-hero-content {
        bottom: 5vh;
    }
    
    .services-hero-title {
        font-size: 6vw;
    }
    
    .services-content-section {
        padding: 6vw 4vw;
    }
    
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
        gap: 4vw;
    }
    
    .services-case-image {
        height: 50vw;
    }
}

/* Smooth Scrolling for Page */
html {
    scroll-behavior: smooth;
}

/* Loading States */
.services-case-image img {
    transition: opacity 0.3s ease;
}

.services-case-image img[loading="lazy"] {
    opacity: 0;
}

.services-case-image img[loading="lazy"].loaded {
    opacity: 1;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .scroll-wheel {
        animation: none;
    }
}