/* =========================================================
   page-news.css : お知らせ一覧
   page-pill / News一覧（日付・タグ・タイトル）/ ページネーション
   施設子サイト（りじょう認定こども園）
   ※ .news-list / .news-row / .tag は components.css を流用。
     一覧ページPCは区切り線なし・列位置をデザイン実値に上書き。
   ========================================================= */

/* ===== ページタイトル pill（共通仕様） ===== */
.page-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  max-width: calc(100% - 40px);
  height: 70px;
  margin: 40px auto 0;
  background: var(--color-white);
  border: 1px solid var(--color-accent-mid);
  border-radius: 10px;
  font-family: var(--font-gothic);
  font-weight: 900;
  font-size: 28px;
  color: var(--color-accent);
}

/* 背景装飾はPC共通背景(body.bg-en / pc-bg.webp)に一本化。ページ個別装飾は持たない。 */

/* ===== 一覧 ===== */
.newssec { padding-bottom: 96px; }
.newslist__inner {
  width: 100%;
  max-width: 1198px;
  margin: 32px auto 0;
  padding-inline: var(--gutter);
}

/* PCのみ：列位置をデザイン実値（行内 左78 / 日付60 / タグ +60 / タイトル +64）。
   各 a の上下に区切り線（先頭に上線＋全行に下線）。色は既存トークン #e3ddcd。 */
@media (min-width: 751px) {
  .newslist .news-row {
    gap: 0;
    min-height: 80px;
    padding: 0 0 0 78px;
    border-bottom: 1px solid #e3ddcd;
  }
  .newslist .news-row:first-child { border-top: 1px solid #e3ddcd; }
  .newslist .news-row__date { width: 60px; }
  .newslist .news-row .tag { margin-left: 60px; }
  .newslist .news-row__ttl { margin-left: 64px; }
}

/* ===== ページネーション ===== */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 38px;
}
.pager__nums { display: inline-flex; align-items: center; gap: 12px; }
.pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 40px;
  border-radius: 24px;
  background: var(--color-white);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 16px;
  color: #999;
  transition: opacity 0.2s;
}
.pager__btn:hover { opacity: 0.7; }
/* 現在ページ：デザインは cream(#fdfdf0)地。白文字だと不可視のため数字はアクセント色で視認性を確保 */
.pager__btn.is-active {
  background: #fdfdf0;
  color: var(--color-accent);
  font-family: var(--font-base);
  font-weight: 500;
}
.pager__btn--dots { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); cursor: default; }
.pager__btn--dots:hover { opacity: 1; }

/* 前後ナビ（白丸＋グレーのシェブロン） */
.pager__btn--nav::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
}
.pager__btn--prev::before { transform: translateX(2px) rotate(-135deg); }
.pager__btn--next::before { transform: translateX(-2px) rotate(45deg); }

.pager__count { display: none; }

/* =========================================================
   レスポンシブ（SP : max-width 750px）
   ========================================================= */
@media (max-width: 750px) {
  .page-pill { width: 300px; max-width: calc(100% - 40px); height: 40px; font-size: 22px; margin-top: 24px; }

  .newssec { padding-bottom: 60px; }
  .newslist__inner { max-width: none; margin-top: 24px; }

  /* SP ページネーション：prev灰／next緑の角丸四角＋中央に "現在/総数" */
  .pager__nums { display: none; } /* 数字ボタンはSP非表示（.pc-onlyだけだと後勝ちで効かないため明示） */
  .pager { gap: 0; justify-content: space-between; margin-top: 26px; }
  .pager__btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    box-shadow: none;
  }
  .pager__btn--nav::before { width: 9px; height: 9px; border-color: var(--color-white); }
  .pager__btn--prev { background: #999; }
  .pager__btn--next { background: var(--color-accent); }
  .pager__count {
    display: inline-block;
    font-family: var(--font-base);
    font-size: 15px;
    color: var(--color-text);
  }
}