/* --- In Personal Portfolio/component_stylings/projects-carousel.css --- */

#projects {
    /* Set to a wider max-width to allow the carousel to feel expansive */
    max-width: 100%;
    padding-top: 6rem;
    padding-bottom: 6rem;
    /* We override the default centering to start content from the left */
    margin: 0 auto;
    text-align: left;
}

#projects h2 {
    /* Style the "Projects I worked on." title */
    font-size: 2.5rem;
    color: #f5f5f5;
    margin-bottom: 2rem;
    
    /* Constrain the title to the same width as other content */
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem; /* Match main section padding */
}

/* * This is the main container that enables horizontal scrolling.
 * It hides the scrollbar visually but keeps it functional.
*/
.projects-carousel-container {
    overflow-x: auto; /* Enables horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    
    /* --- The "Apple Snap" --- */
    scroll-snap-type: x mandatory; /* Snap horizontally */
    
    /* Hide scrollbar for a cleaner look */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.projects-carousel-container::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

/*
 * This is the "track" that holds all the cards.
 * It's a flex container that will grow as new cards are added.
*/
.projects-carousel-track {
    display: flex;
    flex-wrap: nowrap; /* Ensures cards stay in a single line */
    gap: 1.5rem; /* Space between cards */
    
    /* * This padding is key! It adds space so the first and last
     * cards can snap to the center/start, matching the main 
     * page content's padding.
    */
    padding: 2rem 2rem; /* Adds padding inside the scroll area */
    
    /* This calculates padding to match the main content's max-width */
    padding-left: max(2rem, (100% - 1100px) / 2);
    padding-right: max(2rem, (100% - 1100px) / 2);
}

/*
 * This is the individual project card.
 * It's designed based on your inspiration image.
*/
.project-card {
    /* --- Sizing --- */
    flex: 0 0 360px; /* Card will be 360px wide and not shrink */
    height: 480px; /* Fixed height for a uniform look */
    
    /* --- Snap Alignment --- */
    /* 'start' aligns the card to the start of the container (respecting padding) */
    scroll-snap-align: start; 
    
    /* --- Styling --- */
    background-color: #222; /* Dark card background */
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* --- Layout --- */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensures image corners are rounded */
    
    /* --- Effects --- */
    transform: scale(1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: scale(1.02); /* Subtle lift on hover */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.project-card-image {
    height: 60%;
    width: 100%;
    background-color: #333; /* Fallback color */
    background-size: cover;
    background-position: center;
}

/* Specific styling for our placeholder images */
.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Takes up remaining space */
    padding: 1.5rem;
}

.project-card-content h3 {
    /* "Input helper." */
    font-size: 1.5rem;
    font-family: 'Montserrat', sans-serif;
    color: #f5f5f5;
    margin-bottom: 0.25rem;
}

.project-card-content p {
    /* "React Native, Npm package" */
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* This pushes the link to the bottom of the card */
.project-card-content .spacer {
    flex-grow: 1;
}

.project-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.project-card-link svg {
    width: 14px;
    height: 14px;
    fill: #ccc;
    transition: fill 0.2s ease;
}

.project-card-link:hover,
.project-card-link:hover svg {
    color: var(--c-action);
    fill: var(--c-action);
}



/* --- Add to end of projects-carousel.css --- */

@media (max-width: 820px) {
    .project-card {
        flex: 0 0 320px; /* Narrower card */
        height: 450px; /* Slightly shorter */
    }
}

@media (max-width: 480px) {
    .project-card {
        flex: 0 0 85vw; /* Use viewport width */
        height: auto; /* Let content define height */
    }

    .project-card-content h3 {
        font-size: 1.25rem;
    }
}