/* proven-technology.css */

.proven-technology-gradient-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
    background: linear-gradient(to bottom,
    rgba(9, 18, 42, 1) 0%,
    rgba(9, 18, 42, 1) 15%,
    rgba(9, 18, 42, 0) 25%,
    rgba(9, 18, 42, 0) 90%,
    rgba(9, 18, 42, 1) 98%,
    rgba(9, 18, 42, 1) 100%); 
     pointer-events: none; z-index: 2;
}

.proven-technology-section {
    justify-content: center;
}

.proven-technology-title-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.proven-technology-media-container {
    position: relative;
    /* aspect-ratio: 1920 / 1600; */
    width: 100vw;
    min-width: 120vh;
    height: auto;
    min-height: 82vw;
    overflow: hidden;
    z-index: 0;
    display: block;
}

.proven-technology-media-container {
    position: relative;
    /* aspect-ratio: 1920 / 1600; */
    width: 100vw;
    min-width: 120vh;
    /* height: 56.25vw; */
    min-height: 82vw;
    overflow: hidden;
    z-index: 0;
    display: block;
}

/* Portrait orientation adjustments */
.target-portrait .proven-technology-media-container {
    height: 62svh;
    min-width: auto;
    min-height: auto;
}

.proven-technology-video,
.proven-technology-img,
.proven-technology-rollover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.proven-technology-img,
.proven-technology-rollover-img {
    opacity:0;
    pointer-events:none;
    /* transition:opacity 0.5s; */
}

.proven-technology-rollover-img {
    transition:opacity 0.5s;
}

/* Hotspot buttons positioned relative to 1920x1600 background */
.proven-hotspot {
    position: absolute;
    z-index: 10;
    color: #fff;
    background: rgba(0,21,126,0);
    padding: 0.5em 1em;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    border-radius: 0.5em;
    border: 1px solid #ffffff00;
    display: flex;
    align-items: center;
    flex-direction: row;
    text-align: left;
    line-height: 1.2;
    gap: 0.2em;
}

.proven-hotspot:focus,
.proven-hotspot:hover {
    font-weight: 700;
}

.proven-hotspot.selected {
    font-weight: 700;
}

/* Button positions (percentages based on 1920x1600 background) */
.proven-hotspot[data-rollover="0"] { top: 48.5%; left: 16%; }
.proven-hotspot[data-rollover="1"] { top: 71.3%; left: 18.5%; }
.proven-hotspot[data-rollover="2"] { top: 51.5%; left: 5%; }
.proven-hotspot[data-rollover="3"] { top: 68.3%; left: 7%; }
.proven-hotspot[data-rollover="4"] { top: 38%; left: 41.0%; }
.proven-hotspot[data-rollover="5"] { top: 73.5%; left: 28%; }
.proven-hotspot[data-rollover="6"] { top: 70.2%; left: 73.2%; }
.proven-hotspot[data-rollover="7"] { top: 59.6%; left: 82.5%; }

/* Portrait orientation hotspot adjustments */
.target-portrait .proven-hotspot {
    font-size: 0.9em;
    padding: 0.4em 0.8em;
}

.target-portrait .proven-hotspot[data-rollover="0"] { top: 46%; left: 15%; }
.target-portrait .proven-hotspot[data-rollover="1"] { top: 73%; left: 14.5%; }
.target-portrait .proven-hotspot[data-rollover="2"] { top: 51%; left: 1.5%; }
.target-portrait .proven-hotspot[data-rollover="3"] { top: 69%; left: 2%; }
.target-portrait .proven-hotspot[data-rollover="4"] { top: 36%; left: 38.0%; }
.target-portrait .proven-hotspot[data-rollover="5"] { top: 76%; left: 26%; }
.target-portrait .proven-hotspot[data-rollover="6"] { top: 71%; left: 73.2%; }
.target-portrait .proven-hotspot[data-rollover="7"] { top: 59.5%; left: 82.5%; }

.proven-label {
    position: absolute;
    z-index: 10;
    color: #fff;
    background: rgba(0,21,126,0);
    padding: 0.5em 1em;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    border-radius: 0.5em;
    border: 1px solid #ffffff00;
    line-height: 1.2;
}

