/* ==========================================================================
   Recent Posts Slider (BEM)
   ========================================================================== */
.c-recent-slider {
    position: relative;
    margin: 2em 0;
    padding: 0 10px; /* Cocoonのコンテンツ幅に合わせる */
}

/* タイトル：Cocoonの標準的な見出しに寄せる */
.c-recent-slider__heading {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    text-align: center;
    position: relative;
    color: #333;
}

/* コンテナ：はみ出しを許容してスワイプ可能に */
.c-recent-slider__container {
    overflow: hidden; /* JSで制御。JSなしなら overflow-x: auto */
}

.c-recent-slider__wrapper {
    display: flex;
    gap: 12px;
    transition: transform 0.3s ease;
}

/* 各アイテム */
.c-recent-slider__item {
    flex: 0 0 260px; /* 固定幅にすることで次の記事が見えるようにする */
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px; /* Cocoonに合わせた控えめな角丸 */
    transition: box-shadow 0.3s ease;
}

.c-recent-slider__item:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.c-recent-slider__link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* サムネイル */
.c-recent-slider__figure {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f0f0f0;
}

.c-recent-slider__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* テキストエリア */
.c-recent-slider__body {
    padding: 12px;
}

.c-recent-slider__date {
    display: block;
    font-size: 0.75rem;
    color: #777;
    margin-bottom: 4px;
}

.c-recent-slider__title {
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
    /* 2行以上は省略（Cocoon風） */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ナビゲーションボタン (PCのみ表示) */
.c-recent-slider__nav {
    display: none; /* デフォルト非表示 */
}

@media (min-width: 1024px) {
    .c-recent-slider {
        padding: 0 40px;
    }
    .c-recent-slider__item {
        flex: 0 0 calc(33.333% - 8px); /* 3枚並び */
    }
    .c-recent-slider__nav {
        display: block;
        position: absolute;
        top: 50%;
        width: 40px;
        height: 40px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
        transform: translateY(-50%);
    }
    .c-recent-slider__nav:hover { background: #f8f8f8; }
    .c-recent-slider__nav--prev { left: 0; }
    .c-recent-slider__nav--next { right: 0; }
    /* 矢印（CSSで作る） */
    .c-recent-slider__nav::before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border-top: 2px solid #666;
        border-right: 2px solid #666;
        margin: auto;
    }
    .c-recent-slider__nav--prev::before { transform: rotate(-135deg); margin-left: 14px; }
    .c-recent-slider__nav--next::before { transform: rotate(45deg); margin-right: 14px; }
}

/* スマホ特化調整 */
@media (max-width: 768px) {
    .c-recent-slider__item {
        flex: 0 0 75%; /* 1枚の75%を表示することで、右側の記事をチラ見せさせる（視線誘導） */
    }
    .c-recent-slider__container {
        overflow-x: auto; /* スマホはネイティブなスワイプを優先 */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .c-recent-slider__item {
        scroll-snap-align: start;
    }
}