/* General Body Styles */
/* css/style.css */

/* --- 1. The New Foundation: Colors & Typography --- */
:root {
    --bg-color: #fdfdfc; /* A very soft, warm off-white */
    --text-color: #2c3e50; /* A dark, slightly desaturated blue */
    --heading-color: #1a2533;
    --accent-color: #7fc282; /* A warm, sophisticated gold/ochre */
    --border-color: #000000;
    --font-heading: 'Geist';
    --font-body: 'EB Garamond';
}



body {
    font-family: var(--font-body);
    line-height: 1.7; /* Increased for better readability */
    margin: 0;
    background: var(--bg-color);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased; /* Smoother fonts on Mac */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts on Firefox */
}

/* --- 2. The Refined Container & Header --- */
.container {
    max-width: 1280px;
    margin: 40px auto; /* Add margin to top and bottom to let the shadow breathe */
    padding: 80px 60px; /* Increase padding for more internal whitespace */
    
    /* 1. The Canvas Effect */
    background-color: #ffffff; /* A crisp white canvas, contrasting the warm page bg */
    
    /* 2. The Finished Edge */
    /* We only apply borders to the sides for a more editorial, less "boxy" feel */
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-radius: 8px; /* Consistent rounding */

    /* 3. The Subtle Lift */
    /* This is a very soft, diffuse shadow to gently lift the container off the page */
    box-shadow: 0 15px 60px -10px rgba(44, 62, 80, 0.08);
}

header {
    text-align: center;
    /* Remove padding and border from the bottom */
    padding-bottom: 0; 
    border-bottom: none;
    
    
    /* The margin-bottom will now create the space AFTER the diamond */
    margin-bottom: 0; 
}

header::after {
    content: '';
    display: block;
    width: 8px; /* Make the box slightly smaller for a finer line */
    height: 8px;
    
    /* Instead of a background, we use borders */
    background-color: transparent;
    border: 1px solid var(--border-color);
       
    margin: 60px auto 60px auto;
    transform: rotate(45deg);
}

h1 {
    font-family: var(--font-heading);
    font-size: 10em;
    font-weight: 100;
    line-height: 0.75em;
    color: var(--heading-color);
    margin: 0 0 0 0;
}

h2 {
    font-family: var(--font-heading);
    font-size: 2.2em;
    color: var(--text-color);
    font-weight: 200;
    margin-bottom: 1em;
    letter-spacing: 0.5px; /* A touch of letter-spacing for polish */
}

header p {
    text-align: center;
    max-width: 650px;
    margin: 50px auto;
    font-size: 1.15em;
}

/* --- 3. The "Graphical Touch": Styled Section Headings --- */
section h3 {
    font-family: var(--font-heading);
    text-align: center;
    font-size: 2.5em;
    font-weight: 100;
    margin-bottom: 40px;
    color: var(--heading-color);

    /* 1. This is the crucial part. It makes the h3 a positioning container... */
    position: relative; 
    
    /* ...and ensures the text itself is easy to position and stays on top. */
    display: inline-block;
    z-index: 1; 
}

/* --- 4. Polished Section Spacing --- */
section {
    margin-bottom: 50px;
}

/* Remove the old border in favor of more whitespace */
section:not(:last-child) {
    border-bottom: none; 
    padding-bottom: 0;
}

/* Gallery Styles */
.gallery-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.gallery-row img {
    width: 30%;
    height: auto;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s;
}

.gallery-row img:hover {
    transform: scale(1.005);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-grid img {
    width: 100%;
    aspect-ratio: 1.5 / 1;
    object-fit: cover;
    cursor: pointer;
    border-radius: 8px; /* Match the other style */
    
    /* Apply the same shadow and transition for consistency */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04), 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.gallery-grid img:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.07), 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Video Section */
.video-container {
    flex: 1 1 45%;
    min-width: 300px;
}

.video-container iframe {
    width: 100%;
}

.video-container video {
    width: 100%;
    height: auto;
}

/* Carousel Styles */
.carousel {
    position: relative;
    max-width: 800px;
    margin: 20px auto;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
}

.carousel-item img {
    width: 100%;
    display: block;
}

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    text-decoration: none;
    border-radius: 50%;
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}

/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    overflow-y: auto; /* This allows scrolling */
    
    /* Add padding to create space around the scrollable content */
    padding: 5vh 0;
    
    box-sizing: border-box; /* Ensures padding doesn't add to the height */
    animation: fadeIn 0.3s ease;
}

/* This is a key change: We REMOVE align-items */
.lightbox.active {
    display: flex;
    justify-content: center;
    /* REMOVED: align-items: center; */
}