/* Portrait orientation label adjustments */
.target-portrait .proven-label {
    font-size: 0.9em;
    padding: 0.4em 0.8em;
}

.proven-info-panel {
    position: absolute;
    top: 40%;
    left: 20%;
    transform: translate(-50%, -50%);
    width: 28em;
    background: rgba(20, 30, 60, 0.92);
    color: #fff;
    border-radius: 1.2em;
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 1em;
    opacity: 0;
    pointer-events: auto;
    gap: 1em;
}

/* Portrait orientation info panel adjustments */
.target-portrait .proven-info-panel {
    width: 24em;
    top: 110%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.8em;
    gap: 0.8em;
    font-size: 1.3em;
}

.proven-info-panel.systems {
    flex-direction: column;
    padding: 0.5em;
}

.target-portrait .proven-info-panel.systems {
    padding: 0.4em;
}

.proven-info-close {
    position: absolute;
    top: -0.5em;
    right: -1.2em;
    background: rgba(0,0,0,0);
    color: #fff;
    border: none;
    font-size: 2.2em;
    font-weight: 700;
    border-radius: 0.5em;
    cursor: pointer;
    z-index: 101;
    padding: 0.3em;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
    outline: none;
}

/* Portrait orientation close button adjustments */
.target-portrait .proven-info-close {
    font-size: 2em;
    padding: 0.25em;
    right: -1.3em;
}

.proven-info-close:hover, .proven-info-close:focus {
    color: #ffffffbe;
}

.proven-info-img {
    width: 100%;
    max-width: 12em;
    height: auto;
    border-radius: 0.7em;
    display: block;
}

/* Portrait orientation image adjustments */
.target-portrait .proven-info-img {
    max-width: 10em;
}

.proven-info-img.systems {
    max-width: 10em;
}

.target-portrait .proven-info-img.systems {
    max-width: 8em;
}

.proven-info-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: .9em;
    line-height: 1.5;
    /* max-width: 20em; */
    width: 100%;
    text-align: left;
}

/* Portrait orientation text adjustments */
.target-portrait .proven-info-text {
    font-size: 0.85em;
}

.proven-info-text h3 {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 0.2em;
}

/* Portrait orientation heading adjustments */
.target-portrait .proven-info-text h3 {
    font-size: 1.1em;
}

.proven-info-text strong {
    font-size: .9em;
    margin-top: 0.7em;
    color: #fff;
}

.proven-hotspot-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1.3em;
    height: 1.3em;
    margin-right: 0.5em;
    margin-bottom: 0.15em;
}

/* Portrait orientation icon adjustments */
.target-portrait .proven-hotspot-icon {
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.4em;
}

.systems-row {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

/* Portrait orientation systems row adjustments */
.target-portrait .systems-row {
    gap: 0.8em;
}

/* Instruction Panel */
.proven-instruction-panel {
    position: absolute;
    top: 34%;
    left: 10%;
    z-index: 100;
}

/* Portrait orientation instruction panel adjustments */
.target-portrait .proven-instruction-panel {
    top: 110%;
    left: 50%;
    transform: translateX(-50%);
}

.proven-instruction-panel-content {
    background: rgb(0 5 9 / 28%);
    color: #fff;
    border-radius: 1.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2em;
    pointer-events: none;
    gap: 1em;
}

/* Portrait orientation instruction content adjustments */
.target-portrait .proven-instruction-panel-content {
    padding: 1.5em;
    gap: 0.8em;
}

.instruction-icon {
    width: 3em;
    height: 3em;
    opacity: 0.8;
    animation: iconPulse 2s ease-in-out infinite;
}

/* Portrait orientation instruction icon adjustments */
.target-portrait .instruction-icon {
    width: 2.5em;
    height: 2.5em;
}

@keyframes iconPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    25% {
        transform: scale(1.1);
        opacity: 1;
    }
    50% {
        transform: scale(1);
        opacity: 0.8;
    }
}

.instruction-text {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    margin: 0;
    /* color: #e0e0e0; */
    font-family: 'Montserrat', sans-serif;
}

/* Portrait orientation instruction text adjustments */
.target-portrait .instruction-text {
    font-size: 1.1em;
}