/* =========================================================
   News Archive Styles (scoped to .news-archive)
   ---------------------------------------------------------
   ・カード型レイアウト / 16:9 サムネイル
   ・タイポグラフィは本文 15px / 行間 1.8 をベース
   ・アクセシビリティ：focus-visible / コントラスト配慮
   ========================================================= */

.news-archive {
  --radius: 12px;
  --border: #e9ecef;
  --shadow: 0 6px 18px rgba(0,0,0,.06);
  --text: #1f2328;
  --muted: #6b7280;
  --accent: #0a66c2; /* 必要に応じてブランド色に */
}

/* ===== Header ===== */
.news-archive .archive-header { padding: 16px 0 8px; }
.news-archive .archive-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0 0 12px;
}

/* Category (pill) nav */
.news-archive .news-categories {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 18px;
}
.news-archive .news-category-link {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.news-archive .news-category-link:hover { border-color: color-mix(in oklab, var(--accent) 35%, #cdd5df); }
.news-archive .news-category-link.is-active { background: color-mix(in oklab, var(--accent) 12%, #fff); border-color: var(--accent); }
.news-archive .news-category-link:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 30%, transparent); outline-offset: 2px; }

/* ===== Grid ===== */
.news-archive .news-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}

/* ===== Card ===== */
.news-archive .news-card { list-style: none; }
.news-archive .news-card__link {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.news-archive .news-card__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: color-mix(in oklab, #000 6%, var(--border));
}
.news-archive .news-card__link:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 30%, transparent); outline-offset: 3px; }

/* media (16:9) */
.news-archive .news-card__media { position: relative; padding-top: 56.25%; background: #f3f5f7; }
.news-archive .news-card__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.news-archive .news-card__media .--placeholder { position: absolute; inset: 0; background: repeating-linear-gradient(45deg,#f1f3f5,#f1f3f5 10px,#e9ecef 10px,#e9ecef 20px); }

/* body */
.news-archive .news-card__body { padding: 14px 14px 16px; display: grid; gap: 8px; align-content: start; }
.news-archive .news-card__date { font-size: 12px; color: var(--muted); letter-spacing: .02em; }

/* cats */
.news-archive .news-card__cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.news-archive .news-card__cat {
  font-size: 12px; line-height: 1; color: var(--accent);
  padding: 6px 8px; border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
  border-radius: 999px; background: color-mix(in oklab, var(--accent) 8%, #fff);
}

/* title & excerpt (use 15px/1.8 base) */
.news-archive .news-card__title { 
  font-size: 18px; 
  line-height: 1.6; 
  font-weight: 700; 
  margin: 2px 0 0; 
  /* Standard property for modern browsers */
  line-clamp: 2; 
  /* Legacy WebKit fallback */
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical; 
  overflow: hidden; 
}
.news-archive .news-card__excerpt { 
  font-size: 15px; 
  line-height: 1.8; 
  color: #444; 
  margin: 0; 
  /* Standard property for modern browsers */
  line-clamp: 2; 
  /* Legacy WebKit fallback */
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical; 
  overflow: hidden; 
}

.news-archive .news-card__more { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--accent); }
.news-archive .news-card__link:hover .news-card__more { text-decoration: underline; }

/* ===== Pagination ===== */
.news-archive .pagination { margin: 28px 0 10px; }
.news-archive .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.news-archive .pagination .page-numbers {
  min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: #fff; text-decoration: none; color: var(--text);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.news-archive .pagination .page-numbers:hover { border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); }
.news-archive .pagination .page-numbers.current { background: color-mix(in oklab, var(--accent) 12%, #fff); border-color: var(--accent); font-weight: 700; }
.news-archive .pagination .page-numbers:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 30%, transparent); outline-offset: 3px; }

/* ===== Empty state ===== */
.news-archive .no-results { text-align: center; color: var(--muted); font-size: 15px; line-height: 1.8; padding: 32px 0 60px; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .news-archive .news-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .news-archive .archive-title { font-size: 22px; }
  .news-archive .news-list { grid-template-columns: 1fr; gap: 16px; }
  .news-archive .news-card__body { padding: 12px; gap: 6px; }
}