/* MAIN */
main, .all-content {
    gap: var(--spacing-xl);
}

.all-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Re-enable pointer events only for actually interactive elements */
main a,
main button,
main p,
main h1,
main h2,
main h5,
main h6,
main img,
main video,
main .thumbnail,
main iframe,
main .overview,
main .carousel-thumbnails,
main .carousel-nav {
    pointer-events: auto;
}

/* TYPOGRAPHY */
/* HEADER */
header {
    text-align: center;
}

/* OVERVIEW */
.overview {
    background: var(--bgColor, black);
    padding: var(--spacing-s) 0 var(--spacing-xl) 0;

    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.intro, .metadata-item {
    display: flex;
    flex-direction: column;
}

.intro {
    gap: var(--spacing-xs);
}

/* METADATA */
.metadata {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-m);
    width: 100%;
    text-align:left;
}

.metadata-label, .press-award-label {
    text-transform: uppercase;
}

.metadata-item {
    gap: var(--spacing-xxs);
}

/* CONTENT */
.opening-content {
    display: flex;
    flex-flow: column;
    gap: 0;
}

.content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
    align-items: start;
}

.writing blockquote {
    font-family: 'Francesco', Arial, sans-serif;
}

/* CONTENT BLOCKS */
.content-blocks {
    display: flex;
    flex-flow: row wrap;
    gap: var(--spacing-xl);
    width:100%;
}

/* TEXT ON LEFT */
.content.text-left {
    flex-direction: row-reverse; /* Reverse the column order */
}

.content.text-left .content-block {
    grid-template-areas:
        "text galleries";
}

/* TEXT ONLY */
.content.text-only .content-block, .content.text-left.text-only .content-block {
    grid-template-areas:
        "text galleries";
}

/* PRESS & AWARDS */
.press-awards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-m);
}

.press-award-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}

.press-award-item img {
    max-width: 50%;
    height: auto;
}

/* BLOCKS */
.content-block {
    width:100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "galleries text";
    gap: var(--spacing-l);
}

.galleries-block {
    grid-area: galleries;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
}

.text-column {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
}

/* GALLERIES */
.gallery-carousel, .gallery-grid {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-m);
}

/* Gallery Carousel */
.carousel-hero-wrapper {
    position: relative;
    width: 100%;
}

.carousel-hero, .grid-hero {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: opacity 0.15s ease;
}

/* Carousel Navigation Arrows */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    color: var(--textColor);
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
    opacity: 0;
    z-index: 10;
}

.carousel-hero-wrapper:hover .carousel-nav {
    opacity: 1;
}

.carousel-nav:hover {
    color: var(--tagColor);
}

.carousel-prev {
    left: var(--spacing-s);
}

.carousel-next {
    right: var(--spacing-s);
}

.carousel-nav svg {
    display: block;
    width: calc(var(--fontSize-m) * 1.25);
    height: auto;
    stroke-width: 2;
}

.carousel-hero picture, .grid-hero picture {
    width: 100%;
    height: auto;
}

.carousel-hero img, .grid-hero img,
.carousel-hero video, .grid-hero video {
    width: 100%;
    height: auto;
}

/* Opening gallery specific width and height */
.opening-gallery .carousel-hero {
    width: 100%;
    height: auto;  /* Let content determine height */
    max-height: 90vh;
}

.opening-gallery .carousel-hero picture {
    width: 100%;
    height: auto;  /* Let image determine height naturally */
    max-height: 90vh;  /* Constrain to same max as parent */
    display: flex;
    align-items: center;
    justify-content: center;
}

.opening-gallery .carousel-hero img,
.opening-gallery .carousel-hero video {
    /* Now, the image takes up the full width of its container, meaning that you can't click the ascii image behind it anymore. But that seems to be unavoidable, otherwise images will stretch when too long / too tall. */
    width: 100%;
    height: auto;  /* Natural height based on aspect ratio */
    max-height: 90vh;  /* Constrain to viewport */
    object-fit: contain;
}

/* Override fixed height for vimeo embeds in opening gallery */
.opening-gallery .carousel-hero.vimeo-embed {
    height: 0;
    padding-bottom: min(56.25%, calc(90vh)); /* Constrain height to 90vh max */
    width: 100%;
}

/* Carousel Thumbnails */
.carousel-thumbnails {
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    align-content: center; /* JavaScript will change to flex-start when content overflows */
    gap: var(--spacing-s);

    overflow-x: auto;
    scroll-behavior: smooth;

    height: 137.5px;
    padding-bottom: var(--spacing-xs); /*This is for padding from the scrollbar*/
}

.carousel-thumbnails .thumbnail {
    flex-shrink: 0;
    width: fit-content;
    height: 100%;
    box-sizing: border-box;  /* Include border in height calculation */
    cursor: pointer;
    border: 1px solid transparent;
    background: var(--bgColor, black);
    transition: border-color 0.3s ease, opacity 0.3s ease;
}

.carousel-thumbnails .thumbnail.active {
    border-color: var(--textColor);
    opacity: 1;
}

.carousel-thumbnails .thumbnail img,
.carousel-thumbnails .thumbnail video {
    width: auto;
    height: 100%;
    object-fit: contain;
    opacity: 0.6;
    will-change: opacity;  /* Hint to browser to optimize opacity transitions */
}

.carousel-thumbnails .thumbnail:hover img,
.carousel-thumbnails .thumbnail.active img,
.carousel-thumbnails .thumbnail:hover video,
.carousel-thumbnails .thumbnail.active video {
    opacity: 1;
}

/* Scrollbar styling for thumbnails */
.carousel-thumbnails::-webkit-scrollbar {
    height: 6px;
}

