/* style.css */

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    color: #000000;
    font-family: sans-serif;
}

.sketch-container {
    height: 100vh;
    width: 100vw;  /* Ensure full viewport width */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 0;  /* Remove any padding */
    margin: 0;   /* Remove any margin */
}

.sketch-section {
    min-height: 100vh;
    height: 100vh;
    width: 100vw;
    scroll-snap-align: end;
    scroll-snap-stop: always;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-shrink: 0;
    scroll-margin-bottom: 0;
    padding: 0;  /* Remove any padding */
    margin: 0;   /* Remove any margin */
}

.sketch-section canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;  /* Remove any padding */
    margin: 0;   /* Remove any margin */
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 2rem;
    display: flex;
    justify-content: center; /* Center the nav container */
}

.main-nav {
    display: flex;
    align-items: center;
    margin: 0 auto; /* Center within header */
}

.nav-item {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 1rem;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    font-family: 'Inter', sans-serif;
    text-transform: lowercase;
    margin-left: 2rem; /* Use margin instead of gap */
}

/* Style for "Andy Serra" */
.nav-item:first-child {
    opacity: 0.9;
    margin-left: 0; /* Remove margin from first item */
    margin-right: 4rem; /* Space between logo and nav items */
}

.nav-item:hover {
    opacity: 0.5;
}

/* Add styles for regular pages (non-sketch pages) */
main {
    padding: 120px 2rem 2rem;  /* Extra padding at top to account for fixed header */
    min-height: 100vh;
    background: #000;
    color: #fff;
}

/* About page specific styles */


#about-sketch {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Setting z-index to -1 is often more robust for backgrounds */
}

.about-content {
    position: relative;
    z-index: 1; /* Keep this on top */
    padding: 120px 2rem 2rem;
    background-color: rgb(255, 255, 255); 
}

.page-content {
    max-width: 800px;
    margin: 0 auto;
    color: black;
}

.page-content h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.page-content p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* About page content styles */
.page-content a {
    color: black;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.page-content a:hover {
    opacity: 1;
}

/* Ensure all text in page-content is black */
.page-content {
    color: black;
}

.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;  
}

.gallery-container2 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0rem;  
}


.project-page {
    background-color: rgb(255, 255, 255); 
    color: black;
}

.project-content {
    position: relative;
    padding: 120px 0rem 0rem;
    background-color: rgba(255, 255, 255, 0); 
    color: black;
}

.project-grid {
    display: grid;
    /* Optional but good practice: explicitly define one column. */
    grid-template-columns: 1fr; 
    
    /* The main reason to use grid: clean spacing between items. */
    gap: 1rem;
    
    /* Standard container styles */
    max-width: 1200px;
    margin: 0 auto;
}

body.project-page {
    height: auto;       /* Allow the body to grow as tall as its content */
    overflow-y: auto;   /* Ensure a vertical scrollbar appears when needed */
}

.project-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* This property is for the BODY's scroll snap, not the grid itself. */
    scroll-snap-align: start; 
}

.project-image {
    width: 100%;    /* Makes the image fill the card's width. */
    height: auto;   /* Allows the image's height to scale proportionally. */
    display: block; /* Removes extra space that can appear below images. */
}

.project-note { 
    position: absolute; 
    bottom: 20px; left: 50%; 
    transform: translateX(-50%); 
    padding: 10px 15px; 
    background-color: rgba(255, 255, 255, 0.9); 
    border-radius: 4px; 
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.061); 
}
.project-note p { 
    margin: 0; 
    font-size: 0.9rem; 
    color: #333; 
}

/* This styles the footer area itself (the gray or white box) */
.note-container {
    padding: 0.5rem; /* Give it some nice spacing */
    text-align: center;
}

/* This targets the <p> tag INSIDE the footer */
.note-container p {
    /* CRITICAL FIX: Constrain the width of the text block.
       It will never be wider than 85% of its parent card. */
    max-width: 85%;
    
    /* CRITICAL FIX: Center the text block now that it has a max-width. */
    margin: 0 auto;

    /* General typography for readability */
    font-size: 1rem;
    line-height: 1.6;
    color: #333; /* A soft, dark gray is often better than pure black */
}

/* ==========================================================================
   Project Page - Asymmetrical Masonry Grid (project-grid2)
   ========================================================================== */
