/* =================================================================
 * cv-tools-hub.css — Tools Hub (761) 専用 CSS（W2-3 / PR-C・#90）
 *
 * 設計: docs/blueprints/tools-hub-blueprint.md §6-§7
 * 完成定義: docs/tools-hub-done-criteria-2026-07.md（正）
 * 実装計画: docs/tools-hub-implementation-plan-2026-06.md PR-C
 *
 * スコープ: enqueue は is_page(761) のみ。セレクタも .page-id-761 配下に限定。
 *   → テンプレ（PR-D）が cv-* クラスを付与するまで、このファイルは inert。
 * 方針:
 *   - !important は使わない（787 同様、specificity のみでレイアウト移管）。
 *   - 色・余白・影は _tokens.css の --cv-* / --c-* を参照（ハードコード色なし）。
 *   - ページ層 --th-* を調整の逃げ道として持つ（787 の --hs-* に対応）。
 *   - light/dark は _tokens.css の :root / [data-theme] が司る（このファイルは値を持たない）。
 * ================================================================= */

/* ---- ページ層トークン（調整の逃げ道・787 の --hs-* に対応） ---- */
.page-id-761 {
  --th-bg: var(--cv-bg);
  --th-bg-soft: var(--cv-bg-soft);
  --th-surface: var(--cv-surface);

  --th-text: var(--cv-text);
  --th-text-muted: var(--cv-text-muted);
  --th-text-subtle: var(--cv-text-subtle);

  --th-border: var(--cv-border);
  --th-shadow: var(--cv-shadow);
  --th-shadow-hover: var(--cv-shadow-hover);

  --th-hero-from: var(--cv-hero-from);
  --th-hero-to: var(--cv-hero-to);
  --th-hero-text: var(--cv-hero-text);
  --th-hero-sub: var(--cv-hero-sub);

  --th-note-bg: var(--cv-note-bg);
  --th-note-border: var(--cv-note-border);
  --th-note-text: var(--cv-note-text);

  /* カード基底のアクセント。各 --primary/--support/--lab/--graduated が上書き */
  --th-card-accent: var(--cv-border);
  --th-card-accent-soft: var(--cv-bg-soft);

  /* レイアウト寸法 */
  --th-gap: 20px;
  --th-radius: 12px;
  --th-card-min: 260px;
}

/* ---- レイアウト移管（Newscrunch 親テーマの上書き・787 と同じ DOM・!important なし） ---- */
.page-id-761 .spnc-col-9.spnc-sticky-sidebar {
  display: none;
}
.page-id-761 .spnc-col-7.spnc-sticky-content {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}
.page-id-761 .breadcrumb-trail,
.page-id-761 .breadcrumb-overlay,
.page-id-761 .spnc-breadcrumb-wrap,
.page-id-761 .entry-title,
.page-id-761 .page-title {
  display: none;
}
.page-id-761 #content .spnc-container,
.page-id-761 #content .spnc-row {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.page-id-761 .spnc-entry-content {
  max-width: 100%;
  padding: 0;
}
.page-id-761 .spnc-entry-content > .alignfull {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: 100vw;
  width: 100vw;
}
body.page-id-761 {
  overflow-x: hidden;
}
.page-id-761 #content.spnc-main-page {
  padding-left: 0;
  padding-right: 0;
}

/* ---- 最外殻 ---- */
.page-id-761 .cv-tools-hub {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 64px;
  color: var(--th-text);
  background: var(--th-bg);
}
/* Fix (PR-E HUMAN目視): cv-tools-hub は alignfull を持つため、上の全幅ブレイクアウト規則
 * (.spnc-entry-content > .alignfull の margin:calc(-50vw+50%)) が cv-tools-hub の
 * margin:0 auto を詳細度で上書きし、本文が左へはみ出していた。
 * cv-tools-hub はブレイクアウト不要（中身は max-width:1100px 中央寄せ）。
 * より高い詳細度で負マージンを打ち消し、素直な中央寄せコンテナに戻す。 */
.page-id-761 .spnc-entry-content > .cv-tools-hub.alignfull {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
/* WP の constrained 内側コンテナと各セクションが content-size に過剰拘束されず
 * 1100px コンテナ幅を使えるようにする（中央寄せは維持）。 */
.page-id-761 .cv-tools-hub > .wp-block-group__inner-container,
.page-id-761 .cv-tools-hub .is-layout-constrained > * {
  max-width: 100%;
}

/* ---- [1] Hero ---- */
.page-id-761 .cv-tools-hero {
  background: linear-gradient(135deg, var(--th-hero-from), var(--th-hero-to));
  color: var(--th-hero-text);
  border-radius: var(--th-radius);
  padding: 48px 32px;
  margin: 24px 0 40px;
}
.page-id-761 .cv-tools-hero__meta {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-hero-sub);
  margin: 0 0 12px;
}
.page-id-761 .cv-tools-hero h1 {
  color: var(--th-hero-text);
  margin: 0 0 16px;
  line-height: 1.2;
}
.page-id-761 .cv-tools-hero__lead {
  color: var(--th-hero-sub);
  max-width: 42em;
  margin: 0;
}

