/* Card Section Styles */
.card-section-container {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.card-section-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 32px;
    /* Increased spacing between title and subtitle */
    color: #111;
    line-height: 1.3;
    letter-spacing: -0.02em;

    /* Animation Init - DISABLED for visibility safety */
    /* opacity: 0; */
    /* transform: translateY(30px); */
    transition: all 0.8s ease-out;
}

.card-section-desc {
    font-size: 18px;
    /* Slightly larger for better readability */
    color: #666;
    margin-bottom: 60px;
    /* Reduced from 100px for better grouping */
    line-height: 1.6;
    word-break: keep-all;
    padding: 0;
    /* Removed padding */

    /* Animation Init - DISABLED */
    /* opacity: 0; */
    /* transform: translateY(30px); */
    transition: all 0.8s ease-out;
}

@media (max-width: 768px) {
    .card-section-container {
        padding: 60px 20px;
    }

    .card-section-title {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .card-section-desc {
        font-size: 15px;
        margin-bottom: 40px;
    }
}

.card-section-title.visible,
.card-section-desc.visible {
    opacity: 1;
    transform: translateY(0);
}

.cards-wrapper {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.trendy-card {
    position: relative;
    width: 300px;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: #fff;

    /* Animation Init - DISABLED for visibility safety */
    /* opacity: 0; */
    /* transform: translateY(50px); */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.trendy-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.trendy-card:nth-child(2) {
    transition-delay: 0.2s;
}

.trendy-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Ensure hover doesn't fight with the visible state transform too much, 
   but hover usually happens after visible. 
   We need to coordinate transforms. 
   Ideally, animation sets to translateY(0), then hover sets to translateY(-10px).
   Since transition covers 'all', it should work. 
*/
.trendy-card.visible:hover {
    transform: translateY(-10px) scale(1.02);
}

.card-image-placeholder {
    width: 100%;
    height: 60%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

/* Gradients for placeholders until user provides images */
.card-image-placeholder.academy {
    background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
}

.card-image-placeholder.office {
    background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}

.trendy-card:hover .card-image-placeholder {
    transform: scale(1.1);
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-align: left;
    transform: translateY(0);
    transition: transform 0.4s ease;
}

.card-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.card-text {
    font-size: 0.95rem;
    color: #666;
    opacity: 0.8;
}

.card-arrow {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    background: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.trendy-card:hover .card-arrow {
    transform: translateX(5px);
}