.brewlab-post-slider-wrapper {
    position: relative;
    padding: 0;
    /* スライダー自体のパディングをなくす */
    margin: 30px auto;
    width: 100%;
}

.brewlab-post-swiper {
    overflow: hidden;
    padding: 10px 0 20px 0;
    /* 影用の余白 */
}

/* Swiper wrapperのフレックス設定。スライドを同じ高さにするため */
.brewlab-post-swiper .swiper-wrapper {
    align-items: stretch;
}

.brewlab-post-slide {
    height: auto;
    background: #fff;
    border-radius: 6px;
    /* 少し角丸を追加 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* 子要素の角丸はみ出しを隠す */
}

.brewlab-post-slide:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

.brewlab-post-slide-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.brewlab-post-slide-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.brewlab-post-slide-image-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* 画像の背景グラデーション：ユーザー添付画像に近い色 */
    background: radial-gradient(circle at center, #384664 0%, #1b2334 100%);
    background-color: #1b2334;
    /* 上記が適用されない場合のフォールバック */
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    /* 上下に少し空きを作る */
    overflow: hidden;
}

.brewlab-post-slide-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* 代替の影などをつける場合はここで */
}

.brewlab-post-slide-image-placeholder {
    width: 100%;
    height: 100%;
}

.brewlab-post-slide-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.brewlab-post-slide-date {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 8px;
    font-family: 'Noto Sans JP', sans-serif;
}

.brewlab-post-slide-title {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* 互換性のための標準プロパティ */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.brewlab-post-slide-title .highlight-red {
    color: #994139;
    /* 梨ブリュー等の強調文字の色 */
}

/* Swiperの矢印カスタマイズ */
.brewlab-post-slider-wrapper .brewlab-slider-prev,
.brewlab-post-slider-wrapper .brewlab-slider-next {
    color: #fff !important;
    background-color: #242c40 !important;
    /* 濃い青色 */
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    margin-top: -15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.brewlab-post-slider-wrapper .brewlab-slider-prev {
    left: -40px !important;
    /* 写真・コンテナの外側に配置 */
}

.brewlab-post-slider-wrapper .brewlab-slider-next {
    right: -40px !important;
    /* 写真・コンテナの外側に配置 */
}

.brewlab-post-slider-wrapper .brewlab-slider-prev::after,
.brewlab-post-slider-wrapper .brewlab-slider-next::after {
    font-size: 12px !important;
    /* アイコンを細く小さく */
    font-weight: bold !important;
}

@media (max-width: 768px) {
    .brewlab-post-slider-wrapper {
        padding: 0;
    }

    .brewlab-slider-prev,
    .brewlab-slider-next {
        display: none;
        /* スマホではスワイプ主体のため矢印非表示、または小さくする */
    }
}