/*
 * Home page hero banner.
 *
 * Kept in its own file rather than added to the design team's style.css, so a
 * fresh drop of their stylesheet cannot wipe it and this stays easy to hand over.
 */

.hero-banner {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.hero-banner__link {
    display: block;
}

/* The artwork is 1920x653 on desktop and 992x992 on mobile. Declaring the
   ratio per breakpoint stops the page jumping while the image loads. */
.hero-banner__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 653;
    object-fit: cover;
}

@media (max-width: 767px) {
    .hero-banner__img {
        aspect-ratio: 1 / 1;
    }
}

/* The arrows sit on light artwork, so they need a backing to stay visible. */
.hero-banner .carousel-control-prev,
.hero-banner .carousel-control-next {
    width: auto;
    padding: 0 1.25rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.hero-banner:hover .carousel-control-prev,
.hero-banner:hover .carousel-control-next,
.hero-banner .carousel-control-prev:focus-visible,
.hero-banner .carousel-control-next:focus-visible {
    opacity: 1;
}

.hero-banner .carousel-control-prev-icon,
.hero-banner .carousel-control-next-icon {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.85rem;
    border-radius: 50%;
    background-color: rgba(208, 50, 47, 0.85);
    background-size: 45% 45%;
}

.hero-banner .carousel-indicators {
    /* The artwork has its own call to action in the lower centre, so the dots
       sit to the right rather than on top of it. */
    justify-content: flex-end;
    margin-right: 2.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 767px) {
    .hero-banner .carousel-indicators {
        justify-content: center;
        margin-right: 0;
    }
}

.hero-banner .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.25);
    opacity: 1;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero-banner .carousel-indicators .active {
    background-color: #d0322f;
    transform: scale(1.25);
}

@media (max-width: 767px) {
    .hero-banner .carousel-control-prev,
    .hero-banner .carousel-control-next {
        display: none;   /* swipe instead; the arrows crowd a square banner */
    }
}

/* Someone who prefers reduced motion should not get a cross-fading carousel. */
@media (prefers-reduced-motion: reduce) {
    .hero-banner .carousel-item {
        transition: none;
    }
}