/* PLUS381 front page - Kompaktni B92 Stil sa Sidebar-om */

#plus381-home {
	--plus381-gold: #c59a3d;
	--plus381-gold-dark: #a97d29;
	--plus381-text: #1f1f1f;
	--plus381-muted: #6f6f6f;
	--plus381-border: #e2e2e2;
	--plus381-surface: #ffffff;
	--plus381-background: #f4f4f4;
	background: var(--plus381-background);
	padding: 8px 0 16px;
}

#plus381-home *,
#plus381-home *::before,
#plus381-home *::after {
	box-sizing: border-box;
}

/* Osnovni raspored sa sidebarom od 300px */
#plus381-home .plus381-container,
#plus381-home .plus381-layout-with-sidebar {
	width: min(1140px, calc(100% - 16px)) !important;
	margin: 0 auto !important;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 16px;
	align-items: start;
}

#plus381-home .plus381-main-content {
	min-width: 0;
}

/* Sidebar stil */
#plus381-home .plus381-sidebar {
	width: 300px;
	position: sticky;
	top: 20px;
}

#plus381-home .plus381-widget-placeholder {
	padding: 15px;
	background: #ffffff;
	border: 1px solid var(--plus381-border);
	font-size: 12px;
}

/* Sekcije */
#plus381-home .plus381-section {
	margin: 0 0 8px;
	padding: 8px;
	background: var(--plus381-surface);
	border: 1px solid var(--plus381-border);
	border-radius: 0px;
}

/* Naslovi kategorija */
#plus381-home .plus381-section h2 {
	margin: 0 0 6px;
	padding-left: 6px;
	border-left: 3px solid var(--plus381-gold);
	color: #000000;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Hero sekcija */
#plus381-home .plus381-hero-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	align-items: stretch;
}

/* Kartice */
#plus381-home .plus381-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	overflow: hidden;
	background: var(--plus381-surface);
	border: 1px solid var(--plus381-border);
	border-radius: 0px;
	box-shadow: none;
	transition: background-color .15s ease;
}

#plus381-home .plus381-card:hover {
	box-shadow: none;
	transform: none;
	background: #fafafa;
}

/* Slike na karticama */
#plus381-home .plus381-card-image {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	max-height: 160px;
	background: #e9e4da;
}

#plus381-home .plus381-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .2s ease;
}

#plus381-home .plus381-card:hover .plus381-card-image img {
	opacity: 0.9;
}

#plus381-home .plus381-card-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 6px 8px;
}

/* Naslovi članaka */
#plus381-home .plus381-card h3 {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
}

#plus381-home .plus381-card h3 a {
	color: var(--plus381-text);
	text-decoration: none;
}

#plus381-home .plus381-card h3 a:hover {
	color: var(--plus381-gold-dark);
}

#plus381-home .plus381-date {
	margin-top: auto;
	color: var(--plus381-muted);
	font-size: 10px;
}

/* Featured (Vodeća + dve sa strane) */
#plus381-home .plus381-featured {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(180px, 1fr);
	gap: 6px;
}

#plus381-home .plus381-featured-side {
	display: grid;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 6px;
}

#plus381-home .plus381-featured-side .plus381-card {
	display: grid;
	grid-template-columns: 85px minmax(0, 1fr);
}

#plus381-home .plus381-featured-side .plus381-card-image {
	height: 100%;
	max-height: 70px;
	aspect-ratio: auto;
}

#plus381-home .plus381-featured-side .plus381-card h3 {
	font-size: 11px;
	line-height: 1.2;

}

/* BANER Naslovna 970x250 (Ispod Istorije) */
#plus381-home .plus381-ad,
#plus381-home .plus381-ad.plus381-ad-banner {
	display: flex !important;
	width: 100% !important;
	max-width: 970px !important;
	min-height: 250px !important;
	margin: 10px auto 12px !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	background: transparent !important;
	overflow: hidden !important;
}

/* FUTER (Orginalna siva pozadina) */
footer.site-footer, 
.site-footer, 
#colophon {
	padding: 12px 0 !important;
	font-size: 11px !important;
	background: #f6f4ef !important;
	border-top: 1px solid #e9e4da !important;
}

