/*
 Theme Name:   astra-child
 Description:  Osveženje dizajna i custom CSS za postove
 Author:       Nenad Pavlović
 Template:     astra  
 Version:      1.0.0
*/

/* Ovde kasnije lepiš sav onaj CSS za #my-postgrid */

/* 1. Moramo pretvoriti <a> tag u flex kontejner da bi row-reverse radio */
.moj-cik-cak-blog .ha-post-list-item a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

/* 2. Selektujemo svaki drugi list item i okrećemo njegov <a> tag */
.moj-cik-cak-blog .ha-post-list-item:nth-child(even) a {
    flex-direction: row-reverse !important;
    margin-left: 100px !important; /* Ovo je tvoj "tab" - slobodno povećaj na 60px ako želiš više */
    transition: all 0.3s ease; /* Opciono: da sve glatko klizi ako se menja ekran */
}

/* 3. Dodaj malo razmaka između slike i teksta */
.moj-cik-cak-blog .ha-post-list-item img {
    margin-right: 20px;
    flex-shrink: 0; /* Da se slika ne bi zgnječila */
}

.moj-cik-cak-blog .ha-post-list-item:nth-child(even) img {
    margin-right: 0;
    margin-left: 20px;
}

/* --- MEDIA QUERY ZA MOBILNE (Ispod 768px) --- */
@media (max-width: 767px) {
    /* 1. Vraćamo redosled na normalu (slika iznad teksta ili slika levo) */
    .moj-cik-cak-blog .ha-post-list-item a,
    .moj-cik-cak-blog .ha-post-list-item:nth-child(even) a {
        flex-direction: column !important; /* Najbolje za mobilni: slika gore, tekst dole */
        margin-left: 0 !important; /* Brišemo uvlačenje (tab) jer nema mesta */
        align-items: flex-start !important;
    }

    /* 2. Sređujemo sliku da bude preko cele širine na mobilnom */
    .moj-cik-cak-blog .ha-post-list-item img {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 15px 0 !important; /* Razmak samo ispod slike */
    }
}

/* Wrapper za celo obaveštenje */
.obavestenje-full-wrapper {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
    /* Parametri: horizontalno, vertikalno, zamućenje, širenje, boja */
   box-shadow: 0 10px 10px -2px gray;; 
    border: 1px solid #f0f0f0; /* Blagi border da definiše ivice */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Za glatku animaciju */
 	width:70%;
    	height: auto;
max-width: 800px; /* Limitiraš širinu da ne ide od ivice do ivice */
    margin: 40px auto; /* Prvi broj (40px) je razmak od elemenata iznad/ispod, 'auto' ga centrira levo-desno */
    width: 95%; /* Na mobilnim uređajima će zauzeti 95% širine, da ne udara u ivice ekrana */
    display: block; /* Osiguravaš da se ponaša kao blok element */
  

}

/* Stil za sliku da ne "pobegne" */
.obavestenje-slika img {
    width:100%;
    height: auto;
    display: block;
    object-fit: cover;
    /*max-height: 400px;  Možeš ograničiti visinu ako su slike prevelike */
}

/* Padding za tekstualni deo */
.obavestenje-tekst-deo {
    padding: 30px;
}

.obavestenje-tekst-deo h2 {
    margin-top: 0;
    color: #333;
text-align: center;
	
}