/* =====================================================================
   round3.css — News（WordPress 標準投稿）機能 ＋ ナビのブレークポイント調整

   方針: style.css / round2.css は無改変のまま維持。round3 の差分をここに閉じ込め、
         inc/enqueue.php で style.css → cf7-compat.css → round2.css → round3.css の順に読む。

   目次:
     1. グローバルナビのハンバーガー切替を 820px → 970px に早める
     2. News アーカイブ（一覧）— カードグリッド＋ページネーション
     3. News 個別記事 — ブロックエディタ本文のスタイリング
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. ナビ: ハンバーガー切替を 820px → 970px へ（News 追加で項目が増えるため）

   style.css の @media(max-width:820px) にあるナビのドロワー化ルールを
   970px 未満へ前倒しで適用する。round3.css は最後に読み込まれるので、
   821〜969px の範囲では style.css の横並びナビ（.site-nav{display:flex}）を
   上書きしてドロワーにできる。820px 以下は style.css と同じ挙動。
   ※ .header-cta（BOOK YOUR CALL）の位置・スタイルには一切触れない。
   --------------------------------------------------------------------- */
@media (max-width: 969px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--color-ink);
    padding: var(--space-lg) var(--container-pad);
    gap: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
    z-index: 199;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    font-size: 16px;
    opacity: 0.85;
  }
}

/* ヘッダー高さは 431〜969px は 72px、430px 以下は 60px。
   style.css の @media(max-width:430px){ .site-nav{top:60px} } より後に
   読み込まれるため、ここで 430px 以下の top を再確保しておく。 */
@media (max-width: 430px) {
  .site-nav { top: 60px; }
}


/* ---------------------------------------------------------------------
   2. News アーカイブ（一覧 / カテゴリー）

   カードは round2.css の .s-blog-card（16:10 メディア枠・クリーム地の
   プレースホルダー・キッカー・タイトル・抜粋・hover）をそのまま流用。
   round3 では見出し帯・グリッド・日付行・ページネーションを追加する。
   --------------------------------------------------------------------- */
.s-news {
  background-color: transparent; /* page-bg（CREAM）を透過 */
  padding: 160px 0 var(--space-3xl); /* 上: 固定ヘッダー逃げ＋余白（.s-kv と同じ考え方） */
}

.s-news__head {
  margin-bottom: var(--space-2xl);
}

.s-news__kicker {
  color: var(--color-moss);
}

.s-news__title {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.15;
  color: var(--color-ink);
}

.s-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl) var(--space-lg);
}

@media (max-width: 900px) {
  .s-news__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl) var(--space-md); }
}
@media (max-width: 560px) {
  .s-news__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* カード内の日付（アーカイブはカテゴリー＝キッカー＋日付の両方を出す） */
.s-blog-card__date {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(var(--color-ink-rgb), 0.45);
  margin-bottom: var(--space-xs);
}

/* カード全体（サムネイル／プレースホルダーを含む）が1つの <a> リンク。
   ホバー時のアニメーションは全カード共通で「メディア枠の soft shadow のみ」に統一する。
   - round2.css の サムネイル画像ズーム（scale(1.03)）は打ち消す。
   - プレースホルダーだけの追加効果は付けない。 */
.s-blog-card { cursor: pointer; }
.s-blog-card__media { transition: box-shadow 0.25s var(--ease-out); }
/* サムネイル画像の明暗に関係なく分かるよう、少し強め・広めの shadow にする
   （暗い写真サムネの上でも読めるように）。 */
.s-blog-card:hover .s-blog-card__media {
  box-shadow: 0 10px 26px rgba(var(--color-ink-rgb), 0.18);
}
/* round2.css の .s-blog-card:hover .s-blog-card__media img { transform: scale(1.03) } を無効化 */
.s-blog-card:hover .s-blog-card__media img {
  transform: none;
}

.s-news__empty {
  font-size: 17px;
  color: rgba(var(--color-ink-rgb), 0.6);
}

/* ページネーション（the_posts_pagination の出力 .pagination / .page-numbers） */
.s-news .pagination {
  margin-top: var(--space-2xl);
}
.s-news .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}
.s-news .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(var(--color-ink-rgb), 0.16);
  border-radius: var(--radius-ui);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.s-news a.page-numbers:hover {
  border-color: var(--color-ink);
}
.s-news .page-numbers.current {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-cream);
}
.s-news .page-numbers.dots {
  border-color: transparent;
}


