/* ==========================================================================
   原生 feed:Google 评论 / YouTube / Instagram

   替掉三个 Elfsight 组件 —— 它们在手机上按桌面版式渲染,被视口切掉半截,
   而内部布局从 CSS 改不了。这里全部 mobile-first:默认单列,靠断点往上加,
   任何一档都不允许横向溢出(UX 规范里 Avoid horizontal scrolling 是 High)。
   ========================================================================== */

/* 三块共用的头部 */
.rev__top,.tube__top,.igf__top{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px var(--sp-4);
  padding-bottom:var(--sp-4);margin-bottom:var(--sp-5);
  border-bottom:1px solid var(--line)}
.rev__cta,.tube__cta,.igf__cta{
  margin-left:auto;flex:0 0 auto;color:var(--accent);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;font-size:14.5px;
  transition:color var(--dur-fast) var(--ease)}
.rev__cta:hover,.tube__cta:hover,.igf__cta:hover{color:var(--accent-quiet)}

/* ── Google 评论 ─────────────────────────────────────────── */
.rev__score{display:flex;align-items:baseline;gap:10px;margin:0}
.rev__score b{font-family:var(--font-display);font-weight:700;line-height:.9;
  font-size:clamp(34px,9vw,54px);
  background:var(--brand-type);-webkit-background-clip:text;background-clip:text;color:transparent}
.rev__stars{color:var(--brand-red);font-size:clamp(15px,4vw,19px);letter-spacing:.1em}
.rev__meta{color:var(--ink-muted);font-weight:600}
.rev__sum{margin:0 0 var(--sp-5);font-size:clamp(16.5px,4.2vw,19px);line-height:1.62;
  font-weight:500;color:var(--ink-muted);max-width:70ch}
.rev__grid{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
.rev__card{min-width:0;padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.024),transparent 52%),var(--surface)}
.rev__who{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.rev__who b{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:15.5px;letter-spacing:.04em}
.rev__who .mono{color:var(--ink-faint);font-size:13px;letter-spacing:.1em}
/* 每条评论自己的星级 —— 值来自组件的 aria-label,不是拿总分 5.0 套上去的 */
.rev__rate{color:var(--brand-red);font-size:14px;letter-spacing:.06em;line-height:1;
  flex:0 0 auto;white-space:nowrap}
.rev__txt{margin:0;font-size:16px;line-height:1.62;color:var(--ink-muted);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

/* ── YouTube ─────────────────────────────────────────────── */
.tube__name{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,4.6vw,22px);letter-spacing:.03em}
.tube__stats{color:var(--ink-muted);font-weight:600;width:100%}
.tube__grid{display:grid;gap:var(--sp-5) var(--sp-4);grid-template-columns:minmax(0,1fr);
  margin:0;padding:0;list-style:none}
.tube__card{min-width:0}
.tube__card a{display:block}
.tube__shot{position:relative;display:block;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);aspect-ratio:16/9}
.tube__shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.tube__card a:hover .tube__shot img,
.tube__card a:focus-visible .tube__shot img{transform:scale(1.045)}
.tube__play{position:absolute;inset:0;margin:auto;width:54px;height:38px;border-radius:9px;
  background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px);
  transition:background var(--dur-fast) var(--ease)}
.tube__play::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.tube__card a:hover .tube__play{background:var(--brand-sweep);border-color:transparent}
.tube__dur{position:absolute;right:8px;bottom:8px;padding:3px 8px;border-radius:4px;
  background:rgba(0,0,0,.76);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.06em}
.tube__t{display:block;margin-top:var(--sp-4);font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;font-size:clamp(15px,3.9vw,17px);line-height:1.16;letter-spacing:.02em;
  color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tube__meta{display:block;margin-top:8px;color:var(--ink-faint);font-size:13px;letter-spacing:.1em}

/* ── Instagram ───────────────────────────────────────────── */
.igf__handle{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,4.6vw,22px);letter-spacing:.03em}
.igf__stats{color:var(--ink-muted);font-weight:600;width:100%}
.igf__grid{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0;padding:0;list-style:none}
.igf__tile{min-width:0}
.igf__tile a{display:block;position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);aspect-ratio:1}
.igf__tile img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s var(--ease)}
.igf__tile a:hover img,.igf__tile a:focus-visible img{transform:scale(1.06);filter:saturate(1.06)}

/* ── 往上加断点(mobile-first) ────────────────────────────── */
@media (min-width:600px){
  .rev__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tube__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .igf__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tube__stats,.igf__stats{width:auto}
}
@media (min-width:1000px){
  .rev__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tube__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ── 评论:桌面用客户自己的 Elfsight 组件,手机用上面的原生实现 ──────────
   组件在窄视口下仍按桌面版式渲染、被切掉半截,内部布局从外面改不了,所以
   手机保持原生版。两份内容同源(都是那 384 条 Google 评论),不是两套说法。
   js/embeds.js 也只在桌面才去取 platform.js,手机一个字节都不下载。      */
.rev__elf{display:none}
.rev__elf .elfsight-app-36b3b12b-1083-448e-a715-8e4e0cf285dd{min-height:420px}
@media (min-width:901px){
  .rev__elf{display:block}
  .rev--native{display:none}
}