/* ============================================================
 * masonry.css - 2列マソンリー / 1列スクロールスナップ
 * ============================================================ */

/* 外側コンテナ（もっと見るバッチを積む） */
#ieppy-card-grid {
  padding: 0 4px;
}

/* バッチラッパー（初期ロード + 追加ロードごと） */
.ieppy-masonry-grid {
  columns: 2;
  column-gap: 8px;
  margin-bottom: 0;
}

.ieppy-masonry-grid > * {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: 8px;
  display: inline-block;
  width: 100%;
  vertical-align: top;
}

/* iOS WebKit: columns内で overflow:hidden + border-radius が正しく描画されないバグをマスクレイヤーで回避 */
.ieppy-masonry-grid .ieppy-card {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* デフォルト（2列）: single カードを非表示（一覧ページのみ） */
#ieppy-card-grid .ieppy-card--single {
  display: none;
}

/* 1列モード: grid カードを非表示、single カードを表示（一覧ページのみ） */
body.is-single-mode #ieppy-card-grid .ieppy-card--grid {
  display: none;
}

body.is-single-mode #ieppy-card-grid .ieppy-card--single {
  display: block;
}

/* 1列モード: #ieppy-card-grid をスクロールスナップコンテナに */
body.is-single-mode #ieppy-card-grid {
  display: flex;
  flex-direction: column;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: calc(100dvh - 52px - var(--bottom-nav-height));
  padding: 0;
}

/* バッチラッパーを透過（子要素が #ieppy-card-grid の flex アイテムになる） */
body.is-single-mode .ieppy-masonry-grid {
  display: contents;
}

/* 子要素をスナップアイテムに */
body.is-single-mode .ieppy-masonry-grid > * {
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: start;
  margin-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  break-inside: unset;
  overflow: hidden;
}

body.is-single-mode .ieppy-card--single {
  display: flex;
  flex-direction: column;
}

body.is-single-mode .ieppy-card--single .ieppy-card__image-link {
  overflow: hidden;
}

body.is-single-mode .ieppy-card--single .ieppy-card__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: unset;
}

/* お気に入りグリッド */
.ieppy-favorites-grid {
  columns: 2;
  column-gap: 8px;
  padding: 0 4px;
}

.ieppy-favorites-grid > * {
  page-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: 8px;
  display: inline-block;
  width: 100%;
  vertical-align: top;
}