/* 元就工房 ブログ一覧 v1.0.3 — すべて .mk-blog- で始まるクラスに限定 */
/* 列数：767px以下 1列／768〜1000px 2列／1001px以上 3列 */
.mk-blog-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .mk-blog-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }
}
@media (min-width: 1001px) {
  .mk-blog-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.mk-blog-item {
  margin: 0;
  padding: 0;
  min-width: 0;
}
.mk-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e3dbd3;
  border-radius: 6px;
  color: #463338;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
.mk-blog-card:hover,
.mk-blog-card:focus-visible {
  color: #463338;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(70, 51, 56, 0.15);
}
.mk-blog-card:focus-visible {
  outline: 2px solid #b51800;
  outline-offset: 2px;
}
/* 画像は3:2で切り抜く（aspect-ratio 非対応の古いブラウザでも崩れない指定） */
/* 画像の指定は class（.mk-blog-img）だけに頼らず、構造（.mk-blog-thumb の直下の img）でも当てる。
   本番ではテーマ側で img の class が wp-edited-image に置き換わり width/height 属性も消えるため、
   class だけだと指定が効かず、WordPressの sizes="auto" 用の既定値で高さが1500pxになっていた（v1.0.3で修正） */
.mk-blog-thumb {
  position: relative;
  margin: 0;
  padding-top: 66.6667%;
  overflow: hidden;
  background: #f3eee9;
}
.mk-blog-img,
.mk-blog-thumb > img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.mk-blog-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px 18px 20px;
}
/* テーマ全体の h3（下線・赤い飾り線・大きな文字）をカードの中だけ打ち消す */
.mk-blog-title {
  position: static;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
  color: #463338;
}
.mk-blog-title::before,
.mk-blog-title::after {
  content: none;
  display: none;
}
.mk-blog-excerpt {
  margin: 0;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
}
@media (max-width: 767px) {
  .mk-blog-title {
    font-size: 17px;
    font-size: 1.7rem;
  }
}
/* 「ブログ一覧を見る」リンク：ボタンの見た目はテーマの .more / .add_arrow に任せ、カードとの間隔だけ指定する */
.mk-blog-more {
  margin-top: 30px;
}
@media (prefers-reduced-motion: reduce) {
  .mk-blog-card {
    transition: none;
  }
}