/*
 * NewKey.cy /for-developers.html — AI visual replacements.
 * Loaded after for-developer-new.css so the existing layout remains authoritative.
 */

.dev-ai-frame {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #eef6ff;
}

.dev-ai-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Hero: preserve the existing right-hand media column without the inactive video UI. */
.dev-hero__media .dev-ai-frame--hero {
    width: 100%;
    aspect-ratio: 1440 / 788;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 18px;
    box-shadow: 0 28px 64px rgba(12, 20, 64, 0.3);
}

.dev-hero__media .dev-ai-frame--hero .dev-ai-img {
    object-position: 50% 50%;
}

/* Bento placeholders already own their dimensions; only their inner visual changes. */
.dev-bph.dev-ai-frame {
    display: block;
    padding: 0 !important;
}

.dev-bph--map.dev-ai-frame {
    aspect-ratio: 424 / 684;
}

.dev-bph--tour.dev-ai-frame,
.dev-bph--drone.dev-ai-frame {
    aspect-ratio: 254 / 390;
}

.dev-bph--page.dev-ai-frame {
    aspect-ratio: 602 / 310;
}

.dev-bph--leads.dev-ai-frame {
    aspect-ratio: 344 / 310;
}

.dev-bph.dev-ai-frame .dev-ai-img,
.dev-preso__media.dev-ai-frame .dev-ai-img,
.dev-convince__img.dev-ai-frame .dev-ai-img {
    position: absolute;
    inset: 0;
}

.dev-bph--map.dev-ai-frame .dev-ai-img,
.dev-bph--tour.dev-ai-frame .dev-ai-img,
.dev-bph--drone.dev-ai-frame .dev-ai-img {
    object-position: 50% 50%;
}

.dev-bph--page.dev-ai-frame .dev-ai-img {
    object-position: 50% 50%;
}

.dev-bph--leads.dev-ai-frame .dev-ai-img {
    object-position: 50% 50%;
}

/* Tab panels keep their current captions and interaction; only the media plane is replaced. */
.dev-preso__media.dev-ai-frame {
    padding: 0 !important;
}

.dev-preso__media.dev-ai-frame .dev-ai-img {
    object-fit: cover;
}

.dev-preso__panel[data-panel="tour"] .dev-ai-img {
    object-position: 50% 55%;
}

.dev-preso__panel[data-panel="nearby"] .dev-ai-img,
.dev-preso__panel[data-panel="map"] .dev-ai-img {
    object-position: 50% 38%;
}

.dev-preso__panel[data-panel="drone"] .dev-ai-img {
    object-position: 50% 28%;
}

/* The original illustration wrapper is retained so grid sizing stays unchanged. */
.dev-convince__img.dev-ai-frame {
    min-height: 440px;
    border-radius: 18px;
    box-shadow: 0 24px 54px rgba(47, 41, 99, 0.14);
}

.dev-convince__img.dev-ai-frame .dev-ai-img {
    object-position: center;
}

@media (max-width: 1023px) {
    .dev-hero__media .dev-ai-frame--hero {
        border-radius: 16px;
        box-shadow: 0 20px 42px rgba(12, 20, 64, 0.24);
    }

    .dev-convince__img.dev-ai-frame {
        min-height: 380px;
    }
}

@media (max-width: 767px) {
    .dev-hero__media .dev-ai-frame--hero {
        aspect-ratio: 3 / 2;
        border-radius: 14px;
    }

    .dev-bph--map.dev-ai-frame .dev-ai-img,
    .dev-bph--tour.dev-ai-frame .dev-ai-img,
    .dev-bph--drone.dev-ai-frame .dev-ai-img {
        object-position: center;
    }

    .dev-preso__media.dev-ai-frame {
        min-height: 280px;
    }

    .dev-convince__img.dev-ai-frame {
        min-height: 0;
        aspect-ratio: 1 / 1;
        border-radius: 14px;
        box-shadow: 0 16px 36px rgba(47, 41, 99, 0.12);
    }
}