/* ==========================================================
   SINGLE ARTISTE
========================================================== */

.single-artiste {
    background: #fff;
}

.single-artiste .container {
    width: min(1200px, 92%);
    margin: 0 auto;
}

/* ==========================================================
   HERO
========================================================== */

.single-artiste-hero {
    position: relative;
    min-height: 550px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--fisel-teal-dark) 0%,
        var(--fisel-teal) 100%
    );
}

.single-artiste-hero-image {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.single-artiste-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .45;
}

.single-artiste-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.25) 0%,
        rgba(0,0,0,.80) 100%
    );
}

.single-artiste-hero-content {
    position: relative;
    z-index: 3;
    color: #fff;
    padding: 130px 0 70px;
}

.single-artiste-kicker {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--fisel-yellow);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .85rem;
}

.single-artiste-hero h1 {
    color: #fff;
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: .95;
    margin: 0;
}

/* ==========================================================
   BODY
========================================================== */

.single-artiste-body {
    padding: 90px 0 120px;
    background: linear-gradient(
        180deg,
        #fff 0%,
        var(--fisel-light) 100%
    );
}

.single-artiste-layout {
    display: block;
}

.single-artiste-section {
    margin-bottom: 80px;
}

.single-artiste-section h2 {

    position: relative;

    color: var(--fisel-teal-dark);

    font-size: clamp(2rem,4vw,2.8rem);

    margin-bottom: 35px;

}

.single-artiste-section h2::before {

    content:"";

    display:block;

    width:50px;

    height:4px;

    border-radius:999px;

    margin-bottom:16px;

    background:var(--fisel-orange);

}

.single-artiste-text {

    max-width:850px;

    font-size:1.1rem;

    color:#444;

    line-height:1.9;

}

.single-artiste-text p{

    margin-bottom:1.5em;

}

/* ==========================================================
   EVENEMENTS
========================================================== */

.single-artiste-events-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.single-artiste-event-card{

    display:flex;

    flex-direction:column;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s ease;

}

.single-artiste-event-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 55px rgba(0,0,0,.15);

}

.single-artiste-event-image{

    display:block;

    overflow:hidden;

}

.single-artiste-event-image img{

    width:100%;

    height:230px;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.single-artiste-event-card:hover img{

    transform:scale(1.05);

}

.single-artiste-event-content{

    padding:26px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.single-artiste-event-date{

    color:var(--fisel-orange);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.05em;

    font-size:.9rem;

    margin-bottom:12px;

}

.single-artiste-event-content h3{

    margin:0 0 16px;

    line-height:1.3;

    font-size:1.45rem;

}

.single-artiste-event-content h3 a{

    color:var(--fisel-teal-dark);

    text-decoration:none;

}

.single-artiste-event-content h3 a:hover{

    color:var(--fisel-orange);

}

.single-artiste-event-content p{

    color:#666;

    margin-bottom:26px;

    flex:1;

}

.single-artiste-event-button{

    align-self:flex-start;

    padding:13px 24px;

    border-radius:999px;

    background:var(--fisel-teal);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.single-artiste-event-button:hover{

    background:var(--fisel-orange);

    transform:translateX(4px);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1024px){

    .single-artiste-events-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .single-artiste-hero{

        min-height:460px;

    }

    .single-artiste-hero-content{

        padding:100px 0 50px;

    }

    .single-artiste-body{

        padding:60px 0 80px;

    }

    .single-artiste-events-grid{

        grid-template-columns:1fr;

    }

    .single-artiste-event-image img{

        height:220px;

    }

}