/* ==========================================================
   URBIO KAMSENS CAPABILITIES
   ========================================================== */
.urbio-capabilities-showcase,
.urbio-capabilities-showcase *,
.urbio-capabilities-showcase *::before,
.urbio-capabilities-showcase *::after {
    box-sizing: border-box;
}

.urbio-capabilities-showcase {
    --urbio-capabilities-gap: 28px;
    --urbio-orange: #EC571A;

    width: 100%;
    padding: 0;

    color: #FFFFFF;
    background: #050505;

    font-family: "Exo 2", sans-serif;
}


/* ==========================================================
   TAB SELECTOR
   4 TABS ON ONE ROW
   ========================================================== */

.urbio-capabilities-selector {
    width: 100%;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 12px;

    margin: 0 0 var(--urbio-capabilities-gap);
    padding: 12px;

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
}

.urbio-capabilities-tab,
.urbio-capabilities-tab:hover,
.urbio-capabilities-tab:focus,
.urbio-capabilities-tab:focus-visible,
.urbio-capabilities-tab:active {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 62px;

    margin: 0 !important;
    padding: 14px 18px;

    color: rgba(255, 255, 255, 0.52) !important;
    background: transparent !important;

    border: 1px solid transparent !important;
    border-radius: 13px !important;

    outline: none !important;
    box-shadow: none !important;

    font-family: "Exo 2", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-align: center;

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;

    transition:
        color 0.30s ease,
        background-color 0.30s ease,
        border-color 0.30s ease,
        transform 0.30s ease;
}

.urbio-capabilities-tab:hover {
    color: #FFFFFF !important;

    background: rgba(255, 255, 255, 0.045) !important;
}

.urbio-capabilities-tab.is-active,
.urbio-capabilities-tab.is-active:hover,
.urbio-capabilities-tab.is-active:focus {
    color: #FFFFFF !important;

    background: rgba(236, 87, 26, 0.10) !important;

    border-color: var(--urbio-orange) !important;

    transform: translateY(-1px);
}


/* ==========================================================
   MAIN LAYOUT
   50 / 50 COLUMNS
   ========================================================== */

.urbio-capabilities-layout {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr) !important;

    align-items: stretch;

    gap: var(--urbio-capabilities-gap);
}


/* Prevent either column from forcing the grid wider */

.urbio-capabilities-content,
.urbio-capabilities-visual {
    min-width: 0;
}


/* ==========================================================
   CONTENT
   ========================================================== */

.urbio-capabilities-content {
    position: relative;

    min-height: 610px;

    padding: 40px;

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;

    overflow: hidden;
}


/* ==========================================================
   INDEX
   ========================================================== */

.urbio-capabilities-index {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 36px;

    color: rgba(255, 255, 255, 0.42);

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.08em;
}

.urbio-capabilities-current {
    color: var(--urbio-orange);
}

.urbio-capabilities-index-divider {
    opacity: 0.40;
}


/* ==========================================================
   PANELS
   ========================================================== */

.urbio-capabilities-copy {
    display: none;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}

.urbio-capabilities-copy.is-active {
    display: block;

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    animation:
        urbioCapabilitiesPanelIn
        0.42s
        cubic-bezier(.22, 1, .36, 1)
        both;
}

