#ajax-content {
    min-height: 100vh;
    background-color: #fff;
    position: relative;
    /* Remove display:flex; as we are now layering elements via absolute positioning */
    overflow-x: hidden; 
}

/* 1. The Loader: Locked to the center of the screen */
.loading-state {
    position: absolute; /* Changed from flex-item to absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 1; /* Sits behind the content */
}

/* The Preloader Image */
.preloader-img {
    width: 40px;
    height: auto;
    opacity: 0.8;
}

/* The Text Style */
.loading-text {
    font-size: 10px;
    color: #aaa;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 2. The Content Wrapper: Sits on top of the loader */
.ajax-loaded-content {
    position: relative;
    z-index: 2; /* Sits on top of the loader */
    min-height: 100vh;
	background-color: transparent !important;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    
}

/* Add this to your CSS */
.ajax-loaded-content video {
    background-color: #000; /* Or transparent if you want to see the GIF through it */
    min-height: 200px; /* Prevents the layout from collapsing before video loads */
}

.ajax-loaded-content.is-visible {
    opacity: 1 !important;
    background-color: #fff !important; /* Becomes solid white once revealed */
}
/* --- 1. MAIN LAYOUT CONTAINERS --- */
.viewer-main {
    padding-top: 40px;
    padding-bottom: 40px; /* Added to match top padding */
    animation: fadeIn 0.6s ease-out;
}

.project-container {
    width: 100%;
    margin: 0 auto;
    transition: width 0.3s ease;
}
/* Master Grid Layout */

/* Ensure the hero stage stays centered regardless of content */
.hero-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fdfdfd;
	justify-content: center; /* Centers the 400px image */
}


.details-section{
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    margin: 20px 0;
	width: 100%;
	border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.caption-column {
    font-size: 14px;
    line-height: 1.8;
	padding: 20px 40px;
    color: #333;
    border-right: 1px solid #eee;
}
.meta-column {
    width: 380px;
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes the button to the bottom */
    box-sizing: border-box;
    background: #fafafa; /* Very subtle tint to distinguish the "action" zone */
	gap:20px;
	font-size:12px;
}

/* --- 2. VIDEO & MEDIA STAGE --- */
#video-stage {
    width: 100%;
    max-width: 100%; /* Or your specific max container width */
    margin: 0 auto;
    background: #000;
    line-height: 0; /* Removes tiny gaps at the bottom of the video */
}

#mainPlayer {
    width: 100%;
    height: auto;       /* This is key: it lets the source dictate height */
    max-height: 80vh;   /* Optional: prevents vertical videos from being taller than the screen */
    display: block;
    object-fit: contain; /* Ensures the video isn't cropped if the container is weird */
}
/* Hide the video until it is ready to play/show */
/*video:not([data-ready="true"]) {
    opacity: 0;
}

video[data-ready="true"] {
    opacity: 1;
    transition: opacity 0.5s ease;
}*/

/* Master Button Component */
.cv-btn, 
.project-btn, 
.ig-main-link, 
#submitBtn {
    background: #000;
    color: #fff !important; 
    padding: 18px 40px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    border: 2px solid #000; 
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.4s ease;
    box-sizing: border-box;
    text-align: center;
}

/* Force Full Width for Sidebar/Project Buttons */
.project-btn, 
.ig-main-link {
    display: block;
    width: 100%;
}

/* Ensure CV-BTN stays inline/centered if used in text */
.cv-btn {
    display: inline-block;
}

