/* =============================================================================
   TIPS page components: video cards and TikTok cards (layout/header: css/page.css, tokens: css/base.css)
   .vgrid = card grid, .vcard = one tip, .tk = TikTok cover/player, .empty = "coming soon" state
   ============================================================================= */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:8px}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.vcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(0,0,0,.35)}
.vcard video{display:block;width:100%;max-height:72vh;background:#000}
.vcard .vt{padding:14px 16px 16px}
.vcard h2{font-family:"Bricolage Grotesque","Cairo",sans-serif;font-size:1.15rem;margin:0 0 4px}
.vcard p{margin:0;color:var(--muted)}
.empty{text-align:center;padding:36px 20px;border:1.5px dashed var(--line);border-radius:16px;color:var(--muted)}
.empty b{display:block;font-size:2.2rem;margin-bottom:6px}
.tk{position:relative;aspect-ratio:1;width:min(100%,260px);margin:16px auto 0;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,var(--pine),#2a7d6c 55%,var(--accent)) center/cover no-repeat;display:grid;place-items:center;cursor:pointer}
.tk .tkp{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);color:#10241F;display:grid;place-items:center;font-size:1.5rem;padding-inline-start:4px;box-shadow:0 8px 20px rgba(0,0,0,.35);transition:transform .25s}
.tk:hover .tkp{transform:scale(1.12)}
.tk.live{aspect-ratio:9/16;width:auto;max-width:100%;height:min(52vh,420px);cursor:auto;background:#000}
.tk iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vt .btn{margin-top:12px;display:inline-block;background:var(--pine);color:var(--on-pine);text-decoration:none;font-weight:600;padding:9px 20px;border-radius:999px;transition:transform .2s}
.vt .btn:hover{transform:translateY(-2px)}