/* ---- セクション共通 ---- */
.page-id-761 .cv-tool-section {
  margin: 40px 0;
}
.page-id-761 .cv-tool-section__header {
  margin: 0 0 8px;
}
.page-id-761 .cv-tool-section__desc {
  color: var(--th-text-muted);
  margin: 0 0 20px;
}

/* ---- グリッド（目的別・カード共通・auto-fill レスポンシブ） ----
 * WP のグループブロックは中身を .wp-block-group__inner-container で包むため、
 * グリッドは外側グループではなくこの内側コンテナに当てる
 * （外側に display:grid を当てると grid item が inner-container 1個になり
 *  カードが孫要素として縦積みになる）。 */
.page-id-761 .cv-usecase-grid > .wp-block-group__inner-container,
.page-id-761 .cv-tool-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--th-card-min), 1fr));
  gap: var(--th-gap);
}

/* ---- [2] 目的別入口 ---- */
.page-id-761 .cv-usecase-card {
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  padding: 16px 18px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.page-id-761 .cv-usecase-card:hover {
  box-shadow: var(--th-shadow-hover);
  transform: translateY(-2px);
}
.page-id-761 .cv-usecase-card a {
  color: var(--th-text);
  text-decoration: none;
}

/* ---- [3]-[7] ツールカード（基底＋ステータス修飾子） ---- */
.page-id-761 .cv-tool-card {
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-top: 3px solid var(--th-card-accent);
  border-radius: var(--th-radius);
  padding: 20px;
  box-shadow: var(--th-shadow);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.page-id-761 .cv-tool-card:hover {
  box-shadow: var(--th-shadow-hover);
  transform: translateY(-2px);
}
.page-id-761 .cv-tool-card h3 {
  margin: 0 0 6px;
  color: var(--th-text);
}

/* ステータス別アクセント（上辺ボーダー色を --c-* / --cv-status-* で切替） */
.page-id-761 .cv-tool-card--primary {
  --th-card-accent: var(--cv-status-main);
}
.page-id-761 .cv-tool-card--support {
  --th-card-accent: var(--cv-status-sub);
}
.page-id-761 .cv-tool-card--lab {
  --th-card-accent: var(--cv-status-exp);
}
.page-id-761 .cv-tool-card--graduated {
  --th-card-accent: var(--cv-status-grad);
  opacity: 0.85;
}

/* クセ / 次の一手（色分けした小パネル） */
.page-id-761 .cv-tool-card__quirk,
.page-id-761 .cv-tool-card__next {
  font-size: 0.9rem;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 0 0;
}
.page-id-761 .cv-tool-card__quirk {
  background: var(--th-bg-soft);
  color: var(--th-text-muted);
}
.page-id-761 .cv-tool-card__next {
  background: var(--th-card-accent-soft);
  color: var(--th-text);
}

/* combos タグ */
.page-id-761 .cv-tool-card__combos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.page-id-761 .cv-combo-tag {
  font-size: 0.78rem;
  background: var(--th-bg-soft);
  color: var(--th-text-subtle);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ---- [4] 観察者ノート ---- */
.page-id-761 .cv-note-panel {
  background: var(--th-note-bg);
  border-left: 4px solid var(--th-note-border);
  color: var(--th-note-text);
  border-radius: 0 var(--th-radius) var(--th-radius) 0;
  padding: 18px 22px;
  margin: 32px 0;
  font-style: normal;
}

/* ---- [8] 他の机への接続 ---- */
.page-id-761 .cv-tools-bridge {
  display: flex;
  flex-wrap: wrap;
  gap: var(--th-gap);
  background: var(--th-bg-soft);
  border-radius: var(--th-radius);
  padding: 24px;
  margin: 40px 0 0;
}
.page-id-761 .cv-tools-bridge a {
  color: var(--th-text);
  font-weight: 500;
}

/* ---- a11y: フォーカスリング維持 ---- */
.page-id-761 .cv-tools-hub a:focus-visible {
  outline: 2px solid var(--cv-status-sub);
  outline-offset: 2px;
}

/* ---- レスポンシブ（768px 以下で 1 列に落とす） ---- */
@media (max-width: 768px) {
  .page-id-761 .cv-usecase-grid > .wp-block-group__inner-container,
  .page-id-761 .cv-tool-grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
  .page-id-761 .cv-tools-hero {
    padding: 36px 22px;
  }
  .page-id-761 .cv-tools-hub {
    padding: 0 16px 48px;
  }
}