/* =====================================================================
   CD&C  |  Hero background slider
   File: addition/css/cdc-hero-slider.css
   Load after css/style.css and coloring.css
   ===================================================================== */

/* ---------- Slider shell (sits behind the hero text) ---------- */
#section-intro .cdc-hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

#section-intro .cdc-hero-slider .swiper-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 1;
    box-sizing: content-box;
    transition-property: transform;
}

#section-intro .cdc-hero-slider .swiper-slide {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition-property: transform;
}

#section-intro .cdc-hero-slide-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    /* photo itself stays completely sharp - no blur on the image */
    filter: none !important;
    transform: none !important;
}


/* =====================================================================
   DARK SCRIM  +  WHITE TEXT
   =====================================================================
   The theme's three WHITE layers are off. In their place: one dark
   gradient down the left side, so white text reads cleanly and the
   right half of the photo stays bright and untouched.

   Darker text area   -> raise the .92 / .85
   More photo showing -> lower them, or pull the 62% / 85% stops left
   ===================================================================== */

#section-intro .abs.bg-white,
#section-intro .gradient-edge-start {
    display: none !important;
}

#section-intro .sw-overlay {
    display: block !important;
    opacity: 1 !important;
    z-index: 2;
    background: linear-gradient(
        90deg,
        rgba(12, 14, 12, .92)  0%,
        rgba(12, 14, 12, .85) 22%,
        rgba(12, 14, 12, .55) 45%,
        rgba(12, 14, 12, .20) 62%,
        rgba(12, 14, 12, 0)   85%
    ) !important;
}

/* ---------- text turns white ---------- */
#section-intro h1 {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* second line keeps the brand green */
#section-intro h1.id-color {
    color: #a4ac74 !important;
}

#section-intro .abs.abs-middle p,
#section-intro .abs.abs-middle span:not(.badge) {
    color: rgba(255, 255, 255, .88) !important;
    text-shadow: none !important;
}

/* ---------- stats bar reads on a dark hero ---------- */
#section-intro .bg-blur {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .18);
}

#section-intro .bg-blur h2,
#section-intro .bg-blur span {
    color: #ffffff !important;
}

#section-intro .bg-blur .id-color {
    color: #a4ac74 !important;
}


/* ---------- Prev / Next arrows ---------- */
#section-intro .cdc-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(20, 22, 20, .45);
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all ease .3s;
}

#section-intro .cdc-hero-nav:hover {
    background: #8b8f6b;
    border-color: #8b8f6b;
    color: #fff;
}

#section-intro .cdc-hero-nav:focus { outline: none; }

#section-intro .cdc-hero-prev { left: 25px; }
#section-intro .cdc-hero-next { right: 25px; }

#section-intro .cdc-hero-nav.cdc-hidden { display: none; }


/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* ---------- Small laptop ---------- */
@media only screen and (max-width: 1199px) {
    #section-intro .cdc-hero-nav {
        width: 46px;
        height: 46px;
        font-size: 19px;
    }
    #section-intro .cdc-hero-prev { left: 15px; }
    #section-intro .cdc-hero-next { right: 15px; }

    #section-intro .sw-overlay {
        background: linear-gradient(
            90deg,
            rgba(12, 14, 12, .92)  0%,
            rgba(12, 14, 12, .82) 35%,
            rgba(12, 14, 12, .45) 60%,
            rgba(12, 14, 12, 0)   90%
        ) !important;
    }
}


/* ---------- Tablet ---------- */
@media only screen and (max-width: 991px) {

    #section-intro .mh-800 {
        min-height: 640px !important;
    }

    #section-intro h1 {
        font-size: 46px !important;
        line-height: 1.08 !important;
    }

    #section-intro .abs.abs-middle .col-lg-6 {
        max-width: 90%;
    }
}



/* =====================================================================
   MOBILE IMAGE SWAP
   =====================================================================
   index.php puts two addresses on each slide:

       --cdc-bg     the wide photo   images/home/1.webp
       --cdc-bg-m   the tall photo   images/home/mobile/1.webp

   Desktop uses the wide one. Phones use the tall one if you have made
   it, and quietly fall back to the wide one if you have not - so you
   can add the mobile crops one at a time.
   ===================================================================== */

#section-intro .cdc-hero-slide-img {
    background-image: var(--cdc-bg);
}

@media only screen and (max-width: 767px) {
    #section-intro .cdc-hero-slide-img {
        background-image: var(--cdc-bg-m, var(--cdc-bg));
    }
}


/* =====================================================================
   PHONES  -  up to 767px
   =====================================================================
   Full bleed photo. No card, no frosted panel, no heavy wash.

   The headline sits low on the picture and is kept readable by a soft
   fade that rises from the bottom edge - the way a photo caption works,
   rather than a box sitting on top of the image.

   Bottom row: arrow, dots, arrow.
   ===================================================================== */
