/* --- RESET AND BASE STYLES --- */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: "Lora", Times, serif;
    color: black;
}

button {
    border: darkgray 2px solid;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    background: lightgray;
    color: black;
    padding: 5px 10px;
}

img {
    max-width: 100%;
    height: auto;
}

video {
    display: block; /* Prevents extra space below the video */
    width: 100%;
    height: auto;
  }  


/* Container */
.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 90%; /* Make the container take up the full height of the body */
}

/* Navigation */
.navigation {
    width: 25%;
    font-size: 2vw;
    padding: 10px;
}

.navigation ul {
    list-style: none;
    padding: 0; 
    margin: 0;
}

.navigation li {
    margin-bottom: 0.5em;
}

/* Content */
.content {
    width: 75%;
    padding: 10px;
    height: 100%;
}

.section-header {
    padding: 10px;
    margin-bottom: 1.5em;
    width: 100%;
}

/* Ensure section title and description use the default body font */
.section-header .section-title,
.section-header .section-description {
    font-family: inherit; 
    margin-bottom: 0.5em;
    padding: 0;
}
.section-header .section-title {
     font-family: "Times New Roman", Times, serif;
     font-weight: 500; /* Slightly bolder title later? */
     margin-bottom: 0.25em;
}

.section-header .section-description {
    font-size: 1em;
    color: #333;
    line-height: 1.5;
    margin-bottom: 0;
}

.section-footer {
    text-align: center;
    margin-top: 2em;
    padding: 10px;
    width: 100%;
}

.section-footer button {
    /* to customize later */
    padding: 8px 15px;
    font-size: 0.9em;
}

.section-footer button a,
.section-footer button a:visited {
    color: black;
    text-decoration: none;
}
.section-footer button a:hover,
.section-footer button a:active {
    color: black;
}

/* Iframe */
.iframe {
    width: 100%;
    height: 100%;
    border: 0;
    min-height: 100%;
}

/* Headings */
h1, h2, h3 {
    font-family: "Lora","Times New Roman", Times, serif;
    font-weight: normal;
}

/* Links */
a:link,
a:visited {
    color: blue;
    text-decoration: none;
}

a:hover,
a:active {
    color: purple;
}

/* Navigation Links */
.navigation a:link,
.navigation a:visited {
    font-family: "Times New Roman", Times, serif; /* Heading-like link font */
}

/* Regular Links */
.content a:link,
.content a:visited {
    font-family: "Lora", Times, "Georgia", serif; /* Body-like link font */
}

/* --- EXHIBITION GALLERY STYLING --- */
.exhibitions-grid {
    /* To do: define desktop layout if needed, e.g., display, block, grid */
    width: 100%;
    padding: 10px;
}

.exhibition-row {
    margin-bottom: 2.5em; 
}


.exhibition-details {
    margin-bottom: 1em;
}

.exhibition-details h4.exhibition-title {
    font-family: "Times New Roman", Times, serif; /* Ensure consistency */
    font-style: italic;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0.3em;
    font-size: 1.2em;
    color: #000;
}

.exhibition-details p {
    font-family: inherit;
    margin: 0.15em 0;
    padding: 0;
    line-height: 1.4;
    font-size: 1em;
    color: #222;
}

/* Specific paragraph types within details */
.exhibition-details p.exhibition-gallery {
    /* customize later*/
}

.exhibition-details p.exhibition-description {
    font-style: italic;
    color: #555;
    margin-top: 0.4em;
}

.exhibition-gallery {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 15px;
    padding-bottom: 10px;
}

.gallery-container {
    display: flex;
    gap: 15px;
    width: max-content;
}

.gallery-container article {
    flex: 0 0 27%; /* Desktop basis */
    flex-shrink: 0;
    max-width: 40em;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: block;
    flex-direction: column;
    background-color: #fff;
}

.gallery-container img {
    width: 100%; 
    height: auto; 
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid #ccc;
}

