/*
* FooGallery Custom CSS
* This file is created by adding custom CSS on FooGallery Settings page in wp-admin
* Created : 9 Aug 2025, 4:40 am
*/

/* FooGallery 特定ID（4713・3924）モバイル対応CSS */

@media screen and (max-width: 768px) {
  
  /* ギャラリーID 4713 と 3924 の2枚目以降を非表示 */
  #foogallery-gallery-4713 .fg-item:nth-child(n+2),
  #foogallery-gallery-3924 .fg-item:nth-child(n+2) {
    display: none !important;
  }
  
  /* ギャラリーコンテナの調整 */
  #foogallery-gallery-4713.foogallery-justified,
  #foogallery-gallery-3924.foogallery-justified {
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  
  /* 1枚目の画像の完全調整 */
  #foogallery-gallery-4713 .fg-item:first-child,
  #foogallery-gallery-3924 .fg-item:first-child {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    position: relative !important;
    display: block !important;
  }
  
  /* fg-item-inner の調整 */
  #foogallery-gallery-4713 .fg-item:first-child .fg-item-inner,
  #foogallery-gallery-3924 .fg-item:first-child .fg-item-inner {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }
  
  /* 画像自体の調整 */
  #foogallery-gallery-4713 .fg-item:first-child .fg-image,
  #foogallery-gallery-3924 .fg-item:first-child .fg-image {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  
  /* サムネイル部分の調整 */
  #foogallery-gallery-4713 .fg-item:first-child .fg-thumb,
  #foogallery-gallery-3924 .fg-item:first-child .fg-thumb {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  
  /* Flexboxの影響を完全に除去 */
  #foogallery-gallery-4713 .fg-item:first-child,
  #foogallery-gallery-3924 .fg-item:first-child {
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* 行の高さ制限を無効化 */
  #foogallery-gallery-4713 .fg-item:first-child,
  #foogallery-gallery-4713 .fg-item:first-child .fg-item-inner,
  #foogallery-gallery-4713 .fg-item:first-child .fg-thumb,
  #foogallery-gallery-3924 .fg-item:first-child,
  #foogallery-gallery-3924 .fg-item:first-child .fg-item-inner,
  #foogallery-gallery-3924 .fg-item:first-child .fg-thumb {
    max-height: none !important;
    min-height: auto !important;
  }
  
  /* マージンとパディングの完全リセット */
  #foogallery-gallery-4713.foogallery-justified::before,
  #foogallery-gallery-4713.foogallery-justified::after,
  #foogallery-gallery-3924.foogallery-justified::before,
  #foogallery-gallery-3924.foogallery-justified::after {
    display: none !important;
  }
}

/* タブレット（769px～1024px）での調整 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  
  /* タブレットでは1、2枚目のみ表示（オプション） */
  #foogallery-gallery-4713 .fg-item:nth-child(n+3),
  #foogallery-gallery-3924 .fg-item:nth-child(n+3) {
    display: none !important;
  }
}

/* より小さな画面（480px以下）での追加調整 */
@media screen and (max-width: 480px) {
  
  /* コンテナ全体の余白をゼロに */
  #foogallery-gallery-4713.foogallery-justified,
  #foogallery-gallery-3924.foogallery-justified {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* 1枚目の画像のアスペクト比保持 */
  #foogallery-gallery-4713 .fg-item:first-child .fg-image,
  #foogallery-gallery-3924 .fg-item:first-child .fg-image {
    height: auto !important;
    min-height: 150px;
    object-fit: cover;
    border-radius: 4px; /* 軽い角丸効果 */
  }
}

/* 極小画面（320px以下）での微調整 */
@media screen and (max-width: 320px) {
  #foogallery-gallery-4713 .fg-item:first-child .fg-image,
  #foogallery-gallery-3924 .fg-item:first-child .fg-image {
    min-height: 120px;
  }
}