/* =====================================================================
   news.css
   News一覧ページ・News記事詳細ページ、両方で使うCSSです。
   色・ナビ・フッターなどの共通部分は common.css 側にあるので、
   このファイルは必ず common.css の後に読み込んでください。
===================================================================== */

/* =====================================================================
   ページ見出し(簡易ヘッダー帯)
===================================================================== */
.page-head{
  background:var(--paper-deep);
  padding:120px 0 30px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.page-head .eyebrow{ display:block; font-size:.8rem; color:var(--rust); letter-spacing:.08em; margin-bottom:10px; }
.page-head h1{
  font-size:clamp(2rem, 5vw, 2.8rem);
  font-family:'Fraunces', serif;
  font-style:italic;
  color:var(--rust-deep);
}
.page-head p{ margin-top:16px; color:var(--ink-soft); font-size:.95rem; }

/* =====================================================================
   ② News一覧(リスト形式)
===================================================================== */
.news-list{ padding:56px 40px 20px; }

.news-item{
  display:flex;
  gap:24px;
  padding:28px 0;
  border-bottom:1px solid var(--line);
  transition:opacity .2s ease;
}
.news-item:first-child{ border-top:1px solid var(--line); }
.news-item:hover{ opacity:.75; }

/* サムネイルがある記事だけ、画像の枠を表示する */
.news-item .thumb{
  width:220px;
  aspect-ratio:16/11;
  object-fit:cover;
  flex-shrink:0;
  background:var(--paper-deep);
}

.news-item .body{ flex:1; min-width:0; }
.news-item .date{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:.82rem;
  color:var(--rust);
}
.news-item h2{
  font-size:1.05rem;
  margin:6px 0 8px;
}
.news-item .excerpt{
  font-size:.85rem;
  color:var(--ink-soft);
  /* 長い抜粋文は2行で省略する */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* =====================================================================
   「もっと見る」ボタンのまわり
   (ボタン自体の見た目 .btn-outline は common.css 側にあります)
===================================================================== */
.load-more-wrap{ text-align:center; padding:40px 0 100px; }
/* 表示する記事が無くなったら、JSでこのクラスを付けてボタンを隠す */
.btn-outline.is-hidden{ display:none; }

/* =====================================================================
   ③ News詳細ページ
===================================================================== */
.post-section{ padding:56px 0 100px; }
.post-section .wrap{ max-width:760px; } /* 記事は読みやすいよう少し幅を狭くする */

.back-link{
  display:inline-block;
  margin:60px 0 28px;
  font-size:.85rem;
  color:var(--ink-soft);
}
.back-link:hover{ color:var(--rust-deep); }

.post-date{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:.85rem;
  color:var(--rust);
}
.post-title{
  font-size:clamp(1.4rem, 3vw, 1.9rem);
  margin:10px 0 28px;
}
.post-thumb{
  width:100%;
  aspect-ratio:16/11;
  object-fit:cover;
  margin-bottom:28px;
  background:var(--paper-deep);
}
.post-body p{ margin:0 0 20px; }

/* 前の記事/次の記事 */
.post-nav{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.post-nav a{
  font-size:.85rem;
  color:var(--ink-soft);
  max-width:45%;
}
.post-nav a:hover{ color:var(--rust-deep); }
.post-nav .next{ text-align:right; margin-left:auto; }
/* 前後の記事が無いときは、JS側でこのクラスを付けて非表示にする */
.post-nav a.is-disabled{ visibility:hidden; }

/* =====================================================================
   レスポンシブ(画面幅が狭いとき)
===================================================================== */
@media (max-width:760px){
  .news-item{ flex-direction:column; gap:12px; }
  .news-item .thumb{ width:100%; aspect-ratio:16/11; }

  .post-nav{ flex-direction:column; gap:14px; }
  .post-nav a{ max-width:100%; }
  .post-nav .next{ text-align:left; margin-left:0; }
}