/* Blog Card — 全ページ共通コンポーネント
   HOME / archive / single関連記事 で統一使用
   ============================================================ */

/* Grid */
.mh-blog-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 8px !important;
  width: 100% !important;
}

/* Card */
.mh-bc {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  width: 100% !important;
  min-width: 0 !important;
  background: var(--mh-color-white) !important;
  border-radius: 5px !important;
  overflow: hidden !important;
}

/* Thumbnail */
.mh-bc-img {
  position: relative !important;
  overflow: hidden !important;
  height: 200px !important;
  background: var(--mh-color-light-gray) !important;
  border-radius: 5px 5px 0 0 !important;
}
.mh-bc-img img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Category badge */
.mh-bc-cat {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: var(--mh-color-pink) !important;
  color: var(--mh-color-white) !important;
  font-size: var(--mh-fs-small);
  padding: 3px 8px !important;
  border-radius: 4px !important;
  z-index: 2 !important;
}

/* Hover overlay */
.mh-bc-hover {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0.3)) !important;
  transform: translateY(-100%) !important;
  transition: transform .4s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  z-index: 1 !important;
}
.mh-bc:hover .mh-bc-hover { transform: translateY(0) !important; }
.mh-bc-hover-t {
  color: var(--mh-color-white) !important;
  font-size: var(--mh-fs-normal);
  font-weight: 700 !important;
  text-align: center !important;
}

/* Meta row */
.mh-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 10px 4px !important;
  font-size: var(--mh-fs-small);
  flex-wrap: wrap !important;
  min-height: 40px !important;
}

/* Avatar */
.mh-av {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
.mh-av-placeholder {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--mh-color-gray) !important;
  flex-shrink: 0 !important;
}

/* Author & date */
.mh-au { font-size: var(--mh-fs-normal); font-weight: 600 !important; }
.mh-dt {
  color: var(--mh-color-charcoal) !important;
  font-size: var(--mh-fs-normal);
  font-weight: 500 !important;
  margin-left: auto !important;
}

/* Tags */
.mh-tg { font-size: var(--mh-fs-small); color: var(--mh-color-charcoal) !important; padding: 0 10px 8px !important; }
.mh-tg-link { text-decoration: none !important; color: var(--mh-color-charcoal) !important; cursor: pointer !important; }
.mh-tg-link:hover { color: var(--mh-color-pink) !important; }

/* Responsive */
@media (max-width: 960px) {
  .mh-blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .mh-blog-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .mh-au { font-size: var(--mh-fs-normal); overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; }
  .mh-dt { font-size: var(--mh-fs-small); flex-shrink: 0 !important; }
}