/*
 * Styles for the SS Projects Showcase
 */

:root {
    --ss-project-gap: 0px; /* Keep gap at 0 for touching corners */
    --ss-project-border-radius: 10px; 
    --ss-project-shadow: none; 
    --ss-image-aspect-ratio: 4/3; /* Set desired 4:3 aspect ratio */
}

/* Main wrapper: Make it full width */
.ss-projects-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0; /* No padding on the main wrapper */
    overflow-x: hidden;
}

/* Individual project entry styling */
.ss-project-entry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ss-project-gap); /* Keep at 0 for touching corners */
    margin: 0; /* Remove all margins */
    
    /* Vertically center content and image */
    align-items: center; 
    
    /* --- NEW: Add transition for gap --- */
    transition: margin-bottom 0.5s ease-out;
}

/* --- NEW: Rule to add gap when content is expanded --- */
.ss-project-entry.is-content-expanded {
   /* margin-bottom: 3rem; /* Adjust this value as needed */
}


/* Content column: Now with black background and correct centering */
.ss-project-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    
    /* * KEY CHANGE: Align text block to the left * */
    align-items: flex-start; /* Horizontally align the inner div */
    
    /* Per user: padding: 0 */
    padding: 0;
 
    background-color: #000; /* SET BLACK BACKGROUND */

    /* Base state for GSAP animation */
    opacity: 0;
    transform: translateX(-40px);
}

/* NEW: The inner content wrapper */
.ss-project-content-inner {
    width: 100%;
    max-width: 500px; /* Constrain line-length, just like reference */
    text-align: left; /* LEFT-ALIGN all text inside */
    
    /* * KEY CHANGE: Add left margin for alignment * */
    /* This pushes the text block in from the left edge */
    margin-left: 10%; 
}

/* Image column */
.ss-project-image {
    /* Base state for GSAP animation */
    opacity: 0;
    transform: translateX(40px);
    
    /* Set a fallback background color for broken images */
    background-color: #1a1a1a; 
    width: 100%; /* Ensure it fills its grid cell */
}

/* Styling for the image itself */
.ss-project-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Crop to fill without distorting */
    border-radius: var(--ss-project-border-radius);
    
    /* * KEY CHANGE: Use aspect-ratio to define shape * */
    aspect-ratio: var(--ss-image-aspect-ratio);
}

.ss-project-image a {
    display: block; /* Make the link fill the image container */
    height: auto;
}

/* * The Inverted Logic:
 * We swap the grid column order for the inverted rows.
 */
.ss-project-entry--inverted .ss-project-content {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    transform: translateX(40px); /* Initial animation state for inverted row */
}

.ss-project-entry--inverted .ss-project-content-inner {
     /* --- FIX for overlap --- */
     margin-left: auto;
     margin-right: 10%;
     /* --- END FIX --- */
}


.ss-project-entry--inverted .ss-project-image {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    transform: translateX(-40px); /* Initial animation state for inverted row */
}

/* States for when GSAP adds the 'is-visible' class */
.ss-project-entry.is-visible .ss-project-content,
.ss-project-entry.is-visible .ss-project-image {
    opacity: 1;
    transform: translateX(0);
}


/* Typography and Links */
.ss-project-title {
    font-size: 1.25rem;
    font-weight: 700;
    /* --- Adjusted Margin --- */
    margin-bottom: 0.5rem; /* Reduced to bring location closer */
    /* --- End Adjusted Margin --- */
    color: #f7fafc; /* Lighter text for black background */
    line-height: 1.2;
}

