/* ============================================================
   Homepage banner slideshow
   ============================================================ */

.banner-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Height collapses to the tallest visible slide image */
    line-height: 0;
}

/* Slide container — sized by its content */
.banner-slides {
    position: relative;
    width: 100%;
}

/* All slides stacked on top of each other. The transition + transform are set
   per mode below (.is-fade / .is-slide) so the slideshow can alternate between a
   slide-in round and a fade round; the JS swaps the mode class at round boundaries. */
.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

/* The first slide holds the natural height of the container */
.banner-slide:first-child {
    position: relative;
}

.banner-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.banner-slide img {
    width: 100%;
    display: block;
}

/* ---- Fade round: cross-fade in place ---- */
.banner-slider.is-fade .banner-slide {
    -webkit-transition: opacity 0.6s ease-in-out;
            transition: opacity 0.6s ease-in-out;
    -webkit-transform: none;
            transform: none;
}

/* ---- Slide round: incoming enters from the right, outgoing exits to the left ---- */
.banner-slider.is-slide .banner-slide {
    -webkit-transition: -webkit-transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
            transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
}
.banner-slider.is-slide .banner-slide.active {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
.banner-slider.is-slide .banner-slide.is-leaving {
    opacity: 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
}

/* Navigation arrows */
.banner-arrow {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: background 0.2s;
            transition: background 0.2s;
}

.banner-arrow:hover {
    background: rgba(0, 0, 0, 0.6);
}

.banner-arrow .material-icons {
    color: #fff;
    font-size: 28px;
    line-height: 1;
}

.banner-arrow-left  { left: 12px; }
.banner-arrow-right { right: 12px; }

/* On phones, ENLARGE the arrows into a comfortable tap target (~52px, above the
   44px touch guideline) so they can be pressed without mis-tapping the banner
   link underneath. */
@media (max-width: 480px) {
    .banner-arrow {
        width: 52px;
        height: 52px;
        background: rgba(0, 0, 0, 0.2); /* more transparent on mobile */
    }
    /* Keep it transparent on tap too — on touch the :hover darken otherwise
       sticks after a tap and leaves the arrow stuck dark. */
    .banner-arrow:hover,
    .banner-arrow:active {
        background: rgba(0, 0, 0, 0.2);
    }
    .banner-arrow .material-icons {
        font-size: 32px;
    }
    .banner-arrow-left  { left: 8px; }
    .banner-arrow-right { right: 8px; }
}