/* ======================= */
/* Card Container & Layout */
/* ======================= */
.card-container {
    display: flex;
    gap: 20px;
    width: 97%;
    max-width: 97%;
    flex-wrap: wrap;
}

/* ======================= */
/* Individual Card Styling */
/* ======================= */
.card {
    background-color: #fff;
    border-radius: 10px;
    height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: width 0.5s ease, filter 0.3s ease;
    flex: 0 0 25%;
    cursor: pointer;
}

/* ======================= */
/* Background Image Blur & Overlay */
/* ======================= */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    filter: blur(5px);
    z-index: 0;
    transition: filter 0.3s ease;
}

.card::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 30%, transparent 70%, rgba(0,0,0,0.6));
    z-index: 1;
    /* transition: background 0.5s ease, height 0.5s ease; */
}

/* Hover effect overlay */
.card:hover::after {
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    height: 50%;
}

/* Non-hovered cards blur effect */
.card-container:hover .card:not(:hover)::after {
    height: 100%;
}

/* ======================= */
/* Card Titles & Description */
/* ======================= */
.testitle {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: white;
    position: absolute;
    top: 30px;
    left: 20px;
    right: 20px;
    z-index: 2;
    transition: all 0.5s ease;
}

.tes-subtext {
    font-size: 14px;
    color: white;
    position: absolute;
    bottom: 60px; /* 30px above description */
    left: 20px;
    right: 20px;
    z-index: 2;
    margin: 0;
    transition: all 0.5s ease;
}

/* Optional: move subtext down on hover (if you want an animation) */
.card:hover .tes-subtext {
    bottom: 80px; /* adjust as needed */
    display: none;

}



.tesdis {
    font-size: 14px;
    line-height: 1.5;
    color: white;
    margin: 0;
    position: absolute;
    bottom: 30px;
    left: 20px;
    right: 20px;
    z-index: 2;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s ease;
}

/* Hover effects for title/description */
.card:hover .testitle {
    top: auto;
    bottom: 30px;
}

.card:hover .tesdis {
    opacity: 0;
    transform: translateY(20px);
}

.card-container:hover .card:not(:hover) .testitle {
    top: 30px;
    bottom: auto;
}

.card-container:hover .card:not(:hover) .tesdis {
    opacity: 1;
    transform: translateY(0);
}

/* Remove special no-blur for card-1 */
.card-1::before { /* remove filter: none; */ }

/* Apply blur to all non-hovered cards */
.card-container:hover .card:not(:hover)::before {
    filter: blur(5px);
}

/* Apply overlay height effect */
.card-container:hover .card:not(:hover)::after {
    height: 100%;
}

/* Hovered card */
.card:hover::before {
    filter: none;
}
.card:hover::after {
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    height: 50%;
}



/* Modal */
.hcp-modal { display:none; position:fixed; z-index:999; padding-top:60px; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.8);}
.hcp-modal-content { margin:auto; background:#000000; max-width:700px; border-radius:10px; position:relative; padding:0; }
.hcp-close { position:absolute; top:10px; right:20px; color:#000; font-size:30px; font-weight:bold; cursor:pointer;}
.hcp-video-wrapper iframe, .hcp-video-wrapper video { width:100%; height:400px; border:none; border-radius:10px 10px 0 0; }
/* ======================= */
/* Card Specific Defaults */
/* ======================= */

.card-1 { flex: 0 0 46%;  transition: flex 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s ease; }
.card-1::before { filter: none; }
.card-2::before, .card-3::before { filter: blur(5px); }

.card-container:hover .card:not(:hover) { flex: 0 0 25%; }
.card-1:hover, .card-2:hover, .card-3:hover { flex: 0 0 46%;  }
.card-1:hover::before, .card-2:hover::before, .card-3:hover::before { filter: none; }



/* Default active first card */
.card-1 .testitle {
    top: auto;
    bottom: 30px; /* same as hovered title */
}

.card-1 .tesdis {
    opacity: 0;
    transform: translateY(20px); /* hide description */
}

.card-1 .tes-subtext {
    display: none; /* hide subtext for default card */
}

/* Ensure other hover/blur effects still work */
.card-1::before {
    filter: none; /* keep background sharp like hovered */
}

.card-1:hover .tesdis {
    opacity: 0;
    transform: translateY(20px); /* hover still hides description */
}

.card-1:hover .testitle {
    bottom: 30px; /* stays at bottom */
}

/* ======================= */
/* Modal Styling */
/* ======================= */
/* Modal overlay */

.hcp-modal {
    display: none; /* must be hidden by default */
}


/* Stop overlay click from closing modal when clicking inside content */
.hcp-modal-content {
    pointer-events: auto;
}

/* ======================= */
/* Admin Card Form Styling */
/* ======================= */
.hcp-card-item {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
}

.hcp-card-item input {
    width: 100%;
    margin-bottom: 5px;
}

/* ======================= */
/* Responsive */
@media screen and (max-width: 768px){
    .card { flex: 0 0 100%; height: auto; }
    .card-container { gap: 10px; }
}