@charset "utf-8";

/* Topics個別記事。保存済み本文の.tex以外はtopics-article BEMで完結させる。 */
#content {
  /* 記事（題名・本文・前後ナビ）は 768px（1行 約49字）、行間は 2（2026-10-05 ユーザー判断）。960px では文章が 1行 約62字で
     長すぎた。720px では題名が割れやすく（毎月の「RADIO MIX KYOTO「GK Kyoto デザイン井戸端トーク vol. N」」がカギ括弧の途中で割れる。
     2行以上が 202件中 53件、768px で 31件）、題名だけ 768px にすると本文との幅のずれが目立った。
     編集画面（css/editor-style.css の .topics-editor）も同じ値。 */
  --topics-prose-measure: 48rem;
  --topics-prose-half: 24rem;
  --topics-image-space: var(--space-md);
  --topics-media-gap: var(--space-sm);
  width: auto;
  max-width: none;
  padding: 0;
}

.topics-article {
  min-width: 0;
  width: 100%;
  container-type: inline-size;
}

/* 行間 2 は段落とリストだけ。見出しまで 2 にすると間延びする。 */
.topics-article__content :is(p, li) {
  line-height: 2;
}

/* 本文は palt を外し、字間 -0.02em で全体を少し詰める（2026-10-05 ユーザー指定・試行中）。句読点の後の全角の空きは残し、
   文字どうしだけを詰めたい。palt は句読点まで半分の幅にするので空きが消える。text-spacing-trim は隣り合う約物と行頭の括弧しか
   詰めず、字間はそのまま。仮名だけを詰める pkna は Noto Sans JP が持っていない。句読点だけ全角に戻す案は、本文を包む処理が要るので採らない。
   見出しなどほかの場所はサイト共通の palt のまま（css/foundation.css）。編集画面（css/editor-style.css）も同じ値。 */
.topics-article__content {
  font-feature-settings: normal;
  letter-spacing: -0.02em;
}

/* 記事ヘッダ */
.topics-article__header {
  width: min(100%, var(--topics-prose-measure));
  margin-inline: auto;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-line);
}

/* 日付とカテゴリは欧文（Helvetica）で、日付は一覧カードと同じ Y.m.d（2026-10-14 ユーザー指摘）。セザンヌの数字は幅が広く、
   全角に見えるほど平たかった。palt は全角の字にしか働かないので数字は詰まらない。和文の「年月日」を混ぜると Helvetica に無い字が
   別の書体で出るので、書式ごと一覧に揃える。 */
.topics-article__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  color: var(--color-text-muted);
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  font-weight: var(--font-latin-strong-weight);
}

.topics-article__category {
  color: var(--color-text-muted);
}

.topics-article__title {
  margin: var(--space-2xs) 0 0;
  font-size: clamp(1.25rem, calc(1.1rem + 0.65vw), 1.6875rem);
  line-break: strict;
  line-height: var(--lh-snug);
}

/* 題名は文節の切れ目でだけ折る。PHP（inc/budoux.php の BudouX）が切れ目に <wbr> を入れ、keep-all でそこと空白の所だけで
   折らせる。どのブラウザでも同じ所で折れる（2026-10-06 ユーザー判断）。以前は Chrome だけ word-break: auto-phrase で折り、
   それの無い Safari・iOS の Chrome では見出し共通の text-wrap: balance が語の途中で割っていた（「ラッピ / ング」）。
   1行に収まらない長い文節だけ途中を折る（break-word）。⚠️ anywhere にしない。anywhere の折り目は text-wrap: balance にも
   折ってよい所として使われ、「「 / 第1回…」のように開き括弧だけが行末に残った（WebKit）。 */
