/* generatepress wraps into this */

.hero_outer-wrapper {
    --gradient-horizontal: linear-gradient(to right, rgb(0, 0, 0) 0%, rgba(10, 10, 10, 0) 100%);
    --gradient-vertical: linear-gradient(to top, rgb(0, 0, 0) 0%, rgb(0, 0, 0, 0.5) 30%, rgba(10, 10, 10, 0) 70%);
}

.light-hero-version :is(
    .hero_after-wrapper, 
    .hero_outer-wrapper, 
    .site-logo, #site-navigation .menu > li > a, 
    .main-title,
    .search-item:not(.active) a 
    ) 
    {
    --primary-dark: #fff;
    --tertiary-dark: #fefefe;
    --secondary-dark: #a6a6a6;
    --secondary-light: #eeeeee;
    --primary-light: #000;
    --accent: #EC130F;
    --accent-light: #ff5e5e;
    --highlight: #fffdd9;


    --gradient-horizontal: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(200, 200, 200, 0) 100%);
    --gradient-vertical: linear-gradient(to top, rgb(255, 255, 255) 0%, rgb(255, 255, 255, 0.5) 30%, rgba(200, 200, 200, 0) 70%);
    color: #000 !important;
}

.light-hero-version .hero_after-wrapper {
    background-color: var(--primary-dark);
    color: var(--primary-light);
}

.light-hero-version .header-wrap #site-navigation:not(.up #site-navigation) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7259278711484594) 0%, rgba(255, 255, 255, 0) 100%) !important;
}

.light-hero-version .menu-toggle {
    color: #000 !important;
}


.hero-and-navigation-header-wrapper {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    padding-block: 0;
    margin: 0;
}

.acf-block-preview .hero-and-navigation-header-wrapper {
    height: unset;
}

.acf-block-preview .hero_placeholder {
    font-style: italic;
    opacity: 80%;
}


.hero_outer-wrapper {
    width: 100%;
    height: 100dvh;
    position: relative;
}

@media screen and (min-width: 1025px) {
    .hero_outer-wrapper {
        height: 100dvh;
    }
}
.acf-block-preview:has(.hero_outer-wrapper),
.acf-block-preview .hero_outer-wrapper,
.acf-block-preview .hero_img-background {
    max-height: 100%;
    z-index: 0;
    height: 1200px;
}

.hero_inner-wrapper {
    padding-inline: 20px;
    padding-block: 20px;
    gap: 40px;
    align-items: end;

    width: 100%;
    height: 100%;
    max-width: 1680px;
    margin-inline: auto;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    row-gap: 40px; /* Razmak između redova */
    column-gap: 40px; /* Razmak između kolona ako ti treba */
    color: var(--primary-light);
}

@media screen and (min-width: 1025px) {
    .hero_inner-wrapper {
        align-items: center;
        padding-block: 6rem;
        padding-inline: var(--apuri-vspace-small, 2.369rem);
    }
}

.hero_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-image: var(--gradient-vertical);
}

@media screen and (min-width: 1025px) {
    .hero_overlay {
        background-image: var(--gradient-horizontal);
    }
}

.hero_img-background {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: 90% 0px;
}

.hero_img_placeholder {
    opacity: 0.45;
}

.hero_content-wrapper {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 60px;
    position: relative;
    z-index: 9;
}


@media screen and (min-width: 1025px) {
    .hero_img-background {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}



@media screen and (min-width: 1025px) {
    .hero_content-wrapper {
        grid-column: 1 / 5;
    }
}


@media screen and (min-width: 1280px) {
    .hero_content-wrapper {
        grid-column: 1 / 4;
    }
}

@media screen and (min-width: 1440px) {
    .hero_content-wrapper {
        grid-column: 1 / 4;
    }
}

/* tipografija */
.hero_main-title {
        font-size: var(--apuri-type-xlarge);
        margin-bottom: 0;
}

@media (min-width: 62rem) {
    .hero_main-title {
        font-size: var(--apuri-type-xxlarge, 4.209rem);
    }
}

.hero_description-wrapper {
    font-size: 1.125rem;
}

@media screen and (min-width: 1025px) {
    .hero_description-wrapper {
        font-size: var(--apuri-type-small);
    }   
}

@media (min-width: 62rem) {
   .hero_description-wrapper {
        font-size: var(--apuri-type-small, 1.333rem);
    }
}

.hero_label {
    font-size: var(--apuri-type-xsmall);
    text-transform: uppercase;
    font-weight: 600;
}

.hero_button-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1em;
}


.hero_buttons-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.hero_button {
    background-color: var(--primary-dark);
    color: var(--primary-light);
    padding: 10px 20px;
    display: inline;
    border: var(--primary-light) 1px solid;
    border-radius: 100vw;
}

.hero_button:is(:hover, :focus) {
    color: var(--accent-light);
    border-color: var(--accent-light);
}


.hide-on-pc :where(.hero_button-wrapper, .hero_description-wrapper) {
    grid-column: 1/-1;
}



.hero_after-wrapper {
    background-color: black;
    color: var(--primary-light);
    min-height: 30dvh;
    padding: 60px 20px;
    
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.hero_after-wrapper :where(.hero_description-wrapper, .hero_button-wrapper) {
    grid-column: 2/-1;
} 

.hero_vertikalno {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

@media screen and (min-width: 1025px) {
    .hide-on-pc {
        display: none;
    }

    .hide-on-pc a {
        display: none;    
    }
}

@media screen and (max-width: 1024px) {
    .hide-on-touch {
        display: none;
    }
}