/* =============================================
   POST CARDS BLOCK
   ============================================= */

.post-cards-block {
    /* Horizontal padding aligns content. Clipping is handled by body { overflow-x: clip }
       so slides and their shadows are visible up to the viewport edge. */
    padding:  0;
    overflow: visible;
    margin: 0;
    margin-top: 0;
    padding-bottom: 50px !important;
}   

/* ── Swiper container ── */
/* overflow: visible lets the block do the clipping so card shadows
   can render in the block's padding area without being cut off. */
.post-cards-swiper {
    overflow: visible !important;
}

/* ── Individual slide — width controlled by Swiper slidesPerView ── */
.post-cards-swiper .swiper-slide {
    height: auto;
}

/* Mobile: fixed width so the next slide peeks at the right edge */
@media (max-width: 767px) {
    .post-cards-swiper .swiper-slide {
        width: calc(100% - 45px);
    }
}

/* ── Card shell ── */
.post-card {
    position: relative;
    height: 520px;
    border-radius: var(--wp--preset--spacing--spacing-1);
    overflow: hidden;
    display: block;
    box-shadow: var(--wp--preset--shadow--natural);
     background: var(--wp--preset--color--primary);
}

/* ── Featured image ── */
.post-card__image-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    height: 73%;

    @media (max-width: 767px) {
        height: 360px;
    }
}

.post-cards-swiper .swiper-wrapper {
    padding-bottom: 20px;

}

.post-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.post-card:hover .post-card__image,
.post-card:has(:focus-within) .post-card__image {
    transform: scale(1.05);
}

/* ── Cloud SVG ──
   The plum SVG shape (400×738 viewBox) has an organic bumpy top edge.
   Positioned at top:40% of the card, the bumps overlap the image area,
   creating a natural organic transition. Below the bumps the fill is
   solid plum — no separate background needed on the body div.
─────────────────────────────────────────────────────────────────────── */
.post-card__cloud {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;           /* preserves 400:738 aspect ratio */
    z-index: 1;
    pointer-events: none;
    display: block;
}

/* ── Body — layout container over the plum area ── */
.post-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 54%;               /* starts below the cloud's bump transition */
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ── Content ── */
.post-card__content {
    padding: 0 1.5rem 1.75rem;
}

/* ── Title ── */
.post-card__title {
    font-family: var(--wp--preset--font-family--bricolage-grotesque-condensed) !important;
    font-size: var(--wp--preset--font-size--xx-large);
    text-transform: none;
    font-weight: 400;
    line-height: 1;
    color: #ffffff;
    margin: 0 0 0.5rem;
}

/* ── Excerpt ── */
.post-card__excerpt {
    font-size: var(--wp--preset--font-size--medium);
    color: #ffffff;
    margin: 0 0 0.875rem;
}

/* ── Learn more ── */
.post-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-family: var(--wp--preset--font-family--bricolage-grotesque-condensed) !important;
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 400;
    color: var(--wp--preset--color--secondary);
    transition: color 0.2s ease;
    pointer-events: none; /* cover link handles clicks */
}

.post-card:hover .post-card__link,
.post-card:has(:focus-within) .post-card__link {
    color: #ffffff;
}

.post-card__arrow {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: block;
}

/* ── Cover link — full card click target ── */
.post-card__cover-link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* ── Footer: nav arrows ── */
.post-cards-footer-wrapper {
    position: relative;
    height: 0px;
    overflow: visible;
}
.post-cards-block__footer {
    position: absolute;
    left: auto;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ── Nav arrows ── */
.post-cards-swiper__nav {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.post-cards-swiper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: var(--wp--preset--color--primary);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease;
    padding: 8px;
}

.post-cards-swiper__btn:hover,
.post-cards-swiper__btn:focus {
    background: var(--wp--preset--color--dark-plum);
}

.post-cards-swiper__btn svg {
    width: 16px;
    height: auto;
    display: block;
}

.post-cards-swiper__btn.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Empty state ── */
.post-cards-block__empty {
    padding: 2rem 0;
    color: var(--wp--preset--color--dark-plum);
    opacity: 0.6;
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .post-cards-block {
        padding: 0 0 var(--wp--preset--spacing--50) 0;
        overflow-x: visible;
    }

    .post-card {
        height: 440px;
    }

    .post-cards-block__footer {
        padding-top: var(--wp--preset--spacing--10);
        left: 0;
        right: auto;
    }
}

.post-cards-swiper__nav:has(.post-cards-swiper__prev.swiper-button-disabled):has(.post-cards-swiper__next.swiper-button-disabled) {
    display: none;
}