/**
 * PsyLab Hero 组件样式
 * 全局统一 Hero 结构样式
 * 所有页面必须使用此标准结构
 */

/* ========== Hero Shell ========== */
.hero-shell {
    position: relative;
    background: var(--hero-gradient);
    color: var(--hero-text);
    border-radius: var(--hero-border-radius-top) var(--hero-border-radius-top) 0 0;
    padding: var(--hero-padding-desktop);
    margin-bottom: 30px;
}

.hero-shell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.95) 0%, rgba(52, 152, 219, 0.9) 100%);
    border-radius: var(--hero-border-radius-top) var(--hero-border-radius-top) 0 0;
    z-index: 0;
}

.hero-shell > * {
    position: relative;
    z-index: 1;
}

/* ========== Sticky 行为 ========== */
.hero-shell[data-hero-sticky="true"] {
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow-anchor: none; /* 防止收缩时浏览器滚动锚定导致闪烁 */
}

/* ========== Hero Sticky Bar（固定条） ========== */
/* 始终显示的部分，高度固定 */
.hero-sticky-bar {
    display: none; /* 默认隐藏，shrunk 状态显示 */
    align-items: center;
    justify-content: space-between;
    gap: var(--hero-gap-sm);
    min-height: 44px; /* 固定最小高度 */
}

/* 非 shrunk 状态下确保不占位 */
.hero-shell:not(.hero-shrunk) .hero-sticky-bar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hero-sticky-bar .hero-sticky-title {
    font-size: var(--hero-title-shrunk);
    font-weight: var(--hero-title-weight);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-sticky-bar .hero-sticky-title i {
    margin-right: 10px;
    opacity: 0.9;
}

.hero-sticky-bar .hero-sticky-actions {
    display: flex;
    align-items: center;
    gap: var(--hero-gap-sm);
    flex-shrink: 0;
}

.hero-sticky-bar .hero-sticky-actions .btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    min-width: auto;
    white-space: nowrap;
}

/* ========== Hero Expandable（可收缩内容） ========== */
/* 包含 meta/tags/subtitle 等可隐藏内容 */
.hero-expandable {
    max-height: 1000px; /* 足够容纳所有内容 */
    opacity: 1;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* 完整状态：显示原始内容，隐藏 sticky bar */
.hero-shell .hero-back {
    display: inline-flex;
}

.hero-shell .hero-meta,
.hero-shell .hero-tags,
.hero-shell .hero-subtitle,
.hero-shell .hero-actions {
    display: flex;
}

/* Shrunk 状态 */
.hero-shell.hero-shrunk {
    padding: 10px 30px;  /* 上下 10px, 左右 30px */
    background: rgba(44, 62, 80, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--hero-shrunk-shadow);
}

/* Shrunk 状态下隐藏全局导航容器，避免与 sticky bar 内容冲突 */
.hero-shell.hero-shrunk .platform-nav-container {
    display: none;
}

.hero-shell.hero-shrunk .hero-sticky-bar {
    display: flex; /* 显示固定条 */
}

.hero-shell.hero-shrunk .hero-expandable {
    max-height: 0;
    min-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}

.hero-shell.hero-shrunk .hero-back,
.hero-shell.hero-shrunk .hero-meta,
.hero-shell.hero-shrunk .hero-tags,
.hero-shell.hero-shrunk .hero-subtitle,
.hero-shell.hero-shrunk .hero-actions {
    display: none !important;
}

/* ========== Hero Back ========== */
.hero-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hero-text);
    text-decoration: none;
    font-size: 1rem;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    transition: background 0.2s ease;
    margin-bottom: var(--hero-gap);
    border: none;
    cursor: pointer;
}

.hero-back:hover {
    background: rgba(255, 255, 255, 0.25);
}

.hero-back i {
    font-size: 0.9rem;
}

/* ========== Hero Title ========== */
.hero-title {
    font-size: var(--hero-title-desktop);
    font-weight: var(--hero-title-weight);
    margin: 0 0 var(--hero-gap) 0;
    line-height: 1.3;
}

.hero-title i {
    margin-right: 10px;
    opacity: 0.9;
}

/* ========== Hero Subtitle ========== */
.hero-subtitle {
    font-size: var(--hero-subtitle-desktop);
    font-weight: var(--hero-subtitle-weight);
    color: var(--hero-text-muted);
    line-height: 1.5;
    margin: 0 0 var(--hero-gap-lg) 0;
    max-width: var(--hero-content-max-width);
}

/* ========== Hero Meta ========== */
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hero-gap-lg);
    margin-bottom: var(--hero-gap);
    font-size: var(--hero-meta-size);
    color: var(--hero-text-dim);
}

.hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hero-meta-item i {
    font-size: 0.9em;
    opacity: 0.8;
}

/* ========== Hero Tags ========== */
.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hero-gap-sm);
    margin-bottom: var(--hero-gap-lg);
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--tag-border-radius);
    font-size: 0.9rem;
    font-weight: var(--tag-font-weight);
}

.tag i {
    margin-right: 6px;
    font-size: 0.85em;
}

