/*
 * My Gallery Plugin Styles
 */

.my-gallery-wrapper {
    display: grid; /* CSS Grid を使用 */
    grid-gap: 5px; /* GridとTileの縦横の隙間 */
    margin: 20px 0;
}

.my-gallery-wrapper .gallery-item a {
    display: block;
    line-height: 0; /* 画像下の余白を消す */
}

.my-gallery-wrapper .gallery-item img {
    width: 100% !important; /* 親要素いっぱいに広げる */
    height: auto;
    object-fit: cover;
    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-in-out;
}

.my-gallery-wrapper .gallery-item img:hover {
    transform: scale(1.05);
}


/* ------------------------------------- */
/* 機能②：レイアウトごとのCSS定義 */
/* ------------------------------------- */

/*
 * 1. グリッド (layout-grid)
 * 列数を --gallery-cols 変数で制御
 */
.my-gallery-wrapper.layout-grid {
    /* デフォルトは3列 (↓で指定) */
    grid-template-columns: repeat(var(--gallery-cols, 3), 1fr);
}

/*
 * 2. メイソンリー (layout-masonry)
 * CSSの column-count で簡易的に実装
 */
.my-gallery-wrapper.layout-masonry {
    display: block; /* Gridを解除 */
    column-count: var(--gallery-cols, 3); /* デフォルトは3列 */
    column-gap: 5px; /* Masonryの列（横）の隙間 */
}
.my-gallery-wrapper.layout-masonry .gallery-item {
    margin-bottom: 5px; /* Masonryの行（縦）の隙間 */
    break-inside: avoid; /* アイテムが列をまたいで分割されるのを防ぐ */
}

/*
 * 3. タイル (layout-tile)
 * 高さを揃える (アスペクト比 1:1)
 */
.my-gallery-wrapper.layout-tile {
    grid-template-columns: repeat(var(--gallery-cols, 4), 1fr);
}
.my-gallery-wrapper.layout-tile .gallery-item img {
    height: 100%;
    aspect-ratio: 1 / 1; /* 正方形にする */
}


/* ------------------------------------- */
/* 画面幅に合わせた調整（レスポンシブ） */
/* ------------------------------------- */

/* 画面幅が 768px 以下の場合 (タブレット) */
@media (max-width: 768px) {
    .my-gallery-wrapper.layout-grid,
    .my-gallery-wrapper.layout-tile {
        /* 変数を上書き: 2列にする */
        --gallery-cols: 2;
    }
    .my-gallery-wrapper.layout-masonry {
        column-count: 2;
    }
}

/* 画面幅が 480px 以下の場合 (スマートフォン) */
@media (max-width: 480px) {
    .my-gallery-wrapper.layout-grid,
    .my-gallery-wrapper.layout-masonry {
        column-count: 1;
    }
}