/* ==========================================================================
   首页专属样式 - home.css
   只放首页独有组件：轮播图、Hero 区、首页分类卡片微调
   通用样式（按钮/卡片/页脚等）见 style.css
   响应式适配见 responsive.css
   ========================================================================== */

/* ==========================================================================
   1. 轮播图（首页核心组件）
   ========================================================================== */
.banner-section {
    position: relative;
    margin-top: var(--header-height, 70px);
    height: 600px;
    overflow: hidden;
}

.banner-slider {
    height: 100%;
    position: relative;
}

.banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .5s ease;
    background-color: #1f2937;          /* 图片未加载时的占位色 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: opacity;
}
.banner-slide.active { opacity: 1; }

/* 若用 <img> 而非 background-image */
.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 文字可读性兜底遮罩 */
.banner-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
                rgba(0, 0, 0, .45) 0%,
                rgba(0, 0, 0, .10) 60%,
                transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.banner-content {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    color: #fff;
    max-width: 600px;
    z-index: 2;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.banner-content h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
}
.banner-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* 箭头 */
.banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition, .3s ease),
                transform var(--transition, .3s ease);
}
.banner-arrow:hover {
    background: rgba(212, 165, 116, .8);
    transform: translateY(-50%) scale(1.05);
}
.banner-prev { left: 20px; }
.banner-next { right: 20px; }

/* 指示点 */
.banner-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 4;
}
.banner-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: background-color var(--transition, .3s ease),
                transform var(--transition, .3s ease);
}
.banner-dot:hover { background: rgba(255, 255, 255, .8); }
.banner-dot.active {
    background: var(--color-primary, #d4a574);
    transform: scale(1.2);
}

/* ==========================================================================
   2. Hero 区（首页独有）
   ========================================================================== */
.hero-section {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 80px 0;
    text-align: center;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .3);
    pointer-events: none;
}
.hero-content {
    position: relative;
    z-index: 2;
}
.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}
.hero-subtitle {
    font-size: 1.2rem;
    opacity: .9;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.7;
}
.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   3. 首页产品分类卡片（圆形图标布局）
   —— 覆盖 style.css 中通用 .category-card 的部分默认值
   ========================================================================== */
.categories-grid .category-card {
    padding: 30px 20px;
}
.categories-grid .category-image {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}
.categories-grid .category-image img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-bg-soft, #f8f9fa);
    transition: transform var(--transition, .3s ease);
}
.categories-grid .category-card:hover .category-image img {
    transform: scale(1.05);
}
.categories-grid .category-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.categories-grid .category-card p {
    font-size: .9rem;
    margin-bottom: 15px;
    min-height: 42px;                  /* 描述行数不齐时保持卡片等高 */
}

/* ==========================================================================
   4. 首页产品网格微调（可选）
   ========================================================================== */
.products-grid .product-card {
    display: flex;
    flex-direction: column;
}
.products-grid .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.products-grid .product-info h3 {
    flex: 1;                            /* 标题撑开，价格底部对齐 */
}

/* ==========================================================================
   5. 减少动画偏好
   —— 若 responsive.css 已全局处理，本节可删
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .banner-slide { transition: none !important; }
    .banner-arrow,
    .banner-dot,
    .categories-grid .category-image img { transition: none !important; }
}