/* Mobilni prikaz */
@media (max-width: 900px) {
	#plus381-home .plus381-container,
	#plus381-home .plus381-layout-with-sidebar {
		grid-template-columns: 1fr;
	}

	#plus381-home .plus381-sidebar {
		width: 100%;
		position: static;
	}

	#plus381-home .plus381-hero-grid,
	#plus381-home .plus381-featured {
		grid-template-columns: 1fr;
	}

	#plus381-home .plus381-featured-side {
		grid-template-columns: 1fr;
	}
}
/* Tamni futer (antracit crna sa zlatnim i belim detaljima) */
footer#colophon,
.site-footer,
.site-footer *,
.footer-widgets,
.footer-widgets-inner,
.footer-copyright,
.footer-bar,
.footer-inside {
	background-color: #1a1a1a !important;
	background: #1a1a1a !important;
	color: #cccccc !important;
}

/* Tanka zlatna linija na vrhu futera */
footer#colophon,
.site-footer {
	border-top: 2px solid var(--plus381-gold) !important;
}

/* Boja linkova i copyright teksta u tamnom futeru */
.site-footer a,
.footer-copyright a,
.footer-bar a {
	color: var(--plus381-gold) !important;
	text-decoration: none;
}

.site-footer a:hover,
.footer-copyright a:hover,
.footer-bar a:hover {
	color: #ffffff !important;
}
/* 1. Podrazumevano sakrij sve banere i reklame ako su prazni */
#plus381-home .plus381-ad,
.plus381-in-article-ad,
.plus381-ads-wrapper {
	display: none !important;
}

/* 2. Prikaži ih AUTOMATSKI tek kada se u njima pojavi sadržaj (slika, skripta, iframe) */
#plus381-home .plus381-ad:has(*),
#plus381-home .plus381-ad:not(:empty),
.plus381-in-article-ad:has(*),
.plus381-in-article-ad:not(:empty) {
	display: flex !important;
}

/* Za dupli blok u tekstu — prikaži kontejner ako ima bar jednu reklamu */
.plus381-ads-wrapper:has(.plus381-in-article-ad:not(:empty)),
.plus381-ads-wrapper:has(.plus381-in-article-ad:has(*)) {
	display: flex !important;
}
/* Definitivno sređivanje mobilnog menija i pretrage */
@media screen and (max-width: 900px) {

    /* 1. Poravnavanje ikonice pretrage i hamburger menija u isti red */
    .bloghash-header-mobile .bloghash-nav-container,
    .bloghash-header-widgets,
    .mobile-navigation-toggle {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Kada se meni otvori (klikne na hamburger), prikazuje se ISPOD zaglavlja i ima svoju belu pozadinu */
    .bloghash-mobile-menu-wrapper,
    .mobile-navigation-drawer,
    #bloghash-mobile-menu {
        position: absolute !important;
        top: 100% !important; /* Lepi se tačno na dno zaglavlja */
        left: 0 !important;
        width: 100% !important;
        background-color: #ffffff !important; /* Meni dobija belu pozadinu pa ne proviri tekst ispod */
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15) !important; /* Dodaje senku radi boljeg odvajanja od teksta */
        z-index: 999999 !important;
        display: block !important;
    }

    /* 3. Linkovi u samom mobilnom meniju */
    .bloghash-mobile-menu-wrapper a,
    .mobile-navigation-drawer a {
        color: #111111 !important; /* Osigurava da je tekst menija čitljiv i crn */
        padding: 12px 20px !important;
        display: block !important;
        border-bottom: 1px solid #eeeeee !important;
    }
}/* Smanjivanje fonta u Jetpack Social vidžetu */
.widget_jetpack_display_posts,
.jetpack-social-widget,
.widgets-grid-layout .jetpack-social-navigation {
    font-size: 13px !important;
}

.widget_jetpack_display_posts a,
.jetpack-social-widget a {
    font-size: 13px !important;
}
/* Prinudni prikaz za ИЗДВАЈАМО */
.plus381-hero-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

/* Desktop: 4 kartice u redu */
.plus381-hero-grid > *,
.plus381-hero-grid .card,
.plus381-hero-grid article {
    width: calc(25% - 12px) !important;
    max-width: calc(25% - 12px) !important;
    min-width: calc(25% - 12px) !important;
    box-sizing: border-box !important;
}

/* Mobilni i Tablet (ispod 992px): tačno 2 kartice u redu */
@media screen and (max-width: 992px) {
    .plus381-hero-grid {
        gap: 10px !important;
    }
    
    .plus381-hero-grid > *,
    .plus381-hero-grid .card,
    .plus381-hero-grid article {
        width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        min-width: calc(50% - 5px) !important;
        flex: 1 1 calc(50% - 5px) !important;
    }
}