/* WRAPPER */
.hack2-wrapper {
    display: flex;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
}

/* BASE CARD */
.hack2-card {
    flex: 1;
    background: #ffffff;
    color: #000;
    cursor: pointer;
    transition:
        flex 0.5s ease,
        background 0.4s ease,
        color 0.4s ease;
    border-right: 1px solid #eee;
    display: flex;
}

.hack2-card:last-child {
    border-right: none;
}

/* INNER */
.card-inner {
    padding: 35px 25px;
    width: 100%;
}

/* ICON */
.card-icon {
    width: 60px;
    height: 60px;
    /*background: #f4a261;*/
    /*color: #000;*/
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 24px;
    transition: all 0.4s ease;
}
/*CARD ICON DEFAULT*/
/* RED */
.hack2-card.red .card-icon {
    background: #e76f51;
    color: #ffd6cc;
}

/* ORANGE */
.hack2-card.orange .card-icon {
    background: #f4a261;
    color: #ffe0c2;
}

/* YELLOW */
.hack2-card.yellow .card-icon {
    background: #e9c46a;
    color: #fff4cc;
}

/* GREEN */
.hack2-card.green .card-icon {
    background: #2a9d8f;
    color: #c8f3ee;
}

/* BLUE */
.hack2-card.blue .card-icon {
    background: #457b9d;
    color: #d6eaff;
}

/* INDIGO */
.hack2-card.indigo .card-icon {
    background: #3a0ca3;
    color: #dcd3ff;
}

/* VIOLET */
.hack2-card.violet .card-icon {
    background: #7209b7;
    color: #f0d9ff;
}

.hack2-card:hover .card-icon {
    background: #ffffff;
    color: #000000;
    transform: scale(1.1);
}
.hack2-card.active .card-icon {
    background: #ffffff;
    color: #000000;
}
/* TITLE */
.card-title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
}

/* DESCRIPTION ALWAYS VISIBLE */
.card-desc {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* DEFAULT ACTIVE */
.hack2-card.active {
    flex: 3;
    color: #fff;
}

/* HOVER EXPAND */
.hack2-wrapper:hover .hack2-card {
    flex: 1.2;
}

.hack2-wrapper .hack2-card:hover {
    flex: 2.8;
}

/* ICON COLOR CHANGE WHEN ACTIVE */
/*.hack2-card.active .card-icon {*/
/*    background: rgba(255, 255, 255, 0.2);*/
/*    color: #fff;*/
/*}*/

/* Update inner card to use flexbox so we can anchor the image to the bottom */
.card-inner {
    padding: 35px 25px;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensures it takes up the full 400px of the wrapper */
}

/* Push the image to the bottom of the card */
.card-desc {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
    flex-grow: 1; /* This takes up empty space, pushing the image down */
}

/* IMAGE WRAPPER - Visible by default (Collapsed state) */
.card-img-wrapper {
    width: 100%;
    height: 200px;
    margin-top: 10px; 
    border-radius: 8px;
    overflow: hidden;
    
    /* HIDDEN BY DEFAULT */
    opacity: 0; 
    visibility: hidden;
    
    /* FADE OUT: When mouse leaves, hide instantly (0s delay) 
       so it vanishes before the card starts shrinking. */
    transition: opacity 0.1s ease 0s, visibility 0s linear 0.1s;
}

/* Ensure the image doesn't stretch or distort when the card is narrow */
.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius:20%;
}

/* HIDE IMAGE WHEN EXPANDED (Active or Hovered) */
.hack2-card.active .card-img-wrapper,
.hack2-wrapper:hover .hack2-card:hover .card-img-wrapper {
    /* VISIBLE WHEN EXPANDED */
    opacity: 1;
    visibility: visible;
    
    /* FADE IN: Wait 0.3s for the card to mostly finish expanding 
       before fading the image in smoothly. */
    transition: opacity 0.4s ease 0.3s, visibility 0s linear 0.3s;
}


/* COLORS ONLY WHEN ACTIVE */
.hack2-card.red.active {
    background: #ffd3d3; /* Light pastel red/coral */
    color: #1e293b; /* Dark slate for readability */
}
.hack2-card.orange.active {
    background: #ffe5c4; /* Soft peach/orange */
    color: #1e293b;
}
.hack2-card.yellow.active {
    background: #fff1b8; /* Pale, warm yellow */
    color: #1e293b; 
}
.hack2-card.green.active {
    background: #cbf0dd; /* Light mint/teal */
    color: #1e293b;
}
.hack2-card.blue.active {
    background: #d0e8ff; /* Soft sky blue */
    color: #1e293b;
}
.hack2-card.indigo.active {
    background: #dcd3ff; /* Pale indigo/periwinkle */
    color: #1e293b;
}
.hack2-card.violet.active {
    background: #ebd4ff; /* Light lavender/violet */
    color: #1e293b;
}
/* ============================= */
/* MOBILE VERSION - VIBGYOR MODE */
/* ============================= */

/* ============================= */
/* MOBILE VERSION - BELOW 992px  */
/* ============================= */
@media (max-width: 992px) {
    .hack2-wrapper {
        flex-direction: column;
        height: auto;
        border-radius: 16px;
        gap: 0;
    }

    /* COLLAPSED STATE — always visible, just compact */
    .hack2-card {
        flex: none;
        height: 80px;           /* collapsed height — shows icon + title */
        overflow: hidden;
        transition: height 0.4s ease, background 0.4s ease, color 0.4s ease;
        border-right: none;
        border-bottom: 1px solid #eee;
    }

    .hack2-card:last-child {
        border-bottom: none;
    }

    /* EXPANDED STATE */
    .hack2-card.active {
        height: 420px;          /* enough room for text + image */
    }

    /* Keep inner layout intact */
    .card-inner {
        padding: 16px 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Icon smaller on mobile */
    .card-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
        margin-bottom: 10px;
    }

    /* Title compact */
    .card-title {
        font-size: 15px;
        margin-bottom: 8px;
    }

    /* Description hidden when collapsed, shown when active */
    .card-desc {
        font-size: 13px;
        display: none;
        flex-grow: 1;
    }

    .hack2-card.active .card-desc {
        display: block;
    }

    /* Image */
    .hack2-card .card-img-wrapper {
        height: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease 0.2s, visibility 0s linear 0.3s;
    }

    .hack2-card.active .card-img-wrapper {
        height: 150px;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.4s ease 0.3s, visibility 0s linear 0.3s;
    }

    /* Collapsed card — show icon + title in a row */
    .card-inner {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    /* Expanded card — switch back to column */
    .hack2-card.active .card-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Icon no margin in row layout */
    .hack2-card:not(.active) .card-icon {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    /* Title takes remaining space in row layout */
    .hack2-card:not(.active) .card-title {
        margin-bottom: 0;
        flex: 1;
    }

    /* Disable desktop hover expand on mobile */
    .hack2-wrapper:hover .hack2-card {
        flex: none;
    }

    .hack2-wrapper .hack2-card:hover {
        flex: none;
    }
}

@media (max-width: 480px) {
    .hack2-card.active {
        height: 440px;
    }

    .card-title {
        font-size: 14px;
    }
}