@charset "UTF-8";

/**************************************
 * file: photo.css
 * brief: photo.html 専用スタイル
 *
 * 写真ギャラリー，PhotoSwipe表示，
 * レスポンシブ対応を管理する。
 **************************************/

/* =========================================================
   調整用変数
   PC表示・タブレット表示・スマホ表示の調整は主にここで行う
========================================================= */

.photo-page {
    /* ギャラリー全体 */
    --photo-gallery-column-min-width: 18rem;
    --photo-gallery-gap: 1.2rem;
    --photo-gallery-margin-top: 2.6rem;
    --photo-gallery-padding: 0rem;
    --photo-gallery-empty-min-height: 22rem;
    --photo-gallery-status-letter-spacing: 0.06em;

    /* 写真がない場合のメッセージ */
    --photo-gallery-message-padding-block: 4.2rem;
    --photo-gallery-message-padding-inline: 1.8rem;

    /* サムネイルリンク */
    --photo-gallery-link-border-width: 3px;
    --photo-gallery-image-hover-saturate: 1.1;

    /* ホバー時ラベル */
    --photo-gallery-label-left: 1.2rem;
    --photo-gallery-label-bottom: 1.2rem;
    --photo-gallery-label-padding-block: 0.6rem;
    --photo-gallery-label-padding-inline: 1.1rem;
    --photo-gallery-label-font-size: 1.2rem;
    --photo-gallery-label-line-height: 1.4;
    --photo-gallery-label-translate-y: 6px;

    /* 共通色 */
    --photo-gallery-border-color: rgba(35, 101, 28, 0);
    --photo-gallery-border-hover-color: rgba(35, 101, 28, 0.55);

    /* transition */
    --photo-gallery-link-transition: 0.22s ease;
    --photo-gallery-image-transition: 0.28s ease;
}

/* =========================================================
   Gallery
   写真サムネイル一覧
========================================================= */

.photo-page .photo-gallery {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(var(--photo-gallery-column-min-width), 1fr)
    );
    align-items: start;
    gap: var(--photo-gallery-gap);
    width: 100%;
    margin: var(--photo-gallery-margin-top) 0 0;
    padding: var(--photo-gallery-padding);
    --common-panel-bg: transparent;
    --common-panel-shadow: none;
    --common-panel-backdrop-filter: none;
    border: none;

}

.photo-page .photo-gallery:empty {
    min-height: var(--photo-gallery-empty-min-height);
    place-items: center;
}

.photo-page .photo-gallery:empty::before {
    content: "写真を読み込み中です";
    font-size: var(--common-main-font-size);
    letter-spacing: var(--photo-gallery-status-letter-spacing);
}

.photo-page .photo-gallery__item {
    min-width: 0;
    margin: 0;
}

.photo-page .photo-gallery__message {
    grid-column: 1 / -1;
    padding:
        var(--photo-gallery-message-padding-block)
        var(--photo-gallery-message-padding-inline);
    font-size: var(--common-main-font-size);
    line-height: var(--common-main-line-height);
    letter-spacing: var(--photo-gallery-status-letter-spacing);
    text-align: center;
}

/* =========================================================
   Thumbnail
   サムネイル
========================================================= */

.photo-page .photo-gallery__link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--common-frame-radius-medium);
    transition: transform var(--photo-gallery-link-transition);
}

.photo-page .photo-gallery__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border:
        var(--photo-gallery-link-border-width)
        solid
        var(--photo-gallery-border-color);
    border-radius: inherit;
    pointer-events: none;
    transition: border-color var(--photo-gallery-link-transition);
}

.photo-page .photo-gallery__link::after {
    content: "拡大表示";
    position: absolute;
    left: var(--photo-gallery-label-left);
    bottom: var(--photo-gallery-label-bottom);
    z-index: 3;
    padding:
        var(--photo-gallery-label-padding-block)
        var(--photo-gallery-label-padding-inline);
    border-radius: var(--common-frame-radius-small);
    background: var(--hokudai-green-dark);
    color: var(--common-white);
    font-size: var(--photo-gallery-label-font-size);
    font-weight: bold;
    line-height: var(--photo-gallery-label-line-height);
    opacity: 0;
    transform: translateY(var(--photo-gallery-label-translate-y));
    transition:
        opacity var(--photo-gallery-link-transition),
        transform var(--photo-gallery-link-transition);
    pointer-events: none;
}

.photo-page .photo-gallery__link:is(:hover, :focus-visible)::before {
    border-color: var(--photo-gallery-border-hover-color);
}

.photo-page .photo-gallery__link:is(:hover, :focus-visible)::after {
    opacity: 1;
    transform: translateY(0);
}

.photo-page .photo-gallery__image {
    display: block;
    width: 100%;
    height: auto;
    transition: filter var(--photo-gallery-image-transition);
}

.photo-page .photo-gallery__link:is(:hover, :focus-visible) .photo-gallery__image {
    filter: saturate(var(--photo-gallery-image-hover-saturate));
}

/* =========================================================
   PhotoSwipe adjustment
========================================================= */

.photo-page .pswp__bg {
    background: #0f172a;
}

.photo-page .pswp__img {
    box-sizing: content-box;
    border: 0;
    background: transparent;
    transition: none;
}

/* =========================================================
   Responsive - tablet
========================================================= */

@media screen and (max-width: 834px) {
    .photo-page {
        --photo-gallery-gap: 1.4rem;
        --photo-gallery-padding: 0rem;
        --photo-gallery-label-font-size: 1.1rem;
    }

    .photo-page .photo-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================
   Responsive - smartphone
========================================================= */

@media screen and (max-width: 600px) {
    .photo-page {
        --photo-gallery-gap: 1.2rem;
        --photo-gallery-padding: 0rem;
        --photo-gallery-label-left: 0.8rem;
        --photo-gallery-label-bottom: 0.8rem;
        --photo-gallery-label-padding-block: 0.5rem;
        --photo-gallery-label-padding-inline: 0.9rem;
        --photo-gallery-label-font-size: 1rem;
        --photo-gallery-message-padding-block: 3.2rem;
        --photo-gallery-message-padding-inline: 1.4rem;
    }

    .photo-page .photo-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .photo-page .photo-gallery__link::after {
        content: "拡大";
    }
}