/* =========================================
   GLOBAL RESET + ROOT
========================================= */
:root {
    font-size: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================
   BASE STYLES – MOBILE FIRST
========================================= */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Arial, sans-serif;
    background-color: #f4f4f4;
    font-size: 1 rem;
}

h1 {
    /* 1. Startujemo od 1rem (oko 16px) na mobilnom, max do 1.8rem na desktopu */
/*     font-size: clamp(0.8rem, 3vw + 0.4rem, 1.2rem); */
    font-size: clamp(0.75rem, 2.5vw + 0.5rem, 1.5rem);
    
    /* 2. Maksimalno zbijen prored da naslov ne "pojede" vertikalni prostor */
    line-height: 1.1;
    
    /* 3. Dozvoljavamo prirodan prelom bez ikakvih tačkica */
    display: block;
    white-space: normal;
    overflow: visible;
    
    /* 4. Estetika */
    margin-top: 5px;
    margin-bottom: 10px;
    font-weight: 700;
    word-wrap: break-word;
}

/* ----------------------------------------------- */

/* GLAVNI KONTEJNER - Mora biti širok 100% */
/* RESET ZA CEO HEADER */
#header {
    text-align: justify;
    font-size: 0;
    
/*     position: relative; */
    background-color: #089;
    width: 100%;
/*     border: 4px solid red;  */
    display: flow-root;
    height: auto !important;   
}

/* DESNO U HEADERU — POJAVLJUJE SE KAO PILL BADGE */
#menu-ram {
    float: right;                /* ostaje skroz desno */
    display: inline-block;       /* da padding ne raste div */
    height: 2.2rem;              /* malo više za pillow efekat */
    background-color: #C71585;   /* pink badge */
    border-radius: 12px;         /* pun radius za pill oblik */
    padding: 0 12px;             /* horizontalni “pillow” padding */
    line-height: 2.2rem;         /* vertikalno centriranje */
    text-align: center;          /* horizontalno centriranje */
    box-sizing: border-box;
    font-size: 18px;             /* jasno vidljiv tekst */
    font-weight: 600;
    width: 12rem;
    color: #fff;
}

#menu-ram a {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    text-align: center;  
}

.video-page #menu-ram a {
    transition: opacity 0.15s ease, text-decoration 0.15s ease;
}

.video-page #menu-ram a:hover {
    opacity: 0.85;
    text-decoration: underline;
}


/* WRAPPER */
.header-wrapper {
    display: flex;
    justify-content: space-between;
/*     height: 65px; */
    height: auto;
    line-height: 65px;
    align-items: center;
    padding: 0.2rem;
    background: #252525;
}

/* LEVA STRANA - STACK */
.header-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Fiksira uz levu ivicu */
    flex-shrink: 1; /* Dozvoljava mu da se skupi ako nema mesta */
    min-width: 0; /* Sprečava overflow teksta */   
}

/* LOGO - fixed */
#header .logo img {
    width: 80px;
    height: auto;
    position: relative;
    top: auto;
    left: auto;
    display: block;
}

/* DESNA STRANA - SEARCH */
.header-right {
    display: flex;
    align-items: center;
}

/* SEARCH FORMA - Smanjujemo širinu za mobile */
.search-form {
    display: flex;
    align-items: center;
    background-color: #028e35;
    border-radius: 20px;
    padding: 2px 2px 2px 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
/*     margin-top: -2.2rem; */
}

.search-input {
    background: #ffffff;
    border: none;
    color:  black;
    border-radius: 20px;
    outline: none;
    width: 14rem; /* Optimalno za mobile i desktop */
    font-size: 0.9rem;
    padding: 0.3rem;
    margin-right: 0.2rem
}

.search-btn {
    background: #252525; /* Tvoja boja dugmeta */
    color: #ffffff;      /* Boja ikonice - sada će biti bela! */
    border: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
}

.search-btn svg {
    width: 18px; /* Podesi lupu da ne bude ni prevelika ni premala */
    height: 18px;
}

.search-btn:hover {
    background: #e51b19; /* Malo tamnija na hover */
    color: #fff;
}

/* =========================================
   MAIN
========================================= */
main {
max-width: 100%;
    margin: 0 auto;
    overflow-anchor: none; /* Sprečava brauzer da "pamti" skrolovanu poziciju tokom promene rezolucije */
    margin-top: 1rem; /* Mora biti ista cifra kao ona koju si stavio za 1023px */
    padding-top: 0 !important;
    min-height: 120vh;
}

