/* ========================================
   news.css — お知らせページ共通スタイル
   output/v0.02/news/ 配下すべてのHTMLから切り出し
   ======================================== */

/* ========== ページヒーロー ========== */
.page-hero {
  background: #1e3a5f;
  padding: 1.7rem 0 1.3rem;
  color: #fff;
}
/* 記事ページ（ヘッダー分のオフセット） */
.page-hero[data-article] {
  margin-top: 4rem;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  margin: 0 0 0.05rem;
}
.page-hero-sub {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  opacity: 0.75;
  font-weight: 300;
}

/* ========== 一覧ページ専用 ========== */

/* セクション */
#news-list {
  padding: 3rem 0 5rem;
  background: var(--color-warm-white);
}

/* セクションヘッダー */
.news-list-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.news-list-header .section-eyebrow {
  color: #8B6000;
}
.news-list-heading {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0.5rem 0 0;
}

/* 年フィルター */
.year-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.year-filter-label {
  font-size: 0.8rem;
  color: var(--color-text-sub);
  white-space: nowrap;
  font-weight: 600;
}
.year-filter-select {
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555577' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
  -webkit-appearance: none;
  appearance: none;
  font-size: 0.85rem;
  color: var(--color-text);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.2s;
  min-width: 130px;
}
.year-filter-select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

/* カードエリア */
.news-list-wrap {
  flex: 1;
  min-width: 0;
}

/* 水平カードリスト */
.news-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.news-card-list-item {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
}
.news-card-list-item:last-child {
  margin-bottom: 0;
}
.news-card-list-item:first-child {
  border-top: 1px solid var(--color-border);
}

/* カード（リンク全体） */
.news-list-inner {
  display: flex;
  gap: 1.25rem;
  padding: 1rem 0.75rem;
  text-decoration: none;
  background: #fff;
}

/* 画像エリア（左） */
.news-list-img-wrap {
  position: relative;
  flex: 0 0 180px;
  width: 180px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
}
.news-list-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.news-list-inner:hover .news-list-img-wrap img,
.news-list-inner:focus-visible .news-list-img-wrap img {
  transform: scale(1.04);
}

/* ホバーオーバーレイ */
.news-list-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 30, 60, 0.55);
  opacity: 0;
  transition: opacity 0.3s;
}
.news-list-inner:hover .news-list-overlay,
.news-list-inner:focus-visible .news-list-overlay {
  opacity: 1;
}

/* カテゴリラベル（画像左上） */
.news-list-img-wrap .news-category {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  white-space: nowrap;
}

/* テキストエリア（右） */
.news-list-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
}
.news-list-date {
  font-size: 0.8rem;
  color: var(--color-text-sub);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.news-list-title-text {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0;
  word-break: break-all;
  transition: color 0.2s;
}
.news-list-inner:hover .news-list-title-text,
.news-list-inner:focus-visible .news-list-title-text {
  color: var(--color-primary);
}

/* 件数表示 */
.news-total {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--color-text-sub);
}

/* モバイル（縦並びに切り替え） */
@media (max-width: 599px) {
  .news-list-inner {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
  }
  .news-list-img-wrap {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* ========== 記事詳細ページ専用 ========== */

#news-detail {
  background: var(--color-warm-white);
  padding: 4rem 0;
}
.news-article {
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 16px rgba(30,30,60,0.07);
  overflow: hidden;
}
.news-article-header {
  padding: 2rem 2.5rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.news-article-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}
.news-article-date {
  font-size: 0.82rem;
  color: var(--color-text-sub);
}
.news-category {
  background: rgba(70,70,85,0.82);
  color: #fff;
  font-size: 0.68rem;
  padding: 0.12rem 0.5rem;
  border-radius: 3px;
}
.news-article-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.45;
}
.news-article-body {
  padding: 1.8rem 2.5rem;
}
.news-article-text {
  font-size: 0.95rem;
  line-height: 2;
  color: var(--color-text);
  margin: 0;
  white-space: pre-line;
}

