/* p-archive — 一覧ページ共通セクション
   Figma: 新着情報一覧 3191:24424 / 採用情報一覧 3191:24460（実測値・全てトークン参照）
   カード本体（p-news__item / p-recruit-information__item）は cards.css 担当。 */

.p-archive {
  padding-block: var(--space-120);
  background: var(--color-bg-beige); /* #FFF + #A89990 10%（Figma変数） */
  color: var(--color-text);
}

.p-archive__inner {
  display: flex;
  gap: var(--space-80);
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-40);
}
/* --- 本体 --- */
.p-archive__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

.p-archive__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.p-archive__title {
  margin: 0;
  font-size: var(--font-size-h2-lead); /* 25.6px */
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
}

.p-archive__lead {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose); /* Figma: 28.8px = 1.8 */
}

.p-archive__empty {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* --- カードグリッド（3列・行間48 / 列間32） --- */
.p-archive__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

/* 3カラム固定。flex + flex:1 だと最終行の枚数が3未満のときカードが横に伸びてしまうため、
   grid で列幅を固定する（件数が3の倍数でなくてもカード幅が変わらない）。 */
.p-archive__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
}

.p-archive__row > * {
  min-width: 0;
}

/* --- ページネーション（paginate_links の出力に当てる） --- */
.p-archive__pagination {
  display: flex;
  justify-content: center;
}

.p-archive__pagination .page-numbers {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem; /* 40px（Figma実測） */
  min-height: 2.833rem; /* 45.33px（Figma実測） */
  padding: var(--space-8) var(--space-16);
  border: var(--border-width-bold) solid var(--color-primary); /* Figma: 2px */
  border-radius: var(--radius-sm); /* 4px */
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--font-size-h3); /* 18.286px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    translate var(--duration-fast) var(--ease-out);
}

/* hover / focus（⚠ inferred）: 数字は矢印を持たないので、面を薄く敷いて反応を示す
   （色の反転はしない方針）。現在ページ（span.current）はリンクではないので対象外。
   前へ/次へは文字を透明にして矢印だけ見せている（下で個別指定）ため除外する。 */
.p-archive__pagination a.page-numbers:not(.prev, .next):hover,
.p-archive__pagination a.page-numbers:not(.prev, .next):focus-visible {
  background: var(--color-bg-beige);
}

/* Figma上は3つとも塗りつぶし（＝現在ページの見た目）だが、
   一覧として成立させるため「現在ページ=塗り／他=白地」に正規化した。 */
.p-archive__pagination .page-numbers.current {
  background: var(--color-primary);
  color: var(--color-white);
}

/* 前へ / 次へ（Figma: 39.85x45.33 の矢印。common/ico_arrow.svg を mask で描画） */
.p-archive__pagination .page-numbers.prev,
.p-archive__pagination .page-numbers.next {
  width: 2.491rem; /* 39.85px（Figma実測） */
  min-width: 0;
  padding: 0;
  border: 0;
  background-color: var(--color-primary);
  color: transparent;
  -webkit-mask: url("../../images/common/ico_arrow.svg") no-repeat center / 1.5rem auto;
  mask: url("../../images/common/ico_arrow.svg") no-repeat center / 1.5rem auto;
}

.p-archive__pagination .page-numbers.prev {
  transform: rotate(180deg);
}

/* 前へ/次へ（⚠ inferred）: c-button と同じく、色は変えず矢印が進行方向へ動くだけ。
   translate は transform（rotate）より先に適用され回転の影響を受けないため、
   左向きの .prev だけ符号を反転させる。 */
.p-archive__pagination a.page-numbers.next:hover,
.p-archive__pagination a.page-numbers.next:focus-visible {
  translate: var(--hover-shift) 0;
}

.p-archive__pagination a.page-numbers.prev:hover,
.p-archive__pagination a.page-numbers.prev:focus-visible {
  translate: calc(var(--hover-shift) * -1) 0;
}

/* モーション低減設定：位置の変化は手がかりとして残し、滑らかな移動だけやめる。 */
@media (prefers-reduced-motion: reduce) {
  .p-archive__pagination .page-numbers {
    transition: none;
  }
}

/* paginate_links は要素間に空白テキストを挟むので、gap ではなく margin で間隔をとる */
.p-archive__pagination .page-numbers + .page-numbers {
  margin-left: var(--space-8);
}

/* --- SP（767px以下・inferred: SPフレーム未提供のため縦積み/2列） --- */

/* 縦レールは共通の .c-rail（base.css）。gapのみFigma実測に合わせる */
.p-archive .c-rail {
  gap: var(--space-40);
}

@media (max-width: 767px) {
  .p-archive {
    padding-block: var(--space-40) var(--space-64); /* SP共通のセクション上下余白 */
  }

  .p-archive__content {
    gap: var(--space-32);
  }

  .p-archive__title {
    font-size: var(--font-size-h3-lg); /* 21.33px（PC 25.6px から1段階） */
  }

  .p-archive__inner {
    position: relative; /* レール（c-rail）の基準 */
    flex-direction: column;
    gap: var(--space-32);
    padding-inline: var(--space-48) var(--space-24);
  }

  /* p-content と同じ扱い: レールはフローから外し、縦罫線の中心を左から24に合わせる */
  .p-archive .c-rail {
    position: absolute;
    left: var(--space-24);
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    gap: var(--space-16);
  }
  /* SPは1カラム。PCの3枚区切り（__row）をまたいで1列に流したいので、
     行ラッパーを display:contents で透過させ、リスト全体を1つのグリッドとして扱う。 */
  .p-archive__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .p-archive__row {
    display: contents;
  }
}