/* ==========================================
   SLUŽBY
========================================== */

.services-page{
    width:min(1500px,90vw);
    margin:135px auto 60px;
}

.services-intro{
    width:100%;
    max-width:none;
    margin:0 auto 20px;
    text-align:center;
}

.services-intro__subtitle{
    margin:0;
    color:#111;
    font-size:21px;
    font-weight:300;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.services-intro__text{
    width:max-content;
    max-width:none;
    margin:0 auto;
    color:#555;
    font-size:16px;
    line-height:1.65;
    white-space:nowrap;
    text-align:center;
}


/* ==========================================
   SEKCE
========================================== */

.services-section{
    margin-bottom:20px;
}

.services-section__title{
    display:flex;
    align-items:center;
    gap:22px;

    margin:0 0 26px;

    font-size:21px;
    font-weight:300;
    letter-spacing:1.5px;

    text-align:center;
    text-transform:uppercase;
}

.services-section__title::before,
.services-section__title::after{
    content:"";

    height:1px;
    flex:1;

    background:#ddd;
}

.services-section__description{
    margin:-30px 0 18px;

    color:#666;

    font-size:16px;
    font-weight:300;
    line-height:1.5;

    text-align:center;
}


/* ==========================================
   ROZLOŽENÍ DLAŽDIC
========================================== */

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.services-grid--two{
    grid-template-columns:repeat(2,minmax(0,1fr));

    max-width:1000px;

    margin:0 auto;
}

.additional-services-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:18px;

    max-width:none;

    margin:0 auto;
}


/* ==========================================
   DLAŽDICE
========================================== */

.service-card{
    position:relative;

    display:flex;

    min-height:100px;

    padding:10px 24px;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    border:1px solid #dcdcdc;
    border-radius:5px;

    background:#fff;

    text-align:center;

    cursor:pointer;

    box-shadow:
        0 8px 24px rgba(0,0,0,.035);

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

.service-card:hover{

    background:#111;
    border-color:#111;

    box-shadow:
        0 12px 30px rgba(0,0,0,.12);
}

.service-card:hover .service-card__title,
.service-card:hover .service-card__price,
.service-card:hover .service-card__price span{
    color:#fff;
}
.service-card:active{
    background:#111;
    border-color:#111;
}

.service-card:active .service-card__title,
.service-card:active .service-card__price,
.service-card:active .service-card__price span{
    color:#fff;
}

.service-card:focus-visible{
    outline:1px solid #111;
    outline-offset:3px;
}

.service-card--featured{
    border-color:#9e9e9e;
}

.service-card--compact{
    min-height:100px;
    padding:10px 14px;
}


/* ==========================================
   TEXT DLAŽDIC
========================================== */

.service-card__title{
    max-width:100%;

    margin:0 0 5px;

    font-size:21px;
    font-weight:300;
    letter-spacing:1.5px;
    line-height:1.35;

    text-transform:uppercase;
}

.service-card--compact .service-card__title{
    max-width:100%;

    white-space:normal;

    text-align:center;
    line-height:1.25;
}

.service-card__price{
    margin:0;

    color:#111;

    font-size:21px;
    font-weight:300;
    letter-spacing:1.5px;
    line-height:1.35;
}

.service-card__price span{
    margin-right:0;

    font-size:21px;
    font-weight:300;
    letter-spacing:1.5px;
}

.service-card__price--text{
    font-size:21px;
}


/* ==========================================
   MODÁLNÍ OKNO
========================================== */

body.modal-open{
    overflow:hidden;
}

.service-modal{
    position:fixed;

    inset:0;

    z-index:5000;

    display:grid;
    place-items:center;

    padding:24px;

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

    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

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

.service-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.service-modal__dialog{
    position:relative;

    width:min(780px,100%);
    max-height:calc(100dvh - 48px);

    overflow-y:auto;

    padding:48px 52px 42px;

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 25px 80px rgba(0,0,0,.26);

    transform:
        translateY(18px)
        scale(.985);

    transition:
        transform .22s ease;

    outline:none;
}

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


/* ==========================================
   KŘÍŽEK
========================================== */

.service-modal__close{
    position:absolute;

    top:14px;
    right:14px;

    display:grid;

    width:42px;
    height:42px;

    place-items:center;

    border:0;
    border-radius:50%;

    background:#2c2c2c;
    color:#fff;

    font:inherit;
    font-size:28px;
    line-height:1;

    cursor:pointer;
}

.service-modal__close:hover,
.service-modal__close:focus-visible{
    background:#000;

    outline:2px solid #999;
    outline-offset:2px;
}


/* ==========================================
   NADPIS MODÁLU
========================================== */

.service-modal__kicker{
    margin:0 55px 12px;

    color:#111;

    font-size:21px;
    font-weight:300;
    letter-spacing:1.5px;
    line-height:1.35;

    text-transform:uppercase;
    text-align:center;
}

.service-modal__title{
    max-width:650px;

    margin:0 auto 12px;

    font-size:21px;
    font-weight:300;
    letter-spacing:1.5px;
    line-height:1.35;

    text-transform:none;
    text-align:center;
}


/* ==========================================
   OBSAH MODÁLU
========================================== */

.service-modal__section + .service-modal__section{
    margin-top:27px;
    padding-top:25px;

    border-top:1px solid #ddd;
}

.service-modal__section h3{
    margin:0 0 12px;

    font-size:18px;
    font-weight:600;
}

.service-modal__section ul{
    margin:0;
    padding-left:22px;
}

.service-modal__section li{
    margin:7px 0;

    line-height:1.55;
}

.service-modal__note{
    margin:28px 0 0;

    padding:18px 20px;

    background:#f5f5f5;

    color:#444;

    line-height:1.55;
}


/* ==========================================
   MOBIL
========================================== */

@media (max-width:900px){

    .services-page{
        width:92%;
        margin:105px auto 40px;
    }

    .services-intro{
        margin-bottom:38px;
    }

    .services-intro__subtitle{
        font-size:16px;
    }

    .services-intro__text{
        width:auto;
        max-width:100%;

        white-space:normal;
    }

    .services-section{
        margin-bottom:32px;
    }

    .services-section__title{
        justify-content:center;

        margin-bottom:6px;

        text-align:center;
    }

    .services-section__description{
        max-width:90%;

        margin:0 auto 12px;

        text-align:center;
    }

    .services-section__title::before,
    .services-section__title::after{
        display:none;
    }

    .services-grid,
    .additional-services-grid{
        grid-template-columns:1fr;

        gap:16px;
    }

    .service-card,
    .service-card--compact{
        min-height:100px;

        padding:14px 18px;
    }

    .service-card__title{
        margin-bottom:4px;

        font-size:17px;
    }

    .service-card__price{
        margin:0;

        font-size:17px;
    }

    .service-card__price span{
        font-size:17px;
    }


    /* MODAL */

    .service-modal{
        padding:14px;
    }

    .service-modal__dialog{
        width:100%;

        max-height:calc(100dvh - 28px);

        padding:52px 22px 28px;

        border-radius:14px;
    }

   .service-modal__title{
    width:100%;
    margin:0 auto 12px;
    font-size:21px;
    text-align:center;
}

.service-modal__kicker{
    width:100%;
    margin:0 auto 12px;
    font-size:21px;
    text-align:center;
}

    .service-modal__close{
        top:10px;
        right:10px;
    }

}


/* ==========================================
   OMEZENÍ ANIMACÍ
========================================== */

@media (prefers-reduced-motion:reduce){

    .service-card,
    .service-modal,
    .service-modal__dialog{
        transition:none;
    }

}