/* ========================================================================
   ② 博主
   「今晚，想和谁聊聊？」：四张博主卡（视频 / 照片）+ 两排循环滚动的照片墙。
   ======================================================================== */

/* ---- 区块标题 ---- */
.hosts-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px;margin-bottom:clamp(32px,4vw,52px)}
.hosts-head>div{min-width:0}
.hosts-head .body{max-width:25em}

/* ---- 博主卡片网格（4 列 → 平板 2 列） ---- */
.host-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.host{position:relative;display:block;overflow:hidden;aspect-ratio:9/16;border-radius:24px;background:var(--panel);border:1px solid var(--line);color:#fff;text-decoration:none;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.host:hover{transform:translateY(-6px);box-shadow:0 34px 70px -24px rgba(242,164,182,.45)}
.host video,.host>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.host .kb{animation:kenburns 16s ease-in-out infinite alternate;transform-origin:50% 35%}
.host::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,11,29,0) 52%,rgba(17,11,29,.86) 100%);pointer-events:none}
.host .vbadge{--f:240px}
.host-info{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:16px}
.host-info>div{min-width:0}
.host-info h3{margin:0;font-weight:500;font-size:clamp(16px,1.5vw,20px);line-height:1.3}
.host-info p{margin:3px 0 0;font-size:12.5px;color:rgba(255,255,255,.76);font-variant-numeric:tabular-nums}
.chat{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:12px;background:#fff;color:var(--night);font-size:13.5px;font-weight:500;white-space:nowrap}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.1)}}

/* ---- 响应式 ---- */
@media (max-width:1000px){.host-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.host{border-radius:18px}.host-info{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}.host-info h3{font-size:15px}.chat{height:30px;padding:0 12px;font-size:12.5px}}

/* ---- 照片墙：每排照片复制一份（.m-dup），整排向左移动 50% 形成无缝循环；鼠标停留时暂停 ---- */
.marquee{display:grid;gap:12px;margin-top:clamp(48px,6vw,84px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.m-row{display:flex;gap:12px;width:max-content;padding-right:12px;animation:marquee 70s linear infinite}
.m-row.rev{animation-direction:reverse;animation-duration:80s}
.marquee:hover .m-row{animation-play-state:paused}
.m-row img{display:block;flex:none;max-width:none;width:clamp(128px,12.5vw,180px);height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:18px;background:var(--panel)}
.m-cap{margin:22px 0 0;text-align:center;font-size:13px;letter-spacing:.12em;color:var(--dim)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.m-dup{display:contents}
@media (prefers-reduced-motion:reduce){.marquee{overflow-x:auto}}