/* Adding hyphenation here so that writing projects can take up a bit more width and not appear so narrow*/
.thumbnail-text p, .work-title {
    hyphens:auto;
}

/* LINKS */
a:hover .tag, button:hover .tag {
    color: var(--textColor);
    border-color: var(--textColor);
}

/* MAIN */
main {
    position: relative;
    z-index: 10;
    padding-top: 0; /*So that when clicking ARCHIVE, it scrolls up to right where the nav ends*/
    scroll-margin-top: calc(var(--spacing-m) * 2 + 1.2em); /* Nav padding (top + bottom) + line height for nav text */

    margin-top: 100vh; /* Start below the fold to show ascii first */
    min-height: calc(100vh - calc(var(--spacing-m) * 2 + 1.2em)); /* Maintain minimum height to prevent jumping when filtering. This is total browser height minus nav height (indicated by scroll-margin-top) */
    container-type: inline-size;
}

.no-results {
    position: fixed;
    z-index:10;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    padding: var(--spacing-m);
    background: black;

    pointer-events: none;
}

/* Main grid */
.index {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--spacing-4xl) var(--spacing-m);
    justify-content: center;
    margin: 0 auto;

    /* background: blue; */
}

.work-thumbnail, .work-info {
    display: grid;
    grid-template-columns: 1fr;
    align-content: flex-start;
}

/* Default work thumbnail - 1 column */
.work-thumbnail {
    grid-column: span 1;
    text-decoration: none;
    gap: var(--spacing-s);
    align-self: start; /* Prevent stretching to full row height */

    /* Re-enable pointer events for clickable thumbnails */
    pointer-events: auto;

    /* background: red; */
}

/* highlight work - 2 columns */
.work-thumbnail.highlight {
    grid-column: span 2;
}

/* Hidden works (filtered out) */
.work-thumbnail.hidden {
    display: none;
}

.work-thumbnail .thumbnail-image {
    width: 100%;
}

.work-thumbnail .thumbnail-image img,
.work-thumbnail .thumbnail-image video {
    width: 100%;
    height: auto;
    display: block;
}

.work-thumbnail .thumbnail-text {
    font-family: 'Francesco', Arial, sans-serif;
    width: 100%;
    line-height: 1.15em;
    font-size: var(--fontSize-s);

    /* Text ellipsis with line clamp - line-clamp controls visible lines, no max-height needed */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 20;
    line-clamp: 20;
}

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

.work-title {
    font-size: var(--fontSize-s);
    line-height: 110%;
    letter-spacing: -0.18px;

    /* Prevent font rendering shifts on hover */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0); /* Prevent font rendering shifts during the hover animation for ascii*/
}

.work-tags {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    gap: 4px var(--spacing-xxs);
}


/* MEDIA QUERIES */
/* These container queries keep it so that the .index columns are roughly 200px - 250px at any viewport width (e.g., 1500/6 = 250) */
@container (max-width: 1500px) {
    .index {
        grid-template-columns: repeat(6, 1fr);
    }
}

@container (max-width: 1250px) {
    .index {
        grid-template-columns: repeat(5, 1fr);
    }
}

@container (max-width: 1000px) {
    .index {
        grid-template-columns: repeat(4, 1fr);
    }
}

@container (max-width: 750px) {
    .index {
        grid-template-columns: repeat(3, 1fr);
    }
}

@container (max-width: 500px) {
    .index {
        grid-template-columns: repeat(2, 1fr);
    }
}