/* theme-modern.css - 现代风格 (Modern Theme Definition) */

:root {
    /* --- 1. Color Palette --- */
    --bg-color: #FDFCF5;       
    --text-color: #1A1A1A;     
    --text-muted: #333;       
    
    --accent-red: #C8102E;     
    --cyan-grey: #2F4858;      
    
    --nav-bg: rgba(253, 252, 245, 0.95);
    --footer-bg: #1A252A;      

    /* Components */
    --card-bg: #ffffff;
    --border-color-light: rgba(0,0,0,0.05);
    
    /* Collection Page Overlays */
    --overlay-bg-main: rgba(47, 72, 88, 0.95); 
    --overlay-bg-accent: rgba(200, 16, 46, 0.95);
    --overlay-text: #ffffff;
    
    /* Button Hover States */
    --btn-hover-dark-red: #a00d25;
    --btn-hover-dark-cyan: #1e333e;

    /* --- 2. Typography --- */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', sans-serif;
    
    /* Specific Font Sizes (Previously in base) */
    --fs-lead: 1.05rem;
    --fs-p: 0.95rem;
    --fs-label: 0.85rem;
    --fs-logo: 1.4rem;
    --fs-welcome: 3.8rem; /* Home page big text */
    
    /* --- 3. Decorative --- */
    --br-md: 4px;      /* Card radius */
    --br-pill: 50px;   /* Button radius */
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.05);
    --shadow-hard: 0 15px 40px rgba(0,0,0,0.15);

    /* theme-modern.css :root */
    --overlay-font: var(--font-heading);
    --overlay-fs: 0.9rem;
    --overlay-ls: 1px;
    --overlay-fw: 600;

}

/* =========================================
   1. Typography & Global Visuals
   ========================================= */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
}

.serif-font { font-family: var(--font-heading); }

.lead-text {
    font-size: var(--fs-lead);
    font-weight: 300;
    color: var(--text-muted);
}

.lead-text p { font-size: var(--fs-p); }

.highlight {
    font-weight: 600;
    color: var(--cyan-grey);
}

.accent-text { color: var(--accent-red); }

.main-title {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.1;
}

.section-label {
    font-family: var(--font-body);
    color: var(--cyan-grey);
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-left-color: var(--accent-red); /* Visual */
}

/* Page Header Visuals */
.page-header-section {
    border-bottom-color: var(--border-color-light);
    /* 默认无背景颜色 (透明) -> 适用于 Collection */
}

/* ★★★ Gallery 专用：直接在这里写死颜色，不污染变量 ★★★ */
.page-header-colored {
    background-color: #f8f9fa; 
}

/* =========================================
   2. Animations (Moved from base)
   ========================================= */
/* Modern 风格使用平滑的上浮和淡入动画 */
.anim-element { opacity: 0; transition: all cubic-bezier(0.2, 1, 0.3, 1); }
.anim-up { transform: translateY(60px); transition-duration: 2.5s; }
.anim-left { transform: translateX(-100px); transition-duration: 1.8s; }
.anim-element.is-visible { opacity: 1; transform: translate(0, 0); }

.welcome-msg {
    font-family: var(--font-heading); 
    font-size: var(--fs-welcome);
    line-height: 1.1;
    color: var(--cyan-grey);
    font-weight: 600; 
    font-style: italic; 
    letter-spacing: 0.5px; 
}

/* =========================================
   3. Navbar Visuals
   ========================================= */
.navbar {
    background-color: var(--nav-bg);
    border-bottom-color: rgba(0, 0, 0, 0.03); 
}

.logo-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--fs-logo);
    letter-spacing: -0.5px;
    color: var(--text-color);
}

.nav-link {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-color);
}

.nav-link:hover, .nav-link.active {
    color: var(--cyan-grey) !important; 
}

