* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:#f5f0e8; color:#3e2c1f; }
header { background:#8b3a3a; color:white; padding:1rem; text-align:center; }
.container { max-width:1200px; margin:2rem auto; padding:0 1rem; }
.btn { display:inline-block; background:#8b3a3a; color:white; padding:0.6rem 1.2rem; border-radius:5px; text-decoration:none; border:none; cursor:pointer; }
.btn:hover { background:#5c2e2e; }
footer { background:#3e2c1f; color:#ccc; text-align:center; padding:1rem; margin-top:2rem; }
input, textarea, select { width:100%; padding:0.5rem; margin-bottom:1rem; border:1px solid #ddd; border-radius:5px; }
.profile-card { background:white; border-radius:10px; padding:1.5rem; margin-bottom:1rem; box-shadow:0 2px 5px rgba(0,0,0,0.1); }

/* NAVIGACIJA */
nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    background: #5c2e2e;
    padding: 0.3rem 0;
    width: 100%;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0;
    padding: 0.25rem 0.4rem;
    border-radius: 3px;
    transition: 0.2s;
    white-space: nowrap;
    font-size: 0.8rem;
}

nav a:hover {
    background: #8b3a3a;
}

@media (max-width: 900px) {
    nav a {
        font-size: 0.7rem;
        padding: 0.2rem 0.3rem;
    }
}

@media (max-width: 750px) {
    nav a {
        white-space: normal;
        font-size: 0.65rem;
        padding: 0.15rem 0.25rem;
    }
}

/* ========== PRAVILNO OBTECANJE SLIKA SA FIGURE ========== */
.vest-sadrzaj figure,
.price-sadrzaj figure,
.dogadjaj-sadrzaj figure {
    max-width: 100%;
    margin: 0;
}

.vest-sadrzaj figure[style*="float: left"],
.price-sadrzaj figure[style*="float: left"],
.dogadjaj-sadrzaj figure[style*="float: left"] {
    float: left;
    margin: 0 25px 15px 0;
    max-width: 350px;
}

.vest-sadrzaj figure[style*="float: right"],
.price-sadrzaj figure[style*="float: right"],
.dogadjaj-sadrzaj figure[style*="float: right"] {
    float: right;
    margin: 0 0 15px 25px;
    max-width: 350px;
}

.vest-sadrzaj figure[style*="margin: 20px auto"],
.price-sadrzaj figure[style*="margin: 20px auto"],
.dogadjaj-sadrzaj figure[style*="margin: 20px auto"] {
    float: none;
    margin: 20px auto;
    text-align: center;
}

.vest-sadrzaj img,
.price-sadrzaj img,
.dogadjaj-sadrzaj img {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 5px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.vest-sadrzaj figcaption,
.price-sadrzaj figcaption,
.dogadjaj-sadrzaj figcaption {
    font-size: 0.75rem;
    color: #666;
    font-style: italic;
    text-align: center;
    margin-top: 8px;
    width: 100%;
    display: block;
    line-height: 1.3;
}

.vest-sadrzaj figure[style*="float: left"] + p,
.vest-sadrzaj figure[style*="float: left"] + div,
.vest-sadrzaj figure[style*="float: left"] + h1,
.vest-sadrzaj figure[style*="float: left"] + h2,
.vest-sadrzaj figure[style*="float: left"] + h3,
.vest-sadrzaj figure[style*="float: right"] + p,
.vest-sadrzaj figure[style*="float: right"] + div,
.vest-sadrzaj figure[style*="float: right"] + h1,
.vest-sadrzaj figure[style*="float: right"] + h2,
.vest-sadrzaj figure[style*="float: right"] + h3 {
    margin-top: 0;
    padding-top: 0;
}

.vest-sadrzaj::after,
.price-sadrzaj::after,
.dogadjaj-sadrzaj::after {
    content: "";
    display: table;
    clear: both;
}

.vest-sadrzaj figure[style*="float: left"] ~ p,
.vest-sadrzaj figure[style*="float: right"] ~ p {
    margin-top: 0;
}

@media (max-width: 768px) {
    .vest-sadrzaj figure[style*="float: left"],
    .vest-sadrzaj figure[style*="float: right"],
    .price-sadrzaj figure[style*="float: left"],
    .price-sadrzaj figure[style*="float: right"],
    .dogadjaj-sadrzaj figure[style*="float: left"],
    .dogadjaj-sadrzaj figure[style*="float: right"] {
        float: none;
        margin: 20px auto;
        text-align: center;
    }
}

.prazan-ram {
    background: #f5f0e8;
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    color: #999;
    font-size: 0.9rem;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slika-ram {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.slika-ram img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.slika-ram .caption {
    font-size: 0.75rem;
    color: #666;
    font-style: italic;
    text-align: center;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .blok-sa-slikom-desno, .blok-sa-slikom-levo {
        flex-direction: column;
    }
    .blok-sa-slikom-desno .slika-ram,
    .blok-sa-slikom-levo .slika-ram {
        max-width: 100%;
    }
}

/* ========== HORIZONTALNI PODMENI ========== */
.horizontalni-podmeni {
    background: #f0e8d8;
    border-bottom: 2px solid #8b3a3a;
    padding: 0;
    margin: 0;
    width: 100%;
}

.horizontalni-podmeni ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.horizontalni-podmeni li {
    margin: 0;
    padding: 0;
}

.horizontalni-podmeni a {
    display: inline-block;
    padding: 12px 20px;
    color: #5c2e2e;
    text-decoration: none;
    font-weight: bold;
    transition: 0.2s;
    font-size: 0.9rem;
}

.horizontalni-podmeni a:hover {
    background: #8b3a3a;
    color: white;
}

.horizontalni-podmeni a.aktivno {
    background: #8b3a3a;
    color: white;
}

@media (max-width: 768px) {
    .horizontalni-podmeni a {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

/* ========== FLEX KONTEJNER ZA PRIČE ========== */
.price-flex-container {
    display: flex;
    gap: 30px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.glavni-tekst {
    flex: 3;
    min-width: 250px;
    line-height: 1.6;
    text-align: justify;
}

.desni-blok {
    flex: 1;
    min-width: 250px;
    background: #fff9f0;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    align-self: flex-start;
}

.povezani-clanci {
    margin-bottom: 20px;
}

.povezani-clanci h3 {
    color: #8b3a3a;
    border-bottom: 2px solid #8b3a3a;
    padding-bottom: 8px;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.povezani-clanci ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.povezani-clanci li {
    margin: 8px 0;
}

.povezani-clanci a {
    display: block;
    padding: 8px 12px;
    color: #5c2e2e;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.2s;
    background: white;
    border-left: 3px solid #8b3a3a;
}

.povezani-clanci a:hover {
    background: #f0e8d8;
    padding-left: 18px;
}

@media (max-width: 768px) {
    .price-flex-container {
        flex-direction: column;
    }
}

/* ========== RESPONZIVNOST ZA MOBILNE UREĐAJE ========== */
@media (max-width: 768px) {
    .pocetna-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    table, thead, tbody, th, td, tr {
        display: block;
    }
    
    thead {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: white;
    }
    
    td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }
    
    td:before {
        content: attr(data-label);
        font-weight: bold;
        width: 40%;
        color: #5c2e2e;
    }
    
    .profile-card {
        padding: 12px;
        margin-bottom: 15px;
    }
    
    .container {
        padding: 0 10px;
    }
    
    nav a {
        padding: 6px 8px;
        font-size: 0.7rem;
    }
    
    .desni-blok {
        margin-top: 20px;
    }
}

/* JAČA RESPONZIVNOST ZA SVE EKRANE */
@media (max-width: 768px) {
    .pocetna-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .flex-container, .price-flex-container {
        flex-direction: column !important;
    }
    
    [class*="grid"] {
        display: flex !important;
        flex-direction: column !important;
    }
    
    table, thead, tbody, tr, td, th {
        display: block !important;
    }
    
    thead {
        display: none !important;
    }
    
    tr {
        margin-bottom: 20px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        padding: 10px !important;
    }
    
    td {
        display: flex !important;
        justify-content: space-between !important;
        padding: 8px !important;
        border-bottom: 1px solid #eee !important;
    }
    
    td:before {
        content: attr(data-label) !important;
        font-weight: bold !important;
        width: 45% !important;
        color: #5c2e2e !important;
    }
}

/* Slika u vestima na početnoj */
.vest-slika {
    float: left;
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 5px;
}

.vest-slika-link {
    display: block;
    float: left;
    margin-right: 15px;
}

.vest-sadrzaj-okvir {
    overflow: hidden;
}

/* ========== GALERIJA ZA SVE SLIKE ========== */
.galerija {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.galerija-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    cursor: pointer;
    position: relative;
}

.galerija-item:hover {
    transform: translateY(-5px);
}

.galerija-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.galerija-info {
    padding: 12px;
}

.galerija-info strong {
    font-size: 1rem;
    color: #3e2c1f;
}

.galerija-info strong a {
    color: #3e2c1f;
    text-decoration: none;
}

.galerija-info strong a:hover {
    color: #8b3a3a;
    text-decoration: underline;
}

.opis {
    font-size: 0.85rem;
    color: #666;
    margin-top: 5px;
    font-style: italic;
}

.starinska-oznaka {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #8b3a3a;
    color: white;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 15px;
    font-weight: bold;
    z-index: 1;
}

.info-box-stare {
    background: #e8f0fe;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #8b3a3a;
}

.godina-grupa {
    margin-bottom: 30px;
}

.godina-naslov {
    background: #8b3a3a;
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid #8b3a3a;
    flex-wrap: wrap;
}

.tab {
    padding: 10px 20px;
    background: #f0e8d8;
    color: #5c2e2e;
    text-decoration: none;
    border-radius: 8px 8px 0 0;
    font-weight: bold;
}

.tab:hover, .tab.aktivno {
    background: #8b3a3a;
    color: white;
}

.tab-sadrzaj {
    display: none;
}

.tab-sadrzaj.aktivno {
    display: block;
}

.filter-box {
    background: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

.filter-group {
    flex: 1;
    min-width: 150px;
}

.filter-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #5c2e2e;
}

.filter-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.btn-filter {
    background: #8b3a3a;
    color: white;
    padding: 8px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn-filter:hover {
    background: #5c2e2e;
}

.btn-reset {
    background: #666;
    display: inline-block;
    text-decoration: none;
}

.prazno {
    text-align: center;
    padding: 50px;
    background: #f9f9f9;
    border-radius: 10px;
    color: #888;
}