/* ============================
   PORTFOLIO GRID
============================ */
.portfolio-grid {
    width: 100%;           /* always fill container */
    max-width: 100vw;      /* prevent horizontal overflow */
    margin: 0 auto;
    padding: 0 12px;       /* small padding from edges */
    box-sizing: border-box;
    column-gap: 24px;      /* Masonry spacing */
    column-count: 3;       /* desktop columns */
}

/* Responsive columns */
@media (max-width: 1100px) {
    .portfolio-grid {
        column-count: 2;
        column-gap: 16px;
    }
}

@media (max-width: 700px) {
    .portfolio-grid {
        column-count: 1;    /* 1 column on mobile */
        column-gap: 0;
        padding: 0 8px;
    }
}

/* ============================
   PORTFOLIO ITEMS
============================ */
.portfolio-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 16px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;

    position: relative;
    overflow: hidden;
    background: #f3f3f3;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    transition: transform .3s ease, box-shadow .3s ease;
}

.portfolio-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}

/* ============================
   MEDIA WRAPPER (Images & Videos)
============================ */
.portfolio-thumb {
    width: 100%;
    display: block;
    overflow: hidden;
    position: relative;
}

.portfolio-thumb img,
.portfolio-thumb video,
.portfolio-thumb iframe,
.portfolio-thumb embed {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.responsive-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
}

.responsive-video iframe,
.responsive-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================
   TITLE OVERLAY
============================ */
.portfolio-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    margin: 0;
    color: #fff;
    font-size: 1rem;
    background: rgba(0,0,0,0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, font-size 0.3s ease, background 0.3s ease;
}

.portfolio-item:hover .portfolio-title {
    opacity: 1;
    font-size: 1.4rem;
    background: rgba(0,0,0,0.35);
}

/* Add Gaussian blur effect to titles on hover */
/* Portfolio title with green translucent background */
.portfolio-title {
    transition: opacity 0.3s ease, font-size 0.3s ease, background 0.3s ease, filter 0.3s ease;
    background: rgba(106, 255, 106, 0); /* fully transparent initially */
}

.portfolio-item:hover .portfolio-title {
    opacity: 1;
    font-size: 1.4rem;
    background: rgba(106, 255, 106, 0.45); /* green with 60% opacity */
    filter: blur(1px);
}

/* Add thin green outline on hover */
.portfolio-item {
    position: relative; /* ensure outline doesn’t break positioning */
    transition: transform 0.3s ease, box-shadow 0.3s ease, outline 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.35);
    outline: 2px solid #6AFF6A; /* thin green outline */
    outline-offset: -1px; /* optional: pulls outline closer to the element */
}

/* ============================
   MOBILE OPTIMIZATIONS
============================ */
@media (max-width: 700px) {
    .portfolio-item {
        margin-bottom: 12px;
    }
    .portfolio-title {
        font-size: 0.9rem;
        padding: 6px;
    }
    .portfolio-item:hover .portfolio-title {
        font-size: 1.2rem;
    }
}

/* Ensure full width for mobile stacking */
.page-template-template-vfx .portfolio-grid,
.page-template-template-grafiks .portfolio-grid,
.page-template-template-collections .portfolio-grid,
.page-template-template-sketchbook .portfolio-grid {
    width: 100%;
    max-width: 100vw;
    padding: 0 8px;
    box-sizing: border-box;
}

/* ============================
  Get post content
============================ */

.portfolio-thumb {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
}

.portfolio-thumb .portfolio-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.portfolio-thumb .portfolio-image {
    width: 100%;
    display: block;
}

.portfolio-item:hover .portfolio-video {
    opacity: 1;
}

.portfolio-item:hover .portfolio-image {
    opacity: 0;
}

/* ============================
   VIDEO HOVER EFFECT FIX
   Only fade the image if there is a video
============================ */

/* The video overlay always exists but hidden by default */
.portfolio-thumb .portfolio-video {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Only fade the image when there is a video */
.portfolio-item.has-video:hover .portfolio-video {
    opacity: 1;
}

.portfolio-item.has-video:hover .portfolio-image {
    opacity: 0;
}

/* Make sure posts without video never fade the image */
.portfolio-item:not(.has-video) .portfolio-image {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Regular hover effect (scale + shadow + outline) for all items */
.portfolio-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.35);
    outline: 2px solid #6AFF6A;
    outline-offset: -1px;
}