/**
 * Styles the reusable homepage process gallery module.
 * Depends on gallery.js for active slide state, progress, and content transitions.
 */

/* Source: scp-gallery-22f878fcbe.css */

:root {
    --scp-primary-red: #AA182C;
    --scp-primary-red-dark: #6B0F2A;
    --scp-gallery-white: #ffffff;
    --scp-gallery-progress-track: #e0e0e0;
    --scp-gradient-start: rgba(139, 21, 56, 0.8);
    --scp-gradient-end: rgba(139, 21, 56, 0.3);
    --scp-gallery-shadow: rgba(0, 0, 0, 0.15);
    --scp-gallery-active-shadow: rgba(0, 0, 0, 0.25);
    --scp-transition-fast: 0.3s;
    --scp-transition-medium: 0.5s;
    --scp-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Slide dimensions - Active is LARGER */

    --scp-slide-width: 450px;
    --scp-slide-height: auto;
    --scp-slide-width-active: 600px;
    --scp-slide-height-active: 450px;
    --scp-slide-gap: 20px;
    --scp-arrow-size: 52px; --scp-arrow-icon-size: 11px; --scp-arrow-stroke: 2px; --scp-divider-width: 1px;

    /* Content section */

    --scp-content-max-width: 730px;
    --scp-content-shell-max-width: 930px;
    --scp-content-title-color: #333333;
    --scp-content-text-color: #555555;
}

@media (max-width: 1200px) {
    :root {
        --scp-slide-width: 350px;
        --scp-slide-height: 230px;
        --scp-slide-width-active: 500px;
        --scp-slide-height-active: 375px;
        --scp-slide-gap: 15px;
    }

}

@media (max-width: 768px) {
    :root {
        --scp-slide-width: 220px;
        --scp-slide-height: 145px;
        --scp-slide-width-active: 300px;
        --scp-slide-height-active: 225px;
        --scp-slide-gap: 12px;
    }

}

@media (max-width: 480px) {
    :root {
        --scp-slide-width: 150px;
        --scp-slide-height: 100px;
        --scp-slide-width-active: 200px;
        --scp-slide-height-active: 150px;
        --scp-slide-gap: 8px;
        --scp-arrow-size: 40px; --scp-arrow-icon-size: 9px;
    }

}

.scp-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--scp-font-family);
}

.scp-gallery__carousel {
    position: relative;
    width: 100%;
    height: var(--scp-slide-height-active);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    padding-left: 0;
}

.scp-gallery__track {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--scp-slide-gap);
    transition: transform var(--scp-transition-medium) cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}

.scp-gallery__track--instant,
.scp-gallery__track--instant * {
    transition: none !important;
}

.scp-gallery__slide {
    flex: 0 0 auto;
    width: var(--scp-slide-width);
    height: var(--scp-slide-height);
    cursor: pointer;
    transition: all var(--scp-transition-medium) cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform, width, height, opacity;
}

.scp-gallery__slide-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 15px var(--scp-gallery-shadow);
    transition: box-shadow var(--scp-transition-fast) ease;
}

.scp-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--scp-transition-medium) ease;
}

.scp-gallery__slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--scp-gradient-start) 0%,
        var(--scp-gradient-end) 100%
    );
    opacity: 0;
    transition: opacity var(--scp-transition-fast) ease;
    pointer-events: none;
}

.scp-gallery__keyword-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--scp-primary-red);
    padding: 16px 50px 16px 20px;
    clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 100%, 0 100%);
    opacity: 0;
    transition: opacity var(--scp-transition-fast) ease;
    pointer-events: none;
}

.scp-gallery__keyword {
    display: block;
    color: var(--scp-gallery-white);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .scp-gallery__keyword {
        font-size: 2.15rem;
    }

}

.scp-gallery__slide:not(.scp-gallery__slide--active) {
    opacity: 0.7;
}

.scp-gallery__slide:not(.scp-gallery__slide--active):hover {
    opacity: 1;
}

.scp-gallery__slide:not(.scp-gallery__slide--active):hover .scp-gallery__slide-overlay {
    opacity: 1;
}

.scp-gallery__slide:not(.scp-gallery__slide--active):hover img {
    transform: scale(1.05);
}

.scp-gallery__slide--active {
    width: var(--scp-slide-width-active);
    height: var(--scp-slide-height-active);
    opacity: 1;
    z-index: 10;
}

.scp-gallery__slide--active .scp-gallery__slide-inner {
    box-shadow: 0 10px 40px var(--scp-gallery-active-shadow);
}

.scp-gallery__slide--active .scp-gallery__slide-overlay {
    opacity: 0 !important;
}

.scp-gallery__slide--active .scp-gallery__keyword-overlay {
    opacity: 1;
}

