/* === channel-2026 v6 (3 频道通用): 首屏 flash 同首页 hover + 列表题图冲击 hover === */
:root {
  --ch-gap: 1.25rem;
  --ch-card-bg: #ffffff;
  --ch-border: #e8e3d8;
  --ch-muted: #6f6c66;
  --ch-ink: var(--ppvi-ink, #1f1c17);
  --ch-red: #b8001f;
}

.channel-page { background: #f6f5f2; padding: 1.6rem 0 2.5rem; }
.channel-shell { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }

/* === 首屏:左侧焦点图 + 右侧 4 推荐,上下边界对齐 === */
.channel-top {
  display: grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(360px, .98fr);
  gap: var(--ch-gap);
  margin-top: 1.35rem;
  align-items: stretch;
}

.channel-flash,
.channel-mark-list { min-width: 0; }

.channel-flash-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  height: 100%;
  min-height: 0;
}
.channel-flash-img {
  display: block;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 7px;
  background: #ebe7dd;
  box-shadow: 0 1px 0 rgba(31, 28, 23, .08);
  transform: translateZ(0);
  transition: transform .26s ease, box-shadow .26s ease;
}
.channel-flash-img img,
.channel-mark-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.97) contrast(1);
  transition: transform .5s cubic-bezier(.2,.72,.18,1), filter .34s ease;
}
.channel-flash-img::before,
.channel-flash-img::after,
.channel-mark-thumb::before,
.channel-mark-thumb::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.channel-flash-img::before,
.channel-mark-thumb::before {
  inset: 0;
  border: 2px solid rgba(184, 0, 31, 0);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: border-color .26s ease, box-shadow .26s ease;
}
.channel-flash-img::after,
.channel-mark-thumb::after {
  width: 42%;
  height: 155%;
  left: -72%;
  top: -28%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transition: left .5s ease;
}
.channel-flash-img:hover,
.channel-flash-img:focus-visible,
.channel-mark-card:hover .channel-mark-thumb,
.channel-mark-card:focus-within .channel-mark-thumb {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(31, 28, 23, .16);
}
.channel-flash-img:hover img,
.channel-flash-img:focus-visible img,
.channel-mark-card:hover img,
.channel-mark-card:focus-within img {
  transform: scale(1.075);
  filter: saturate(1.18) contrast(1.08);
}
.channel-flash-img:hover::before,
.channel-flash-img:focus-visible::before,
.channel-mark-card:hover .channel-mark-thumb::before,
.channel-mark-card:focus-within .channel-mark-thumb::before {
  border-color: rgba(184, 0, 31, .86);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 -42px 70px rgba(0,0,0,.22);
}
.channel-flash-img:hover::after,
.channel-flash-img:focus-visible::after,
.channel-mark-card:hover .channel-mark-thumb::after,
.channel-mark-card:focus-within .channel-mark-thumb::after {
  left: 132%;
}
.channel-flash-caption {
  margin: 0;
  min-height: 1.45em;
  font: 700 1rem/1.45 var(--ppvi-sans, system-ui, sans-serif);
  color: var(--ch-ink);
}

