@charset "UTF-8";

/* コレクション／KOUNTRY 一覧のギャラリー
 *
 * 画像の読み込み前に 2:3（サムネイルは 667×1000 固定）の領域を確保する。
 * 領域が無いとセルの高さが 0 になり、スクロール位置に応じた先読み判定
 * （IntersectionObserver）が働かず、読み込みが始まらない。
 * あわせて、読み込み完了時のフェードインを opacity で行う。
 */
.img-box img {
  display: block;
  width: 100%;
  aspect-ratio: 667 / 1000;
  opacity: 0;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.img-box img.is-loaded {
  opacity: 1;
}

/* ポップアップの画像も、開かれた時点ではまだ読み込まれていない。
 * 領域を確保しておかないと、colorbox が寸法の無い画像を測ってしまい、
 * 高さの潰れた枠が表示される。
 * is-thumb はサムネイルにだけ JS が付与する。
 */
.popup-area img.is-thumb {
  aspect-ratio: 667 / 1000;
}

/* 読み込みが終わった画像は実寸が分かるので、確保用の枠を外して本来の
 * 縦横比で表示する。
 *
 * ★ここを外すと横長画像が縦に伸びる。サムネイルは 667×1000 の枠に
 *   「収まるよう」縮小されるだけ（ImageThumbnailController の scale()）で、
 *   その比率になるわけではない。横長の元画像は 667×445 等になるため、
 *   2:3 の枠を残したままだと object-fit 既定値の fill で引き伸ばされる。
 *
 * is-sized は読み込みに成功した画像にだけ JS が付与する。失敗した画像は
 * 白1pxに差し替わるため、枠を残してレイアウトの崩れを防ぐ。
 */
.img-box img.is-sized,
.popup-area img.is-thumb.is-sized {
  aspect-ratio: auto;
}