/* --- FIX: Unlock Enfold Overflow for Sticky Sidebar --- */

.single-k2_project #wrap_all, 
.single-k2_project #main,
.single-k2_project .container_wrap {
    overflow: visible !important;
}

/* Ensure the sidebar column is tall enough for the inner element to stick within */
.k2-project-info {
    height: 100%;
}

/* -----------------------------------------
   KILL ENFOLD'S INJECTED OVERLAY
----------------------------------------- */
/* Prevents Enfold's JS from forcing inline pixel dimensions that break Safari */
.project-mosaic .project-tile .image-overlay,
.project-mosaic .project-tile .image-overlay-inside {
    display: none !important;
}

/* --- K2 12-Column Mosaic --- */

.project-mosaic {
    display: grid;
    /* 12 Columns allow for 1/2, 1/3, 1/4 layouts */
    grid-template-columns: repeat(12, 1fr); 
    gap: 0; 
    width: 100%;
}

.project-tile {
    position: relative;
    /* Default height logic: Square-ish relative to width */
    aspect-ratio: 16 / 9; 
    overflow: hidden;
    background: #000000; 
    display: block;
    text-decoration: none;
    
    /* SAFARI FIX: Forces the grid to respect the column bounds */
    min-width: 0;
    min-height: 0;
    
    /* SAFARI FIX: Forces hardware acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0); 

    /* --- NEW SAFARI FIXES --- */
    isolation: isolate; /* Creates a strict new stacking context, blocking Enfold theme scripts from breaking the bounds */
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* The ultimate Safari hack to force 'overflow: hidden' to actually clip zoomed child elements */
}

/* --- Span Classes (Generated by PHP) --- */

/* 1/4 Width */
.project-tile.span-3 { grid-column: span 3; aspect-ratio: 1/1; }

/* 1/3 Width */
.project-tile.span-4 { grid-column: span 4; aspect-ratio: 4/3; }

/* 1/2 Width */
.project-tile.span-6 { grid-column: span 6; aspect-ratio: 16/9; }

/* 2/3 Width */
.project-tile.span-8 { grid-column: span 8; aspect-ratio: 16/9; }

/* Full Width (Optional) */
.project-tile.span-12 { grid-column: span 12; aspect-ratio: 21/9; }


/* --- Hover Effects --- */

.project-tile img {
    position: absolute;
    inset: 0; /* Modern shorthand replacing top: 0 and left: 0 */
    width: 100%;
    height: 100%;
    
    /* --- NEW SAFARI FIXES --- */
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%; /* Crucial: Safari often ignores height: 100% on absolute elements without a max-height cap */
    
    object-fit: cover;
    object-position: center; /* Ensures the image stays centered when cropped */
    
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s;
    opacity: 0.9;
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; 
}

/* UPDATED: Darker Fade */
.project-tile:hover img { 
    transform: scale(1.05); 
    opacity: 0.3; /* Fades out more to reveal the black background */
}

.tile-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 2rem; z-index: 2;
    transform: translateY(10px); opacity: 0;
    transition: all 0.3s ease;
    /* Optional: Adds a subtle gradient at the bottom for extra text contrast */
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.project-tile:hover .tile-overlay { transform: translateY(0); opacity: 1; }

/* UPDATED: Title Color */
.tile-overlay h4 { 
    color: #ffffff !important; /* Forces White */
    font-size: 1.5rem; margin: 0; 
    font-family: 'Barlow', sans-serif; text-transform: uppercase; 
    font-weight: 700; line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Adds pop against complex images */
}

.tile-overlay span { 
    color: #e67e22; display: block; margin-bottom: 0.5rem;
    font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}

/* --- Responsive Breakpoints --- */

@media (max-width: 1024px) {
    /* Tablet: Simplify to 2 columns (6 spans) */
    .project-tile.span-3, 
    .project-tile.span-4, 
    .project-tile.span-8 { 
        grid-column: span 6; /* Force half width */
        aspect-ratio: 16/10;
    }
    .project-tile.span-6 { grid-column: span 6; }
    .project-tile.span-12 { grid-column: span 12; }
    
    .project-mosaic { grid-template-columns: repeat(12, 1fr); }
}

@media (max-width: 768px) {
    /* Mobile: Everything stack */
    .project-mosaic { display: block; }
    .project-tile { width: 100%; aspect-ratio: 3/2; margin-bottom: 0; }
}


/* --- Single Portfolio Template --- */

/* Wrapper to isolate styles */
.k2-single-wrapper {
    background: #ffffff;
    width: 100%;
}

/* Hero Section */
.k2-single-hero {
    position: relative;
    width: 100%;
    height: 70vh; /* Cinematic height */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    margin-bottom: 5rem;
}

.k2-hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.2));
    z-index: 1;
}

.k2-hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 4rem;
    width: 100%;
    /* Inherits .container max-width from your global CSS if present, 
       otherwise add: max-width: 1280px; margin: 0 auto; padding: 0 2rem; */
}

.k2-hero-cat {
    display: block;
    color: #e67e22; /* Accent */
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-family: 'Barlow', sans-serif;
}

.k2-single-hero h1 {
    color: white;
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 1;
    margin: 0;
    max-width: 800px;
    text-transform: uppercase;
}

/* Split Layout */
.k2-project-body {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1/3 Left, 2/3 Right */
    gap: 4rem;
    padding-bottom: 6rem;
    /* Ensure container logic applies if not global */
    width: 100%; max-width: 1280px; margin: 0 auto; padding-left: 2rem; padding-right: 2rem;
}

/* Left Sticky Sidebar */
.k2-project-info {
    position: relative;
}

.k2-sticky-track {
    position: sticky;
    top: 120px; /* Sticks 120px from top of window */
}

.k2-project-desc h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #121212;
    text-transform: uppercase;
    font-weight: 700;
}

.k2-project-desc p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

/* Meta Data Grid */
.k2-project-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
}

.meta-item span {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.meta-item strong {
    display: block;
    font-size: 1.1rem;
    color: #121212;
}

.k2-back-btn {
    display: inline-block;
    margin-top: 1rem;
    /* Basic btn styles fallback if global btn not loaded */
    padding: 1rem 2rem;
    background: #121212;
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.k2-back-btn:hover {
    background: #e67e22;
    color: white;
}

/* Right Gallery Stack */
.k2-project-gallery {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.k2-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.img-caption {
    font-size: 0.9rem;
    color: #777;
    margin-top: 0.5rem;
    font-style: italic;
}

/* Responsive */
@media (max-width: 900px) {
    .k2-project-body {
        grid-template-columns: 1fr; /* Stack vertically on mobile */
        gap: 3rem;
    }
    
    .k2-sticky-track {
        position: relative; /* Remove sticky on mobile */
        top: 0;
    }
    
    .k2-single-hero {
        height: 50vh;
    }
}