body.is-scrollable {
    height: auto;
    overflow-y: auto;
}
/* 1. The Grid Container */
.project-grid2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Your 3-column layout */
    grid-auto-rows: 5px; /* The base unit for your masonry row spans */
    gap: 1.5rem; 
    max-width: 1200px; /* A standard width for the grid */
    margin: 0 auto; /* Center the grid and remove extra vertical margins */
}

/* 2. The Grid Items */
.project-grid2 .project-item2 {
    overflow: hidden; /* CRITICAL: This clips the image to the rounded corners */
    border-radius: 8px;
}

/* 3. The Images within the Grid */
.project-grid2 .project-item2 .project-image {
    width: 100%;
    height: 100%;       /* Tells the image to fill the container's height */
    display: block;
    object-fit: cover;  /* THE KEY: Fills the space without stretching or distorting the image. */
}

/* --- Column Spans (Unchanged) --- */
.project-grid2 .span-col-1 { grid-column: span 1; }
.project-grid2 .span-col-2 { grid-column: span 2; }
.project-grid2 .span-col-3 { grid-column: span 3; }

/* --- Row Spans (CRITICAL FIX: Math is corrected for 5px rows) --- */
/* To get a 450px tall image: 450 / 5 = 90 */
.project-grid2 .layout-portrait { grid-row: span 20; } 
.project-grid2 .layout-landscape { grid-row: span 30; } 

.project-grid2 .layout-square { grid-row: span 20; } 
.project-grid2 .layout-tall { grid-row: span 20; }

.sub-project-page .gallery-container {
    /* We remove all padding because the grid and description will handle their own spacing. */
    padding: 0;
}

/* Controls the space between the text description and the grid */
.sub-project-page .project-description {
    max-width: 800px;
    margin: 0 auto 3rem auto; /* Defines the space ABOVE the grid */
    text-align: center;
    line-height: 1.6;
}

/* This targets the grid ONLY on a sub-project page. */
.sub-project-page .project-grid2 {
    /* We remove the vertical margin because the space is now handled
       by the .project-description above it. */
    margin-top: 0;
    margin-bottom: 0;
}
/* ==========================================================================
   Tools Grid
   ========================================================================== */

/* 3. The main grid container for your tools */
.tools-grid {
    display: grid;
    /* Create 3 columns on larger screens, recycling your responsive approach */
    grid-template-columns: repeat(3, 1fr); 
    gap: 2rem;              /* Space between grid items */
    max-width: 1200px;        /* Consistent max-width */
    margin: 0 auto;           /* Center the grid container */
}

/* 4. The individual grid item and aspect ratio magic */
.tools-grid .grid-item img {
    width: 100%;
    display: block;
    
    /* The aspect ratio now applies TO THE IMAGE, not the whole card */
    aspect-ratio: 1 / 1.5; /* 1.5:1 aspect ratio */
    object-fit: cover;
    /* We remove height: 100% to let the footer have space */
}

/* 5. Ensure images fill their container correctly */
/* This is a new rule specific to the .tools-grid */
.tools-grid .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* Cover the area without distortion */
    display: block;           /* Remove extra space under the image */
    border: 1px solid #000000; /* Optional border for visibility */
    border-radius: 0px; 
}

.tools-grid .grid-item footer {
    padding: 1rem;
    text-align: center;
    background-color: #ffffff; /* Ensure it has a solid background */
    flex-shrink: 0; /* Prevents the footer from shrinking */
}

.tools-grid .grid-item footer p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #333; /* Dark gray text for the caption */
}

/* 6. Responsive adjustments for smaller screens */
/* This recycles your existing approach of stacking content on mobile */
@media (max-width: 768px) {
    .tools-grid {
        /* On smaller screens, stack items in a single column */
        grid-template-columns: 1fr;
    }
}
/* 4. Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .about-grid {
        /* On smaller screens, stack them into a single column */
        grid-template-columns: 1fr;
    }
}
@media (min-width: 768px) {
    .project-grid {
        grid-template-columns: repeat(1, 1fr); /* Change from 1 column to 2 */
        gap: 3rem; /* You might want a smaller gap for a 2-column layout */
    }
}


/* Use this class on the <body> tag of any page that should be light. */
.light-theme {
    background-color: #ffffff00; /* White background */
    color: #000000;            /* Black text */
}

/* This rule says: When the body has the .light-theme class,
   make all nav items inside the header black. */
.light-theme .site-header .nav-item {
    color: #000000;
    opacity: 0.8;
}

/* Specific hover/active states for the light theme nav */
.light-theme .site-header .nav-item:hover {
    opacity: 1;
}

