/* =============================================
   Resource Tool Card - Hover Overlay Effect
   ============================================= */

.wpe-resource-tool {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background-color: #ffffff;
    cursor: pointer;
    height: 100%;
}

/* Image */
.wpe-resource-tool__image {
    overflow: hidden;
}

.wpe-resource-tool__image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

/* Default content (title + category below image) */
.wpe-resource-tool__default {
    background: #fff;
}

/* Overlay */
.wpe-resource-tool__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00594c;
    color: #ffffff;
    transform: scale(0);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10;
    border-radius: 10px;
    box-sizing: border-box;
}

.wpe-resource-tool__overlay-title {
    color: #ffffff !important;
    font-size: 1.4rem;
    line-height: 1.3;
}

.wpe-resource-tool__overlay-desc,
.wpe-resource-tool__overlay-desc * {
    color: #ffffffcc;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Button in overlay */
.wpe-resource-tool__btn .wp-block-button__link {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.wpe-resource-tool__btn .wp-block-button__link:hover {
    background-color: #e0e0e0 !important;
}

/* ── Hover State ── */
.wpe-resource-tool:hover .wpe-resource-tool__overlay {
    transform: scale(1);
}

.wpe-resource-tool:hover .wpe-resource-tool__image img {
    transform: scale(1.05);
}

/* ── Touch device support ── */
@media (hover: none) {
    .wpe-resource-tool.is-touched .wpe-resource-tool__overlay {
        transform: scale(1);
    }

    .wpe-resource-tool.is-touched .wpe-resource-tool__image img {
        transform: scale(1.05);
    }
}