/* =========================================================
    Component: Stay Room Info
    File: assets/css/3_components/stay-room.css
    役割: 宿詳細のお部屋一覧、お部屋カードの装飾
   ========================================================= */

/* ==========================================
   1. お部屋リスト全体の制御
   ========================================== */

/* 「もっとみる」で隠れているお部屋の制御 */
.p-stayRoomCard.is-hidden {
    display: none;
}

/* 「もっとみる」ボタンのラッパー */
.p-stayRoomList__more {
    text-align: center;
    margin-top: var(--wan-s-6);
    padding-top: var(--wan-s-6);
}


/* ==========================================
   2. お部屋カード (p-stayRoomCard)
   ========================================== */
.p-stayRoomCard {
    margin-bottom: var(--wan-s-12);
    padding-bottom: var(--wan-s-8);
    border-bottom: 1px dashed var(--wan-color-border-light);
}

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

/* お部屋名 */
.p-stayRoomCard__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);
}

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

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


/* ==========================================
   3. お部屋のスペック情報 (左カラム)
   ========================================== */

/* 基本スペックリスト（広さ・定員など） */
.p-stayRoomCard__specList {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wan-s-3) var(--wan-s-5); /* 縦と横の余白 */
    list-style: none;
    padding: 0;
    margin: 0 0 var(--wan-s-4);
    font-size: var(--wan-f-size-sm);
    color: var(--wan-color-text);
}

.p-stayRoomCard__specList li {
    display: flex;
    align-items: center;
    gap: var(--wan-s-2);
}

/* アイコン共通スタイル */
.p-stayRoomCard__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--wan-color-text-muted); /* アイコンは少し薄い色に */
    flex-shrink: 0;
}

.p-stayRoomCard__icon svg {
    width: 100%;
    height: 100%;
}

/* ベッド情報（独立したブロック） */
.p-stayRoomCard__bedInfo {
    display: flex;
    align-items: center;
    gap: var(--wan-s-2);
    padding: var(--wan-s-3);
    background-color: var(--wan-color-bg-sub); /* 薄い背景色で目立たせる */
    border-radius: var(--wan-r-sm);
    margin-bottom: var(--wan-s-6);
    font-size: var(--wan-f-size-sm);
    font-weight: var(--wan-f-weight-bold);
    color: var(--wan-color-text);
}


/* ==========================================
   4. お部屋の特徴 (タグリスト)
   ========================================== */
.p-stayRoomCard__features {
    margin-top: var(--wan-s-4);
}

.p-stayRoomCard__featuresTitle {
    font-size: var(--wan-f-size-sm);
    font-weight: var(--wan-f-weight-bold);
    margin-bottom: var(--wan-s-3);
}

.p-stayRoomCard__featureList {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wan-s-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 特徴を小さなタグ（ピル）のように見せる */
.p-stayRoomCard__featureItem {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--wan-color-border-light);
    border-radius: var(--wan-r-full); /* 完全な角丸 */
    font-size: var(--wan-f-size-xs);
    background-color: var(--wan-color-white);
}

.p-stayRoomCard__featureIcon {
    display: flex;
    width: 12px;
    height: 12px;
    color: var(--wan-color-brand); /* 特徴アイコンはブランドカラーでアクセントに */
}

.p-stayRoomCard__featureIcon svg {
    width: 100%;
    height: 100%;
}


/* ==========================================
   5. メディア (右カラム)
   ========================================== */
.p-stayRoomCard__media {
    width: 100%;
    /* 右側を少し上に引き上げるなど、微調整が必要な場合はここに記述 */
}

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