/* ジャスティファイド・レイアウト（行ごとに高さを揃え、各画像の縦横比を保ったまま
 * 横幅いっぱいに敷き詰める）。**CSS だけで成立する。JavaScript も外部ライブラリも
 * 使わない。**
 *
 * 仕組み
 * ------
 * 各要素の flex-basis と flex-grow を **どちらも縦横比 a に比例** させる。
 * 行内の自由幅を F、行内の比率合計を Σa とすると
 *     w_i = a_i * H + F * a_i / Σa = a_i * (H + F / Σa)
 *     h_i = w_i / a_i = H + F / Σa   ← 行内で一定
 * となり、幅は比率に応じて変わるのに高さだけが揃う。**トリミングは発生しない。**
 * 行ごとに高さが変わるのがジャスティファイドの正しい挙動。
 *
 * ⚠️ aspect-ratio を必ず付けること。
 * ------------------------------------
 * これが無いと、箱の高さが画像の読み込み後にしか決まらない。実ブラウザで計測した
 * 結果は
 *     aspect-ratio あり: 310px（正しい高さ）
 *     aspect-ratio なし:  20px  → 画像が届くたびにページ全体が跳ねる
 * 48 枚を遅延読み込みする画面なので、跳ね続けることになる。縦横比はサーバー側の
 * assets.orig_width / orig_height から渡す。
 *
 * ⚠️ sm 未満（640px 未満）では効かせない。
 * ----------------------------------------
 * 狭い幅だと 1 行 1 枚になり、縦位置が 433px の高さになる（実測）。48 枚だと
 * スクロール量が膨大でスマホの流し見が壊れるため、モバイルは 2 カラムのままにする。
 * カスタムプロパティ（--ar / --g / --b）はメディアクエリの中でだけ読むので、
 * モバイルではインラインの値がそのまま無視される。
 */

.justified {
  display: grid;                       /* モバイル: 2 カラム */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

/* ⚠️ 縦横比は **画像の枠 (.j-frame) に付ける**。カード自体に付けると、
 * /favorites のようにキャプションが下に付く画面で高さが合わなくなる。
 * 枠の高さが行内で一定なら、キャプションの高さが同じである限り総高も揃う。
 *
 * モバイルは 4:3 の枠。⚠️ object-contain と背景色でトリミングを避ける
 * （4:3 の枠に 2:3 の縦位置を object-cover で入れると上下 50% が切れる）。 */
.justified .j-frame {
  aspect-ratio: 4 / 3;
}

/* 最終行を伸ばさないためのスペーサー。モバイルでは邪魔なので消す。 */
.justified > .j-spacer {
  display: none;
}

@media (min-width: 640px) {
  .justified {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .justified > .j-item {
    /* 値はサーバー側がインラインのカスタムプロパティで渡す。
       未設定の素材（orig_width が NULL）は 3:2 として扱う。 */
    flex-grow: var(--g, 1.5);
    flex-basis: var(--b, 255px);
  }

  .justified .j-frame {
    aspect-ratio: var(--ar, 3 / 2);
  }

  /* ⚠️ 最終行の扱い。
   * 既定では最終行も横幅いっぱいに伸びる（Adobe Stock と同じ挙動）。
   * .justified--keep-last を付けると、スペーサーが自由幅を吸って最終行が
   * 基準の高さのままになる。件数が少ない画面（/favorites）で 1 枚が巨大に
   * 表示されるのを防ぐ用途。切り替えはクラス 1 つで済む。 */
  .justified--keep-last > .j-spacer {
    display: block;
    flex-grow: 1000000;
    flex-basis: 0;
    height: 0;
    margin: 0;
  }
}

/* 画像は枠いっぱいに、ただし切らない。 */
.j-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}