/* =========================================
   GALLERY GRID
========================================= */
.gallery {
    display: grid !important;
    align-items: start;  /* Zakucava vrh slika za gornju liniju */
    align-content: start; /* Zakucava ceo grid za vrh main-a */
    gap: 1rem !important; /* Isti svuda, bez izuzetka */
}

.gallery-item {
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-item a {
    text-decoration: none;
    color: inherit; /* Naslov će zadržati boju koju je imao */
    display: block;
}

.gallery-item a:hover .clamp-title {
    text-decoration: underline; /* Podvuče se samo naslov kada se pređe mišem preko slike */
}

.gallery-item img { /* dodao 25.12 */
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Tera sliku da drži oblik dok se širi */
    display: block;
    object-fit: cover; /* Sprečava distorziju slike */
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.16);
}

.gallery-item-image-wrapper {
    display: block;
    width: 100%; /* Tera ga da bude širok samo onoliko koliko je kolona široka */
    max-width: 100%;
    aspect-ratio: 16 / 9; 
    position: relative; /* Važno za stabilnost slike unutra */
    overflow: hidden;
    background-color: #f0f0f0;
}

.gallery-item-image-wrapper img {
    position: absolute; /* Slika se lepi za ivice wrappera */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item-content {
    padding: 0.2rem;
}

.gallery-item p {
    margin: 0;
    color: #000000;
    font-size: 0.90rem;  
}

.clamp-title {
    display: -webkit-box;           /* Mora biti box da bi clamp radio */
    -webkit-line-clamp: 2;          /* Broj redova na koji limitiramo */
    -webkit-box-orient: vertical;   /* Vertikalni smer slaganja */
    overflow: hidden;               /* Sakriva sve preko dva reda */
    text-overflow: ellipsis;        /* Dodaje one tri tačke (...) */
    
    /* Podešavanja za čitljivost */
    line-height: 1.2;               /* Razmak između redova */
    height: 2.4rem;                 /* Fiksna visina (line-height * 2) */
    margin: 5px 0;
    font-weight: normal;
    font-size: 0.98rem;
}

.ultimi-videos {
   font-size: 0.90rem;
    display: -webkit-box;           /* Mora biti box da bi clamp radio */
    -webkit-line-clamp: 1;          /* Broj redova na koji limitiramo */
    -webkit-box-orient: vertical;   /* Vertikalni smer slaganja */
    overflow: hidden;               /* Sakriva sve preko dva reda */
    text-overflow: ellipsis;        /* Dodaje one tri tačke (...) */ 
}

/* =========================================
   PAGINATION
========================================= */
.pagination-links {
    text-align: center;
    padding: 1.5rem 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pagination-links a {
    padding: 0.5rem 0.9375rem;
    border: 1px solid #3498db;
    text-decoration: none;
    color: #3498db;
    border-radius: 0.25rem;
    transition: background-color 0.3s, color 0.3s;
    font-size: 0.875rem;
}

.pagination-links a:hover {
    background-color: #ecf0f1;
}

.pagination-links a.active {
    background-color: #3498db;
    color: white;
    font-weight: bold;
    border-color: #3498db;
}


/* =========================================
   FOOTER
========================================= */
.site-footer {
    background: #253544;
    color: white;
    text-align: center;
    height: 8em;
}

.footer-legal a:hover {
    color: red;
}

footer p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.legaltitle a {
  color: #fff;
}

/* =========================================
   VIDEO + ADS LAYOUT
========================================= */
.video-mp4-wrapper {
display: grid;
/*     grid-template-columns: 1fr 300px; */
    gap: 20px;
    max-width: 1400px;
    margin: 20px auto;
    /* KLJUCNA LINIJA: */
    align-items: start;
}

.video-side {
    width: 100%;
    min-height: auto; /* bilo 400px->ja promenio */
    height: auto; /* isto */
/*     background:  aqua; */
}

/* VIDEO BLOCK */
.video-cssplay {
    background: #000;
    overflow: hidden;
    text-align: center;
    max-height: 780px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

.video-cssplay video {
    display: block;
    width: 100%;
    height: auto;
/*     max-height: 700px; */
    object-fit: contain;
    margin: 0 auto;
    transition: filter 0.25s ease;
}

.video-cssplay video:active {
    filter: brightness(1.15);
}

/* CUSTOM PLAY BUTTON FIX */
.video-cssplay {
    position: relative;
}

.video-cssplay::before {
    content: "";
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    /*background: url('/img/play-btn.svg') no-repeat center center;*/
    background-size: contain;
    pointer-events: none;
    opacity: 0.85;
}

/* ********** */
/* READ MORE */

.description-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Ovo centrira h2 kao blok horizontalno */
    
    position: relative;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    margin: -14px auto 0;
    width: 100%; 
}

.description-wrapper.collapsed {
    max-height: 2.4em; /* 2 reda */
}

.description-wrapper.expanded {
    max-height: 2000px; 
}

h2.desc-content {
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    
    /* Poravnanje teksta unutar bloka */
    text-align: left; 
    
    /* Širina bloka - važno da bi centriranje imalo smisla */
    max-width: 98%; /* Ili fiksno npr. 600px, zavisno od dizajna */

    /* Line clamp magija */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Dok je skupljeno, sečemo na 2 reda */
.description-wrapper.collapsed h2.desc-content {
    -webkit-line-clamp: 2;
}

/* Kada je rašireno, skidamo limit redova */
.description-wrapper.expanded h2.desc-content {
    -webkit-line-clamp: unset;
    display: block; /* Vraćamo na block da bi prirodno tekao */
}

#read-more-btn {
    display: inline-block; /* Sada će height: 14px raditi */
    height: 22px;
    line-height: 20px;     /* Centriraj tekst unutar tih 14px */
    vertical-align: middle;
    padding: 0px 6px;      /* Kontroliši razmak oko teksta */
    border: 1px solid #028e35;
    border-radius: 20px;
    margin-bottom: 8px;
    margin-top: 4px;
    font-weight: bold;
    cursor: pointer;
}

.correlati {
  display: inline-block;
  position: relative;
  font-size: 0.95rem;
  margin-bottom: 6px;
  font-family: 'Segoe UI';
  font-weight: bold;
  
}

/* ********** */
/* CATEGORY READ MORE */

/* SEO block bottom category */
.seo-bottom-text {
    max-width: 720px;
    margin: 0px auto 0px auto; /* centrirano + razmak */
    padding: 0 15px;
    text-align: center;
    line-height: 1.4;
    font-size: 15px;
    color: #444;
}

/* H2 naslov SEO bloka */
.seo-bottom-text h2 {
    font-size: 18px;
/*     margin-bottom: 2px; */
    font-weight: 600;
    color: #111;
}

.seo-bottom-text p {
    opacity: 0.9;
}


/* ********** */
/* VIDEO category */
.video-stats-bar {
    display: flex;
    height: 25px;
    justify-content: space-between; /* Ključna linija za razdvajanje */
    align-items: center;
/*     margin-top: 6px !important; */
/*     margin-bottom: 10px; */
    background-color: #fff;
    border: 1px solid #222;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 0px 10px;
    font-size: 0.9rem;
/*     width: 66%; */
    margin: 0 auto;
    width: auto;
    max-width: 100%
}
 
.video-views-count span {
    color: #000; /* Labela je diskretnija */
}

.video-category-line span {
    position: relative;
    top: -1.7px;      /* Ovo podiže samo span bez uticaja na <a> */
    font-size: 0.9rem;
    color: #000;       
}

.video-views-count {
    color: #000;
    font-weight: 600;
    margin-top: -1.55px;
}

/* ----------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.pg {
    padding: 6px 10px;
    border: 1px solid #444;
    text-decoration: none;
    color: #000;
    font-size: 14px;
    font-weight: bold;
}

.pg:hover {
    background: #222;
     color: #fff;
}

.pg.active {
    background: #e50914;
    border-color: #e50914;
    color: #fff;
    font-weight: bold;
    pointer-events: none;
}

.dots {
    padding: 6px 4px;
    color: #777;
}

/* ======================================
   MEDIA QUERIES
========================================= */

@media (min-width: 1101px) {
   .video-stats-bar {
   float: left;
/*    width: calc(100% - 320px); */
width: 100%;
   clear: both; /* Da ode ispod videa i reklame */ 
}
    
.description-wrapper {
    float: left;
    /* Ako je reklama npr. 300px, a gap između njih 20px: */
/*     width: calc(100% - 320px);  */
        
    /* I ovde stavi onaj limit koji si izmerio da video ne bi rastao beskonačno */
    width: 100%;
    clear: both; /* Da ode ispod videa i reklame */
    margin-bottom: 10px;
}
    
#read-more-btn {
    clear: both;      /* Forsira dugme ispod float elementa */
    display: block;    /* Mora biti block ili inline-block */
    width: max-content; /* Da ne bi bilo široko 100% ako je block */
    margin-bottom: -10px;
}
    
}

/* ====== >= 1024ESKTOP) ====== */
@media (min-width: 1024px) {  
.gallery {
     display: grid !important; /* Osiguraj da je grid uključen */
     grid-template-columns: repeat(4, 1fr) !important; /* Dodaj !important i ovde */
 }
    footer {
        padding: 3rem;
    }
 .
}

@media (min-width: 1340px) {  
.gallery {
     display: grid !important; /* Osiguraj da je grid uključen */
     grid-template-columns: repeat(5, 1fr) !important; /* Dodaj !important i ovde */
 }
}


/* 768px - 1023px: 3col */
@media (min-width: 768px) {
   
  .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
    
    body {
        font-size: 1.1rem;
    }
    
    header {
        padding: 2rem 1.5rem;
    }

    header h1 {
        font-size: 1.75rem;
    }

    #header p {
        font-size: 0.95rem;
    }

    main {
        max-width: 87.5rem;
        padding: 0rem 0.4rem;
    }

    footer {
        padding: 2rem 1.5rem;
        margin-top: 3rem;
    }
}

