/* =========================================================
    Component: Stay Basic Info
    File: assets/css/3_components/stay-basic.css
    役割: 宿詳細の基本情報（税金・子供等の条件、◯/×設備リスト）の装飾
   ========================================================= */

/* ==========================================
   2. 左側：基本スペック（条件リスト）
   ========================================== */
.p-stayBasic__list {
    border-top: 1px solid var(--wan-color-border-light);
    margin: 0 0 var(--wan-s-6) 0;
    padding: 0;
}

.p-stayBasic__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--wan-s-4);
    padding: var(--wan-s-3) 0;
    border-bottom: 1px solid var(--wan-color-border-light);
    font-size: var(--wan-f-size-sm);
}

.p-stayBasic__label {
    color: var(--wan-color-text);
    margin: 0;
    flex-shrink: 0;
}

.p-stayBasic__data {
    text-align: right;
    color: var(--wan-color-text);
    margin: 0;
    line-height: var(--wan-f-lh-tight);
}


/* ==========================================
   3. 右側：設備・特徴（◯/×リスト）
   ========================================== */
.p-stayBasic__featureTitle {
    font-size: var(--wan-f-size-md);
    font-weight: var(--wan-f-weight-bold);
    color: var(--wan-color-text);
    margin-bottom: var(--wan-s-4);
    padding-bottom: var(--wan-s-2);
    border-bottom: 2px solid var(--wan-color-brand-light);
}

/* リスト自体のグリッド設定 */
.p-stayBasic__featureList {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
    gap: var(--wan-s-3) var(--wan-s-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--wan-s-4) 0;
    transition: max-height 0.4s ease; /* 開閉アニメーション */
}

@media screen and (min-width: 768px) {
    .p-stayBasic__featureList {
        grid-template-columns: repeat(3, 1fr); /* PCは3列 */
    }
}

/* 個別の設備アイテム */
.p-stayBasic__featureItem {
    display: flex;
    align-items: center;
    gap: var(--wan-s-3);
    padding: var(--wan-s-1) 0;
}

/* 「×」の項目はトーンダウン */
.p-stayBasic__featureItem.-false {
    color: var(--wan-color-text-muted);
    opacity: 0.5;
}

/* 「◯」「×」の記号部分 */
.p-stayBasic__featureMark {
    font-weight: bold;
    font-size: 1.2em;
    width: 1em;
    text-align: center;
    flex-shrink: 0;
}

/* 「◯」の項目はブランドカラーで強調 */
.p-stayBasic__featureItem.-true .p-stayBasic__featureMark {
    color: var(--wan-color-brand);
}

.p-stayBasic__featureName {
    line-height: var(--wan-f-lh-tight);
}


/* ==========================================
   4. 折りたたみUI (グラデーションフェードアウト)
   ========================================== */

/* デフォルト（開いている状態）は大きな高さを確保 */
.p-stayBasic__featureList[data-collapsible] {
    max-height: 1000px; 
    overflow: hidden;
}

/* 閉じている状態（.is-open が無い時） */
.p-stayBasic__featureList[data-collapsible]:not(.is-open) {
    max-height: 160px; /* 約5〜6行分で高さをカット */
    /* 下部に向かって透明になるマスクをかける */
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* 「すべてみる」ボタンのラッパー */
.p-stayBasic__more {
    text-align: center;
    margin-top: var(--wan-s-2);
}