/* ==========================================================================
   Masonry Gallery block — kozmetika (layout je inline u render.php)
   ========================================================================== */
.masonry-gallery__intro {
    text-align: center;
    max-width: 600px;
    margin: 4em auto;
}

.masonry-gallery__intro p {
	font-family: 'Cormorant Garamond' !important;
	font-size: 17pt !important;
    color: #4f473e !important;
	font-weight: 100 !important;
	line-height: 1.4;
}

.masonry-gallery__intro p {
    margin: 0;
    font-size: 1.15rem !important;
}

.masonry-gallery__intro em,
.masonry-gallery__intro i {
    font-style: italic;
}

.masonry-gallery {
	gap: 80px !important;
}

.masonry-gallery__img {
    transition: transform 0.6s ease;
}

.masonry-gallery__item:hover .masonry-gallery__img {
    transform: scale(1.05);
}

.masonry-gallery__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%);
    pointer-events: none;
}

.masonry-gallery__text {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
	position: relative;
	justify-content: center;
	color: #f0e9df !important;
}

.masonry-gallery__title {
    font-family: 'Gotham Rounded' !important;
    font-size: 20pt !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 300 !important;
    color: #fff !important;
}

.masonry-gallery__subtitle {
    font-family: 'Cormorant Garamond' !important;
    font-size: 15pt !important;
    font-style: italic;
    opacity: 0.9;
    color: #fff !important;
}

.masonry-gallery__column {
	gap: 160px !important;
}

.masonry-gallery .masonry-gallery__column:nth-child(1) .masonry-gallery__item:nth-child(1) {
	margin-top: 160px !important;
    margin-left: 10% !important;
    height: 55vh !important;
    width: 90% !important;
}

.masonry-gallery + .masonry-gallery .masonry-gallery__column:nth-child(1) .masonry-gallery__item:nth-child(1) {
	margin-top: 15% !important;
    height: 55vh !important;
}

.masonry-gallery__column:nth-child(1) .masonry-gallery__item:nth-child(2) {
	width: 60% !important;
    margin-left: 20% !important;
    height: 90vh !important;
}

.masonry-gallery__column:nth-child(2) .masonry-gallery__item:nth-child(1) {
	width: 90% !important;
    height: 100vh !important;
}


.masonry-gallery__column:nth-child(2) .masonry-gallery__item:nth-child(2) {
	height: 50vh !important;
    width: 100% !important;
    margin-left: 0 !important;
    transform: scale(1.3) !important;
    margin-top: 15% !important;
}

/* Responsive: kolone padaju ispod jedna druge na manjim ekranima.
   !important je namjerno ovdje — jedini način da eksterni CSS
   pregazi inline stilove je preko !important. */
@media (max-width: 700px) {
    .masonry-gallery {
        flex-direction: column !important;
    }

    .masonry-gallery__column {
        width: 100% !important;
    }

    .masonry-gallery__item {
        height: 260px !important;
    }
}