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

/* 承接 diaochan 末尾的米色，平滑过渡到牙色 */
/* 顶部拉长米色保持段，给 diaochan 渐出更多"呼吸"空间，避免硬切 */
section#similar.chapter{
  background:linear-gradient(180deg,
    #F4ECD8 0%,      /* 承接 diaochan 末米色 */
    #F4ECD8 18%,     /* 拉长米色保持（15% 距离承接 diaochan 渐出） */
    var(--ivory) 40%,
    var(--ivory-light) 75%,
    var(--ivory-deep) 100%
  );
}

/* v7.1.15: 暗色下 similar 段单独背景（避免 .chapter::after 蒙层暗色下渐变到 #0F1B2A 与 similar 顶部米色冲突造成"大黑色"）
   暗色下：diaochan 末尾已经是 #0F1B2A 暗夜蓝，所以 similar 顶部 0-18% 用暗夜蓝承接，40% 渐入牙色背景 */
:root[data-theme="dark"] section#similar.chapter{
  background:linear-gradient(180deg,
    #0F1B2A 0%,       /* 承接 diaochan 末尾暗夜蓝（v7.1.12 改的 diaochan 100%） */
    #0F1B2A 18%,      /* 保持暗夜蓝 */
    #1A2840 40%,      /* 渐入卡片底 */
    #243A52 75%,      /* 强调底 */
    #1A2840 100%
  );
}

/* ===================== 相似艺术（3 大卡） ===================== */
.similar-featured{max-width:1200px;margin:60px auto 0;display:flex;flex-direction:column;gap:80px}
.similar-big{position:relative;display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center;
  padding:50px;background:linear-gradient(135deg,rgba(244,236,216,0.4),rgba(232,220,192,0.2));
  border:1px solid var(--gold-light);box-shadow:0 30px 80px rgba(0,0,0,0.08)}
.similar-big:nth-child(even){direction:rtl}
.similar-big:nth-child(even) > *{direction:ltr}
.similar-big::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent)}
.similar-big::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent)}
.similar-img{position:relative;padding:20px;background:var(--ivory-deep);border:1px solid var(--gold-light);
  box-shadow:0 20px 50px rgba(0,0,0,0.2)}
.similar-img::before{content:'';position:absolute;inset:10px;border:1px solid var(--gold);pointer-events:none}
.similar-img img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 20px rgba(0,0,0,0.2))}
.similar-text .flag{font-size:50px;display:block;margin-bottom:10px;filter:drop-shadow(0 0 8px rgba(var(--gold-deep-rgb), 0.4))}
.similar-text h3{font-family:'Cinzel Decorative',serif;font-size:36px;font-weight:900;
  background:linear-gradient(180deg,var(--gold-pale),var(--gold-bright),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0;letter-spacing:0.1em}
.similar-text .similar-cn{font-size:24px;font-weight:600;color:var(--ink);margin:8px 0 12px;letter-spacing:0.2em}
.similar-text .similar-year{font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--gold);letter-spacing:0.3em;margin-bottom:20px;font-style:italic}
.similar-text p{font-size:15px;line-height:2;color:var(--ink);opacity:0.85;margin:0}

/* ============================================
   v7.1.12 similar 段暗色增强
   - section#similar 渐变：暗月蓝过渡
   - .similar-big 卡背景：暗月蓝
   - .similar-img 内底：暗古金
   - .similar-text h3 / p 月白
   ============================================ */
:root[data-theme="dark"] section#similar.chapter {
  background: linear-gradient(180deg,
    #1A2840 0%,
    #1A2840 18%,
    #0F1B2A 40%,
    #0A1830 75%,
    #0F1B2A 100%
  );
}
:root[data-theme="dark"] .similar-big {
  background: linear-gradient(135deg, rgba(36, 58, 82, 0.5), rgba(15, 27, 42, 0.3));
  border-color: var(--gold-light);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .similar-big::before,
:root[data-theme="dark"] .similar-big::after {
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}
:root[data-theme="dark"] .similar-img {
  background: #1A2840;
  border-color: var(--gold-light);
}
:root[data-theme="dark"] .similar-img::before {
  border-color: var(--gold-bright);
  opacity: 0.7;
}
:root[data-theme="dark"] .similar-text h3 {
  background: linear-gradient(180deg, var(--gold-pale), var(--gold-bright), var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root[data-theme="dark"] .similar-text .similar-cn {
  color: var(--text-light);
}
:root[data-theme="dark"] .similar-text .similar-year {
  color: var(--gold-light);
}
:root[data-theme="dark"] .similar-text p {
  color: var(--text-light);
  opacity: 0.9;
}
:root[data-theme="dark"] .similar-text .flag {
  filter: drop-shadow(0 0 10px rgba(168, 192, 216, 0.4));
}