/* love-inject.css - 改进版，使用 grid 布局避免重叠 */
.love-page{ max-width:1100px; margin:30px auto; padding:20px; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial; color:#222;}
.love-top{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:30px;}
.love-top .avatar img{ width:110px; height:110px; object-fit:cover; border-radius:50%; border:4px solid rgba(255,255,255,0.9); box-shadow:0 6px 18px rgba(0,0,0,0.12); }
.love-top .heart{ font-size:40px; color:#e25568; transform:translateY(6px); }

.love-main{ display:grid; grid-template-columns: 1fr 320px; gap:20px; align-items:start; }
.timeline-column, .side-column{ padding:18px; background: rgba(255,255,255,0.96); border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,0.06); min-height:260px; }

/* timeline 内部 grid：两列，左列显示左侧条目，右列显示右侧条目；垂直排列 */
#timeline { padding:10px 12px; }
#timeline .timeline-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; align-items:start; position:relative; }
/* 中央竖线（在两列中间） */
#timeline .timeline-grid::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; width:4px; background: linear-gradient(180deg,#f6a,#e25568); border-radius:2px;
}
.timeline-item{ display:flex; gap:12px; align-items:flex-start; }
/* dot 放在靠近中线的一侧 */
.timeline-item .dot{ width:12px; height:12px; border-radius:50%; background:#e25568; box-shadow:0 2px 6px rgba(0,0,0,0.12); margin-top:8px; flex:0 0 auto; }

/* card 样式 */
.timeline-item .card{ padding:12px 14px; border-radius:8px; background:#fff; box-shadow:0 6px 12px rgba(0,0,0,0.04); width:100%; }

/* 左右列的项对齐：左列 dot 在右侧，右列 dot 在左侧 */
.timeline-item.left{ justify-content:flex-end; text-align:right; }
.timeline-item.left .dot{ order:2; margin-left:10px; margin-right:0; }
.timeline-item.left .card{ order:1; text-align:left; }

.timeline-item.right{ justify-content:flex-start; text-align:left; }
.timeline-item.right .dot{ order:1; margin-right:10px; }
.timeline-item.right .card{ order:2; }

/* 照片样式 */
.timeline-item .photos{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start; }
.timeline-item.left .photos{ justify-content:flex-end; }
.timeline-item .photos img{ width:120px; height:80px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,0.08); }

/* 如果图片隐藏（onerror），父容器不会出现空白 */
.timeline-item .photos img[style*="display: none"]{ display:none !important; }

/* countdown */
.side-column #countdown .big{ font-size:40px; font-weight:700; color:#e25568; margin-top:8px; }

/* modal */
.photo-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,0.6); z-index:9999; }
.photo-modal .inner{ max-width:900px; max-height:80vh; }
.photo-modal img{ max-width:100%; max-height:80vh; border-radius:8px; }
.photo-modal .close{ position:absolute; right:24px; top:20px; cursor:pointer; font-size:24px; color:#fff; }

@media (max-width:900px){
  .love-main{ grid-template-columns: 1fr; }
  #timeline .timeline-grid{ grid-template-columns: 1fr; }
  #timeline .timeline-grid::before{ left:20px; transform:none; }
  .timeline-item.left, .timeline-item.right{ justify-content:flex-start; text-align:left; }
  .timeline-item.left .dot, .timeline-item.right .dot{ order:1; margin-right:10px; }
  .timeline-item.left .card, .timeline-item.right .card{ order:2; }
}