.carousel-thumbnails::-webkit-scrollbar-track {
    background: var(--tagColor);
}

.carousel-thumbnails::-webkit-scrollbar-thumb {
    background: var(--textColor);
    border-radius: 3px;
}

/* Gallery Grid Layout (3 columns) */
.grid-thumbnails {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-m);
    justify-content: center;
    align-items: center;
    width: 100%;
}

.grid-thumbnail {
    width: 100%;
    /* overflow: hidden; */
}

.grid-thumbnail img,
.grid-thumbnail video {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Gallery Caption */
.gallery-caption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

/* IMAGE MODAL */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.image-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bgColor, black);
    cursor: pointer;
}

.modal-content {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--maxWidth);
    height: 100%;

    /* Grid layout: 3x3 with UI elements at edges */
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    grid-template-rows: min-content 1fr min-content;
    grid-template-areas:
        ". . close"
        "prev image next"
        ". counter .";
    gap: var(--spacing-m);
    padding: var(--bodyMargin);
}

.modal-image-container {
    grid-area: image;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    min-width: 0;
    min-height: 0;
}

.modal-image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-m);
}

.modal-image-wrapper picture {
    width: 100%;
    min-height: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-image-wrapper img,
.modal-image-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Modal Controls */
.modal-close,
.modal-nav {
    color: var(--textColor);
    cursor: pointer;
    transition: color 0.2s ease;
    pointer-events: auto;
    align-self: center;
    justify-self: center;
}

.modal-close:hover,
.modal-nav:hover {
    color: var(--tagColor);
}

.modal-close {
    grid-area: close;
    justify-self: end;
    align-self: start;
}

.modal-prev {
    grid-area: prev;
}

.modal-next {
    grid-area: next;
}

.modal-close svg,
.modal-nav svg {
    display: block;
    height: auto;
}

.modal-close svg {
    width: calc(var(--fontSize-l) * .75);
}

.modal-nav svg {
    width: calc(var(--fontSize-l) * .625); /* 1.25x larger than previous .5 */
    stroke-width: 1.6; /* Adjusted to match close button's stroke appearance */
}

.modal-caption {
    font-size: var(--fontSize-s);
    text-align: center;
    flex-shrink: 0;
}

.modal-counter {
    grid-area: counter;
    color: var(--textColor);
    font-size: var(--fontSize-s);
    pointer-events: none;
    text-align: center;
}

/* MEDIA QUERIES */
@media (min-width: 1001px) {
    main {
        margin-top: 80svh; /* Desktop: main has margin-top so that it doesn't cover up ascii */
        z-index: auto; /* Remove stacking context so fixed header can appear above nav */
    }

    main * {
        z-index: 1; /* Need to establish z-index for main content so that they appear above ascii-bg */
    }

    header {
        position: fixed;
        z-index: 200;
        top: var(--spacing-m);
        left: 50%;
        width: min(80%, calc(100% - 260px)); /* 260px = estimated nav link widths plus padding*/
        transform: translateX(calc(-50% + var(--navOffset, 0px)));
    }

    /* TITLE TYPE-SHRINK EFFECT */
    .title {
        transform-origin: center top;
        transition: transform .5s ease-out;
        /* No transition on stroke/fill to prevent black flash in Safari */
    }

    .title.shrunk {
        transform: scale(calc(20/92)); /* this is var(--fontSize-m) / var(--fontSize-xxl) = 20px / 92px; Safari and Firefox can't use CSS variables in calc */
        -webkit-text-stroke: 0px;
        -webkit-text-fill-color: var(--textColor, #000);
        color: var(--textColor, #000);
    }

    /* Phase 2: After scale animation completes, swap to actual font-size for text reflow */
    header.shrunk-final {
        width: calc(100% - 260px); /* Expand to fill available nav space */
    }

    .title.shrunk-final {
        transition: none; /* Disable transition for instant swap from shrunk */
        font-size: var(--fontSize-m); /* Actual smaller font size allows text reflow */
        -webkit-text-stroke: 0px;
        -webkit-text-fill-color: var(--textColor, #000);
        color: var(--textColor, #000);
    }

    /* Reverse phase 1: Snap back to original width + scaled down large font */
    .title.reversing {
        transition: none; /* Instant snap */
        font-size: var(--fontSize-xxl); /* Back to large font */
        transform: scale(calc(20/92)); /* But scaled down to match visual size */
    }

    /* Reverse phase 2: Animate scale back to 1 */
    .title.reversing.animate {
        transition: transform 0.5s ease-out;
        transform: scale(1);
    }
}

@media (max-width: 1000px) {
    main {
        /* JS overrides with fixed pixel value on load to prevent Firefox toolbar issues */
        gap: 75svh;
    }

    header {
        position: sticky;
        top: var(--spacing-xxl);
        padding: 0 var(--bodyMargin) var(--spacing-l) var(--bodyMargin);
        z-index: 50;
    }

    /* When content touches header, switch to relative so it scrolls with content */
    header.unsticky {
        position: relative;
        top: 0; /* Reset top - JS transform handles positioning */
    }

    .grid-thumbnails {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .overview {
        grid-template-columns: 1fr;
    }

    .content-block {
        display: flex;
        flex-direction: column;
    }

    .content.text-left .content-block {
        flex-direction: column-reverse;
    }
}

@media (max-width: 480px) {
    .metadata {
        grid-template-columns: 1fr;
    }
}

/* Always show carousel gallery arrows on touch devices (no hover) */
@media (hover: none) {
    .carousel-hero-wrapper .carousel-nav {
        opacity: 1;
    }
}