@media (max-width: 767px) {

    .gallery {
        display: grid !important;
        /* Umesto auto-fit/minmax, dajemo mu fiksnu naredbu: 3 kolone */
        grid-template-columns: repeat(3, 1fr) !important; 
        width: 100%;
    }


    .video-mp4-wrapper {
        margin: 10px auto; /* manja margina oko videa i reklame */
        grid-template-columns: 1fr;
    }



    .video-cssplay {
        max-width: 100%;
        margin-bottom: 0;
    }

    /* PLAY BUTTON FIX FOR MOBILE */
    .video-cssplay::before {
        width: 56px;
        height: 56px;
    }    

      main {
    padding: 0rem 0.4rem;
  }
}

@media (max-width: 655px) {
   /* SPECIJALNI BREAKPOINT: Na 610px gasimo desktop navbar i palimo tvojih 6rem širine */
    
   .gallery {
       display: grid !important;
       grid-template-columns: repeat(2, 1fr) !important;
       width: 100%;
    }
    
      main {
    padding: 0rem 0.4rem;
  }

 #ck-button {
     display: block !important;
     height: 2.1em;
     line-height: 2.1rem;
     position: relative;
     z-index: 10000; /* Dugme mora imati veći z-index da bi ostalo "iznad" */
 }   
			
 #ck-button span {
	text-align: left;
	padding-left: 10px;
 }  

