/*
FUN ON v24 — bezpečný desktopový patch pre široké monitory.

Rozsah:
- aktivuje sa iba od 1600 px,
- nemení mobil ani bežné notebookové rozloženie,
- nemení HTML štruktúru, texty, obrázky ani animácie,
- rieši iba desktopové zarovnanie menu, nadpisov a obrazových sekcií.
*/

@media screen and (min-width:1600px){

    /* ------------------------------------------------------------
       1. Spoločná bezpečná šírka obsahu na širokých monitoroch
       ------------------------------------------------------------ */
    .services-sec > .container,
    .testimonial-sec > .container{
        width:min(1480px, calc(100% - 120px))!important;
        max-width:1480px!important;
        margin-left:auto!important;
        margin-right:auto!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    .portfolio-sec > .container-fluid,
    .contact-sec > .container-fluid{
        width:min(1660px, calc(100% - 120px))!important;
        max-width:1660px!important;
        margin-left:auto!important;
        margin-right:auto!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    .services-sec .row,
    .portfolio-sec .row,
    .testimonial-sec .row,
    .contact-sec .row{
        margin-left:0!important;
        margin-right:0!important;
    }

    /* ------------------------------------------------------------
       2. Vyskakovacie menu — samostatný ľavý panel
       ------------------------------------------------------------ */
    .side-menu{
        position:fixed!important;
        inset:0!important;
        width:100vw!important;
        height:100vh!important;
        background:transparent!important;
        overflow:hidden!important;
    }

    .side-menu .bg-overlay{
        display:block!important;
        position:fixed!important;
        inset:0!important;
        width:100vw!important;
        height:100vh!important;
        background:rgba(4,3,9,.72)!important;
        backdrop-filter:blur(5px)!important;
        -webkit-backdrop-filter:blur(5px)!important;
        pointer-events:auto!important;
    }

    .side-menu .inner-wrapper{
        position:absolute!important;
        top:0!important;
        bottom:0!important;
        left:0!important;
        right:auto!important;
        width:clamp(460px,31vw,600px)!important;
        min-width:460px!important;
        max-width:600px!important;
        height:100vh!important;
        padding:0!important;
        overflow-y:auto!important;
        background:
            radial-gradient(circle at 18% 18%,rgba(16,184,181,.08),transparent 28%),
            radial-gradient(circle at 82% 76%,rgba(240,0,143,.08),transparent 30%),
            rgba(8,7,14,.985)!important;
        border-right:1px solid rgba(255,255,255,.07)!important;
        box-shadow:28px 0 70px rgba(0,0,0,.32)!important;
    }

    .side-menu .inner-wrapper > .container{
        width:100%!important;
        max-width:none!important;
        height:100%!important;
        margin:0!important;
        padding:110px 58px 70px!important;
    }

    .side-menu .side-menu-inner-content{
        width:100%!important;
        min-height:calc(100vh - 180px)!important;
        margin:0!important;
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
    }

    .side-menu .nav-icon{
        width:100%!important;
        max-width:100%!important;
        flex:0 0 100%!important;
        margin-left:0!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    .side-menu .navbar,
    .side-menu .side-nav-menu{
        width:100%!important;
        align-items:flex-start!important;
        text-align:left!important;
    }

    .side-menu .side-nav-menu .nav-link{
        display:block!important;
        width:100%!important;
        margin:0!important;
        padding:.09em 0!important;
        font-size:clamp(38px,2.65vw,54px)!important;
        line-height:1.08!important;
        letter-spacing:-.025em!important;
        white-space:normal!important;
        transform:none!important;
    }

    .side-menu .menu-line{
        left:-34px!important;
        right:auto!important;
    }

    .side-menu .btn-close{
        position:absolute!important;
        top:42px!important;
        right:38px!important;
        z-index:5!important;
    }

    /* ------------------------------------------------------------
       3. O projekte — text a obrázok v pevnej mriežke
       ------------------------------------------------------------ */
    .services-sec .row.align-items-center{
        display:grid!important;
        grid-template-columns:minmax(360px, .82fr) minmax(0, 1.18fr)!important;
        column-gap:72px!important;
        align-items:center!important;
    }

    .services-sec .row.align-items-center > .col-12.col-lg-6{
        width:auto!important;
        max-width:none!important;
        flex:none!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    .services-sec .heading-area{
        position:static!important;
        inset:auto!important;
        width:100%!important;
        max-width:520px!important;
        margin:0!important;
        padding:0!important;
        transform:none!important;
        text-align:left!important;
    }

    .services-sec .heading-area .heading{
        position:static!important;
        width:auto!important;
        max-width:100%!important;
        margin:0!important;
        transform:none!important;
        font-size:clamp(44px,3.15vw,64px)!important;
        line-height:1.08!important;
        overflow-wrap:normal!important;
        word-break:normal!important;
    }

    .services-sec .image-holder{
        width:100%!important;
        max-width:100%!important;
        margin:0!important;
    }

    .services-sec .row.align-items-center > .col-12.padding-top-half{
        grid-column:1 / -1!important;
        width:100%!important;
        max-width:none!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    /* ------------------------------------------------------------
       4. Atrakcie — nadpis zostáva celý vo vlastnom stĺpci
       ------------------------------------------------------------ */
    .portfolio-sec > .container-fluid > .row{
        display:grid!important;
        grid-template-columns:minmax(330px, .72fr) minmax(0, 2.28fr)!important;
        column-gap:64px!important;
        align-items:center!important;
    }

    .portfolio-sec .col-12.col-lg-3,
    .portfolio-sec .col-12.col-lg-9{
        width:auto!important;
        max-width:none!important;
        flex:none!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    .portfolio-sec .heading-area.long-area{
        position:static!important;
        inset:auto!important;
        width:100%!important;
        max-width:340px!important;
        margin:0!important;
        padding:0!important;
        transform:none!important;
        text-align:left!important;
    }

    .portfolio-sec .heading-area.long-area .heading{
        position:static!important;
        width:auto!important;
        max-width:100%!important;
        margin:0!important;
        transform:none!important;
        font-size:clamp(46px,3.35vw,68px)!important;
        line-height:1.08!important;
        overflow-wrap:normal!important;
        word-break:normal!important;
    }

    .portfolio-sec .portfolio-carousel,
    .portfolio-sec .portfolio-carousel .item,
    .portfolio-sec .portfolio-carousel .image-holder{
        width:100%!important;
        max-width:100%!important;
    }

    .portfolio-sec .work-navigation{
        left:0!important;
        right:auto!important;
        bottom:18px!important;
        transform:none!important;
    }

    .portfolio-sec .work-detail{
        padding-left:0!important;
        padding-right:0!important;
    }

    /* ------------------------------------------------------------
       5. Gastro — nadpis v normálnom toku nad obrázkom
       ------------------------------------------------------------ */
    .testimonial-sec > .container > .row{
        display:block!important;
    }

    .testimonial-sec .col-12.col-lg-0,
    .testimonial-sec .col-12.col-lg-12{
        width:100%!important;
        max-width:100%!important;
        flex:0 0 100%!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    .testimonial-sec .heading-area{
        position:static!important;
        inset:auto!important;
        width:100%!important;
        max-width:none!important;
        margin:0 0 34px!important;
        padding:0!important;
        transform:none!important;
        text-align:left!important;
    }

    .testimonial-sec .heading-area .heading{
        position:static!important;
        width:auto!important;
        max-width:100%!important;
        margin:0!important;
        transform:none!important;
        font-size:clamp(46px,3.35vw,68px)!important;
        line-height:1.08!important;
    }

    .testimonial-sec .image-holder{
        width:100%!important;
        max-width:100%!important;
        margin:0 auto!important;
    }

    .testimonial-sec .review-carousel{
        width:100%!important;
        max-width:1120px!important;
        margin:0 auto!important;
    }

    .testimonial-sec .review-carousel .row{
        margin-left:0!important;
        margin-right:0!important;
    }

    /* ------------------------------------------------------------
       6. Kontakt — spoločná os a kontrolované medzery
       ------------------------------------------------------------ */
    .contact-sec > .container-fluid > .row{
        display:grid!important;
        grid-template-columns:minmax(300px,.68fr) minmax(0,2.32fr)!important;
        column-gap:64px!important;
        align-items:start!important;
    }

    .contact-sec .col-12.col-lg-3,
    .contact-sec .col-12.col-lg-9{
        width:auto!important;
        max-width:none!important;
        flex:none!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    .contact-sec .heading-area.long-area{
        position:static!important;
        inset:auto!important;
        width:100%!important;
        max-width:300px!important;
        margin:12px 0 0!important;
        padding:0!important;
        transform:none!important;
        text-align:left!important;
    }

    .contact-sec .heading-area.long-area .heading{
        position:static!important;
        width:auto!important;
        max-width:100%!important;
        margin:0!important;
        transform:none!important;
        font-size:clamp(46px,3.35vw,68px)!important;
        line-height:1.08!important;
    }

    .contact-sec .contact-inner{
        width:100%!important;
        max-width:100%!important;
        margin:0!important;
        padding:0!important;
    }

    .contact-sec .contact-details ul{
        display:flex!important;
        flex-wrap:wrap!important;
        align-items:center!important;
        gap:22px 34px!important;
        margin:0!important;
        padding:0!important;
    }

    .contact-sec .contact-form-sec{
        width:min(760px,100%)!important;
        margin:0 auto!important;
    }

    /* ------------------------------------------------------------
       7. Animácie nesmú meniť konečné zarovnanie
       ------------------------------------------------------------ */
    .services-sec .heading-area,
    .portfolio-sec .heading-area,
    .testimonial-sec .heading-area,
    .contact-sec .heading-area{
        will-change:opacity,transform;
    }

    .services-sec .heading-area .heading,
    .portfolio-sec .heading-area .heading,
    .testimonial-sec .heading-area .heading,
    .contact-sec .heading-area .heading{
        left:auto!important;
        right:auto!important;
        top:auto!important;
        bottom:auto!important;
    }
}


/* ------------------------------------------------------------
   v25: zatvorené bočné menu nesmie byť viditeľné
   ------------------------------------------------------------ */
@media screen and (min-width:1600px){
    .side-menu.hidden{
        visibility:hidden!important;
        opacity:0!important;
        pointer-events:none!important;
    }

    .side-menu.hidden .bg-overlay{
        visibility:hidden!important;
        opacity:0!important;
        pointer-events:none!important;
    }

    .side-menu.hidden .inner-wrapper{
        visibility:hidden!important;
        opacity:0!important;
        pointer-events:none!important;
        transform:translateX(-105%)!important;
    }

    .side-menu:not(.hidden){
        visibility:visible!important;
        opacity:1!important;
        pointer-events:auto!important;
    }

    .side-menu:not(.hidden) .bg-overlay{
        visibility:visible!important;
        opacity:1!important;
        pointer-events:auto!important;
    }

    .side-menu:not(.hidden) .inner-wrapper{
        visibility:visible!important;
        opacity:1!important;
        pointer-events:auto!important;
        transform:translateX(0)!important;
    }
}