/* tokens */
:root{ --mh-blue:#3498db; --mh-grey:#d1d5db; --mh-muted:#6b7280; }

.mh-poster, .mh-card{ box-sizing:border-box; }

/* single view: neutral grey */
.path-mod-data .mh-poster{
  max-width:980px; margin:24px auto; background:#fff;
  border:2px solid var(--mh-grey); border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.06); padding:24px;
}
.mh-header{ text-align:center; padding:8px 16px 12px; border-bottom:2px solid #e5e7eb; }
.mh-header h1{ margin:0; font-size:2.2rem; letter-spacing:.5px; }
.mh-figure{ margin:18px auto; text-align:center; }
.mh-figure img{ max-width:100%; height:auto; border-radius:12px; border:1px solid #e5e7eb; }
.mh-meta{ margin-top:10px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px 18px; font-size:1.05rem; }
.mh-footer{ margin-top:14px; padding-top:12px; border-top:2px solid #e5e7eb; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mh-sub{ color:var(--mh-muted); font-size:.92rem; }

/* list grid */
.mod-data-templates .defaulttemplate{
  display:grid !important; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px;
}

/* card */
.mh-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  border:4px solid var(--mh-blue); border-radius:16px; background:#fff; padding:16px;
  box-shadow:0 2px 12px rgba(0,0,0,.04); transition:transform .2s ease, box-shadow .2s ease;
}
.mh-card:hover{ transform:translateY(-4px); box-shadow:0 6px 20px rgba(0,0,0,.08); }

.mh-thumb{ display:flex; align-items:center; justify-content:center; }
.mh-thumb img{
  width:100%; max-width:280px; max-height:180px; height:auto; object-fit:contain;
  border-radius:8px; border:1px solid #e5e7eb; display:block; margin:0 auto;
}
.mh-card-body h3{ margin:8px 0 6px; }
.mh-line{ margin:2px 0; }
.mh-muted{ color:var(--mh-muted); margin:4px 0; }

/* responsive */
@media (max-width:768px){ .mh-card{ padding:14px; } .mh-thumb img{ max-width:90%; max-height:160px; } }
@media (max-width:480px){ .mh-thumb img{ max-width:100%; max-height:140px; } }

/* print */
@media print{
  .mh-poster{ border:none; box-shadow:none; padding:0; max-width:100%; }
  .mh-actions, .mh-card-actions{ display:none !important; }
}