/**
 * Hero Slider Widget Styles
 *
 * @package Marlab
 */

.mziq-hero-slider {
    position: relative;
    width: 100%;
    /* Static banner: size by a fixed wide aspect ratio instead of the viewport
       height (100vh), so the framing is identical at every zoom level and on
       mobile (the old 100vh made the crop shift as the window height changed).
       The media fills it with object-fit:cover (below) — same crop everywhere. */
    aspect-ratio: 2.3 / 1;
    overflow: hidden;
    z-index: 2;
    background: #041428;
}

.mziq-hero-slider__slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.mziq-hero-slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.mziq-hero-slider__slide.mziq-active {
    opacity: 1;
    visibility: visible;
}

.mziq-hero-slider__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    /* cover: fill the banner completely (no navy bars). Because the container is
       a FIXED aspect ratio (2.3:1, width-driven) rather than the viewport height,
       the crop is now identical at every zoom level and screen size — it no
       longer shifts the way the old height:100vh version did. */
    object-fit: cover;
    object-position: center;
}

.mziq-hero-slider__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mziq-hero-slider__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(4, 20, 40, 0.85) 0%, rgba(4, 20, 40, 0.6) 40%, rgba(4, 20, 40, 0.2) 70%, transparent 100%);
}

.mziq-hero-slider__content {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 80px;
    box-sizing: border-box;
    z-index: 10;
}

.mziq-hero-slider__text {
    max-width: 600px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

.mziq-hero-slider__slide.mziq-active .mziq-hero-slider__text {
    opacity: 1;
    transform: translateY(0);
}

.mziq-hero-slider__subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    padding: 8px 16px;
    background: rgba(74, 91, 110, 0.6);
    border-left: 3px solid #4A5B6E;
}

.mziq-hero-slider__title {
    font-size: 56px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.mziq-hero-slider__title span {
    display: block;
    color: #DCB694;
}

.mziq-hero-slider__description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 35px;
}

.mziq-hero-slider__buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.mziq-hero-slider__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mziq-hero-slider__btn--primary {
    background: #4A5B6E;
    color: #ffffff;
    border: 2px solid #041428;
}

.mziq-hero-slider__btn--primary:hover {
    background: #4A5B6E;
    border-color: #4A5B6E;
    color: #ffffff;
}

.mziq-hero-slider__btn--secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.mziq-hero-slider__btn--secondary:hover {
    background: #ffffff;
    color: #041428;
}

/* Navigation Arrows */
.mziq-hero-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(4, 20, 40, 0.6);
    border: none;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mziq-hero-slider__nav:hover {
    background: #041428;
}

.mziq-hero-slider__nav--prev {
    left: 30px;
}

.mziq-hero-slider__nav--next {
    right: 30px;
}

/* Pagination Dots */
.mziq-hero-slider__pagination {
    position: absolute;
    bottom: 40px;
    left: 80px;
    display: flex;
    gap: 12px;
    z-index: 20;
}

.mziq-hero-slider__dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.mziq-hero-slider__dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

.mziq-hero-slider__dot.mziq-active {
    background: #ffffff;
    width: 40px;
}

/* Progress Bar */
.mziq-hero-slider__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 20;
}

.mziq-hero-slider__progress-bar {
    height: 100%;
    background: #4A5B6E;
    width: 0%;
    transition: width 0.1s linear;
}

/* ============================================
   Tablet Responsive (max-width: 1024px)
============================================ */
@media (max-width: 1024px) {
    .mziq-hero-slider {
        /* Aspect-ratio (set above) governs the height — no viewport-based
           min/max that would crop the image differently per screen. */
        min-height: 0;
        max-height: none;
    }

    .mziq-hero-slider__content {
        padding: 0 50px;
    }

    .mziq-hero-slider__title {
        font-size: 42px;
    }

    .mziq-hero-slider__description {
        font-size: 16px;
    }

    .mziq-hero-slider__nav {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .mziq-hero-slider__nav--prev {
        left: 15px;
    }

    .mziq-hero-slider__nav--next {
        right: 15px;
    }

    .mziq-hero-slider__pagination {
        left: 50px;
    }
}

/* ============================================
   Mobile Responsive (max-width: 768px)
============================================ */
@media (max-width: 768px) {
    .mziq-hero-slider {
        /* A 2.3:1 banner is far too short on a phone (the headline, car and
           buttons don't fit). Use a taller, portrait-friendly ratio here so the
           content fits. Still width-driven (an aspect ratio, not vh), so the crop
           stays consistent across zoom — it just uses a phone-appropriate shape. */
        aspect-ratio: 3 / 4;
        min-height: 0;
        max-height: none;
        height: auto;
    }

    .mziq-hero-slider__content {
        padding: 0 25px;
    }

    .mziq-hero-slider__overlay {
        background: linear-gradient(180deg, rgba(4, 20, 40, 0.3) 0%, rgba(4, 20, 40, 0.8) 100%);
    }

    .mziq-hero-slider__text {
        max-width: 100%;
    }

    .mziq-hero-slider__subtitle {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .mziq-hero-slider__title {
        font-size: 32px;
    }

    .mziq-hero-slider__description {
        font-size: 15px;
        margin-bottom: 25px;
    }

    .mziq-hero-slider__buttons {
        flex-direction: column;
    }

    .mziq-hero-slider__btn {
        padding: 14px 28px;
        font-size: 13px;
        text-align: center;
        justify-content: center;
    }

    .mziq-hero-slider__nav {
        display: none;
    }

    .mziq-hero-slider__pagination {
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
    }
}

/* ============================================
   Small Mobile Responsive (max-width: 480px)
============================================ */
@media (max-width: 480px) {
    .mziq-hero-slider {
        min-height: 0;
        height: auto;
    }

    .mziq-hero-slider__content {
        padding: 0 20px;
    }

    .mziq-hero-slider__title {
        font-size: 26px;
    }

    .mziq-hero-slider__description {
        font-size: 14px;
    }
}

/* ============================================
   Elementor Editor Specific Styles
============================================ */
.elementor-editor-active .mziq-hero-slider__slide:first-child {
    opacity: 1;
    visibility: visible;
}

.elementor-editor-active .mziq-hero-slider__slide:first-child .mziq-hero-slider__text {
    opacity: 1;
    transform: translateY(0);
}