@charset "UTF-8";

/* ============================================================================
   single-post.html — Post Detail Page
   モバイルファースト / BEM命名 / CSS変数はglobal.cssから継承
   ============================================================================ */
 
/* --------------------------------------------------------------------------
   Post — ヒーロー画像（アイキャッチ）
   -------------------------------------------------------------------------- */
 
.post__hero {
  width: 95%;
  margin: 8em auto 0 auto;
}
 
.post__hero-img {
  width: 100%;
  /* display:block / height:auto は global.css の img ルールで適用済み */
}
 
/* --------------------------------------------------------------------------
   Post — 記事ヘッダー（カテゴリー / タイトル / メタ情報）
   -------------------------------------------------------------------------- */
 
.post__header {
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-8) var(--space-4) var(--space-6);
  text-align: center;
  position: relative;
  top: -3em;
  background-color: #1a1919;
      box-shadow: 0px -10px 15px -5px #777777;
    border-radius: 10px;
}
 
/* カテゴリーバッジ */
.post__category {
  display: inline-block;
  font-size: 0.7em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  padding: 0.3em 0.9em;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   Post — タグ
   -------------------------------------------------------------------------- */

.post__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 0;
}

.post__tags a::before {
display: inline-block;
content: "#";
width: 1em;
height: 1em;
}

.post__tag {
  display: inline-block;
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: rgba(255, 255, 255, 0.05);
  padding: 0.3em 0.8em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.post__tag:hover {
  color: var(--color-gold);
  background-color: rgba(255, 255, 255, 0.1);
}

 
/* 記事タイトル — global.css h1 の font-weight:bold / font-size:3xl を上書き */
.post__title {
  font-size: clamp(1.1rem, 1rem + 2vw, 2.2rem);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3) 0;
}
 
/* 投稿日 / 著者 — global.css p の margin-bottom を打ち消す */
.post__meta {
  font-size: 0.8em;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 0;
}
 
/* --------------------------------------------------------------------------
   Post — 本文エリア
   -------------------------------------------------------------------------- */
 
.post__body {
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-4) var(--space-12);
}
 
/* 本文テキスト — global.css の p スタイル（margin / line-height）を継承 */
.post__body p {
  color: var(--color-text-secondary);
}
 
/* --------------------------------------------------------------------------
   Post — 本文中の画像（figure）
   パターンA: figure なし / パターンB: figure あり
   -------------------------------------------------------------------------- */
 
.wp-block-image {
  margin: var(--space-6) auto;
  /* 本文カラム（45rem）より狭くなるよう max-width で制御 */
  max-width: 85%;
}
 
/* figure 内の img — global.css の img ルールを継承しつつ幅を明示 */
.wp-block-image img {
  width: 100%;
}
 
/* --------------------------------------------------------------------------
   タブレット（min-width: 48em / 768px相当）
   -------------------------------------------------------------------------- */
 
@media (min-width: 768px) {
  .post__header {
    padding: var(--space-10) var(--space-6) var(--space-8);
  }
 
  .post__body {
    padding: 0 var(--space-6) var(--space-16);
  }
 
  .wp-block-image {
    max-width: 78%;
  }
}
 
/* --------------------------------------------------------------------------
   デスクトップ（min-width: 64em / 1024px相当）
   -------------------------------------------------------------------------- */
 
@media (min-width: 1024px) {
  .post__header {
    padding: var(--space-12) var(--space-8) var(--space-10);
  }
 
  .post__body {
    padding: 0 var(--space-8) var(--space-20);
  }
 
  .wp-block-image {
    max-width: 85%;
  }
}