/* =========================================================
   PRINTMANIA - UPUTSTVA
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.tutorials-page{
    width:100%;
    min-height:500px;
    padding:60px 20px 80px;
    box-sizing:border-box;
}


.tutorials-page-inner{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}


/* =========================================================
   NASLOV
========================================================= */

.tutorials-page-inner > h1{
    margin:0 0 10px;

    text-align:center;

    font-size:
        clamp(
            31px,
            4vw,
            42px
        );

    line-height:1.15;
}


.tutorials-page-subtitle{
    max-width:650px;

    margin:
        0 auto
        40px;

    text-align:center;

    font-size:15px;

    line-height:1.65;

    opacity:.72;
}


/* =========================================================
   GRID
========================================================= */

.tutorials-grid-page{
    display:grid;

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

    gap:22px;

    width:100%;
}


/* =========================================================
   CARD
========================================================= */

.tutorial-card{
    min-width:0;

    overflow:hidden;

    border:
        1px solid
        rgba(128,128,128,.20);

    border-radius:16px;

    background:
        rgba(128,128,128,.035);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.tutorial-card:hover{
    transform:
        translateY(-5px);

    border-color:
        rgba(0,191,255,.35);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.16);
}


/* =========================================================
   BUTTON
========================================================= */

.tutorial-card-button{
    display:block;

    width:100%;

    padding:0;

    margin:0;

    border:0;

    background:transparent;

    color:inherit;

    font:inherit;

    text-align:left;

    cursor:pointer;
}


/* =========================================================
   THUMBNAIL
========================================================= */

.tutorial-card-image{
    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#090c12;
}


.tutorial-card-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .4s ease,
        filter .4s ease;
}


.tutorial-card:hover
.tutorial-card-image img{
    transform:
        scale(1.035);

    filter:
        brightness(.78);
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.tutorial-card-placeholder{
    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    font-size:42px;

    background:
        linear-gradient(
            145deg,
            rgba(0,191,255,.07),
            rgba(255,0,174,.05)
        );
}


/* =========================================================
   PLAY
========================================================= */

.tutorial-play-button{
    position:absolute;

    top:50%;
    left:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    width:62px;
    height:62px;

    border-radius:50%;

    background:
        rgba(0,0,0,.72);

    border:
        1px solid
        rgba(255,255,255,.35);

    box-shadow:
        0 10px 35px
        rgba(0,0,0,.35);

    transform:
        translate(-50%,-50%);

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}


.tutorial-play-button span{
    margin-left:4px;

    color:#fff;

    font-size:23px;

    line-height:1;
}


.tutorial-card:hover
.tutorial-play-button{
    transform:
        translate(-50%,-50%)
        scale(1.08);

    background:
        rgba(0,191,255,.88);

    border-color:
        rgba(255,255,255,.7);
}


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

.tutorial-card-body{
    padding:17px 18px 19px;
}


.tutorial-card-body h2{
    margin:
        0 0 8px;

    font-size:18px;

    line-height:1.35;
}


.tutorial-card-body p{
    display:
        -webkit-box;

    overflow:hidden;

    margin:
        0 0 14px;

    font-size:13px;

    line-height:1.55;

    opacity:.70;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}


.tutorial-watch{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    padding-top:12px;

    border-top:
        1px solid
        rgba(128,128,128,.16);

    font-size:13px;

    font-weight:700;
}


.tutorial-watch > span{
    font-size:18px;

    transition:
        transform .2s ease;
}


.tutorial-card:hover
.tutorial-watch > span{
    transform:
        translateX(4px);
}


/* =========================================================
   EMPTY
========================================================= */

.tutorials-empty{
    grid-column:
        1 / -1;

    width:100%;

    padding:
        55px
        25px;

    box-sizing:border-box;

    text-align:center;

    border:
        1px dashed
        rgba(128,128,128,.28);

    border-radius:16px;

    font-size:14px;

    opacity:.72;
}


/* =========================================================
   MODAL OPEN
========================================================= */

body.tutorial-modal-open{
    overflow:hidden;
}


/* =========================================================
   MODAL
========================================================= */

.tutorial-modal{
    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:25px;

    box-sizing:border-box;

    visibility:hidden;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}


.tutorial-modal.is-open{
    visibility:visible;

    opacity:1;

    pointer-events:auto;
}


/* =========================================================
   BACKDROP
========================================================= */

.tutorial-modal-backdrop{
    position:absolute;

    inset:0;

    background:
        rgba(0,0,0,.82);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


/* =========================================================
   WINDOW
========================================================= */

.tutorial-modal-window{
    position:relative;

    z-index:2;

    width:100%;

    max-width:980px;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:20px;

    background:#0c1017;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.65);

    transform:
        translateY(20px)
        scale(.97);

    transition:
        transform .25s
        cubic-bezier(.22,1,.36,1);
}


.tutorial-modal.is-open
.tutorial-modal-window{
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   MODAL CLOSE
========================================================= */

.tutorial-modal-close{
    position:absolute;

    top:12px;
    right:12px;

    z-index:5;

    display:flex;

    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    padding:0;

    border:
        1px solid
        rgba(255,255,255,.2);

    border-radius:50%;

    background:
        rgba(0,0,0,.68);

    color:#fff;

    font-size:29px;

    line-height:1;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.tutorial-modal-close:hover{
    background:
        rgba(220,30,30,.9);

    transform:
        rotate(90deg);
}


/* =========================================================
   MODAL VIDEO
========================================================= */

.tutorial-modal-video{
    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    background:#000;
}


.tutorial-modal-video iframe,
.tutorial-modal-video video{
    display:block;

    width:100%;
    height:100%;

    border:0;

    background:#000;
}


/* =========================================================
   ERROR
========================================================= */

.tutorial-modal-error{
    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    min-height:350px;

    padding:30px;

    box-sizing:border-box;

    color:#fff;

    font-size:15px;

    text-align:center;
}


/* =========================================================
   MODAL INFO
========================================================= */

.tutorial-modal-info{
    padding:
        18px
        22px
        20px;
}


.tutorial-modal-info h2{
    margin:0;

    color:#fff;

    font-size:19px;

    line-height:1.4;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:950px){

    .tutorials-grid-page{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:650px){

    .tutorials-page{
        padding:
            38px
            14px
            55px;
    }


    .tutorials-page-inner > h1{
        font-size:30px;
    }


    .tutorials-page-subtitle{
        margin-bottom:27px;

        font-size:14px;
    }


    .tutorials-grid-page{
        grid-template-columns:1fr;

        gap:16px;
    }


    .tutorial-card{
        border-radius:14px;
    }


    .tutorial-card-body{
        padding:
            15px
            16px
            17px;
    }


    .tutorial-card-body h2{
        font-size:17px;
    }


    .tutorial-play-button{
        width:56px;
        height:56px;
    }


    .tutorial-play-button span{
        font-size:21px;
    }


    /* MODAL */

    .tutorial-modal{
        padding:12px;
    }


    .tutorial-modal-window{
        border-radius:14px;
    }


    .tutorial-modal-close{
        top:8px;
        right:8px;

        width:37px;
        height:37px;

        font-size:25px;
    }


    .tutorial-modal-info{
        padding:
            14px
            16px
            16px;
    }


    .tutorial-modal-info h2{
        font-size:16px;
    }

}