/**
 * 首页VIP卡片模块样式
 * 复用VIP页面的样式，只添加首页特定的布局样式
 *
 * @package GoodBase
 * @since 1.0.0
 */

/* 首页VIP卡片模块容器 */
.home-vip-cards-module {
    padding: 6px 0;
    background: #f8f9fa;
    margin-top: 0;
    position: relative;
    z-index: 1;
}

/* 首页VIP卡片网格布局 - 4列均匀分布，强制单行显示 */
.home-vip-plans-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 20px;
    margin-top: 40px;
    max-width: 100%;
    width: 100%;
    justify-content: flex-start;
    align-items: start;
}

/* 确保卡片宽度自适应，4个卡片在一行显示 */
.home-vip-plans-grid .plan-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0; /* 允许flex收缩 */
}

/* 覆盖VIP页面的grid定位规则，让卡片按照HTML顺序显示 */
.home-vip-plans-grid .plan-monthly {
    grid-column: 1 !important;
    grid-row: 1 !important;
    transform: none !important;
}

.home-vip-plans-grid .plan-quarterly {
    grid-column: 2 !important;
    grid-row: 1 !important;
    transform: none !important;
}

.home-vip-plans-grid .plan-yearly {
    grid-column: 3 !important;
    grid-row: 1 !important;
    transform: none !important;
}

.home-vip-plans-grid .plan-permanent {
    grid-column: 4 !important;
    grid-row: 1 !important;
    transform: none !important;
}

/* hover效果 */
.home-vip-plans-grid .plan-card:hover {
    transform: translateY(-8px) !important;
}

/* 响应式设计 - 始终保持4列单行显示 */
@media (max-width: 1024px) {
    .home-vip-plans-grid {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .home-vip-cards-module {
        padding: 6px 0;
    }
    
    /* 移动端仍然保持4列，但缩小间距 */
    .home-vip-plans-grid {
        gap: 12px;
        padding: 0 12px;
    }
}