/* Related Posts Block Styles */

/* ── Heading ── */
.related-posts-wrapper .related-posts-heading {
    font: var(--font-24-32-gotham-bold);
    color: var(--black);
    margin-bottom: 40px;
}

/* ── Desktop (> 768px): vertically stacked cards ── */
@media (width > 768px) {
    .related-posts-cards {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* Each card takes full width of the block */
    .related-posts-cards .card-wrapper.card-default-wrapper {
        width: 100%;
        max-width: 100%;
    }

    /* Image fills full width, fixed height on desktop */
    .related-posts-cards .card-default .media img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    /* Hide carousel controls on desktop */
    .related-posts-carousel-wrapper .peek-carousel-ctl {
        display: none !important;
    }
}

/* ── Tablet / Mobile (≤ 768px): peek-carousel ── */
@media (width <=768px) {
    .related-posts-wrapper .related-posts-heading {
        text-align: center;
        margin-bottom: 20px;
    }

    .related-posts-carousel-wrapper {
        position: relative;
    }

    /* Activate peek-carousel behaviour */
    .related-posts-cards {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-behavior: smooth;
        gap: 20px;
        align-items: stretch;
        scrollbar-width: none;
    }

    .related-posts-cards::-webkit-scrollbar {
        display: none;
    }

    /* Each card is a fixed-width slide */
    .related-posts-cards .card-wrapper.card-default-wrapper {
        flex: 0 0 auto;
        width: 82vw;
        max-width: 270px;
    }

    /* .related-posts-cards .card-wrapper.card-default-wrapper:first-child {
        margin-left: calc(100% / 24 * 2);
    } */

    /* .related-posts-cards .card-wrapper.card-default-wrapper:last-child {
        margin-right: calc(100% / 24 * 2);
    } */

    /* Card image on mobile */
    .related-posts-cards .card-default .media img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }
}

/* ── Mobile only (≤ 426px) ── */
@media (width <=426px) {
    .related-posts-wrapper .related-posts-heading {
        font: var(--font-20-28-gotham-bold);
        text-align: left;
    }

    .related-posts-cards .card-wrapper.card-default-wrapper {
        width: 100%;
    }
}

/* ── Fallback message ── */
.related-posts-fallback {
    font: var(--font-16-24-gotham-book);
    font-weight: var(--font-weight-book);
    color: var(--off-black);
}