/* ============================================
   実践事例（case CPT）— single / archive 共用
   css/page/case.css からは ../../images/ がサイトルートの images/ を指す
   ============================================ */

/* --- ページヘッダー背景（style属性除去の受け皿） --- */
.page-header--biotope {
  background-image: url("../../images/2025/03/biotope.jpg");
  background-size: cover;
  background-position: center center;
}
.page-header--case {
  background-image: url("../../images/2025/03/main1-scaled.jpg");
  background-size: cover;
  background-position: center center;
}
.page-header--nature {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url("../../images/2026/05/nature-hero.jpg");
  background-size: cover;
  background-position: center center;
}

/* --- 一覧（archive）導入文 --- */
.case-intro {
  max-width: 800px;
  margin: 0 auto;
}

/* --- 詳細（single）本文レイアウト --- */
.case-detail {
  max-width: 900px;
  margin: 0 auto;
}
.case-detail__image-wrap {
  margin-bottom: 40px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.case-detail__image {
  width: 100%;
  height: auto;
}
.case-detail__info {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  margin-bottom: 48px;
}
.case-detail__info th {
  width: 160px;
}
.case-note {
  background: var(--bg);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 24px;
  margin-top: 32px;
}
.case-note p {
  margin: 0;
  font-size: 0.9rem;
}
.case-back-link {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

/* --- 写真・図版（複数枚の実例紹介で使用） --- */
.case-detail__portrait-figure {
  margin: 32px 0;
  text-align: center;
}
.case-detail__portrait-img {
  max-width: 360px;
  width: 100%;
  border-radius: var(--radius-lg);
}
.case-detail__figcaption {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.case-detail__photo-figure {
  margin: 32px 0;
}
.case-detail__photo-grid--3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.case-detail__photo-grid--2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.case-detail__photo--portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}
.case-detail__photo--landscape {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (max-width: 768px) {
  .case-detail__photo-grid--3col,
  .case-detail__photo-grid--2col {
    grid-template-columns: 1fr;
  }
}

/* --- 実践事例（PDF 転記用） --- */
/* HTML版 css/style.css の同じ節をそのまま移植（HTML版の 10/9 の変更 bf3e8a0）。本文（ACF case_body）の中で使う */
.case-title {
  margin-bottom: 32px;
}
.case-title p {
  margin-bottom: 4px;
  font-weight: 700;
}
.case-title__pair {
  display: inline-block;
  font-size: 1.2rem;
  border-bottom: 2px solid var(--primary);
}
.case-lead {
  margin: -8px 0 16px;
  font-weight: 700;
}
.case-box {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 16px 24px;
  margin-bottom: 24px;
}
.case-box p:last-child {
  margin-bottom: 0;
}
/* 囲みの中の小見出し（PDF の「●」見出し） */
.case-box h3 {
  margin: 24px 0 8px;
}
.case-box h3:first-child {
  margin-top: 0;
}
.case-box h4 {
  font-size: 1rem;
  margin: 20px 0 8px;
}
.case-media {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.case-media__figure {
  flex: 0 1 240px;
  margin: 0 auto;
  text-align: center;
}
.case-media__figure img {
  width: 100%;
}
.case-media__figure figcaption {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 16px;
  border: 1px solid var(--text);
  font-size: 0.875rem;
}
.case-media .case-box {
  flex: 1 1 320px;
  margin-bottom: 0;
}
.case-photos {
  margin: 32px 0;
}
.case-photos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
/* 写真1枚を中央に置き、キャプション枠を文字幅にする */
.case-photos--center {
  text-align: center;
}
.case-photos--center img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.case-photos--center figcaption {
  display: inline-block;
  margin-top: 12px;
}
/* 写真を横に2枚並べ、それぞれに枠付きキャプションを付ける */
.case-figs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 32px 0;
}
.case-figs figure {
  margin: 0;
  text-align: center;
}
.case-figs img {
  width: 100%;
}
/* 縦長と横長の写真を並べるときは高さをそろえ、切り取らずに収める */
.case-figs--same-height img {
  height: 280px;
  object-fit: contain;
}
.case-figs figcaption {
  margin-top: 8px;
  padding: 4px 12px;
  border: 1px solid var(--text);
  font-size: 0.875rem;
}
/* 写真を3枚並べる */
.case-figs--3 {
  grid-template-columns: repeat(3, 1fr);
}
/* キャプションを写真の下部に重ねる */
.case-figs--overlay figure {
  position: relative;
}
.case-figs--overlay img {
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.case-figs--overlay figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 16px 8px 6px;
  border: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* 左に文章、右に写真を縦に並べる2段組み */
.case-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}
/* 見出しから始まる2段組み（見出しと写真の上端をそろえる） */
.case-split--heading {
  margin-top: 48px;
  align-items: center;
}
.case-split--heading h2 {
  margin-top: 0;
}
.case-split > .case-figs {
  grid-template-columns: 1fr;
  margin: 0;
}
/* 写真の横にキャプション枠を置く */
.case-fig-side {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
}
.case-fig-side img {
  width: 200px;
  max-width: 60%;
}
.case-fig-side figcaption {
  padding: 4px 12px;
  border: 1px solid var(--text);
  font-size: 0.875rem;
  font-weight: 700;
}
.case-photos__grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.case-photos figcaption,
.case-callout {
  margin-top: 8px;
  padding: 8px 16px;
  border: 1px solid var(--text);
  font-size: 0.9rem;
  line-height: 1.7;
}
.case-callout {
  margin-top: 32px;
}
@media (max-width: 480px) {
  .case-box {
    padding: 16px;
  }
  .case-figs {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .case-split {
    grid-template-columns: 1fr;
  }
  .case-figs--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.case-callout p {
  margin: 0;
}
/* ブロックエディタで作った本文：このテーマ（theme.json なし）では、グループブロックの中に WordPress が箱（__inner-container）を1段入れる。
   写真や文章を横に並べる枠（case-figs・case-photos__grid・case-media・case-split）は直下の要素を並べる作りなので、その箱を無いものとして扱う */
.wp-block-group.case-figs > .wp-block-group__inner-container,
.wp-block-group.case-photos__grid > .wp-block-group__inner-container,
.wp-block-group.case-media > .wp-block-group__inner-container,
.wp-block-group.case-split > .wp-block-group__inner-container {
  display: contents;
}
/* 上の箱があると「case-split の直下の写真の並び」の指定が当たらないので、箱を挟んだ形にも同じ指定をする */
.case-split > .wp-block-group__inner-container > .case-figs {
  grid-template-columns: 1fr;
  margin: 0;
}
/* ブロックエディタの画像ブロックは、写真の説明（キャプション）の下に余白を付ける（WordPress 標準）。今の本文と同じく付けない */
.case-figs .wp-block-image figcaption,
.wp-block-image.case-photos figcaption,
.wp-block-image.case-media__figure figcaption {
  margin-bottom: 0;
}
/* 見出しの横の写真（case-fig-side）の説明は、今の本文と同じく上下の余白を付けない */
.wp-block-image.case-fig-side figcaption {
  margin: 0;
}
/* ブロックの画像には WordPress が sizes="auto"（表示幅に合わせて画像を選ぶ）を付けるため、写真がいくらでも縮む扱いになる。
   今の本文と同じく、写真は縮めずに幅200px（枠の60%まで）にし、残りを説明にあてる */
.wp-block-image.case-fig-side img {
  flex-shrink: 0;
}