/* ============================================================
   冷月幽 · 词章页专属
   3D 翻转卡片：正面诗句，悬停翻到背面显示出处
   只被 ci.html 引入
   ============================================================ */

.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ============================================================
   3D 翻转卡片
   外层 .quote-flip 提供 perspective（透视距离）
   内层 .quote-flip-inner 做 rotateY 翻转
   两个面用 backface-visibility 隐藏背面
   ============================================================ */
.quote-flip {
  position: relative;
  display: block;
  min-height: 184px;
  /* 透视：数值越小透视越强，翻转越"夸张" */
  perspective: 1000px;
  /* 避免翻转时溢出到相邻卡片 */
  z-index: 1;
  transition: z-index 0s;
}

/* 悬停时抬高层级，让翻转的卡片盖住邻居 */
.quote-flip:hover,
.quote-flip:focus-visible {
  z-index: 5;
}

.quote-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 184px;
  /* 用网格让正面成为「撑开高度」的那一面：
     长句子会把卡片撑高，而不是被固定高度腰斩 */
  display: grid;
  /* 3D 空间：让子元素在真实的三维里翻转 */
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, .1, .2, 1);
}

/* 悬停翻转 */
.quote-flip:hover .quote-flip-inner,
.quote-flip:focus-visible .quote-flip-inner {
  transform: rotateY(180deg);
}

/* ---------- 正反两面共用 ---------- */
.quote-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  /* 背面不可见 —— 这是 3D 翻转的关键 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}

/* 卡片右下角的淡朱砂晕 */
.quote-face::after {
  content: "";
  position: absolute;
  right: -22px; bottom: -34px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(164, 80, 58, .08), transparent 68%);
  pointer-events: none;
}

/* ---------- 正面 ---------- */
.quote-front {
  /* 正面留在文档流里，由它决定卡片高度（背面仍是绝对定位，跟着同样高） */
  position: relative;
  inset: auto;
  transform: rotateY(0deg);
}

.quote-flip:hover .quote-front {
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
}

/* ---------- 背面 ---------- */
.quote-back {
  /* 背面预先翻转 180 度，这样内层翻 180 度时正好正对 */
  transform: rotateY(180deg);
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  background:
    linear-gradient(160deg, var(--paper-4) 0%, var(--paper-3) 55%, var(--paper-4) 100%);
}

.quote-flip:hover .quote-back {
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
}

/* 背面装饰：右下角的大引号水印 */
.back-mark {
  position: absolute;
  right: 14px;
  bottom: -26px;
  font-family: var(--font-kai);
  font-size: 110px;
  line-height: 1;
  color: var(--cinnabar);
  opacity: .06;
  pointer-events: none;
}

.back-label {
  font-size: 13px;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--cinnabar);
  opacity: .8;
}

.back-from {
  max-width: 92%;
  font-family: var(--font-kai);
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--ink);
}

.back-tag {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 11px;
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--cinnabar);
  background: var(--cinnabar-soft);
  border-radius: 3px;
}

.back-date {
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--ink-4);
}

/* ============================================================
   正面内容
   ============================================================ */
.quote-front .mark {
  font-family: var(--font-kai);
  font-size: 32px;
  line-height: 1;
  color: var(--cinnabar);
  opacity: .45;
}

.quote-text {
  flex: 1;                       /* 占满引号和底部信息之间的空间 */
  display: flex;
  align-items: center;           /* 垂直居中 */
  justify-content: center;       /* 水平居中 */
  text-align: center;
  margin-top: 0;
  font-family: var(--font-kai);
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--ink);
  overflow: hidden;
}

/* 内层做行数截断：外层 flex 居中不受影响 */
.quote-text > span {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.quote-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-4);
}

/* 右下角「翻」字提示 */
.flip-hint {
  position: absolute;
  right: 14px;
  top: 12px;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--ink-4);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.quote-flip:hover .flip-hint { opacity: 0; }

/* 未悬停时，鼠标移入卡片才淡入提示 */
.quote-flip .flip-hint { opacity: .55; transform: none; }
.quote-flip:hover .flip-hint { opacity: 0; }

/* ============================================================
   编辑模式：不翻转，直接显示正面
   否则点「改」「删」时卡片会翻走
   ============================================================ */
.quote-flip.is-editing:hover .quote-flip-inner {
  transform: none;
}
.quote-flip.is-editing .quote-flip-inner {
  transform-style: flat;
}
.quote-flip.is-editing .quote-face {
  border-style: dashed;
  border-color: var(--line-2);
}
.quote-flip.is-editing .quote-back {
  display: none;
}
.quote-flip.is-editing .flip-hint {
  display: none;
}

/* ============================================================
   暗色适配
   ============================================================ */
[data-theme="dark"] .quote-face {
  background: var(--paper-3);
}
[data-theme="dark"] .quote-back {
  background:
    linear-gradient(160deg, #262319 0%, #211e18 55%, #262319 100%);
}
[data-theme="dark"] .back-mark { opacity: .1; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 980px) {
  .entry-grid, .recent-grid, .quote-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 触屏没有 hover：改成点击翻转 */
@media (hover: none) {
  .quote-flip.is-flipped .quote-flip-inner {
    transform: rotateY(180deg);
  }
  .quote-flip .flip-hint { opacity: .6; }
  .quote-flip.is-flipped .flip-hint { opacity: 0; }
}

@media (max-width: 560px) {
  .entry-grid, .recent-grid, .quote-grid { grid-template-columns: 1fr; }
  .quote-flip, .quote-flip-inner { min-height: 176px; }
}

/* 尊重减弱动效：不做翻转，改为淡入淡出 */
@media (prefers-reduced-motion: reduce) {
  .quote-flip-inner { transition: none; }
  .quote-flip:hover .quote-flip-inner { transform: none; }
  .quote-flip:hover .quote-front { opacity: 0; }
  .quote-flip:hover .quote-back { transform: rotateY(0deg); }
  .quote-back { transition: opacity .3s; }
}