/* =========================================================
   POMOSDA SECTION 08 — FIVE CARDS NATIVE R3
   Uses the carousel's EXISTING native classes:
   is-outer-prev / is-prev / is-active / is-next / is-outer-next

   Desktop only.
   No JS override.
   Mobile stays on the original Section 08 behavior.
   ========================================================= */

@media (min-width: 1181px) {
    #section-08 .pomosda-achievement-card.is-prev,
    #section-08 .pomosda-achievement-card.is-next,
    #section-08 .pomosda-achievement-card.is-outer-prev,
    #section-08 .pomosda-achievement-card.is-outer-next {
        /*
         * Scale from the visual center instead of the top edge,
         * so smaller side cards stay vertically centered
         * against the active card.
         */
        transform-origin: center center !important;
    }

    #section-08 .pomosda-achievement-card.is-prev {
        transform: translateX(calc(-50% - 238px)) scale(.82) !important;
        opacity: .64 !important;
        z-index: 3 !important;
    }

    #section-08 .pomosda-achievement-card.is-next {
        transform: translateX(calc(-50% + 238px)) scale(.82) !important;
        opacity: .64 !important;
        z-index: 3 !important;
    }

    #section-08 .pomosda-achievement-card.is-outer-prev {
        transform: translateX(calc(-50% - 408px)) scale(.68) !important;
        opacity: .34 !important;
        z-index: 2 !important;
    }

    #section-08 .pomosda-achievement-card.is-outer-next {
        transform: translateX(calc(-50% + 408px)) scale(.68) !important;
        opacity: .34 !important;
        z-index: 2 !important;
    }

    /* Preserve the original blur language, slightly refined. */
    #section-08 .pomosda-achievement-card.is-prev .pomosda-achievement-card__media img,
    #section-08 .pomosda-achievement-card.is-next .pomosda-achievement-card__media img {
        filter:
            blur(var(--section08-blur, 3px))
            saturate(.88) !important;
    }

    #section-08 .pomosda-achievement-card.is-outer-prev .pomosda-achievement-card__media img,
    #section-08 .pomosda-achievement-card.is-outer-next .pomosda-achievement-card__media img {
        filter:
            blur(calc(var(--section08-blur, 3px) + 2px))
            saturate(.76) !important;
    }
}

/*
 * Mid desktop/tablet-landscape.
 * Keep all 5 cards, but tighten the fan to fit the viewport.
 */
@media (min-width: 901px) and (max-width: 1180px) {
    #section-08 .pomosda-achievement-card.is-prev,
    #section-08 .pomosda-achievement-card.is-next,
    #section-08 .pomosda-achievement-card.is-outer-prev,
    #section-08 .pomosda-achievement-card.is-outer-next {
        transform-origin: center center !important;
    }

    #section-08 .pomosda-achievement-card.is-prev {
        transform: translateX(calc(-50% - 205px)) scale(.80) !important;
        opacity: .62 !important;
    }

    #section-08 .pomosda-achievement-card.is-next {
        transform: translateX(calc(-50% + 205px)) scale(.80) !important;
        opacity: .62 !important;
    }

    #section-08 .pomosda-achievement-card.is-outer-prev {
        transform: translateX(calc(-50% - 342px)) scale(.66) !important;
        opacity: .30 !important;
    }

    #section-08 .pomosda-achievement-card.is-outer-next {
        transform: translateX(calc(-50% + 342px)) scale(.66) !important;
        opacity: .30 !important;
    }
}

/*
 * IMPORTANT:
 * <= 900px deliberately receives NO override.
 * Existing Section 08 responsive behavior remains authoritative.
 */