/* =========================================================
   WordPress用の追記（手順3）
   ========================================================= */

/* ログイン中は画面の上に管理バーが出るので、ヘッダーをその下に止める */
.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* 管理バーが画面の上に固定されない幅（〜600px）は、ヘッダーを画面の上に止める */
@media (max-width: 600px) {
  .admin-bar .site-header {
    top: 0;
  }
}

/* アイキャッチ画像がない記事は、薄い青の地にロゴを置く */
.post-card__img--none {
  display: grid;
  place-items: center;
  background: var(--blue-100);
}

.post-card__img--none img {
  width: 42%;
  max-width: 160px;
  height: auto;
  opacity: 0.6;
}

/* 要約は4行まで（Figmaでいちばん多い行数。1024pxとスマホが4行）。はみ出す分は「…」
   （タイトルは行の長さをそろえる指定 text-wrap: balance が効かなくなるので、切らない） */
.post-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

/* 記事がまだ1つもないとき */
.blog__empty {
  grid-area: list;
  padding: 40px 0;
  color: var(--navy-600);
  text-align: center;
}