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

.card-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #FF6B6B 0%, #556270 100%);
    background: linear-gradient(to right, #333, #000);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #333;

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

.card-section-desc {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 100px;
    /* Increased from 60px */
    line-height: 1.6;
    word-break: keep-all;
    padding: 0 5%;
    /* Prevent edge touching */

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

@media (max-width: 480px) {
    .card-section-desc {
        font-size: 0.9rem;
        /* Smaller font on mobile */
    }

    .card-section-title {
        font-size: 1.8rem;
    }
}

.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);
}