/* 
    InlineGallery 1.0

    Release date: 2025-11-12
    Developed by: Molcomp System Ltd.
*/

@font-face {
    font-family: DaysOne-Regular;
    src: url('../fonts/DaysOne-Regular.woff2');
}

@font-face {
    font-family: Quicksand;
    src: url('../fonts/Quicksand-VariableFont_wght.woff2');
}


/* ------------------------ */

:root {
    --inline-gallery--is-mobile: 0;

    --inline-gallery--image-gap: 24px;
    --inline-gallery--image-holder-margin: 6px;

    /* Customizable by options */
    --inline-gallery--image-margin: 8px;
    --inline-gallery--image-size-ratio: calc(4 / 3);
    --inline-gallery--stepper-color: rgb(59, 152, 148);
    --inline-gallery--title-background-color: rgb(59, 152, 148);
    --inline-gallery--title-color: rgb(255, 255, 255);
    --inline-gallery--visible-image-count: 3;
}

/* ----------------- */

.inline-gallery--container {
    align-items: center;
    box-sizing: border-box;
    column-gap: 32px;
    display: flex;
    margin: 0;
    position: relative;
}

.inline-gallery--container * {
    box-sizing: border-box;
}

.inline-gallery--container .disabled {
    opacity: 0.25;
}

.inline-gallery--container > .inline-gallery--left-stepper
, .inline-gallery--container > .inline-gallery--right-stepper {
    flex-shrink: 0;
    font-size: 0;
    height: 160px;
    overflow-x: hidden;
    position: relative;
    transition: all 200ms;
    width: 80px;
}

.inline-gallery--container > .inline-gallery--left-stepper:hover
, .inline-gallery--container > .inline-gallery--right-stepper:hover {
}

.inline-gallery--container > .inline-gallery--left-stepper > span
, .inline-gallery--container > .inline-gallery--right-stepper > span {
    border-style: solid;
    border-width: 80px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.inline-gallery--container > .inline-gallery--left-stepper > span {
    border-color: transparent var(--inline-gallery--stepper-color) transparent transparent;
    right: 0;
}

.inline-gallery--container > .inline-gallery--right-stepper > span {
    border-color: transparent transparent transparent var(--inline-gallery--stepper-color);
    left: 0;
}

.inline-gallery--images-outer-holder {
    overflow-x: hidden;
    position: relative;
    width: calc(100% - 2 * 80px);
}

.inline-gallery--images-inner-holder {
    align-items: center;
    column-gap: var(--inline-gallery--image-gap);
    display: flex;
}

.inline-gallery--image-holder {
    background-color: white;
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    font-size: 1rem;
    margin: var(--inline-gallery--image-holder-margin);
    width: calc((100% - var(--inline-gallery--image-gap) * (var(--inline-gallery--visible-image-count) - 1))
        / var(--inline-gallery--visible-image-count) - var(--inline-gallery--image-holder-margin) * 2);
}

.inline-gallery--image-holder:hover {
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.7);
}

.inline-gallery--container.zoomed .inline-gallery--image-holder {
    /*width: calc(100% - var(--inline-gallery--image-holder-margin) * 2);*/
}

.inline-gallery--image-holder > .inline-gallery--image-title {
    background-color: var(--inline-gallery--title-background-color);
    border-radius: 8px 8px 0 0;
    color: var(--inline-gallery--title-color);
    font-size: 20px;
    overflow-x: hidden;
    padding: 0.4rem 1rem;
    user-select: none;
    white-space: nowrap;
}

.inline-gallery--image-holder > .inline-gallery--image-wrapper {
    margin: var(--inline-gallery--image-margin);
    overflow: hidden;
    width: calc(100% - var(--inline-gallery-image-margin) * 2);
}

.inline-gallery--image-holder > .inline-gallery--image-wrapper > img {
    display: block;
    pointer-events: none;
    user-select: none;
    width: 100%;
}


/* ------ MOBIL NÉZET ------ */

@media (max-width: 1149px) {

    :root {
        --inline-gallery--is-mobile: 1;
    }

    .inline-gallery--image-holder {
        width: calc(100% - var(--inline-gallery--image-holder-margin) * 2);
    }

    .inline-gallery--image-holder > .inline-gallery--image-wrapper > img {
    }

}

/* ------ MAX 779 ------ */

@media (max-width: 779px) {

    .inline-gallery--container {
        column-gap: 1rem;
    }

    .inline-gallery--container > .inline-gallery--left-stepper
    , .inline-gallery--container > .inline-gallery--right-stepper {
        width: 30px;
    }

    .inline-gallery--container > .inline-gallery--left-stepper > span
    , .inline-gallery--container > .inline-gallery--right-stepper > span {
        border-width: 30px;
    }

    .inline-gallery--images-outer-holder {
        width: calc(100% - 2 * 30px);
    }

    .inline-gallery--image-holder > .inline-gallery--image-title {
        font-size: 1rem;
    }

}