/* 写真グリッド */
.news-photos {
  padding: 0 2.5rem 2rem;
}
.news-photos[data-count="0"] { display: none; }
.news-photos-grid {
  display: grid;
  gap: 0.8rem;
}
.news-photos[data-count="1"] .news-photos-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
.news-photos[data-count="2"] .news-photos-grid { grid-template-columns: repeat(2, 1fr); }
.news-photos[data-count="3"] .news-photos-grid { grid-template-columns: repeat(3, 1fr); }
.news-photos:not([data-count="0"]):not([data-count="1"]):not([data-count="2"]):not([data-count="3"]) .news-photos-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 767px) {
  .news-photos[data-count="3"] .news-photos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .news-photos:not([data-count="0"]):not([data-count="1"]) .news-photos-grid { grid-template-columns: 1fr; }
}
.news-photo-item {
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg-section);
  cursor: pointer;
  position: relative;
}
.news-photo-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}
.news-photo-item:hover img { transform: scale(1.04); }
.news-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30,30,60,0.55);
  opacity: 0;
  transition: opacity 0.3s;
}
.news-photo-item:hover .news-photo-overlay { opacity: 1; }

/* 本文・画像の交互配置用（WordPress連携: news-detail.html専用。既存247記事の.news-photosグリッドには影響しない） */
.news-inline-photo {
  margin: 1.2rem 0;
  max-width: 480px;
}

/* WordPress連携: news-detail.html で動的生成される画像ブロック専用のスコープ。
   既存247記事の .news-photos-grid（object-fit: cover でトリミング）には一切影響しない。
   #news-article-body配下でのみ、object-fit: contain 相当で縦横比を維持したまま縮小表示する。 */
#news-article-body .news-photos {
  margin: 1.2rem 0;
}
#news-article-body .news-photos-grid {
  align-items: start;
}
#news-article-body .news-photo-item {
  background: var(--color-bg-section);
  display: flex;
  align-items: center;
  justify-content: center;
}
#news-article-body .news-photo-item img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
}
/* 画像1枚のみのブロック（.news-inline-photo）は、既定で max-width: 480px のため
   2枚グリッド表示時の1枚あたりの幅（記事本文幅700px前後・gap 0.8rem・2列 ≒ 340px）より
   大きく見えすぎる。news-detail.html（#news-article-body配下）専用に、2列グリッドの
   1カラム分と同程度の幅になるよう上書きし、中央寄せにする。既存247記事の .news-inline-photo は
   このセレクタが #news-article-body 配下限定のため影響を受けない。 */
#news-article-body .news-inline-photo {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
/* 複数枚グリッド（2枚以上）も枚数によらず中央寄せにする */
#news-article-body .news-photos-grid {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 600px) {
  #news-article-body .news-photos[data-count="2"] .news-photos-grid,
  #news-article-body .news-photos:not([data-count="0"]):not([data-count="1"]) .news-photos-grid {
    max-width: 700px;
  }
}

/* 画像読み込み中プレースホルダー（WordPress連携: news-detail.html専用）
   本文を先に表示し、/media APIでの画像URL解決を待たずに記事全体を見せるための
   グレーのスケルトンボックス。.news-photo-item のサイズ・角丸を踏襲しつつ、
   軽いシマー（明滅）アニメーションで読み込み中であることを示す。 */
.news-photo-placeholder {
  aspect-ratio: 4 / 3;
  background: linear-gradient(90deg, var(--color-bg-section) 25%, rgba(0,0,0,0.04) 37%, var(--color-bg-section) 63%);
  background-size: 400% 100%;
  animation: news-photo-placeholder-shimmer 1.4s ease infinite;
}
@keyframes news-photo-placeholder-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .news-photo-placeholder {
    animation: none;
  }
}

/* 戻るリンク */
.news-back {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 780px;
  margin: 0 auto 1.5rem;
  font-size: 0.85rem;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s;
}
.news-back:hover { color: var(--color-primary-dk); }

/* シェアボタン */
.news-share {
  padding: 1.5rem 2.5rem 2rem;
  border-top: 1px solid var(--color-border);
}
.news-share-buttons {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.share-btn--facebook { background: #1877F2; color: #fff; }
.share-btn--x { background: #000; color: #fff; }

/* 記事ページ モバイル */
@media (max-width: 599px) {
  .news-article-header,
  .news-article-body,
  .news-photos,
  .news-share {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}