.topics-article__title {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 本文。旧記事のwidth:100%メディアは可読幅内に留め、明示した要素だけ幅出しする。 */
/* 罫線から本文までは 32px（2026-10-06 ユーザー指摘で 48 → 32。題名のまとまりから本文が離れすぎていた）。
   本文は行間 2 なので、字面までは約 40px で、段落どうしの見た目の間隔（約 40px）とほぼ同じになる。 */
.topics-article__body {
  width: 100%;
  margin-block: var(--space-lg) 0;
}

.topics-article__content {
  --topics-media-breakout: max(0px, calc(50cqi - var(--topics-prose-half)));
  width: min(100%, var(--topics-prose-measure));
  margin-inline: auto;
  overflow-wrap: break-word;
}

.topics-article__content > * {
  min-width: 0;
  max-width: 100%;
}

.topics-article__content :where(img, video, iframe, embed, object, table) {
  max-width: 100%;
}

/* WordPress標準の幅指定とテーマ用クラスは、記事カラムを上限に左右へ広げられる。
   360度画像（プラグイン gkk-panorama の [gkk_panorama]）は figure に alignwide が付いて広がる。 */
.topics-article__content > :is(
  .alignwide,
  .alignfull,
  .topics-article__media--wide
) {
  position: relative;
  inset-inline-start: calc(-1 * var(--topics-media-breakout));
  width: calc(100% + 2 * var(--topics-media-breakout));
  max-width: 100cqi;
}

/* 360度画像の静止画とサムネイルは、プラグインが置き方を持つ */
.topics-article__content.tex img:where(:not(.gkk-panorama img)) {
  max-width: 100%;
  height: auto;
  margin-block: var(--topics-image-space) 0;
  margin-inline: 0;
  vertical-align: bottom;
}

.topics-article__content img.aligncenter {
  margin-inline: auto;
}

.topics-article__content img.alignright {
  margin-right: 0;
  margin-left: auto;
}

.topics-article__content img.alignleft {
  margin-right: auto;
  margin-left: 0;
}

/* Classic Editorの記事パーツ: 画像2枚を同じ比率で扱う。 */
.topics-article__content .content-image-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--topics-media-gap);
}

.topics-article__content .content-image-pair__item {
  min-width: 0;
}

.topics-article__content .content-image-pair__item img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* 手書きの2枚並び（<img width="328"> <img width="328"> を1段落に置く旧来の書き方。2026 年の記事もこれ）も、
   記事パーツと同じ2列に組む。img は foundation の reset で block なので、放っておくと 328px のまま縦に積まれ、
   本文の右に大きな空きが残っていた。width 属性は旧本文幅（660px）用の値なので使わない。
   ⚠️ CSS は文字ノードを数えられない。同じ段落に文字と img 2枚だけがあると文字も格子に入る
   （2026-10-05 時点でローカル・本番の記事に該当なし）。<br> を挟んだ段落は対象外で、従来どおり縦に積む。
   隙間は記事パーツと同じ 16px。0.61.12 で旧サイトの半角スペースぶん（4px）にしたら、今の上下の余白に対して詰まって見えたので戻した（2026-11-02）。 */
.topics-article__content.tex > p:has(> img:first-child + img:last-child) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--topics-media-gap);
}

.topics-article__content.tex > p:has(> img:first-child + img:last-child) > img {
  width: 100%;
  margin: 0;
}

/* 旧記事の1枚の画像は、記事の文字の修復（画像の幅を今の列に合わせる）が付けるクラスで、列いっぱいか列の半分に出す
   （2026-11-02 ユーザー判断。旧サイトの列 730px に合わせた width のままだと少し狭く見えた）。
   半分は、載せていた幅が 300 以下のもの（ピクトグラムなど）。ファイルより大きく出ることもある。 */
.topics-article__content .content-image-full {
  width: 100%;
  height: auto;
}

.topics-article__content .content-image-half {
  width: 50%;
  height: auto;
}

/* figure/captionとWordPressの画像段落は、外側だけで余白を管理する。 */
.topics-article__content.tex :is(
  figure,
  .wp-caption,
  .wp-block-image,
  .wp-block-gallery,
  p:has(> :is(img, a:has(> img:only-child)):only-child)
) img {
  margin-block: 0;
}

/* 旧記事の連続画像も、2枚レイアウトと同じ間隔で一群として扱う。 */
.topics-article__content.tex img + br:has(+ img) {
  display: none;
}

