/*
Theme Name: Blocksy Child
Theme URI: https://eatinthecorner.com
Description: Blocksy公式子テーマ。カスタマイザー設定・フック追加用の最小構成。
Author: Eat in the Corner
Template: blocksy
Version: 1.0.0
Text Domain: blocksy-child
*/

/* =========================================================
   Eat in the Corner
   Article Footer: Detour / Related Grid
   ========================================================= */

/* 既存変数がなければフォールバック */
:root {
  --eitc-paper: #fafaf7;
  --eitc-ink: #202020;
  --eitc-muted: #6f6f68;
  --eitc-line: #d9d7cf;
  --eitc-line-soft: #e9e7e0;
  --eitc-accent: #b24c25;

  /* 2026-08-26: Homepage Pick Up・category landing・taxonomy archiveの
     compact article row thumbnailだけで共有する寸法token。Related Notes・
     各種Hero等、他のthumbnail/画像には一切使わない(意図的にscopeを狭くしている)。
     元の寸法(132px/108px/76-84px)から約15%拡大。比率は元のthumbnail比率(4:3)を
     維持する(一度1:1正方形を試みたが不自然なsquare cropのため撤回、拡大サイズのみ維持)。 */
  --eitc-thumb-size: 152px;
}

/* =========================================================
   1. DETOUR
   ========================================================= */

.eitc-detour {
  max-width: 700px;
  margin: 5rem auto 2rem;
  color: var(--eitc-ink);
}

.eitc-detour-heading {
  margin: 0 0 2.25rem;
  text-align: center;
  color: var(--eitc-muted);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.eitc-detour-heading::first-line {
  color: var(--eitc-ink);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.eitc-detour ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--eitc-line);
}

.eitc-detour li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--eitc-line);
}

.eitc-detour li::marker {
  content: "";
}

.eitc-detour li > a {
  position: relative;
  display: block;
  padding: 1.35rem 0.4rem;
  color: var(--eitc-ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.65;
  text-decoration: none;
  transition:
    color 160ms ease,
    padding-left 160ms ease,
    background-color 160ms ease;
}

/* 小さな「先へ進む」気配だけ出す */
.eitc-detour li > a::after {
  content: "→";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  opacity: 0;
  color: var(--eitc-accent);
  font-weight: 400;
  transform: translate(-0.3rem, -50%);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.eitc-detour li > a:hover,
.eitc-detour li > a:focus-visible {
  color: var(--eitc-accent);
  padding-left: 0.75rem;
  background: rgba(178, 76, 37, 0.025);
}

.eitc-detour li > a:hover::after,
.eitc-detour li > a:focus-visible::after {
  opacity: 0.75;
  transform: translate(0, -50%);
}

.eitc-detour li > a:focus-visible {
  outline: 1px solid var(--eitc-accent);
  outline-offset: 3px;
}

/* Detourの終端 */
.eitc-detour-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem auto 0;
  min-height: 50px;
}

/* 短い横線(中央の印章とのコントラスト差を少し和らげるため、
   共通の--eitc-lineよりわずかに濃い色をこの箇所だけに使う) */
.eitc-detour-divider::before,
.eitc-detour-divider::after {
  content: "";
  width: 80px;
  height: 1px;
  background: #c7c4b9;
}

/* 「黒い印章」ornament: 中央だけコントラストを強め、記事終端の印として見せる。
   色は目標のチャコール/暖かい白を画像側に直接焼き込み済み(CSS filterには依存しない)。 */
.eitc-detour-divider img {
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 1.1rem;
  object-fit: contain;
  border-radius: 50%;
}

/* 記事末回遊ナビゲーション(食文化/商い/街角/訪問の記録 + 片隅の独り言)。
   .eitc-detour内に配置されるため、幅・中央寄せは親の700px containerを
   そのまま継承する(独自wrapperを作らない)。Detour本文(左揃えのlist)とは
   別に、見出し・ornamentと同じ「静かな中央揃え」の流儀に合わせる。
   badge化・background・border・iconは使わず、既存のmuted/accent色調のみ使用。 */
.eitc-article-end-nav {
  margin: 1.75rem 0 0;
  text-align: center;
  color: var(--eitc-muted);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.9;
}

/* termと直後の「/」を1つのnowrap単位にまとめる。mobileでの折り返しは
   この単位同士の間(スペース)でだけ起こるようにし、「/」だけが行頭・行末に
   孤立したり、term名の途中で改行されたりするのを避ける。 */
.eitc-article-end-nav-item {
  display: inline-block;
  white-space: nowrap;
}

.eitc-article-end-nav a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

.eitc-article-end-nav a:hover,
.eitc-article-end-nav a:focus-visible {
  color: var(--eitc-accent);
}

.eitc-article-end-nav a:focus-visible {
  outline: 1px solid var(--eitc-accent);
  outline-offset: 2px;
}

/* separatorはlinkよりさらに薄く(--eitc-lineは--eitc-mutedより淡い警告色に近い)。 */
.eitc-article-end-nav-sep {
  margin: 0 0.5em;
  color: var(--eitc-line);
}

@media (max-width: 640px) {
  .eitc-article-end-nav {
    margin-top: 1.5rem;
    font-size: 0.82rem;
  }
}

/* =========================================================
   2. RELATED NOTES GRID
   ========================================================= */

.eitc-related-grid {
  max-width: 980px;
  margin: 0 auto 5rem;
  color: var(--eitc-ink);
}

.eitc-related-grid-title {
  position: relative;
  margin: 0 0 2rem;
  padding-left: 1rem;

  color: var(--eitc-ink);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

/* 太すぎない短い縦罫 */
.eitc-related-grid-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.08em;
  bottom: 0.08em;
  width: 2px;
  background: var(--eitc-ink);
}

.eitc-related-grid-entries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 2.25rem;
}

.eitc-related-card {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0 0 1.4rem;
  border-bottom: 1px solid var(--eitc-line);
}

.eitc-related-card > a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.eitc-related-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 0 0 0.9rem;
  object-fit: cover;
  background: var(--eitc-line-soft);

  filter: saturate(0.95);
  transition:
    opacity 180ms ease,
    filter 180ms ease;
}

