/* ===== COMPONENTS GALLERY ===== */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--cr-space-4); }
.gcard { display:flex; flex-direction:column; padding:var(--cr-space-5); border-radius:var(--cr-radius-surface); background:var(--cr-color-surface-default);
  border:1px solid var(--cr-site-hairline); transition:all var(--cr-motion-duration-short) var(--cr-motion-ease-standard); }
.gcard:hover { transform:translateY(-3px); box-shadow:var(--cr-shadow-elevation-3); border-color:var(--cr-color-action-primary-fill); }
.gcard .top { display:flex; align-items:center; gap:12px; }
.gcard .ic { width:42px; height:42px; border-radius:var(--cr-radius-control); display:flex; align-items:center; justify-content:center;
  background:var(--cr-color-action-primary-state-hover); color:var(--cr-color-action-primary-text); flex:0 0 auto; }
.cr[data-theme="dark"] .gcard .ic { color:var(--cr-color-text-primary); }
.gcard .ic svg { width:20px; height:20px; }
.gcard h3 { font-size:1.05rem; }
.gcard p { font-size:.84rem; color:var(--cr-color-text-secondary); margin-top:6px; line-height:1.5; flex:1; }
.gcard .demo { margin:16px 0; padding:16px; border-radius:var(--cr-radius-control); background:var(--cr-site-surface-tint-1);
  border:1px solid var(--cr-site-hairline); min-height:70px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.gcard .foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.gcard .sblink { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:var(--cr-color-action-tertiary-fill); }
.gcard .sblink svg { width:14px; height:14px; }