/* ============================================================
 * 世系图鉴专用样式 (family_tree_book.css)
 * 复用 theme.css 的 CSS 变量,保持书卷风视觉连贯
 * 布局:纵向卡片流,世次从上到下,组内按父系聚簇
 * ============================================================ */

/* 页面容器 */
.book-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-md);
}

/* 顶部标题栏:左标题,右操作按钮 */
.book-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--line);
}

.book-header h1 {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--fs-title);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.book-header-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-shrink: 0;
}

/* 通用按钮:返回家族史 / 导出PDF */
.book-btn {
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid var(--ink-faint);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: var(--fs-body);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all 0.25s ease;
    min-height: 40px;
    white-space: nowrap;
}

.book-btn:hover {
    background: var(--paper-deep);
    border-color: var(--ink);
}

.book-btn.primary {
    background: var(--cinnabar);
    color: var(--paper);
    border-color: var(--cinnabar);
}

.book-btn.primary:hover {
    background: var(--cinnabar-deep);
    border-color: var(--cinnabar-deep);
}

/* ===== 世系卡片流主体 ===== */
.gen-flow {
    padding: var(--space-sm) 0 var(--space-lg);
}

/* 单个世次分区 */
.gen-section {
    margin-bottom: var(--space-md);  /* 世次之间大间隔 */
}
.gen-section:last-child {
    margin-bottom: 0;
}

/* 世次大标题:古铜金背景,可点击折叠/展开 */
.gen-title {
    background: var(--gold);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: var(--fs-sub);
    font-weight: 700;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: 0;  /* 折叠时无间距,展开时由 gen-content margin 控制 */
    letter-spacing: 0.05em;
    box-shadow: 0 2px 6px rgba(143, 111, 48, 0.25);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.gen-title:hover {
    background: var(--gold-deep);
}

/* 展开时标题底部圆角变直角,与下方内容衔接 */
.gen-section.expanded .gen-title {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin-bottom: 0;
}

/* 折叠箭头图标 */
.toggle-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* 无世次标题特殊色 */
.gen-title.zero-gen {
    background: var(--ink-faint);
}
.gen-title.zero-gen:hover {
    background: var(--ink-soft);
}

/* 该世内容容器:默认折叠(max-height:0),展开时 JS 设置实际高度 */
.gen-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: var(--paper-light);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border: 1px solid var(--line);
    border-top: none;
}

/* 展开时内容与标题衔接 */
.gen-section.expanded .gen-content {
    margin-bottom: var(--space-xl);
}

.gen-title-text {
    flex: 1;
}

.gen-title-count {
    background: rgba(255, 255, 255, 0.25);
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-caption);
    font-weight: 500;
}

/* 该世所有父系分组容器 */
.gen-groups {
    padding: var(--space-md) var(--space-md) var(--space-md) 0;
}

/* 单个父系分组:同父兄弟聚在一起 */
.father-group {
    margin-bottom: 30px;  /* 不同父系之间至少 50px 间隔 */
    padding-left: var(--space-md);
    border-left: 3px solid var(--line);  /* 左侧竖线标识同父关系 */
}
.father-group:last-child {
    margin-bottom: 0;
}

/* 父系标签:标记这组兄弟的父亲是谁 */
.father-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
    padding: var(--space-xs) var(--space-md);
    background: var(--paper-deep);
    border-radius: var(--radius-sm);
    font-size: var(--fs-caption);
    color: var(--ink-soft);
}

.father-label .fa-male {
    color: var(--jade);
    font-size: 14px;
}

.father-name {
    font-weight: 600;
    color: var(--ink);
}

.father-gen {
    color: var(--ink-faint);
    font-size: 11px;
}

.children-count {
    margin-left: auto;
    background: var(--gold);
    color: var(--paper);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
}

/* 同父兄弟卡片容器:PC 端 2 列,手机端 1 列 */
.cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm) var(--space-md);
}

/* 单个人员卡片 */
.person-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-sm) var(--space-md);
    background: var(--paper-light);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--ink);
    transition: all 0.2s ease;
    min-height: 44px;
}

.person-card:hover {
    background: var(--paper);
    border-color: var(--gold);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(74, 60, 40, 0.12);
}