#header .navbar,    
 .navbar {
     position: absolute;
     display: none;
     top: 2.1rem; 
     left: 0 ;
     width: 6rem;
     z-index: 1000;
    }
    
  /* Klasa koju dodaje JS kada je meni otvoren */
  .navbar.menu-open {
    display: block !important;
  }
  
  /* Klasa koju dodaje JS kada je meni zatvoren */
  .navbar.menu-closed {
    display: none !important;
  }
/* *** */
    
 .dropdown {
/*      float: none !important; */
     width: 100%;
    }
 
 .dropbtn {
    text-align: center;
  }
    
.dropdown-content { /* da se bolje vidi content */
	left: 6.032rem !important;
	margin-top:-6.046rem !important;
}
    
.dropdown:hover .dropdown-content {
   display: block;
}     
       
}

@media (max-width: 430px) { 
    .gallery {
        display: grid !important;
        grid-template-columns: repeat(1, 1fr) !important; 
        width: 100%;
    }
}

@media (max-width: 400px) { 
    .dropdown-content { /* da se bolje vidi content */
        grid-template-columns: repeat(2, 1fr) !important;
        table-layout: fixed; 
        width: 13rem !important; 
    }
    
    .dropdown-content a:last-child {
    grid-column: span 2; /* Kaže elementu: "Raširi se preko 3 kolone" */
    text-align: center;  /* Da tekst ostane u sredini tog dugačkog polja */
}
}

/* --- RESPONSIVE FIX (stavi ovo na sam kraj CSS fajla) --- */

@media (max-width: 1100px) {
    .video-mp4-wrapper {
        display: block; /* Potpuno gasi Grid */
        width: 100%;
        max-width: 1000px; /* ili širina tvog videa */
        margin: 0 auto;
    }

    .video-side {
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }
}