/* =========================================================
   ILLUSTRATION GALLERY - STABLE LAYOUT FIX v3
   ---------------------------------------------------------
   illust.css の「後」に読み込んでください。

   目的:
   - 12列Gridを完全に無効化
   - masonry用JSの grid-row 指定を無視
   - item-wide / item-small 等の特殊幅を無効化
   - PC 3列 / Tablet 2列 / Mobile 2列
   - 画像は元の縦横比のまま表示
   ========================================================= */

/* ギャラリー本体を Grid ではなく Flex に固定 */
#editorial-gallery.editorial-gallery {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  gap: clamp(52px, 5vw, 88px) clamp(20px, 2.2vw, 34px) !important;
  grid-template-columns: none !important;
  grid-auto-columns: auto !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: initial !important;
}

/* 仮画像用の大小指定をすべて無効化 */
#editorial-gallery .gallery-item,
#editorial-gallery .item-tall,
#editorial-gallery .item-square,
#editorial-gallery .item-wide,
#editorial-gallery .item-small,
#editorial-gallery .item-portrait,
#editorial-gallery .item-push,
#editorial-gallery .item-shift,
#editorial-gallery .item-lift {
  flex: 0 0 calc((100% - 68px) / 3) !important;
  width: calc((100% - 68px) / 3) !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;

  /* 旧masonry JSが付けるinline値はFlexでは不要 */
  grid-column: auto !important;
  grid-column-start: auto !important;
  grid-column-end: auto !important;
  grid-row: auto !important;
  grid-row-start: auto !important;
  grid-row-end: auto !important;
}

/* 絵の縦横比をそのまま使う */
#editorial-gallery .gallery-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}

#editorial-gallery .gallery-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  position: static !important;
}

/* キャプションが隣の作品へはみ出さないようにする */
#editorial-gallery .gallery-caption {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#editorial-gallery .gallery-caption b {
  flex: 0 0 auto !important;
}

#editorial-gallery .gallery-caption em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Tablet: 2列 */
@media (max-width: 980px) {
  #editorial-gallery.editorial-gallery {
    gap: 48px 22px !important;
  }

  #editorial-gallery .gallery-item,
  #editorial-gallery .item-tall,
  #editorial-gallery .item-square,
  #editorial-gallery .item-wide,
  #editorial-gallery .item-small,
  #editorial-gallery .item-portrait,
  #editorial-gallery .item-push,
  #editorial-gallery .item-shift,
  #editorial-gallery .item-lift {
    flex-basis: calc((100% - 22px) / 2) !important;
    width: calc((100% - 22px) / 2) !important;
  }
}

/* Mobile: 2列を維持。3枚ごとの全幅化も撤廃 */
@media (max-width: 640px) {
  #editorial-gallery.editorial-gallery {
    gap: 34px 12px !important;
  }

  #editorial-gallery .gallery-item,
  #editorial-gallery .item-tall,
  #editorial-gallery .item-square,
  #editorial-gallery .item-wide,
  #editorial-gallery .item-small,
  #editorial-gallery .item-portrait,
  #editorial-gallery .item-push,
  #editorial-gallery .item-shift,
  #editorial-gallery .item-lift,
  #editorial-gallery .gallery-item:nth-child(3n) {
    flex-basis: calc((100% - 12px) / 2) !important;
    width: calc((100% - 12px) / 2) !important;
    margin: 0 !important;
  }

  #editorial-gallery .gallery-caption {
    gap: 6px !important;
    font-size: 8px !important;
  }
}

/* very small phones: 読みやすさ優先で1列 */
@media (max-width: 390px) {
  #editorial-gallery .gallery-item,
  #editorial-gallery .item-tall,
  #editorial-gallery .item-square,
  #editorial-gallery .item-wide,
  #editorial-gallery .item-small,
  #editorial-gallery .item-portrait,
  #editorial-gallery .item-push,
  #editorial-gallery .item-shift,
  #editorial-gallery .item-lift,
  #editorial-gallery .gallery-item:nth-child(3n) {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}