/* 施工事例の詳細ページ固有のスタイル。
   区画の枠・見出し・アクセント色は detail-blocks.css にある（住宅会社ページと共通）。
   2026年10月の構成変更で全面的に書き換えた。 */

/* ---------------------------------------------------------------- hero */

.case-badges { display: flex; gap: 8px; margin-bottom: 14px; }

.case-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--accent-line);
  color: var(--accent);
}

/* 住宅タイプ（平屋など）は検索条件に直結するので、より目立たせる */
.case-badge--type { background: var(--accent); border-color: var(--accent); color: #fff; }

.case-hero h1 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.5; }

.case-hero__lead {
  font-size: .95rem;
  line-height: 1.9;
  color: var(--ink);
  margin-top: 12px;
  max-width: 34em;
}

/* ---------------------------------------------------------------- 写真で見る */

.case-gallery__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 14px;
  font-size: .82rem;
  color: var(--muted);
}

.case-gallery__controls button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  font-size: .9rem;
}

.case-gallery__controls button:hover { background: var(--accent-soft); }
.case-gallery__controls b { color: var(--ink); }

.case-gallery {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 46%);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}

.case-gallery::-webkit-scrollbar { height: 8px; }
.case-gallery::-webkit-scrollbar-thumb { background: var(--accent-line); border-radius: 999px; }

.case-gallery__item { margin: 0; scroll-snap-align: start; }

.case-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.case-gallery__item figcaption {
  margin-top: 8px;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink);
}

.case-gallery__item figcaption b { color: var(--accent); margin-right: 6px; }

/* ---------------------------------------------------------------- ポイント */

.case-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.case-point__no {
  font-weight: 700;
  color: var(--accent);
  font-size: .9rem;
  letter-spacing: .06em;
}

.case-point h3 { font-size: 1rem; margin: 4px 0 8px; color: var(--ink); }
.case-point p { font-size: .86rem; line-height: 1.8; color: var(--ink); margin: 0; }

/* ---------------------------------------------------------------- こんな方に合う家 */

.case-tags { display: flex; flex-wrap: wrap; gap: 10px; }

.case-tags span {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--accent-line);
  font-size: .85rem;
  color: var(--ink);
}

/* ---------------------------------------------------------------- 基本データ */

.case-data { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; }

.case-data dt { font-size: .78rem; color: var(--muted); margin-bottom: 6px; }

.case-data dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent-line);
}

/* ---------------------------------------------------------------- 費用・性能 */

.case-spec { margin: 0; }

.case-spec__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid #efe7db;
}

.case-spec__row:first-child { border-top: 0; }
.case-spec dt { font-weight: 700; font-size: .86rem; color: var(--muted); }
/* 「建物価格」の下に添える、何を含むかの但し書き。 */
.case-spec dt small { display: block; margin-top: 2px; font-weight: 400; font-size: .78rem; }
.case-spec dd { margin: 0; font-size: .95rem; font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------- 動画 */

.case-movie { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: center; }

.case-movie__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #f3ece2;
}

.case-movie__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 動画がまだ無い場合の枠。掲載前の確認で完成イメージを示すために使う。 */
.case-movie__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: .85rem;
}
.case-movie__label { font-size: .9rem; font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------- 施工会社 */

.case-builder {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 22px;
  align-items: center;
}

.case-builder__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  /* 会社のロゴは横長のものが多い。cover だと丸に切られて社名が読めなくなる
     （晃栄住宅さまのロゴが「KC」だけになっていた）ので、全体を収める。 */
  object-fit: contain;
  padding: 12px;
  background: #f3ece2;
  color: var(--muted);
  font-size: .72rem;
  text-align: center;
  line-height: 1.5;
}

.case-builder__kicker { font-size: .78rem; color: var(--muted); }
.case-builder h2 { margin: 4px 0 6px; font-size: 1.15rem; }
.case-builder__sub { font-size: .85rem; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------- CTA */

.case-cta {
  background: var(--yellow);
  border-radius: 18px;
  padding: 26px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.case-cta h2 { font-size: 1.15rem; margin: 0; color: var(--ink); }
.page-actions--cta { margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- 画面幅が狭い場合 */

@media (max-width: 860px) {
  .case-points { grid-template-columns: 1fr; }
  .case-data { grid-template-columns: repeat(2, 1fr); }
  .case-spec__row { grid-template-columns: 1fr; gap: 4px; }
  .case-movie { grid-template-columns: 1fr; }
  .case-gallery { grid-auto-columns: 84%; }
  .case-builder { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .case-cta { flex-direction: column; align-items: flex-start; }
}