/* ==========================================
   1. 大枠の設定
========================================== */
.top-gallery-wrapper {
    /* 4K対応：全体の幅を制限し、中央に配置 */
    width: 90%;
    max-width: 1200px;
    margin: clamp(40px, 6vw, 100px) auto;
}

/* ==========================================
   2. グリッドの魔法（4列のマス目を作る）
========================================== */
.gallery-grid {
    display: grid;
    /* 全体を「4列」の均等なマス目に分割する */
    grid-template-columns: repeat(4, 1fr); 
    
    /* 4K対応：画像同士の隙間を動的に変化（10px〜20px） */
    gap: clamp(10px, 2vw, 20px); 
}

/* ==========================================
   3. 各画像の共通設定（完璧な正方形にする）
========================================== */
.gallery-item {
    position: relative;
    display: block;
    width: 100%;
    
    /* 【超重要】縦横比を「1:1（正方形）」に強制固定する最新のCSS */
    aspect-ratio: 1 / 1; 
    
    overflow: hidden;
    /* お好みで角を丸くする（不要なら 0 にしてください） */
    border-radius: 10px; 
}

.gallery-item img {
    width: 100%;
    height: 100%;
    /* 【超重要】正方形の枠に合わせて、画像を綺麗にトリミングする */
    object-fit: cover; 
    
    /* ホバー時のアニメーション準備 */
    transition: transform 0.4s ease;
}

/* ホバー時に画像を少しだけ拡大させて「押せる感」を出す */
.gallery-item:hover img {
    transform: scale(1.05);
}

/* ==========================================
   4. 画像1（大きい画像）の特別設定
========================================== */
.item-big {
    /* 4列のマス目のうち、「横に2マス」「縦に2マス」分を独占する */
    grid-column: span 2;
    grid-row: span 2;
}


/* ==========================================
   5. スマートフォン版（縦並びへの切り替え）
========================================== */
@media screen and (max-width: 768px) {
    
    .gallery-grid {
        /* スマホでは、全体を「4列」から「2列」に変更する */
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px; /* 隙間も少し狭くする */
    }
    
    .item-big {
        /* 大きい画像は、2列分（画面幅いっぱい）を使うようにする */
        grid-column: span 2;
        /* 縦は1マス分に戻す（aspect-ratioが効いているので、自動的に巨大な正方形になります） */
        grid-row: span 1; 
    }
}

/* ==========================================
   画像拡大用ポップアップ（Lightbox）のスタイル
========================================== */
/* 背景の暗いオーバーレイ */
.image-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ギャラリーの画像を目立たせるため、少し濃いめの黒（90%）にする */
    background-color: rgba(0, 0, 0, 0.9); 
    
    z-index: 2000; /* ヘッダー(900)より手前に表示する */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 初期状態は透明でクリック不可 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* JavaScriptでこのクラスがついたらフワッと表示 */
.image-popup-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* 中央の拡大画像 */
#popup-image {
    /* 画面からはみ出さないように最大サイズを制限（画面の90%） */
    max-width: 90%;
    max-height: 90vh; 
    
    /* 画像の本来の比率を保ったまま枠内に収める */
    object-fit: contain; 
    
    border-radius: 10px; /* 角を少し丸くする */
    box-shadow: 0 5px 25px rgba(0,0,0,0.5); /* 画像に影をつけて浮かせ見せる */
    
    /* 現れる時のアニメーション準備（少し小さくしておく） */
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

/* オーバーレイが表示された時、画像がフワッと元の大きさに戻る */
.image-popup-overlay.active #popup-image {
    transform: scale(1); 
}

/* 閉じるボタン（×） */
.image-popup-close {
    position: absolute;
    /* 4K〜スマホ対応：位置とサイズを動的に */
    top: clamp(10px, 2vw, 20px);
    right: clamp(15px, 3vw, 30px);
    font-size: clamp(30px, 4vw, 50px);
    
    color: #ffffff;
    cursor: pointer;
    z-index: 2001;
    transition: color 0.3s ease;
}

/* 閉じるボタンにホバーした時、サイトのテーマカラーで光らせる */
.image-popup-close:hover {
    color: #1af7fb; 
}