/* ============================================
   css/diaochan.css
   Mucha Exhibition v7.1.17 OSS (v6 起源 + v7.1.x 暗色/优化增量)
   ============================================ */

/* ===================== VI. Cross-Cultural Translation (placeholder) ===================== */
/* 馥梦：承接 winter 末尾的米色，平滑渐入深红紫主题，再渐出到 similar 的米黄 */
/* 关键：顶部和底部都做渐变衔接，避免与上下章节硬切 */
/* 渐变节奏：0-20% 米色保持（承接 winter）→ 20-50% 渐入深红紫 → 50-65% 主体深暗红紫 → 65-100% 缓慢渐出到 similar 米色 */
.diaochan{position:relative;padding:120px 6% 180px;overflow:hidden;z-index:1;
  background:linear-gradient(180deg,
    #E8E0D0 0%,      /* 承接 winter 末尾的米色 */
    #E8E0D0 20%,     /* 保持米色，延长渐入距离（视觉上有呼吸感） */
    var(--winter) 35%,     /* 浅蓝过渡（呼应 winter 冷色） */
    #6B89A8 45%,
    #2A0A1A 55%,     /* 馥梦主色调深红紫 */
    #1A0510 65%,     /* 主体深暗红紫（v7.2 风格） */
    #2A0A1A 72%,     /* 开始缓出 */
    #4A1A2A 80%,     /* 暗玫红 */
    #6B3848 86%,
    #8B5A5C 91%,
    #B8888A 94%,
    #D4B89C 97%,
    #F4ECD8 100%     /* 衔接 similar 米黄 */
  );
  color: var(--text-light);
}
.diaochan::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0.15;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='none' stroke='%23F4C8DC' stroke-width='0.5'><circle cx='100' cy='100' r='80'/><circle cx='100' cy='100' r='60'/><circle cx='100' cy='100' r='40'/><circle cx='100' cy='100' r='20'/><path d='M100,20 L100,180 M20,100 L180,100'/></g></svg>");
  background-size:300px;background-position:center;animation:roseRotate 60s linear infinite;
}
@keyframes roseRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* 顶部旋转玫瑰 */
.diaochan-rosette{width:160px;height:160px;margin:0 auto 40px;filter:drop-shadow(0 0 20px rgba(244,200,220,0.6));
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><radialGradient id='dr'><stop offset='0%25' stop-color='%23F4C8DC'/><stop offset='50%25' stop-color='%23C97B84'/><stop offset='100%25' stop-color='%238B2848'/></radialGradient></defs><circle cx='50' cy='50' r='8' fill='url(%23dr)'/><path d='M50,10 Q60,30 50,48 Q40,30 50,10' fill='url(%23dr)'/><path d='M50,90 Q60,70 50,52 Q40,70 50,90' fill='url(%23dr)'/><path d='M10,50 Q30,40 48,50 Q30,60 10,50' fill='url(%23dr)'/><path d='M90,50 Q70,40 52,50 Q70,60 90,50' fill='url(%23dr)'/><path d='M22,22 Q40,40 50,50 Q40,40 22,22' fill='url(%23dr)' opacity='0.8'/><path d='M78,78 Q60,60 50,50 Q60,60 78,78' fill='url(%23dr)' opacity='0.8'/><path d='M22,78 Q40,60 50,50 Q40,60 22,78' fill='url(%23dr)' opacity='0.8'/><path d='M78,22 Q60,40 50,50 Q60,40 78,22' fill='url(%23dr)' opacity='0.8'/></svg>");
  background-size:contain;background-repeat:no-repeat;animation:roseFloat 5s ease-in-out infinite;
  position:relative;z-index:1;
}
@keyframes roseFloat{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* 中央 v7.2 风格的标题 */
.diaochan-num{font-family:'Cinzel Decorative',serif;font-size:clamp(60px,8vw,100px);font-weight:900;letter-spacing:0.1em;margin:0 0 16px;color:#F4C8DC;opacity:0.4;line-height:1;position:relative;z-index:1;text-align:center}
.diaochan-title-v72{font-family:'Cinzel Decorative',serif;font-size:clamp(40px,5vw,64px);font-weight:700;letter-spacing:0.2em;margin:0 0 8px;color:#F4C8DC;text-align:center;position:relative;z-index:1;text-shadow:0 0 20px rgba(244,200,220,0.4)}
.diaochan-title-cn-v72{font-family:'Noto Serif SC',serif;font-size:clamp(20px,2.5vw,32px);font-weight:700;letter-spacing:0.4em;margin:0 0 12px;color:#F4C8DC;text-align:center;position:relative;z-index:1}
.diaochan-tagline-v72{font-family:'Cormorant Garamond',serif;font-size:18px;font-style:italic;color:var(--gold-light);letter-spacing:0.3em;margin:0 0 40px;text-align:center;position:relative;z-index:1}
.diaochan-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;color:var(--gold-pale)}
.diaochan-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:start;margin-top:60px}
.diaochan-img{position:relative;padding:20px;border:2px solid var(--gold-light);
  background:linear-gradient(135deg,rgba(212,175,55,0.1),rgba(var(--gold-deep-rgb), 0.05));box-shadow:0 30px 80px rgba(0,0,0,0.5)}
.diaochan-img::before{content:'';position:absolute;inset:12px;border:1px solid rgba(212,175,55,0.5);pointer-events:none}
.diaochan-img img{width:100%;height:auto;display:block}
.diaochan-video{position:relative;margin-top:30px;padding:20px;border:2px solid var(--gold-light);
  background:linear-gradient(135deg,rgba(212,175,55,0.05),rgba(var(--gold-deep-rgb), 0.02));box-shadow:0 30px 80px rgba(0,0,0,0.5)}
.diaochan-video::before{content:'';position:absolute;inset:12px;border:1px solid rgba(212,175,55,0.5);pointer-events:none;z-index:1}
.diaochan-video video{width:100%;height:auto;display:block;box-shadow:0 10px 30px rgba(0,0,0,0.4)}
.diaochan-video .video-caption{font-family:'Cormorant Garamond',serif;font-size:14px;letter-spacing:0.2em;
  color:var(--gold-light);text-align:center;margin:16px 0 0;font-style:italic}
/* v7.1.15: VI section h2 改实色 #B8860B 深古金 + 鎏金描边 + 双层 drop-shadow
   旧版 background-clip:text 渐变在 .diaochan 中部 #6B89A8 浅蓝背景上 #FFD700 金色端对比度 4.4:1 勉强
   实色 + drop-shadow 在所有背景下（米色顶部 / 浅蓝中部 / 深红紫主体）都看得清 */
.diaochan-text h2{font-family:'Cinzel Decorative',serif;font-size:clamp(40px,5vw,60px);font-weight:900;letter-spacing:0.15em;
  color:#B8860B;margin:0;
  -webkit-text-stroke:0.5px #D4AF37;
  filter:drop-shadow(0 0 6px rgba(255,215,0,0.5)) drop-shadow(0 2px 4px rgba(0,0,0,0.3))}
/* v7.1.15: .diaochan-cn 白天用 #B8860B 深古金 + font-weight 700 + text-shadow 鎏金光晕
   v6 源包 var(--gold-pale) #F4E4BC 浅米色字 + .diaochan 顶部米色背景 = 几乎看不见 */
.diaochan-text .diaochan-cn{font-size:clamp(20px,2.5vw,32px);font-weight:700;letter-spacing:0.3em;margin:12px 0 30px;color:#B8860B;text-shadow:0 0 8px rgba(255,215,0,0.4)}
/* v7.1.15: .diaochan-text p 白天用 #2A1810 深棕 + font-weight 500 + drop-shadow 暖光晕
   在 .diaochan 中部 #6B89A8 浅蓝 → #2A0A1A 深红紫 渐变背景上始终可读 */
.diaochan-text p{font-size:15px;line-height:2.2;color:#2A1810;font-weight:500;opacity:0.95;margin-bottom:16px;text-shadow:0 0 4px rgba(244,236,216,0.4)}
.diaochan-features{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px}
/* v7.1.15: feat 卡背景加强（rgba 0.05 → 0.18）+ 边框加粗（1px → 1.5px）+ 鎏金深色
   让 feat 卡在 .diaochan 渐变背景上有明确"卡片"感 */
.diaochan-feat{padding:22px;border:1.5px solid rgba(184,134,11,0.6);background:rgba(232,220,192,0.18);box-shadow:0 4px 16px rgba(0,0,0,0.15);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
/* v7.1.15: feat h4 用深古金 #B8860B + font-weight:700（v6 源包用 #FFD700 金 + 浅色背景对比度差）
   用户原话"4 个 feat 卡标题看不清：鎏金头冠/牡丹元素/飘逸裙摆/藤蔓装饰" */
.diaochan-feat h4{font-family:'Cinzel Decorative',serif;font-size:15px;letter-spacing:0.3em;color:#B8860B;font-weight:700;margin:0 0 8px;text-shadow:0 0 4px rgba(255,215,0,0.2)}
/* v7.1.15: feat p 白天用 #2A1810 深棕 + font-weight 500（v6 var(--gold-pale) 浅米色看不清） */
.diaochan-feat p{font-size:13px;line-height:1.8;margin:0;color:#2A1810;font-weight:500;opacity:0.9;text-shadow:0 0 3px rgba(244,236,216,0.4)}

/* ===================== 唤灵魅影系列 · 9.png 三段展示 ===================== */
.diaochan-series{
  margin:60px auto 0;
  max-width:1100px;
  text-align:center;
}
.diaochan-series-label{
  font-family:'Cinzel Decorative',serif;
  font-size:13px;letter-spacing:0.4em;
  color:var(--gold-bright);opacity:0.9;
  margin:0 0 28px;
  text-transform:uppercase;
}
.diaochan-series-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:24px;
}
.diaochan-series-item{
  margin:0;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(212,175,55,0.35);
  background:rgba(20,10,15,0.4);
  transition:transform 0.4s,box-shadow 0.4s;
}
.diaochan-series-item:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(var(--gold-rgb), 0.25);
  border-color:rgba(var(--gold-rgb), 0.7);
}
.diaochan-series-item img{
  width:100%;
  height:auto;
  display:block;
  cursor:pointer;
}
.diaochan-series-item figcaption{
  font-family:'Cinzel Decorative',serif;
  font-size:13px;letter-spacing:0.2em;
  color:var(--gold-bright);
  padding:14px 8px;
  background:rgba(0,0,0,0.4);
  margin:0;
}
.diaochan-series-caption{
  font-family:'Cormorant Garamond',serif;
  font-size:14px;line-height:1.9;
  color:var(--gold-pale);opacity:0.8;
  font-style:italic;
  max-width:800px;margin:0 auto;
  padding:0 20px;
}
@media (max-width:768px){
  .diaochan-series-grid{grid-template-columns:1fr;gap:14px}
}

/* ===================== Critical Thinking column (inside VI) ===================== */
.diaochan-critical{
  background:linear-gradient(180deg,#1a0a0f 0%,#2a1218 100%);
  border:1px solid rgba(139,40,72,0.4);
  border-radius:8px;
  padding:50px 6% 60px;
  margin:60px auto 0;
  max-width:1100px;
  box-shadow:0 8px 30px rgba(0,0,0,0.4);
}
.diaochan-critical .critical-num{
  color:var(--gold-pale) !important;
  opacity:0.7;
}
.diaochan-critical .critical-title{
  color:var(--gold-bright);
}
.diaochan-critical .critical-title-en{
  color:var(--gold-pale);
  font-style:italic;
}
.diaochan-critical .critical-divider{
  background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb), 0.6),transparent);
  margin:24px auto 36px;
}
.critical-dual{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-top:24px;
}
.critical-side{
  padding:24px 22px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(212,175,55,0.18);
  border-radius:6px;
}
.critical-positive{
  border-left:3px solid var(--gold-bright);
}
.critical-negative{
  border-left:3px solid #C8A2C8;
}
.critical-side-label{
  font-family:'Cinzel Decorative',serif;
  font-size:15px;letter-spacing:0.2em;
  margin:0 0 14px;
  font-weight:600;
}
.critical-positive .critical-side-label{color:var(--gold-bright)}
.critical-negative .critical-side-label{color:#D8A8D8}
.critical-side p{
  font-family:'Cormorant Garamond',serif;
  font-size:15px;line-height:2;
  color:var(--gold-pale);opacity:0.9;
  margin:0;
}
@media (max-width:768px){
  .critical-dual{grid-template-columns:1fr;gap:20px}
}

/* ============================================
   v7.1.12: VI 段暗色增强
   - 暗色下，去掉白雾毛玻璃（::before 玫瑰旋转）否则跟暗红紫主题混在一起糊
   - 暗色下，月白 + 暗红紫底色对比已够，字色月白
   ============================================ */
:root[data-theme="dark"] .diaochan {
  background: linear-gradient(180deg,
    #1A0A14 0%,
    #1A0A14 20%,
    #2A0A1A 35%,
    #4A2030 45%,
    #1A0510 55%,
    #1A0510 65%,
    #1F0A18 72%,
    #2A1220 80%,
    #3A1828 86%,
    #5C3040 91%,
    #1A2840 97%,
    #0F1B2A 100%
  );
  color: var(--text-light);
}
:root[data-theme="dark"] .diaochan::before {
  /* 暗色下隐藏 ::before 玫瑰旋转（白雾 + 暗背景 = 糊） */
  opacity: 0.06;
}
:root[data-theme="dark"] .diaochan-num {
  color: #F4C8DC;
  opacity: 0.6;
}
:root[data-theme="dark"] .diaochan-content {
  color: var(--text-light);
}
:root[data-theme="dark"] .diaochan-text p {
  color: var(--text-light);
  opacity: 0.95;
}
/* v7.1.15: 暗色下 VI 段 h2 改月白银实色 + 描边（不用渐变 background-clip 避免月白字 + 月白背景 bug） */
:root[data-theme="dark"] .diaochan-text h2 {
  color: #C0D0E0;
  -webkit-text-stroke: 0.5px #A8C0D8;
  filter: drop-shadow(0 0 6px rgba(168, 192, 216, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
:root[data-theme="dark"] .diaochan-text .diaochan-cn {
  color: var(--text-light);
}
:root[data-theme="dark"] .diaochan-feat {
  background: rgba(244, 200, 220, 0.04);
  border-color: rgba(244, 200, 220, 0.25);
}
:root[data-theme="dark"] .diaochan-feat h4 {
  color: var(--text-light);
}
:root[data-theme="dark"] .diaochan-feat p {
  color: var(--text-light);
  opacity: 0.85;
}
:root[data-theme="dark"] .diaochan-critical {
  background: linear-gradient(180deg, #0A0410 0%, #140A18 100%);
  border-color: rgba(244, 200, 220, 0.25);
}
:root[data-theme="dark"] .critical-side {
  background: rgba(244, 200, 220, 0.03);
  border-color: rgba(244, 200, 220, 0.15);
}
:root[data-theme="dark"] .critical-side p {
  color: var(--text-light);
  opacity: 0.92;
}
:root[data-theme="dark"] .diaochan-series-item {
  background: rgba(10, 4, 8, 0.6);
  border-color: rgba(244, 200, 220, 0.3);
}
:root[data-theme="dark"] .diaochan-series-item figcaption {
  color: var(--text-light);
  background: rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] .diaochan-series-caption {
  color: var(--text-light);
  opacity: 0.85;
}