/* Vivid controls for tenant sites.
   NO HEX IN THIS FILE. Every colour is a --vv-* token the tenant sets, which is
   what lets two sites run identical code and look nothing alike. If you find
   yourself reaching for a hex value, the token is missing; add the token. */

.vv-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.vv-tile{border:1px solid var(--vv-line);border-left:3px solid var(--vv-line);
  border-radius:var(--vv-radius);background:var(--vv-surface);padding:13px 16px}
.vv-tile-accent{border-left-color:var(--vv-accent)}
.vv-tile-n{font-size:1.55rem;font-weight:800;color:var(--vv-ink);line-height:1.1;font-variant-numeric:tabular-nums}
.vv-tile-l{font-size:.8rem;color:var(--vv-ink-soft);margin-top:3px}

.vv-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(var(--vv-card-min,288px),1fr))}
.vv-card{display:block;background:var(--vv-surface);border:1px solid var(--vv-line);
  border-radius:var(--vv-radius);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .15s,box-shadow .15s}
a.vv-card:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgb(0 0 0 / .09)}
.vv-card-img{display:block;width:100%;height:210px;object-fit:cover;background:var(--vv-surface-alt)}
.vv-card-body{padding:18px 20px}
.vv-card-eyebrow{display:block;font-size:.74rem;color:var(--vv-ink-soft);margin-bottom:5px}
.vv-card h3{margin:0 0 8px}
.vv-card p{font-size:.9rem;color:var(--vv-ink-soft);margin:0 0 10px}
.vv-card-more{font-size:.8rem;color:var(--vv-accent);font-weight:600}

.vv-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:12px;-webkit-overflow-scrolling:touch}
.vv-rail::-webkit-scrollbar{height:8px}
.vv-rail::-webkit-scrollbar-thumb{background:var(--vv-line);border-radius:4px}
.vv-slide{flex:0 0 auto;width:var(--vv-slide-w,420px);margin:0;scroll-snap-align:center}
.vv-slide img{display:block;width:100%;height:250px;object-fit:cover;
  border-radius:var(--vv-radius);background:var(--vv-surface-alt)}
.vv-slide figcaption{font-size:.72rem;color:var(--vv-ink-soft);margin-top:7px;line-height:1.45}

.vv-play{position:relative;display:block}
.vv-play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--vv-surface);background:rgb(0 0 0 / .28);border-radius:var(--vv-radius);
  transition:background .2s}
.vv-play:hover .vv-play-btn{background:rgb(0 0 0 / .12)}

.vv-media{margin:0 0 26px;border:1px solid var(--vv-line);border-radius:var(--vv-radius);
  overflow:hidden;background:var(--vv-surface-alt)}
.vv-media img{display:block;width:100%;height:auto}
.vv-media figcaption{font-size:.82rem;color:var(--vv-ink-soft);padding:10px 14px}

.vv-notice{border:1px solid var(--vv-line);border-left-width:3px;
  border-radius:0 var(--vv-radius) var(--vv-radius) 0;
  background:var(--vv-surface-alt);padding:14px 18px;margin:24px 0}
.vv-notice strong{display:block;margin-bottom:7px;color:var(--vv-ink)}
.vv-notice ul{margin:0 0 8px;padding-left:20px}
.vv-notice li{font-size:.86rem;margin:0 0 5px;color:var(--vv-ink)}
.vv-notice p{font-size:.78rem;color:var(--vv-ink-soft);margin:0}
.vv-info{border-left-color:var(--vv-deep)}
.vv-warn{border-left-color:var(--vv-accent);border-width:2px;border-left-width:3px}
.vv-quiet{border-left-color:var(--vv-line)}
.vv-strong{border-left-color:var(--vv-accent);background:var(--vv-surface)}