.elementor-22270 .elementor-element.elementor-element-9c572b4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-22270 .elementor-element.elementor-element-0306124{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-22270 .elementor-element.elementor-element-a670db0 > .elementor-widget-container{border-style:solid;border-color:#0156D3;box-shadow:0px 4px 10px 0px rgba(0,0,0,0.5);}.elementor-22270 .elementor-element.elementor-element-a670db0 .entry-title{font-family:"Roboto Condensed", Sans-serif;font-weight:800;}.elementor-22270 .elementor-element.elementor-element-a670db0{--counter-zero:decimal-leading-zero;--wrap-border:3px;--box-color:#FFFFFF;--dark-box-color:#1F262C;--feat-list-width:110px;}.elementor-22270 .elementor-element.elementor-element-65ce058 .entry-title{font-family:"Roboto", Sans-serif;font-weight:700;}.elementor-22270 .elementor-element.elementor-element-65ce058{--counter-zero:decimal-leading-zero;--wrap-border:3px;--box-color:#FFFFFF;--dark-box-color:#1F262C;--feat-list-width:110px;}.elementor-22270 .elementor-element.elementor-element-a0360ec{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-22270 .elementor-element.elementor-element-2733fbd{--display:flex;}.elementor-22270 .elementor-element.elementor-element-c644c92 .entry-title{font-family:"Roboto", Sans-serif;font-size:18px;font-weight:700;}.elementor-22270 .elementor-element.elementor-element-c644c92{--counter-zero:decimal-leading-zero;--wrap-border:3px;--box-color:#FFFFFF;--dark-box-color:#1F262C;--feat-list-width:110px;}@media(max-width:767px){.elementor-22270 .elementor-element.elementor-element-9c572b4{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-22270 .elementor-element.elementor-element-0306124{--margin-top:-54px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-22270 .elementor-element.elementor-element-a670db0 > .elementor-widget-container{border-width:0px 0px 10px 0px;border-radius:0px 5px 5px 5px;}.elementor-22270 .elementor-element.elementor-element-a670db0{--feat-ratio:70;--box-spacing:15px;}.elementor-22270 .elementor-element.elementor-element-a670db0 .entry-title{font-size:24px;}.elementor-22270 .elementor-element.elementor-element-a670db0 .p-wrap{--el-spacing:19px;}.elementor-22270 .elementor-element.elementor-element-a670db0 .block-wrap{--bottom-spacing:10px;}.elementor-22270 .elementor-element.elementor-element-65ce058 .entry-title{font-size:16px;line-height:22px;}.elementor-22270 .elementor-element.elementor-element-65ce058{--box-spacing:10px;}.elementor-22270 .elementor-element.elementor-element-65ce058 .p-wrap{--el-spacing:5px;}.elementor-22270 .elementor-element.elementor-element-65ce058 .block-wrap{--bottom-spacing:10px;}.elementor-22270 .elementor-element.elementor-element-c101f2b{--feat-ratio:0;}.elementor-22270 .elementor-element.elementor-element-c101f2b .block-wrap{--bottom-spacing:14px;}.elementor-22270 .elementor-element.elementor-element-c644c92 .entry-title{font-size:16px;line-height:22px;}.elementor-22270 .elementor-element.elementor-element-c644c92{--box-spacing:10px;}.elementor-22270 .elementor-element.elementor-element-c644c92 .p-wrap{--el-spacing:5px;}.elementor-22270 .elementor-element.elementor-element-c644c92 .block-wrap{--bottom-spacing:10px;}}/* Start custom CSS for shortcode, class: .elementor-element-1e0c31d *//* ======================================= */
/* 1. GLAVNI WRAPPER I REEL STILOVI        */
/* ======================================= */

/* Glavni wrapper */
.reels-wrapper {
    display: flex;
    flex-direction: column;
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
    margin: 0;
    padding: 0;
}

/* Svaki slajd / reel */
.reel-item {
    position: relative;
    min-height: 100vh;
    height: 100vh;
    scroll-snap-align: start;
    width: 100%;
    overflow: hidden;
}

/* Slika reela */
.reel-image img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Donji gradient */
.reel-gradient {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 75%;
    background: linear-gradient(
        0deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.95) 40%,
        rgba(0,0,0,0.65) 70%,  
        rgba(0,0,0,0) 100%
    );
    z-index: 3;
    pointer-events: none; /* Omogućava klik kroz gradient */
}


/* Tekst blok */
.reel-content {
    position: absolute;
    bottom: 20vh !important; /* Malo spušteno */
    left: 20px;
    right: 20px;
    z-index: 999;
    color: #fff;
}

/* Meta red */
.reel-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 3px solid #0156d3;
}

