/* ============================================================
   流浪地球宇宙 · variant-b.css — 风格 B 主题层(方案 B)
   内容 = mobile-preview/mobile/b.css,每条规则包进
   @media (max-width: 768px) + [data-variant="b"] 作用域。
   ============================================================ */

@media (max-width: 768px) {
  /* ============================================================
     Direction B — Horizontal Rails (横滑栏目)
     Hero + swipeable card rails per section. Shared across B's pages.
     Loaded after mobile-base.css.
     ============================================================ */
  [data-variant="b"] .hero--page{height:58vh;min-height:440px;}
  [data-variant="b"] .hero-title-overlay h1{font-size:clamp(40px,13vw,58px);max-width:11ch;}


  /* category chip strip (secondary nav) */
  [data-variant="b"] .chips{
    display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
    padding:20px var(--pad-x);border-bottom:1px solid var(--border);
    -webkit-overflow-scrolling:touch;
  }
  [data-variant="b"] .chips::-webkit-scrollbar{display:none;}
  [data-variant="b"] .chip{
    flex:0 0 auto;font-family:var(--font-mono);font-size:11px;font-weight:600;
    letter-spacing:0.14em;text-transform:uppercase;
    padding:9px 16px;border:1px solid var(--border);border-radius:100px;
    color:var(--muted);transition:all .2s var(--ease);white-space:nowrap;
  }
  [data-variant="b"] .chip.active{background:var(--fg);color:var(--bg);border-color:var(--fg);}


  /* rail section */
  [data-variant="b"] .section--rail{padding:46px 0 8px;max-width:none;}
  [data-variant="b"] .section--rail .section-title{padding:0 var(--pad-x);margin-bottom:24px;font-size:34px;}
  [data-variant="b"] .section--rail .m-cat{margin:0 var(--pad-x) 22px;}
  [data-variant="b"] .rail{
    display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:0 var(--pad-x);scroll-padding-inline:var(--pad-x);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  [data-variant="b"] .rail::-webkit-scrollbar{display:none;}
  [data-variant="b"] .rail-card{flex:0 0 auto;width:250px;scroll-snap-align:start;}
  [data-variant="b"] .rail-card.lg{width:300px;}
  [data-variant="b"] .rail-card-img{overflow:hidden;background:#ededed;margin-bottom:13px;}
  [data-variant="b"] .rail-card-img img{width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease),transform 1.2s var(--ease);}
  [data-variant="b"] .rail-card:active .rail-card-img img{opacity:.8;}
  [data-variant="b"] .rail-ar-3-2 .rail-card-img{aspect-ratio:3/2;}
  [data-variant="b"] .rail-ar-4-5 .rail-card-img{aspect-ratio:4/5;}
  [data-variant="b"] .rail-ar-1-1 .rail-card-img{aspect-ratio:1/1;}
  [data-variant="b"] .rail-ar-2-3 .rail-card-img{aspect-ratio:2/3;}
  [data-variant="b"] .rail-tag{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
  [data-variant="b"] .rail-title{font-family:var(--font-zh);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-0.005em;margin:0;color:var(--fg);text-wrap:pretty;}
  [data-variant="b"] .rail-title .en{display:block;font-family:var(--font-sans);font-weight:600;font-size:0.82em;color:var(--muted);margin-top:2px;}
  [data-variant="b"] .rail-end{flex:0 0 auto;width:4px;}


  /* archive: era timeline as a rail of cards (override base stacked) */
  [data-variant="b"] .m-eras.rail{display:flex;flex-direction:row;}
  [data-variant="b"] .m-eras.rail .m-era{flex:0 0 auto;width:236px;scroll-snap-align:start;border-top:1px solid var(--fg);padding-top:18px;}


  /* plaza: topic / contributor rail cards (text, no image) */
  [data-variant="b"] .t-card{flex:0 0 auto;width:232px;scroll-snap-align:start;border:1px solid var(--border);padding:18px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:150px;transition:border-color .2s var(--ease);}
  [data-variant="b"] .t-card:hover{border-color:var(--fg);}
  [data-variant="b"] .t-card .ts{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px;}
  [data-variant="b"] .t-card .tt{font-family:var(--font-zh);font-size:16px;font-weight:600;line-height:1.32;margin:0;text-wrap:pretty;}
  [data-variant="b"] .t-card .tn{font-family:var(--font-sans);font-size:26px;font-weight:800;letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums;}
  [data-variant="b"] .t-card .tn small{font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-left:5px;}
  [data-variant="b"] .t-card.contrib{min-height:120px;}


  /* merch: product card inside a rail */
  [data-variant="b"] .rail .m-merch{flex:0 0 auto;width:212px;scroll-snap-align:start;}
}