/* --- CATEGORY GRID (CORE EXPERIENCE) --- */
.destinations-grid-section {
    padding: 0 0 120px 0;
}

.destination-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
}

/* The Card */
.destination-card {
    position: relative;
    display: block;
    min-height: 450px; 
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    transform: translateZ(0); /* Hardware acceleration */
}

.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}

.card-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Start with a lower gradient so the title is clear */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(13,148,136,0.05) 70%, rgba(0,0,0,0.8) 100%);
    z-index: 2;
    transition: background 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 32px;
    z-index: 3;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Forces content to the bottom */
}

/* --- THE MAGIC UN-FOLDING ELEMENTS --- */

.card-title {
    font-size: 2rem;
    font-weight: 400;
    margin: 0; /* Margin removed so titles sit flush against the bottom */
    transition: margin 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    color: #ffffff;
}

.card-desc {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    
    /* Hide State */
    opacity: 0;
    max-height: 0; /* Collapses the space */
    margin: 0; 
    overflow: hidden; /* Prevents text bleeding while collapsed */
    transform: translateY(20px);
    
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-yellow, #facc15);
    
    /* Hide State */
    opacity: 0;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    transform: translateY(20px);
    
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- HOVER INTERACTIONS --- */

.destination-card:hover .card-bg {
    transform: scale(1.08);
}

.destination-card:hover .card-gradient-overlay {
    /* Pushes the dark gradient higher to make the revealed text readable */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(13,148,136,0.4) 50%, rgba(0,0,0,0.95) 100%);
}

.destination-card:hover .card-title {
    margin-bottom: 12px; /* Creates space between title and new description */
}

.destination-card:hover .card-desc {
    opacity: 0.9;
    max-height: 150px; /* Expands to fit the paragraph */
    margin-bottom: 24px;
    transform: translateY(0);
}

.destination-card:hover .card-cta {
    opacity: 1;
    max-height: 50px;
    transform: translateY(0);
    transition-delay: 0.1s; /* Slight delay for a cascading "unfold" effect */
}

/* Glassmorphism glow on hover */
.destination-card:hover {
    box-shadow: 0 20px 40px rgba(13, 148, 136, 0.15);
}