.reel-category {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.9;
    text-transform: uppercase;
}

.reel-meta {
    font-size: 12px;
    opacity: 0.9;
}

.reel-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    margin: 10px 0 12px;
}
.reel-title a {
    color: white;
    text-decoration: none;
}

.reel-excerpt {
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 18px;
    opacity: 0.9;
    line-height: 1.4;
}

.reel-readmore {
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    background: #0156d3;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    display: inline-block;
}

/* ======================================= */
/* 2. GRID STILOVI (GOLAZO LIST VIEW)      */
/* ======================================= */

/* Wrapper grid slajda */
.reel-grid-item.golazo-style {
    height: 100vh;
    min-height: 100vh;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding-bottom: 15vh; /* Bez paddinga da ide do ruba */
    background-color: #fff;
    overflow: hidden;
   
}

/* Wrapper za postove */
.reel-grid-item.golazo-style .grid-posts-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%; 
    width: 100%;
}

/* -- POJEDINAČNI POST -- */
.grid-post {
    display: flex;
    flex: 1; /* Svaki post uzima točno 1/3 visine */
    text-decoration: none;
    color: #333;
    overflow: hidden;
    align-items: stretch;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}

/* Ukloni border na zadnjem postu */
.grid-post:last-child {
    border-bottom: none;
}

/* -- SLIKA -- */
.grid-thumb {
    width: 45%; /* Slika je 45% širine */
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

/* -- SADRŽAJ (TEKST) -- */
.grid-content {
    width: 55%; /* Tekst je 55% širine */
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

/* -- TIPOGRAFIJA GRIDA -- */
.golazo-style .grid-category {
    font-size: 11px;
    font-weight: 800;
    color: #0156d3; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.golazo-style .grid-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 5px;
}

.golazo-style .grid-meta {
    font-size: 11px;
    color: #0156d3; 
    font-weight: 600;
}

.golazo-style .grid-post-title {
    font-size: 15px; 
    font-weight: 800;
    line-height: 1.3;
    color: #000;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Max 4 linije teksta */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ======================================= */
/* VARIJACIJE (LIJEVO / DESNO / PLAVO)     */
/* ======================================= */

/* 1. i 3. post (Slika lijevo, tekst desno) */
.grid-post.layout-left {
    flex-direction: row; 
}

/* 2. post (Slika desno, tekst lijevo) */
.grid-post.layout-right {
    flex-direction: row-reverse; /* Obrni redoslijed */
    text-align: left; 
}

/* BOJE */
.grid-post.bg-white {
    background-color: #fff;
}

/* Srednja kartica - Svijetlo plava */
.grid-post.bg-blue {
    background-color: #eaf6ff; /* Golazo svijetlo plava */
}
/* Opcionalno: na plavoj pozadini crvena kategorija (kao na slici) */
.grid-post.bg-blue .grid-category {
    color: #d60000; 
}


/* -- RESPONSIVE -- */
@media (min-width: 768px) {
    /* Na desktopu povećaj fontove */
    .golazo-style .grid-post-title {
        font-size: 20px;
        -webkit-line-clamp: 3;
    }
    .grid-content {
        padding: 40px;
    }
    /* Na jako širokim ekranima ograniči grid širinu ako želiš */
    .reel-grid-item.golazo-style {
        align-items: center;
        background: #333; /* Tamna pozadina okolo */
    }
    .reel-grid-item.golazo-style .grid-posts-wrapper {
        max-width: 600px; /* Ograniči širinu "mobitela" */
        background: #fff;
    }
}

/* ======================================= */
/* 3. STILOVI ZA REKLAMU (ADSENSE)         */
/* ======================================= */

/* Slajd za reklamu - ponaša se kao Reel */
.reel-item.ad-slide {
    background-color: #000; /* Crna pozadina (promijeni u #fff za bijelu) */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
}

/* Kontejner koji drži reklamu */
.ad-container {
    width: 100%;
    max-width: 350px; /* Ograničenje širine da ne bude preširoko na desktopu */
    text-align: center;
    /* Ovdje će se reklama prikazati */
}/* End custom CSS */