/* no-image fallback(ロゴ・テキストを含む静的画像)はcoverで切り取ると文字が
   欠ける恐れがあるため、containで全体を収める。実サムネイル(上記)には影響しない。 */
.eitc-related-card img.eitc-fallback-thumb {
  object-fit: contain;
}

.eitc-related-card h3 {
  margin: 0 0 0.55rem;
  padding: 0;

  color: var(--eitc-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;

  transition: color 160ms ease;
}

.eitc-related-card p {
  margin: 0;
  color: var(--eitc-muted);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.7;

  /* 抜粋を3行程度で揃える */
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.eitc-related-card > a:hover img {
  opacity: 0.88;
  filter: saturate(0.82);
}

.eitc-related-card > a:hover h3,
.eitc-related-card > a:focus-visible h3 {
  color: var(--eitc-accent);
}

.eitc-related-card > a:focus-visible {
  outline: 1px solid var(--eitc-accent);
  outline-offset: 5px;
}

/* 人気度・新着ラベル(画像左上に重ねて表示) */
.eitc-tier-label {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  padding: 0.2rem 0.6rem;
  background: rgba(250, 250, 247, 0.92);
  color: var(--eitc-ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--eitc-line);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 900px) {
  .eitc-related-grid {
    max-width: 700px;
  }

  .eitc-related-grid-entries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .eitc-detour {
    margin-top: 3.75rem;
    margin-bottom: 1.75rem;
  }

  .eitc-detour-heading {
    margin-bottom: 1.6rem;
  }

  .eitc-detour li > a {
    padding: 1.1rem 0.15rem;
    font-size: 0.96rem;
  }

  .eitc-detour li > a:hover,
  .eitc-detour li > a:focus-visible {
    padding-left: 0.35rem;
  }

  .eitc-detour li > a::after {
    display: none;
  }

  .eitc-detour-divider {
    margin-top: 1.5rem;
  }

  .eitc-detour-divider::before,
  .eitc-detour-divider::after {
    width: 60px;
  }

  .eitc-detour-divider img {
    width: 28px;
    height: 28px;
    margin: 0 0.9rem;
  }

  .eitc-related-grid {
    margin-bottom: 4rem;
  }

  .eitc-related-grid-title {
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
  }

  .eitc-related-grid-entries {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
  }

  .eitc-related-card {
    padding-bottom: 1.25rem;
  }

  .eitc-related-card img {
    aspect-ratio: 16 / 9;
  }

  .eitc-related-card h3 {
    font-size: 1rem;
  }

  .eitc-related-card p {
    font-size: 0.9rem;
    -webkit-line-clamp: 2;
  }
}

/* =========================================================
   3. ARTICLE HEADER REDESIGN
   Title → taxonomy nav → Featured Image(Hero) → Lead → Body
   author/date meta・旧subtitleは表示のみ停止(データは変更しない)。
   ========================================================= */

/* Blocksyネイティブのauthor/date meta行(記事ヘッダー内)を非表示にする。
   構造化データ(schema.org属性)はDOM上に残るため、表示のみの停止となる。 */
.entry-header .entry-meta {
  display: none;
}

/* mobileのみ見出し階層(記事タイトルH1・本文H2・本文H3)を縮小
   (2026-08-29、H1は31px→26px→24pxへ2度訂正、H2/H3は2026-08-29新規追加)。
   Blocksyの動的CSS(wp-content/uploads/blocksy/css/global.css)は
   `.entry-header .page-title`・本文h2/h3のfont-sizeを全breakpoint共通
   (30px/35px/30px)で固定しており、mobile向けの縮小設定が存在しない
   (customizerのsingle_blog_post_hero_elementsは未設定=コード側デフォルト
   のまま)。3.5節の.site-title調整と同じ理由・同じ方式(動的CSSは
   カスタマイザー保存のたびに再生成されるため直接編集せず、子テーマ側で
   より高い詳細度+!importantでmobile breakpointのみ上書き)で対応する。
   本文h2/h3は`.wp-block-heading`(WordPressコアのcore/headingブロックにのみ
   付与されるクラス)と組み合わせることで、関連記事グリッド見出し
   (`.eitc-related-grid-title`、こちらは`.wp-block-heading`を持たない別のh2)
   等、本文以外のh2/h3要素には影響しないようにしている。
   font-weight・letter-spacing・marginは変更しない(既存値をそのまま継承)。
   本文font-sizeは対象外。desktop/tabletはこのメディアクエリの外のため無変更。 */
@media (max-width: 640px) {
  .entry-header .page-title {
    font-size: 24px !important;
    line-height: 1.35 !important;
  }

  h2.wp-block-heading {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }

  h3.wp-block-heading {
    font-size: 18px !important;
    line-height: 1.45 !important;
  }
}

.eitc-taxonomy-nav {
  margin: 0 0 1.75rem;
  font-size: 0.85rem;
  color: var(--eitc-muted);
  letter-spacing: 0.01em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.eitc-taxonomy-nav a {
  color: var(--eitc-muted);
  text-decoration: none;
}

.eitc-taxonomy-nav a:hover,
.eitc-taxonomy-nav a:focus-visible {
  color: var(--eitc-accent);
}

.eitc-taxonomy-sep {
  margin: 0 0.55em;
  color: var(--eitc-line);
}

/* 2026-08-27: 元画像のnatural aspect ratioをそのまま使う方針から、SWELL時代と同様の
   16:9 Hero frameへ統一した。portrait画像がmobileで画面を占有しすぎる問題・記事ごとに
   Hero高さが揃わない問題を解消するため。Featured Image自体・attachment dataには
   一切触れない、表示frameのみのcrop。PC/mobileとも同じ16:9を維持する(mobile専用の
   別比率は設けない)。 */
.eitc-hero-image {
  margin: 0 0 2rem;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}

.eitc-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hero image・本文と同じcontent columnに揃える: 独自のmax-width/左右marginは持たせない。
   (2026-08-22: max-width:92%+margin:autoを一度追加したが、.entry-contentに幅制御CSSが
   存在せず、Hero/本文と異なる基準幅で92%計算されてページ幅近くまで広がる崩れが発生したため撤回)
   2026-08-22(2回目): 本文との視覚的な区別が弱かったため、ごく薄いアイボリー背景+paddingを追加。
   カード化(border/shadow)はせず、色と余白だけで「別の編集レイヤー」であることを示す。
   背景色はno-image fallback・記事末オーナメントと同系統の#F3F2EDを使用。 */
.eitc-lead {
  font-style: normal;
  font-size: 1.08em;
  font-weight: 400;
  color: #4f4f4f;
  line-height: 1.95;
  background: #f3f2ed;
  padding: 1.2em 1.4em;
  margin-top: 1.5em;
  margin-bottom: 2.8em;
}

@media (max-width: 640px) {
  .eitc-lead {
    padding: 1em 1.1em;
  }
}

/* =========================================================
   3.5 SITE HEADER(mobile): site titleの不自然な折り返し修正
   Blocksyの動的CSS(wp-content/uploads/blocksy/css/global.css)は
   `.site-title`のfont-sizeを全breakpoint共通で25px固定にしており、
   mobile側の折り返し対応が存在しない。子テーマ側で動的CSSより高い
   詳細度を持つセレクタ+!importantでmobile breakpointのみ上書きする
   (動的CSSファイル自体はカスタマイザー保存のたびに再生成されるため
   直接編集しない)。「世界の片隅でいただきます」(13字)が360px幅でも
   1行に収まるサイズを計算のうえ選定(25px→17px、約-32%)。デスクトップ側
   の.site-titleには影響しない(このメディアクエリの外では無変更)。
   ========================================================= */
@media (max-width: 640px) {
  .site-title {
    font-size: 17px !important;
    letter-spacing: -0.01em;
  }
}

/* =========================================================
   4. HOMEPAGE: Hero + 場所から読む + 記録の種類から読む
   雑誌の表紙 + アーカイブの目次。card shadow/強いborder/badge装飾は使わない。
   ========================================================= */

.eitc-homepage {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 0 2rem;
}

/* ---- Hero ---- */

/* タイポグラフィHero: 写真を置かない静かな編集ステートメント。
   サイト名はヘッダー側に既にあるため、ここでは重複表示しない。
   tagline中心・直下に細線・右下にグラス+ストローの小さな署名のみ。 */
.eitc-hero-typo {
  position: relative;
  margin: 0 0 4.5rem;
  background: var(--eitc-paper);
}

.eitc-hero-typo-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 3.75rem 1.5rem 3.5rem;
  text-align: center;
}

/* 日本語版: 「中央に置かれた左揃えの編集コピー」。
   copy block自体(tagline+細線)はHero中央付近に置き、その中の文字だけを
   text-align:leftにする。block位置は、親のtext-align:centerでinline-blockの
   copyを中央寄せすることで実現する(copy自身の内容幅に関わらず視覚中心が
   常に50%に来るため、margin-leftの%指定より安定する)。 */
.eitc-hero-typo-inner.is-ja {
  max-width: none;
  margin: 0;
  padding: 3.75rem 1.5rem 3.5rem;
  text-align: center;
}

.eitc-hero-typo-copy {
  display: block;
}

.eitc-hero-typo-inner.is-ja .eitc-hero-typo-copy {
  display: inline-block;
  text-align: left;
}

.eitc-hero-typo-tagline {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #262626;
}

/* 日本語コピーは英語よりも文字幅を使うため、行間だけをわずかに広げる
   (font-sizeはPC/mobileとも英語版と共通のまま、Heroの高さは変えない)。 */
.eitc-hero-typo-tagline.is-ja {
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.eitc-hero-typo-rule {
  display: block;
  width: 40px;
  height: 1px;
  margin: 1.5rem auto 0;
  background: var(--eitc-ink);
}

/* 日本語版: 細線はページ中央ではなく、copyの左端に従わせる
   (margin:autoによる中央寄せをやめ、copy左端基準のflushにする)。 */
.eitc-hero-typo-inner.is-ja .eitc-hero-typo-rule {
  margin: 1.5rem 0 0 0;
}

/* グラス+ストローのブランドモチーフ: ロゴ化せず、署名・蔵書印のような小さな記号として
   Hero右下の隅に添えるのみ。taglineより明らかに小さく、主張しない。
   右端に張り付いた印象を弱めるため、rightを内側へ寄せた(縦位置・サイズ・opacityは無変更)。
   ja/en共通(横位置のみの調整のため、言語スコープなしでどちらにも適用される)。 */
.eitc-hero-typo-mark {
  position: absolute;
  right: 5rem;
  bottom: 1.25rem;
  width: 26px;
  height: auto;
  opacity: 0.78;
}

@media (max-width: 640px) {
  /* mobileでは記事一覧へ早く到達できるよう、Heroを少しコンパクトにする
     (PC側の値は無変更)。タイポグラフィ・グラス+ストローのモチーフ自体は維持し、
     余白とfont-sizeのみを控えめに詰める。 */
  .eitc-hero-typo {
    margin-bottom: 1.75rem;
  }

  .eitc-hero-typo-inner {
    padding: 1.5rem 1.25rem 1.5rem;
  }

  .eitc-hero-typo-tagline {
    font-size: 1.3rem;
  }

  .eitc-hero-typo-rule {
    margin-top: 0.9rem;
  }

  .eitc-hero-typo-mark {
    right: 2.2rem;
    bottom: 0.65rem;
    width: 18px;
  }

  /* mobileはPCのcopy block中央寄せ(text-align:center)を引き継がず、
     従来どおり左揃えのまま(横スクロール・マークとの衝突を避けるため)。 */
  .eitc-hero-typo-inner.is-ja {
    padding: 1.5rem 1rem 1.5rem;
    text-align: left;
  }

  .eitc-hero-typo-inner.is-ja .eitc-hero-typo-copy {
    display: block;
    margin-left: 0;
  }

  .eitc-hero-typo-inner.is-ja .eitc-hero-typo-rule {
    margin-top: 0.9rem;
  }

  /* 2026-08-26: 日本語版のみ、2行目「その少し外側で見つけた記録。」(14字)が
     さらに折り返って3行になる問題を修正。文言は変更せず、font-size/letter-spacing/
     左右paddingだけを追加で詰めて2行に収める(360px幅で概算約258px、
     利用可能幅を上回らないことを計算で確認済み)。英語版はこの問題が
     発生していないため対象外(font-sizeは1.3remのまま)。PC側は無変更。 */
  .eitc-hero-typo-tagline.is-ja {
    font-size: 1.15rem;
    letter-spacing: 0;
  }
}

/* ---- 片隅から読む(台湾/マレーシア): PCでは左右2カラム、mobileでは1カラム ----
   2026-08-25: 旧「場所から読む/記録の種類から読む」2グループ・国別/taxonomy別の
   大きな棚box・棚ごとの見出しとMore linkは廃止。「台湾棚」「マレーシア棚」という
   大きな囲いは作らず、各カードの小さなplace label(.eitc-shelf-row-axis)だけで
   所属を示す軽い一覧にする。section全体の見出しは1つ(「片隅から読む」)のみ。
   カラムはcategory landing page(.eitc-cat-landing)と同じ1100px幅・中央寄せ。 */
.eitc-corner-section {
  margin: 0 0 4rem;
}

.eitc-corner-title {
  margin: 0 0 1.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--eitc-line);
  color: var(--eitc-ink);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  max-width: 1100px;
  margin-inline: auto;
}

/* 2026-08-26: 台湾/マレーシアを別々の縦積みcolumn(旧.eitc-corner-col)にせず、
   6記事(taiwan1,malaysia1,taiwan2,malaysia2,taiwan3,malaysia3の順)を
   このgridの直接の子として並べる単一CSS Gridに変更した。これにより、
   同じ行トラックに属する左右2枚の.eitc-shelf-rowの高さが、CSS Gridの
   既定挙動(align-items:stretch)で自動的に揃う(JSでの高さ測定は使わない)。 */
.eitc-corner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  row-gap: 1.75rem;
  max-width: 1100px;
  margin-inline: auto;
  width: 100%;
}

/* ---- 第三の編集軸: 片隅の独り言 / From a Corner(「片隅から読む」の
   下に置く、独立した全幅section)----
   place=gray/ivory・note=beige/paperという既存の色系統に対し、新しい強い色は足さず、
   「2カラムの後に全幅sectionが現れる」という構造そのものをリズムとして使う。
   背景はHeroに近いwarm ivory(var(--eitc-paper))のみ、box-shadow/強いborderなし。 */
.eitc-homepage-notes {
  margin: 0 0 4rem;
}

.eitc-homepage-notes-inner {
  padding: 0;
}

.eitc-homepage-notes-title {
  margin: 0 0 1.75rem;
  color: var(--eitc-ink);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* 2026-08-26: Homepageの2つのsection heading(Pick Up/片隅の独り言)の色を
   同じneutral charcoal(var(--eitc-ink))へ統一する。上のcolor:var(--eitc-ink)は
   本来この意図どおりだったが、共有クラス.eitc-essay-section-title(warm brown
   #5a5042、category landingの.eitc-cat-notes-titleとも共有するクラス)がこの
   ファイル内でこのルールより後に定義されており、同specificity(単一class)の
   場合ソース順で後勝ちになるCSSの仕様により、実際にはwarm brownで表示されていた。
   category landing側の見た目には触れないため(そちらは別のセレクタ順で既に
   意図どおりの色になっている)、.eitc-homepage-notes-titleとの組み合わせ
   セレクタでHomepageだけにスコープする(color以外は変更しない)。 */
.eitc-homepage-notes-title.eitc-essay-section-title {
  color: var(--eitc-ink);
}

/* ---- 「片隅の独り言」共通: 横罫線list(画像なし・文章中心、最大3件) ----
   通常棚(.eitc-shelf-row/.eitc-cat-row、画像+タイトル+Lead 2行clamp、
   「画像から記事を探す」UI)とは文法自体を変え、thumbnail/No Imageを一切
   表示しない。「NEW ARTICLES」的な横罫線区切りの記事リストとし、
   背景の大きな色面・左端の縦線はいずれも廃止して通常のpage backgroundに
   戻す(box感・別コーナー感は色や囲みではなく、画像なし/横罫線/Lead全文/
   hover interactionという「見せ方の違い」だけで作る)。
   homepage(.eitc-homepage-notes)・category landing(.eitc-cat-notes)の
   両方でこの.eitc-essay-section/.eitc-essay-rows/.eitc-essay-row*を共有する。
   homepage版はrowの左にplace meta列を持つが(.eitc-essay-row__meta)、
   category landing版はそのcategoryが場所そのものなのでmeta列自体を
   出力しない(flexboxのため、meta省略時はbodyが自然に全幅を使う)。 */
.eitc-essay-section {
  /* 背景・borderなし。通常のpage backgroundのまま。 */
}

/* section自体はcontent幅いっぱいの位置を維持しつつ、中身(見出し・row list・
   More link)だけをこのinner containerで中央寄せの読み幅に絞る。
   通常棚(homepageは1200px、category landingは1100px)よりはっきり狭くすることで、
   「一覧表」ではなく中央に置かれた読み物欄に見せる。この幅の違い自体を
   別コーナー感として利用するため、通常棚のcontainer幅には触れない。 */
.eitc-essay-list-inner {
  max-width: 900px;
  margin-inline: auto;
  width: 100%;
}

.eitc-essay-section-title {
  font-weight: 500;
  color: #5a5042;
}

/* 各行は横罫線(border-top)で区切り、listの最後にもborder-bottomを
   置いて閉じる。行間の余白(gap)は使わず、罫線とrow自体のpaddingだけで
   リズムを作る(参考UIの「新着記事一覧」に近い構成)。 */
.eitc-essay-rows {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--eitc-line-soft);
  margin-bottom: 1.5rem;
}

/* row全体をhover/クリック対象にする。stretched-link pattern
   (.eitc-essay-row__link::after)で実リンクはタイトルの<a>1つに絞りつつ、
   視覚的なhit areaはrow全体に広げる。hoverはdesktop/pointer:fine環境限定、
   背景色はごく淡く、文字色は変えない(layout shiftも起こさない)。 */
.eitc-essay-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--eitc-line-soft);
  transition: background-color 150ms ease;
}

