/* === TOP / front page (718) page layer CSS ===
 * 設計: docs/top-done-criteria-2026-07.md（完成定義）。流用元: cv-n8n.css（786 の修正済みレイアウト）。
 * Scope: is_page(718)/is_front_page() でのみ enqueue。セレクタは .page-id-718 にスコープ。
 * 役割:
 *   1) 親テーマ Newscrunch のレイアウト上書き（B層: サイドバー非表示・フル幅・パンくず非表示）。
 *   2) Hero=全幅バンド / 本文=中央寄せ列（可変パディング）/ グリッド=inner-container に当てる。
 *   3) 最新記事（wp:latest-posts 動的ブロック）と締めの引用の最小スタイル。
 * 方針: ハードコード色を持たない（トークン参照のみ）。!important も使わない。
 * アクセント: 共有 cv-components の --hs-accent（= --c-home）を継承（TOP 専用の上書きはしない）。
 * 注: 入口（ドア）は cv-card--service（cv-components 共有部品）を流用。新規ドアCSSは持たない。
 */

/* ---- 1. レイアウト上書き（B層・親テーマの2カラムを1カラム/フル幅へ） ---- */
.page-id-718 .spnc-col-9.spnc-sticky-sidebar {
  display: none;
}
.page-id-718 .spnc-col-7.spnc-sticky-content {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}
.page-id-718 .breadcrumb-trail,
.page-id-718 .breadcrumb-overlay,
.page-id-718 .spnc-breadcrumb-wrap,
.page-id-718 .entry-title,
.page-id-718 .page-title {
  display: none;
}
.page-id-718 #content .spnc-container,
.page-id-718 #content .spnc-row {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.page-id-718 .spnc-entry-content {
  max-width: 100%;
  padding: 0;
}
/* Hero のみ全幅ブレイクアウト（カラーバンドとして 100vw に広げる） */
.page-id-718 .spnc-entry-content > .alignfull.cv-hero {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: 100vw;
  width: 100vw;
}
/* 本文セクションは中央寄せの列に戻す（787流用の全幅ブレイクアウトを中央寄せ本文に
 * 当てると左へはみ出すため、Hero 以外はブレイクアウトさせない＝n8n と同じ教訓）。
 * 左右余白はビューポートに応じてスケール（半画面で余白が潰れないように）。 */
.page-id-718 .spnc-entry-content > .alignfull:not(.cv-hero) {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 5vw, 56px);
  padding-right: clamp(20px, 5vw, 56px);
  box-sizing: border-box;
}
.page-id-718 .spnc-entry-content .is-layout-constrained > *,
.page-id-718 .spnc-entry-content > .alignfull:not(.cv-hero) > .wp-block-group__inner-container {
  max-width: 100%;
}
body.page-id-718 {
  overflow-x: hidden;
}
.page-id-718 #content.spnc-main-page {
  padding-left: 0;
  padding-right: 0;
}

/* ---- 2. グリッド（入口ドアを多列に） ----
 * WP のグループブロックは中身を .wp-block-group__inner-container で包むため、
 * display:grid は内側コンテナに当てる（外側だとカードが孫で縦積み＝n8n と同じ教訓）。 */
.page-id-718 .cv-grid {
  display: block;
}
.page-id-718 .cv-grid > .wp-block-group__inner-container {
  display: grid;
  /* 4ドアを desktop=2x2 / mobile=1列 に。min を大きめにして 3+1 の不揃いを防ぐ。 */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 20px;
  margin: 18px 0;
}

/* ---- 3. 最新記事（wp:latest-posts 動的ブロック） ---- */
.page-id-718 .wp-block-latest-posts {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.page-id-718 .wp-block-latest-posts li {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--cv-border);
}
.page-id-718 .wp-block-latest-posts li:first-child {
  border-top: 1px solid var(--cv-border);
}
.page-id-718 .wp-block-latest-posts a {
  color: var(--cv-text);
  font-weight: 600;
  text-decoration: none;
}
.page-id-718 .wp-block-latest-posts a:hover {
  color: var(--hs-accent);
}
.page-id-718 .wp-block-latest-posts__post-date {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  color: var(--cv-text-subtle);
}

/* ---- 4. 締めの引用（任意・小さく・末尾の余白として） ---- */
.page-id-718 .cv-top-quote {
  /* コア wp-block-quote の既定（左ボーダー・左パディング）を打ち消し、締めの中央寄せに */
  margin: 8px 0 0;
  padding: 28px 0 0;
  border: 0;
  border-top: 1px solid var(--cv-border);
  text-align: center;
  color: var(--cv-text-muted);
}
.page-id-718 .cv-top-quote p {
  font-size: 0.95rem;
  line-height: 1.9;
  margin: 0 auto;
  max-width: 40em;
}
.page-id-718 .cv-top-quote cite {
  display: block;
  margin-top: 10px;
  font-size: 0.8rem;
  font-style: normal;
  color: var(--cv-text-subtle);
}

@media (max-width: 768px) {
  .page-id-718 .spnc-container,
  .page-id-718 .spnc-row,
  .page-id-718 .spnc-col-7.spnc-sticky-content,
  .page-id-718 .spnc-entry-content,
  .page-id-718 .spnc-contact-wrapper {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    width: 100%;
  }
}