@keyframes urbioCapabilitiesPanelIn {

    from {
        opacity: 0;

        transform:
            translateY(16px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ==========================================================
   EYEBROW
   ========================================================== */

.urbio-capabilities-eyebrow {
    margin: 0 0 10px;

    color: var(--urbio-orange);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ==========================================================
   MAIN TITLE
   ========================================================== */

.urbio-capabilities-copy h2 {
    margin: 0 0 14px;

    color: #FFFFFF;

    font-family: "Exo 2", sans-serif;

    font-size: 36px !important;
    font-weight: 600;
    line-height: 1.2 !important;

    letter-spacing: 0;
}


/* ==========================================================
   DESCRIPTION
   ========================================================== */

.urbio-capabilities-description {
    max-width: 610px;

    margin: 0 0 28px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 17px;
    line-height: 1.60;
}


/* ==========================================================
   CAPABILITIES LIST
   ========================================================== */

.urbio-capabilities-list {
    display: flex;
    flex-direction: column;

    border-top:
        1px solid rgba(255, 255, 255, 0.13);

    counter-reset:
        urbio-capability-item;
}

.urbio-capabilities-item {
    counter-increment:
        urbio-capability-item;

    min-height: 70px;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    align-items: center;

    gap: 18px;

    padding: 11px 0;

    background: transparent;

    border: 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius: 0;
}

.urbio-capabilities-item::before {
    content:
        counter(
            urbio-capability-item,
            decimal-leading-zero
        );

    color: rgba(255, 255, 255, 0.34);

    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.08em;
}

.urbio-capabilities-item > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 4px;
}

.urbio-capabilities-item > div > span {
    color: rgba(255, 255, 255, 0.88);

    font-size: 15px;
    font-weight: 600;
    line-height: 1.40;
}

.urbio-capabilities-item > div > small {
    color: rgba(255, 255, 255, 0.45);

    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;

    text-align: left;
}


/* ==========================================================
   VISUAL AREA
   ========================================================== */

.urbio-capabilities-visual {
    position: relative;

    min-height: 610px;

    background:
        radial-gradient(
            circle at 60% 45%,
            rgba(255, 255, 255, 0.07),
            transparent 44%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.015),
            rgba(0, 0, 0, 0.18)
        ),
        #090909;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 28px;

    overflow: hidden;
}


/* ==========================================================
   PLATFORM IMAGES
   ========================================================== */

.urbio-capabilities-image {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 80% !important; 
    height: 80%;

    padding: 0;

    object-fit: contain;
    object-position: center;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.885);

    transition:
        opacity 0.50s ease,
        transform 0.65s
        cubic-bezier(.22, 1, .36, 1);

    user-select: none;

    pointer-events: none;
}

.urbio-capabilities-image.is-active {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}




/* ==========================================================
   ADAPTIVE IMAGE STACK
   ========================================================== */

.urbio-capabilities-image-stack {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 78%;
    height: 78%;

    display: flex;
    flex-direction: column;

    gap: 14px;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translate(-50%, -50%)
        scale(0.885);

    transition:
        opacity 0.50s ease,
        visibility 0.50s ease,
        transform 0.65s
        cubic-bezier(.22, 1, .36, 1);
}

.urbio-capabilities-image-stack.is-active {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, -50%)
        scale(1);
}

.urbio-capabilities-stack-image {
    min-height: 0;

    flex: 1 1 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    overflow: hidden;
}

.urbio-capabilities-stack-image img {
    display: block;

    width: 100% !important;
    max-width: 100%;

    height: 100% !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    object-fit: contain !important;
    object-position: center;

    user-select: none;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .urbio-capabilities-image-stack {
        width: 82%;
        height: 82%;
    }
}

@media (max-width: 767px) {
    .urbio-capabilities-image-stack {
        width: calc(100% - 32px);
        height: calc(100% - 32px);
        gap: 10px;
    }
}

/* ==========================================================
   VISUAL LABEL
   ========================================================== */

