/* ==========================================================================
   pages-archive.css：投稿アーカイブ（archive）
   目的：一覧（左）＋サイド（右）の2カラム
   方針：
   - Single踏襲（container内で完結）
   - 数値はCockpit管理
   ========================================================================== */

/* ==========================================================================
   01) Layout：2カラム（一覧＋サイド）
   ========================================================================== */

.p-archive {
  margin-top: var(--archive-mt);
  margin-bottom: var(--archive-mb);
}

.p-archive__grid {
  display: grid;
  grid-template-columns: 1fr var(--archive-side-w);
  gap: var(--archive-gap);
  align-items: start;
}

.p-archive__main {
  min-width: 0;
}

/* ==========================================================================
   02) Head
   ========================================================================== */

.p-archive__head {
  margin-bottom: 24px;
}

.p-archive__lead {
  margin: 0;
  color: var(--brand-primary);
  font-weight: 700;
}

/* ==========================================================================
   03) List：一覧（minimal knobs / no-wrap capsules）
   - サイズ感のみツマミ化
   - metaはgrid固定
   - catsは折り返し禁止（= 高さが常に一致）
   ========================================================================== */

.p-archive__list {
  display: grid;
  gap: var(--archive-list-gap);
}

.p-archive__item {
  margin: 0;
}

/* カード枠 */
.p-archive__box {
  display: block;
  padding: var(--archive-card-pad-y) var(--archive-card-pad-x);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--archive-card-radius);
  min-height: var(--archive-card-minh);
  transition: opacity 0.2s ease;
}

.p-archive__box:hover {
  opacity: 0.92;
}

/* meta（左：日付 / 右：カテゴリ） */
.p-archive__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 6px;
  height: 27px; /* ← 🌹 ここはコックピッドに置かない固定 */
}

/* 日付 */
.p-archive__date {
  display: block;
  font-size: var(--archive-date-size);
  line-height: 1.2;
  opacity: 0.75;
  margin: 0;
}

/* カテゴリ行（折り返し禁止で高さを固定） */
.p-archive__cats {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap; /* ✅ 折り返し禁止 */
  overflow: hidden; /* ✅ 万一の溢れは見切り */
  margin: 0;
}

/* カテゴリカプセル */
.p-archive__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--brand-accent-soft);
  background: rgba(230, 164, 180, 0.12);
  color: var(--brand-accent-soft);
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap; /* ✅ カプセル内改行禁止 */
  flex: 0 0 auto; /* ✅ 勝手に潰れない */
}

.p-archive__cat:hover {
  opacity: 0.85;
}

/* タイトル */
.p-archive__title {
  margin: 0;
  font-size: var(--archive-title-size);
  line-height: 1.3;
}

/* タイトルリンク */
.p-archive__link {
  color: var(--brand-primary);
  text-decoration: none;
}

.p-archive__link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   04) Sidebar
   ========================================================================== */

.p-archive__side {
  position: relative;
}

/* ==========================================================================
   05) Pager
   ========================================================================== */

.p-archive__pager {
  margin-top: 28px;
}