/**
 * Guide Detail Page Styles
 * 安装指南详情页专用样式
 * 
 * 包含：
 * - 页面 Header（紧凑版）
 * - 安装步骤容器（窄版布局）
 * - 步骤变体 Tab UI
 * - 热点标注（8 个方向）
 * - Pulse 动画
 */

/* ==========================================================================
   0. Page Header（页面标题 - 紧凑版）
   ========================================================================== */
.guide-header {
    padding: var(--spacing-lg) 0 var(--spacing-md);
    background: var(--color-bg-secondary);
}

.guide-title {
    font-size: 2rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.guide-subtitle {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ==========================================================================
   0.5 Guide Container（安装指南专用容器 - 窄版）
   限制最大宽度，确保步骤内容可以一屏显示
   ========================================================================== */
.guide-container {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 var(--spacing-md);
}

/* ==========================================================================
   1. Guide Step Container（安装步骤容器）
   ========================================================================== */
.guide-step {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    margin-top: 40px;
}

.step-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.step-header h3 {
    margin: 0;
    font-size: 1.125rem;
}

.step-description {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-xs);
    font-size: 0.9375rem;
}

.step-tip-icon,
.step-warning-icon {
    margin-right: var(--spacing-xs);
}

/* ==========================================================================
   1.5. Step Variants（步骤变体 Tab UI）
   用于同一步骤的多种安装方式切换（如：水平安装 vs 悬吊安装）
   ========================================================================== */
.step-variants {
    margin-top: var(--spacing-xs);
}

/* 变体选择器容器 */
.variant-selector {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.variant-selector-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

/* Tab 按钮组 */
.variant-tabs {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.variant-tab {
    padding: 8px 16px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.variant-tab:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

.variant-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* 变体内容面板 */
.variant-panel {
    display: none;
}

.variant-panel.active {
    display: block;
    animation: variant-fade-in 0.3s ease;
}

@keyframes variant-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   2. Step Image Container（步骤图片容器）
   限制图片区域高度，确保步骤一屏可见
   ========================================================================== */
.step-image-container {
    position: relative;
    margin: var(--spacing-sm) auto 0;
    /* 允许热点标签溢出显示 */
    overflow: visible;
    /* 限制高度 */
    max-height: 45vh;
    /* 让图片容器内容居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 支持 aspect-ratio 的浏览器使用原生属性 */
@supports (aspect-ratio: 16 / 9) {
    .step-image-container {
        aspect-ratio: 16 / 9;
        padding-bottom: 0;
        max-height: 45vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.step-image-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 允许热点标签溢出 */
    overflow: visible;
}

.step-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    /* 图片自身设置边框和圆角 */
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-secondary);
}

/* ==========================================================================
   3. Hotspot Anchor（热点锚点 - 负责定位）
   ========================================================================== */
.hotspot-anchor {
    position: absolute;
    z-index: 10;
    /* 使用 transform 使热点圆点中心对齐到坐标点 */
    transform: translate(-50%, -50%);
}

/* ==========================================================================
   4. Hotspot Dot（热点圆点）
   ========================================================================== */
.hotspot-dot {
    display: block;
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.3), var(--shadow-md);
    animation: hotspot-pulse 2s infinite;
}

@keyframes hotspot-pulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.3), var(--shadow-md);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(0, 113, 227, 0.15), var(--shadow-md);
        transform: scale(1.1);
    }
}

/* ==========================================================================
   5. Hotspot Label（热点标签 - 负责展开方向）
   ========================================================================== */
.hotspot-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* 引导线 */
.hotspot-line {
    width: 30px;
    height: 2px;
    background: var(--color-primary);
    flex-shrink: 0;
}

