/* ============================================================
   layout.css
   ページ全体のレイアウト / Works 一覧グリッド
   ============================================================ */

/* ヘッダーは fixed でフローから外れているため、この padding-top が
   そのまま「ページ上端 → 最初のコンテンツ」の距離になる。
   メインページ（Works グリッド）・作品詳細ページ共通。 */
main {
  padding-top: var(--page-content-top);
  padding-bottom: var(--page-padding-bottom);
  padding-inline: var(--page-padding-inline);
}

/* --- Works 一覧 ---------------------------------------------
   考え方:
     カードは固定幅・最大幅を持たない。
     ページ左右の余白（親 .works の padding-inline）と
     カード間の gap だけを決め、残りを列数で等分する。
     → カード幅は画面幅に応じて常に自動計算される。

       3列: (画面幅 - 72 * 2 - 27 * 2) / 3
       2列: (画面幅 - 72 * 2 - 27)     / 2
       1列:  画面幅 - 20 * 2

   ブレークポイント:
     960px より大きい … 3列 / 左右 72px / 横 gap 27px / 縦 gap 80px
     960px 以下       … 2列 / 左右 72px / 横 gap 27px / 縦 gap 80px
     700px 以下       … 1列 / 左右 20px /            縦 gap 48px
   ------------------------------------------------------------ */
.works {
  padding-inline: var(--works-page-margin);   /* 60px */
}

.works__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--works-grid-column-gap);   /* 27px */
  row-gap: var(--works-grid-row-gap);         /* 80px */
  width: 100%;
}

/* --- 960px 以下: 2列 -----------------------------------------
   左右 72px・横 gap 27px・縦 gap 80px は 3列時と同じ。 */
@media (max-width: 960px) {
  .works__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- 700px 以下: 1列 -----------------------------------------
   左右 20px を固定し、残りの幅をカードがそのまま使う。
   例: 700px → 20px | 660px | 20px
       500px → 20px | 460px | 20px
       390px → 20px | 350px | 20px
   1列のときだけ縦の間隔は 48px。 */
@media (max-width: 700px) {
  .works {
    padding-inline: var(--page-padding-inline-sp);   /* 20px */
  }

  .works__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--works-grid-row-gap-sp);           /* 48px */
  }
}