/* =============================================
   Location Media Block
   ============================================= */
.piper_wp-block-acf-locationmedia{
    width: 100%;
    background: #006D8E url(../images/loc_mediaBG.png) 0 center no-repeat;
    background-size:cover;
}
.lm-block {
    --lm-teal: #4db8c8;
    --lm-teal-dark: #1a6d7c;
    --lm-blue-dark: #006D8E;
    --lm-tab-active: #B2D04C;
    --lm-text-light: #ffffff;
    --lm-text-muted: #cce8ee;
    --lm-radius: 10px;
    --lm-font-family: 'Open Sans Condensed', sans-serif;
}

/* --- Location tabs (top) --- */

.lm-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: transparent;
    padding: 0 2%;
    /*max-width:50%;*/
}

.lm-tab {
    background: #F3F7E0;
    color: var(--lm-blue-dark);
    border: none;
    border-radius: 0 0 var(--lm-radius) var(--lm-radius);
    padding: 10px 20px;
    font-family: var(--lm-font-family);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    text-align: center;
}

.lm-tab:hover {
    background: #B2D04C;
}

.lm-tab.is-active {
    background: var(--lm-tab-active);
}

/* --- Panel --- */

.lm-panel {
    display: none;
}

.lm-panel.is-active {
    display: block;
}

.lm-panel__inner {
    display: grid;
    grid-template-columns: 40% 1fr;
    min-height: 500px;
    opacity:0;
    transition:opacity .1s ease-in-out;
}
.lm-panel.lm-ready .lm-panel__inner {
    opacity:1;
}


/* --- Left content nav --- */

.lm-content-nav {
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
    gap: 0;
    padding: 2rem 2rem;
    /*background: var(--lm-teal);
    border-radius: 0 0 0 var(--lm-radius);*/
    position: relative;

}

.lm-content-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: none;
    color: var(--lm-text-light);
    padding: 14px 12px;
    cursor: pointer;
    text-align: left;
    border-radius: var(--lm-radius);
    transition: background 0.2s;
    width: 90%;
}


.lm-content-btn__label {
    font-family: var(--lm-font-family);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--lm-text-light);
}
.lm-content-btn:hover .lm-content-btn__label, .lm-content-btn.is-active .lm-content-btn__label {
    color: var(--lm-blue-dark);
    /*background: rgba(255,255,255,0.1);*/
}
/* Icons — circle with SVG inside */

.lm-content-btn__icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--lm-blue-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
    padding:5px;
}

.lm-content-btn__icon--gallery {
    background-color: var(--lm-blue-dark);
    background-image: url(../images/photo.svg);
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");*/
}

.lm-content-btn__icon--video {
    background-color: var(--lm-blue-dark);
    background-image: url(../images/play.svg);
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E");*/
}

.lm-content-btn__icon--360 {
    background-color: var(--lm-blue-dark);
    background-image: url(../images/360.svg);
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2z'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3Cpath d='M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42' stroke-width='1.5'/%3E%3C/svg%3E");*/
}

/* --- Right content area --- */

.lm-content-area {
    /*background: var(--lm-blue-dark);
    border-radius: 0 var(--lm-radius) var(--lm-radius) 0;*/
    overflow: hidden;
    padding:0 5%;
}

.lm-content {
    display: none;
    padding: 1.5rem;
}
.lm-content.opt3_content {padding: 50px 1.5rem;}

.lm-content.is-active {
    display: block;
}

/* --- Video embed --- */

.lm-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.lm-embed{padding-left:5%;padding-right:5%}

.lm-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.wonderplugingallery-container{max-width:90% !important}
/* --- Mobile --- */

@media ( max-width: 1024px ) {
    .lm-panel__inner {min-height: 400px;}
    .lm-content-nav {padding: 2rem 1rem;}
    .lm-content-btn {width: 100%;}
    .lm-content-area {;padding:0 2%;}
    .lm-embed{padding-left:0;padding-right:0}
    .lm-tabs {max-width:100%;grid-template-columns: repeat(4, 1fr);}

}

@media ( max-width: 768px ) {
    .piper_wp-block-acf-locationmedia{background: #69bdd1 url(../images/lm_bg_mob.png) 0 0 no-repeat;background-size:110%}
    .piper_wp-block-acf-locationmedia .wrap{width:100%}

    .lm-panel__inner {
        grid-template-columns: 1fr;
        min-height: 660px;
    }
    .lm-tabs {background:#e2edbb;padding-bottom:1px}
    .lm-content-area {padding:0;background: var(--lm-blue-dark);}
    .lm-content{padding:20px 20px 0;}
    .lm-content-nav {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 3rem;
        gap: 0;
        border-radius: 0;
    }

    .lm-content-btn {
        align-items: center;
        justify-content:flex-start;
        text-align: left;
        padding: 5px 10px;
        flex: 1;
        flex-basis:100%;
        min-width: 100px;
    }

    .lm-content-btn__icon {
        width: 60px;
        height: 60px;
        background-size: 40px 40px;
    }

    .lm-content-btn__label {
        font-size: 1.2rem;
    }

    /*.lm-content-area {
        border-radius: 0 0 var(--lm-radius) var(--lm-radius);
    }*/
    .lm-tabs {width:100%;grid-template-columns: repeat(3, 1fr);}
    .lm-tab {
        padding: 8px 12px;
        font-size: 0.8125rem;
    }
    .wonderplugingallery-container {
    max-width: 100% !important;
    }
}