/* 2026-08-26: Homepageのみ、見出い直下の最初の罫線をPick Upのseparator
   (var(--eitc-line))と同系統にする。記事と記事の間の罫線(2本目以降)・
   list末尾の閉じ罫線(.eitc-essay-rowsのborder-bottom)は、片隅の独り言らしい
   静かなwarm tone(--eitc-line-soft)のまま維持する(category landing側の
   .eitc-cat-notesは対象外、影響しない)。 */
.eitc-homepage-notes .eitc-essay-row:first-child {
  border-top-color: var(--eitc-line);
}

@media (hover: hover) and (pointer: fine) {
  .eitc-essay-row:hover {
    background-color: #f7f4ec;
  }
}

.eitc-essay-row__meta {
  flex: 0 0 110px;
  width: 110px;
  padding-top: 0.15rem;
  color: var(--eitc-muted);
  font-size: 0.8em;
  line-height: 1.5;
}

.eitc-essay-row__body {
  flex: 1;
  min-width: 0;
}

.eitc-essay-row__title {
  position: relative;
  margin: 0 0 0.5rem;
  color: var(--eitc-ink);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}

.eitc-essay-row__link {
  color: inherit;
  text-decoration: none;
}

/* stretched-link: タイトルの<a>だけを実リンクとして残し、疑似要素で
   rowの矩形全体までhit areaを広げる(nested linkを作らない安全な方法)。 */
