/* =========================================================
   1. PREVIOUS / NEXT AREA
   ========================================================= */

.blog_other {
    box-sizing: border-box;
}


/* =========================================================
   2. IMAGE WRAPPERS (FIX 1: min-height reset)
   ========================================================= */

.blog_other .pic_box,
.blog_other .compute_item_img,
.blog_other .compute_process_img {
    width: 100% !important;

    aspect-ratio: 4 / 3 !important;

    overflow: hidden !important;

    position: relative !important;

    padding: 0 !important;
    margin: 0 !important;

    height: auto !important;
    min-height: 0 !important; /* FIX 1 */
}


/* =========================================================
   2b. DEFENSIVE FALLBACK (FIX 3)
   ========================================================= */

.blog_other div:has(> img) {
    min-height: 0 !important; /* FIX 3 */
}


/* =========================================================
   3. IMAGE
   ========================================================= */

.blog_other img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    aspect-ratio: 4 / 3 !important;

    object-fit: cover !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   4. DESKTOP
   ========================================================= */

@media (min-width: 769px) {

    /* ---- both mode: 390 x 293 cards ---- */

    .blog_other.cacar-mode-both .cacar-prevnext-item {
        width: 390px !important;
        max-width: 390px !important;
    }

    .blog_other.cacar-mode-both .cacar-prevnext-item .pic_box,
    .blog_other.cacar-mode-both .cacar-prevnext-item .compute_item_img,
    .blog_other.cacar-mode-both .cacar-prevnext-item .compute_process_img {
        width: 390px !important;
        height: 293px !important;

        min-height: 0 !important; /* FIX 1 */

        aspect-ratio: auto !important;
    }

    .blog_other.cacar-mode-both .cacar-prevnext-item img {
        width: 390px !important;
        height: 293px !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;
        object-position: center center !important;
    }


    /* ---- single mode (FIX 5): compact 300 x 225 card ---- */

    .blog_other.cacar-mode-single .cacar-prevnext-item {
        width: 300px !important;
        max-width: 300px !important;
    }

    .blog_other.cacar-mode-single .cacar-prevnext-item .pic_box,
    .blog_other.cacar-mode-single .cacar-prevnext-item .compute_item_img,
    .blog_other.cacar-mode-single .cacar-prevnext-item .compute_process_img {
        width: 300px !important;
        height: 225px !important; /* 300 x 225 = 4:3 */

        min-height: 0 !important; /* FIX 1 */

        aspect-ratio: auto !important;
    }

    .blog_other.cacar-mode-single .cacar-prevnext-item img {
        width: 300px !important;
        height: 225px !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;
        object-position: center center !important;
    }

}


/* =========================================================
   5. MOBILE
   Full width + automatic 4:3 (both modes)
   ========================================================= */

@media (max-width: 768px) {

    .blog_other .cacar-prevnext-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    .blog_other .cacar-prevnext-item .pic_box,
    .blog_other .cacar-prevnext-item .compute_item_img,
    .blog_other .cacar-prevnext-item .compute_process_img {
        width: 100% !important;
        height: auto !important;

        min-height: 0 !important; /* FIX 1 */

        aspect-ratio: 4 / 3 !important;
    }

    .blog_other .cacar-prevnext-item img {
        width: 100% !important;
        height: 100% !important;

        aspect-ratio: 4 / 3 !important;

        object-fit: cover !important;
        object-position: center center !important;
    }

}


/* =========================================================
   6. CARD TITLE (FIX 6)
   Smaller card title for a more compact card.
   Only affects prev/next card titles, not the article body.
   ========================================================= */

.blog_other .cacar-prevnext-item h1,
.blog_other .cacar-prevnext-item h2,
.blog_other .cacar-prevnext-item h3,
.blog_other .cacar-prevnext-item h4,
.blog_other .cacar-prevnext-item .title,
.blog_other .cacar-prevnext-item .caption {
    font-size: 16px !important;   /* 改这个数字调大小 */
    line-height: 1.45 !important;
}