/**
 * Xpert Energy Tabs - Sections Frontend Styles
 * Non-critical styles (hover effects, transitions)
 * Critical layout CSS is inlined in shortcode output
 * 
 * @package Xpert_Energy_Tabs
 * @since 4.0.0
 */

/* =========================================
   Transitions & Hover Effects
   (Non-critical - can load async)
   ========================================= */
.xet-item img {
    transition: transform 0.4s ease;
    will-change: transform;
}

.xet-item:hover img {
    transform: scale(1.05);
}

.xet-item-overlay {
    background: var(--xet-overlay, rgba(0, 0, 0, 0.6));
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.xet-item:hover .xet-item-overlay {
    opacity: 1;
    visibility: visible;
}

.xet-item-btn {
    transform: translateY(20px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
}

.xet-item:hover .xet-item-btn {
    transform: translateY(0);
}

.xet-item-btn:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.xet-item-btn:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* =========================================
   Default Mobile Responsive
   (Section-specific mobile CSS is inlined)
   ========================================= */
@media (max-width: 1024px) {
    .xet-row-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .xet-row-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .xet-item-btn {
        padding: 12px 24px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .xet-item-btn {
        padding: 10px 20px;
        font-size: 12px;
    }
}

/* =========================================
   Accessibility
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .xet-item img,
    .xet-item-overlay,
    .xet-item-btn {
        transition: none;
    }
    
    .xet-item:hover img {
        transform: none;
    }
    
    .xet-item-btn {
        transform: none;
    }
}