/* ===================================================================
   NEWS 一覧ページ（Figma PC 141:7954 / SP 420:14949）
   ※ カード本体（.news__list / .news__card / .news__date /
     .news__card-title / .news__empty）は common.css に集約。
=================================================================== */

/* ※ 見出し帯（.news-archive__head / __title / __title-en / __title-ja）
   と パンくず（.breadcrumb*）は詳細ページと共通のため common.css に集約。 */

/* -------------------------------------------------------------------
   ページネーション（六角形ボタン + previous / next）
   paginate_links() 出力クラス（.page-numbers / .current / .prev /
   .next / .dots）をスタイリング。
------------------------------------------------------------------- */
.news-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3.5rem;
}

/* 数字（現在ページ以外）= 黒地の六角形 */
.news-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.9375rem; /* 79px */
  aspect-ratio: 79 / 64;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 2rem; /* 32px */
  line-height: 1;
  color: var(--color-text-white);
  background: url('../images/news/news_diamond.svg') no-repeat center / contain;
  transition: color 0.2s, background-image 0.2s, transform 0.2s;
}

@media (min-width: 1024px) {
  .news-pager a.page-numbers:not(.prev):not(.next):not(.dots):not(.current):hover {
    color: var(--color-gold);
    background-image: url('../images/news/news_current.svg');
    transform: scale(1.08);
  }
}

/* 現在ページ = 白地金枠の六角形（SVG は news_current.svg = 94×72）。
   aspect-ratio も SVG 比 94/72 に合わせ、ボックスに余分な余白を出さない。 */
.news-pager .page-numbers.current {
  width: 5.6rem; /* 89.6px */
  aspect-ratio: 94 / 72;
  font-size: 2rem; /* 32px */
  color: var(--color-gold);
  background-image: url('../images/news/news_current.svg');
}

/* 数字だけを少し上へ（六角形の背景は border-box 基準で固定したまま、
   下パディングで中央位置を上方向にずらす）。prev/next/dots は対象外。 */
.news-pager .page-numbers:not(.prev):not(.next):not(.dots) {
  padding-bottom: 0.3125rem; /* 5px ぶん数字を上げる */
  background-origin: border-box;
  background-clip: border-box;
}

/* 省略記号 */
.news-pager .page-numbers.dots {
  width: auto;
  aspect-ratio: auto;
  background: none;
  color: var(--color-gold);
  font-size: 1.5rem;
}

/* previous / next（矢印を上、テキストを下に縦積み。数字群との間隔は約24px） */
.news-pager .page-numbers.prev,
.news-pager .page-numbers.next {
  width: auto;
  aspect-ratio: auto;
  background: none;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-gold);
  font-weight: 700;
  font-size: 1.25rem; /* 20px */
  text-transform: lowercase;
}

.news-pager .page-numbers.prev {
  margin-right: 1rem; /* gap 0.5rem と合算で約24px */
}

.news-pager .page-numbers.next {
  margin-left: 1rem;
}

@media (min-width: 1024px) {
  .news-pager a.page-numbers.prev:hover,
  .news-pager a.page-numbers.next:hover {
    filter: none;
    opacity: 0.7;
  }
}

/* 無効状態（先頭/末尾ページ）：淡いベージュ・クリック不可 */
.news-pager .page-numbers.is-disabled {
  color: var(--color-beige);
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

/* 矢印（テキスト上）は文字色に追従（有効=金／無効=ベージュ） */
.news-pager .page-numbers.prev::before,
.news-pager .page-numbers.next::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
}

/* 左向き三角（previous） */
.news-pager .page-numbers.prev::before {
  border-width: 6px 9px 6px 0;
  border-color: transparent currentColor transparent transparent;
}

/* 右向き三角（next） */
.news-pager .page-numbers.next::before {
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent currentColor;
}

/* -------------------------------------------------------------------
   レスポンシブ（SP: ≤1023px）
------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* --- 本文ガター：Figma SP は左右 28px（7.18% = 28/390）。
         見出し帯（新着情報）・パンくず・カード列・ページャを 28px に統一し、
         カード幅を Figma の 334px（= 390 − 28×2）に合わせる。
         ※ news.css は is_home() のみ読み込むため、詳細ページ・トップには影響しない。 --- */
  .news-archive .l-inner {
    padding-inline: 1.75rem; /* 28px → カード幅 334px */
  }

  /* 大「NEWS」：Figma SP では幅 165px・高さ約41px（テキスト 56px の字面高）。
     既存SVG（411:103）を高さ41px に縮小すると幅 ≒164px となり Figma と一致する。
     ボックス（56px）内では Figma 同様に上揃え（NEWS が上・新着情報が下に重なる）。 */
  .news-archive .news-archive__title-en {
    top: 0;
    bottom: auto;
    height: 2.5625rem; /* 41px → 幅約164px（Figma 165px） */
  }

  .news-archive .news-archive__title-ja {
    left: 1.75rem;
    bottom: 0.4rem;
  }

  .news-archive .breadcrumb {
    padding-right: 1.75rem; /* 28px（Figma 424:18526 の右端） */
  }

  /* --- ページネーション（Figma 424:18429）。
         現在ページ（01）を一回り大きく強調し、previous / next を本文両端へ固定、
         数字（01・02・03…）は中央に集約する。 --- */
  .news-pager {
    position: relative;
    gap: 0.5rem;
    margin-top: 2.5rem;
    min-height: 3.6875rem;
  }

  /* 通常ページ（02・03…）= 黒地六角形 60px・数字 24px */
  .news-pager .page-numbers {
    width: 3.75rem;        /* 60px */
    font-size: 1.5rem;     /* 24px */
  }

  /* 現在ページ（01）= 白地金枠でやや大きく強調。
     Figma は 73px/32px だが差が目立つため、控えめに 66px/28px へ調整。 */
  .news-pager .page-numbers.current {
    width: 4.25rem;
    font-size: 1.8rem;
  }

  /* previous / next は本文ガター（左右端）に固定。中央の数字と独立させる */
  .news-pager .page-numbers.prev,
  .news-pager .page-numbers.next {
    position: absolute;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
    font-size: 0.875rem;   /* 14px */
  }

  .news-pager .page-numbers.prev {
    left: 0;
  }

  .news-pager .page-numbers.next {
    right: 0;
  }
}