/* =========================================================
    Component: Stay Page Section Base
    File: assets/css/3_components/stay-section.css
    役割: 宿詳細ページの各セクション（犬・部屋・食事等）の共通枠組み
   ========================================================= */

/* --- 1. セクション全体の囲い --- */
.p-staySection {
    padding-top: var(--wan-s-12);    /* 48px */
    padding-bottom: var(--wan-s-12); /* 48px */
    border-bottom: 1px solid var(--wan-color-border-light);
}

/* 最後のセクションは線を消す */
.p-staySection:last-of-type {
    border-bottom: none;
}

/* --- 2. セクション見出し --- */
.p-staySection__header {
    margin-bottom: var(--wan-s-8); /* 32px */
}

.p-staySection__title {
    display: flex;
    flex-direction: column; /* タイトルとサブタイトルを縦並びに */
    gap: var(--wan-s-1);
    font-size: var(--wan-f-size-2xl);
    font-weight: var(--wan-f-weight-bold);
    color: var(--wan-color-text);
    line-height: var(--wan-f-lh-tight);
}

/* 英語のサブタイトルや補足（あれば） */
.p-staySection__subtitle {
    display: block;
	font-size: var(--wan-f-size-sm);
    font-weight: var(--wan-f-weight-bold);
    color: var(--wan-color-brand);
    text-transform: uppercase;
    letter-spacing: var(--wan-ls-loose);
}

/* 見出しの装飾（左にオレンジのアクセント） */
.p-staySection__titleInner {
    position: relative;
    padding-left: var(--wan-s-4);
}

.p-staySection__titleInner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.1em;
    bottom: 0.1em;
    width: 2px;
    background-color: var(--wan-color-brand);
    border-radius: var(--wan-r-full);
}

/* --- 3. セクション内のリード文 --- */
.p-staySection__lead {
    margin-bottom: var(--wan-s-6);
    font-size: var(--wan-f-size-md); /* 16px */
    line-height: var(--wan-f-lh-relaxed);
    color: var(--wan-color-text);
}

/* --- 4. コンテンツエリア --- */
.p-staySection__body {
    /* ここに各パーツ（部屋リストや犬情報）が入る */
}

/* --- 5. レスポンシブ調整 --- */
@media screen and (max-width: 768px) {
    .p-staySection {
        padding-top: var(--wan-s-10);    /* 40px */
        padding-bottom: var(--wan-s-10); /* 40px */
    }

    .p-staySection__header {
        margin-bottom: var(--wan-s-6);
    }

    .p-staySection__title {
        font-size: var(--wan-f-size-xl); /* 20px */
    }
}