.light-theme .site-header .nav-item:first-child {
    opacity: 1; /* Keep the "Andy Serra" logo fully visible */
}
/* 1. The Scroll Container */
body.project-page {
    /* Enables vertical scroll snapping and makes it mandatory. */
    scroll-snap-type: y mandatory; 

    /* IMPORTANT: This prevents the project items from snapping *behind* your fixed header.
       Adjust this value to match your header's height and top padding (120px from your existing CSS). */
    scroll-padding-top: 120px;
}

/* 2. The Snap Children */
/* This rule targets each project and tells it how to align. */
.project-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    
    /* THE CRITICAL FIX: The 'min-height' and 'scroll-snap' properties have been REMOVED. */
    /* This allows the card to shrink vertically with its content. */
}

.a4-iframe {
    display: block; /* Ensures proper layout and centering */
    width: 100%;    /* Takes the full width of its container */
    max-width: 1123px; /* Optional: A3 width in pixels. Prevents it from getting too huge on 4K monitors. */
    margin: 2rem auto 0 auto; /* Overwrites iframe style for centering */
    
    /* The Magic Line: Sets the aspect ratio to A4 Landscape (297mm / 210mm) */
    aspect-ratio: 1.4142;

    /* Let the aspect-ratio property control the height automatically */
    height: auto; 
}

/* --- New Styles for the About Page Grid --- */

.about-grid {
    display: grid;
    /* Two columns: a 1fr column for the image and a 1.5fr column for the text */
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;              /* The space between the image and the text */
    align-items: center;      /* Vertically aligns the content of both columns */
    max-width: 1200px;
    margin: 0 auto;           /* Centers the entire grid on the page */
}

/* 2. The image container and the image itself */
.about-image-container img {
    width: 100%;              /* Make the image responsive to its container */
    height: auto;
    display: block;           /* Removes extra space below the image */
    border-radius: 22px;      /* Your desired rounded corners */
}

/* 3. The text container and its content */
.about-text-container h1 {
    font-size: 2rem;
    color: #000000;
    margin-bottom: 1rem;
    text-align: start;
}

.about-text-container p {
    font-size: 1.1rem;
    color: #000000;
    line-height: 1.6;
    margin-bottom: 1rem; /* Add some space between paragraphs */
}

.about-text-container a {
    color: #000000; /* Inherit the black text color */
    text-decoration: underline;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.about-text-container a:hover {
    opacity: 1;
}

@media (max-width: 768px) {

    /* --- About Page Fix --- */
    /* This rule will now correctly override the desktop style on small screens. */
    .about-grid {
        /* Change from two columns to a single, stacked column. */
        grid-template-columns: 1fr;
        
        /* Reduce the gap for a better look in a stacked layout. */
        gap: 2rem; 
    }

    /* Center the main "About" title on mobile for better balance. */
    .about-text-container h1 {
        text-align: center;
    }


    /* --- Other Mobile Fixes (Consolidated) --- */
    .tools-grid {
        grid-template-columns: 1fr;
    }

    /* Fixes header overlapping on mobile */
    .site-header .nav-item {
        font-size: 0.9rem;
        margin-left: 1rem;
    }
    
    .site-header .nav-item:first-child {
        margin-right: 1.5rem;
    }
}

/* ==========================================================================
   Responsive Video Container
   ========================================================================== */
.video-container {
    /* Sets the maximum width of the video. It won't get wider than this on large screens. */
    max-width: 1080px; 
    
    /* This adds space above the video and centers it on the page. */
    margin: 4rem auto 0 auto; 
}

.video-container video {
    /* THE KEY: Makes the video fill the width of its container. */
    width: 100%;
    
    /* THE KEY: Makes the height adjust automatically to maintain the aspect ratio. */
    height: auto;
    
    /* Good practice to prevent extra space below the video. */
    display: block; 
    
    /* Optional: Adds rounded corners to match other elements on your site. */
    border-radius: 8px;
}

/* ==========================================================================
   Tool Page - Specific Components
   ========================================================================== */

/* This styles the content INSIDE the <details> toggle */
.prompt-body {
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid #ddd;
    line-height: 1.6;
    color: #333; /* Darker text for readability */
}
.prompt-body p, .prompt-body ol {
    margin-bottom: 1rem;
}

/* This is the new, safe container for the p5 sketch on this tool page.
   It is NOT position:fixed, so it will stay in the layout correctly. */
.tool-sketch-wrapper {
    margin-top: 2rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    /* You can give it a specific height or aspect ratio if you wish */
    min-height: 400px; 
}