/* =========================================================
   OPTIKA LARUM – HOMEPAGE SLUŽBY
   VLASTNÍ PEVNÝ BLOK
========================================================= */


/* ZRUŠENÍ VLIVU STARÉ SEKCE */
#services.services-section {
    margin: 0 !important;
    padding: 0 !important;
    background: #f7faf5 !important;
}


/* =========================================================
   HLAVNÍ OBAL
========================================================= */

#larum-fixed-services {
    --larum-services-gold: #9a7d00;
    --larum-services-gold-light: #c7b354;
    --larum-services-text: #20242e;
    --larum-services-muted: #575b61;
    --larum-services-bg: #f7faf5;

    width: 100%;
    margin: 0;
    padding: 0;

    color: var(--larum-services-text);
    background: var(--larum-services-bg);

    font-family: inherit;
}


#larum-fixed-services,
#larum-fixed-services * {
    box-sizing: border-box;
}


/* =========================================================
   VNITŘNÍ ŠÍŘKA
========================================================= */

#larum-fixed-services .larum-fixed-services-inner {
    width: min(1240px, calc(100% - 48px));

    margin: 0 auto;

    padding: 42px 0 85px;
}


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

#larum-fixed-services .larum-fixed-services-heading {
    margin: 0 0 60px;

    color: #0c0d11;

    font-family: inherit;
    font-size: 46px;
    font-weight: 400;
    line-height: 1.15;

    text-align: center;
}


/* =========================================================
   ŘÁDEK JEDNÉ SLUŽBY
========================================================= */

#larum-fixed-services .larum-fixed-service-row {
    display: grid;

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

    gap: 88px;

    align-items: center;

    width: 100%;

    margin: 0 0 60px;
}


#larum-fixed-services .larum-fixed-service-row:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TEXTOVÁ ČÁST
========================================================= */

#larum-fixed-services .larum-fixed-service-text {
    width: 100%;
    max-width: 560px;

    margin: 0;
    padding: 0;
}


/* =========================================================
   IKONA + NADPIS
========================================================= */

#larum-fixed-services .larum-fixed-service-title {
    display: flex;

    align-items: center;

    gap: 11px;

    margin: 0 0 18px;
}


#larum-fixed-services .larum-fixed-service-icon {
    display: block;

    width: 30px !important;
    height: 30px !important;

    min-width: 30px;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain;

    border: 0;
    box-shadow: none;
}


#larum-fixed-services .larum-fixed-service-title h3 {
    margin: 0 !important;
    padding: 0;

    color: #171a1f;

    font-family: inherit;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.3;
}


/* =========================================================
   POPISEK
========================================================= */

#larum-fixed-services .larum-fixed-service-description {
    margin: 0 0 28px !important;

    padding: 0;

    color: var(--larum-services-muted);

    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
}


/* =========================================================
   TLAČÍTKA
========================================================= */

#larum-fixed-services .larum-fixed-service-buttons {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;
}


#larum-fixed-services .larum-fixed-btn {
    display: inline-flex !important;

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

    min-height: 52px;

    margin: 0 !important;
    padding: 0 28px !important;

    border-radius: 30px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;

    text-decoration: none !important;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


#larum-fixed-services .larum-fixed-btn span {
    display: inline-block;

    margin-left: 12px;

    font-size: 18px;
    line-height: 1;
}


/* ČÍST VÍCE */

#larum-fixed-services .larum-fixed-btn-secondary {
    border: 1px solid #c8cbc5 !important;

    background: transparent !important;

    color: #20242e !important;
}


#larum-fixed-services .larum-fixed-btn-secondary:hover {
    background: #ffffff !important;

    color: #20242e !important;

    transform: translateY(-1px);
}


/* REZERVOVAT TERMÍN */

#larum-fixed-services .larum-fixed-btn-primary {
    min-width: 190px;

    border: 0 !important;

    background:
        linear-gradient(
            110deg,
            #c9b450 0%,
            #b89d18 48%,
            #7e6800 100%
        ) !important;

    color: #ffffff !important;
}


#larum-fixed-services .larum-fixed-btn-primary:hover {
    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(130, 106, 0, .17);
}


/* =========================================================
   FOTO / VIDEO BLOK
========================================================= */

#larum-fixed-services .larum-fixed-service-media {
    width: 100%;

    margin: 0;
    padding: 0;
}


#larum-fixed-services .larum-fixed-media-link {
    position: relative;

    display: block !important;

    width: 100%;
    height: 380px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #ececec;

    text-decoration: none !important;
}


/* FOTO */

#larum-fixed-services .larum-fixed-media-link > img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transition: transform .3s ease;
}


#larum-fixed-services .larum-fixed-media-link:hover > img {
    transform: scale(1.015);
}


/* =========================================================
   PLAY TLAČÍTKO
========================================================= */

#larum-fixed-services .larum-fixed-play {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 3;

    display: flex;

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

    width: 62px;
    height: 62px;

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

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

    border-radius: 50%;

    background:
        rgba(176,139,0,.65);

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

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

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