.gallery-container figcaption {
    padding: 10px;
    text-align: center;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Scrollbar styling (remains the same) */
.exhibition-gallery::-webkit-scrollbar { height: 8px; }
.exhibition-gallery::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.exhibition-gallery::-webkit-scrollbar-track { background: #f1f1f1; }


/* --- RESPONSIVENESS for Exhibitions --- */
@media (max-width: 768px) {

    /* Change grid to vertical stack */
    .exhibitions-grid {
        display: flex;
        flex-direction: column;
        gap: 2em; /* Mobile-specific gap */
    }

    /* separators */
    .exhibition-row {
        border-bottom: 1px solid #eee;
        padding-bottom: 2em;
        margin-bottom: 0;
    }

    .exhibition-row:last-child {
        border-bottom: none;
        padding-bottom: 1em;
    }

    /*text sizes for mobile */
    .exhibition-details h4.exhibition-title {
        font-size: 1.1em;
    }

    .exhibition-details p {
        font-size: 0.9em;
    }

    .gallery-container article {
        max-width: 20em;
        flex-basis: 60%; /* Show ~1 item + part of next */
    }

    .exhibition-row .exhibition-gallery {
        margin-top: 1em;
    }

}


/* --- PORTFOLIO GALLERY STYLES --- */

section {
    margin-bottom: 3em; /* Add space between year sections */
    padding-top: 1em;
    padding-bottom: 2em;
}

.portfolio-gallery {
    display: grid;
    /* auto-fit tries to fit as many columns as possible,
       minmax(250px, 1fr) means each column is at least 250px wide
       but can grow to fill space (1fr) */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    width: 100%;
}

.portfolio-gallery figure {
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex; /* vertical layout */
    flex-direction: column; /* Stack image/video and caption */
    background-color: #fff;
}

.portfolio-gallery figure a {
    display: block;
    line-height: 0;
}

.portfolio-gallery img,
.portfolio-gallery video,
.portfolio-gallery .iframe-container {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid #ccc;
}

.portfolio-gallery .iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.portfolio-gallery .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.portfolio-gallery figcaption {
    padding: 10px 12px;
    text-align: left;
    font-size: 0.9em;
    line-height: 1.4;
    flex-grow: 1;
}

.portfolio-gallery figcaption small {
    display: block;
    margin-top: 4px;
    color: #555;
    font-style: normal;
}
.portfolio-gallery figcaption i {
    font-style: italic;
}

/* Writing Page Galleries - Writing Gallery Styling */

            /* Styles specific to the writing page gallery items */
            .writing-gallery figure {
                /* Inherits base styles from .portfolio-gallery figure */
                background-color: #f9f9f9; /* Slightly different background */
            }

            .writing-gallery figure .writing-content {
                display: flex; /* Use flexbox for layout */
                flex-direction: column; /* Stack elements vertically by default */
                flex-grow: 1; /* Allow content to fill space */
            }

            .writing-gallery figure a.thumbnail-link {
                /* Ensure link wraps image correctly */
                display: block;
                line-height: 0; /* Prevent extra space */
                flex-shrink: 0; /* Prevent image from shrinking */
                border-bottom: 1px solid #ccc; /* Default border */
            }

            .writing-gallery figure img.thumbnail {
                /* Inherits base image styles */
                width: 100%; /* Full width by default */
                height: 150px; /* Slightly shorter default height */
                object-fit: cover;
                display: block;
            }

            .writing-gallery figure figcaption {
                /* Inherits base figcaption styles */
                padding: 12px 15px;
                flex-grow: 1; /* Allow caption to grow */
                display: flex;
                flex-direction: column;
            }

            .writing-gallery figcaption h4.writing-title {
                font-family: "Times New Roman", Times, serif;
                font-weight: 600; /* Bolder title */
                margin: 0 0 0.2em 0;
                font-size: 1.1em;
                line-height: 1.3;
            }
            .writing-gallery figcaption h4.writing-title a {
                font-family: inherit; /* Ensure link inherits font */
                color: #111; /* Darker link color */
                text-decoration: none;
            }
            .writing-gallery figcaption h4.writing-title a:hover {
                color: purple;
                text-decoration: underline;
            }


            .writing-gallery figcaption p.writing-subtitle {
                font-family: "Lora", Times, serif;
                font-size: 0.85em;
                color: #555;
                margin: 0 0 0.6em 0;
                font-style: italic;
            }

            .writing-gallery figcaption p.writing-description {
                font-family: "Lora", Times, serif;
                font-size: 0.9em;
                color: #333;
                line-height: 1.5;
                margin: 0 0 1em 0;
                flex-grow: 1; /* Allow description to push button down */
                /* Basic truncation for multi-line */
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 3; /* Limit to 3 lines */
                -webkit-box-orient: vertical;
                max-height: calc(1.5em * 3); /* Fallback max-height */
            }

            .writing-gallery figcaption .writing-button-container {
                margin-top: auto; /* Push button to the bottom */
                text-align: right;
            }

            .writing-gallery figcaption button {
                /* Inherits base button styles */
                font-size: 0.85em;
                padding: 4px 8px;
            }
            .writing-gallery figcaption button a {
                color: inherit;
                text-decoration: none;
            }


            /* --- Mobile Overrides for Writing Gallery --- */
            @media (max-width: 768px) {
                .writing-gallery figure {
                    display: flex; /* Arrange items horizontally */
                    flex-direction: row;
                    align-items: flex-start; /* Align items to the top */
                    margin-bottom: 1.5em; /* Space between items */
                }

                .writing-gallery figure a.thumbnail-link {
                    flex-basis: 100px; /* Fixed width for thumbnail */
                    flex-shrink: 0;
                    margin-right: 15px;
                    border-bottom: none; /* Remove bottom border */
                    border-right: 1px solid #ccc; /* Add right border */
                }

                .writing-gallery figure img.thumbnail {
                    width: 100px; /* Match flex-basis */
                    height: 100px; /* Make it square-ish */
                }

                .writing-gallery figure figcaption {
                    padding: 5px 0 5px 0; /* Adjust padding */
                    flex-grow: 1;
                }

                .writing-gallery figcaption h4.writing-title {
                    font-size: 1em;
                }
                .writing-gallery figcaption p.writing-subtitle {
                    font-size: 0.8em;
                    margin-bottom: 0.4em;
                }
                .writing-gallery figcaption p.writing-description {
                    font-size: 0.85em;
                    -webkit-line-clamp: 2; /* Limit to 2 lines on mobile */
                    max-height: calc(1.5em * 2);
                    margin-bottom: 0.5em;
                }
                .writing-gallery figcaption .writing-button-container {
                    text-align: left; /* Align button left on mobile */
                }
            }

/* Media Query for Mobile */
@media (max-width: 768px) {
    .navigation {
        width: 100%;
        font-size: 4vw;
    }

    .navigation ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .navigation li {
        margin-bottom: 0;
        flex-basis: auto;
    }

    .content {
        width: 100%;
    }
}

/* Style for content when there is no navigation */
.container:not(:has(.navigation)) .content {
    width: 100%;
}