.scp-gallery__content {
    width: 100%; max-width: var(--scp-content-shell-max-width);
    box-sizing: border-box; margin: 30px auto 0;
}
.scp-gallery__content-navigation { display: grid; grid-template-columns: var(--scp-arrow-size) minmax(0, var(--scp-content-max-width)) var(--scp-arrow-size); align-items: center; justify-content: center; gap: var(--scp-slide-gap); }
.scp-gallery__arrow { display: inline-grid; place-items: center; width: var(--scp-arrow-size); height: var(--scp-arrow-size); padding: 0; border: 0; border-radius: 50%; background: var(--scp-primary-red); color: var(--scp-gallery-white); cursor: pointer; transition: background var(--scp-transition-fast) ease, transform var(--scp-transition-fast) ease; }
.scp-gallery__arrow:hover { background: var(--scp-primary-red-dark); transform: scale(1.05); }
.scp-gallery__arrow:focus-visible { outline: var(--scp-arrow-stroke) solid var(--scp-primary-red-dark); outline-offset: calc(var(--scp-arrow-stroke) * 2); }
.scp-gallery__arrow-icon { width: var(--scp-arrow-icon-size); height: var(--scp-arrow-icon-size); border-top: var(--scp-arrow-stroke) solid currentColor; border-right: var(--scp-arrow-stroke) solid currentColor; transform: rotate(45deg); }
.scp-gallery__arrow--previous .scp-gallery__arrow-icon { transform: rotate(-135deg); }
.scp-gallery__content-title {
    font-family: var(--scp-font-family);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--scp-primary-red);
    margin: 0 0 12px 0;
    line-height: 1.3;
    text-align: center;
    transition: opacity var(--scp-transition-fast) ease;
}

.scp-gallery__content-description,
.scp-gallery__content-description.carrousel-description {
    font-family: var(--scp-font-family);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--scp-content-text-color);
    margin: 0;
    line-height: 1.6;
    text-align: center;
    transition: opacity var(--scp-transition-fast) ease;
}

.scp-gallery__content-description p {
    margin: 0;
}

.scp-gallery__content-description ol,
.scp-gallery__content-description ul {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    width: 100%; margin: var(--scp-slide-gap) auto 0; padding: 0; list-style: none;
    row-gap: calc(var(--scp-slide-gap) / 2); text-align: center; text-transform: uppercase;
}
.scp-gallery__content-description li { position: relative; padding: 0 calc(var(--scp-slide-gap) / 2); }
.scp-gallery__content-description li:not(:last-child)::after { position: absolute; top: 50%; right: 0; width: var(--scp-divider-width); height: 1em; background: var(--scp-primary-red); content: ""; transform: translateY(-50%); }
.scp-gallery__content-description > :first-child {
    margin-top: 0;
}

.scp-gallery__content-description > :last-child {
    margin-bottom: 0;
}

.scp-gallery__content-description img { display: block; max-width: 100%; height: auto; margin: var(--scp-slide-gap) auto !important; }

.scp-gallery__content-description .aligncenter,
.scp-gallery__content-description .alignleft,
.scp-gallery__content-description .alignright {
    display: block; float: none; margin-left: auto; margin-right: auto; text-align: center;
}

.scp-gallery__content-description::after {
    clear: both;
    content: "";
    display: table;
}

.scp-gallery__content--transitioning .scp-gallery__content-title,
.scp-gallery__content--transitioning .scp-gallery__content-description {
    opacity: 0;
}

@media (min-width: 768px) {
    .scp-gallery__content {
        margin-top: 35px;
    }

    .scp-gallery__content-title {
        font-size: 2.25rem;
        margin-bottom: 14px;
    }

    .scp-gallery__content-description,
    .scp-gallery__content-description.carrousel-description {
        font-size: 1.8rem;
    }

}

@media (max-width: 480px) {
    .scp-gallery__content {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 25px;
    }

    .scp-gallery__content-title {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .scp-gallery__content-description,
    .scp-gallery__content-description.carrousel-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }

}

.scp-gallery__progress {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 40px;
    padding-left: 0;
}

.scp-gallery__progress-track {
    width: 180px;
    height: 3px;
    background: var(--scp-gallery-progress-track);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
}

.scp-gallery__progress-bar {
    width: 7.69230769231%;
    height: 100%;
    background: var(--scp-primary-red);
    border-radius: 2px;
    transition: transform var(--scp-transition-medium) ease;
}

@keyframes scp-slideIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}

.scp-gallery__slide {
    animation: scp-slideIn 0.6s ease-out both;
}

.scp-gallery__slide:nth-child(1) { animation-delay: 0.1s; }

.scp-gallery__slide:nth-child(2) { animation-delay: 0.2s; }

.scp-gallery__slide:nth-child(3) { animation-delay: 0.3s; }

.scp-gallery__slide:nth-child(4) { animation-delay: 0.4s; }

.scp-gallery__slide:nth-child(5) { animation-delay: 0.5s; }

.scp-gallery__slide:nth-child(6) { animation-delay: 0.6s; }

.scp-gallery__slide:nth-child(7) { animation-delay: 0.7s; }

.scp-gallery__slide:nth-child(8) { animation-delay: 0.8s; }

@media (prefers-reduced-motion: reduce) {
    .scp-gallery__slide,
    .scp-gallery__track,
    .scp-gallery__keyword,
    .scp-gallery__arrow,
    .scp-gallery__progress-bar,
    .scp-gallery__slide img,
    .scp-gallery__slide-overlay,
    .scp-gallery__content-title,
    .scp-gallery__content-description {
        transition: none !important;
        animation: none !important;
    }

}
