/* ==========================================================================
   p-column — PC/12_ColumnIndex（/column/）・SP/12_ColumnIndex
   PC: 記事一覧（2 列）+ サイドバー 336px（間 32px）、下にページ送り（64px）
   SP: 記事一覧 1 列 → ページ送り → サイドバー（独立セクション: 上下 64px）
   ========================================================================== */

.p-column-list {
  display: grid;
  grid-template-areas:
    "list side"
    "pager pager";
  grid-template-columns: minmax(0, 1fr) 336px; /* Figma 固有寸法: サイドバー幅 */
  column-gap: var(--space-32);
  row-gap: var(--space-64);
  align-items: start;
}

.p-column-list__articles {
  display: grid;
  grid-area: list;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}

.p-column-list__pager {
  grid-area: pager;
}

.p-column-list__side {
  display: flex;
  flex-direction: column;
  grid-area: side;
  gap: var(--space-32);
}

@media (min-width: 1024px) and (max-width: 1339px) {

  .p-column-list {
    grid-template-columns: minmax(0, 1fr) 300px; /* Tablet: サイドバーを縮める（実装判断） */
  }
}

@media (max-width: 1023px) {

  .p-column-list {
    grid-template-areas:
      "list"
      "pager"
      "side";
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-32);
  }

  .p-column-list__articles {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
  }

  /* Figma SP: サイドバーは独立セクション（sec-ranking 上下 64px・要素間 24px）。ページ送りとの間は 64 + 64 = 128px */
  .p-column-list__side {
    gap: var(--space-24);
    margin-top: var(--space-96); /* row-gap 32px + 96px = 128px */
  }
}