/* Phase 3.1 additions only. Preserve the original WOX works hover, overlay and carousel character. */

/*
 * Each Owl item is one vertical column containing two projects, matching the original WOX logic.
 * Four columns are visible on large desktop, so visitors see eight projects at once.
 */
.fpa-selected-work .works-page-img-carousel-item,
.fpa-selected-work .works-page-img-carousel-wrapper {
    height: 50vh;
}

.fpa-selected-work .works-page-img-carousel-wrapper .works-page-img-carousel-text {
    left: 0;
    bottom: 28px;
    padding: 0 28px;
}

.fpa-selected-work .works-page-img-carousel-title h4 {
    font-size: 22px;
    line-height: 1.2;
    padding-bottom: 5px;
    margin: 0;
}

.fpa-selected-work .works-page-img-carousel-wrapper .works-page-img-carousel-text .works-page-img-carousel-heading {
    font-size: 10px;
    letter-spacing: 0.08em;
}

.fpa-selected-work .works-page-img-carousel-content {
    margin-top: 0;
}

.fpa-selected-work .fpa-project-cta {
    margin-top: 14px;
    padding: 10px 16px;
    font-size: 8px;
    letter-spacing: 0.18em;
    cursor: default;
}

/* Project-detail routes are intentionally activated in Phase 4. The CTA remains visual in Phase 3. */
.fpa-selected-work .fpa-project-cta:hover,
.fpa-selected-work .works-page-img-carousel-wrapper:hover .fpa-project-cta {
    color: #111;
}

.fpa-selected-work .fpa-project-cta::before {
    display: none;
}

/* Keep the inherited WOX left/right arrows whenever more columns are available. */
.fpa-selected-work .owl-nav.disabled {
    display: none;
}

@media only screen and (max-width: 1199px) {
    .fpa-selected-work .works-page-img-carousel-wrapper .works-page-img-carousel-text {
        padding-left: 22px;
        padding-right: 22px;
    }
}

@media only screen and (max-width: 880px) {
    .fpa-selected-work .works-page-img-carousel-title h4 {
        font-size: 17px;
        line-height: 1.25;
    }

    .fpa-selected-work .works-page-img-carousel-wrapper .works-page-img-carousel-text {
        bottom: 18px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .fpa-selected-work .fpa-project-cta {
        padding: 9px 13px;
        font-size: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fpa-selected-work .works-page-img-carousel-wrapper::after,
    .fpa-selected-work .works-page-img-carousel-content {
        transition-duration: 0.01ms !important;
    }
}