/* Modules Grid – v4 */
:root { --dz-primary: var(--primary, #3b82f6); --dz-surface:#ffffff; --dz-border:#e5e7eb; --dz-shadow:0 8px 20px rgba(2,6,23,.08); }

.dz-modules-grid{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr)); /* mobile: 1 */
  gap:14px;
}
@media (min-width:1024px){ /* desktop: 3 */
  .dz-modules-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
}

.dzm-card{
  position:relative;
  display:block;
  background:var(--dz-surface);
  border:1px solid var(--dz-border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--dz-shadow);
  transform:translateY(0);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-decoration:none;
}
.dzm-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(2,6,23,.12);
  border-color:color-mix(in srgb, var(--dz-primary) 35%, var(--dz-border));
}
.dzm-card__header{
  height:6px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--dz-primary) 95%, white), color-mix(in srgb, var(--dz-primary) 65%, white));
}
.dzm-card__body{
  padding:14px 14px 16px 14px;
  display:flex;
  align-items:center;
  gap:12px;
}
.dzm-card__icon{
  width:48px; height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--dz-primary) 20%, var(--dz-border));
  background:linear-gradient(180deg,#f8fafc,#eef2ff);
  flex:0 0 auto;
  overflow:hidden;
}
.dzm-card__icon img{ width:26px; height:26px; object-fit:contain; }
.dzm-emoji{ font-size:22px; line-height:1; }

/* Title+Meta column (meta under title) */
.dzm-card__text{ display:flex; flex-direction:column; min-width:0; }
.dzm-card__title{ font-weight:700; color:#0f172a; }
.dzm-card__meta{ margin-top:2px; font-size:13px; color:#64748b; }

html.dark .dzm-card{ background:#0b1220; border-color:#1f2937; }
html.dark .dzm-card__icon{ background:linear-gradient(180deg,#0f172a,#111827); border-color:color-mix(in srgb, var(--dz-primary) 20%, #1f2937); }
html.dark .dzm-card__meta{ color:#94a3b8; }

html.dark .dzm-card__title{ color:#ffffff; }