/* ---------------------------------------------------------------------
   3. News 個別記事（single.php）

   標準ブロックエディタの出力（見出し h2〜h4 / 段落 / リスト / 表 /
   画像・figure / 引用 / 区切り線 / コード）を、サイトのタイポグラフィ・
   配色に合わせて整える。本文は読みやすさ優先で 1カラム・最大幅制限。
   --------------------------------------------------------------------- */
.s-news-single {
  background-color: transparent;
  padding: 160px 0 var(--space-3xl);
}

.s-news-single__head {
  max-width: 760px;
  margin: 0 auto var(--space-xl);
}
.s-news-single__kicker {
  color: var(--color-moss);
}
.s-news-single__title {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.15;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}
.s-news-single__meta {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(var(--color-ink-rgb), 0.5);
}

.s-news-single__figure {
  max-width: 960px;
  margin: 0 auto var(--space-2xl);
  overflow: hidden;
  border-radius: var(--radius-image);
}
.s-news-single__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 本文 --- */
.s-news-single__body {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-body);
}
.s-news-single__body > *:first-child { margin-top: 0; }
.s-news-single__body p { margin: 0 0 1.3em; }

.s-news-single__body h2,
.s-news-single__body h3,
.s-news-single__body h4 {
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--color-ink);
  line-height: 1.25;
}
.s-news-single__body h2 { font-size: clamp(24px, 3vw, 32px); margin: 2em 0 0.6em; }
.s-news-single__body h3 { font-size: clamp(20px, 2.3vw, 24px); margin: 1.8em 0 0.5em; }
.s-news-single__body h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  margin: 1.6em 0 0.4em;
}

.s-news-single__body a {
  color: var(--color-pine);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.s-news-single__body ul,
.s-news-single__body ol {
  margin: 1.3em 0;
  padding-left: 1.4em;
}
.s-news-single__body li { margin-bottom: 0.5em; }
.s-news-single__body li::marker { color: var(--color-gold); }
.s-news-single__body ul ul,
.s-news-single__body ol ol,
.s-news-single__body ul ol,
.s-news-single__body ol ul { margin: 0.5em 0; }

.s-news-single__body blockquote {
  margin: 1.8em 0;
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--color-moss);
}
.s-news-single__body blockquote p:last-child { margin-bottom: 0; }

/* 画像 / figure（本文中に挿入されたもの・ブロックエディタの wp-block-image 含む） */
.s-news-single__body img {
  height: auto;
  border-radius: var(--radius-image);
}
.s-news-single__body figure,
.s-news-single__body .wp-block-image {
  margin: 1.8em 0;
}
.s-news-single__body figcaption,
.s-news-single__body .wp-element-caption {
  margin-top: 0.6em;
  font-size: 13px;
  color: rgba(var(--color-ink-rgb), 0.55);
  text-align: center;
}

/* 表 */
.s-news-single__body .wp-block-table,
.s-news-single__body figure.wp-block-table {
  margin: 1.8em 0;
  overflow-x: auto; /* 広い表は枠内で横スクロール */
}
.s-news-single__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
}
.s-news-single__body th,
.s-news-single__body td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid rgba(var(--color-ink-rgb), 0.12);
  text-align: left;
  vertical-align: top;
}
.s-news-single__body thead th {
  background-color: rgba(var(--color-ink-rgb), 0.04);
  font-family: var(--font-body);
  font-weight: 700;
  border-bottom: 1.5px solid var(--color-ink);
}

.s-news-single__body hr {
  border: none;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.14);
  margin: 2.4em 0;
}

.s-news-single__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background-color: rgba(var(--color-ink-rgb), 0.06);
  padding: 2px 6px;
  border-radius: 3px;
}
.s-news-single__body pre {
  margin: 1.6em 0;
  padding: var(--space-md);
  background-color: rgba(var(--color-ink-rgb), 0.05);
  border-radius: var(--radius-image);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}
.s-news-single__body pre code { background: none; padding: 0; }

.s-news-single__footer {
  max-width: 760px;
  margin: var(--space-2xl) auto 0;
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.1);
}


/* ---------------------------------------------------------------------
   4. View Transitions のブラー秒数を短縮（3s → 0.4s）

   style.css の ::view-transition-old/new(root) は 3s のブラーフェード。
   3s は遷移演出として長く、少し急いでリンクを続けて押すと遷移が
   スキップされ、devtools に無害な "AbortError: Transition was skipped"
   が出やすい（実害なし・main.js 側でも握りつぶし済み）。
   ここで duration だけ 0.4s に上書きしてスキップ頻度を下げる。
   ブラー効果・easing・fill は style.css のまま。style.css は無改変。
   （数値はこの1箇所で調整可能）
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.4s;
  }
}