/* 卡片头部:姓名 + 行第 */
.card-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* 人名 */
.p-name {
    font-family: var(--font-display);
    font-size: var(--fs-body-lg);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}

/* 行第(长子/次子等):书卷风小标签 */
.p-relation {
    font-size: 11px;
    color: var(--paper);
    background: var(--ink-soft);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    white-space: nowrap;
}

/* 卡片主体:生卒 + 配偶 + 常住地 */
.card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: var(--fs-caption);
    color: var(--ink-faint);
}

/* 日期行 */
.card-dates {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.date-item {
    white-space: nowrap;
}

/* 配偶信息 */
.card-spouse {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--cinnabar);
    font-size: var(--fs-caption);
}

.card-spouse .fa-heart {
    font-size: 10px;
}

/* 常住地 */
.card-residence {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--ink-faint);
    font-size: var(--fs-caption);
}

.card-residence .fa-map-marker-alt {
    font-size: 10px;
}

/* ===== 移动端适配:卡片单列 ===== */
@media (max-width: 768px) {
    .book-header {
        flex-wrap: wrap;
    }

    .book-header h1 {
        font-size: var(--fs-sub);
    }

    /* 手机端卡片单列,信息更清晰 */
    .cards {
        grid-template-columns: 1fr;
    }

    .gen-title {
        font-size: var(--fs-body-lg);
        padding: var(--space-sm) var(--space-md);
    }

    .father-group {
        padding-left: var(--space-sm);
    }

    .person-card {
        padding: var(--space-sm);
    }

    .p-name {
        font-size: var(--fs-body);
    }
}

/* ============================================================
 * 族人信息弹窗(书卷风)
 * ============================================================ */

/* 遮罩层 */
.person-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 26, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.person-modal-mask.show {
    opacity: 1;
    visibility: visible;
}

/* 弹窗主体 */
.person-modal {
    background: var(--paper-light);
    border: 1px solid var(--gold);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(74, 60, 40, 0.3);
    width: 90%;
    max-width: 720px;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.92);
    transition: transform 0.25s ease;
}
.person-modal-mask.show .person-modal {
    transform: scale(1);
}

/* 关闭按钮 */
.modal-close-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--paper-deep);
    color: var(--ink);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
}
.modal-close-btn:hover {
    background: var(--cinnabar);
    color: var(--paper);
}

/* 加载中 */
.modal-loading {
    padding: var(--space-xl);
    text-align: center;
    color: var(--ink-soft);
    font-size: var(--fs-body);
}

/* 弹窗内容:左右两栏 */
.modal-body {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
}

/* 左栏:照片 + 姓名 + 世次徽章 */
.modal-left {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
}

.modal-photo-box {
    width: 150px;
    height: 180px;
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-deep);
    color: var(--ink-faint);
}
.modal-photo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-name {
    font-family: var(--font-display);
    font-size: var(--fs-sub);
    color: var(--ink);
    margin: 0;
    font-weight: 700;
}

.modal-gen-badge {
    background: var(--gold);
    color: var(--paper);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-caption);
    font-family: var(--font-display);
    font-weight: 700;
}

/* 右栏:详细信息 */
.modal-right {
    flex: 1;
    min-width: 0;
}

.modal-section {
    margin-bottom: var(--space-md);
}
.modal-section:last-child {
    margin-bottom: 0;
}
.modal-section h3 {
    font-family: var(--font-display);
    font-size: var(--fs-body-lg);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* 信息行:标签 + 值 */
.modal-info-row {
    display: flex;
    margin-bottom: 6px;
    font-size: var(--fs-body);
    line-height: 1.6;
}
.modal-info-label {
    flex: 0 0 80px;
    color: var(--ink-faint);
    font-weight: 500;
}
.modal-info-value {
    flex: 1;
    color: var(--ink);
    word-break: break-all;
}

/* 配偶照片预览 */
.modal-photo-preview img {
    max-width: 150px;
    max-height: 180px;
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    object-fit: cover;
}

/* 弹窗移动端:左右栏改上下 */
@media (max-width: 600px) {
    .modal-body {
        flex-direction: column;
    }
    .modal-left {
        flex: none;
    }
}