/* ============================================================
   Landing hero slider
   ------------------------------------------------------------
   Modelled on the Strada demo the client picked: one photograph
   per slide under a diagonal wash that is nearly opaque on the
   left and clear on the right, the text set against the dark
   side, and the slide count with two square arrows tucked into
   the bottom-right corner.

   Built on the owl-carousel the layout already loads rather than
   a second slider library - the landing page is on a weight
   budget. Its own kx-* class names keep it clear of
   .header-carousel, which every inner-page banner still uses as
   a plain 550px strip and which must not change.
   ============================================================ */
.kx-hero {
    --kx-accent: #4caf50;
    /* The strip above the navbar; kx-hero.js measures the real height at
       every breakpoint, this is only the value used before it runs. */
    --kx-hero-top: 45px;
    position: relative;
}

/* Owl draws its own arrows and dots below the stage. The controls in the
   corner replace both. */
.kx-hero .owl-nav,
.kx-hero .owl-dots {
    display: none;
}

/* --- The frame ---------------------------------------------- */
.kx-hero .kx-frame {
    position: relative;
    height: calc(100vh - var(--kx-hero-top));
    min-height: 560px;
    overflow: hidden;
}

/* 0,3,0 so it outranks owl's own `.owl-carousel .owl-item img`. */
.kx-hero .owl-item .kx-frame-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Six seconds of drift across a slide that lives for six. */
    transition: transform 6s cubic-bezier(.25, .46, .45, .94);
}

.kx-hero .owl-item.active .kx-frame-img {
    transform: scale(1.08);
}

.kx-hero .kx-frame-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Two layers. The diagonal wash is the reference design: dark where the
       text sits, all but clear on the far side. The band along the bottom is
       ours - the count and the arrows sit in the clear corner, and over a
       pale photograph like the first slide white-on-white leaves them barely
       visible. It stops well short of the text. */
    background:
        linear-gradient(0deg,
            rgba(0, 0, 0, .45) 0%,
            rgba(0, 0, 0, 0) 28%),
        linear-gradient(105deg,
            rgba(0, 0, 0, .78) 0%,
            rgba(0, 0, 0, .55) 40%,
            rgba(0, 0, 0, .15) 100%);
}

.kx-hero .kx-frame-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0 8%;
}

/* Wider than the 600px of the reference: the Macedonian side of these
   strings runs about a fifth longer than the English. */
.kx-hero .kx-content-inner {
    max-width: 640px;
}

/* --- The text ----------------------------------------------- */
.kx-hero .kx-accent-line {
    display: block;
    width: 56px;
    height: 2px;
    margin-bottom: 28px;
    background: var(--kx-accent);
    transition: width .6s;
}

.kx-hero .owl-item.active .kx-accent-line {
    width: 80px;
}

.kx-hero .kx-tag {
    display: inline-block;
    margin-bottom: 24px;
    font-family: "Inter", "Roboto", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kx-accent);
}

.kx-hero .kx-content-inner h2 {
    margin: 0 0 24px;
    font-family: "Inter", "Roboto", sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .02em;
    color: #fff;
    text-align: left;
}

/* style.css justifies every <p> on the public pages; a two-line lead
   pulled apart by justification looks like a mistake. */
.kx-hero .kx-content-inner p {
    margin: 0 0 36px;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, .72);
    text-align: left;
}

.kx-hero .kx-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    font-family: "Inter", "Roboto", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 2px;
    transition: .5s;
}

.kx-hero .kx-hero-btn:hover,
.kx-hero .kx-hero-btn:focus-visible {
    color: #fff;
    text-decoration: none;
    background: var(--kx-accent);
    border-color: var(--kx-accent);
}

.kx-hero .kx-hero-btn i {
    font-size: 14px;
    transition: transform .5s;
}

.kx-hero .kx-hero-btn:hover i {
    transform: translateX(5px);
}

/* --- The entrance -------------------------------------------
   Four rows lifted into place one after another, keyed off the slide
   owl marks active. The outgoing slide keeps that class for the length
   of the cross-fade, so it is excluded by hand or the text it is
   already fading out would play the whole sequence again. */
.kx-hero .kx-tag,
.kx-hero .kx-content-inner h2,
.kx-hero .kx-content-inner p,
.kx-hero .kx-hero-btn {
    opacity: 0;
    transform: translateY(20px);
}

.kx-hero .kx-tag {
    transform: translateY(12px);
    transition: .7s .2s;
}

.kx-hero .kx-content-inner h2 {
    transition: .7s .35s;
}

.kx-hero .kx-content-inner p {
    transition: .7s .5s;
}

.kx-hero .owl-item.active:not(.owl-animated-out) .kx-tag,
.kx-hero .owl-item.active:not(.owl-animated-out) .kx-content-inner h2,
.kx-hero .owl-item.active:not(.owl-animated-out) .kx-content-inner p,
.kx-hero .owl-item.active:not(.owl-animated-out) .kx-hero-btn {
    opacity: 1;
    transform: translateY(0);
}

.kx-hero .owl-item.active:not(.owl-animated-out) .kx-hero-btn {
    transition: .7s .65s;
}

