/* ==========================================================================
   OBLASTI RADA - SPECIFIČNI STILOVI
   ========================================================================== */

/* ---------- HERO BANNER ---------- */
.vladavina-prava-oblast{
	background-color: var(--acdc-red);
}
.aktivno-gradjanstvo-oblast{
	background-color: #f0bc8e;
}
.saradnja-zajednica-oblast{
	background-color: var(--acdc-red-main)
}
.zivotna-sredina-oblast{
	background-color: var(--acdc-green);
}

.oblast-hero-banner {
    border-bottom: 1px solid #ebd8c8;
    width: 100%;
    position: relative;
}

/* ---------- BREADCRUMBS ---------- */
.oblast-breadcrumbs .breadcrumb-item,
.oblast-breadcrumbs .breadcrumb-item a {
    color: white !important;
    text-decoration: none;
}

.oblast-breadcrumbs .breadcrumb-item.active {
    color: white;
}

.oblast-breadcrumbs .breadcrumb-item + .breadcrumb-item::before{
	color: white;
}

/* ---------- OPIS OBLASTI ---------- */
.oblast-description-wrapper {
    background-color: transparent !important;
    border-left: none !important;
    font-size: 0.95rem;
    line-height: 1.6;
}

.lead-custom {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #ffffff !important
}

.toggle-description-btn:hover {
    text-decoration: underline;
    color: white !important;
}

/* ---------- HERO IKONICA ---------- */
.hero-icon-container {
    display: inline-block;
    max-width: 190px;
    width: 100%;
    animation: softPulse 3.5s ease-in-out infinite;
}

.hero-icon-container:hover {
    animation-play-state: paused;
    transform: scale(1.06);
    transition: transform 0.3s ease;
}

.hero-icon-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ---------- ANIMACIJA ---------- */
@keyframes softPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
    100% {
        transform: scale(1);
    }
}

.hero-icon-container {
    display: inline-block;
    max-width: 190px;
    width: 100%;
    animation: softPulse 3.5s ease-in-out infinite;
}

.hero-icon-container:hover {
    animation-play-state: paused;
    transform: scale(1.06);
    transition: transform 0.3s ease;
}

/* Sakrij inline ikonu na desktopu */
.hero-icon-inline {
    display: none;
}

/* Desktop verzija - velika ikona desno */
.hero-icon-container {
    display: inline-block;
    max-width: 190px;
    width: 100%;
    animation: softPulse 3.5s ease-in-out infinite;
}

.hero-icon-container:hover {
    animation-play-state: paused;
    transform: scale(1.06);
    transition: transform 0.3s ease;
}

.hero-icon-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 767px) {
    /* Prikaži inline ikonu */
    .hero-icon-inline {
        display: inline-block;
        flex-shrink: 0;
        width: 50px;
        height: 50px;
    }

    .hero-icon-img-inline {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid white;
        display: block;
    }

    /* Naslov pored ikone */
    .hero-title-row {
        display: flex !important;
        align-items: center !important;
    }

    .media-heading {
        font-size: 1.4rem;
        line-height: 1.2;
    }

    /* Opis preko cele širine */
    .oblast-description-wrapper {
        margin-top: 15px;
    }

    /* Breadcrumbs manji */
    .oblast-breadcrumbs {
        font-size: 0.75rem;
    }
	.lead-custom {
		font-size: .85rem;
		line-height: 1.6;
		color: #ffffff !important;
	}
}

/* ==========================================================================
   ANIMACIJA (ostaje)
   ========================================================================== */
@keyframes softPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

.author-oblasti-badge {
    display: inline-block;
    padding: 4px 10px;
    color: var(--acdc-red, #800000);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}