/* This is the second key change: We use margin: auto */
.lightbox-content {
    width: auto;
    max-width: 90%;
    max-width: 1200px;
    height: auto;
    
    /* This single line is the magic! */
    /* It centers the image if it's shorter than the viewport, */
    /* and collapses to 0 if it's taller, preventing the cut-off top. */
    margin: auto;

    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from { transform: scale(0.9); }
    to { transform: scale(1); }
}

.close-button {
    position: fixed; /* Fixed position relative to the viewport */
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 45px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close-button:hover {
    color: #bbb;
}

/* Add to your existing CSS file */

.image-container {
    position: relative;
    flex: 1 1 300px;
    max-width: 400px;
    margin: 10px;
    height: 0;
    padding-bottom: 80%;
    overflow: hidden; /* This is still good practice as a fallback */
    cursor: pointer;
    border-radius: 8px;
    
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04), 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;

    /* --- The Magic: CSS Mask --- */
    /* This gradient defines the shape. Opaque black is visible, transparent is not. */
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,      /* Top of the element is fully visible */
        black 90%,     /* Stays fully visible until 75% down */
        transparent 100% /* Fades to invisible over the last 25% */
    );
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 90%,
        transparent 100%
    );
}

.image-container:hover {
    transform: translateY(-8px); /* Lift effect on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.07), 0 12px 40px rgba(0, 0, 0, 0.12);
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is key: it scales the image to cover the container, cropping excess */
    object-position: top; /* Ensures the top of your image is always visible */
    transition: transform 0.3s ease;
}

/* --- Video Ads Section --- */
.video-grid-container {
    display: grid;
    /* This is where you can "toy around." 
       This creates two columns; the first is 3 parts wide, the second is 4.
       Change to "1fr 1fr" for equal widths, or "2fr 1fr" to make the first wider. */
    grid-template-columns: 1.5fr 3fr;
    gap: 25px;
    align-items: stretch; /* This ensures both columns are the same height */
}

.video-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04), 0 8px 25px rgba(0, 0, 0, 0.08);
}

.video-item video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* This is the magic: it makes the video fill the container without stretching,
       cropping the excess content (just like object-fit for images). */
    object-fit: cover;
}

.video-item-portrait {
    height: 0;
    /* This percentage creates the 9:16 aspect ratio (16 / 9 * 100 = 177.77%) */
    padding-bottom: 177.77%;
}

/* --- Asymmetrical Web Content Section --- */
.web-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    /* This command is now free to work correctly. */
    align-items: stretch; 
}

/* This is the new, dedicated style for the left column container */
.web-item-full {
    position: relative; /* Needed to position the image inside */
    overflow: hidden;   /* Hides parts of the image that are cropped */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04), 0 8px 25px rgba(0, 0, 0, 0.08);

    /* We apply the mask directly to this container for the fade effect */
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
}

/* This is the key: style the image INSIDE the container we just made */
.web-item-full img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;      /* This crops the image to fill the space, never stretching it */
    object-position: top;   /* This ensures the top of your screenshot is always visible */
    cursor: pointer;
}

.web-item-full:hover {
    transform: translateY(-8px); /* Lift effect on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.07), 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* This is the container for the two images on the right */
.web-item-stacked {
    display: flex;
    flex-direction: column; /* This stacks the images vertically */
    gap: 25px; /* Creates space between the two stacked images */
}

/* Style the images in the stacked container */
.web-item-stacked img {
    width: 100%;
    height: auto; /* Let the image determine its own height based on aspect ratio */
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04), 0 8px 25px rgba(0, 0, 0, 0.08);
}

