/* ============================================================
   case-style.css
   症例管理システム専用スタイル
   - archive-case.php / single-case.php / taxonomy.php / [case_list]ショートコード
   - main.css の Design Tokens（--ja, --en, --min, --charcoal 等）を継承
   - main.css 自体は無変更。条件付きenqueueによりこのファイルのみ読み込む。
   - スマホファースト：基本スタイルがSP、@media(min-width:769px)でPC拡張
   ============================================================ */

.case-archive, .case-single { font-family: var(--ja); color: var(--charcoal); }

.case-sec   { padding: 56px 0; }
.case-in    { max-width: var(--inner, 1080px); margin: 0 auto; padding: 0 20px; }
.case-in--sm{ max-width: var(--inner-sm, 720px); margin: 0 auto; padding: 0 20px; }

.case-h2 {
  font-family: var(--min); font-size: 1.3rem; font-weight: 500;
  color: var(--charcoal); margin-bottom: 20px; letter-spacing: .04em;
}

/* ── 件数表示 ── */
.case-count { font-size: .82rem; color: var(--muted, #999); margin-bottom: 16px; }

/* ── フィルター ── */
.case-filter { margin-bottom: 32px; padding: 20px; background: var(--gray1, #F5F5F5); border-radius: 4px; }
.case-filter__group { margin-bottom: 16px; }
.case-filter__group:last-of-type { margin-bottom: 12px; }
.case-filter__label {
  font-family: var(--min); font-size: .82rem; font-weight: 500;
  color: var(--charcoal); margin-bottom: 8px;
}
.case-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.case-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; background: #fff; border: 1px solid var(--border, #E5E5E5);
  border-radius: 999px; font-size: .78rem; color: var(--sub, #666);
  cursor: pointer; transition: all .2s ease; user-select: none;
}
.case-chip input { accent-color: var(--charcoal); width: 13px; height: 13px; flex-shrink: 0; }
.case-chip:has(input:checked) {
  background: var(--charcoal); border-color: var(--charcoal); color: #fff;
}
.case-filter__reset {
  font-size: .76rem; color: var(--muted, #999); background: none; border: none;
  text-decoration: underline; cursor: pointer; padding: 4px 0;
}

/* ── カードグリッド：スマホファースト（2列） ── */
.case-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin-bottom: 24px;
}
.case-grid--related { margin-bottom: 0; }

.case-card {
  display: block; background: #fff; border: 1px solid var(--border, #E5E5E5);
  border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}
.case-card:hover { transform: translateY(-3px); box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,.08)); }

.case-card__images { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border, #E5E5E5); }
.case-card__img-wrap { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--gray2, #EBEBEB); }
.case-card__img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-card__label {
  position: absolute; left: 6px; bottom: 6px; z-index: 1;
  font-family: var(--en); font-size: .58rem; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 2px; color: #fff; text-transform: uppercase;
}
.case-card__label--before { background: rgba(0,0,0,.55); }
.case-card__label--after  { background: rgba(0,0,0,.75); }

.case-card__body { padding: 14px 14px 16px; }
.case-card__cat {
  font-family: var(--en); font-size: .6rem; letter-spacing: .1em; color: var(--muted, #999);
  text-transform: uppercase; display: block; margin-bottom: 4px;
}
.case-card__title {
  font-family: var(--min); font-size: .88rem; font-weight: 500;
  color: var(--charcoal); margin-bottom: 6px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.case-card__meta { font-size: .74rem; color: var(--sub, #666); margin-bottom: 6px; }
.case-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.case-card__tag { font-size: .68rem; color: var(--muted, #999); }

.case-no-results { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: var(--muted, #999); font-size: .88rem; }

/* ── もっと見る ── */
.case-loadmore-wrap { text-align: center; margin: 8px 0 16px; }
.case-loadmore {
  font-family: var(--ja); font-size: .85rem; padding: 12px 36px;
  background: #fff; border: 1px solid var(--charcoal); color: var(--charcoal);
  border-radius: 999px; cursor: pointer; transition: all .2s ease;
}
.case-loadmore:hover { background: var(--charcoal); color: #fff; }
.case-loadmore:disabled { opacity: .4; cursor: default; }

/* ── 通常ページネーション ── */
.case-pagination ul { list-style: none; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 0; margin: 24px 0 0; }
.case-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px; font-size: .8rem;
  border: 1px solid var(--border, #E5E5E5); border-radius: 4px; color: var(--charcoal); text-decoration: none;
}
.case-pagination .page-numbers.current { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }

/* ── 症例詳細：基本情報 ── */
.case-single__cat {
  font-family: var(--en); font-size: .68rem; letter-spacing: .14em; color: var(--muted, #999);
  text-transform: uppercase; display: block; margin-bottom: 8px;
}
.case-single__title { font-family: var(--min); font-size: 1.4rem; font-weight: 500; margin-bottom: 20px; letter-spacing: .03em; }

.case-single__info {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border, #E5E5E5);
  margin-bottom: 16px; border: 1px solid var(--border, #E5E5E5); border-radius: 4px; overflow: hidden;
}
.case-info-item { background: #fff; padding: 12px 16px; }
.case-info-item__label { display: block; font-size: .68rem; color: var(--muted, #999); margin-bottom: 2px; }
.case-info-item__val { font-size: .92rem; color: var(--charcoal); font-weight: 500; }

.case-single__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

/* ── Before/After（詳細ページ） ── */
.case-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.case-ba__item { position: relative; }
.case-ba__item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; }
.case-ba__label {
  display: inline-block; font-family: var(--en); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted, #999); margin-bottom: 6px;
}

/* ── 経過写真 ── */
.case-progress { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.case-progress__item { text-align: center; }
.case-progress__item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; margin-bottom: 6px; }
.case-progress__label { font-family: var(--en); font-size: .68rem; letter-spacing: .08em; color: var(--sub, #666); }

/* ── お客様の声 / スタッフコメント ── */
.case-voice, .case-staff { margin-bottom: 32px; }
.case-voice__body, .case-staff__body {
  font-size: .88rem; line-height: 2; color: var(--charcoal);
  background: var(--gray1, #F5F5F5); padding: 20px; border-radius: 4px;
}
.case-voice__body { border-left: 3px solid var(--charcoal); }

/* ── [case_list] ショートコード（LP埋め込み用） ── */
.case-shortcode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* ════════════════════════════════════════════════════════════
   PC（769px以上）
   ════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .case-sec { padding: 88px 0; }
  .case-in, .case-in--sm { padding: 0 var(--px, 64px); }

  .case-filter { padding: 28px 32px; }
  .case-filter__group { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 14px; }
  .case-filter__label { width: 110px; flex-shrink: 0; padding-top: 6px; margin-bottom: 0; }
  .case-filter__chips { flex: 1; }

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

  .case-single__title { font-size: 1.8rem; }
  .case-single__info { grid-template-columns: repeat(4, 1fr); }
  .case-ba { gap: 24px; }
  .case-progress { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

@media (min-width: 1024px) {
  .case-grid, .case-shortcode-grid { grid-template-columns: repeat(4, 1fr); }
}

/* CLS対策：画像の遅延読込時にレイアウトシフトを防ぐため、
   width/height属性を全imgタグに付与済み（各テンプレート側で対応）。
   aspect-ratioも併用し、読込前のスペースを確保している。 */