/* =========================
   Import Roboto Light for main content
   ========================= */
@import url('https://fonts.googleapis.com/css?family=Roboto:300&display=swap');

/* =========================
   Root Variables
   ========================= */
:root {
    --sidebar-font: 'Roboto', sans-serif; /* Sidebar font */
    --sidebar-title-font: 'Montserrat', sans-serif; /* Sidebar title font */
    --sidebar-link-font: 'Roboto', sans-serif; /* Sidebar link font */
}

/* =========================
   Base Styles
   ========================= */
body { 
    margin: 0; /* Remove default margin */
    font-family: 'Roboto', Arial, sans-serif; /* Use Roboto Light for all text except sidebar */
    font-weight: 300; /* Roboto Light */
    line-height: 1.6; /* Improve readability */
    background-color: #f4f4f4; /* Light background */
}

/* =========================
   Header & Navigation (not used in sidebar layout)
   ========================= */
header { 
    background: url('../assets/graphics/header-bg.jpg') no-repeat center center/cover; /* Header background image */
    color: #fff; /* White text */
    padding: 20px 0; /* Vertical padding */
    text-align: center; /* Center text */
}

nav { 
    background: #333; /* Dark background */
    color: #fff; /* White text */
    padding: 10px 0; /* Vertical padding */
}

nav ul { 
    list-style: none; /* Remove bullets */
    padding: 0; /* Remove padding */
}

nav ul li { 
    display: inline; /* Display inline */
    margin: 0 15px; /* Horizontal spacing */
}

nav ul li a { 
    color: #fff; /* White text */
    text-decoration: none; /* Remove underline */
}

/* =========================
   Main Content & Sections
   ========================= */
main { 
    padding: 20px; /* Padding around content */
}

section { 
    margin-bottom: 40px; /* Space below each section */
    padding: 20px; /* Padding inside section */
    background: #fff; /* White background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

h1, h2 { 
    color: #333; /* Dark text */
}

/* =========================
   Portfolio Grid (not main photo grid)
   ========================= */
.portfolio { 
    display: grid; /* Use CSS grid */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive columns */
    gap: 15px; /* Space between images */
}

.portfolio img { 
    width: 100%; /* Fill grid cell */
    border-radius: 8px; /* Rounded corners */
    transition: transform 0.3s; /* Smooth hover effect */
}

.portfolio img:hover { 
    transform: scale(1.05); /* Slightly enlarge */
}

/* =========================
   Footer
   ========================= */
footer { 
    text-align: center; /* Center text */
    padding: 20px 0; /* Vertical padding */
    background: none; /* No background */
    color: #333; /* Dark text */
}

/* =========================
   Landing Overlay
   ========================= */
#landing-overlay { 
    position: fixed; /* Fixed position */
    z-index: 9999; /* On top of everything */
    top: 0; left: 0; right: 0; bottom: 0; /* Fill viewport */
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background: #111; /* Dark background */
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    transition: opacity 0.6s; /* Fade out transition */
    overflow: hidden; /* Hide overflow */
}

#landing-overlay img#landing-photo { 
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    object-fit: cover; /* Cover area without distortion */
    object-position: center bottom; /* Always show bottom of image */
    border-radius: 0; /* No rounding */
    box-shadow: none; /* No shadow */
    cursor: pointer; /* Pointer cursor */
    transition: opacity 0.3s; /* Fade effect */
    position: absolute; /* Position over overlay */
    top: 0; left: 0; /* Top-left corner */
    z-index: 1; /* Behind text */
}

#landing-text { 
    position: absolute; /* Position over image */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Perfect centering */
    z-index: 2; /* Above image */
    color: #fff; /* White text */
    text-align: center; /* Center text */
    margin: 0; /* Remove margin */
    text-shadow: 0 2px 8px rgba(0,0,0,0.7); /* Text shadow for readability */
    width: 100vw; /* Full width */
}

/* =========================
   Main Site Layout
   ========================= */
#main-site { 
    display: flex; /* Flexbox layout */
    min-height: 100vh; /* At least full viewport height */
}

/* =========================
   Sidebar
   ========================= */
.sidebar { 
    width: 240px; /* Fixed width */
    background: #f4f4f4; /* Light background */
    color: #333;      /* Dark gray text */
    display: flex; /* Flexbox */
    flex-direction: column; /* Stack children vertically */
    align-items: flex-start;      /* Align everything to the left */
    justify-content: flex-start;  /* Start at the top */
    padding: 40px 20px; /* Padding inside sidebar */
    min-height: 100vh; /* Full viewport height */
    box-sizing: border-box; /* Include padding in width */
    font-family: Arial, sans-serif; /* Sidebar sections in Arial */
    border-right: 1px solid #333; /* Thin border line */
}

.sidebar header { 
    width: 100%;
}

.sidebar header h1 { 
    margin: 0 0 40px 0; /* Space below title */
    font-size: 2rem; /* Large font */
    color: #333; /* Dark gray text */
    text-align: left;      /* Align to the left */
    font-family: 'Roboto', Arial, sans-serif; /* Sidebar title in Roboto Light */
    font-weight: 300; /* Roboto Light */
}

.sidebar nav { 
    background: none;      /* Remove background */
    width: 100%;
}

.sidebar nav ul { 
    list-style: none; /* No bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    display: flex; /* Flexbox */
    flex-direction: column; /* Stack links vertically */
    gap: 24px; /* Space between links */
    align-items: flex-start; /* Align links to the left */
    width: 100%; /* Full width */
    background: none;        /* Remove background */
}

.sidebar nav ul li { 
    margin: 0; /* No margin */
    width: 100%; /* Full width */
    text-align: left; /* Align text to the left */
}