/* 热点文字 */
.hotspot-text {
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   6. Direction Support（8 个方向支持 - 拼音缩写）
   方向命名：z=左, y=右, s=上, x=下
   45度组合：zs/sz=左上, ys/sy=右上, zx/xz=左下, yx/xy=右下
   ========================================================================== */

/* 向右展开（默认）→ y=右 */
.hotspot-label,
.hotspot-label.y {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 4px;
    flex-direction: row;
}

/* 向左展开 ← z=左 */
.hotspot-label.z {
    right: 100%;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 4px;
    flex-direction: row-reverse;
}

/* 向下展开 ↓ x=下 */
.hotspot-label.x {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    flex-direction: column;
}
.hotspot-label.x .hotspot-line {
    width: 2px;
    height: 30px;
}

/* 向上展开 ↑ s=上 */
.hotspot-label.s {
    bottom: 100%;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    flex-direction: column-reverse;
}
.hotspot-label.s .hotspot-line {
    width: 2px;
    height: 30px;
}

/* 右上展开 ↗ ys/sy=右上 */
.hotspot-label.ys,
.hotspot-label.sy {
    left: 100%;
    bottom: 100%;
    top: auto;
    transform: none;
    margin-left: 4px;
    margin-bottom: -4px;
    flex-direction: row;
}
.hotspot-label.ys .hotspot-line,
.hotspot-label.sy .hotspot-line {
    width: 24px;
    height: 2px;
    transform: rotate(-30deg);
    transform-origin: left center;
}

/* 右下展开 ↘ yx/xy=右下 */
.hotspot-label.yx,
.hotspot-label.xy {
    left: 100%;
    top: 100%;
    transform: none;
    margin-left: 4px;
    margin-top: -4px;
    flex-direction: row;
}
.hotspot-label.yx .hotspot-line,
.hotspot-label.xy .hotspot-line {
    width: 24px;
    height: 2px;
    transform: rotate(30deg);
    transform-origin: left center;
}

/* 左上展开 ↖ zs/sz=左上 */
.hotspot-label.zs,
.hotspot-label.sz {
    right: 100%;
    left: auto;
    bottom: 100%;
    top: auto;
    transform: none;
    margin-right: 4px;
    margin-bottom: -4px;
    flex-direction: row-reverse;
}
.hotspot-label.zs .hotspot-line,
.hotspot-label.sz .hotspot-line {
    width: 24px;
    height: 2px;
    transform: rotate(30deg);
    transform-origin: right center;
}

/* 左下展开 ↙ zx/xz=左下 */
.hotspot-label.zx,
.hotspot-label.xz {
    right: 100%;
    left: auto;
    top: 100%;
    transform: none;
    margin-right: 4px;
    margin-top: -4px;
    flex-direction: row-reverse;
}
.hotspot-label.zx .hotspot-line,
.hotspot-label.xz .hotspot-line {
    width: 24px;
    height: 2px;
    transform: rotate(-30deg);
    transform-origin: right center;
}

/* ==========================================================================
   7. Animation Delay（动画延迟）
   ========================================================================== */
.hotspot-anchor:nth-child(2) .hotspot-dot { animation-delay: 0.2s; }
.hotspot-anchor:nth-child(3) .hotspot-dot { animation-delay: 0.4s; }
.hotspot-anchor:nth-child(4) .hotspot-dot { animation-delay: 0.6s; }
.hotspot-anchor:nth-child(5) .hotspot-dot { animation-delay: 0.8s; }

/* ==========================================================================
   8. Responsive（响应式）
   ========================================================================== */
@media (max-width: 768px) {
    .guide-step {
        padding: var(--spacing-md);
    }
    
    .step-header h3 {
        font-size: 1.125rem;
    }
    
    .hotspot-dot {
        width: 12px;
        height: 12px;
    }
    
    .hotspot-line {
        width: 15px;
    }
    
    .hotspot-text {
        font-size: 10px;
        padding: 4px 8px;
        /* 保持单行显示 */
        white-space: nowrap;
    }
    
    .hotspot-label {
        gap: 3px;
    }
    
    /* 斜向引导线缩短 */
    .hotspot-label.ys .hotspot-line,
    .hotspot-label.sy .hotspot-line,
    .hotspot-label.yx .hotspot-line,
    .hotspot-label.xy .hotspot-line,
    .hotspot-label.zs .hotspot-line,
    .hotspot-label.sz .hotspot-line,
    .hotspot-label.zx .hotspot-line,
    .hotspot-label.xz .hotspot-line {
        width: 12px;
    }
    
    /* 垂直方向引导线缩短 */
    .hotspot-label.s .hotspot-line,
    .hotspot-label.x .hotspot-line {
        height: 15px;
    }
    
    /* 变体选择器响应式 */
    .variant-tabs {
        width: 100%;
    }
    
    .variant-tab {
        flex: 1;
        text-align: center;
        padding: 10px 12px;
    }
}