/* AtlasIED IP Solutions Custom Styling */

/* ===== PRODUCT GREYBLOCK SECTION ===== */

/* Fix sp_voiptypes images to stay on one line */
.sp_voiptypes {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 20px 0;
    overflow-x: auto; /* Allow horizontal scroll on very small screens */
}

.sp_voiptypes > div {
    flex: 0 0 auto; /* Don't grow or shrink */
    min-width: 120px; /* Minimum width to prevent too small */
    max-width: 200px; /* Maximum width to prevent too large */
    text-align: center;
}

.sp_voiptypes img {
    width: 100% !important; /* Override inline styles */
    height: auto;
    max-width: 180px;
    display: block;
    margin: 0 auto;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .sp_voiptypes {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 15px;
        padding: 15px 0;
        max-width: 100%;
    }
    
    .sp_voiptypes > div {
        flex: 0 0 calc(33.333% - 10px);
        min-width: 100px;
        max-width: 150px;
        text-align: center;
    }
    
    .sp_voiptypes img {
        width: 100% !important;
        max-width: 120px;
        height: auto;
    }
}

@media (max-width: 480px) {
    .sp_voiptypes {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        max-width: 100%;
    }
    
    .sp_voiptypes > div {
        flex: 0 0 calc(33.333% - 8px);
        min-width: 80px;
        max-width: 120px;
        text-align: center;
    }
    
    .sp_voiptypes img {
        width: 100% !important;
        max-width: 100px;
        height: auto;
    }
}

/* ===== POE IMAGE SPECIFIC STYLING ===== */

/* Target the PoE image specifically in the product_whiteblock section */
.product_whiteblock .sp_voiptypes img[alt*="PoE"] {
    width: 200% !important;
    min-width: 200% !important;
    max-width: none !important;
    display: block !important;
    margin: 0 auto !important;
    transform: scale(1) !important;
    transform-origin: center !important;
    position: relative;
    left: 0;
    right: 0;
    box-sizing: border-box !important;
}

/* Ensure the outer container centers properly */
.product_whiteblock .sp_voiptypes {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Ensure both nested div containers center the image */
.product_whiteblock .sp_voiptypes > div {
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.product_whiteblock .sp_voiptypes > div > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Responsive adjustments for the PoE image */
@media (max-width: 768px) {
    .product_whiteblock .sp_voiptypes img[alt*="PoE"] {
        width: 180% !important;
    }
}

@media (max-width: 480px) {
    .product_whiteblock .sp_voiptypes img[alt*="PoE"] {
        width: 160% !important;
    }
}

/* ===== ENHANCED MOBILE STYLING ===== */

/* Mobile-specific improvements for product sections */
@media (max-width: 640px) {
    
    /* Product title improvements for mobile */
    .product_title {
        font-size: 1.4em !important;
        line-height: 1.2 !important;
        padding: 8px 10px !important;
        margin: 8px 0 !important;
        text-align: center !important;
    }
    
    /* Product description text optimizations */
    .product_titleDescription {
        font-size: 1.1em !important;
        line-height: 1.4 !important;
        padding: 10px 15px !important;
        margin: 8px 0 !important;
        text-align: left !important;
    }
    
    /* Embedded video responsive improvements */
    .s-embed.s-video {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        overflow: hidden;
    }
    
    .s-embed.s-video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        border: 0;
    }
    
    /* Parallax block mobile adjustments */
    .sol_parallaxBlock {
        padding: 15px 10px !important;
        margin: 12px 0 !important;
    }
    
    /* Blue area blocks for mobile */
    .sol_blueArea {
        width: 100% !important;
        margin: 6px 0 !important;
        padding: 15px 12px !important;
    }
    
    /* Remove flex layout for mobile stacking */
    .sol_parallaxBlock > div[style*="display: flex"] {
        display: block !important;
    }
    
    /* Black area mobile improvements */
    .sol_blackArea {
        padding: 15px 12px !important;
        margin: 8px 0 !important;
    }
    
    /* Product blocks compact spacing */
    .product_whiteblock,
    .product_greyblock {
        margin: 12px 0 !important;
        padding: 12px 8px !important;
    }
    
    /* Parallax block heading text visibility for mobile */
    .sol_parallaxBlock > div h2 {
        color: #000000 !important;
        font-size: 1.3rem !important;
        margin: 6px 0 !important;
        padding: 4px 0 !important;
    }
    
    /* Image sizing for mobile */
    .product_whiteblock img,
    .product_greyblock img {
        max-width: 100% !important;
        height: auto !important;
        margin: 6px auto !important;
        display: block !important;
    }
    
    /* Compact image spacing */
    .product_whiteblock > div,
    .product_greyblock > div {
        margin: 8px 0 !important;
    }
    
    /* Cisco partner logo mobile sizing */
    img[alt*="Cisco"] {
        width: 30% !important;
        min-width: 120px !important;
    }
    
    /* TTMI icon mobile sizing */
    img[alt*="Talk-to-Me"] {
        width: 15% !important;
        min-width: 60px !important;
    }
    
    /* Multi software compatibility image mobile */
    img[alt*="Multi Software"] {
        width: 90% !important;
        max-width: 400px !important;
    }
    
    /* Global communication icons mobile */
    img[alt*="Automatic Alert"] {
        width: 95% !important;
        max-width: 450px !important;
        
    }
    
    /* ETL Icon mobile sizing */
    img[alt*="ETL"] {
        width: 40% !important;
        max-width: 120px !important;
        padding: 10px 5% !important;
    }
    
    /* Request demo/quote buttons mobile */
    .sol_whiteBlock {
        text-align: center !important;
        padding: 20px 15px !important;
    }
    
    .sol_getAQuoteButton img {
        max-width: 200px !important;
        display: block !important;
    }
    
    /* Category grid mobile improvements */
    .sub-category-grid .item-box {
        margin: 15px auto !important;
        max-width: 350px !important;
        padding: 15px 12px !important;
    }
    
    .sub-category-picture {
        height: auto !important;
        width: 100% !important;
        margin: 8px 0 !important;
    }
    
    .sub-category-picture img {
        max-width: 200px !important;
        width: 80% !important;
        height: auto !important;
    }
    
    /* Category item-box text improvements for mobile */
    .item-box p {
        text-align: center !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin: 10px 0 !important;
        padding: 0 8px !important;
    }
    
    /* Category navigation buttons */
    .sub-category-nav {
        margin: 10px auto !important;
        width: auto !important;
    }
    
    .sub-category-nav a {
        padding: 10px 18px !important;
        font-size: 1.1em !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    
    .product_title {
        font-size: 1.2em !important;
        padding: 12px 8px !important;
    }
    
    .product_titleDescription {
        font-size: 1em !important;
        padding: 12px 15px !important;
        text-align: center !important;
    }
    
    .sol_parallaxBlock {
        padding: 15px 10px !important;
    }
    
    .sol_blueArea,
    .sol_blackArea {
        padding: 15px 10px !important;
    }
    
    /* Smaller text for very small screens */
    .sol_blueArea h3,
    .sol_blackArea h2 {
        font-size: 1.3em !important;
        line-height: 1.3 !important;
    }
    
    .sol_blueArea h4,
    .sol_blackArea p {
        font-size: 0.95em !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;
        margin-bottom: 0px !important;
    }
}