/* =========================================================
    Component: Stay Restaurant Info
    File: assets/css/3_components/stay-restaurant.css
    役割: 宿詳細のお食事・レストラン情報の装飾
   ========================================================= */

/* ==========================================
   1. レストランカード全体の制御
   ========================================== */
.p-stayRestaurantCard {
    margin-bottom: var(--wan-s-12);
    padding-bottom: var(--wan-s-8);
    border-bottom: 1px dashed var(--wan-color-border-light);
}

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

/* レストラン名 */
.p-stayRestaurantCard__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-stayRestaurantCard__inner {
    display: grid;
    gap: var(--wan-s-6);
}

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


/* ==========================================
   3. テキスト情報 (左カラム)
   ========================================== */

/* レストランの説明文（HTMLが入る想定） */
.p-stayRestaurantCard__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-stayRestaurantCard__desc p {
    margin-bottom: var(--wan-s-3);
}

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

/* 営業時間 (dl/dt/dd) */
.p-stayRestaurantCard__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; /* dlのデフォルトマージンをリセット */
}

/* 営業時間ラベル (dt) */
.p-stayRestaurantCard__hoursLabel {
    font-size: var(--wan-f-size-sm);
    font-weight: var(--wan-f-weight-bold);
    color: var(--wan-color-brand);
    flex-shrink: 0; /* ラベルは縮ませない */
}

/* 営業時間テキスト (dd) */
.p-stayRestaurantCard__hoursText {
    font-size: var(--wan-f-size-sm);
    color: var(--wan-color-text);
    line-height: var(--wan-f-lh-base);
    margin: 0; /* ddのデフォルトマージンをリセット */
}


/* ==========================================
   4. メディア (右カラム)
   ========================================== */
.p-stayRestaurantCard__media {
    width: 100%;
}

/* スライダーのアスペクト比や角丸の微調整 */
.p-stayRestaurantSlider {
    border-radius: var(--wan-r-md);
    overflow: hidden;
}