/* =========================================================
    Component: Stay Archive List Header (Count & Sort)
    File: assets/css/3_components/stay-list-header.css
   ========================================================= */

/* --- 1. ヘッダー全体のレイアウト（PC・共通） --- */
.p-stayListHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--wan-s-6);
    padding-bottom: var(--wan-s-3);
    border-bottom: 2px solid var(--wan-color-border-light);
}

/* ヒット件数表示 */
.p-stayListHeader__count {
    font-size: var(--wan-f-size-sm);
    font-weight: var(--wan-f-weight-bold);
}

.p-stayListHeader__count span {
    margin: 0 var(--wan-s-1);
    color: var(--wan-color-brand);
    font-size: var(--wan-f-size-xl);
}

/* --- 2. ソートタブ (PC・共通) --- */
.p-staySort {
    max-width: 100%;
}

.p-staySort__list {
    display: flex;
    align-items: center;
    gap: var(--wan-s-2-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-staySort__item {
    flex-shrink: 0; 
}

/* カプセル型ボタンのサイズと中央揃え */
.p-staySort__link,
.p-staySort__filterBtn {
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    box-sizing: border-box; 
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 var(--wan-s-5); 
    
    font-size: var(--wan-f-size-sm);
    font-weight: var(--wan-f-weight-bold);
    line-height: 1;
    color: var(--wan-color-brand);
    background-color: var(--wan-color-white);
    border: 1px solid var(--wan-color-brand);
    border-radius: var(--wan-r-full);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--wan-motion-base);
}

/* しぼりこみアイコン */
.p-staySort__icon {
    width: 16px; 
    height: 16px;
    margin-right: 6px;
    object-fit: contain;
    vertical-align: middle; 
    transition: filter var(--wan-motion-base);
}

.p-staySort__filterBtn::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px; 
    border-right: 2px solid currentColor; 
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px); 
}

/* ホバー＆アクティブ時 */
.p-staySort__link:hover,
.p-staySort__link.is-active,
.p-staySort__filterBtn:hover,
.p-staySort__filterBtn.is-active {
    background-color: var(--wan-color-brand);
    color: var(--wan-color-white);
}

/* アクティブ/ホバー時にアイコン画像だけを白くする */
.p-staySort__filterBtn:hover .p-staySort__icon,
.p-staySort__filterBtn.is-active .p-staySort__icon {
    filter: brightness(0) invert(1);
}

/* --- 3. スマホ・レスポンス (768px以下) 💡ここを1つに統合！ --- */
@media screen and (max-width: 768px) {
    /* 親の枠組みを無視させる */
    .p-stayListHeader {
        display: contents;
    }

    .l-twoColLayout__main {
        display: flex;
        flex-direction: column;
    }

    /* バー本体：画面の端から端まで「白」を敷き詰める */
    .p-staySort {
        position: sticky;
        top: 0; /* ⚠️SWELLヘッダー固定時は 60px などに調整 */
        z-index: 100;
        order: 1;
		max-width: 100vw; /* 💡追加：PCの「max-width: 100%」の制限をぶち壊す！ */
        width: 100vw;
        left: 0;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        
        background-color: #fff;
        border-bottom: 1px solid var(--wan-color-border-light);
        
        overflow: visible; /* 外枠ではスクロールさせない！ */
    }

    /* リスト：ここを「画面幅」でスクロールさせる */
    .p-staySort__list {
        display: flex;
        align-items: center;
        gap: var(--wan-s-2-5);
        
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        
        /* 💡左右のパディングをここで設定 */
        padding: var(--wan-s-3) var(--wan-container-pad);
        
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .p-staySort__list::-webkit-scrollbar {
        display: none;
    }

    /* 💡【重要】Safariの見切れ防止用スペーサー */
    .p-staySort__list::after {
        content: "";
        display: block;
        /* 余白として機能させる透明な箱を置く */
        flex: 0 0 1px;
        width: 1px;
        height: 10px;
    }

    /* ヒット件数（全件表示） */
    .p-stayListHeader__count {
        order: 2;
        padding: var(--wan-s-4) var(--wan-container-pad);
        border-bottom: 1px solid var(--wan-color-border-light);
        font-size: var(--wan-f-size-xs);
        font-weight: var(--wan-f-weight-bold);
    }

    .p-stayList {
        order: 3;
    }
}