/* =========================================================
    Component: Stay Facility Info
    File: assets/css/3_components/stay-facility.css
    役割: 宿詳細の館内施設情報（ドッグラン、売店など）の装飾
   ========================================================= */

/* ==========================================
   1. ファシリティカード全体の制御
   ========================================== */
.p-stayFacilityCard {
    margin-bottom: var(--wan-s-12);
    padding-bottom: var(--wan-s-8);
    border-bottom: 1px dashed var(--wan-color-border-light);
}

.p-stayFacilityCard:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* 施設名 */
.p-stayFacilityCard__title {
    font-size: var(--wan-f-size-xl);
    font-weight: var(--wan-f-weight-bold);
    margin-bottom: var(--wan-s-4);
    color: var(--wan-color-text);
}


/* ==========================================
   2. 左右カラムのグリッドレイアウト
   ========================================== */
.p-stayFacilityCard__grid {
    display: grid;
    gap: var(--wan-s-6);
}

@media screen and (min-width: 769px) {
    .p-stayFacilityCard__grid {
        grid-template-columns: 1fr 1fr; /* PCでは1:1の左右分割 */
        align-items: start;
    }
}


/* ==========================================
   3. テキスト情報 (左カラム)
   ========================================== */
.p-stayFacilityCard__desc {
    font-size: var(--wan-f-size-md);
    line-height: var(--wan-f-lh-relaxed);
    color: var(--wan-color-text);
    margin-bottom: var(--wan-s-4);
}

.p-stayFacilityCard__desc p {
    margin-bottom: var(--wan-s-3);
}

.p-stayFacilityCard__desc p:last-child {
    margin-bottom: 0;
}

/* 営業時間 (dl/dt/dd) - レストラン・スパと共通デザイン */
.p-stayFacilityCard__hours {
    display: flex;
    flex-wrap: wrap; 
    align-items: baseline;
    gap: var(--wan-s-2) var(--wan-s-4);
    padding: var(--wan-s-3) var(--wan-s-4);
    background-color: var(--wan-color-bg-sub);
    border-radius: var(--wan-r-sm);
    margin: 0; 
}

.p-stayFacilityCard__hoursLabel {
    font-size: var(--wan-f-size-sm);
    font-weight: var(--wan-f-weight-bold);
    color: var(--wan-color-brand);
    flex-shrink: 0;
}

.p-stayFacilityCard__hoursText {
    font-size: var(--wan-f-size-sm);
    color: var(--wan-color-text);
    line-height: var(--wan-f-lh-base);
    margin: 0; 
}


/* ==========================================
   4. メディア (右カラム)
   ========================================== */
.p-stayFacilityCard__media {
    width: 100%;
    margin: 0; /* figureのデフォルトマージンをリセット */
}

.p-stayFacilitySlider {
    border-radius: var(--wan-r-md);
    overflow: hidden;
}

/* 写真がない場合のプレースホルダー */
.p-stayFacilityCard__placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--wan-color-bg-light);
    border-radius: var(--wan-r-md);
    border: 1px dashed var(--wan-color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-stayFacilityCard__placeholder::after {
    content: 'No Image';
    color: var(--wan-color-text-muted);
    font-size: var(--wan-f-size-sm);
    font-weight: var(--wan-f-weight-bold);
}