/* CSS for layout/content */
  
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Work — Figma "Lux / Work" (4988:5132) and "Work / List View" (4988:5237)
 *
 * page-work.php: a filter bar over two views of the projects, Grid and Index,
 * of which js/work.js shows one at a time. The view not in use, and anything
 * the filters leave out, carries the hidden attribute.
 */

.work [hidden] {
    display: none !important;
}

.entry-content > .work {
    margin-top: calc(2 * var(--three-spacer));
}

/* Filter bar: Hide/Show Filters over the filter pills, with the view switch on
 * the right — level with the first row of pills when they're open, otherwise
 * with the toggle. */
.work__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--two-spacer) var(--three-spacer);
    padding: var(--two-spacer) 0;
    border-top: 1px solid var(--wp--preset--color--text-10);
}

.work__filters-toggle {
    grid-column: 1;
    justify-self: start;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--wp--preset--color--text-80);
    cursor: pointer;
}

.work__filters {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px var(--one-spacer);
    max-width: 850px;
}

.work__switch {
    grid-column: 2;
    grid-row: 1;
}

.work__bar.is-open .work__switch {
    grid-row: 2;
}

.work__grid,
.work__index,
.work__empty {
    margin-top: var(--three-spacer);
}

.work__empty {
    color: var(--wp--preset--color--text-50);
}

/* Grid — Project Card (4988:6818), two to a row. */
.work__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--four-spacer) var(--three-spacer);
}

.project-card__link {
    display: flex;
    flex-direction: column;
    gap: var(--one-point-five-spacer);
    color: inherit;
    text-decoration: none;
}

.project-card__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--two-spacer);
}

/* Title — Location. Below 1080px the location drops below a long title; from
 * there the title wraps instead and the location stays on its first line. */
.project-card__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--one-spacer);
    min-width: 0;
}

.project-card__location {
    color: var(--wp--preset--color--text-50);
}

.project-card__dash {
    margin-right: var(--one-spacer);
}

.project-card__link:hover .project-card__title {
    color: var(--wp--preset--color--text-50);
}

/* Figma "metadata - date": Geist Mono 18px. */
.project-card__year {
    flex: 0 0 auto;
    font-family: var(--wp--preset--font-family--geist-mono);
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--wp--preset--color--text-50);
}

.project-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 675 / 480;
    object-fit: cover;
}

@media (min-width: 782px) {
    .work__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: calc(2 * var(--three-spacer));
    }
}

@media (min-width: 1080px) {
    .project-card__heading {
        flex-wrap: nowrap;
    }

    .project-card__location {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* Index — Work / Index Entry (4988:4418). A table from 1080px; below that each
 * row stacks, year beside the rest. Projects with a featured image link through,
 * and that link covers the whole row; the rest are listed without one. */
.work__index {
    display: block;
    width: 100%;
    font-size: 1.125rem;
    line-height: 1.3;
    text-align: left;
}

.work__index thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.work__index tbody {
    display: block;
}

.work__index th,
.work__index td {
    font-weight: 400;
    text-align: left;
    vertical-align: top;
}

/* Rows sit slightly grey; a row that links comes up to full text colour on hover.
 * 65% falls between the palette's Text 80% and Text 50% (the column headings),
 * so it's mixed from Text and follows the colour mode with it. */
.project-index-entry {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--zero-point-five-spacer) var(--two-spacer);
    padding: var(--two-spacer) 0;
    border-top: 1px solid var(--wp--preset--color--text-10);
    color: color-mix(in srgb, var(--wp--preset--color--text) 65%, transparent);
}

.project-index-entry > * {
    grid-column: 2;
}

.project-index-entry__year {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--wp--preset--font-family--geist-mono);
}

.project-index-entry__detail {
    font-size: 1rem;
    color: var(--wp--preset--color--text-50);
}

.project-index-entry__detail:empty {
    display: none;
}

.project-index-entry__link {
    color: inherit;
    text-decoration: none;
}

.project-index-entry__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.project-index-entry--linked:hover,
.project-index-entry--linked:focus-within {
    color: var(--wp--preset--color--text);
}

/* Column widths are the design's 89 / 205 / 322 / 205 / 440px, each plus its
 * 30px gutter, as shares of the 1381px table. */
@media (min-width: 1080px) {
    .work__index {
        display: table;
        table-layout: fixed;
        border-collapse: collapse;
    }

    .work__index thead {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        display: table-header-group;
        color: var(--wp--preset--color--text-50);
    }

    .work__index tbody {
        display: table-row-group;
    }

    .work__index thead th {
        padding-bottom: var(--two-spacer);
    }

    .work__index th:nth-child(1) { width: 8.617%; }
    .work__index th:nth-child(2) { width: 17.017%; }
    .work__index th:nth-child(3) { width: 25.489%; }
    .work__index th:nth-child(4) { width: 17.017%; }
    .work__index th:nth-child(5) { width: 31.861%; }

    .project-index-entry {
        display: table-row;
    }

    .project-index-entry > *,
    .work__index thead th {
        padding-right: var(--three-spacer);
    }

    .project-index-entry > :last-child,
    .work__index thead th:last-child {
        padding-right: 0;
    }

    /* Empty cells too, which the stacked layout hides — every column holds its place. */
    .project-index-entry > *,
    .project-index-entry__detail:empty {
        display: table-cell;
        padding-top: var(--two-spacer);
        padding-bottom: var(--two-spacer);
    }

    .project-index-entry__detail {
        font-size: inherit;
        color: inherit;
    }
}