/*
 * Scroll Related Posts - Unified CSS (mobile-first, no desktop arrows)
 */

/* 画面にカードを何枚表示するかをCSS変数で制御する */
:root {
    --srp-cards-per-view: 2.2;
}

/* 
   ▼ 初期状態で非表示にするためのクラス 
   下に押し出して透明に → transition対象は本体 #srp-popup-container
*/
#srp-popup-container.srp-hidden {
    display: none;
    opacity: 0;
    transform: translateY(100%);
}

/* 
   ▼ 通常（表示前）は position: static; 
   スクロール率を超えたら JS が .srp-fixed を付与して下部固定
*/
#srp-popup-container {
    position: static;
    width: 100%;
    background: #fff;
    z-index: 9999;
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: translateY(0);
    opacity: 1;
}

/* 
   ▼ フローティング時 (.srp-fixed)
   画面下に固定され、若干透ける (opacity: .95)
*/
#srp-popup-container.srp-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    opacity: .95; 
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}
#srp-popup-container.srp-fixed .srp-inner {
    padding: 10px;
}

/* 
   ▼ 内側ラッパ 
   position: relative; があると閉じるボタンやタイトル等を絶対配置しやすい
*/
#srp-popup-container .srp-inner {
    position: relative;
}

/* 閉じるボタン */
.srp-close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    border: none;
    background: transparent;
    font-size: 1.2rem;
    cursor: pointer;
}

/* タイトル */
.srp-heading {
    font-weight: bold;
    margin-bottom: 8px;
}

/* 横スクロールラッパ */
.srp-cards-wrapper {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    width: 100%;
}

/* カード本体 */
.srp-card {
    flex: 0 0 auto;
    width: calc((100% / var(--srp-cards-per-view)));
    padding: 0 0 15px;
    box-sizing: border-box;
}

/* カード内の画像 */
.srp-card img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 遅延読み込みプラグインが使うclassの対策 (高さ崩れ回避 など) */
.lazyaspectratio {
    max-height: 20px; /* 例: 過度な高さを抑える */
}

/* カード内テキスト */
.srp-card>a>p {
    font-size: 0.6rem;
    line-height: 1.1rem;
}

/* ===========================================================
 * PC向け (768px以上をデスクトップ扱い) 
 * ===========================================================
 */
@media (min-width: 768px) {

    /*
     * PC/タブレットではフローティングしない想定 → 
     * position: static; をベースにし、.srp-fixed は使わない or 無視
     */
    .srp-close-btn {
        display: none;
    }
}