/**
 * Category Item Component Styles
 *
 * This CSS is loaded ONCE globally, even if multiple category items are rendered.
 *
 * @package HelloElementorChild
 */

.item-category {
    position       : relative;
    overflow       : hidden;
    display        : flex;
    flex-direction : column;
    transition     : transform 0.3s ease, box-shadow 0.3s ease;
    border-radius  : 15px;
}

.item-category:hover {
    transform  : translateY(-4px);
    box-shadow : 0 8px 24px rgba(0, 0, 0, 0.15);
}

.item-category__link {
    color           : inherit;
    text-decoration : none;
    position        : relative;
    display         : block;
    width           : 100%;
    height          : 100%;
}

.item-category__image-wrapper {
    position      : relative;
    overflow      : hidden;
    width         : 100%;
    padding-top   : 100%; /* 1:1 aspect ratio */
    border-radius : 15px;
}

.item-category__image-container {
    position      : absolute;
    overflow      : hidden;
    border-radius : 15px;
    inset         : 0;
}

.item-category__image {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100% !important;
    transition : transform 0.3s ease;
    object-fit : cover;
}

.item-category:hover .item-category__image {
    transform : scale(1.05);
}

.item-category__overlay {
    position       : absolute;
    transition     : background 0.3s ease;
    pointer-events : none;
    border-radius  : 15px;
    background     : rgba(0, 0, 0, 0.5);
    inset          : 0;
}

.item-category:hover .item-category__overlay {
    background : rgba(0, 0, 0, 0.4);
}

.item-category__title {
    font-family    : 'Satisfy', cursive, sans-serif;
    font-size      : 35px;
    font-weight    : 400;
    line-height    : 50px;
    color          : #FFFFFF;
    text-align     : center;
    white-space    : nowrap;
    position       : absolute;
    top            : 50%;
    left           : 50%;
    transform      : translate(-50%, -50%);
    margin         : 0;
    transition     : transform 0.3s ease, text-shadow 0.3s ease;
    pointer-events : none;
    text-shadow    : 0 2px 8px rgba(0, 0, 0, 0.3);
}

.item-category:hover .item-category__title {
    transform   : translate(-50%, -50%) scale(1.05);
    text-shadow : 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Responsive styles */
@media (max-width : 1024px) {
    .item-category__title {
        font-size   : 30px;
        line-height : 42px;
    }
}

@media (max-width : 767px) {
    .item-category__image-wrapper {
        padding-top   : 0;
        height        : 180px;
        border-radius : 12px;
    }

    .item-category__image-container,
    .item-category__overlay {
        border-radius : 12px;
    }

    .item-category__title {
        font-size   : 24px;
        line-height : 36px;
    }
}

@media (max-width : 480px) {
    .item-category__image-wrapper {
        height : 180px;
    }

    .item-category__title {
        font-size   : 20px;
        line-height : 30px;
    }
}