/*
 * =========================================================
 * APOLL SLIDER
 * =========================================================
 */

:root {
    --apoll-accent: #e84a1b;
    --apoll-graphite: #171717;
    --apoll-white: #f7f5f0;

    --apoll-hero-cut: clamp(12px, 1.4vw, 26px);
    --apoll-nav-size: clamp(52px, 4.3vw, 68px);
}


/*
 * =========================================================
 * SLIDER CONTAINER
 * =========================================================
 */

.apoll-slider {
    position: relative;
    display: block;

    width: calc(100% - 30px);
    max-width: 1170px;

    margin: 20px auto 30px auto;
    padding: 0;

    font-family: inherit;

    overflow: visible;
    box-sizing: border-box;
}


/*
 * =========================================================
 * STAGE
 * =========================================================
 */

.apoll-slider__stage {
    position: relative;

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/*
 * =========================================================
 * IMAGE AREA
 * =========================================================
 */

.apoll-slider__media {
    position: relative;

    width: 100%;

    aspect-ratio: 8 / 3;

    min-height: 280px;
    max-height: 440px;

    overflow: hidden;

    background: #e8e8e8;

    clip-path: polygon(
        var(--apoll-hero-cut) 0,
        calc(100% - var(--apoll-hero-cut)) 0,
        100% var(--apoll-hero-cut),
        100% calc(100% - var(--apoll-hero-cut)),
        calc(100% - var(--apoll-hero-cut)) 100%,
        var(--apoll-hero-cut) 100%,
        0 calc(100% - var(--apoll-hero-cut)),
        0 var(--apoll-hero-cut)
    );
}


/*
 * =========================================================
 * SLIDES
 * =========================================================
 */

.apoll-slider__slide {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

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


/*
 * Fallback when JavaScript is unavailable.
 */
.apoll-slider__slide:first-child {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/*
 * JavaScript active.
 */
.apoll-slider.is-js-ready .apoll-slider__slide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 220ms ease,
        visibility 220ms ease;
}


.apoll-slider.is-js-ready .apoll-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/*
 * =========================================================
 * IMAGE
 * =========================================================
 */

.apoll-slider__image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    margin: 0;
    padding: 0;

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

    border: 0;
}


/*
 * =========================================================
 * SLIDE LINK
 * =========================================================
 */

.apoll-slider__link {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    color: inherit;
    text-decoration: none;
}


.apoll-slider__link:hover,
.apoll-slider__link:focus {
    color: inherit;
    text-decoration: none;
}


/*
 * =========================================================
 * NAVIGATION
 * =========================================================
 *
 * Navigation is outside the clipped media wrapper,
 * so the buttons are not cut by the hero clip-path.
 */

.apoll-slider__navigation {
    position: absolute;

    right: 24px;
    bottom: 24px;

    z-index: 5;

    display: flex;
    align-items: stretch;

    width: calc(var(--apoll-nav-size) * 2);
    height: var(--apoll-nav-size);

    margin: 0;
    padding: 0;
}


/*
 * =========================================================
 * NAVIGATION BUTTONS
 * =========================================================
 */

.apoll-slider__button {
    position: relative;

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

    width: var(--apoll-nav-size);
    height: var(--apoll-nav-size);

    flex: 0 0 var(--apoll-nav-size);

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: var(--apoll-graphite);
    color: var(--apoll-white);

    font: inherit;

    cursor: pointer;

    -webkit-appearance: none;
    appearance: none;

    transition:
        background-color 140ms ease,
        color 140ms ease;
}


/*
 * Previous button geometry.
 */
.apoll-slider__button--prev {
    clip-path: polygon(
        14% 0,
        100% 0,
        100% 100%,
        14% 100%,
        0 82%,
        0 18%
    );
}


/*
 * Next button geometry.
 */
.apoll-slider__button--next {
    clip-path: polygon(
        0 0,
        82% 0,
        100% 18%,
        100% 82%,
        82% 100%,
        0 100%
    );
}


.apoll-slider__button:hover {
    background: var(--apoll-accent);
    color: var(--apoll-white);
}


.apoll-slider__button:focus {
    outline: none;
}


.apoll-slider__button:focus-visible {
    outline: 2px solid var(--apoll-white);
    outline-offset: -5px;
}


/*
 * Inline SVG arrows.
 */
.apoll-slider__button svg {
    display: block;

    width: 24px;
    height: 24px;

    max-width: 46%;
    max-height: 46%;

    pointer-events: none;
}


/*
 * Subtle separator between navigation buttons.
 */
.apoll-slider__button--next::before {
    content: "";

    position: absolute;

    top: 18%;
    bottom: 18%;
    left: 0;

    width: 1px;

    background: rgba(255, 255, 255, 0.22);
}


/*
 * No navigation when only one slide exists.
 */
.apoll-slider--single .apoll-slider__navigation {
    display: none;
}


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

@media (max-width: 991px) {

    .apoll-slider {
        width: calc(100% - 30px);

        margin-top: 15px;
        margin-bottom: 25px;
    }

    .apoll-slider__media {
        aspect-ratio: 16 / 6;

        min-height: 250px;
        max-height: 380px;
    }
}


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

@media (max-width: 767px) {

    :root {
        --apoll-hero-cut: clamp(9px, 3vw, 16px);
        --apoll-nav-size: clamp(50px, 14vw, 58px);
    }

    .apoll-slider {
        width: calc(100% - 20px);

        margin-top: 10px;
        margin-bottom: 20px;
    }

    .apoll-slider__media {
        aspect-ratio: 16 / 8;

        min-height: 220px;
        max-height: 360px;
    }
	.apoll-slider__navigation {
    right: 12px;
    bottom: 12px;
}



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

@media (max-width: 420px) {

    .apoll-slider {
        width: calc(100% - 16px);

        margin-top: 8px;
        margin-bottom: 16px;
    }

    .apoll-slider__media {
        aspect-ratio: 16 / 9;

        min-height: 210px;
        max-height: 300px;
    }
}


/*
 * =========================================================
 * REDUCED MOTION
 * =========================================================
 */

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

    .apoll-slider.is-js-ready .apoll-slider__slide {
        transition: none;
    }

    .apoll-slider__button {
        transition: none;
    }
}