.web-item-stacked img:hover {
    transform: translateY(-8px); /* Lift effect on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.07), 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* --- About Section --- */
#about {
    /* We'll use this section to transition from the hero to the main portfolio */
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.about-grid {
    display: grid;
    /* Create two columns, the image takes up 1 part, the text takes 2 */
    grid-template-columns: 1.25fr 2fr;
    gap: 50px; /* Space between the image and text */
}

.about-image img {
    width: 100%;
    border-radius: 50%; /* A circular portrait is a very modern, friendly look */
    aspect-ratio: 1 / 1; /* Ensures the image is a perfect circle */
    object-fit: cover; /* Crops the image to fit the circle without stretching */
    box-shadow: 0 10px 40px -5px rgba(44, 62, 80, 0.15);
}

.about-text h2 {
    font-family: var(--font-heading);
    font-size: 2.2em;
    color: var(--heading-color);
    margin-top: 0; /* Remove default margin */
    margin-bottom: 0;
}

.about-text h3 {
    font-family: var(--font-heading);
    font-size: 1.4em;
    color: var(--heading-color);
    margin-top: 0; /* Remove default margin */
    margin-bottom: 0.25em;
}

.about-text p {
    font-size: 1.1em;
    line-height: 1.8; /* A slightly taller line-height is great for readability */
    margin-top: 0; /* Remove default margin */
    margin-bottom: 1em;
}

/* --- "Selected Works" Divider --- */
.portfolio-divider {
    /* This makes the divider break out of the main container's padding */
    width: 100%;
    text-align: center;
    padding: 25px 0;
    margin-bottom: 25px; /* Space before the first portfolio section */

    /* We'll frame it with lines */
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.portfolio-divider h2 {
    font-family: var(--font-body); /* Use the clean sans-serif for this */
    font-size: 1em; /* Keep it subtle in size */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em; /* The key to this classic look */
    color: var(--text-color);
    margin: 0; /* Reset default margins */
}

/* --- Call to Action (CTA) Button --- */
.cta-button {
    display: inline-block;
    margin-top: 1.5em;
    padding: 12px 28px;
    
    /* 1. Make the background transparent and set the text color */
    background-color: transparent;
    color: var(--text-color);
    
    /* 2. The border provides the outline. 2px is a good, visible weight. */
    border: 2px solid var(--border-color);
    
    /* 3. Ensure no shadow is present */
    box-shadow: none;

    font-family: var(--font-heading);
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.5px;
    border-radius: 8px; /* The pill shape remains */
    
    /* 4. The transition now targets background and text color for a smooth fade */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-button:hover {
    /* 5. On hover, we "invert" the style: fill the background and make the text white */
    background-color: var(--accent-color);
    color: #ffffff;
    border: 2px solid var(--accent-color);


    /* 6. Ensure no transform or shadow is applied on hover */
    transform: none;
    box-shadow: none;
}

/* --- Stylized Subheader with Lines --- */

/* 1. The Flexbox Container */
.subheader-wrapper {
    display: flex;
    align-items: center; /* This is the key to vertically centering the lines with the pill */
    margin: 50px 0; /* Give it some vertical space */
}

/* 2. The Lines */
/* We create both lines at once using ::before and ::after */
.subheader-wrapper::before,
.subheader-wrapper::after {
    content: ''; /* Required for pseudo-elements to appear */
    
    /* This makes the lines grow to fill all available space */
    flex-grow: 1; 

    height: 1px; /* The thickness of the line */
    background-color: var(--border-color); /* Use a subtle theme color */
}

/* 3. The Pill */
/* We need to update the existing header h2 style */
header h2 {
    /* Reset margins and set new ones to create space between the pill and the lines */
    margin: 0 20px; 
    padding: 8px 20px;

    background-color: var(--accent-color); /* Match the lines for a cohesive look */
    color: white;
    border-radius: 50px; /* The pill shape */
    
    /* Typographic polish */
    font-size: 1.1em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap; /* Prevents the subhead from breaking into two lines */
}

@media (max-width: 768px) {

    .gallery-row {
        /* Changes the layout to a column on smaller screens */
        flex-direction: column;
        align-items: center; /* Center the single-column items */
    }

    .image-container {
        /* Make the image containers wider on mobile */
        width: 100%;
        max-width: 450px; /* Set a max-width for readability on mobile */
        flex: 1 1 100%; /* Ensure it takes full width */
    }

    .gallery-grid {
        /* Better grid layout for mobile */
        grid-template-columns: 1fr; /* A single column grid */
    }

    .video-grid-container {
        grid-template-columns: 1fr; /* A single column */
    }

    /* Stack the web content grid */
    .web-grid-container {
        grid-template-columns: 1fr; /* A single column */
    }

    .about-grid {
        /* Stack the columns on mobile */
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .about-image {
        /* Center the image and constrain its size on mobile */
        max-width: 200px;
        margin: 0 auto;
    }

    header .cta-button {
        /* On mobile, it's better to not have it in the corner */
        position: static; /* Let it fall back into the normal document flow */
        display: block; /* Make it a block to be centered */
        margin: 0 auto 40px auto; /* Center it and add space below */
        width: fit-content; /* Don't let it stretch full-width */
    }

    .subheader-wrapper {
        justify-content: center;
    }

    /* 1. Hide the lines completely on mobile */
    .subheader-wrapper::before,
    .subheader-wrapper::after {
        display: none;
    }

    /* 2. Adjust the subheader pill for a mobile context */
    header h2 {
        /* Allow the subheader text to wrap if it's too long for the screen */
        white-space: normal;
        
        /* The side margins were for spacing between the lines, which are now gone */
        margin-left: 0;
        margin-right: 0;
    }
}