/* =========================================================
    Component: Stay Spa Info
    File: assets/css/3_components/stay-spa.css
    役割: 宿詳細の温泉・大浴場情報の装飾
   ========================================================= */

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

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

/* 温泉名・大浴場名 */
.p-staySpaCard__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-staySpaCard__grid {
    display: grid;
    gap: var(--wan-s-6);
}

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


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

/* 温泉の説明文（HTMLが入る想定） */
.p-staySpaCard__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-staySpaCard__desc p {
    margin-bottom: var(--wan-s-3);
}

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

/* 営業時間 (dl/dt/dd) */
.p-staySpaCard__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-staySpaCard__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-staySpaCard__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-staySpaCard__media {
    width: 100%;
}

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

/* 写真が登録されていない場合のプレースホルダー */
.p-staySpaCard__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-staySpaCard__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);
}