.ss-project-title-link {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.ss-project-title-link:hover .ss-project-title {
    color: #4299e1; /* Accent color on hover */
}

/* NEW: Location Taxonomy Styling */
.ss-project-location {
    color: #0086CD;
    font-size: 1rem; /* Make it slightly smaller than excerpt */
    font-weight: 600;
    display: block;
    /* --- Adjusted Margin --- */
    margin-bottom: 1rem; /* Space between location and excerpt */
    /* --- End Adjusted Margin --- */
    text-decoration: none; /* In case it's a link */
    transition: color 0.3s ease;
}

.ss-project-location:hover {
    color: #4299e1; /* Optional: darken or lighten on hover */
}
/* END: Location Taxonomy Styling */

.ss-project-excerpt {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #e2e8f0; /* Lighter text for black background */
    /* --- Adjusted Margin --- */
    margin-top: 0; /* This is correct for when a location IS present */
    margin-bottom: 1.5rem;
    /* --- End Adjusted Margin --- */

    /* --- "Read More" Styles ADDED --- */
    max-height: 150px; /* Adjust this value to show more/less text */
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    position: relative; /* Needed for the fade-out effect */
}

/* --- NEW: Fade-out effect for text --- */
.ss-project-excerpt::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4rem; /* Height of the fade */
    background: linear-gradient(to bottom, transparent, #000); /* Black fade */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0; /* HIDE BY DEFAULT */
    visibility: hidden; /* HIDE BY DEFAULT */
    pointer-events: none; /* Allows clicking text underneath */
}

/* --- CORRECTED FADE LOGIC --- */
/* Show the fade ONLY if the class is present */
.ss-project-excerpt.has-fade-effect::after {
    opacity: 1;
    visibility: visible;
}
/* Hide the fade if the text is expanded */
.ss-project-excerpt.is-expanded::after {
    opacity: 0;
    visibility: hidden;
}
/* --- END Fade-out --- */


/* NEW: Rule to add space when location is missing */
.ss-project-excerpt--no-location {
    margin-top: 1.5rem; 
}

/* NEW: Rule to add space between paragraphs inside the excerpt */
.ss-project-excerpt p {
    margin-bottom: 1rem; /* Adjust as needed */
    color:#777;
}
.ss-project-excerpt p:last-child {
    margin-bottom: 0; /* Prevents double margin */
}
/* END: New Rules */

/* --- "Read More" Styles ADDED --- */
.ss-project-excerpt.is-expanded {
    max-height: 1000px; /* Set to a large value */
    transition: max-height 0.7s ease-in;
}

/* "Read More" Toggle Button */
.ss-project-toggle {
    display: none; /* Hidden by default, shown by JS */
    font-weight: 600;
    /* --- NEW Button Colors --- */
    color: #0086CD; /* Your blue link color */
    /* --- End New Colors --- */
    text-decoration: none;
    transition: color 0.3s ease; /* Animate color change */
    background: none !important; /* FIX: Added !important */
    background-color: transparent !important; /* FIX: Added !important */
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 0.5rem; /* Space above the button */
}

.ss-project-toggle:hover {
    /* --- NEW Hover Color --- */
    color: #e2e8f0; /* Light gray */
}
/* --- End "Read More" Styles --- */


/* Remove image hover effects as they conflict with "touching corners" */
.ss-project-image a:hover img {
    transform: none;
    box-shadow: none;
}


/* * Responsive Design: Mobile
 * On small screens, stack everything into a single column.
 */
@media (max-width: 768px) {
    .ss-project-entry {
        grid-template-columns: 1fr; /* Stack to 1 column */
        gap: 0; 
        align-items: stretch; /* Reset alignment for mobile */
    }
    
    /* --- NEW: Add gap on mobile when expanded --- */
    .ss-project-entry.is-content-expanded {
        margin-bottom: 0; /* Reset desktop margin */
    }
    /* --- (We add padding to the content block instead) --- */


    /* Force a consistent order on mobile: Image First, then Content. */
    .ss-project-entry .ss-project-image,
    .ss-project-entry--inverted .ss-project-image {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        transform: translateX(0);
        opacity: 1;
    }
    
    /* Keep aspect ratio consistent on mobile */
    .ss-project-image img {
        aspect-ratio: var(--ss-image-aspect-ratio); 
    }

    .ss-project-entry .ss-project-content,
    .ss-project-entry--inverted .ss-project-content {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        transform: translateX(0);
        opacity: 1;
        padding: 2rem 1.5rem; /* Adjust padding for mobile */
        align-items: flex-start; /* Keep left-aligned */
    }
    
    .ss-project-content-inner {
        margin-left: 0; /* Remove margin on mobile */
        max-width: 100%; /* Allow full width on mobile */
    }

    /* We will disable the JS animation on mobile by default */
    /* See projects-script.js for the media query check */

    .ss-project-title {
        font-size: 1.75rem;
    }

    .ss-project-excerpt {
        font-size: 1rem;
        max-height: 200px; /* Adjust "Read More" height for mobile */
    }
}