/* TROJÚHELNÍK */

#larum-fixed-services .larum-fixed-play::before {
    content: "";

    width: 0;
    height: 0;

    margin-left: 4px;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #ffffff;
}


#larum-fixed-services .larum-fixed-media-link:hover
.larum-fixed-play {
    transform:
        translate(-50%, -50%)
        scale(1.08);

    background:
        rgba(176,139,0,.82);
}


/* =========================================================
   ZVĚTŠOVACÍ ŠIPKA FOTOGRAFIE
========================================================= */

#larum-fixed-services .larum-fixed-zoom {
    position: absolute;

    right: 12px;
    bottom: 12px;

    z-index: 3;

    display: flex;

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

    width: 40px;
    height: 40px;

    background:
        rgba(31,35,40,.88);

    color: #ffffff;

    font-size: 20px;
    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   LIGHTBOX
========================================================= */

#larum-fixed-services .larum-fixed-lightbox {
    position: fixed;

    inset: 0;

    z-index: 9999999;

    display: none;

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

    width: 100vw;
    height: 100vh;

    margin: 0;
    padding: 28px;
}


#larum-fixed-services .larum-fixed-lightbox:target {
    display: flex;
}


/* TMAVÉ POZADÍ */

#larum-fixed-services .larum-fixed-lightbox-bg {
    position: absolute;

    inset: 0;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

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

    cursor: zoom-out;
}


/* =========================================================
   LIGHTBOX OBSAH
========================================================= */

#larum-fixed-services .larum-fixed-lightbox-content {
    position: relative;

    z-index: 2;

    display: flex;

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

    width: min(1100px, 94vw);
    max-height: 90vh;
}


/* VIDEO */

#larum-fixed-services .larum-fixed-lightbox-content video {
    display: block;

    width: 100%;
    height: auto;

    max-height: 88vh;

    margin: 0;

    background: #000000;

    object-fit: contain;
}


/* FOTO */

#larum-fixed-services .larum-fixed-lightbox-content img {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 94vw !important;
    max-height: 88vh !important;

    margin: 0 !important;

    object-fit: contain !important;

    border: 0;
    border-radius: 0;

    box-shadow: none;
}


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

#larum-fixed-services .larum-fixed-lightbox-close {
    position: absolute;

    top: -18px;
    right: -18px;

    z-index: 5;

    display: flex;

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

    width: 44px;
    height: 44px;

    background: #ffffff;

    color: #20242e !important;

    font-size: 31px;
    font-weight: 300;
    line-height: 1;

    text-decoration: none !important;

    cursor: pointer;
}


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

@media (max-width: 950px) {

    #larum-fixed-services .larum-fixed-services-inner {
        width: min(900px, calc(100% - 40px));

        padding-bottom: 65px;
    }


    #larum-fixed-services .larum-fixed-service-row {
        gap: 42px;

        margin-bottom: 60px;
    }


    #larum-fixed-services .larum-fixed-service-title h3 {
        font-size: 21px;
    }


    #larum-fixed-services .larum-fixed-media-link {
        height: 330px;
    }

}


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

@media (max-width: 700px) {

    #larum-fixed-services .larum-fixed-services-inner {
        width: calc(100% - 28px);

        padding:
            30px 0
            48px;
    }


    #larum-fixed-services .larum-fixed-services-heading {
        margin-bottom: 38px;

        font-size: 36px;
    }


    #larum-fixed-services .larum-fixed-service-row {
        grid-template-columns: 1fr;

        gap: 28px;

        margin-bottom: 55px;
    }


    /* NA MOBILU TEXT PRVNÍ */

    #larum-fixed-services
    .larum-fixed-service-row
    .larum-fixed-service-text {
        order: 1;
    }


    #larum-fixed-services
    .larum-fixed-service-row
    .larum-fixed-service-media {
        order: 2;
    }


    #larum-fixed-services .larum-fixed-service-text {
        max-width: none;
    }


    #larum-fixed-services .larum-fixed-service-title {
        margin-bottom: 14px;
    }


    #larum-fixed-services .larum-fixed-service-title h3 {
        font-size: 21px;
    }


    #larum-fixed-services .larum-fixed-service-description {
        margin-bottom: 23px !important;
    }


    #larum-fixed-services .larum-fixed-media-link {
        height: auto;

        aspect-ratio: 4 / 3;
    }


    #larum-fixed-services .larum-fixed-service-buttons {
        gap: 8px;
    }


    #larum-fixed-services .larum-fixed-btn {
        min-height: 48px;

        padding: 0 22px !important;
    }


    #larum-fixed-services .larum-fixed-lightbox {
        padding: 15px;
    }


    #larum-fixed-services .larum-fixed-lightbox-content {
        width: calc(100vw - 30px);
    }


    #larum-fixed-services .larum-fixed-lightbox-close {
        top: -12px;
        right: -5px;

        width: 40px;
        height: 40px;

        font-size: 28px;
    }

}