/**
 * 시설소개 보정 (시안 원본에는 없는 테마 통합용 파일)
 *
 * 두 가지를 더한다.
 *
 * 1) 바로가기 칸 수
 *    시안은 시설이 네 곳이라 .facility-index 를 4칸으로 박아 뒀다. 테마는 DB에
 *    등록된 만큼 그리므로 칸 수가 달라진다. 템플릿이 --facility-cols 로 넘긴다.
 *    시안 규칙과 같은 굵기(0,1,0)로는 순서에 밀리니 .facility-page 를 붙여 이긴다.
 *
 * 2) 추가 이미지 줄
 *    시안은 시설마다 사진이 한 장인데, DB에는 대표이미지 외에 사진이 더 들어 있다
 *    (예전 화면은 시설마다 스와이퍼 갤러리였다). 내용이 사라지지 않도록 본문 아래
 *    작은 사진 줄로 남긴다. 색과 간격은 facility-01.css 값을 그대로 쓴다.
 */

.facility-page .facility-index {
    grid-template-columns: repeat(var(--facility-cols, 4), minmax(0, 1fr));
}

/* 한 줄(4칸)을 넘어가면 윗줄과 경계를 준다 */
.facility-page .facility-index a:nth-child(n+5) {
    border-top: 1px solid #dfe3e6;
}

.facility-extra {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    margin-top: 24px;
}

.facility-extra figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    background: #dfe4e8;
}

.facility-extra img {
    display: block;
    width: 100%;
    aspect-ratio: 1.45 / 1;
    object-fit: cover;
}

.facility-extra figcaption {
    margin-top: 7px;
    color: #5e6872;
    font-size: 12px;
    line-height: 1.6;
    word-break: keep-all;
}

.facility-zone-dark .facility-extra figcaption {
    color: rgba(235, 241, 248, .72);
}

@media (max-width: 767px) {
    .facility-page .facility-index {
        grid-template-columns: 1fr;
    }

    .facility-page .facility-index a:nth-child(n+5) {
        border-top: 0;
    }

    .facility-extra {
        grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
        gap: 8px;
        margin-top: 20px;
    }
}