/* Mountain View Business Campus - site video tour
   Palette inherited from the MVBC investor brochure. */
:root{
  --bg:#101417;
  --deep:#1B2529;
  --line:#314047;
  --text:#EDE8E0;
  --text-2:#A8B2B8;
  --text-3:#7A868D;
  --accent:#A9642B;
  --accent-lift:#C87F3F;
  --ground:#FF0000;
  --rooftop:#FFD400;
  --interior:#7FF5F5;
  --rail:clamp(240px,26vw,380px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC","Source Han Sans SC","Hiragino Sans GB",sans-serif;
  line-height:1.7;-webkit-font-smoothing:antialiased;
}
.en,.num{font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-feature-settings:"tnum";}
img{max-width:100%;display:block;}

/* ---------- header ---------- */
.masthead{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:16px;
  padding:14px clamp(16px,3vw,34px);
  background:rgba(16,20,23,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.masthead img{width:42px;height:auto;flex:none;}
.masthead .titles{min-width:0;}
.masthead h1{margin:0;font-size:clamp(15px,2vw,19px);font-weight:700;letter-spacing:-.01em;}
.masthead .sub{
  margin:1px 0 0;font-size:11.5px;color:var(--text-3);
  letter-spacing:.14em;text-transform:uppercase;
}
.masthead .stat{margin-left:auto;font-size:12px;color:var(--text-2);text-align:right;flex:none;}

/* ---------- section filter ---------- */
.filters{
  position:sticky;top:70px;z-index:35;
  display:flex;gap:8px;flex-wrap:wrap;
  padding:11px clamp(16px,3vw,34px);
  background:rgba(16,20,23,.95);border-bottom:1px solid var(--line);
}
.chip{
  display:flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:15px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--text-2);
  font:inherit;font-size:12.5px;line-height:1.5;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.chip:hover{color:var(--text);border-color:var(--accent-lift);}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff;}
.chip .k{font-size:11px;opacity:.72;font-family:Inter,Arial,sans-serif;}
.group[hidden]{display:none;}
.card[hidden]{display:none;}

/* second level, inside the prototype section */
.subfilters{display:flex;gap:7px;flex-wrap:wrap;margin:-4px 0 15px;}
.subchip{
  display:flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:13px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--text-3);
  font:inherit;font-size:11.5px;line-height:1.5;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.subchip:hover{color:var(--text);border-color:var(--accent-lift);}
.subchip.is-on{background:var(--deep-2,#2C3A40);border-color:var(--accent-lift);color:var(--text);}
.subchip .k{font-size:10.5px;opacity:.7;font-family:Inter,Arial,sans-serif;}

/* ---------- layout ---------- */
.shell{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);
  padding:clamp(20px,3vw,34px);
  align-items:start;
}

/* ---------- map rail ---------- */
.maprail{position:sticky;top:132px;}   /* clears the masthead plus the filter bar */
.maprail > summary{display:none;}
.mapwrap{
  position:relative;line-height:0;
  border:1px solid var(--line);background:var(--deep);
}
.mapwrap img{width:100%;height:auto;}
.hotspot{
  position:absolute;transform:translate(-50%,-50%);
  border:none;padding:0;border-radius:50%;cursor:pointer;
  background:transparent;box-shadow:0 0 0 0 rgba(201,127,63,.55);
  transition:box-shadow .18s ease,background .18s ease;
}
.hotspot:hover,.hotspot:focus-visible,.hotspot.is-active{
  outline:none;background:rgba(255,255,255,.22);
  box-shadow:0 0 0 4px rgba(201,127,63,.85),0 0 16px 5px rgba(201,127,63,.5);
}
.legend{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  margin-top:12px;font-size:12px;color:var(--text-2);
}
.legend span{display:flex;align-items:center;gap:7px;}
.legend i{width:11px;height:11px;border-radius:50%;flex:none;}
.maphint{margin:10px 0 0;font-size:11.5px;color:var(--text-3);}

/* ---------- video sections ---------- */
.group{margin-bottom:clamp(28px,4vw,46px);scroll-margin-top:142px;}
.group > h2{
  display:flex;align-items:center;gap:10px;
  margin:0 0 4px;font-size:15px;font-weight:700;letter-spacing:.01em;
}
.group > h2 i{width:12px;height:12px;border-radius:50%;flex:none;}
.group > h2 .count{
  margin-left:auto;font-size:11.5px;font-weight:400;
  color:var(--text-3);letter-spacing:.1em;
}
.group > p{
  margin:0 0 16px;font-size:12.5px;color:var(--text-3);
  padding-bottom:12px;border-bottom:1px solid var(--line);
}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:clamp(12px,1.6vw,20px);}
.card{
  display:block;width:100%;
  border:1px solid var(--line);background:var(--deep);
  cursor:pointer;padding:0;text-align:left;color:inherit;font:inherit;
  transition:border-color .18s ease,transform .18s ease;
  scroll-margin-top:96px;
}
.card:hover,.card:focus-visible,.card.is-active{
  outline:none;border-color:var(--accent-lift);transform:translateY(-2px);
}
.thumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#0A0D0F;}
.thumb img{width:100%;height:100%;object-fit:cover;transition:opacity .2s ease;}
/* Show the whole frame when cropping it to 16:9 would cut off real content. */
.thumb img.fit{object-fit:contain;}
.card:hover .thumb img{opacity:.82;}
.thumb .play{
  position:absolute;inset:0;margin:auto;width:46px;height:46px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(16,20,23,.62);border:1.5px solid rgba(237,232,224,.9);
}
.thumb .play::after{
  content:"";border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--text);margin-left:3px;
}
.card:hover .play{background:var(--accent);border-color:var(--accent-lift);}
/* Photo cards get a quieter affordance than the video play badge. */
.thumb .zoom{
  position:absolute;right:8px;bottom:8px;width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(16,20,23,.62);border:1px solid rgba(237,232,224,.55);
  opacity:0;transition:opacity .18s ease,background .18s ease;
}
.card:hover .zoom,.card:focus-visible .zoom{opacity:1;background:var(--accent);border-color:var(--accent-lift);}
.thumb .zoom::before,.thumb .zoom::after{content:"";position:absolute;background:var(--text);}
.thumb .zoom::before{width:12px;height:1.5px;}
.thumb .zoom::after{width:1.5px;height:12px;}
.thumb .pin{
  position:absolute;top:8px;left:8px;min-width:24px;height:24px;padding:0 6px;
  display:grid;place-items:center;border-radius:12px;
  font-size:11.5px;font-weight:700;color:#101417;
}
.thumb .dur{
  position:absolute;right:8px;bottom:8px;
  padding:1px 6px;border-radius:3px;font-size:11px;
  background:rgba(16,20,23,.78);color:var(--text);
}
.thumb .cat{
  position:absolute;top:8px;left:8px;
  padding:1px 7px;border-radius:3px;font-size:10.5px;
  background:rgba(16,20,23,.8);color:var(--text-2);
}
.meta{display:block;padding:10px 12px 12px;}
.meta .t{display:block;font-size:13px;font-weight:600;line-height:1.45;}
.meta .c{display:block;margin-top:3px;font-size:11.5px;color:var(--text-3);line-height:1.5;}

/* ---------- lightbox ---------- */
/* Opaque: the masthead's backdrop-filter shows through a translucent overlay. */
.lb{position:fixed;inset:0;z-index:100;display:none;background:#0B0E10;}
.lb.open{display:grid;grid-template-rows:auto 1fr auto;}
.lb-bar{
  display:flex;align-items:center;gap:14px;
  padding:14px clamp(14px,3vw,26px);border-bottom:1px solid var(--line);
}
.lb-bar .t{font-size:14px;font-weight:600;}
.lb-bar .c{font-size:12px;color:var(--text-3);}
/* Fill the row and letterbox instead of max-height:100% — a centred grid item has an
   indefinite height, so the percentage resolves to none and portrait clips overflow. */
.lb-stage{padding:clamp(10px,2vw,22px);min-height:0;overflow:hidden;}
.lb-stage video{width:100%;height:100%;object-fit:contain;background:#000;}
.lb-stage img{width:100%;height:100%;object-fit:contain;}
.lb-nav{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px;border-top:1px solid var(--line);
}
.lb button{
  background:transparent;border:1px solid var(--line);color:var(--text);
  font:inherit;font-size:13px;padding:7px 15px;cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.lb button:hover:not(:disabled){border-color:var(--accent-lift);background:var(--deep);}
.lb button:disabled{opacity:.35;cursor:default;}
.lb .close{margin-left:auto;}
.lb-nav .pos{font-size:12px;color:var(--text-3);min-width:72px;text-align:center;}

footer{
  padding:26px clamp(16px,3vw,34px) 40px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--text-3);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .shell{grid-template-columns:1fr;}
  .maprail{position:static;border:1px solid var(--line);background:var(--deep);}
  .maprail > summary{
    display:flex;align-items:center;gap:9px;cursor:pointer;
    padding:12px 14px;font-size:13px;font-weight:600;list-style:none;
  }
  .maprail > summary::-webkit-details-marker{display:none;}
  .maprail > summary::after{content:"\25BE";margin-left:auto;color:var(--text-3);}
  .maprail[open] > summary::after{content:"\25B4";}
  .maprail .inner{padding:0 14px 14px;}
  .mapwrap{max-width:420px;margin:0 auto;}
}
@media (max-width:900px){
  /* Wrapped chips would pin ~130px of a phone screen; scroll them in one row. */
  .filters{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding:9px clamp(12px,3vw,20px);
  }
  .filters::-webkit-scrollbar{display:none;}
  .chip{flex:none;}
}
@media (max-width:560px){
  .masthead .stat{display:none;}
  .cards{grid-template-columns:1fr 1fr;gap:10px;}
  .meta{padding:8px 9px 10px;}
  .meta .t{font-size:12px;}
}