/* Banned Admin Solutions - product page + tutorial library.
   Loaded after styles.css; uses the same custom properties. */

/* ---------- misc ---------- */
.hidden{display:none !important}
[hidden]{display:none !important}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;background:var(--panel-2);border:1px solid var(--line);
  border-radius:6px;padding:2px 6px;color:var(--ink);
}

/* ---------- demo cards ---------- */
.demo-grid{display:grid;gap:16px;margin-top:6px}
.demo-card{
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-2);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;gap:10px;
}
.demo-card h3{margin:0;font-size:1.2rem}
.demo-card p{margin:0;color:var(--ink-2);font-size:.98rem}
.demo-card .btn{align-self:flex-start;margin-top:auto}
.pill{
  align-self:flex-start;margin:0;font-size:.76rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;
}

/* ---------- video cards ---------- */
.video-grid{display:grid;gap:18px;margin-top:6px}
.video-card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
}
.video-card video{
  display:block;width:100%;height:auto;aspect-ratio:16/10;
  background:#000;object-fit:contain;
}
.vc-body{padding:16px 18px 18px}
.vc-body h3{margin:0 0 6px;font-size:1.04rem}
.vc-body p{margin:0;color:var(--ink-2);font-size:.94rem;line-height:1.5}
.vc-meta{margin-top:8px !important;color:var(--ink-3) !important}

/* ---------- the code door ---------- */
.code-form{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:4px;
}
.code-form .field{flex:1 1 260px;margin:0}
.code-form label span{
  display:block;font-size:.86rem;color:var(--ink-2);margin-bottom:6px;
}
.code-form input{
  width:100%;padding:14px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);
  font-size:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.04em;
}
.code-form input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.code-form .btn{flex:0 0 auto}
.lib-foot{margin-top:18px}

/* ---------- wider screens ---------- */
@media (min-width:780px){
  .demo-grid{grid-template-columns:1fr 1fr}
  .video-grid{grid-template-columns:1fr 1fr}
}