/* 标签语义色 */
.tag-primary {
    background: rgba(52, 152, 219, 0.15);
    color: var(--hero-text);
    border: 1px solid rgba(52, 152, 219, 0.4);
}

.tag-success {
    background: rgba(46, 204, 113, 0.15);
    color: var(--hero-text);
    border: 1px solid rgba(46, 204, 113, 0.4);
}

.tag-neutral {
    background: rgba(189, 195, 199, 0.15);
    color: var(--hero-text);
    border: 1px solid rgba(189, 195, 199, 0.4);
}

.tag-secondary {
    background: rgba(149, 165, 166, 0.15);
    color: var(--hero-text);
    border: 1px solid rgba(149, 165, 166, 0.4);
}

/* ========== Hero Actions ========== */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hero-gap);
    margin-top: var(--hero-gap-lg);
}

.hero-actions .btn {
    min-width: auto;
}

/* ========== Button 样式 ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--btn-border-radius);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    border: none;
    min-width: 120px;
    text-align: center;
}

.btn i {
    font-size: 1em;
}

/* 按钮语义色 */
.btn-success {
    background: linear-gradient(135deg, var(--btn-success) 0%, var(--btn-success-hover) 100%);
    color: white;
    box-shadow: 0 4px 12px var(--btn-success-shadow);
}

.btn-success:hover {
    background: linear-gradient(135deg, var(--btn-success-hover) 0%, #1e8449 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
}

.btn-primary {
    background: linear-gradient(135deg, var(--btn-primary) 0%, var(--btn-primary-hover) 100%);
    color: white;
    box-shadow: 0 4px 12px var(--btn-primary-shadow);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--btn-primary-hover) 0%, #1a5276 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--btn-secondary) 0%, var(--btn-secondary-hover) 100%);
    color: white;
    box-shadow: 0 4px 12px var(--btn-secondary-shadow);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--btn-secondary-hover) 0%, #5d6d7e 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(149, 165, 166, 0.4);
}

/* "复制到工作区" 按钮专用样式 - 深紫色系，与 hero 蓝色背景区分明显 */
.btn-copy {
    background: linear-gradient(135deg, var(--btn-copy) 0%, var(--btn-copy-hover) 100%);
    color: white;
    box-shadow: 0 4px 12px var(--btn-copy-shadow);
}

.btn-copy:hover {
    background: linear-gradient(135deg, var(--btn-copy-hover) 0%, #6c3483 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(142, 68, 173, 0.4);
}

.btn-neutral {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn-neutral:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    .hero-shell {
        padding: var(--hero-padding-mobile);
        margin-bottom: 20px;
    }

    .hero-title {
        font-size: var(--hero-title-mobile);
    }

    .hero-subtitle {
        font-size: var(--hero-subtitle-mobile);
    }

    .hero-meta {
        font-size: var(--hero-meta-size-mobile);
        gap: var(--hero-gap);
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-shell.hero-shrunk {
        padding: 8px 15px;
    }

    .hero-shell.hero-shrunk .hero-sticky-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .hero-shell.hero-shrunk .hero-sticky-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-shell.hero-shrunk .btn {
        padding: 5px 10px;
        font-size: 0.85rem;
    }
}

/* ========== 首页 Hero 变体 ========== */
/* 首页 hero 不启用 sticky，但结构上属于 hero 组件体系 */
.hero-shell--homepage {
    padding: var(--hero-padding-homepage);
    margin-bottom: 0;
}

/* 首页导航栏 */
.hero-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--hero-gap-lg);
    padding-bottom: var(--hero-gap);
    border-bottom: var(--hero-nav-border);
    position: relative;
    z-index: 2;
}

/* 首页 Logo */
.hero-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-logo i {
    font-size: var(--hero-logo-size);
    opacity: 0.95;
}

.hero-logo h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

/* 首页内容区 */
.hero-content {
    text-align: center;
    padding: var(--hero-gap-lg) 0;
}

/* 首页主标语 */
.hero-tagline {
    font-size: var(--hero-tagline-size);
    font-weight: 500;
    margin-bottom: var(--hero-gap);
    opacity: 0.95;
}

/* 首页副描述 */
.hero-description {
    font-size: var(--hero-description-size);
    max-width: var(--hero-content-max-width);
    margin: 0 auto var(--hero-gap) auto;
    opacity: 0.85;
    line-height: 1.6;
}

/* 首页提示信息 */
.hero-hint {
    background: var(--hero-hint-background);
    padding: 12px 20px;
    border-radius: 8px;
    display: inline-block;
    margin-top: var(--hero-gap);
}

.hero-hint p {
    font-size: 0.95rem;
    margin: 0;
    opacity: 0.9;
}

.hero-hint i {
    margin-right: 8px;
}

/* 首页响应式 */
@media (max-width: 768px) {
    .hero-shell--homepage {
        padding: var(--hero-padding-mobile);
    }

    .hero-nav {
        flex-direction: column;
        gap: var(--hero-gap);
        align-items: stretch;
    }

    .hero-logo {
        justify-content: center;
    }

    .hero-logo h1 {
        font-size: 1.5rem;
    }

    .hero-tagline {
        font-size: 1.5rem;
    }

    .hero-description {
        font-size: 1rem;
    }
}