/* =========================================================
   ACE HOME HERO CAROUSEL
   ---------------------------------------------------------
   Markup:  template-parts/home-hero.php
   Data:    "Hero Slides" post type (inc/hero-slider.php)
   Engine:  Bootstrap 4.3.1 native carousel (already loaded by the theme)

   Per-slide colours arrive as CSS variables on each .ace-slide:
     --ace-heading  --ace-highlight  --ace-text  --ace-btn-bg  --ace-btn-text
   Anything not set falls back to the defaults below.
   ========================================================= */

.ace-hero {
    --ace-orange: #ea671b;
    --ace-btn-fallback: #e16c00;

    position: relative;
    overflow: hidden;
    background: #0b1a2b;
}

/* match the header's content width */
.ace-hero .container { max-width: 1200px; }


/* ---------------------------------------------------------
   FADE CAROUSEL
   All slides share one grid cell, so the carousel is always as
   tall as its TALLEST slide: no height jump between slides on
   any screen size. Bootstrap's JS still drives the .active /
   .carousel-item-next / -prev classes.
   --------------------------------------------------------- */
.ace-hero .carousel-inner { display: grid; }

.ace-hero .carousel-item {
    grid-area: 1 / 1;
    display: block;
    float: none;
    margin-right: 0;
    opacity: 0;
    visibility: hidden;
    transform: none !important;
    transition: opacity .7s ease-in-out, visibility 0s linear .7s;
}

.ace-hero .carousel-item.active,
.ace-hero .carousel-item-next,
.ace-hero .carousel-item-prev {
    visibility: visible;
    transition: opacity .7s ease-in-out;
}

.ace-hero .carousel-item.active,
.ace-hero .carousel-item-next.carousel-item-left,
.ace-hero .carousel-item-prev.carousel-item-right {
    opacity: 1;
}

.ace-hero .carousel-item.active.carousel-item-left,
.ace-hero .carousel-item.active.carousel-item-right {
    opacity: 0;
}


/* ---------------------------------------------------------
   SLIDE
   --------------------------------------------------------- */
.ace-slide {
    position: relative;
    min-height: clamp(620px, 90vh, 860px);
    background-color: #0b1a2b;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

.ace-slide__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ace-slide__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: inherit;
    /* top: room for the overlap header · bottom: room for dots + scroll cue */
    padding: var(--ace-header-h, 140px) 0 30px;
}

.ace-slide__inner > .container { width: 100%; }


