/* =========================================================
   page-upper-section.css
   Collapsed hero on inner pages
========================================================= */

.page-hero-collapsed{

    position:relative;

    max-height:190px;

    overflow:hidden;

    margin:30px 0 42px;

    border-bottom:1px solid #ddd;

}

.page-hero-inner{

    max-width:1400px;   /* isti kao content-wrap */

    margin:0 auto;

    padding:0 20px;     /* isti horizontalni padding */

    box-sizing:border-box;

}

.page-hero-collapsed.open {
    max-height: 900px;
}

.page-hero-inner {
    position: relative;
}

/* pošto include me-home-hero-section.php već verovatno ima .me-home-hero */
.page-hero-collapsed .me-home-hero {
    margin: 0;
}

.page-hero-collapsed .me-home-categories {
    flex: 0 0 320px;
    width: 320px;
}

.page-hero-collapsed .me-home-right {
    flex: 1;
    min-width: 0;
}

.page-hero-collapsed .me-home-slider {
    height: 548px;
    overflow: hidden;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 36, 64, 0.12);
}

.page-hero-collapsed .metaslider,
.page-hero-collapsed .metaslider .flexslider,
.page-hero-collapsed .metaslider .slides,
.page-hero-collapsed .metaslider .slides > li {
    height: 100% !important;
}

.page-hero-collapsed .me-home-slider img {
    width: 100% !important;
    height: 548px !important;
    object-fit: cover;
    display: block;
}

/* fade dole */

.page-hero-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 95px;
    background: linear-gradient(transparent, #ffffff);
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 30;
}

.page-hero-collapsed.open::after {
    opacity: 0;
}

/* dugme */

.page-hero-toggle {
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 180px;
    min-width: 180px;
    height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 40px;
    background: #0b63b6;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    z-index: 50;
    transition: background 0.25s ease;
}

.page-hero-toggle:hover,
.page-hero-toggle:focus {
    width: 180px;
    min-width: 180px;
    height: 44px;
    padding: 0 24px;
    border: 0;
    background: #d12427;
    color: #ffffff !important;
    outline: none;
}

/* mobile */

@media (max-width: 992px) {
    .page-hero-collapsed {
        max-height: none;
        overflow: visible;
        margin: 20px auto 30px;
    }

    .page-hero-collapsed::after,
    .page-hero-toggle {
        display: none;
    }

    .page-hero-collapsed .me-home-slider {
        height: auto;
    }

    .page-hero-collapsed .me-home-slider img {
        height: auto !important;
    }
}