/*
 * CodeLine Services Cards - card-only visual enhancements.
 * All selectors are scoped to the plugin root (.clsc).
 */

.clsc .clsc-image-wrap {
    width: 100%;
    /* Height follows the admin-configured ratio (see services-cards.css). */
    height: auto;
    aspect-ratio: var(--clsc-ratio-w, 9) / var(--clsc-ratio-h, 16);
    position: relative;
    overflow: hidden;
    background: #0c0c0c;
    /*
     * Illuminated edge, not a border: a hairline of light sitting right on
     * the frame (inset highlight + 1px outer line) plus two soft spread
     * layers so the edge reads as something emitting light rather than a
     * flat CSS outline. box-shadow is used (not border) so it paints outside
     * the wrap's own clipped box and never affects layout/sizing, and so the
     * image's rounded corners stay cleanly clipped. Neutral white light keeps the effect clean and consistent with the monochrome design.
     */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.75),
        0 0 0 1px rgba(255, 255, 255, 0.55),
        0 0 9px 1px rgba(255, 255, 255, 0.32),
        0 0 20px 3px rgba(255, 255, 255, 0.14);
}

.clsc .clsc-image-wrap .clsc-image {
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100% !important;
    max-width: none;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center;
}

@media (hover: hover) and (pointer: fine) {
    .clsc .clsc-image-wrap {
        transition:
            transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1),
            box-shadow 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .clsc .clsc-image-wrap .clsc-image {
        transition:
            transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1),
            filter 360ms ease;
    }

    /*
     * Hover glow must be dramatically stronger than rest, not just brighter:
     * a crisper inset/outer edge plus three widening spread layers so the
     * light clearly pushes further out than the rest-state glow above.
     */
    .clsc .clsc-link:hover .clsc-image-wrap,
    .clsc .clsc-link:focus-visible .clsc-image-wrap {
        transform: translateY(-4px);
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.95),
            0 0 0 1.25px rgba(255, 255, 255, 0.95),
            0 0 22px 3px rgba(255, 255, 255, 0.65),
            0 0 46px 8px rgba(255, 255, 255, 0.40),
            0 0 84px 16px rgba(255, 255, 255, 0.20);
    }

    .clsc .clsc-link:hover .clsc-image,
    .clsc .clsc-link:focus-visible .clsc-image {
        transform: scale(1.045);
        filter: brightness(1.04) contrast(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .clsc .clsc-image-wrap,
    .clsc .clsc-image-wrap .clsc-image {
        transition: none !important;
    }
}