.topics-article__content.tex img + br + img {
  display: block;
}

.topics-article__content.tex img + br + img,
.topics-article__content.tex img + img {
  margin-top: var(--topics-media-gap);
}

/* 前後記事ナビ。矢印の外端を本文の可読幅と揃える。 */
.topics-article__pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  width: min(100%, var(--topics-prose-measure));
  margin-block: var(--space-2xl);
  margin-inline: auto;
}

.topics-article__page-link {
  display: flex;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-text-muted);
  transition: color var(--dur) var(--ease);
}

.topics-article__page-icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topics-article__page-link:hover {
  color: var(--color-link-hover);
}

.topics-article__page-link:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.topics-article__page-link--previous {
  justify-self: start;
  justify-content: flex-start;
}

.topics-article__page-link--next {
  grid-column: 2;
  justify-self: end;
  justify-content: flex-end;
}

@media (max-width: 1024px) {
  .topics-article__pagination {
    margin-block: var(--space-xl) var(--space-sm);
  }
}

/* resetで失われるインライン表現と、Topics固有の連続メディア間隔だけ補う。 */
.topics-article__content strong {
  font-weight: 700;
}

.topics-article__content em,
.topics-article__content i {
  font-style: italic;
}

.topics-article__content small,
.topics-article__content .small {
  font-size: 0.875em;
}

.topics-article__content figcaption,
.topics-article__content .wp-caption-text {
  margin-top: var(--space-2xs);
}

/* 図版・表・引用は前後の文章から一段広く離す。 */
.topics-article__content > :not(style, script) + :is(
  figure,
  .wp-caption,
  .wp-block-image,
  .wp-block-gallery,
  table,
  blockquote,
  hr
),
.topics-article__content > :is(
  figure,
  .wp-caption,
  .wp-block-image,
  .wp-block-gallery,
  table,
  blockquote,
  hr
) + :not(style, script) {
  margin-block-start: var(--space-lg);
}

/* 連続する画像・図版は、縦横とも共通のメディア間隔で揃える。 */
.topics-article__content > :is(
  img,
  p:has(> :is(img, a:has(> img:only-child)):only-child),
  figure,
  .wp-caption,
  .wp-block-image,
  .wp-block-gallery,
  .content-image-pair,
  p:has(> img:first-child + img:last-child)
) + :is(
  img,
  p:has(> :is(img, a:has(> img:only-child)):only-child),
  figure,
  .wp-caption,
  .wp-block-image,
  .wp-block-gallery,
  .content-image-pair,
  p:has(> img:first-child + img:last-child)
) {
  margin-block-start: var(--topics-media-gap);
}

/* 見出し前は階層に応じて広く、見出し直後は本文との関係を保って詰める。 */
.topics-article__content > :not(style, script) + h2 {
  margin-block-start: var(--space-xl);
}

.topics-article__content > :not(style, script) + h3 {
  margin-block-start: calc(var(--space-lg) + var(--space-xs));
}

.topics-article__content > :not(style, script) + :is(h4, h5, h6) {
  margin-block-start: var(--space-lg);
}

.topics-article__content > :is(h2, h3, h4, h5, h6) + :not(style, script) {
  margin-block-start: var(--space-sm);
}

@media (max-width: 480px) {
  .topics-article__content .content-image-pair,
  .topics-article__content.tex > p:has(> img:first-child + img:last-child) {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* --- 1カラムと「Recent Posts」（2026-10-05 ユーザー判断）---------------------------------
   記事ページはサイドバーを置かず、記事を画面の中央に置く。記事の後に最近の記事を一覧と同じカード
   （css/items_style.css）で並べ、見出しは一覧と同じ書き方（.topics-heading）。
   1025px 以上は4列で1行、769〜1024px は2列。スマホは出さない（記事ページのスマホで Recent Posts は過剰・2026-10-05）。 */
#main.topics-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

.topics-recent-posts {
  margin-block-start: var(--space-2xl);
}

.topics-recent-posts #items {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .topics-recent-posts #items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .topics-recent-posts {
    display: none;
  }
}