.channel-mark-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .9rem;
  height: 100%;
  min-height: 0;
}
.channel-mark-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  text-decoration: none;
  color: inherit;
}
.channel-mark-thumb {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 7px;
  background: #ebe7dd;
  box-shadow: 0 1px 0 rgba(31, 28, 23, .08);
  transform: translateZ(0);
  transition: transform .26s ease, box-shadow .26s ease;
}
.channel-mark-title {
  min-height: 2.8em;
  font: 700 .92rem/1.4 var(--ppvi-sans, system-ui, sans-serif);
  color: var(--ch-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.channel-mark-card:hover .channel-mark-title { color: var(--ch-red); }

/* === 中部:主区(3fr) + sidebar(1fr) === */
.channel-body {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: var(--ch-gap);
  margin-top: 1.4rem;
  align-items: start;
}
.channel-main { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.channel-side { min-width: 0; display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; align-self: start; }

/* feed 流(主区单栏,有图左图右文,无图纯文) */
.channel-feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.channel-feed-item { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px dashed var(--ch-border); }
.channel-feed-item:last-of-type { border-bottom: none; }
.channel-feed-thumb {
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 6px;
  background: #f0eee8;
  transform: translateZ(0);
  transition: transform .26s ease, box-shadow .26s ease;
}
.channel-feed-thumb::before,
.channel-feed-thumb::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.channel-feed-thumb::before {
  inset: 0;
  border: 2px solid rgba(184, 0, 31, 0);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  transition: border-color .26s ease, box-shadow .26s ease;
}
.channel-feed-thumb::after {
  width: 42%;
  height: 150%;
  left: -70%;
  top: -25%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  transition: left .46s ease;
}
.channel-feed-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.96) contrast(1);
  transition: transform .46s cubic-bezier(.2,.72,.18,1), filter .32s ease;
}
.channel-feed-item:hover .channel-feed-thumb,
.channel-feed-item:focus-within .channel-feed-thumb {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(31,28,23,.18);
}
.channel-feed-item:hover .channel-feed-thumb::before,
.channel-feed-item:focus-within .channel-feed-thumb::before {
  border-color: rgba(184, 0, 31, .86);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 -42px 70px rgba(0,0,0,.22);
}
.channel-feed-item:hover .channel-feed-thumb::after,
.channel-feed-item:focus-within .channel-feed-thumb::after {
  left: 132%;
}
.channel-feed-item:hover .channel-feed-thumb img,
.channel-feed-item:focus-within .channel-feed-thumb img {
  transform: scale(1.09);
  filter: saturate(1.18) contrast(1.08);
}
.channel-feed-item:hover .channel-feed-body h3 a,
.channel-feed-item:focus-within .channel-feed-body h3 a {
  color: var(--ch-red);
}
.channel-feed-nothumb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #f0eee8; color: var(--ch-muted); font: 400 .82rem var(--ppvi-sans, system-ui, sans-serif); }
.channel-feed-body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.channel-feed-body h3 { margin: 0; font: 600 1.1rem/1.35 var(--ppvi-sans, system-ui, sans-serif); }
.channel-feed-body h3 a { color: var(--ppvi-ink, #1f1c17); text-decoration: none; }
.channel-feed-body h3 a:hover { color: var(--ch-red); }
.channel-feed-desc { margin: 0; color: var(--ch-muted); font: 400 .88rem/1.55 var(--ppvi-sans, system-ui, sans-serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.channel-feed-meta { margin: 0; color: var(--ch-muted); font: 400 .78rem var(--ppvi-sans, system-ui, sans-serif); }

/* video 块(嵌在主区 feed 流中间) */
.channel-feed-ad {
  display: block;
  padding: .15rem 0 .1rem;
}
.channel-feed-ad a {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #ebe7dd;
  box-shadow: 0 10px 24px rgba(31,28,23,.08);
}
.channel-feed-ad img {
  display: block;
  width: 100%;
  height: auto;
}
.channel-feed-videos { display: flex; flex-direction: column; gap: .8rem; padding: 1.2rem 0; border-top: 1px solid var(--ch-border); border-bottom: 1px solid var(--ch-border); }
.channel-feed-videos h2 { margin: 0; font: 700 1.05rem var(--ppvi-sans, system-ui, sans-serif); color: var(--ppvi-ink, #1f1c17); padding-left: .55rem; border-left: 4px solid var(--ch-red); }
.channel-video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.channel-video-card { display: flex; flex-direction: column; gap: .35rem; text-decoration: none; color: inherit; }
.channel-video-thumb { position: relative; display: block; aspect-ratio: 16/9; background: #f0eee8; border-radius: 5px; overflow: hidden; }
.channel-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.channel-video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: .7rem; display: flex; align-items: center; justify-content: center; }
.channel-video-title { font: 500 .78rem/1.4 var(--ppvi-sans, system-ui, sans-serif); color: var(--ppvi-ink, #1f1c17); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.channel-video-meta { display: flex; justify-content: space-between; color: var(--ch-muted); font: 400 .72rem var(--ppvi-sans, system-ui, sans-serif); }

/* sidebar:ezine + qr */
.channel-card { background: var(--ch-card-bg); padding: .9rem; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.channel-card h2 { margin: 0 0 .8rem; padding-left: .5rem; border-left: 4px solid var(--ch-red); font: 700 .98rem var(--ppvi-sans, system-ui, sans-serif); color: var(--ppvi-ink, #1f1c17); }
.channel-ezine img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 5px; display: block; }
.channel-ezine-meta { margin: .6rem 0 0; text-align: center; font: 400 .85rem var(--ppvi-sans, system-ui, sans-serif); color: var(--ch-muted); }
.channel-ezine-meta strong { display: block; color: var(--ppvi-ink, #1f1c17); font-size: .95rem; margin-bottom: .15rem; }
.channel-ezine-link { display: block; margin: .7rem 0 0; padding: .55rem 0; text-align: center; background: #1f1c17; color: #fff; text-decoration: none; border-radius: 4px; font: 500 .85rem var(--ppvi-sans, system-ui, sans-serif); }
.channel-ezine-link:hover { background: var(--ch-red); }

.channel-qr { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; }
.channel-qr img { width: 75%; max-width: 160px; border-radius: 4px; }
.channel-qr p { margin: 0; color: var(--ch-muted); font: 400 .8rem var(--ppvi-sans, system-ui, sans-serif); }

/* feed 加载更多 */
.channel-feed-more { text-align: center; margin-top: 1.5rem; }
.channel-btn-primary { background: #1f1c17; color: #fff; border: 0; padding: .7rem 2rem; border-radius: 999px; cursor: pointer; font: 500 .9rem var(--ppvi-sans, system-ui, sans-serif); }
.channel-btn-primary:hover { background: var(--ch-red); }
.channel-btn-primary:disabled { background: #999; cursor: not-allowed; }

/* hero 区(标题 + tag 栏) */
.channel-hero { padding: 0 .25rem; }
.channel-kicker { display: inline-block; color: var(--ch-red); font: 700 .8rem var(--ppvi-sans, system-ui, sans-serif); letter-spacing: .03em; margin-bottom: .4rem; }
.channel-hero h1 { margin: 0; font: 700 1.85rem/1.2 var(--ppvi-sans, system-ui, sans-serif); color: var(--ppvi-ink, #1f1c17); }
.channel-desc { margin: .35rem 0 0; color: var(--ch-muted); font: 400 .9rem var(--ppvi-sans, system-ui, sans-serif); }

.channel-tags { display: flex; flex-wrap: wrap; gap: .35rem; padding: .9rem 0 0; }
.ppvi-tab { display: inline-block; padding: .35rem .8rem; border-radius: 999px; background: #fff; color: #6f6c66; text-decoration: none; font: 500 .82rem var(--ppvi-sans, system-ui, sans-serif); border: 1px solid #e8e3d8; }
.ppvi-tab:hover { color: var(--ch-red); border-color: var(--ch-red); }
.ppvi-tab.is-active { background: #1f1c17; color: #fff; border-color: #1f1c17; }

/* 响应式 */
@media (max-width: 991px) {
  .channel-top { grid-template-columns: 1fr; }
  .channel-mark-list { aspect-ratio: auto; }
  .channel-mark-thumb { aspect-ratio: 16/9; flex: 0 0 auto; }
  .channel-body { grid-template-columns: 1fr; }
  .channel-side { position: static; flex-direction: row; }
  .channel-side > * { flex: 1; }
}
@media (max-width: 767px) {
  .channel-page { padding-top: 1rem; }
  .channel-top { gap: 1rem; }
  .channel-mark-list { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .channel-mark-title { min-height: auto; font-size: .84rem; }
  .channel-feed-item { grid-template-columns: 120px 1fr; gap: .6rem; }
  .channel-video-grid { grid-template-columns: repeat(2, 1fr); }
  .channel-side { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .channel-flash-img,
  .channel-flash-img::before,
  .channel-flash-img::after,
  .channel-flash-img img,
  .channel-mark-thumb,
  .channel-mark-thumb::before,
  .channel-mark-thumb::after,
  .channel-mark-thumb img {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .channel-feed-thumb,
  .channel-feed-thumb::before,
  .channel-feed-thumb::after,
  .channel-feed-thumb img {
    transition: none;
  }
}