/*
Theme Name: TTVIP Child
Theme URI: http://localhost:8081
Description: TTVIP 目录站子主题（基于 Astra）—— 卡片瀑布流 + 移动端优先
Author: francis
Template: astra
Version: 1.0.0
*/

/* 自定义字体（Google Fonts latin 分片, 本地托管） */
@import url('assets/fonts/fonts.css');

:root {
  --accent: #e11d48;
  --bg: #f5f5f7;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(0,0,0,.06);
}

body.ttvip-page { background: var(--bg); color: var(--text); margin: 0; }
.ttvip-page, .ttvip-page * { box-sizing: border-box; }
.ttvip-page a { text-decoration: none; }
.ttvip-container { max-width: 1280px; margin: 0 auto; padding: 0 14px; }

/* ===== 顶栏 ===== */
.ttvip-header {
  background: linear-gradient(135deg, #111827, #1f2937);
  color: #fff;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.ttvip-header-inner { display:flex; align-items:center; justify-content:space-between; height:58px; gap:12px; }
.ttvip-brand { font-family:'Playfair Display', Georgia, serif; font-size:26px; font-weight:700; letter-spacing:1px; }
.ttvip-brand a { color:#fff; }
.ttvip-brand .dot { color: var(--accent); }
.ttvip-nav { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.ttvip-nav a {
  color:#e5e7eb; font-size:14px; padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.ttvip-nav a:hover { background:rgba(255,255,255,.12); color:#fff; }

/* ===== 搜索 / 筛选 hero ===== */
.ttvip-hero { background: linear-gradient(135deg, #111827, #1f2937); color:#fff; padding: 20px 0 26px; }
.ttvip-hero h2 { margin: 0 0 14px; font-size: 22px; }
.ttvip-search { display:flex; gap:8px; }
.ttvip-search input {
  flex:1; padding:12px 16px; border-radius:999px; border:none; font-size:15px; outline:none;
}
.ttvip-search button {
  padding:12px 24px; border:none; border-radius:999px; background:var(--accent);
  color:#fff; font-size:15px; font-weight:700; cursor:pointer;
}
.ttvip-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.ttvip-chips a {
  color:#e5e7eb; padding:5px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.25); font-size:13px;
}
.ttvip-chips a:hover, .ttvip-chips a.on { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ===== 卡片瀑布流 ===== */
.ttvip-grid { column-count: 2; column-gap: 12px; padding: 20px 0; }
.ttvip-card {
  break-inside: avoid; background: var(--card); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); margin-bottom: 12px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ttvip-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.ttvip-card > a { display:block; color:inherit; }
.ttvip-card-img { position:relative; background: linear-gradient(135deg,#d1d5db,#9ca3af); }
.ttvip-card-img img { width:100%; display:block; }
.ttvip-card-img .ph { width:100%; aspect-ratio: 3/4; }
.ttvip-badges { position:absolute; top:8px; left:8px; display:flex; gap:6px; flex-wrap:wrap; }
.ttvip-badge {
  background:rgba(0,0,0,.6); color:#fff; font-size:11px; padding:3px 9px; border-radius:999px;
}
.ttvip-badge.city { background: var(--accent); }
.ttvip-card-body { padding: 10px 12px 13px; }
.ttvip-card-title { font-size:15px; font-weight:700; margin:0 0 4px; line-height:1.35; color:var(--text); }
.ttvip-card-meta { color: var(--muted); font-size:12.5px; }
.ttvip-card-meta b { color: var(--accent); }

/* ===== 详情页 v2: 三区块 ===== */
.ttvip-single { padding: 20px 0 40px; }
.ttvip-single-title { font-size: 24px; margin: 0 0 10px; line-height: 1.3; }
.ttvip-single .badges { display:flex; gap:6px; flex-wrap:wrap; margin-bottom: 16px; }
.ttvip-single .badges .ttvip-badge { position:static; font-size:12px; padding:4px 12px; }
.ttvip-single .main-img { border-radius: var(--radius); overflow:hidden; margin-bottom:16px; box-shadow: var(--shadow); }
.ttvip-single .main-img img { width:100%; display:block; }
.ttvip-keyinfo {
  background:#fff; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px;
}
.ttvip-keyinfo .k { color:var(--muted); font-size:12px; margin-bottom:2px; }
.ttvip-keyinfo .v { font-size:15px; font-weight:700; line-height:1.5; }
.ttvip-keyinfo .v a { color:var(--text); }
.ttvip-wa-link { display:inline-flex; align-items:center; gap:6px; }
.ttvip-wa-icon { width:17px; height:17px; flex:none; fill:#25D366; }
.ttvip-wa-link:hover { color:#128C7E; }
.ttvip-wa-link:hover .ttvip-wa-icon { fill:#128C7E; }

/* 区块卡片 */
.ttvip-sec {
  background:#fff; border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow); margin-bottom:16px;
}
.ttvip-sec h2 {
  display:flex; align-items:center; gap:9px;
  font-size:19px; margin:0 0 16px; padding-bottom:12px;
  border-bottom:1px solid #f0f0f3;
}
.ttvip-sec h2 .num {
  background:var(--accent); color:#fff; width:26px; height:26px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; font-size:14px; flex:none;
}

/* 介绍: 四格统计 */
.ttvip-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.stat {
  background:#f9fafb; border:1px solid #f0f0f3; border-radius:10px;
  text-align:center; padding:14px 6px;
}
.stat-v { font-size:17px; font-weight:800; color:var(--accent); }
.stat-k { font-size:12px; color:var(--muted); margin-top:3px; }
.ttvip-intro-text { line-height:1.8; color:var(--text); margin-bottom:14px; white-space:pre-line; }
.ttvip-charact {
  background:#fff7f9; border:1px solid #ffe4ea; border-radius:10px; padding:12px 14px;
}
.ttvip-charact h3 { font-size:14px; margin:0 0 6px; color:var(--accent); }
.ttvip-charact p { margin:0; font-size:14px; line-height:1.7; color:#4b5563; }

/* 服务: pill 标签流 */
.ttvip-service-pills {
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;
}
.ttvip-service-pills li {
  background:#fff1f5; color:#be123c; border:1px solid #ffd7e0;
  border-radius:999px; padding:6px 14px; font-size:13.5px;
}

/* 视频: 双列播放器 */
.ttvip-video-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.ttvip-video-grid video { width:100%; border-radius:10px; background:#000; aspect-ratio:16/9; }
@media (max-width: 700px) { .ttvip-video-grid { grid-template-columns:1fr; } }

/* 生活照: 网格 */
.ttvip-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ttvip-gallery a { display:block; cursor:zoom-in; }
.ttvip-gallery img { width:100%; height:100%; object-fit:cover; border-radius:8px; aspect-ratio:1/1; transition:opacity .15s ease; }
.ttvip-gallery img:hover { opacity:.85; }

/* 生活照 lightbox */
.ttvip-lb {
  position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9999;
  display:none; align-items:center; justify-content:center;
}
.ttvip-lb.on { display:flex; }
.ttvip-lb-img { position:relative; max-width:92vw; }
.ttvip-lb-img > img {
  max-width:92vw; max-height:86vh; border-radius:10px; display:block;
  box-shadow:0 0 40px rgba(0,0,0,.6);
}
.ttvip-lb-close {
  position:absolute; top:-14px; right:-14px; width:38px; height:38px;
  background:var(--accent); color:#fff; border-radius:50%;
  text-align:center; line-height:34px; font-size:22px; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.ttvip-lb-prev, .ttvip-lb-next {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; background:rgba(255,255,255,.14); color:#fff;
  border-radius:50%; text-align:center; line-height:40px; font-size:28px;
  cursor:pointer; user-select:none;
}
.ttvip-lb-prev:hover, .ttvip-lb-next:hover { background:rgba(255,255,255,.28); }
.ttvip-lb-prev { left:-64px; }
.ttvip-lb-next { right:-64px; }
.ttvip-lb-count {
  position:absolute; bottom:-36px; left:50%; transform:translateX(-50%);
  color:#ddd; font-size:13px; white-space:nowrap;
}
@media (max-width: 700px) {
  .ttvip-lb-prev { left:8px; }
  .ttvip-lb-next { right:8px; }
  .ttvip-lb-close { top:8px; right:8px; }
  .ttvip-lb-count { bottom:auto; top:-30px; }
}

/* 评论 */
.ttvip-comments { margin-top:4px; }
.ttvip-comments-title { font-size:15px; margin:0 0 12px; }
.ttvip-comment-list { list-style:none; margin:0 0 18px; padding:0; }
.ttvip-comment-list li { padding:12px 0; border-bottom:1px solid #f0f0f3; }
.ttvip-comment-list .avatar { border-radius:50%; float:left; margin-right:10px; }
.ttvip-comment-list .comment-author { font-weight:700; font-size:14px; }
.ttvip-comment-list .comment-meta { font-size:12px; color:var(--muted); margin:2px 0 6px; }
.ttvip-comment-list .comment-content { font-size:14px; line-height:1.7; }
.ttvip-comment-tip { color:var(--muted); font-size:13px; margin:8px 0 14px; }
.comment-form { display:grid; gap:10px; }
.comment-form label { display:block; font-size:13px; margin-bottom:4px; color:#4b5563; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width:100%; padding:10px 12px; border:1px solid #e2e2e8; border-radius:8px;
  font-size:14px; font-family:inherit; background:#fafafa;
}
.comment-form textarea { min-height:90px; }
.comment-form input:focus, .comment-form textarea:focus {
  outline:none; border-color:var(--accent); background:#fff;
}
.comment-form .submit {
  background:var(--accent); color:#fff; border:none; border-radius:999px;
  padding:10px 28px; font-size:14px; font-weight:700; cursor:pointer; justify-self:start;
}
.comment-form .submit:hover { opacity:.9; }

/* ===== 空状态 / 分页 ===== */
.ttvip-empty { text-align:center; color:var(--muted); padding:70px 0; }
.ttvip-pagination { text-align:center; padding: 20px 0 40px; }
.ttvip-pagination .page-numbers { display:inline-block; padding:7px 13px; margin:0 3px; background:#fff; border-radius:8px; color:var(--text); box-shadow:var(--shadow); }
.ttvip-pagination .page-numbers.current { background:var(--accent); color:#fff; }

/* ===== 页脚 ===== */
.ttvip-footer { background:#111827; color:#9ca3af; padding:24px 0; margin-top:20px; text-align:center; font-size:13px; }

/* ===== 响应式（移动优先，向上扩展列数）===== */
@media (min-width: 640px) { .ttvip-grid { column-count: 3; } }
@media (min-width: 1024px) { .ttvip-grid { column-count: 4; } }
@media (max-width: 600px) {
  .ttvip-keyinfo { grid-template-columns:1fr 1fr; }
  .ttvip-stats { grid-template-columns:repeat(2,1fr); }
  .ttvip-gallery { grid-template-columns:repeat(2,1fr); }
  .ttvip-header-inner { flex-direction: column; height: auto; padding: 10px 0; }
  .ttvip-nav { justify-content: center; }
}