/* ==========================================================================
   VPNUJ — streaming.css
   流媒体分区解锁页:页头分栏、支持矩阵、机制分栏、画质阶梯、报错表、
   结尾链接。全部颜色/圆角/间距引用 base.css 的设计令牌。
   ========================================================================== */

/* ---- 1. 页头 ---- */

.media-head{
  position:relative;
  max-width:100%;
  padding-block:clamp(30px,4vw,54px) clamp(16px,2.2vw,28px);
}

.media-head-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);
  align-items:start;
}

.media-head-grid > *{min-width:0;}

.media-head h1{
  margin-top:12px;
  font-size:clamp(34px,4.6vw,56px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.media-head .lede{
  margin-top:14px;
  max-width:58ch;
}

.media-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.media-facts .panel-body{padding:22px;}

.media-facts .fact-ledger{margin-top:12px;}

.media-facts-note{
  margin-top:14px;
  font-size:12.5px;
  line-height:1.65;
  color:var(--text-muted);
}

/* ---- 2. 支持矩阵 ---- */

.media-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin:0 0 16px;
  padding:0;
  list-style:none;
}

.st-yes,
.st-part,
.st-no{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.02em;
  white-space:nowrap;
}

.st-yes{color:var(--text);}
.st-part{color:var(--warn);}
.st-no{color:var(--text-soft);}

.st-yes::before,
.st-part::before,
.st-no::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  flex:none;
}

.st-yes::before{background:var(--success);}
.st-part::before{background:var(--warn);}
.st-no::before{background:var(--border-strong);}

.matrix-table{min-width:820px;}
.matrix-table th,
.matrix-table td{white-space:nowrap;}

.media-note{
  margin-top:14px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ---- 3. 机制分栏 ---- */

.media-split{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:16px;
  align-items:stretch;
}

.media-split > *{min-width:0;}

.media-split .prose{max-width:none;}

.media-ink .panel-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:26px;
}

.media-ink h3{
  font-size:20px;
  line-height:1.28;
}

.media-ink p{
  font-size:13.5px;
  line-height:1.72;
  color:var(--ink-muted);
}

.media-ink strong{
  color:var(--ink-text);
  font-weight:600;
}

.media-arcs{
  width:100%;
  height:auto;
  margin-top:auto;
  padding-top:16px;
}

.media-arcs path{
  fill:none;
  stroke-width:1.2;
  stroke-linecap:round;
}

.media-arcs .arc-a{stroke:var(--accent);opacity:.85;}
.media-arcs .arc-b{stroke:var(--ink-line-hi);}
.media-arcs circle{fill:var(--white);opacity:.55;}

/* ---- 4. 画质阶梯 ---- */

.media-two-col{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 32px;
  margin-top:26px;
}

.media-two-col > *{min-width:0;}

.media-two-col h3{margin-bottom:8px;}

.media-two-col p{
  font-size:14.5px;
  line-height:1.72;
  color:var(--text-muted);
}

/* ---- 5. 报错表 ---- */

.error-table{min-width:680px;}

.error-table td:first-child{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text);
  white-space:nowrap;
}

/* ---- 6. 结尾链接 ---- */

.media-next{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:22px;
}

/* ---- 7. 响应式 ---- */

@media (max-width:980px){
  .media-head-grid{grid-template-columns:minmax(0,1fr);}
  .media-split{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:760px){
  .media-two-col{grid-template-columns:minmax(0,1fr);gap:18px;}
}

@media (max-width:640px){
  .media-head h1{font-size:clamp(28px,7.6vw,36px);letter-spacing:-.025em;}
  .media-facts .panel-body{padding:18px;}
  .media-ink .panel-body{padding:20px;}
  .media-ink h3{font-size:18px;}
  .media-cta .btn{width:100%;}
}