/* お知らせ：WordPress だけの分（一覧のページ送り、記事の本文）。css/news.css のあと・tw-base.css の前に読み込む。
   本文は旧サイトのクラシックエディターの記事（一行ずつの段落、  の段落、並んだ画像のリンク、回り込み、YouTube の埋め込み）が
   そのまま読みやすく出るようにする。空白だけの段落は inc/news.php で .news-article-spacer に、画像だけの段落は .news-article-media にしてある。 */

/* ---------- 一覧のページ送り ---------- */
.news-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px 24px; margin-top: 56px; }
.news-pagination-prev { grid-column: 1; justify-self: start; }
.news-pagination-pages { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.news-pagination-next { grid-column: 3; justify-self: end; }
.interior-site .news-pagination .interior-button { gap: 18px; min-width: 156px; }
.news-pagination-pages a, .news-pagination-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; font-variant-numeric: lining-nums; line-height: 1; letter-spacing: .04em; }
.news-pagination-pages a { border: 1px solid transparent; color: #4c5047; transition: color .3s, background-color .3s, border-color .3s; }
.news-pagination-pages a:hover { color: #a6392e; background: #efe9dc80; }
.news-pagination-pages a[aria-current] { color: var(--paper, #f5f1e8); background: var(--forest, #1b2b23); border-color: var(--forest, #1b2b23); }
.news-pagination-gap { min-width: 24px; padding: 0; color: #8a7a55; }

/* ---------- 記事の本文 ---------- */
.news-article-body { color: #4c5047; font-size: 15px; line-height: 2.2; letter-spacing: .04em; overflow-wrap: anywhere; }
.news-article-body::after { content: ""; display: table; clear: both; }
.news-article-body > :first-child { margin-top: 0; }
.news-article-body > :last-child { margin-bottom: 0; }
.news-article-body a { word-break: normal; overflow-wrap: anywhere; } /* 語の途中では切らず、入りきらない長いアドレスだけを折り返す */
.news-article-body a:hover { color: #a6392e; }
.news-article-body a:has(> img) { text-decoration: none; }
.news-article-body :is(strong, b) { font-weight: 500; }

/* 段落：旧サイトの記事（クラシックエディター）は一行ずつ段落にしてあり、まとまりの区切りに   の段落を挟んでいる。
   その段落だけ間隔を少し詰め（news.css の 1.6em → 1em）、  の段落だったところ（.news-article-spacer）で区切りが分かるようにする。
   ブロックエディターの段落（WordPress 7.0 以降は p.wp-block-paragraph）は、静的サイトと同じ news.css の 1.6em のまま。
   :where() で詳細度を上げない（最後の段落の余白 0 などが効くように） */
.news-article-body p:where(:not(.wp-block-paragraph)) { margin-bottom: 1em; }
.news-article-spacer { height: 1.2em; }
.news-article-spacer:has(+ :is(h2, h3, h4)), :is(h2, h3, h4, h5, h6) + .news-article-spacer { display: none; } /* 見出しの前後は見出しの余白で足りる */

/* 見出し・リスト・引用・表など */
.news-article-body :is(h2, h3, h4, h5, h6) { font-family: "Noto Serif JP", serif; font-weight: 500; color: var(--ink, #2b362f); line-height: 1.9; letter-spacing: .05em; }
.news-article-body h2 { margin: 2.4em 0 1em; padding-bottom: .5em; border-bottom: 1px solid #d6d1c1; font-size: clamp(19px, 2vw, 23px); font-weight: 400; }
.news-article-body h3 { margin: 2em 0 .8em; font-size: clamp(17px, 1.7vw, 20px); }
.news-article-body h4 { margin: 1.8em 0 .7em; font-size: 16px; }
.news-article-body :is(h5, h6) { margin: 0 0 1.6em; font-size: 15px; }
.news-article-body :is(ul, ol) { margin: 0 0 1.6em; padding-left: 1.6em; }
.news-article-body ul { list-style: disc; }
.news-article-body ol { list-style: decimal; }
.news-article-body li { margin: .2em 0; padding-left: .2em; }
.news-article-body li::marker { color: #8a7a55; }
.news-article-body :is(ul, ol) :is(ul, ol) { margin: .2em 0 0; }
.news-article-body blockquote { margin: 0 0 1.6em; padding: 4px 0 4px 24px; border-left: 2px solid #c9b994; color: #5f665a; }
.news-article-body blockquote > :last-child { margin-bottom: 0; }
.news-article-body hr { clear: both; margin: 3em 0; border: 0; border-top: 1px solid #d6d1c1; }
.news-article-body table { width: 100%; margin: 0 0 1.8em; border-collapse: collapse; font-size: 14px; line-height: 1.9; }
.news-article-body :is(th, td) { min-width: 4em; padding: 10px 12px; border: 1px solid #d6d1c1; text-align: left; vertical-align: top; overflow-wrap: break-word; } /* 列が多くても「10日」程度は一行に */
/* 列の多い表は、表だけを横に動かす（ページははみ出さない）。枠は inc/news.php で付ける。
   回り込みの画像（alignleft / alignright）のすぐ後でも、画像の横の狭い幅に押し込まれないよう、画像の下から始める */
.news-article-table, .news-article-body .wp-block-table { clear: both; max-width: 100%; margin: 0 0 1.8em; overflow-x: auto; }
.news-article-table > table, .news-article-body .wp-block-table > table { margin: 0; }
.news-article-body th { font-weight: 500; color: var(--ink, #2b362f); background: #efe9dc80; }
.news-article-body :is(pre, code) { font-size: 13px; background: #efe9dc; }
.news-article-body pre { margin: 0 0 1.6em; padding: 16px 18px; overflow-x: auto; white-space: pre-wrap; }
.news-article-body code { padding: 1px 5px; }
.news-article-body pre code { padding: 0; }

/* 画像：旧サイトの記事は段落の中に並べた画像（alignnone）が多い。行の中で並べ、幅の狭い画面では縮める */
.news-article-body img { display: inline-block; max-width: 100%; height: auto; vertical-align: bottom; }
.news-article-media img { margin: 0 8px 8px 0; }
.news-article-media img.aligncenter { margin-bottom: 0; }
.news-article-body .aligncenter { margin-left: auto; margin-right: auto; }
.news-article-body :is(img.aligncenter, .wp-caption.aligncenter) { display: block; }
/* ブロックエディターの画像（中央・左右）は、WordPress の CSS のとおりキャプションを画像の幅に収める表示（display: table）のままにする */
.news-article-body .alignleft { float: left; margin: .5em 32px 1em 0; }
.news-article-body .alignright { float: right; margin: .5em 0 1em 32px; }
.news-article-body figure { max-width: 100%; margin: 0 0 1.6em; }
/* 図（アイキャッチ・キャプション付きの画像・ブロックの画像・ギャラリー）には、サイト共通の登場の演出（js/finish.js の fx-curtain：拡大から戻る）が付く。
   拡大中の写真が図の外へはみ出して狭い画面で横にずれないよう、図の枠で切る。キーボードで選んでいるあいだは、枠の線が切れないように戻す */
.news-article-image, .news-article-body figure { overflow: clip; }
.news-article-body figure:not(.wp-block-table):focus-within { overflow: visible; }
.news-article-body figure img { display: block; }
.news-article-body :is(figcaption, .wp-caption-text) { margin-top: 10px; font-size: 12px; line-height: 1.9; color: #6c7167; }
.news-article-body .wp-caption { max-width: 100%; }
.news-article-body .wp-caption.aligncenter { margin-bottom: 1.6em; }

/* ギャラリー（[gallery]） */
.news-article-body .gallery { --oshima-cols: 3; display: grid; grid-template-columns: repeat(var(--oshima-cols), minmax(0, 1fr)); gap: 12px; margin: 0 0 1.6em; }
.news-article-body .gallery-columns-1 { --oshima-cols: 1; }
.news-article-body .gallery-columns-2 { --oshima-cols: 2; }
.news-article-body .gallery-columns-4 { --oshima-cols: 4; }
.news-article-body .gallery-columns-5 { --oshima-cols: 5; }
.news-article-body .gallery-columns-6 { --oshima-cols: 6; }
.news-article-body .gallery-item { margin: 0; }
.news-article-body .gallery-item img { width: 100%; }
.news-article-body .gallery br { display: none; }

/* 埋め込み：YouTube・Vimeo は幅いっぱいの 16:9。そのほか（地図など）ははみ出さないように */
.news-article-body :is(iframe, video, embed, object) { max-width: 100%; }
.news-article-body :is(iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vimeo"]) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.news-article-body .wp-video, .news-article-body .wp-audio-shortcode { max-width: 100%; }
.news-article-media:has(> iframe) { margin-bottom: 2em; }

/* ボタン（ブロックエディターのボタン）：サイトのボタン（.interior-button）と同じ見た目に。色を指定したボタンはその色のまま */
.news-article-body .wp-block-buttons { gap: 12px; margin: 0 0 1.6em; }
.news-article-body .wp-block-button__link { display: inline-flex; align-items: center; min-height: 52px; padding: 12px 22px; border: 1px solid #2b362f59; border-radius: 0; background: transparent; color: var(--ink, #2b362f); font-size: 12px; line-height: 1.6; letter-spacing: .06em; text-decoration: none; word-break: normal; transition: background .2s, color .2s, border-color .2s; }
.news-article-body .wp-block-button__link:hover { background: var(--forest, #1b2b23); border-color: var(--forest, #1b2b23); color: var(--paper, #f5f1e8); }

/* パスワードで保護した記事のフォーム */
.news-article-body .post-password-form input[type="password"] { min-height: 44px; margin: 6px 8px 6px 0; padding: 8px 12px; border: 1px solid #2b362f59; background: #fff; }
.news-article-body .post-password-form input[type="submit"] { min-height: 44px; padding: 8px 20px; border: 1px solid #2b362f59; cursor: pointer; }
.news-article-body .post-password-form input[type="submit"]:hover { background: var(--forest, #1b2b23); color: var(--paper, #f5f1e8); }

/* 複数ページの記事（<!--nextpage-->） */
.news-article-pages { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2em; font-size: 13px; }

@media (max-width: 767px) {
    .news-pagination { grid-template-columns: 1fr 1fr; gap: 16px 12px; margin-top: 40px; }
    .news-pagination-pages { grid-column: 1 / -1; grid-row: 1; }
    .news-pagination-prev { grid-column: 1; grid-row: 2; }
    .news-pagination-next { grid-column: 2; grid-row: 2; }
    .interior-site .news-pagination .interior-button { min-width: 0; padding-inline: 16px; }

    .news-article-body { font-size: 14px; line-height: 2.1; }
    .news-article-body :is(th, td) { padding: 8px 10px; }
    .news-article-body :is(.alignleft, .alignright) { float: none; margin: 0 auto 1.4em; }
    .news-article-body :is(img, .wp-caption):is(.alignleft, .alignright) { display: block; }
    .news-article-body .gallery:not(.gallery-columns-1) { --oshima-cols: 2; }
}