/* IIT Companion - Banner slots (one random image per page load) */

.iitc-hide-all {
    display: none !important;
}

.elementor-widget-iit_banner {
    width: 100% !important;
    max-width: 100%;
}

.iitc-banner {
    width: 100%;
}

/* Default frame heights match the homepage banner design (and the crop
   previews in the dashboard): a 900px strip on desktop, full screen height
   on tablets and phones. The widget's Height control overrides these. */
.iitc-banner-frame {
    position: relative;
    width: 100%;
    height: 900px;
    overflow: hidden;
    background: #E5F4FF;
}

@media (max-width: 1024px) {
    .iitc-banner-frame {
        height: 100vh;
    }
}

.iitc-banner-item {
    display: none;
}

/* Zoom lives on the wrapper (not the image) so it never fights the
   image's hover animation transform; scaling around the focal point keeps
   that point fixed while the crop tightens. */
.iitc-banner-item.is-active {
    display: block;
    position: absolute;
    inset: 0;
    transform-origin: var(--bn-d, center center);
    transform: scale(var(--bn-zd, 1));
}

/* Each image sets --bn-d / --bn-t / --bn-m inline (its own focal point per
   breakpoint, chosen in the dashboard). The widget's Object Position
   control out-ranks these wherever it is set: on the breakpoint it is set
   for and any narrower breakpoint left unset (standard Elementor cascade). */
.iitc-banner-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--bn-d, center center);
    display: block;
    /* Hover opacity / filter / animation transitions, as on the Image widget */
    transition-property: opacity, filter, transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

@media (max-width: 1024px) {
    .iitc-banner-frame img {
        object-position: var(--bn-t, var(--bn-d, center center));
    }
    .iitc-banner-item.is-active {
        transform-origin: var(--bn-t, var(--bn-d, center center));
        transform: scale(var(--bn-zt, var(--bn-zd, 1)));
    }
}

@media (max-width: 767px) {
    .iitc-banner-frame img {
        object-position: var(--bn-m, var(--bn-d, center center));
    }
    .iitc-banner-item.is-active {
        transform-origin: var(--bn-m, var(--bn-d, center center));
        transform: scale(var(--bn-zm, var(--bn-zd, 1)));
    }
}

/* Editor placeholder */

.iitc-banner-editor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 300px;
    border: 1px dashed #B9C9E4;
    background: #F5F9FF;
    color: #4A5C7D;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    padding: 20px;
}

.iitc-banner-editor-mark {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #002D74;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iitc-banner-editor-count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 45, 116, 0.85);
    color: #FFFFFF;
    font-size: 11px;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 10px;
    pointer-events: none;
    z-index: 2;
}

.iitc-banner-none {
    border: 1px dashed #B9C9E4;
    border-radius: 10px;
    color: #4A5C7D;
    font-size: 13px;
    padding: 24px 16px;
    text-align: center;
}