/* =========================================
   Prize Article Gallery Styles
   ========================================= */

/* --- 共通: コンテナとベース設定 --- */
.prize-image-gallery {
    margin-bottom: 2em;
    display: grid;
    /* 縦横の隙間を統一（10px） */
    gap: 10px;
}

.prize-image-gallery figure {
    /* テーマのデフォルト余白（margin-bottom: 1emなど）を強制削除 */
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    /* 画像下のわずかな隙間（行間）を消す */
    line-height: 0;
}

.prize-image-gallery img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* =========================================
   Type A: 詳細ブロック用 (変則レイアウト)
   .gallery-variable
   ========================================= */

/* 1枚: 通常表示 (最大幅制限) */
.prize-image-gallery.gallery-variable.count-1 {
    display: block;
    max-width: 600px;
    margin: 0 auto 2em auto;
}

/* 2枚: 縦並び (1カラム) - 元の仕様 */
.prize-image-gallery.gallery-variable.count-2 {
    grid-template-columns: 1fr; 
}

/* 3枚: 上1枚(大) + 下2枚(小) */
.prize-image-gallery.gallery-variable.count-3 {
    grid-template-columns: 1fr 1fr;
}
.prize-image-gallery.gallery-variable.count-3 figure:nth-child(1) {
    grid-column: 1 / -1; /* 横一杯に広げる */
}

/* 4枚: 上1枚(大) + 中2枚 + 下1枚(大) (1-2-1) */
.prize-image-gallery.gallery-variable.count-4 {
    grid-template-columns: 1fr 1fr;
}
.prize-image-gallery.gallery-variable.count-4 figure:nth-child(1),
.prize-image-gallery.gallery-variable.count-4 figure:nth-child(4) {
    grid-column: 1 / -1;
}

/* 5枚: 上1枚(大) + 中2枚 + 下2枚 (1-2-2) */
.prize-image-gallery.gallery-variable.count-5 {
    grid-template-columns: 1fr 1fr;
}
.prize-image-gallery.gallery-variable.count-5 figure:nth-child(1) {
    grid-column: 1 / -1;
}


/* =========================================
   Type B: 冒頭・総評用 (単純グリッド)
   .gallery-grid
   ========================================= */

/* 2枚: 2カラム (横並び) */
.prize-image-gallery.gallery-grid.count-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: none; /* 幅制限を撤回してフィットさせる */
}

/* 3枚: 3カラム */
.prize-image-gallery.gallery-grid.count-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: none; /* ■追加: 幅制限を撤回 */
}

/* 4枚: 2カラム (2列x2行の田の字) */
.prize-image-gallery.gallery-grid.count-4 {
    grid-template-columns: repeat(2, 1fr);
    max-width: none; /* 幅制限を撤回してフィットさせる */
}

/* 5枚以上: 3カラム */
.prize-image-gallery.gallery-grid.count-5,
.prize-image-gallery.gallery-grid.count-6 {
    grid-template-columns: repeat(3, 1fr);
    max-width: none; /* ■追加: 幅制限を撤回 */
}

/* --- スマホ調整 --- */
@media (max-width: 600px) {
    /* スマホでは3枚以上も2列の方が見やすい場合 */
    .prize-image-gallery.gallery-grid.count-3,
    .prize-image-gallery.gallery-grid.count-5,
    .prize-image-gallery.gallery-grid.count-6 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 4枚はスマホでも2列(田の字)を維持 */
    .prize-image-gallery.gallery-grid.count-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================
   Reference Link Styles (参照リンク)
   ========================================= */
/* GAS側で付与したクラス .prize-ref-paragraph を
   Flexboxにして、中身(テキストとリンク)を中央寄せにする
*/
.prize-ref-paragraph {
    display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
    gap: 0.2em;              /* 「参照▶」と「リンク」の間の隙間 */
    
    /* GAS側で style="text-align: center;..." が付いているが、
       display: flex が優先されるため中央寄せは機能する */
}

/* 「参照▶」を親段落の擬似要素として追加
   これで aタグの外側（クリックできない場所）に表示される
*/
.prize-ref-paragraph::before {
    content: "参照▶";
    white-space: nowrap;
    color: inherit;
    font-weight: normal;
    text-decoration: none; /* 念のため下線なし */
}

/* リンク本体 */
.prize-ref-paragraph a {
    text-decoration: underline; /* リンクには下線を付ける */
    /* position: relative; 等は不要になる */
}