.eitc-essay-row__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.eitc-essay-row__link:focus-visible {
  outline: 1px solid var(--eitc-accent);
  outline-offset: 3px;
}

/* Leadは_eitc_article_leadを原則全文表示する(line-clampなし)。 */
.eitc-essay-row__lead {
  margin: 0;
  color: var(--eitc-muted);
  font-size: 0.92rem;
  line-height: 1.8;
}

.eitc-essay-more {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--eitc-muted);
  font-size: 0.88rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 160ms ease;
}

.eitc-essay-more:hover,
.eitc-essay-more:focus-visible {
  color: var(--eitc-accent);
}

/* ---- 記事カード(Pick Up 共通): 雑誌の目次のような軽い横長row。
   2026-08-26: metadata line(place category / note taxonomy)を実リンク化するため、
   カード全体を1つの<a>で包む旧構造から、stretched-link pattern(既存の
   .eitc-essay-row__link::afterと同じ考え方)へ変更した。タイトルの<a>だけを
   「カード全体をクリック可能にする」ためのstretched overlayとして使い、
   metadataのリンクはposition+z-indexでoverlayより上に重ねることで、
   nested <a>を作らずに両方を独立してクリック可能にしている。 ---- */
.eitc-shelf-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
}

/* 2026-08-26: thumbnail寸法(--eitc-thumb-size)・正方形化(aspect-ratio:1/1)は
   category landing(.eitc-cat-row-media)と共通token/共通ルールにする
   (下の「thumbnail(共通): Homepage Pick Up / category landing / taxonomy archive」
   ブロック参照)。ここでは.eitc-shelf-row-media固有のflexプロパティのみ残す。 */