@media only screen and (max-width: 767px) {

    #section-intro {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    #section-intro .mh-800 {
        min-height: 88vh !important;
        height: auto !important;
        display: block !important;
        position: relative !important;
    }

    /* text block anchored to the bottom of the photo */
    #section-intro .abs.abs-middle {
        position: absolute !important;
        top: auto !important;
        bottom: 96px !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        padding: 0 !important;
    }

    #section-intro .container {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    #section-intro .abs.abs-middle .col-lg-10,
    #section-intro .abs.abs-middle .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;

        /* explicitly NO card - the panel is gone */
        background: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* -----------------------------------------------------------------
       The only darkening on the whole photo: a soft rise from the
       bottom edge. The top two thirds of the picture are untouched.
       Text harder to read -> raise the .78
       ----------------------------------------------------------------- */
    #section-intro .sw-overlay {
        background: linear-gradient(
            180deg,
            rgba(12, 14, 12, 0)    0%,
            rgba(12, 14, 12, 0)   34%,
            rgba(12, 14, 12, .34) 56%,
            rgba(12, 14, 12, .70) 78%,
            rgba(12, 14, 12, .82) 100%
        ) !important;
    }

    /* the description is cut on phones - headline and button only */
    #section-intro .abs.abs-middle p {
        display: none !important;
    }

    #section-intro h1 {
        font-size: 40px !important;
        line-height: 1.06 !important;
        letter-spacing: -1.2px !important;
        margin-bottom: 0 !important;
        text-shadow: 0 2px 18px rgba(0, 0, 0, .34) !important;
    }

    #section-intro h1.mb-4 {
        margin-bottom: 26px !important;
    }

    #section-intro .btn-main {
        padding: 15px 32px !important;
        font-size: 15.5px !important;
        border-radius: 100px !important;
    }

    /* -----------------------------------------------------------------
       BOTTOM ROW:   <     o o o     >
       ----------------------------------------------------------------- */
    #section-intro .cdc-hero-nav {
        width: 44px;
        height: 44px;
        font-size: 26px;
        top: auto !important;
        bottom: 26px !important;
        transform: none !important;
        background: none !important;
        border: 0 !important;
        color: #ffffff !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    }

    #section-intro .cdc-hero-prev { left: 10px !important;  right: auto !important; }
    #section-intro .cdc-hero-next { right: 10px !important; left: auto !important; }

    #section-intro .cdc-hero-nav:active { color: #c3caa0 !important; }

    #section-intro .cdc-hero-dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 40px;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        pointer-events: auto;
    }

    #section-intro .cdc-hero-dot {
        display: block;
        width: 9px;
        height: 9px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .45);
        cursor: pointer;
        transition: background .25s ease, width .25s ease;
    }

    #section-intro .cdc-hero-dot-on {
        background: #ffffff;
        width: 26px;
        border-radius: 100px;
    }

    #section-intro .cdc-hero-dots.cdc-hidden { display: none; }
}


/* ---------- Small phones ---------- */
@media only screen and (max-width: 460px) {

    #section-intro .mh-800 { min-height: 84vh !important; }

    #section-intro .abs.abs-middle { bottom: 88px !important; }

    #section-intro .container {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    #section-intro h1 { font-size: 34px !important; }

    #section-intro h1.mb-4 { margin-bottom: 22px !important; }

    #section-intro .btn-main {
        padding: 14px 28px !important;
        font-size: 15px !important;
    }

    #section-intro .cdc-hero-nav { font-size: 24px; bottom: 22px !important; }
    #section-intro .cdc-hero-dots { bottom: 36px; }
}


/* ---------- Landscape phone ---------- */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    #section-intro .mh-800 { min-height: 100vh !important; }
    #section-intro .abs.abs-middle { bottom: 74px !important; }
    #section-intro h1 { font-size: 28px !important; }
    #section-intro p  { display: none !important; }
}


/* =====================================================================
   The scrolling word strip under the hero - fs-48 is enormous on a
   phone, one word filled the screen.
   ===================================================================== */
@media only screen and (max-width: 767px) {
    .de-marquee-list-1 .hs-2,
    .de-marquee-list-1 .fs-48 {
        font-size: 21px !important;
        line-height: 1.25 !important;
    }

    .de-marquee-list-1 .mx-4 {
        margin-left: 14px !important;
        margin-right: 14px !important;
    }
}

@media only screen and (max-width: 460px) {
    .de-marquee-list-1 .hs-2,
    .de-marquee-list-1 .fs-48 {
        font-size: 18px !important;
    }
}


/* =====================================================================
   HERO STATS BAR - blank until you scrolled
   =====================================================================
   The theme animates elements in with WOW.js. WOW puts an inline
   visibility:hidden on every .wow element and only clears it when a
   SCROLL event brings the element into range.

   The headline sits high enough to be cleared on page load. The stats
   bar sits lower, so on a tall screen it was still waiting for a scroll
   that never came - you got an empty glass box.

   An !important in a stylesheet beats an inline style that has no
   !important of its own, so this wins over what WOW writes. The bar is
   visible from the first paint and still animates in gently by itself,
   with no scrolling needed.
   ===================================================================== */

#section-intro .wow,
#section-intro .de_count {
    visibility: visible !important;
    animation-name: cdcHeroRise;
    animation-duration: .8s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

#section-intro .de_count { animation-delay: .25s; }

@keyframes cdcHeroRise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

/* Anyone who has asked their device for reduced motion just gets it
   straight away, with no movement at all. */
@media (prefers-reduced-motion: reduce) {
    #section-intro .wow,
    #section-intro .de_count {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}