/* Awards Animated Block Styles */
/* Most styles are handled by Tailwind CSS */

/* Break out of container to make full-width */
.awards-animated-block {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box;
}

/* Concentric circles background image */
.concentric-circles-bg {
    z-index: 0;
    max-width: none;
    width: auto;
    height: auto;
}

/* Override Elementor container max-width when block is inside */
.e-con-inner:has(.awards-animated-block),
.elementor-container:has(.awards-animated-block),
main:has(.awards-animated-block) {
    max-width: none !important;
    overflow-x: visible !important;
}

/* Fallback for browsers without :has() support */
.awards-animated-block {
    max-width: 100vw !important;
}

/* Awards headline - inline-block, gradient #986FFF (0%) → #FF74F3 (100%); match resources-headline responsiveness */
.awards-headline {
    display: inline-block;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    background: linear-gradient(to right, #986FFF 0%, #FF74F3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (min-width: 768px) {
    .awards-headline {
        font-size: 24px;
        line-height: 36px;
    }
}

@media (min-width: 1024px) {
    .awards-headline {
        font-size: 30px;
        line-height: 47px;
    }
}

/* Awards subheader - white, 24px font, 162% line height */
.awards-subheader {
    font-size: 20px;
    line-height: 162%;
}

@media (min-width: 768px) {
    .awards-subheader {
        font-size: 22px;
        line-height: 162%;
    }
}

@media (min-width: 1024px) {
    .awards-subheader {
        font-size: 24px;
        line-height: 162%;
    }
}

/* Awards cluster container */
.awards-cluster {
    min-height: 400px;
    position: relative;
}

/* Award item styling */
.award-item {
    opacity: 0;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
    will-change: transform, opacity;
}

.award-item.visible {
    opacity: 1;
}

/* Small award hover effect */
.small-award:hover {
    transform: translate(-50%, -50%) scale(1.15) !important;
    filter: drop-shadow(0 10px 20px rgba(255, 75, 240, 0.5));
    z-index: 20 !important;
}

/* Big award hover effect */
.big-award:hover {
    transform: translate(-50%, -50%) scale(1.1) !important;
    filter: drop-shadow(0 10px 20px rgba(255, 75, 240, 0.5));
    z-index: 15 !important;
}

/* Award image wrapper */
.award-image-wrapper {
    width: 100%;
    height: auto;
    position: relative;
}

.award-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Award image (box-shadow and border-radius set inline via PHP) */
.award-image {
    position: relative;
    z-index: 10;
}

/* Fixed sizes for smaller awards to prevent overlap */
.small-award {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Base size will be set inline via PHP, but we'll use 80px as base */
}

.small-award-image {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.small-award-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Text content transitions */
.awards-text-content {
    position: relative;
    min-height: 150px;
}

.awards-text-default,
.awards-text-hover {
    transition: opacity 0.5s ease-in-out;
    width: 100%;
}

.awards-text-default {
    opacity: 1;
}

.awards-text-hover {
    opacity: 0;
    pointer-events: none;
}

/* Ensure hover text matches default text styling exactly */
.awards-text-hover .awards-headline,
.awards-text-hover .awards-subheader {
    width: 100%;
    max-width: 100%;
}

.awards-text-hover .awards-hover-title,
.awards-text-hover .awards-hover-subtitle {
    display: block;
    width: 100%;
}

/* Stacked layout and static image (below 1024px) */
@media (max-width: 1023px) {
    /* Show static mobile image between 640px–1023px (see below for <640px) */
    .awards-static-mobile-image {
        display: block !important;
        width: 100%;
    }
    
    .awards-cluster,
    .concentric-circles-bg {
        display: none !important;
    }
    
    /* Center and stack text above image */
    .awards-animated-section > .max-w-content > .flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .awards-animated-section .w-full.lg\:w-1\/2 {
        width: 100%;
        text-align: center;
    }
    
    /* Disable hover effects on mobile */
    .award-item {
        pointer-events: none;
    }
    
    /* Ensure text content is centered on mobile */
    .awards-text-content {
        text-align: center;
        width: 100%;
    }
}

/* Smobile layout: hide static image, show mobile_image + 3-col small awards grid (<640px) */
.awards-smobile-layout {
    display: none;
}

@media (max-width: 639px) {
    .awards-static-mobile-image {
        display: none !important;
    }
    
    .awards-smobile-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    /* mobile_image: max-width/center/gradient/radius set inline; overflow clips img to radius */
    .awards-mobile-image {
        width: 100%;
        overflow: hidden;
    }
    
    .awards-mobile-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    
    /* 3-column grid of small awards, no gradients */
    .awards-smobile-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        width: 100%;
        max-width: 100%;
    }
    
    .awards-smobile-grid-item {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
        padding: 0.5rem;
        box-sizing: border-box;
    }
    
    .awards-smobile-grid-item .awards-smobile-grid-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}