/* 左のフィルタ列は幅ごと --space-x の曲線で縮める（1920で320px、1280で224px）。
   INDEX列の calc(200px + var(--space-x-120)) と縮み方が違うのは中身が違うため。
   INDEXのリンクは折り返す前提なので200pxを固定して読み幅を守るが、
   フィルタのチップは --fs で一緒に縮むので、列だけ固定しても意味がない
   （1280でも最長チップ119px < 内幅196pxで折り返しは出ていない）。 */
.p-works__layout {
  display: grid;
  grid-template-columns: var(--space-x-320) minmax(0, 1fr);
}

.p-works__filter {
  position: sticky;
  top: calc(var(--header-height) + var(--space-y-80));
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-y-16) var(--space-x-16);
  padding-right: var(--space-x-40);
}

.p-works__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-y-80) var(--space-x-40);
}

/* LOAD MORE。箱そのものは c-load-more-box が持つ。ここは
   フィルタ列（1列目）へ落ちないよう本文側の列へ置く配置差分だけ */
.p-works__more {
  grid-column: 2;
}

/* --- カードの列数だけ 1280px で切る（決定2の「1024 or 1280」）--------------
   3列を保てるのは1280px以上まで。1279px以下ではカードが300pxを割り、
   タグ（--fs で一緒には縮まない）がカード幅を超え始める。
   フィルタ列の位置は動かさず、列数だけ2列へ落とす（ユーザー判断）。
   1279pxで457px、1024pxで350px。SPは下のブロックで1列にする。
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .p-works__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- 中間層 + SP 共通（max-width: 1023px）---------------------------------
   左のフィルタ列を一覧の上へ回す。1024pxでは列224pxに対して本文が655px、
   カードが3列で196pxまで痩せる（調査は docs/tablet-audit.md の C-1 / V-4）。
   トップと同じ横並び＋折り返しのチップ列にする。
   カードの列数は中間層と SP で違うので、それぞれのブロックが持つ。
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .p-works__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-y-48) var(--space-x-48);
  }

  /* 本文の上に置く以上、追従する意味が無い（INDEXと同じ扱い） */
  .p-works__filter {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-y-8) var(--space-x-16);
    padding-right: 0;
  }

  /* 1カラムになるので列指定を戻す。上余白は c-load-more-box のまま */
  .p-works__more {
    grid-column: auto;
  }
}

/* ==========================================================================
   SP

   カードの見た目と絞り込みの状態は works-card.css、フィルタの動作は
   works-slider.js が担当する。ここは配置だけ。
   余白は docs/sp-strategy.md 決定14 に従う。
   ========================================================================== */
@media (max-width: 767px) {
  /* フィルタを一覧の上へ回すのは中間層と共通（上の1023pxブロック）。
     ここはカードを1列にする差分だけ */
  .p-works__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-y-48) var(--space-x-48);
  }

  /* 1カラムのこの帯では、LOAD MORE の上に p-works__layout の行間
     （--space-y-48）が重なって二重になる。その分を差し引いて、
     c-load-more-box の上余白（--space-y-96）どおりに見せる */
  .p-works__more {
    margin-top: calc(var(--space-y-96) - var(--space-y-48));
  }
}