/* Once it has arrived the button answers the pointer at its own speed,
   not on the entrance delay. */
.kx-hero .owl-item.active:not(.owl-animated-out) .kx-hero-btn:hover {
    transition: .5s;
}

/* --- The band behind the header ------------------------------
   Above 992px the navbar is transparent and absolutely positioned over the
   top of the hero, so the logo and the menu sit on whatever the photograph
   happens to put behind them and the header does not read as a header. A
   shallow wash across the top of the frame gives it an edge. Deliberately
   short of a bar: it is gone by the time the eye reaches the accent line.

   Below 992px the header is a solid block in normal flow above the hero, so
   there is nothing to separate and this does not apply. Neither does it
   touch .navbar itself - nine inner-page banners share that element and
   they already carry a 50% overlay of their own. */
@media (min-width: 992px) {
    .kx-hero .kx-frame-overlay::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 210px;
        background: linear-gradient(180deg,
                rgba(0, 0, 0, .26) 0,
                rgba(0, 0, 0, .22) 92px,
                rgba(0, 0, 0, 0) 100%);
    }
}

/* --- Count and arrows --------------------------------------- */
.kx-hero .kx-hero-controls {
    position: absolute;
    right: 8%;
    bottom: 48px;
    z-index: 3;
}

.kx-hero .kx-hero-controls-inner {
    display: flex;
    align-items: center;
    gap: 32px;
}

.kx-hero .kx-hero-count {
    font-family: "Inter", "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .6);
}

.kx-hero .kx-hero-current {
    font-size: 28px;
    font-weight: 500;
    color: #fff;
}

.kx-hero .kx-hero-arrows {
    display: flex;
    align-items: center;
    gap: 4px;
}

.kx-hero .kx-hero-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    color: rgba(255, 255, 255, .7);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 0;
    cursor: pointer;
    transition: .5s;
}

.kx-hero .kx-hero-nav:hover,
.kx-hero .kx-hero-nav:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
}

/* --- Narrower screens --------------------------------------- */
@media (max-width: 1200px) {
    .kx-hero .kx-content-inner {
        max-width: 560px;
    }

    .kx-hero .kx-content-inner h2 {
        font-size: 42px;
    }
}

@media (max-width: 992px) {
    .kx-hero .kx-frame {
        min-height: 480px;
    }

    .kx-hero .kx-frame-content {
        padding: 0 6%;
    }

    .kx-hero .kx-content-inner h2 {
        font-size: 36px;
    }

    .kx-hero .kx-content-inner p {
        font-size: 16px;
    }

    .kx-hero .kx-hero-controls {
        right: 6%;
        bottom: 36px;
    }
}

/* On a phone the photograph is too narrow for a side-lit wash to read, so
   the gradient stands up and the text drops to the bottom of the frame. */
@media (max-width: 768px) {
    .kx-hero .kx-frame {
        min-height: 520px;
    }

    .kx-hero .kx-frame-overlay {
        background: linear-gradient(180deg,
                rgba(0, 0, 0, .25) 0%,
                rgba(0, 0, 0, .70) 60%,
                rgba(0, 0, 0, .85) 100%);
    }

    .kx-hero .kx-frame-content {
        align-items: flex-end;
        padding: 0 24px 120px;
    }

    .kx-hero .kx-content-inner {
        max-width: 100%;
    }

    .kx-hero .kx-content-inner h2 {
        font-size: 30px;
    }

    .kx-hero .kx-content-inner p {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .kx-hero .kx-hero-btn {
        padding: 14px 32px;
        font-size: 12px;
    }

    .kx-hero .kx-hero-current {
        font-size: 22px;
    }

    .kx-hero .kx-hero-nav {
        width: 44px;
        height: 44px;
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .kx-hero .kx-frame {
        min-height: 460px;
    }

    .kx-hero .kx-frame-content {
        padding: 0 20px 100px;
    }

    .kx-hero .kx-accent-line {
        width: 40px;
        margin-bottom: 20px;
    }

    .kx-hero .owl-item.active .kx-accent-line {
        width: 56px;
    }

    .kx-hero .kx-tag {
        font-size: 11px;
        margin-bottom: 18px;
    }

    .kx-hero .kx-content-inner h2 {
        font-size: 26px;
    }

    .kx-hero .kx-hero-nav {
        width: 40px;
        height: 40px;
    }
}

/* Nothing here carries meaning that the movement is needed to read, so it
   all comes off for anyone who asked for less of it. kx-hero.js turns the
   autoplay off on the same query. */
@media (prefers-reduced-motion: reduce) {
    .kx-hero .kx-frame-img,
    .kx-hero .kx-accent-line,
    .kx-hero .kx-tag,
    .kx-hero .kx-content-inner h2,
    .kx-hero .kx-content-inner p,
    .kx-hero .kx-hero-btn {
        transition-duration: .01ms;
    }

    .kx-hero .owl-item.active .kx-frame-img {
        transform: none;
    }

    .kx-hero .kx-tag,
    .kx-hero .kx-content-inner h2,
    .kx-hero .kx-content-inner p,
    .kx-hero .kx-hero-btn {
        opacity: 1;
        transform: none;
    }
}