/* ============================================================
   卓大人 · 图片 / 视频聚合广场样式
   （与 style.css 同主题；卡片圆角 8px，与站内 12px 卡片体系刻意区分，
     让「广场」区域的视觉密度更高、更贴近内容聚合产品的观感）
   断点：>1280 大屏（图片 4 列 / 视频 4 列）
        900–1280 中屏（图片 3 列 / 视频 3 列）
        <=900 小屏（图片 2 列 / 视频 2 列）
   ============================================================ */

:root {
  --r-card: 8px;                        /* 广场卡片圆角（需求指定 8px） */
  --r-chip: 999px;
  --g-gap: 18px;
  --plaza-shadow: 0 4px 16px rgba(232, 93, 117, 0.08);
  --plaza-shadow-hover: 0 14px 32px rgba(232, 93, 117, 0.20);
}

/* ---------- 页面淡入（切换页面 / 首屏加载的过渡动画） ---------- */

.plaza-main { animation: plazaIn 0.36s var(--ease) both; }

@keyframes plazaIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* 离开页面时的淡出：由 media.js 在站内跳转前挂到 <html> 上 */
html.page-leaving body {
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}

/* ---------- 页头 ---------- */

.plaza-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 26px 0 16px;
}

.plaza-head h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 23px;
  line-height: 1.35;
  color: var(--text);
}

.plaza-head .plaza-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-sub);
}

.plaza-count {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-sub);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-chip);
  padding: 5px 14px;
}

/* ---------- 工具条：Tab + 搜索 ---------- */

.plaza-toolbar {
  position: sticky;
  top: calc(var(--nav-h) + 8px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.plaza-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.plaza-tabs::-webkit-scrollbar { display: none; }

.plaza-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid transparent;
  background: var(--bg-deep);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: var(--r-chip);
  cursor: pointer;
  transition: all 0.18s var(--ease);
  white-space: nowrap;
}

.plaza-tab:hover { background: var(--accent-soft); color: var(--accent-deep); }

.plaza-tab.active {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: 0 5px 14px rgba(232, 93, 117, 0.28);
}

.plaza-tab .tab-num {
  font-size: 11.5px;
  font-weight: 500;
  background: rgba(74, 58, 62, 0.08);
  border-radius: var(--r-chip);
  padding: 0 7px;
}

.plaza-tab.active .tab-num { background: rgba(255, 255, 255, 0.26); }

.plaza-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 230px;
  flex-shrink: 0;
}

.plaza-search svg {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--text-sub);
  pointer-events: none;
}

.plaza-search input {
  width: 100%;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--r-chip);
  padding: 8px 34px 8px 33px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.18s, box-shadow 0.18s;
}

.plaza-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

.plaza-search .search-clear {
  position: absolute;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  background: var(--bg-deep);
  color: var(--text-sub);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: none;
}

.plaza-search.has-value .search-clear { display: block; }
.plaza-search .search-clear:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------- 图片瀑布流（多列 + 列内不拆分卡片） ---------- */

.plaza-masonry {
  column-count: 4;
  column-gap: var(--g-gap);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

/* 切换 Tab / 搜索时的整块淡出（内容替换后再淡入） */
.plaza-masonry.is-fading,
.plaza-videos.is-fading { opacity: 0; transform: translateY(6px); }

.g-card {
  break-inside: avoid;
  display: block;
  margin: 0 0 var(--g-gap);
  background: var(--card);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--plaza-shadow);
  cursor: zoom-in;
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}

.g-card:hover { transform: translateY(-5px); box-shadow: var(--plaza-shadow-hover); }

.g-thumb {
  position: relative;
  display: block;
  width: 100%;
  background: var(--bg-deep);
  overflow: hidden;
  /* 高度由内联 aspect-ratio 决定；未知尺寸时回退 4:3 */
  aspect-ratio: 4 / 3;
}

.g-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.36s var(--ease), transform 0.4s var(--ease);
}

.g-card.is-loaded .g-thumb img { opacity: 1; }
.g-card:hover .g-thumb img { transform: scale(1.04); }

/* 图片未就绪时的骨架屏（与 style.css 的 .sk 同底纹） */
.g-skel {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.g-card.is-loaded .g-skel,
.v-card.is-loaded .g-skel { display: none; }

.g-info { padding: 10px 12px 12px; }

.g-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s;
}

.g-card:hover .g-title { color: var(--accent); }

.g-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--text-sub);
}

.g-tags { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }

/* 来源标签 + 分类标签 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  line-height: 1.7;
  padding: 0 8px;
  border-radius: 5px;
  white-space: nowrap;
}

.tag-source { background: var(--accent-ghost); color: var(--accent-deep); }
.tag-cat { background: var(--bg-deep); color: var(--text-sub); }

.g-like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-sub);
  cursor: pointer;
  transition: color 0.18s;
}

.g-like svg { width: 14px; height: 14px; }
.g-like:hover { color: var(--accent); }
.g-like.is-on { color: var(--accent); }
.g-like.is-on svg { fill: currentColor; }

/* ---------- 视频网格 ---------- */