.sidebar nav ul li a { 
    color: #333; /* Dark gray text */
    text-decoration: none; /* Remove underline */
    font-size: 1.1rem; /* Font size */
    font-family: var(--sidebar-link-font, 'Arial', sans-serif); /* Customizable */
    transition: color 0.2s; /* Smooth color transition */
}

.sidebar nav ul li a:hover { 
    color: #666; /* Slightly lighter gray on hover */
}

/* =========================
   Main Content Area
   ========================= */
.content { 
    flex: 1; /* Take remaining space */
    padding: 40px; /* Padding around content */
    background: #f4f4f4; /* Light background */
    min-height: 100vh; /* At least full viewport height */
    box-sizing: border-box; /* Include padding in width */
}

/* =========================
   Main Photo Grid (Work Section)
   ========================= */
.photo-grid {
    display: grid; /* Use CSS grid */
    grid-template-columns: repeat(3, 1fr); /* Max 3 per row */
    column-gap: 32px;   /* Space between columns */
    row-gap: 100px;      /* Increased space between rows */
    width: 100%;
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 50px 32px; /* 50px top and bottom = gap/2, 32px left and right */
    box-sizing: border-box;
    justify-items: center; /* Center images horizontally in their cells */
}

/* 2 per row on medium screens */
@media (max-width: 900px) {
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1 per row on small screens */
@media (max-width: 600px) {
    .photo-grid {
        grid-template-columns: 1fr;
    }
}

.photo-grid img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 350px;
    object-fit: contain;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.2s;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

/* =========================
   Photo Grid Item & Overlay
   ========================= */
.photo-grid-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-grid-item img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: filter 0.2s;
    cursor: pointer;
    z-index: 1;
}

.photo-grid-item .photo-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    background: rgba(40,40,40,0.45);
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    border-radius: 0;
}

.photo-grid-item:hover .photo-overlay {
    opacity: 1;
}

.photo-grid-item:hover img {
    filter: brightness(0.7);
}

/* =========================
   Gallery Grid (Vertical)
   ========================= */
.gallery-grid {
    column-count: 3;                /* 3 columns, adjust as needed */
    column-gap: 24px;               /* Space between columns */
    width: 100%;
    padding: 32px;
    box-sizing: border-box;
}

.gallery-grid img {
    width: 100%;                    /* Fill column width */
    height: auto;                   /* Keep aspect ratio */
    display: block;
    margin-bottom: 24px;            /* Space below each image */
    object-fit: contain;
    border-radius: 0;
    cursor: pointer;
    background: #f8f8f8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* =========================
   Gallery Section Layout
   ========================= */
#gallery-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;      /* Stretch children to full width */
    justify-content: center;
    min-height: 100vh;
}

/* =========================
   Fullscreen Overlay
   ========================= */
#fullscreen-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(20,20,20,0.97);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    flex-direction: column;
}

#fullscreen-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.4);
    background: #222;
}

#fullscreen-close {
    position: absolute;
    top: 32px;
    right: 48px;
    font-size: 3rem;
    color: #fff;
    cursor: pointer;
    z-index: 10001;
    font-family: Arial, sans-serif;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
#fullscreen-close:hover {
    background: rgba(0,0,0,0.7);
}

/* =========================
   Gallery Row (Horizontal)
   ========================= */
.gallery-row {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 48px; /* Increased space between images */
    width: 100%;
    padding: 32px 0;
    box-sizing: border-box;
    scroll-snap-type: x mandatory;
    align-items: center;
    min-height: 60vh;
    max-width: 100vw;
}

.gallery-row img {
    height: 60vh;           /* All images same height, width auto for aspect ratio */
    width: auto;
    object-fit: contain;
    border-radius: 0;
    cursor: pointer;
    background: #f8f8f8;
    display: block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    scroll-snap-align: start;
}

/* =========================
   Back Arrow Button
   ========================= */
.arrow-back {
    background: none;
    border: none;
    font-size: 2.5rem;
    color: #222;
    cursor: pointer;
    padding: 8px 20px;
    border-radius: 50%;
    transition: background 0.2s;
    margin-top: 20px;
    outline: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;    /* Align to the left */
    margin-bottom: 16px;       /* Space below the arrow */
    margin-top: 0;
}
.arrow-back:hover {
    background: #eee;
}

/* =========================
   About Section
   ========================= */
#about-section {
    margin-top: 120px; /* Aligns the about section with the sidebar links */
}

/* =========================
   Contact Section
   ========================= */
#contact-section {
    margin-top: 120px; /* Aligns the contact section with the sidebar links */
}

/* =========================
   Gallery Description
   ========================= */
.gallery-description {
    margin-top: 60px;      /* Space between gallery photos and description */
    font-size: 1.1rem;
    color: #444;
    max-width: 800px;
    line-height: 1.6;
}

/* =========================
   Responsive Styles
   ========================= */
@media (max-width: 800px) { /* For screens <= 800px */
    #main-site {
        flex-direction: column; /* Stack sidebar and content vertically */
    }
    .sidebar {
        width: 100%; /* Full width */
        flex-direction: row; /* Arrange children horizontally */
        align-items: center; /* Center vertically */
        justify-content: space-between; /* Space out children */
        min-height: unset; /* Remove min-height */
        padding: 20px; /* Less padding */
    }
    .content {
        padding: 20px; /* Less padding */
    }
    .sidebar nav ul {
        display: flex; /* Flexbox */
        flex-direction: row; /* Arrange links horizontally */
    }
    .sidebar nav ul li {
        margin: 0 16px 0 0; /* Space between links */
    }
}

@media (max-width: 600px) { /* For screens <= 600px */
    nav ul li {
        display: block; /* Stack links vertically */
        margin: 10px 0; /* Space between links */
    }
}