/* text ------------------------------------------------------ */
.ace-hero .carousel-inner .ace-slide__title {
    margin: 0 0 18px;
    color: var(--ace-heading, #fff);
    font-family: 'Roboto', sans-serif;
    font-size: clamp(26px, 2.3vw, 36px) !important;   /* beats the legacy .carousel-inner h1 rule */
    font-weight: 700 !important;
    line-height: 1.25;
}

.ace-slide__hl { color: var(--ace-highlight, var(--ace-orange)); }

.ace-hero .carousel-inner .ace-slide__desc p {
    margin: 0 0 .9em;
    color: var(--ace-text, #fff);
    font-family: 'Roboto', sans-serif;
    font-size: clamp(15px, 1.15vw, 17px) !important;
    font-weight: 400;
    line-height: 1.75;
}

.ace-slide__desc { max-width: 560px; }


/* button (orange block with the darker left tab) ------------ */
.ace-slide__btn {
    position: relative;
    display: inline-block;
    margin: 10px 0 0 15px;
    padding: 9px 18px;
    border-radius: 0 5px 5px 0;
    background: var(--ace-btn-bg, var(--ace-btn-fallback));
    color: var(--ace-btn-text, #fff);
    font: 400 16px/1.4 Arial, Helvetica, sans-serif;
    text-decoration: none;
    transition: filter .2s ease, transform .2s ease;
}

.ace-slide__btn::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15px;
    width: 15px;
    border-radius: 5px 0 0 5px;
    background: var(--ace-btn-bg, var(--ace-btn-fallback));
    filter: brightness(.72);
}

.ace-slide__btn:hover,
.ace-slide__btn:focus {
    color: var(--ace-btn-text, #fff);
    text-decoration: none;
    filter: brightness(.92);
    transform: translateY(-1px);
}


/* image ----------------------------------------------------- */
.ace-slide__media { text-align: right; }

.ace-slide__img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(58vh, 520px);
    object-fit: contain;
}


/* entrance animation (only the active slide) ---------------- */
@keyframes aceInLeft  { from { opacity: 0; transform: translate3d(-36px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes aceInRight { from { opacity: 0; transform: translate3d(36px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes aceInUp    { from { opacity: 0; transform: translate3d(0, 24px, 0); }  to { opacity: 1; transform: none; } }

.ace-hero .carousel-item.active .ace-slide__title { animation: aceInLeft  .9s ease both; }
.ace-hero .carousel-item.active .ace-slide__desc  { animation: aceInRight .9s ease .15s both; }
.ace-hero .carousel-item.active .ace-slide__btn   { animation: aceInUp    .8s ease .35s both; }
.ace-hero .carousel-item.active .ace-slide__img   { animation: aceInRight 1s   ease .2s both; }


/* ---------------------------------------------------------
   ARROWS  (round, translucent orange)
   --------------------------------------------------------- */
.ace-hero .carousel-control-prev,
.ace-hero .carousel-control-next {
    top: 50%;
    bottom: auto;
    width: 52px !important;
    height: 52px;
    margin-top: -26px;
    border-radius: 50%;
    background: rgba(254, 177, 78, .55);
    opacity: 1;
    z-index: 6;
    transition: background-color .2s ease, transform .2s ease;
}

.ace-hero .carousel-control-prev { left: 24px; }
.ace-hero .carousel-control-next { right: 24px; }

.ace-hero .carousel-control-prev:hover,
.ace-hero .carousel-control-next:hover,
.ace-hero .carousel-control-prev:focus,
.ace-hero .carousel-control-next:focus {
    background: var(--ace-orange);
    transform: scale(1.06);
}

/* neutralise the legacy circle drawn with :after in homepage.css */
.ace-hero .carousel-control-prev::after,
.ace-hero .carousel-control-next::after {
    content: none !important;
    display: none !important;
}

.ace-hero .carousel-control-prev-icon,
.ace-hero .carousel-control-next-icon {
    width: 18px !important;
    height: 18px !important;
}


/* ---------------------------------------------------------
   DOTS  +  SCROLL-DOWN CUE
   --------------------------------------------------------- */
.ace-hero .carousel-indicators {
    bottom: 18px;
    margin-right: 15%;
    margin-left: 15%;
    z-index: 6;
}

.ace-hero .carousel-indicators li {
    width: 34px;
    height: 4px;
    margin: 0 4px;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    background-clip: padding-box;
    opacity: .45;
    transition: opacity .2s ease, background-color .2s ease;
}

.ace-hero .carousel-indicators li.active {
    background-color: var(--ace-orange);
    opacity: 1;
}

.ace-hero__down {
    position: absolute;
    left: 50%;
    bottom: 56px;
    z-index: 6;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    color: #fff;
    animation: aceBounce 2.2s ease-in-out infinite;
}

.ace-hero__down:hover { color: var(--ace-orange); }

.ace-hero__down svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

@keyframes aceBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-9px); }
    60% { transform: translateY(-4px); }
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

/* tablet: slightly shorter, image a little smaller */
@media (max-width: 991.98px) {
    .ace-slide { min-height: clamp(560px, 82vh, 760px); }
    .ace-slide__inner { padding-bottom: 30px; }
    .ace-slide__img { max-height: 380px; }

    /* arrows would sit on top of the text at this width: swipe + dots instead */
    .ace-hero .carousel-control-prev,
    .ace-hero .carousel-control-next { display: none; }
}

/* phones: stack text over image */
@media (max-width: 767.98px) {

    .ace-slide { min-height: 0; }

    .ace-slide__inner {
        display: block;
        padding: calc(var(--ace-header-h, 84px) + 16px) 0 30px;
    }

    .ace-slide__desc { max-width: none; }

    .ace-hero .carousel-inner .ace-slide__desc p {
        font-size: 15px !important;
        line-height: 1.65;
    }

    /* keep long copy from making the slide huge on a phone */
    .ace-slide__desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
    }

    .ace-slide__media {
        margin-top: 22px;
        text-align: center;
    }

    .ace-slide__img { max-height: 210px; }

    .ace-hero .carousel-indicators { bottom: 14px; }
    .ace-hero__down { display: none; }
}

@media (max-width: 575.98px) {
    .ace-slide__btn { padding: 9px 16px; font-size: 15px; }
}

/* very short laptop screens */
@media (min-width: 992px) and (max-height: 700px) {
    .ace-slide { min-height: 600px; }
}

@media (prefers-reduced-motion: reduce) {
    .ace-hero .carousel-item { transition: none; }
    .ace-hero .carousel-item.active .ace-slide__title,
    .ace-hero .carousel-item.active .ace-slide__desc,
    .ace-hero .carousel-item.active .ace-slide__btn,
    .ace-hero .carousel-item.active .ace-slide__img,
    .ace-hero__down { animation: none; }
}