.dropdown-menu {
    background-color: var(--bg-color);
    border-color: var(--border-color-light);
    border-radius: var(--br-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.dropdown-item {
    color: #555;
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.dropdown-item:hover {
    color: var(--accent-red);
}

.btn-style-toggle {
    border-color: var(--text-color);
    color: var(--text-color);
    font-size: 0.75rem;
    letter-spacing: 1px;
}
.btn-style-toggle:hover {
    background-color: var(--cyan-grey);
    border-color: var(--cyan-grey);
    color: #fff;
}

/* =========================================
   4. Buttons & Components Visuals
   ========================================= */
/* HOME Page "BROWSE COLLECTIONS" Button */
.btn-browse-custom {
    font-family: var(--font-body); 
    font-style: normal; 
    font-weight: 500;   
    font-size: 0.9rem;  
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: #fff;
    /* Modern 风格特有的半透明磨砂效果 */
    background-color: rgba(47, 72, 88, 0.9); 
    border-color: rgba(255,255,255,0.4); 
    border-radius: var(--br-pill); 
    backdrop-filter: blur(4px);
}

.btn-browse-custom:hover {
    background-color: var(--accent-red);
    border-color: var(--accent-red);
    transform: translateY(-2px);
}

/* Primary Button */
.btn-custom-primary {
    background-color: var(--cyan-grey);
    color: #fff;
    border-color: var(--cyan-grey);
    border-radius: var(--br-pill);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
}

.btn-custom-primary:hover {
    background-color: var(--btn-hover-dark-cyan);
    color: #fff;
    box-shadow: 0 4px 10px rgba(47, 72, 88, 0.3);
}

/* Outline Button */
.btn-custom-outline {
    background-color: transparent;
    color: var(--cyan-grey);
    border-color: var(--cyan-grey);
    border-radius: var(--br-pill);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
}

.btn-custom-outline:hover {
    background-color: var(--bg-color);
    border-color: var(--accent-red);
    color: var(--accent-red);
}

/* Back to Top */
#btn-back-to-top {
    background-color: var(--cyan-grey); 
    color: #fff;
    border-radius: 50%;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
}
#btn-back-to-top:hover {
    background-color: var(--accent-red); 
    transform: translateY(-5px); 
}

/* =========================================
   5. Cards & Gallery Visuals
   ========================================= */
.image-frame {
    border-radius: var(--br-md);
    box-shadow: var(--shadow-hard);
}

.hover-overlay {
    background: rgba(0, 0, 0, 0.2);
}

.image-frame:hover .hover-overlay { opacity: 1; }
.image-frame:hover .carousel-item img { transform: scale(1.03); }
.image-frame:hover .carousel-control-prev, 
.image-frame:hover .carousel-control-next { opacity: 0.8; }

/* Collection Page Items */
.gallery-item {
    border-radius: var(--br-md);
    background: var(--card-bg);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

.gallery-item:hover img { transform: scale(1.03); }

/* --- Overlay Colors (Main Design) --- */
.item-overlay {
    background: var(--overlay-bg-main); 
    color: var(--overlay-text);
}
.item-overlay h5 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-style: italic;
}

/* --- View More Button --- */
.view-more-btn {
    background-color: var(--accent-red) !important;
    border-color: var(--accent-red) !important;
    color: white !important;
    border-radius: var(--br-pill);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.view-more-btn:hover {
    background-color: var(--btn-hover-dark-red) !important;
    border-color: var(--btn-hover-dark-red) !important;
}

/* --- Checkerboard Rhythm (Visual Logic) --- */
.gallery-column:nth-child(odd) .gallery-item:nth-child(even) .item-overlay,
.gallery-column:nth-child(even) .gallery-item:nth-child(odd) .item-overlay {
    background: var(--overlay-bg-accent); 
}

.gallery-column:nth-child(odd) .gallery-item:nth-child(even) .item-overlay .view-more-btn,
.gallery-column:nth-child(even) .gallery-item:nth-child(odd) .item-overlay .view-more-btn {
    background-color: var(--cyan-grey) !important;
    border-color: var(--cyan-grey) !important;
}

.gallery-column:nth-child(odd) .gallery-item:nth-child(even) .item-overlay .view-more-btn:hover,
.gallery-column:nth-child(even) .gallery-item:nth-child(odd) .item-overlay .view-more-btn:hover {
    background-color: var(--btn-hover-dark-cyan) !important;
    border-color: var(--btn-hover-dark-cyan) !important;
}

/* =========================================
   6. Map & Detail Page Visuals
   ========================================= */
.map-wrapper {
    background-color: var(--card-bg);
    border-color: var(--border-color-light);
    border-radius: var(--br-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.room-outline { 
    fill: none; /* 关键修复：去掉默认的黑色填充 */
    stroke: var(--cyan-grey); 
    stroke-width: 1.5; 
    opacity: 0.3; 
    transition: all var(--trans-normal); 
}

/* 也可以顺便给 path-line 加上，防止意外 */
.path-line { 
    fill: none;
    stroke: var(--cyan-grey); 
    stroke-width: 1; 
    stroke-dasharray: 5, 5; 
    opacity: 0.2; 
}
.path-line { stroke: var(--cyan-grey); stroke-width: 1; stroke-dasharray: 5, 5; opacity: 0.2; }
.room-text { font-family: var(--font-body); font-size: 14px; fill: var(--cyan-grey); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }

.map-point { stroke: #fff; stroke-width: 2px; }
.point-room1 { fill: var(--cyan-grey); }
.point-room2 { fill: #8D6E63; }
.point-room3 { fill: var(--accent-red); }

.map-point:hover { r: 10; opacity: 0.8; }
.map-point.active { r: 14; stroke: var(--text-color); stroke-width: 3px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }

.info-panel { border-left-color: var(--border-color-light); }
.info-category { font-family: var(--font-body); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: var(--cyan-grey); }
.info-category::before { background: var(--accent-red); }
.info-title { font-family: var(--font-heading); font-size: 2.2rem; line-height: 1.1; }
.info-desc { font-size: 1rem; line-height: 1.6; color: #444; font-weight: 300; }

.info-image-wrapper {
    border-radius: var(--br-md);
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Filter Menu */
.narrative-toggle { font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; color: var(--cyan-grey); text-transform: uppercase; letter-spacing: 1px; }
.narrative-toggle::after { content: '▾'; color: var(--accent-red); font-size: 1.2em; line-height: 0; margin-top: -2px; }
.narrative-toggle:hover { color: var(--accent-red); }

.filter-menu { box-shadow: var(--shadow-hard); border-radius: 0; }
.filter-header { font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #adb5bd; }
.filter-item { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--cyan-grey); }
.btn-view-all { font-size: 0.8rem; color: #999; text-transform: uppercase; letter-spacing: 1px; }
.btn-view-all:hover { color: var(--cyan-grey); border-bottom-color: var(--accent-red); }
.filter-label { font-family: var(--font-heading); font-style: italic; color: #888; font-size: 0.95rem; margin-right: 10px; }

/* Detail Page */
.gallery-card {
    border-radius: var(--br-md);
    box-shadow: var(--shadow-soft);
    background-color: var(--card-bg);
}

.gallery-image-frame {
    background-color: var(--card-bg);
    border-color: var(--border-color-light);
    border-radius: var(--br-md);
}

.table th {
    font-weight: 600;
    color: var(--cyan-grey);
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.table td {
    font-family: var(--font-body);
    font-weight: 300;
    color: #555;
}
.table a { color: var(--accent-red); font-weight: 500; text-decoration: none; }
.table a:hover { text-decoration: underline; }

.description-section h4 {
    font-family: var(--font-heading);
    color: var(--cyan-grey);
}

/* Nav Buttons */
.gallery-nav-btn {
    background-color: var(--cyan-grey);
    border-color: var(--cyan-grey);
    color: #fff;
    border-radius: var(--br-pill);
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.gallery-nav-btn:hover {
    background-color: var(--accent-red);
    border-color: var(--accent-red);
    color: #fff;
    transform: translateY(-2px);
}

.gallery-counter {
    font-family: var(--font-body);
    letter-spacing: 2px;
    color: var(--cyan-grey);
    font-size: 0.8rem;
    font-weight: 600;
}


/* =========================================
   7. Footer Visuals
   ========================================= */
.site-footer {
    background-color: var(--footer-bg); 
    color: #fff;
    border-top-color: rgba(255,255,255,0.05);
}
.footer-logo img { opacity: 0.95; }
.footer-text p { opacity: 0.85; }
.footer-text .small { opacity: 0.5; }

/* =========================================
   8. Utility Visuals (Fonts & Colors)
   ========================================= */
.ls-1 { letter-spacing: 1px; }
.ls-2 { letter-spacing: 2px; }
.fs-07 { font-size: 0.7rem; }
.fs-075 { font-size: 0.75rem; }
.btn-xs-custom { font-size: 0.75rem; padding: 0 0.5rem; }
.bg-light-red { background-color: #fff5f5; }

/* Responsive Adjustments Visuals */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: var(--bg-color);
        border-radius: var(--br-md);
        box-shadow: var(--shadow-soft);
    }
    .info-panel { border-top-color: var(--border-color-light); }
}

/* theme-modern.css - 现代风格定义 (Visuals Only) */

/* ... (保留原有的 Section 1-7 内容) ... */

/* =========================================
   8. About Us Visuals
   ========================================= */

.member-card {
    background-color: var(--card-bg);
    border-radius: var(--br-md); 
    box-shadow: var(--shadow-soft); 
    transition: transform var(--trans-normal), box-shadow var(--trans-normal);
}

.member-card:hover {
    transform: translateY(-5px); 
    box-shadow: var(--shadow-hard);
}

.member-card img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.member-card:hover img {
    transform: scale(1.05); /* 图片悬停放大效果 */
}

.member-info h3 {
    font-family: var(--font-heading); 
    font-size: 1.35rem; 
    font-weight: 600;
    color: var(--cyan-grey); 
    letter-spacing: -0.5px; 
}

/* University Name */
.member-info .university {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--accent-red); 
    font-weight: 600;
    text-transform: uppercase; 
    letter-spacing: 1px;
    margin-bottom: 4px;
}

/* Role (Responsible for the project) - 低调处理 */
.member-info .role {
    font-family: var(--font-body);
    font-size: 0.7rem; /* 小字号 */
    color: #999;       /* 浅灰色 */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Links (Email & Github) */
.member-info .links a {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--cyan-grey); 
    text-decoration: none;   
    border-bottom: 1px solid rgba(0,0,0,0.2); /* 细下划线 */
    width: fit-content;
    transition: all var(--trans-fast);
}

.member-info .links a:hover {
    color: var(--accent-red); 
    border-bottom-color: var(--accent-red);
}

/* =========================================
   9. Disclaimer Visuals
   ========================================= */

.source-list li {
    color: var(--text-color);
}

.source-link {
    font-family: var(--font-heading); 
    font-size: 1.05rem; 
    font-weight: 400;   
    color: var(--accent-red); 
    text-decoration-color: rgba(200, 16, 46, 0.4); 
    text-underline-offset: 3px;
    transition: all var(--trans-fast);
}

.source-link:hover {
    color: var(--cyan-grey); 
    text-decoration-color: var(--cyan-grey);
}

/* ★★★ 新增：版权声明视觉 ★★★ */
.copyright-notice {
    border-top-color: var(--border-color-light); /* 浅色分割线 */
    color: var(--text-muted); /* 灰色文字 */
    font-size: 0.85rem;       /* 小号字体 */
    line-height: 1.6;
}

/* =========================================
   10. Documentation Visuals
   ========================================= */

/* 标题样式 */
.doc-heading {
    font-family: var(--font-heading);
    color: var(--cyan-grey);
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}

.doc-subheading {
    font-family: var(--font-heading);
    color: var(--text-color);
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

/* 侧边栏链接样式 */
.doc-nav-link {
    color: var(--text-muted);
    font-family: var(--font-body);
    font-weight: 500;
    transition: all var(--trans-fast);
}

.doc-nav-sublink {
    color: #888;
    transition: all var(--trans-fast);
}

/* 悬停状态 */
.doc-nav-link:hover, .doc-nav-sublink:hover {
    color: var(--accent-red);
}

/* 激活状态 (Bootstrap Scrollspy 会自动添加 .active 类) */
.nav-link.active {
    color: var(--cyan-grey) !important;
    font-weight: 700;
    border-left-color: var(--accent-red); /* 左侧出现红线 */
}

/* 分割线颜色 */
.doc-divider {
    border-top-color: var(--cyan-grey);
}

/* =========================================
   1. Global Layout & Structure (微调)
   ========================================= */
.lead-text {
    /* ★★★ 统一调整：增加行高，提升阅读舒适度 ★★★ */
    text-align: justify;
    line-height: 1.8; 
    margin-bottom: 1.5rem;
}

.lead-text p {
    margin-bottom: 1rem;
}

/* Narratives 页面头部描述专用容器 (继承 lead-text 但可微调) */
.page-header-section .lead-text {
    max-width: 800px;
    margin: 0 auto;
    text-align: center; /* 头部通常居中 */
}



/* =========================================
   11. Narratives Visuals
   ========================================= */

/* 时间轴颜色 */
.timeline-container {
    border-left-color: var(--accent-red); /* 红色轴线 */
}

/* 时间轴节点 */
.timeline-item::before {
    background-color: var(--accent-red); /* 红色圆点 */
    box-shadow: 0 0 0 4px var(--bg-color); /* 白色外圈 */
}

/* 时间轴文字 (The Rule...) */
.timeline-year {
    font-family: var(--font-heading); 
    font-weight: 700;
    font-size: 1.5rem; 
    color: var(--cyan-grey);
    letter-spacing: -0.5px;
}

/* Section II 小标题 (The Identity...) */
.theme-subtitle {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
}

/* 小标题下划线 */
.theme-subtitle::after {
    background-color: var(--accent-red);
}

/* 图片遮罩条背景 */
.overlay-bar {
    background: rgba(47, 72, 88, 0.95); 
    backdrop-filter: blur(4px); 
    transition: bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 遮罩文字样式 */
.overlay-text{
  color: var(--overlay-text, #fff) !important;
  font-family: var(--overlay-font, var(--font-heading));
}

/* 轮播箭头样式 */
.card-img-wrapper .carousel-control-prev-icon,
.card-img-wrapper .carousel-control-next-icon {
    background-color: rgba(0,0,0,0.5); 
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    background-size: 50%;
}

.card-img-wrapper .carousel-control-prev,
.card-img-wrapper .carousel-control-next {
    transition: opacity var(--trans-normal);
}