/* Wave-2 layouts (2026-10-22): sidebar · portal · mosaic · feed · wall. Enqueued only on those five. */

/* —— sidebar ≈ 爱壹帆 / 111tv: fixed vertical nav, content to the right —— */
body.layout-sidebar .xh-wrap { max-width: none; padding: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.xh-side {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; scrollbar-width: none;
  padding: 18px 14px 24px; background: var(--xh-elev); border-right: 1px solid var(--xh-line);
  display: flex; flex-direction: column; gap: 14px;
}
.xh-side::-webkit-scrollbar { display: none; }
.xh-side .xh-brand { font-size: 18px; padding: 2px 6px 6px; }
.xh-side .xh-search { min-width: 0; max-width: none; flex: 0 0 auto; }
.xh-side-links { display: flex; flex-direction: column; gap: 2px; }
.xh-side-links a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--xh-muted);
}
.xh-side-links a:hover { background: rgba(255,255,255,.06); color: var(--xh-text); }
.xh-side-links a[aria-current="page"] { background: color-mix(in srgb, var(--xh-amber) 18%, transparent); color: var(--xh-text); }
.xh-side-links a[aria-current="page"] .ap-i { color: var(--xh-amber); }
.xh-side .ap-i { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xh-side .ap-i .f { fill: currentColor; fill-opacity: .18; }
.xh-side-h { margin: 8px 10px 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--xh-muted); }
.xh-side-tags { display: flex; flex-direction: column; gap: 1px; }
.xh-side-tags a { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 6px; font-size: 13px; color: var(--xh-muted); }
.xh-side-tags a:hover, .xh-side-tags a[aria-current="page"] { background: rgba(255,255,255,.06); color: var(--xh-text); }
.xh-side-tags small { font-size: 11px; color: var(--xh-muted); opacity: .7; }
.xh-side-all { margin-top: 4px; color: var(--xh-amber) !important; }
.xh-side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--xh-line); }
.xh-side-foot .xh-acts { flex-direction: column; align-items: stretch; gap: 10px; }
.xh-side-foot .xh-acts-dl { justify-content: center; height: 36px; }
.xh-side-foot .xh-acts-login { text-align: center; }
.xh-main { min-width: 0; padding: 0 24px 24px; }
body.layout-sidebar .xh-hero { margin-top: 20px; }
body.layout-sidebar .xh-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body.layout-sidebar .xh-qr { display: none; }
@media (max-width: 900px) {
  body.layout-sidebar .xh-wrap { display: block; }
  .xh-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--xh-line); }
  .xh-side .xh-brand { flex: 1; }
  .xh-side .xh-search { order: 3; flex: 1 1 100%; }
  .xh-side-links { order: 4; flex: 1 1 100%; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .xh-side-links a { flex-shrink: 0; padding: 7px 10px; }
  .xh-side-h, .xh-side-tags { display: none; }
  .xh-side-foot { order: 2; margin: 0; padding: 0; border: 0; }
  .xh-side-foot .xh-acts { flex-direction: row; }
  .xh-main { padding: 0 16px 24px; }
  body.layout-sidebar .xh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* —— portal ≈ 乐视: film strip under the hero, then a filter board —— */
body.layout-portal .xh-hero { border-radius: var(--xh-radius-lg) var(--xh-radius-lg) 0 0; margin-bottom: 0; }
body.layout-portal .xh-hero-thumbs {
  position: static; justify-content: center; gap: 10px; padding: 12px 16px;
  background: var(--xh-elev); border-top: 1px solid var(--xh-line);
}
body.layout-portal .xh-thumb { width: 72px; height: 44px; border-radius: 4px; }
body.layout-portal .xh-thumb img { object-position: center; }
.xh-filters {
  margin: 0 0 28px; padding: 14px 20px 10px; border-radius: 0 0 var(--xh-radius-lg) var(--xh-radius-lg);
  background: var(--xh-elev); border: 1px solid var(--xh-line); border-top: 0;
}
.xh-filters-row { display: flex; gap: 14px; align-items: baseline; padding: 6px 0; border-top: 1px dashed rgba(255,255,255,.07); }
.xh-filters-row:first-child { border-top: 0; }
.xh-filters-k { flex: 0 0 56px; font-size: 12px; color: var(--xh-muted); }
.xh-filters-v { display: flex; flex-wrap: wrap; gap: 4px 2px; }
.xh-filters-v a { font-size: 13px; padding: 4px 10px; border-radius: 4px; color: var(--xh-text); }
.xh-filters-v a:hover { background: rgba(255,255,255,.08); }
.xh-filters-v a:first-child { color: var(--xh-amber); font-weight: 600; }
@media (max-width: 900px) {
  body.layout-portal .xh-hero-thumbs { display: flex; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .xh-filters-row { flex-direction: column; gap: 4px; }
  .xh-filters-k { flex-basis: auto; } /* 56px was the label width; in a column it became height */
  .xh-filters-v { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .xh-filters-v a { flex-shrink: 0; }
}

/* —— mosaic: bento tiles, 4 columns × 3 rows on desktop —— */
/* 4 cols × 3 rows, fixed areas: big 2×2 top-left, wide 2×1 top-right, four small 1×1 (two under the wide, two under the big) */
.xh-mosaic {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, 190px); gap: 10px;
  grid-template-areas: "big big wide wide" "big big s1 s2" "s3 s4 s5 s6";
  margin: 8px 0 32px;
}
.xh-tile { position: relative; display: block; border-radius: var(--xh-radius-lg); overflow: hidden; background: #1a1a1c; min-width: 0; }
.xh-tile--big { grid-area: big; }
.xh-tile--wide { grid-area: wide; }
.xh-tile--small:nth-child(3) { grid-area: s1; }
.xh-tile--small:nth-child(4) { grid-area: s2; }
.xh-tile--small:nth-child(5) { grid-area: s3; }
.xh-tile--small:nth-child(6) { grid-area: s4; }
.xh-tile--small:nth-child(7) { grid-area: s5; }
.xh-tile--small:nth-child(8) { grid-area: s6; }
.xh-tile--wide .xh-fit-fg { object-position: 50% 50%; }
.xh-tile-bg { position: absolute; inset: 0; }
.xh-tile-bg > img, .xh-tile-bg .xh-fit { position: absolute; inset: 0; width: 100%; height: 100%; }
.xh-tile-bg > img { object-fit: cover; object-position: center top; display: block; }
.xh-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,12,.92) 0%, rgba(10,10,12,.35) 45%, transparent 70%); }
.xh-tile:hover .xh-tile-bg > img, .xh-tile:hover .xh-fit-fg { transform: scale(1.03); transition: transform .4s ease; }
.xh-tile-copy { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.xh-tile-copy strong { font-size: 15px; font-weight: 650; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xh-tile--big .xh-tile-copy strong { font-size: 28px; white-space: normal; letter-spacing: -.02em; }
.xh-tile--big .xh-tile-copy { left: 22px; right: 22px; bottom: 20px; }
.xh-tile-copy .xh-eyebrow { margin: 0 0 4px; color: var(--xh-amber); font-weight: 700; font-size: 11px; letter-spacing: .08em; }
.xh-tile-meta { font-size: 12px; color: rgba(255,255,255,.65); }
@media (max-width: 900px) {
  .xh-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 300px 150px repeat(3, 150px); gap: 8px;
    grid-template-areas: "big big" "wide wide" "s1 s2" "s3 s4" "s5 s6"; }
  .xh-tile--big .xh-tile-copy strong { font-size: 22px; }
}

/* —— feed ≈ 爱壹帆 今日热点: one centred column of stories —— */
.xh-feed { max-width: 920px; margin: 0 auto 32px; }
.xh-feed > .xh-section-title { margin-bottom: 14px; }
.xh-feed-item {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.xh-feed-item:first-of-type { border-top: 0; }
.xh-feed-pic { position: relative; display: block; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #1c1c1f; }
.xh-feed-pic > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.xh-badge-eps { position: absolute; right: 6px; bottom: 6px; font-size: 11px; line-height: 1; padding: 4px 6px; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; }
.xh-feed-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xh-feed-body h3 { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.3; }
.xh-feed-body h3 a:hover { color: var(--xh-amber); }
.xh-feed-body p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--xh-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.xh-feed-meta { font-size: 12px; color: var(--xh-muted); font-variant-numeric: tabular-nums; }
.xh-feed-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.xh-feed-foot .xh-chips { margin: 0; }
body.layout-feed .xh-hero { max-width: 920px; margin-left: auto; margin-right: auto; }
body.layout-feed .xh-ad { max-width: 920px; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) {
  .xh-feed-item { grid-template-columns: 1fr; gap: 10px; }
  .xh-feed-body h3 { font-size: 16px; }
}

/* —— wall ≈ 111tv / MovieFFM: genre tabs, then a dense poster wall —— */
body.layout-wall .xh-cats { margin: 10px 0 20px; }
.xh-wall-sec { margin-bottom: 28px; }
.xh-wall-sec .xh-rail-head { margin-bottom: 14px; }
.xh-grid.xh-wall { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px 10px; }
.xh-wall .xh-card .d { font-size: 10px; }
@media (max-width: 1100px) { .xh-grid.xh-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 900px) { .xh-grid.xh-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .xh-grid.xh-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; } }