/* ============================================================================
   Solovox Shop Banner 样式
   
   配套文件：inc/custom-shop-banner.php
   
   功能：
   - 控制 Shop / 首页顶部横幅的布局与外观
   - 响应式适配桌面 / 平板 / 手机
   - 支持 #main 锚点平滑滚动
   
   修改记录：
   - 2026-09-12 初版
   - 2026-09     新增平滑滚动
   ============================================================================ */


/* ── 0. 平滑滚动（锚点 #main）───────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}


/* ── 1. 外层容器 ─────────────────────────────────────────────────────── */
.shop-banner-wrapper {
    max-width: 1400px;      /* 最大宽度，超宽屏不会拉太长 */
    margin: 30px auto 40px; /* 上 30px / 左右自动居中 / 下 40px */
    padding: 0 20px;        /* 左右留 20px 间距（防止贴边） */
}


/* ── 2. 链接包裹层 ────────────────────────────────────────────────────── */
.shop-banner-link {
    display: block;         /* 让 <a> 变成块级元素，撑满容器 */
    position: relative;     /* 为子元素的绝对定位提供参考 */
    border-radius: 12px;    /* 圆角 */
    overflow: hidden;       /* 裁剪超出圆角的图片部分 */
    text-decoration: none;  /* 去掉链接下划线 */
    cursor: pointer;       /* 鼠标变手型 */
}


/* ── 3. Banner 图片 ──────────────────────────────────────────────────── */
.shop-banner-image {
    width: 100%;            /* 宽度撑满容器 */
    height: auto;           /* 高度自动，保持比例 */
    max-height: 600px;      /* 限制最大高度，避免 1920×1280 图片占屏过高 */
    object-fit: cover;      /* 超出容器部分裁剪，不拉伸不变形 */
    object-position: center 40%; /* 裁剪时保留画面偏上 40% 的区域 */
    display: block;         /* 去掉图片底部默认间隙 */
    transition: transform 0.6s ease; /* 缩放动画过渡 */
}

/* 鼠标悬停时图片微微放大（视差感） */
.shop-banner-link:hover .shop-banner-image {
    transform: scale(1.03);
}


/* ── 4. 半透明遮罩层 ──────────────────────────────────────────────────── */
.shop-banner-overlay {
    position: absolute;     /* 绝对定位，覆盖在图片上 */
    inset: 0;              /* 等同于 top:0; right:0; bottom:0; left:0 */
    display: flex;          /* 使用 flexbox 布局 */
    align-items: center;    /* 垂直居中 */
    justify-content: center;/* 水平居中 */
    background: rgba(0, 0, 0, 0.25); /* 半透明黑色遮罩 */
    transition: background 0.3s ease; /* 背景色过渡动画 */
}

/* 鼠标悬停时遮罩稍微加深 */
.shop-banner-link:hover .shop-banner-overlay {
    background: rgba(0, 0, 0, 0.35);
}


/* ── 5. Shop All 按钮 ─────────────────────────────────────────────────── */
.shop-banner-btn {
    color: #fff;                    /* 白色文字 */
    font-size: 32px;                /* 字号 */
    font-weight: 700;              /* 粗体 */
    letter-spacing: 2px;           /* 字间距 */
    text-transform: uppercase;     /* 全大写 */
    padding: 16px 48px;           /* 内边距：上下 16px / 左右 48px */
    border: 2px solid #fff;       /* 白色描边 */
    border-radius: 50px;          /* 胶囊圆角 */
    backdrop-filter: blur(4px);   /* 毛玻璃效果（现代浏览器支持） */
    -webkit-backdrop-filter: blur(4px); /* Safari 兼容 */
    background: rgba(255, 255, 255, 0.1); /* 微白半透明背景 */
    transition: all 0.3s ease;    /* 所有属性过渡动画 */
    white-space: nowrap;          /* 防止文字换行 */
    position: relative;           /* 确保在最上层可点击 */
    z-index: 10;
}

/* 鼠标悬停时按钮反白：白底黑字 */
.shop-banner-link:hover .shop-banner-btn {
    background: #fff;
    color: #000;
}


/* ── 6. 响应式：平板（≤1024px）─────────────────────────────────────── */
@media (max-width: 1024px) {

    .shop-banner-image {
        max-height: 480px;        /* 缩小最大高度 */
    }

    .shop-banner-btn {
        font-size: 26px;
        padding: 14px 36px;
    }
}


/* ── 7. 响应式：手机横屏/小平板（≤768px）────────────────────────────── */
@media (max-width: 768px) {

    .shop-banner-wrapper {
        margin: 20px auto 30px;
        padding: 0 12px;          /* 减少左右间距 */
    }

    .shop-banner-image {
        max-height: 360px;
        object-position: center 35%; /* 手机端进一步调整裁剪位置 */
    }

    .shop-banner-btn {
        font-size: 20px;
        padding: 12px 28px;
    }
}


/* ── 8. 响应式：小手机（≤480px）─────────────────────────────────────── */
@media (max-width: 480px) {

    .shop-banner-wrapper {
        padding: 0 8px;
    }

    .shop-banner-image {
        max-height: 280px;
        object-position: center 30%;
    }

    .shop-banner-btn {
        font-size: 16px;
        padding: 10px 22px;
        letter-spacing: 1px;
    }
}