/*
Experience cards — full-bleed "poster" style (distinct from the standard
.ww-card used elsewhere: experiences are visual/adventure-led, so the
image carries the whole card instead of sitting above a text block).
*/

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

.ww-experience-card{
    position:relative;
    width:100%;
    min-height:520px;
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:#fff;
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition), box-shadow var(--transition);
}

.ww-experience-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
}

.ww-experience-card .ww-card-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.ww-experience-card .ww-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s var(--ease);
}

.ww-experience-card:hover .ww-card-image img{
    transform:scale(1.06);
}

.ww-experience-card .ww-card-content{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:32px;
    background:linear-gradient(
        to top,
        rgba(10,14,18,.9) 0%,
        rgba(10,14,18,.5) 45%,
        rgba(10,14,18,.05) 100%
    );
}

.ww-experience-card h3{
    font-size:32px;
    line-height:1.15;
    margin:0 0 12px;
    color:#fff;
    word-break:normal;
    overflow-wrap:break-word;
}

.ww-experience-card .ww-card-content p{
    color:rgba(255,255,255,.9);
    font-size:16px;
    line-height:1.6;
    margin-bottom:14px;
}

.ww-experience-card .ww-card-meta{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin:16px 0;
    color:rgba(255,255,255,.92);
    font-size:14px;
    font-weight:600;
}

.ww-experience-card .ww-location{
    color:rgba(255,255,255,.92);
}

.ww-experience-card .ww-card-link{
    color:#fff;
    font-weight:700;
    font-size:16px;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

@media(max-width:768px){

    .ww-experience-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .ww-experience-card{
        min-height:440px;
    }

    .ww-experience-card .ww-card-content{
        padding:24px;
    }

    .ww-experience-card h3{
        font-size:26px;
    }
}