/* Card Container - Absolute Positioning Strategy */
.module_column.reference-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    position: relative !important;
    isolation: isolate;
    transition: transform var(--reference-reveal-speed) var(--reference-reveal-easing) !important;
}

/* Desktop-Only Hover & Click/Active Interactions */
@media (min-width: 1025px) {
    .module_column.reference-card:hover,
    .module_column.reference-card.active {
        transform: translateY(-8px) !important;
        z-index: 50 !important;
    }
}

/* Image Module */
.reference-card-image {
    overflow: hidden !important;
}

.module_column.reference-card .reference-card-image img {
    width: 100% !important;
    height: var(--reference-card-height) !important;
    object-fit: cover !important;
    transition: transform var(--reference-reveal-speed) var(--reference-reveal-easing),
        filter var(--reference-reveal-speed) var(--reference-reveal-easing) !important;
    display: block !important;
    pointer-events: none !important;
    transform: scale(1.0);
}

@media (min-width: 1025px) {
    .module_column.reference-card:hover .reference-card-image img,
    .module_column.reference-card.active .reference-card-image img {
        transform: scale(1.1) !important;
        filter: brightness(1);
    }

    .module_column.reference-card-featured:hover .reference-card-image img,
    .module_column.reference-card-featured.active .reference-card-image img {
        filter: saturate(1.1) brightness(1.05) !important;
    }
}

/* Text Module / Content - The Absolute Layer */
@media (min-width: 1025px) {
    .module_column.reference-card .themify_builder_sub_row {
        position: absolute !important;
        top: var(--reference-card-height) !important;
        left: 0;
        right: 0;
        padding: 0 !important;
        z-index: auto !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
}

/* Hide description and buttons by default when not hovered/active (Desktop/Large Screens Only) */
@media (min-width: 1025px) {
    body:not(.themify_builder_active) .module_column.reference-card:not(:hover):not(.active) .module-text.reference-card-subtext-description,
    body:not(.themify_builder_active) .module_column.reference-card:not(:hover):not(.active) .module-buttons.reference-card-subtext-btn {
        max-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Base styles for transitions */
    .module_column.reference-card .module-text.reference-card-subtext-description,
    .module_column.reference-card .module-buttons.reference-card-subtext-btn {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all var(--reference-reveal-speed) var(--reference-reveal-easing) !important;
    }

    /* Reveal on hover or when active */
    .module_column.reference-card:hover .module-text.reference-card-subtext-description,
    .module_column.reference-card.active .module-text.reference-card-subtext-description {
        max-height: 250px !important;
        opacity: 1 !important;
    }

    .module_column.reference-card:hover .module-buttons.reference-card-subtext-btn,
    .module_column.reference-card.active .module-buttons.reference-card-subtext-btn {
        max-height: 150px !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
}

/* Link Styling & Animation */
.module_column.reference-card .reference-card-subtext-btn svg {
    transition: transform 0.3s ease !important;
}

.module_column.reference-card .reference-card-subtext-btn:hover svg,
.module_column.reference-card .reference-card-subtext-btn a:hover svg {
    transform: translateX(5px) !important;
}

/* =========================================
   Mobile & Tablet View (Touch Devices)
   Disables hover reveals and shows all content
   ========================================= */
@media (max-width: 1024px) {
    .module_column.reference-card {
        padding-bottom: 0 !important;
        transform: none !important;
        background: var(--reference-bg) !important;
        border: 1px solid var(--reference-outline) !important;
        border-radius: var(--reference-radius-top) var(--reference-radius-top) var(--reference-radius-bottom) var(--reference-radius-bottom) !important;
        box-shadow: var(--reference-shadow) !important;
        overflow: hidden !important;
        margin-bottom: 24px !important;
        isolation: auto !important;
    }

    .module_column.reference-card .themify_builder_sub_row {
        position: relative !important;
        top: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Disable Image zoom/scaling on mobile */
    .module_column.reference-card .reference-card-image img {
        transform: none !important;
        height: auto !important;
        min-height: 220px !important;
    }
}

/* =========================================
   Builder Accessibility Patch
   Ensures you can still click and edit in Themify
   ========================================= */
.themify_builder_active .module_column.reference-card {
    padding-bottom: 0 !important;
    transform: none !important;
    isolation: auto !important;
}

.themify_builder_active .module_column.reference-card .themify_builder_sub_row {
    position: relative !important;
    top: 0 !important;
    opacity: 1 !important;
    max-height: none !important;
    padding: 0 !important;
}

.themify_builder_active .module_column.reference-card .module-text.reference-card-subtext-description,
.themify_builder_active .module_column.reference-card .module-buttons.reference-card-subtext-btn {
    max-height: none !important;
    opacity: 1 !important;
    padding: 10px 0 !important;
}