.urbio-capabilities-visual-label {
    position: absolute;

    left: 24px;
    bottom: 24px;

    z-index: 3;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 10px 14px;

    color: rgba(255, 255, 255, 0.82);

    background: rgba(0, 0, 0, 0.58);

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 999px;

    font-size: 13px;
    font-weight: 500;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.urbio-capabilities-visual-dot {
    width: 7px;
    height: 7px;

    background: var(--urbio-orange);

    border-radius: 50%;

    box-shadow:
        0 0 0 5px
        rgba(236, 87, 26, 0.15);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

    /*
     * Tabs remain 4 across.
     */

    .urbio-capabilities-selector {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }


    /*
     * Main columns stack.
     */

    .urbio-capabilities-layout {
        grid-template-columns: 1fr;
    }


    .urbio-capabilities-content {
        min-height: 610px;
    }


    .urbio-capabilities-visual {
        min-height: 500px;
    }


    .urbio-capabilities-visual-label {
        display: none !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    /*
     * Tabs become vertical only on mobile.
     */

    .urbio-capabilities-selector {
        grid-template-columns: 1fr !important;

        gap: 6px;

        padding: 6px;

        border-radius: 16px;
    }


    .urbio-capabilities-tab {
        min-height: 52px;

        padding: 12px 14px;

        font-size: 14px !important;
    }


    /*
     * Image first, content second.
     */

    .urbio-capabilities-layout {
        display: flex !important;
        flex-direction: column !important;

        gap: 18px !important;
    }


    /* IMAGE */

    .urbio-capabilities-visual {
        order: 1 !important;

        width: 100% !important;

        min-height: 320px !important;

        border-radius: 20px;
    }


    /* CONTENT */

    .urbio-capabilities-content {
        order: 2 !important;

        width: 100% !important;

        min-height: 0 !important;

        padding: 26px !important;

        border-radius: 20px;
    }


    .urbio-capabilities-index {
        margin-bottom: 38px;
    }


    .urbio-capabilities-copy h2 {
        font-size: 34px;

        letter-spacing: -0.8px;
    }


    .urbio-capabilities-description {
        margin-bottom: 28px;

        font-size: 15px;
        line-height: 1.55;
    }


    .urbio-capabilities-item {
        grid-template-columns:
            32px
            minmax(0, 1fr);

        gap: 12px;

        min-height: 70px;

        padding: 10px 0;
    }


    .urbio-capabilities-item > div > span {
        font-size: 14px;
    }


    .urbio-capabilities-item > div > small {
        font-size: 12px;
    }


    .urbio-capabilities-image {
        width: 88%;
        height: 82%;

        padding: 0;
    }


    
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .urbio-capabilities-tab,
    .urbio-capabilities-copy,
    .urbio-capabilities-image,
    .urbio-capabilities-image-stack {
        animation: none !important;
        transition: none !important;
    }
}




/* Detection zones diagram follows the existing visual switching. */
.urbio-capabilities-showcase .urbio-detection-graphic {
    position: absolute;
    inset: 24px 18px 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(.96);
    transition: opacity .5s ease, visibility .5s ease, transform .5s ease;
}
.urbio-capabilities-showcase .urbio-detection-graphic.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
.urbio-capabilities-showcase .urbio-detection-graphic svg {
    display: block;
    width: 100%;
    max-height: 100%;
    height: auto;
}
@media (max-width:1024px) {
    .urbio-capabilities-showcase .urbio-detection-graphic { inset: 16px; }
}
@media (max-width:767px) {
    .urbio-capabilities-showcase .urbio-capabilities-visual:has(.urbio-detection-graphic.is-active) {
        min-height: 0 !important;
        aspect-ratio: 640 / 590;
    }
    .urbio-capabilities-showcase .urbio-detection-graphic { inset: 4px; }
}
@media (prefers-reduced-motion:reduce) {
    .urbio-capabilities-showcase .urbio-detection-graphic { transition: none; }
}


.urbio-capabilities-showcase .urbio-capabilities-selector{grid-template-columns:repeat(4,minmax(0,1fr))!important}@media(max-width:767px){.urbio-capabilities-showcase .urbio-capabilities-selector{grid-template-columns:1fr!important}}

/* v1.0.1: keep the detection illustration visible within its active wrapper. */
.urbio-capabilities-showcase .urbio-detection-inner {width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.urbio-capabilities-showcase .urbio-detection-inner svg {display:block;width:100%;height:auto;max-height:100%;}