/**
 * InfoTile Widget CSS
 */

/* Fallback styles for arbitrary values */
.h-\[420px\] {
    height: 420px !important;
}

.h-\[100px\] {
    height: 100px !important;
}

.h-\[56px\] {
    height: 56px !important;
}

.h-\[20px\] {
    height: 20px !important;
}

.h-\[12px\] {
    height: 12px !important;
}

.text-\[#008000\] {
    color: #008000 !important;
}

.text-\[#000000\] {
    color: #000000 !important;
}

.text-\[#ffffff\] {
    color: #ffffff !important;
}

.mt-16 {
    margin-top: 4rem !important;
}

.mt-8 {
    margin-top: 2rem !important;
}

.mt-\[6px\] {
    margin-top: 6px !important;
}

.mb-8 {
    margin-bottom: 2rem !important;
}

.pb-8 {
    padding-bottom: 2rem !important;
}

.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-4 {
    gap: 1rem !important;
}

.max-w-\[90\%\] {
    max-width: 90% !important;
}

.min-h-\[420px\] {
    min-height: 420px !important;
}

.w-\[20px\] {
    width: 20px !important;
}

.w-\[12px\] {
    width: 12px !important;
}

.w-full {
    width: 100% !important;
}

.h-full {
    height: 100% !important;
}

.h-0 {
    height: 0 !important;
}

.opacity-0 {
    opacity: 0 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

.infotile-container {
    position: relative;
    transition: all 0.6s ease-in-out;
    cursor: pointer;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgb(0, 0, 0));
}

.infotile-default-view {
    transition: height 0.6s ease-in-out, overflow 0.6s ease-in-out;
}

.infotile-hover-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: height 0.6s ease-in-out, opacity 0.6s ease-in-out;
    background-blend-mode: overlay;
    z-index: 10;
}

.infotile-read-less {
    transition: opacity 0.6s ease-in-out;
}

.infotile-icon {
    transition: all 0.6s ease-in-out;
    filter: brightness(0) invert(1);
}

.infotile-title {
    transition: color 0.6s ease-in-out;
}

.infotile-content {
    transition: color 0.6s ease-in-out;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.infotile-hover-view .infotile-title {
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .infotile-container {
        min-height: 320px;
    }
    
    .infotile-hover-view {
        height: 320px !important;
    }
    
    .infotile-default-view {
        min-height: 320px;
    }
}

/* Hover state styles */
.infotile-container:hover .infotile-default-view {
    height: 0px !important;
    overflow: hidden !important;
}

.infotile-container:hover .infotile-hover-view {
    height: 420px !important;
    opacity: 1 !important;
}

.infotile-container:hover .infotile-read-less {
    opacity: 1 !important;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .infotile-container {
        cursor: pointer;
    }
    
    .infotile-container.active .infotile-default-view {
        height: 0px !important;
        overflow: hidden !important;
    }
    
    .infotile-container.active .infotile-hover-view {
        height: 420px !important;
        opacity: 1 !important;
    }
    
    .infotile-container.active .infotile-read-less {
        opacity: 1 !important;
    }
}