/* Unified Hover State */
.cv-btn:hover, 
.project-btn:hover, 
.ig-main-link:hover, 
#submitBtn:hover {
    background: var(--highlight, #d4af37);
    border-color: var(--dark, #1a1a1a); 
    color: var(--dark, #1a1a1a) !important; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}






/* --- 2. Top Section (Centered Hero Image) --- */


/* --- UPDATE SECTION 2 & 4 --- */
.ig-carousel-wrapper {
    width: 600px;
    height: 600px;
    position: relative;
    background: #000;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    margin: 0 auto; /* Ensures it stays centered in top-section */
}

.ig-media-stage {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* This is the class inside your foreach loop */
.carousel-slide {
    flex: 0 0 100%; /* FORCES it to be the full width of the wrapper */
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ig-carousel-media {
    width: 100% !important; /* Overrides any fixed 600px if container shrinks */
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Hide the default video play bar until hover to keep it clean */
video.ig-carousel-media::-webkit-media-controls {
    opacity: 0;
    transition: opacity 0.3s;
}

video.ig-carousel-media:hover::-webkit-media-controls {
    opacity: 1;
}


/* --- Profile Header Styling --- */
.ig-profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important; /* Forces no underline */
    transition: opacity 0.2s ease;
    outline: none;
}

.ig-profile-header:hover {
    opacity: 0.7;
    text-decoration: none; /* Ensures no underline appears on hover */
}

.ig-profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Makes it round */
    object-fit: cover;
    border: 1px solid #eee;
}

.ig-username-text {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    text-decoration: none; /* Safety belt */
    letter-spacing: -0.2px;
}

/* Location Styling */
.ig-location-row {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666; /* Slightly darker than the date for hierarchy */
}

.ig-loc-icon {
    width: 14px;
    height: 14px;
    stroke: var(--highlight, #d4af37); /* Uses your gold if available, otherwise gray */
    vertical-align: middle;
}

.ig-location-text {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.ig-hashtag-wrapper {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid #f0f0f0;
    padding: 20px 0;
}

.ig-tag-item {
    font-size: 10px;
    font-weight: 600;
    color: #888;
    text-decoration: none; /* Remove default link underline */
    text-transform: lowercase;
    background: #f8f8f8;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #eee;
    transition: all 0.2s ease;
}

.ig-tag-item:hover {
    background: #000;
    color: #fff;
    border-color: #000;
    transform: translateY(-1px);
}

/* Ensure the meta top content stacks correctly */
.meta-content-top {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Tightened gap for meta items */
}

/* --- 4. Internal Components --- */
.ig-media-stage::-webkit-scrollbar { display: none; }

.ig-media-item {
    flex: 0 0 100%;
    width: 600px;
    height: 600px;
    object-fit: cover;
    scroll-snap-align: center;
}

.ig-action-wrapper {
    margin-top: 30px;
}

/* Overriding the previous block link to fit the new left-aligned caption style */

.ig-post-date {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
}

/* Navigation & Overlays */
#ig-counter {
    position: absolute; top: 15px; left: 15px;
    background: rgba(0,0,0,0.6); color: #fff;
    padding: 5px 12px; border-radius: 20px;
    font-size: 10px; font-weight: 700; z-index: 5;
}

.ig-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.ig-prev { left: 15px; }
.ig-next { right: 15px; }

/* Meta Content Alignment */

.ig-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Changed from end to start for the new panel layout */
    gap: 8px;
}

.ig-post-date { font-size: 12px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }

.ig-follow-btn {
    font-size: 11px;
    font-weight: 700;
    color: #000;
    border: 1px solid #000;
    padding: 8px 16px;
    text-decoration: none;
    transition: 0.3s;
}

.ig-follow-btn:hover {
    background: #000;
    color: #fff;
}

.project-btn.ig-main-link {
    width: 100%;
    display: block;
    text-align: center;
    box-sizing: border-box;
}

/* --- 4. MULTI-VIDEO GALLERY --- */
.video-gallery {
    display: flex;
    gap: 12px;
    margin-top: 25px;
    overflow-x: auto;
    padding-bottom: 15px;
    scrollbar-width: thin;
    scrollbar-color: #eee transparent;
}

.video-gallery::-webkit-scrollbar { height: 3px; }
.video-gallery::-webkit-scrollbar-thumb { background: #eee; }

.thumb-item {
    flex: 0 0 140px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.3s ease;
}

.thumb-item:hover {
    transform: translateY(-2px);
    opacity: 1 !important;
}

/* --- 5. METADATA GRID --- */
.meta-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 60px;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    /* margin-top: 40px; */
}

.project-title {
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 25px;
	margin-top: 0px;
    font-size: 22px;
    font-weight: 800;
}

/* --- 6. SIDEBAR & BUTTONS --- */
.sidebar {
    font-size: 12px;
    border-left: 1px solid #eee;
    padding-left: 50px;
}

.bio-image-circle {
    width: 180px;               /* Defined Width */
    height: 180px;              /* Defined Height */
    float: left;
    margin-right: 40px;
    margin-bottom: 20px;
    border-radius: 50%;         /* Makes it a circle */
    background-size: cover;     /* Ensures image fills the circle */
    background-position: center;
    background-repeat: no-repeat;
    
    /* The "Secret Sauce" for text wrapping */
    shape-outside: circle(50%); 
}

/* Clearfix for the container to prevent height collapse */
.bio-container::after {
    content: "";
    display: table;
    clear: both;
}

/* --- 7. ANIMATIONS & RESPONSIVE --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- TABLET REFINEMENT (900px) --- */
@media (max-width: 900px) {
.project-container.ig-split-view {
        width: 95%; /* More room for the split view */
    }

    .ig-carousel-wrapper {
        width: 500px; /* Reduced from 600px */
        height: 500px;
    }

    .ig-bottom-section {
        grid-template-columns: 1fr 300px; /* Reduced sidebar from 380px */
    }

    .ig-meta-panel {
        width: 300px;
        padding: 30px; /* Tighter padding */
    }

    .ig-caption-container {
        padding: 30px;
    }
	.details-section { grid-template-columns: 1fr 320px; }

}

/* --- MOBILE STACKED VIEW (768px) --- */
@media (max-width: 768px) {
    .project-container.ig-split-view {
        width: 100%;
        padding: 0;
    }

    /* Ensure the video/image wrapper stays square but fills width */
	.ig-carousel-wrapper {
        width: 100%; /* Fluid width */
        height: auto; 
        aspect-ratio: 1 / 1;
    }

	.ig-top-section {
        padding-bottom:0;
		border-bottom: 0;
    }
	
    .ig-bottom-section {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr; /* Reset grid */
    }

    .ig-meta-panel {
        width: 100%;
        background: #fff; /* Match caption background for a seamless stack */
        border-top: 1px solid #eee;
    }

    .ig-media-stage {
        height: 100%;
    }

    .ig-carousel-media {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Crucial for Reels to fill the 1:1 container */
    }

    /* STACK THE BOTTOM SECTION */
    .ig-bottom-section {
        display: flex;
        flex-direction: column; /* Stack Caption on top of Meta */
        gap: 0px;
        padding: 40px 0;
    }

    .ig-caption-container {
        width: 100%;
        border-bottom: 0;
        padding: 0px;
		border-right: 0;
    }

    .ig-meta-panel {
        width: 100%;
        border-left: none; /* Remove any desktop side-borders */
    }
	
	.ig-meta-action-row{
		margin-top:20px;
	}

    .ig-nav { 
        display: none; /* Optional: Hide nav arrows if using touch-swipe */
    }
	.details-section {
        display: flex;
        flex-direction: column; /* Stacks Caption on top of Sidebar */
    }
    .caption-column, .meta-column { width: 100%; }
}