
/* Full-width special item (e.g., every 5th) */
.grid-item-full {
    margin-bottom: 30px;
}

/* General Item Links */
.grid-item-full a,
.grid-item a {
    display: block;
    color: #fff;
    text-decoration: none;
    position: relative;
}

/* ===========================
   Portfolio Thumbnail
=========================== */

.portfolio-thumb {
    width: 100%;
    height: 550px;
    overflow: hidden;
}

.portfolio-thumb img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* ===========================
   Grid Wrapper
=========================== */

.grid-wrapper {
    display: grid;
    gap: 30px;
    margin-bottom: 60px;

    /* Columns are now controlled dynamically via Elementor's responsive settings */
    /* e.g., grid-template-columns: repeat(3, 1fr); */
}

/* ===========================
   Grid Items
=========================== */

.grid-item {
    overflow: hidden;
}

/* ===========================
   Hover Effects (Add class on parent .portfolio-grid)
=========================== */

/* Zoom effect */
.portfolio-grid.hover-zoom a:hover img {
    transform: scale(1.1);
}

/* Fade effect */
.portfolio-grid.hover-fade a:hover img {
    opacity: 0.7;
}

/* No hover effect */
.portfolio-grid.hover-none a:hover img {
    transform: none;
    opacity: 1;
}

/* ===========================
   Information Box (Title/Desc)
=========================== */

.information-box {
    background-color: #1E140A;
    color: #F8EDE5;
    padding: 15px 20px;
}

/* Portfolio Title */
.information-box h3 {
    margin: 0 0 5px;
    /* Font styles (typography and family controlled by Elementor) */
}
.information-box p {
    margin-bottom: 0px;
}
/* Portfolio Description / Location */
.portfolio-location {
    font-size: 16px;
    color: #F8EDE5;
    margin: 0;
    /* Controlled via Elementor typography settings */
}

/* ===========================
   Responsive Styling
=========================== */

@media (max-width: 1024px) {
    .portfolio-thumb {
        height: 450px;
    }
}

@media (max-width: 650px) {
    .portfolio-thumb {
        height: 300px;
    }
}
