/**
 * Services Page Styles
 * 
 * Styles for the Services page with hover effects on service tiles
 * 
 * @package XLNC_Theme
 */

/* Service Tile Container */
.xlnc-service-tile {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Service Title - Always Visible */
.xlnc-service-tile .xlnc-service-title {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Service Description - Hidden by default, shown on hover */
.xlnc-service-tile .xlnc-service-description {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
    margin-top: 0 !important;
}

/* Service Button - Hidden by default, shown on hover */
.xlnc-service-tile .xlnc-service-button {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
    margin-top: 0 !important;
}

/* Hover State - Show description and button */
.xlnc-service-tile:hover {
    transform: scale(1.02);
}

.xlnc-service-tile:hover .xlnc-service-description {
    opacity: 1;
    max-height: 200px;
    margin-top: var(--wp--preset--spacing--20) !important;
}

.xlnc-service-tile:hover .xlnc-service-button {
    opacity: 1;
    max-height: 100px;
    margin-top: var(--wp--preset--spacing--30) !important;
}

/* Darken overlay on hover for better text readability */
.xlnc-service-tile:hover .wp-block-cover__background {
    opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .xlnc-service-tile {
        min-height: 250px !important;
    }
    
    /* On mobile, show description and button always (no hover needed) */
    .xlnc-service-tile .xlnc-service-description,
    .xlnc-service-tile .xlnc-service-button {
        opacity: 1;
        max-height: none;
        overflow: visible;
    }
}