.eitc-shelf-row-media {
  flex: 0 0 var(--eitc-thumb-size);
}

.eitc-shelf-row-body {
  flex: 1;
  min-width: 0;
}

/* metadata line(place category + note taxonomy)。titleより明確に弱い階層を
   維持するため、font-size/color/太さはこれまでと同じまま、リンクの見た目のみ追加する。
   z-index:2でタイトルのstretched overlay(z-index:1)より上に重ね、
   独立してクリック可能にする。 */
.eitc-shelf-row-axis {
  position: relative;
  z-index: 2;
  margin: 0 0 0.25rem;
  color: var(--eitc-muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.eitc-shelf-row-axis-link {
  color: inherit;
  text-decoration: none;
}

.eitc-shelf-row-axis-link:hover,
.eitc-shelf-row-axis-link:focus-visible {
  color: var(--eitc-accent);
}

.eitc-shelf-row-axis-link:focus-visible {
  outline: 1px solid var(--eitc-accent);
  outline-offset: 2px;
}

.eitc-shelf-row-title {
  margin: 0 0 0.3rem;
  color: var(--eitc-ink);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.45;

  /* PC 2列×3段のgrid行高さ揃えに伴い、極端に長いtitleが1段だけを不自然に
     高くしないよう、ja/en共通で最大2行clampにする(2026-08-26、旧is-en限定から統一)。 */
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: calc(1.45em * 2);
}

.eitc-shelf-row-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

/* stretched-link: タイトルの<a>だけを実リンクとして残し、疑似要素でカード全体
   (サムネイル含む)までhit areaを広げる。z-index:1でmetadata linkより下に置く。 */
.eitc-shelf-row-title-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.eitc-shelf-row-lead {
  margin: 0;
  color: var(--eitc-muted);
  font-size: 0.85rem;
  line-height: 1.65;

  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.eitc-shelf-row:hover .eitc-shelf-row-media img {
  opacity: 0.88;
  filter: saturate(0.82);
}

.eitc-shelf-row-title-link:hover,
.eitc-shelf-row-title-link:focus-visible {
  color: var(--eitc-accent);
}

.eitc-shelf-row-title-link:focus-visible {
  outline: 1px solid var(--eitc-accent);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .eitc-hero-title {
    font-size: 1.6rem;
  }

  .eitc-corner-grid {
    column-gap: 2rem;
  }

  /* 2026-08-26: thumbnail寸法は--eitc-thumb-sizeの再定義だけで、
     .eitc-shelf-row-media・.eitc-cat-row-media(category landing側の
     900px breakpoint、下のセクション5参照)双方に同時に反映される。
     個別クラスでのwidth上書きは不要になったため削除した。 */
  :root {
    --eitc-thumb-size: 124px;
  }
}

@media (max-width: 640px) {
  .eitc-homepage {
    padding-top: 0.5rem;
  }

  .eitc-hero {
    margin-bottom: 3rem;
  }

  .eitc-hero-media {
    margin-bottom: 1.25rem;
  }

  .eitc-hero-title {
    font-size: 1.4rem;
  }

  .eitc-hero-lead {
    font-size: 0.98rem;
    line-height: 1.85;
  }

  /* mobile: 「片隅から読む」を1カラムに戻す(台湾3件→マレーシア3件の順に
     縦積み)。1画面あたりの情報密度を上げるため、thumbnailをPC/tablet版より
     さらに小さくし、row間の余白・Leadの行数も詰める(box/shadow/borderは追加しない)。
     2026-08-26: Pick UpからLeadを削除したことに伴い、article row自体が
     さらに軽くなったため、周辺の余白も合わせてもう一段詰めた。 */
  .eitc-corner-section {
    margin-bottom: 2.25rem;
  }

  .eitc-corner-title {
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    font-size: 1rem;
  }

  /* mobileでは2列gridを解除し、1column・6記事の縦積みに戻す。PC用の
     行高さ揃え(align-items:stretch)は1列では意味を持たないため何もしないが、
     念のため各記事は内容に応じた自然な高さになる(stretchは同じ行に複数列が
     ある場合のみ効果があるため、1列時は無害)。 */
  .eitc-corner-grid {
    grid-template-columns: 1fr;
    row-gap: 0.85rem;
  }

  /* 2026-08-26: article row内部(thumbnail+metadata/title)を、PC/tabletのflexから
     明確な2列CSS Gridへ変更。thumbnailの下へtextが回り込むfloat的レイアウトを
     避け、右カラム(metadata+title)にmin-width:0を与えてtitleが自然に折り返せる
     ようにする(既存の.eitc-shelf-row-bodyは元々flex:1;min-width:0;だったが、
     grid化に伴いflexの指定自体は意味を持たなくなるため、gridでも効く
     min-width:0だけが実質的に残る形になる)。 */
  /* 2026-08-26: thumbnailの列幅もgrid-template-columnsで--eitc-thumb-sizeを
     直接参照し、実際のthumbnail要素の幅と常に一致させる(ハードコード値の
     二重管理を避ける)。 */
  .eitc-shelf-row {
    display: grid;
    grid-template-columns: var(--eitc-thumb-size) 1fr;
    column-gap: 0.75rem;
    align-items: start;
  }

  :root {
    --eitc-thumb-size: 88px;
  }

  /* mobileのみLeadを1行clampにする(Homepage側の.eitc-shelf-row系shelfのうち、
     .eitc-corner-grid/.eitc-search-results配下ではない箇所向けの既定値。
     2026-08-29: taxonomy archiveは.eitc-search-results配下へ移動し、下の
     .eitc-search-results .eitc-shelf-row-lead側のdisplay:noneルール(より高い
     詳細度)が優先されるようになったため、taxonomy archiveはもうこの
     1行clampの対象ではない)。 */
  .eitc-shelf-row-lead {
    -webkit-line-clamp: 1;
  }

  /* 2026-08-26: Pick UpはPCのみLeadを表示し、mobileでは非表示にする。
     Lead自体は常にmarkupへ出力されている(rendererをviewport分岐で複雑にしない
     ため)ため、ここでは.eitc-corner-grid配下のLeadだけをdisplay:noneにする。 */
  .eitc-corner-grid .eitc-shelf-row-lead {
    display: none;
  }

  .eitc-homepage-notes {
    margin-bottom: 3rem;
  }

  .eitc-homepage-notes-title {
    margin-bottom: 1.25rem;
  }

  /* PC用の900px上限は解除し、既存page padding内に自然に収まる全幅にする。 */
  .eitc-essay-list-inner {
    max-width: none;
    margin-inline: 0;
  }

  /* 画像がなく、Leadは全文表示のため、[meta][title+lead]の横並びを
     維持せず、meta/title/Leadを縦積みにする(横スクロール防止)。 */
  .eitc-essay-row {
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem 0;
  }

  .eitc-essay-row__meta {
    flex-basis: auto;
    width: auto;
  }
}

/* =========================================================
   5. CATEGORY LANDING PAGE(台湾の片隅/日本の片隅/マレーシアの片隅 等)
   トップページのarticle row/棚blockと思想は揃えつつ、category archive専用に
   独立したclass名で実装(homepage側のCSSとは責務を分離)。
   ========================================================= */

.eitc-cat-landing {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
}

.eitc-cat-landing-title {
  margin: 0 0 2.5rem;
  color: var(--eitc-ink);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.4;
}

.eitc-cat-landing-back {
  margin: 0 0 1.5rem;
}

.eitc-cat-landing-back a {
  color: var(--eitc-muted);
  font-size: 0.9rem;
  text-decoration: none;
}

.eitc-cat-landing-back a:hover,
.eitc-cat-landing-back a:focus-visible {
  color: var(--eitc-accent);
}

/* 「片隅の独り言」冒頭の編集ステートメント(category description)。
   カード化・背景色を付けず、静かな本文的レイアウトのままにする。 */
.eitc-cat-landing-intro {
  max-width: 640px;
  margin: 0 0 3rem;
  color: var(--eitc-muted);
  font-size: 1rem;
  line-height: 1.9;
}

.eitc-cat-landing-intro p {
  margin: 0 0 1.2em;
}

.eitc-cat-landing-intro p:last-child {
  margin-bottom: 0;
}

/* 英語は日本語より1行が長くなりやすいため、英語版のみmax-width/line-heightを
   ごく軽く調整する(background/border/shadow/斜体等の装飾は付けない、共通のまま)。 */
.eitc-cat-landing-intro.is-en {
  max-width: 680px;
  line-height: 1.85;
}

/* taxonomy sectionを2×2 gridで配置し、4つのtaxonomyを「4つの入口」として
   同時に見せる。CSS Gridのdefault align-items:stretchにより、同じ行に並んだ
   section同士は自動的に高さが揃う(3件のsection同士がおおむね同じ高さになる)。
   1〜2件しかないsectionは無理に埋めず、下に余白が残るだけで構わない。 */
.eitc-cat-sections-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 2rem;
}

/* 「片隅の独り言/From a Corner」section: taxonomy 2×2 gridの5個目の箱にはせず、
   gridの外側に独立した全幅sectionとして置く(taxonomy grid=「何を観察したか」、
   片隅の独り言=「何を考えたか」という性格の違いを示すため)。最大3件までの
   画像なし横罫線list(.eitc-essay-row)として表示し、通常のtaxonomy section
   (画像あり2×2 grid)とは文法自体を変えて差をつける。背景box・左borderは
   使わず通常のpage backgroundのまま。画像が無い分、text領域を広く使う。 */
.eitc-cat-notes {
  margin: 3rem 0 0;
  padding: 0;
}

.eitc-cat-notes-title {
  margin: 0 0 1.5rem;
  color: var(--eitc-ink);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 各taxonomy sectionを薄い背景blockでグルーピング(トップページの棚blockと同じ思想)。
   4termでごくわずかに色相だけ変え、色分けではなく塊感を目的にする。
   flex-column化し、末尾のMore linkをmargin-top:autoでblock下端に自然に揃える。 */
.eitc-cat-section {
  margin: 0 0 2rem;
  padding: 1.5rem 1.75rem;
  border-radius: 0;
}

.eitc-cat-sections-grid .eitc-cat-section {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.eitc-cat-sections-grid .eitc-cat-more {
  margin-top: auto;
  padding-top: 1rem;
}

/* 2×2 grid内のarticle rowsは、section幅が半分になるためrow内2カラムにはせず、
   縦積みのシンプルなリストにする(filtered mode側の.eitc-cat-rowsは2カラムのまま維持)。 */
.eitc-cat-sections-grid .eitc-cat-rows {
  grid-template-columns: 1fr;
  row-gap: 1.1rem;
}

.eitc-cat-section:last-child {
  margin-bottom: 0;
}

.eitc-cat-section--culture {
  background: #f5efe4;
}

.eitc-cat-section--business {
  background: #f1f1ef;
}

.eitc-cat-section--street {
  background: #eef1ec;
}

.eitc-cat-section--visit {
  background: #f3efec;
}

.eitc-cat-section-title {
  margin: 0 0 1.5rem;
  color: var(--eitc-ink);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
}

/* article row: PCでは2カラムgrid。トップページのarticle rowと同じ
   thumbnail+title+Leadの横長構成。 */
.eitc-cat-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.75rem;
  row-gap: 1.5rem;
}

.eitc-cat-row {
  min-width: 0;
}

.eitc-cat-row > a {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}

/* thumbnail寸法・正方形化は.eitc-shelf-row-mediaと共有(下の共通ブロック参照)。
   ここでは.eitc-cat-row-media固有のflexプロパティのみ残す。 */
.eitc-cat-row-media {
  flex: 0 0 var(--eitc-thumb-size);
}

/* ---- thumbnail(共通): Homepage Pick Up(.eitc-shelf-row-media) /
   category landing(.eitc-cat-row-media) / taxonomy archive
   (.eitc-shelf-row-mediaを共有)の3箇所だけでscopeする共通ルール。
   2026-08-26: 3presentationで見え方を統一するため、寸法(--eitc-thumb-size)を
   ここに集約した。Related Notes(.eitc-related-card img)・各種Hero・個別記事等、
   他のthumbnail/画像には一切適用されない(意図的にセレクタをこの2クラスだけに絞っている)。
   2026-08-26(2): 一度1:1正方形へ変更したが、不自然なsquare cropを避けるため
   撤回し、元のthumbnail比率(4:3)へ戻した。拡大した寸法(--eitc-thumb-size)自体は維持する。 */
.eitc-shelf-row-media,
.eitc-cat-row-media {
  width: var(--eitc-thumb-size);
}

.eitc-shelf-row-media img,
.eitc-cat-row-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--eitc-line-soft);
  filter: saturate(0.95);
  transition: opacity 180ms ease, filter 180ms ease;
}

.eitc-shelf-row-media img.eitc-fallback-thumb,
.eitc-cat-row-media img.eitc-fallback-thumb {
  object-fit: contain;
}

.eitc-cat-row-body {
  flex: 1;
  min-width: 0;
}

/* 「片隅の独り言」article row上部の場所ラベル(台湾の片隅/日本の片隅等)。
   ページ自体が「片隅の独り言」であることは既に分かるため、そのラベル自体は出さない
   (各記事の実際の場所categoryのみを小さく表示する)。 */
.eitc-cat-row-axis {
  margin: 0 0 0.3rem;
  color: var(--eitc-muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.eitc-cat-row-title {
  margin: 0 0 0.35rem;
  color: var(--eitc-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  transition: color 160ms ease;
}

.eitc-cat-row-lead {
  margin: 0;
  color: var(--eitc-muted);
  font-size: 0.88rem;
  line-height: 1.65;

  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.eitc-cat-row > a:hover .eitc-cat-row-media img {
  opacity: 0.88;
  filter: saturate(0.82);
}

.eitc-cat-row > a:hover .eitc-cat-row-title,
.eitc-cat-row > a:focus-visible .eitc-cat-row-title {
  color: var(--eitc-accent);
}

.eitc-cat-row > a:focus-visible {
  outline: 1px solid var(--eitc-accent);
  outline-offset: 3px;
}

.eitc-cat-more {
  display: inline-block;
  margin-top: 1.25rem;
  color: var(--eitc-muted);
  font-size: 0.88rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 160ms ease;
}

.eitc-cat-more:hover,
.eitc-cat-more:focus-visible {
  color: var(--eitc-accent);
}

.eitc-cat-pagination {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.eitc-cat-pagination .page-numbers {
  display: inline-block;
  padding: 0.35em 0.7em;
  color: var(--eitc-muted);
  text-decoration: none;
}

.eitc-cat-pagination .page-numbers.current {
  color: var(--eitc-ink);
  font-weight: 700;
}

.eitc-cat-pagination .page-numbers:hover {
  color: var(--eitc-accent);
}

/* ---- taxonomy archive(note、例:食文化の記録): 2026-08-29に検索結果ページと
   同じ.eitc-search-results/.eitc-search-results-list(1カラム横型list)へ統一した
   ため、旧2列grid(.eitc-tax-archive-grid)は廃止した(taxonomy-note.php側の
   コメント参照)。記事カード自体は引き続きfunctions.php側の
   eitc_homepage_render_corner_card()(.eitc-shelf-row系、Homepage Pick Up・
   search.phpと共有)を再利用する。 ---- */

@media (max-width: 900px) {
  .eitc-cat-rows {
    column-gap: 1.25rem;
  }

  /* thumbnail寸法は上のセクション4で900px breakpoint用に既に
     --eitc-thumb-size:124pxへ再定義済み(.eitc-shelf-row-mediaと共有)。 */

  /* 2カラムのままだと各sectionの幅が窮屈になるため、900px以下は1カラム縦積みに
     戻す(既存Blocksy breakpointの900pxとの整合を優先)。taxonomy順はそのまま維持。 */
  .eitc-cat-sections-grid {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  .eitc-cat-landing {
    padding: 1.75rem 0 3rem;
  }

  .eitc-cat-landing-title {
    font-size: 1.5rem;
    margin-bottom: 1.75rem;
  }

  .eitc-cat-section {
    padding: 1.1rem 1.1rem;
    margin-bottom: 1.5rem;
  }

  .eitc-cat-sections-grid .eitc-cat-section {
    margin-bottom: 0;
  }

  .eitc-cat-section-title {
    font-size: 1.05rem;
    margin-bottom: 1.1rem;
  }

  .eitc-cat-rows {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }

  /* thumbnail寸法は上のセクション4で640px breakpoint用に既に
     --eitc-thumb-size:88pxへ再定義済み(.eitc-shelf-row-mediaと共有)。 */

  .eitc-cat-notes {
    margin-top: 1.5rem;
  }

  .eitc-cat-notes-title {
    font-size: 1.05rem;
    margin-bottom: 1.1rem;
  }
  /* .eitc-essay-row系のmobile調整はセクション5(homepage)で共通定義済み */
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .eitc-detour li > a,
  .eitc-detour li > a::after,
  .eitc-related-card img,
  .eitc-related-card h3,
  .eitc-shelf-row-media img,
  .eitc-shelf-row-title-link,
  .eitc-cat-row-media img,
  .eitc-cat-row-title,
  .eitc-cat-more,
  .eitc-essay-row,
  .eitc-essay-more {
    transition: none;
  }
}

/* =========================================================
   mobile header 検索導線(2026-08-29)
   functions.php側でPC用検索button(.ct-header-search[data-id="search"])を
   複製しhamburger triggerの直前へ挿入している(.eitc-mobile-search-trigger)。
   複製ボタンは元のrowの外に置かれるため、表示制御をここで独自に持つ。
   PC/tabletでは非表示、mobileでのみ表示する。ボタン自体のsize/icon/
   クリック挙動はBlocksy本体のct-toggle/ct-header-searchスタイルを
   そのまま継承するため、ここではlayoutのみ調整する。 */
.eitc-mobile-search-trigger {
  display: none;
}

@media (max-width: 640px) {
  .eitc-mobile-search-trigger {
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem;
  }
}

/* =========================================================
   検索結果ページ(2026-08-29、search.php)
   card grid(Blocksy標準、2〜3列boxed card)を1カラムの横型list
   (compact article row)へ置き換える。desktop/mobileとも1カラム。
   カード自体はHomepage Pick Up/taxonomy archiveと共有の
   eitc_homepage_render_corner_card()(.eitc-shelf-row系markup)を
   そのまま再利用し、.eitc-search-resultsスコープでのみ見た目を
   上書きする(このスコープの外=Homepage/category landing/taxonomy
   archiveの既存デザインには一切影響しない)。
   thumbnail寸法は共有token --eitc-thumb-size をこのスコープ内だけ
   ローカル再定義することで、他presentationに影響を与えずに
   desktop 240px/mobile 110pxへ変更する。 */
.eitc-search-results {
  --eitc-thumb-size: 240px;
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 0 3rem;
}

.eitc-search-results-title {
  margin: 0 0 1.5rem;
  color: var(--eitc-ink);
  font-size: 1.4rem;
  font-weight: 700;
}

.eitc-search-results-list {
  display: flex;
  flex-direction: column;
}

/* row間の区切りはborder-bottom。shadow/背景/borderの「card」的装飾は使わない。 */
.eitc-search-results .eitc-shelf-row {
  box-shadow: none;
  background: none;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--eitc-line-soft);
}

.eitc-search-results .eitc-shelf-row:first-child {
  padding-top: 0;
}

.eitc-search-results .eitc-shelf-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* titleは検索結果としての可読性を優先し、2行clampを解除して全文表示する。 */
.eitc-search-results .eitc-shelf-row-title {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  min-height: 0;
  font-size: 1.05rem;
}

/* Leadは要求通りline-clampせず全文表示する(_eitc_article_lead優先、
   空の場合のみeitc_get_safe_excerpt()のfallbackだが、markup自体は
   eitc_homepage_render_corner_card()側で共通)。 */
.eitc-search-results .eitc-shelf-row-lead {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  font-size: 0.92rem;
  line-height: 1.7;
}

.eitc-search-pagination {
  margin-top: 2rem;
}

.eitc-search-no-results {
  color: var(--eitc-muted);
}

@media (max-width: 640px) {
  .eitc-search-results {
    --eitc-thumb-size: 110px;
    padding: 1.25rem 0 2rem;
  }

  .eitc-search-results .eitc-shelf-row {
    padding: 1.1rem 0;
  }

  /* 2026-08-29: mobileのみLead(_eitc_article_lead)を非表示にし、
     thumbnail/taxonomy-place metadata/titleだけのコンパクトな構成にする。
     desktop/tabletはこのメディアクエリの外(base rule・全文表示)のため無変更。
     Leadデータ・検索ロジックには一切触れず、表示層(CSS)のみの変更。 */
  .eitc-search-results .eitc-shelf-row-lead {
    display: none;
  }
}