/* =====================================================
   Swiss Mountains - Featured Hiking v3.0
   Optimiert für Full HD (1920x1080)
===================================================== */

.sm-featured-wrapper{
    position:relative;
    z-index:1;
}
.sm-featured-hiking{

    display:grid;
    grid-template-columns:300px 1fr;
    gap:32px;
    align-items:start;

    margin:35px 0;

    position:relative;
    z-index:1;

    background:#f3f5f7;
    padding:24px;
    border-radius:24px;

    border:none;
    box-shadow:none;

}

/* ======================================
   Sidebar
====================================== */

.sm-hiking-sidebar{

    position:sticky;
    top:24px;

    z-index:50;

    background:var(--sm-bg);

    border-radius:var(--sm-radius-md);

    overflow:hidden;

    box-shadow:var(--sm-shadow-md);

}

.sm-hiking-sidebar h2{

    margin:0;

    padding:24px;

    background:var(--sm-primary);

    color:#fff;

    font-size:26px;

    font-weight:700;

    line-height:1.25;

}

.sm-trail-list{

    margin:0;

    padding:0;

    list-style:none;

    position:relative;

    z-index:51;

}

.sm-trail-item{

    position:relative;

    z-index:52;

    padding:20px 24px;

    cursor:pointer;

    pointer-events:auto;

    user-select:none;

    border-bottom:1px solid var(--sm-border);

    transition:
        background .25s,
        padding-left .25s,
        color .25s;

    font-size:17px;

    font-weight:600;

}

.sm-trail-item:last-child{

    border-bottom:none;

}

.sm-trail-item:hover{

    background:#f5f8fb;

    padding-left:32px;

}

.sm-trail-item.active{

    background:#e8f1fb;

    color:var(--sm-primary);

    border-left:5px solid var(--sm-secondary);

}
/* ======================================
   Detailbereich
====================================== */

.sm-hiking-detail{

    position:relative;
    z-index:1;

    background:var(--sm-bg);

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--sm-shadow-lg);

}

.sm-hiking-image{

    overflow:hidden;

}

.sm-hiking-image img{

    width:100%;

    aspect-ratio:16/7;

    max-height:420px;

    object-fit:cover;

    display:block;

    transition:
        transform .45s ease,
        opacity .25s ease;

}

.sm-hiking-detail:hover .sm-hiking-image img{

    transform:scale(1.02);

}

.sm-hiking-content{

    padding:32px;

}

.sm-hiking-content h2{

    margin:0 0 8px;

    font-size:40px;

    line-height:1.15;

    color:var(--sm-text);

    transition:opacity .25s;

}

.sm-destination{

    color:var(--sm-text-light);

    font-size:17px;

    margin-bottom:24px;

}

/* ======================================
   Meta Cards
====================================== */

.sm-meta{

    display:grid;

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

    gap:16px;

    margin-bottom:24px;

}

.sm-meta-card{

    background:var(--sm-bg-light);

    border:1px solid var(--sm-border);

    border-radius:14px;

    padding:18px;

    transition:
        transform .25s,
        box-shadow .25s;

}

.sm-meta-card:hover{

    transform:translateY(-2px);

    box-shadow:var(--sm-shadow-sm);

}

.sm-label{

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#7b8794;

    margin-bottom:6px;

}

.sm-meta-card div:last-child{

    font-size:19px;

    font-weight:700;

    color:var(--sm-text);

}

/* ======================================
   Description
====================================== */

.sm-description{

    font-size:17px;

    line-height:1.75;

    color:#4a5565;

    margin-bottom:28px;

    transition:opacity .25s;

}

/* ======================================
   Button
====================================== */

.sm-button{

    display:inline-flex;

}
/* =====================================================
   Tablet
===================================================== */

@media (max-width:991px){

    .sm-featured-hiking{

        display:flex;
        flex-direction:column;

        gap:24px;

        margin:30px 0;

    }

    .sm-hiking-sidebar{

        position:relative;

        top:auto;

        width:100%;

    }

    .sm-hiking-detail{

        width:100%;

    }

    .sm-hiking-image img{

        aspect-ratio:16/9;

        max-height:none;

    }

    .sm-hiking-content{

        padding:28px;

    }

    .sm-hiking-content h2{

        font-size:36px;

    }

    .sm-meta{

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

    }

}

/* =====================================================
   Mobile
===================================================== */

@media (max-width:768px){

    .sm-featured-hiking{
        margin:16px 0;
        gap:16px;
    }

    .sm-hiking-sidebar{
        border-radius:16px;
    }

    .sm-hiking-sidebar h2{
        font-size:22px;
        padding:18px 20px;
    }

    .sm-trail-item{
        padding:16px 20px;
        font-size:16px;
    }

    .sm-trail-item:hover{
        padding-left:24px;
    }

    .sm-hiking-detail{
        border-radius:16px;
    }

    .sm-hiking-image img{
        aspect-ratio:16/9;
    }

    .sm-hiking-content{
        padding:16px;
    }

    .sm-hiking-content h2{
        font-size:30px;
        line-height:1.1;
        margin:0 0 4px;
    }

    .sm-destination{
        font-size:16px;
        margin-bottom:12px;
    }

    .sm-meta{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:10px;
        margin-bottom:16px;
    }

    .sm-meta-card{
        padding:14px 16px;
        border-radius:12px;
    }

    /* Difficulty über beide Spalten */

    .sm-meta-card:last-child{
        grid-column:1 / -1;
    }

    .sm-label{
        font-size:11px;
        margin-bottom:4px;
    }

    .sm-meta-card div:last-child{
        font-size:18px;
    }

    .sm-description{
        font-size:16px;
        line-height:1.6;
        margin-bottom:18px;
    }

    .sm-button{
        display:flex;
        width:100%;
        justify-content:center;
    }

}
/* =====================================================
   Small Mobile
===================================================== */

@media (max-width:480px){

    .sm-hiking-sidebar h2{
        font-size:20px;
    }

    .sm-trail-item{
        font-size:15px;
        padding:15px 18px;
    }

    .sm-hiking-content{
        padding:14px;
    }

    .sm-hiking-content h2{
        font-size:26px;
    }

    .sm-destination{
        font-size:15px;
    }

    .sm-meta{
        grid-template-columns:1fr;
    }

    .sm-meta-card:last-child{
        grid-column:auto;
    }

    .sm-description{
        font-size:15px;
        line-height:1.55;
    }

}
/* ======================================
   Mobile Sidebar Toggle
====================================== */

.sm-sidebar-toggle{
    display:none;
}

@media (max-width:768px){

    .sm-sidebar-toggle{

        width:100%;

        display:flex;

        justify-content:space-between;

        align-items:center;

        padding:16px 20px;

        margin-bottom:12px;

        background:var(--sm-primary);

        color:#fff;

        border:none;

        border-radius:16px;

        font-size:18px;

        font-weight:700;

        cursor:pointer;

    }

    .sm-toggle-icon{

        transition:transform .3s ease;

    }

    .sm-sidebar-toggle.active .sm-toggle-icon{

        transform:rotate(180deg);

    }

    .sm-hiking-sidebar{

        display:block;

        overflow:hidden;

        max-height:0;

        opacity:0;

        transition:
            max-height .35s ease,
            opacity .25s ease;

        margin-bottom:0;

    }

    .sm-hiking-sidebar.open{

        max-height:800px;

        opacity:1;

        margin-bottom:20px;

    }

    .sm-hiking-sidebar h2{

        display:none;

    }

}