.plaza-videos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--g-gap);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.v-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--plaza-shadow);
  cursor: pointer;
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}

.v-card:hover { transform: translateY(-5px); box-shadow: var(--plaza-shadow-hover); }

.v-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #2C2230;
  overflow: hidden;
}

.v-thumb img,
.v-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.36s var(--ease), transform 0.34s var(--ease);
}

.v-card.is-loaded .v-thumb img { opacity: 1; }
.v-card:hover .v-thumb img { transform: scale(1.06); }   /* 悬停封面轻微放大 */

.v-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.v-play span {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(30, 20, 24, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: all 0.22s var(--ease);
}

.v-play svg { width: 18px; height: 18px; margin-left: 2px; }
.v-card:hover .v-play span { background: var(--accent); border-color: #fff; transform: scale(1.1); }

.v-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(30, 20, 24, 0.7);
  border-radius: 4px;
  padding: 1px 7px;
  letter-spacing: 0.3px;
}

/* 已看进度（播放历史回填到卡片上） */
.v-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 3px;
  background: rgba(255, 255, 255, 0.28);
}

.v-progress i { display: block; height: 100%; background: var(--accent); }

.v-info { padding: 11px 13px 13px; }

.v-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 42px;
  transition: color 0.18s;
}

.v-card:hover .v-title { color: var(--accent); }

.v-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-sub);
}

.v-foot .meta-item { display: inline-flex; align-items: center; gap: 4px; }
.v-foot .meta-item svg { width: 13px; height: 13px; opacity: 0.6; }



/* ---------- 播放历史 ---------- */

.history-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

.history-panel[hidden] { display: none; }

.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.history-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text);
}

.history-head .hist-clear {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-sub);
  cursor: pointer;
  transition: color 0.18s;
}

.history-head .hist-clear:hover { color: var(--accent); }

.history-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.history-item {
  position: relative;
  flex: 0 0 168px;
  width: 168px;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.history-item .hi-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #2C2230;
}

.history-item .hi-cover img { width: 100%; height: 100%; object-fit: cover; }

/* 无封面（后台未单独上传封面）时的占位 */
.history-item .hi-play {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFDEE9 0%, #FFE9EF 100%);
  color: var(--accent);
}

.history-item .hi-play svg { width: 22px; height: 22px; }

.history-item .hi-cover .v-progress { height: 2px; }

.history-item .hi-time {
  position: absolute;
  right: 5px;
  bottom: 5px;
  font-size: 10.5px;
  color: #fff;
  background: rgba(30, 20, 24, 0.7);
  border-radius: 3px;
  padding: 0 5px;
}

.history-item .hi-title {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-item:hover .hi-title { color: var(--accent); }

.history-item .hi-sub { font-size: 11px; color: var(--text-sub); }

/* ---------- 加载 / 到底 / 空态 ---------- */

/* 触底哨兵：空闲时保留 2px 占位（必须在文档流中，观察器才会触发），加载时才展开 */
.plaza-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2px;
  color: var(--text-sub);
  font-size: 13px;
}

.plaza-sentinel .sentinel-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 0 8px;
}

.plaza-sentinel .sentinel-inner[hidden] { display: none; }

.plaza-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid var(--accent-soft);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.plaza-done { padding: 26px 0 8px; text-align: center; color: var(--text-sub); font-size: 13px; }
.plaza-done[hidden] { display: none; }

.plaza-more {
  display: block;
  margin: 22px auto 0;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 26px;
  border-radius: var(--r-chip);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}

.plaza-more:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.plaza-more[hidden] { display: none; }

/* 空态（沿用站内 .empty 的语气，补充搜索场景文案） */
.plaza-empty {
  /* 视频网格里占满整行 */
  grid-column: 1 / -1;
  /* 图片页的空态位于多列瀑布流容器内：grid-column 对多列布局无效，
     必须用 column-span 跨列，否则空态只占一列、图标与文案错位 */
  column-span: all;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-sub);
}

.plaza-empty .pe-icon { font-size: 38px; opacity: 0.7; }
.plaza-empty p { margin-top: 10px; font-size: 14px; }
.plaza-empty .pe-tip { font-size: 12.5px; opacity: 0.85; }

/* ---------- 模态框：大图查看 / 视频播放 ---------- */

.media-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28, 18, 22, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s var(--ease), visibility 0.24s;
}

.media-modal.is-open { opacity: 1; visibility: visible; }
.media-modal[hidden] { display: none; }

.media-dialog {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: scale(0.96);
  transition: transform 0.24s var(--ease);
}

.media-modal.is-open .media-dialog { transform: none; }

.media-close {
  position: absolute;
  right: -6px;
  top: -46px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.18s var(--ease);
}

.media-close:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }

.media-nav {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(28, 18, 22, 0.45);
  color: #fff;
  cursor: pointer;
  transition: all 0.18s var(--ease);
}

.media-nav:hover { background: rgba(232, 93, 117, 0.9); border-color: #fff; }
.media-nav.prev { left: 16px; }
.media-nav.next { right: 16px; }
.media-nav svg { width: 20px; height: 20px; }

/* 边界态（第一张 / 最后一张）隐藏箭头；用 class 而非 hidden 属性，
   因为 .media-nav 的 display:flex 会覆盖 [hidden] 的 display:none */
.media-nav.is-hidden { display: none; }

/* 大图 */
.media-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-height: 100%;
}

.media-figure img,
.media-figure .media-img-box {
  max-width: min(1080px, 92vw);
  max-height: 78vh;
  border-radius: var(--r-card);
  object-fit: contain;
  background: #1E1418;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.media-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  width: min(1080px, 92vw);
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--r-card);
  font-size: 13px;
  color: var(--text);
}

.media-caption .mc-title { font-weight: 600; font-size: 14px; }
.media-caption .mc-meta { display: inline-flex; align-items: center; gap: 10px; color: var(--text-sub); font-size: 12.5px; flex-wrap: wrap; }
.media-caption .mc-actions { display: inline-flex; align-items: center; gap: 8px; }

/* 视频播放器 */
.video-player {
  width: min(1080px, 92vw);
  background: #000;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.video-player video {
  display: block;
  width: 100%;
  max-height: 74vh;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-caption {
  width: min(1080px, 92vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--r-card);
  font-size: 13px;
}

.video-caption .vc-title { font-weight: 600; font-size: 14px; color: var(--text); }
.video-caption .vc-meta { display: inline-flex; align-items: center; gap: 10px; color: var(--text-sub); font-size: 12.5px; flex-wrap: wrap; }

/* ---------- 响应式 ---------- */

@media (max-width: 1280px) {
  .plaza-masonry { column-count: 3; }
  .plaza-videos { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .plaza-search { width: 190px; }
  :root { --g-gap: 16px; }
}

@media (max-width: 900px) {
  .plaza-masonry { column-count: 2; }
  .plaza-videos { grid-template-columns: repeat(2, 1fr); }
  .plaza-toolbar { gap: 8px; }
  .plaza-tabs { order: 1; width: 100%; flex: 1 0 100%; }
  /* 搜索独占一行时占满宽度，避免占位文案被截断 */
  .plaza-search { width: 100%; flex: 1 0 100%; }
}

@media (max-width: 768px) {
  .plaza-head { margin: 16px 0 12px; }
  .plaza-head h1 { font-size: 19px; }
  .plaza-head .plaza-sub { font-size: 12px; }
  .plaza-count { display: none; }
  .plaza-toolbar { top: calc(var(--nav-h-m) + 6px); padding: 8px 10px; border-radius: var(--radius-sm); }
  .plaza-tab { font-size: 13px; padding: 6px 12px; }
  .plaza-tab .tab-num { display: none; }
  :root { --g-gap: 12px; }

  .g-info { padding: 8px 10px 10px; }
  .g-title { font-size: 13px; -webkit-line-clamp: 2; }
  .g-foot { font-size: 11.5px; }
  .tag { font-size: 11px; padding: 0 6px; }

  .v-info { padding: 9px 11px 11px; }
  .v-title { font-size: 13px; min-height: 0; -webkit-line-clamp: 2; }
  .v-foot { font-size: 11.5px; gap: 8px; }
  .v-play span { width: 38px; height: 38px; }
  .v-play svg { width: 15px; height: 15px; }

  .history-item { flex-basis: 140px; width: 140px; }
  .history-item .hi-title { font-size: 12px; }

  .media-modal { padding: 12px; }
  .media-close { right: 0; top: -42px; }
  .media-nav { width: 36px; height: 36px; margin-top: -18px; }
  .media-nav.prev { left: 6px; }
  .media-nav.next { right: 6px; }
  .media-figure img { max-height: 66vh; }
  .media-caption, .video-caption { padding: 9px 12px; }
  .media-caption .mc-title { font-size: 13px; }
}

@media (max-width: 480px) {
  .plaza-videos { grid-template-columns: 1fr; }

}

/* 触屏：去掉 hover 位移（触屏 :hover 会粘住） */
@media (hover: none) {
  .g-card:hover, .v-card:hover { transform: none; }
  .g-card:hover .g-thumb img, .v-card:hover .v-thumb img { transform: none; }
  .v-card:hover .v-play span { transform: none; }
}

/* 减弱动效偏好：关掉淡入淡出与缩放 */
@media (prefers-reduced-motion: reduce) {
  .plaza-main { animation: none; }
  .plaza-masonry, .plaza-videos { transition: none; }
  .media-modal, .media-dialog { transition: none; }
  .plaza-spinner { animation: none; }
  html.page-leaving body { transition: none; }
}