/* Robotics Platform carousel image containment and layout fixes */

/* Ensure the image layer matches the card and doesn't exceed */
.carousel .deconstructed-card .card-layer.card-image,
.carousel .deconstructed-card .card-image {
    width: 100% !important;
    height: 100% !important; /* cancel earlier 120% height */
    overflow: hidden !important; /* keep image inside box */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /*background: radial-gradient(ellipse at center, rgba(2,20,54,.35), rgba(2,20,54,.6)) !important; !* subtle letterbox *!*/
}

/* Contain the full image inside the card without any cropping */
.carousel .deconstructed-card .card-layer.card-image img,
.carousel .deconstructed-card .card-image img,
.carousel .deconstructed-card .wave-svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important; /* ensure whole image visible */
    object-position: center center !important;
    transform: none !important; /* remove previous scaling that could clip */
    border-radius: 0 !important;
    display: block !important;
}

/* Make sure outer card never clips visuals unexpectedly */
.carousel .deconstructed-card {
    overflow: hidden !important;
}

/* NEW: Keep layered image/content from blocking clicks; place CTA on top */
.carousel .deconstructed-card .card-layer {
    pointer-events: none !important;
}

.carousel .deconstructed-card > a.button-frame,
.carousel .deconstructed-card > a.button.button-frame {
    position: absolute !important;
    left: 50% !important;
    bottom: 30px !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important; /* above image/content layers */
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

@media (max-width: 480px) {
    .carousel .deconstructed-card > a.button-frame,
    .carousel .deconstructed-card > a.button.button-frame {
        bottom: 10px !important;
    }
}
