/* ==========================================================================
   LAB SECTION (Masonry 3-Column Grid, Pure Media, Category Filter)
   File: assets/css/lab-grid.css
   ========================================================================== */

/* LAB HERO HEADER */
.lab-header-hero {
    width: 100% !important;
    max-width: 100% !important;
    padding: 120px 40px 40px 40px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.lab-header-hero h1,
.lab-header-title {
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(28px, 4vw, 56px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    margin: 0 0 16px 0 !important;
    text-align: left !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

.lab-header-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    color: #8e8e93 !important;
    max-width: 600px !important;
    margin: 0 0 32px 0 !important;
    line-height: 1.5 !important;
}

/* LAB FILTER BAR (Matching Work-Grid Style 1-to-1) */
.blog-filter-tags,
.lab-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    padding: 0 40px 30px 40px !important;
    margin: 0 !important;
    list-style: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.blog-filter-tags a,
.lab-filter-bar button {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #666666 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    padding-bottom: 6px !important;
    cursor: pointer !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
}

.blog-filter-tags a:hover,
.blog-filter-tags a.active,
.lab-filter-bar button:hover,
.lab-filter-bar button.active {
    color: #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
}

/* LAB SECTION: MOMENT FACTORY 3-COLUMN DENSE MASONRY ARCHITECTURE */
html body .blog-area.grid,
html body #swup .blog-area.grid,
div.area.blog-area.grid,
.blog-area.grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    column-count: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 40px 60px 40px !important;
    box-sizing: border-box !important;
}

.blog-area.grid .lab-masonry-col {
    flex: 1 1 0 !important;
    width: 33.333% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {
    html body .blog-area.grid,
    .blog-area.grid {
        padding: 0 20px 40px 20px !important;
        gap: 12px !important;
    }
    .blog-area.grid .lab-masonry-col {
        width: 50% !important;
    }
}

@media (max-width: 640px) {
    html body .blog-area.grid,
    .blog-area.grid {
        flex-direction: column !important;
        padding: 0 16px 30px 16px !important;
        gap: 12px !important;
    }
    .blog-area.grid .lab-masonry-col {
        width: 100% !important;
    }
}

/* ==========================================================================
   PERMANENTLY VISIBLE MEDIA (KILL SCENA THEME BLACK HOVER MASK)
   ========================================================================== */
.blog-area,
.blog-area.grid,
.blog-area.grid article,
.blog-area.grid .type-post,
.blog-area.grid .post,
.blog-area.grid .post-thumbnail,
.blog-area.grid .project-thumbnail,
.blog-area.grid .post-thumbnail-inner,
.blog-area.grid .project-thumbnail-inner,
.blog-area.grid a,
.blog-area.grid img,
.blog-area.grid video,
.lab-masonry-col,
.lab-masonry-col article,
.lab-masonry-col .type-post,
.lab-masonry-col .post,
.lab-masonry-col .post-thumbnail,
.lab-masonry-col .project-thumbnail,
.lab-masonry-col .post-thumbnail-inner,
.lab-masonry-col .project-thumbnail-inner,
.lab-masonry-col a,
.lab-masonry-col img,
.lab-masonry-col video {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}

/* Eliminate any pseudo-element dark overlays */
.blog-area article::before,
.blog-area article::after,
.blog-area .post-thumbnail::before,
.blog-area .post-thumbnail::after,
.blog-area .post-thumbnail-inner::before,
.blog-area .post-thumbnail-inner::after,
.blog-area a::before,
.blog-area a::after,
.lab-masonry-col article::before,
.lab-masonry-col article::after,
.lab-masonry-col .post-thumbnail::before,
.lab-masonry-col .post-thumbnail::after,
.lab-masonry-col .post-thumbnail-inner::before,
.lab-masonry-col .post-thumbnail-inner::after,
.lab-masonry-col a::before,
.lab-masonry-col a::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    content: none !important;
    background: transparent !important;
}

/* LAB POST CARD (PURE MEDIA - NATURAL DIVERSE ASPECT RATIOS LIKE MOMENT FACTORY) */
.blog-area.grid article,
.blog-area.grid .type-post,
.blog-area.grid .post,
.lab-masonry-col article,
.lab-masonry-col .type-post,
.lab-masonry-col .post {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background: #0d0d12 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.blog-area.grid article:hover,
.blog-area.grid .type-post:hover,
.blog-area.grid .post:hover,
.lab-masonry-col article:hover,
.lab-masonry-col .type-post:hover,
.lab-masonry-col .post:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7) !important;
    z-index: 5 !important;
}

.blog-area.grid article.hidden-post,
.blog-area.grid .type-post.hidden-post,
.lab-masonry-col article.hidden-post,
.lab-masonry-col .type-post.hidden-post {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.blog-area.grid .post-thumbnail,
.blog-area.grid .post-thumbnail-inner,
.blog-area.grid a,
.lab-masonry-col .post-thumbnail,
.lab-masonry-col .post-thumbnail-inner,
.lab-masonry-col a {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.blog-area.grid article img,
.blog-area.grid article video,
.lab-masonry-col article img,
.lab-masonry-col article video,
.blog-area.grid .post-thumbnail-inner img,
.blog-area.grid .post-thumbnail-inner video,
.lab-masonry-col .post-thumbnail-inner img,
.lab-masonry-col .post-thumbnail-inner video {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-radius: 6px !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.blog-area.grid article:hover img,
.blog-area.grid article:hover video,
.lab-masonry-col article:hover img,
.lab-masonry-col article:hover video {
    transform: scale(1.04) !important;
}

/* PURE MEDIA HOVER CAPTION */
.blog-area.grid .post-excerpt,
.blog-area.grid .post-meta,
.blog-area.grid .post-footer,
.blog-area.grid .entry-meta,
.blog-area.grid .entry-summary {
    display: none !important;
}

.blog-area.grid .entry-header,
.blog-area.grid .post-caption,
.blog-area.grid .project-caption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 30px 20px 20px 20px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%) !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.blog-area.grid article:hover .entry-header,
.blog-area.grid article:hover .post-caption,
.blog-area.grid article:hover .project-caption {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.blog-area.grid .entry-title,
.blog-area.grid .post-title,
.blog-area.grid .project-title {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}