/* ------------------------------------------------------------------
 * Post-card — reusable content-card component
 *
 * Image-top → white body (title + copy) → arrow CTA pinned bottom. It skins
 * the CardSliderMobile widget's image cards into the redesign card. Any page
 * opts in by giving its [card_mobile_widget] the class `post-card-grid`; the
 * three cards then render the component with no per-page CSS.
 *
 * This sheet is intentionally NOT page-scoped — it is glob-loaded site-wide by
 * the overrides loader, so the component is available everywhere the class is
 * present. It keys on the theme's #content wrapper (present on every page,
 * language-neutral) purely to out-specify the widget's own
 * `…count_3_element … with_image` rules, which carry !important and higher
 * class-specificity; #content wins on the id without an !important war.
 *
 * Element hooks (the widget's rendered classes, decorated by post-card-grid):
 *   .post-card-grid                         the [card_mobile_widget] wrapper
 *     .card-mobile-item.card-mobile-image   one card       → .post-card
 *       .swiper-slide__image                image-top      → .post-card__image
 *       .swiper-slide__title-heading/__title title         → .post-card__title
 *       .swiper-slide__description           body copy      → .post-card__text
 *       .swiper-slide__button-wrapper/--link arrow CTA      → .post-card__link
 *
 * Figma: file teRt2FXM9JffFSebtSTocH, card node 2089-7130. Tokens — card
 * radius 24, body padding 24, title Inter 600 20/28 navy #0b1b45, copy Inter
 * 400 16/24 navy, inline link tech-blue #2722f8, arrow orange #fb581f, CTA
 * label Inter 700/16 navy.
 * ------------------------------------------------------------------ */

/* Grid wrapper — kill the widget's own inner padding. */
#content .post-card-grid.slider-mobile-items-wrapper {
    padding: 0 !important;
}

/* Desktop (>1280px, where the widget destroys the swiper): the widget's own
 * 3-up flex row only applies when the widget sits under a <section>, which a
 * plain vc_column host does not provide — so replicate that flex layout,
 * sized to exactly three columns with two 32px gutters. Below 1281px the
 * widget re-enables the swiper and this rule stands down. */
@media (min-width: 1281px) {
    #content .post-card-grid .slider-mobile-items.swiper-wrapper {
        display: flex !important;
        flex-wrap: wrap;
        gap: 32px;
        align-items: stretch;
        transform: none !important;
    }
    #content .post-card-grid .card-mobile-item.card-mobile-image {
        flex: 0 0 calc((100% - 64px) / 3) !important;
        max-width: calc((100% - 64px) / 3) !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}

/* The card — white, 24px radius, image-top + text body, equal height. */
#content .post-card-grid .card-mobile-item.card-mobile-image {
    background-color: #ffffff !important;
    border: 0 !important;
    border-radius: 24px !important;
    /* No shadow. The card lives inside the slider's swiper viewport, which is
     * overflow:clip with square (zero-radius) edges hugging the card row — it
     * slices any outset box-shadow into hard straight lines (a "square"
     * shadow), and it can't be given room without offsetting the slides. The
     * Figma card carries no shadow anyway; the white card on the light-sand
     * band is the intended separation. */
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
}

/* Unwrap the default image overlay so the image sits on top and the title
 * flows into the white body below it. */
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__top-heading {
    display: contents !important;
}
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__top-heading::before,
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__top-heading::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Image on top: full width, fixed 416:266 ratio (card clips the top corners). */
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__image {
    position: static !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 416 / 266;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__image a,
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__image picture,
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    object-fit: cover;
}

/* Title in the white body. */
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__title-heading {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 24px 24px 0 !important;
    margin: 0 !important;
}
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__title,
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__title a {
    color: #0b1c45 !important;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    margin: 0 !important;
}

/* Body copy — 24px side padding so it aligns with the title and arrow link,
 * plus bottom room for the absolutely-pinned arrow link. */
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__description {
    position: relative !important;
    background: transparent !important;
    padding: 13px 24px 80px !important;
    flex-grow: 1;
}
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__description,
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__description .text-description,
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__description p {
    color: #0b1b45 !important;
    font-family: Inter, sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
}
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__description .text-description {
    display: block !important;
}
/* An inline link inside the body copy stays brand tech-blue. */
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__description .text-description a {
    color: #2722f8 !important;
    -webkit-text-fill-color: #2722f8 !important;
    text-decoration: underline;
}

/* Arrow CTA pinned to the bottom of the card. */
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__button-wrapper {
    position: absolute !important;
    left: 24px !important;
    right: 24px !important;
    bottom: 24px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__button--link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #0b1b45 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-transform: none !important;
}
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__button--link:hover,
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__button--link:focus {
    background: transparent !important;
    color: #2722f8 !important;
    text-decoration: none !important;
}
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__button--link-text {
    color: inherit !important;
    font-family: Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
/* Swap the default FontAwesome arrow for the Figma orange arrow glyph. */
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__button--link-icon {
    display: none !important;
}
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__button--link::after {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14' fill='none'%3E%3Cpath d='M9 1l6 6-6 6M15 7H1' stroke='%23fb581f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 14px;
    transition: transform 0.15s ease;
}
/* The arrow slides on hover of the link or anywhere on the card. */
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__button--link:hover::after,
#content .post-card-grid .card-mobile-item.card-mobile-image .swiper-slide__button--link:focus::after,
#content .post-card-grid .card-mobile-item.card-mobile-image:hover .swiper-slide__button--link::after {
    transform: translateX(4px);
}