/*==========================================================================
   PROJECTS
   Desktop values measured off ProjectsBlueprint.pdf and, for the hover
   state, ProjectsHoverBlueprint.pdf. Same convention as the rest of the
   site: the 8001px export is a 1920px design, so a measurement of N export
   px is N/4.167 CSS px and N/8001 of the page width.

   At 1920 the page is one section, 86 - 991.1, with:
     six tiles   485.7 x 299 at x 55 / 564.2 / 1073.4, y 166.1 / 497.2
     a sidebar   x 1673.1 - 1920 (12.86%), badges centred at x 1802.7
==========================================================================*/

/* This page is 1072px tall, so on any window taller than that main grows to
   fill and the section does not — which left a strip of bare body between the
   navy sidebar (anchored to the section) and the footer. Letting the section
   take that growth keeps the sidebar running all the way down. Scoped to this
   page: making main a flex column site-wide collapses the homepage's
   featured-work row. */
main {
    display: flex;
    flex-direction: column;
}

.work {
    flex: 1 0 auto;
}

/* Matches the last section, so the strip below it on a short page does
   not show as bare body. See the note on `body` in style.css. */
body { background: #fdfdfd; }   /* the work section's ground */

.work {
    position: relative;
    padding: 2.5rem 1.25rem calc(2.5rem + var(--footer-badge-clear) - 1.5rem);
}

/*--------------------------------------------------------------------------
   Project tiles
--------------------------------------------------------------------------*/
.tiles {
    display: grid;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Two corners rounded hard, two nearly square — 50px / 10px at 1920. */
.tile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: 485.7 / 299;
    border-radius: 2.6vw 0.52vw 2.6vw 0.52vw;
    box-shadow: 0.31vw 0.31vw 0.63vw rgba(0, 0, 0, 0.25);
    cursor: default;
    container-type: inline-size;
}

.tile__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* AURORA and DC IT Society arrive as whole posters rather than the
   landscape crops the blueprint uses; tools/build-images.sh crops them to
   the tile's ratio, so a plain centred cover is right for every tile. */

/*--------------------------------------------------------------------------
   Hover: the artwork dims behind a blue wash and the write-up comes up
--------------------------------------------------------------------------*/
.tile__info {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6% 9.7%;
    text-align: center;
    color: var(--white);
    background: rgba(21, 58, 112, 0.9);
    opacity: 0;
    transition: opacity 0.35s var(--ease);
}

@media (hover: hover) {
    .tile:hover .tile__info { opacity: 1; }
}

.tile:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}

.tile:focus-visible .tile__info,
.tile.is-open .tile__info {
    opacity: 1;
}

.tile__name {
    margin: 0;
    font-size: 8cqw;               /* ~38.8px on a 485.7px tile */
    font-weight: 900;
    line-height: 0.95;
}

.tile__discipline {
    margin: 0.55em 0 0.75em;
    font-size: 3.34cqw;            /* ~16.2px */
    font-weight: 800;
    font-style: italic;
}

.tile__blurb {
    margin: 0;
    font-size: 3.64cqw;            /* ~17.7px */
    font-weight: 400;
    line-height: 1.1;
}

/*==========================================================================
   "pick your poison!" — the category sidebar
==========================================================================*/
/* Mobile follows ProjectsMobile.png: a band across the top of the page with
   the five badges on one line, written in --u the same way as the other
   mobile layouts.

   The band's foot is BlueVertWave turned a quarter-turn — see the note in
   tools/inline-svg.py. The artwork is nearly twice the band's height and is
   pinned to its bottom, which is what gives the wave the depth the reference
   draws; below the crest the artwork is transparent, so the page's own
   ground shows through. */
.poison {
    position: relative;
    display: block;
    /* out through .work's padding to the page edges, and up to sit against
       the navbar; below it, the gap the reference leaves before the tiles. */
    margin: -2.5rem -1.25rem calc(var(--u) * 6.6);
    padding: calc(var(--u) * 3.55) calc(var(--u) * 8.59) calc(var(--u) * 7.79);
    color: var(--white);
    background: var(--svg-horiz-wave) no-repeat left bottom
                / 100% calc(var(--u) * 63.76);
}

.poison__title {
    margin: 0;
    font-size: max(0.8rem, calc(var(--u) * 3.9));
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
}

/* Stacked on desktop; one line across the band on mobile. */
.poison__title br { display: none; }

.poison__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    margin: calc(var(--u) * 3.26) 0 0;
    padding: 0;
    list-style: none;
}

/* The designer scaled each badge by eye, so they carry their own widths.
   In --u, not a percentage: a percentage here would resolve against the
   list's box, which the band's own side padding has already narrowed. */
.poison__badge { width: var(--badge-w); }

.poison__badge:nth-child(1) { --badge-w: calc(var(--u) * 14.66); }
.poison__badge:nth-child(2) { --badge-w: calc(var(--u) * 14.12); }
.poison__badge:nth-child(3) { --badge-w: calc(var(--u) * 14.86); }
.poison__badge:nth-child(4) { --badge-w: calc(var(--u) * 13.72); }
.poison__badge:nth-child(5) { --badge-w: calc(var(--u) * 13.46); }

.poison__badge img {
    display: block;
    width: 100%;
    height: auto;
}

/*==========================================================================
   DESKTOP — the blueprint layout
   Held to 64em for the same reason as the other pages: the blueprint is a
   1920px design, and the tile copy would be unreadable scaled to 768.
==========================================================================*/
@media (min-width: 64em) {

    /* This page is one screen: the tiles and the category sidebar are meant
       to be taken in together, with the footer already on it. So the section
       is written in --fit rather than vw — one percent of the blueprint's
       width, held down to whatever height is left once the navbar and the
       footer have taken theirs. On a window tall enough for the blueprint it
       is exactly 1vw and nothing changes; on a shorter one the whole section
       scales down instead of the page scrolling. 41 is the section's own
       height in these units, set by the sidebar, which is the taller of the
       two columns. */
    :root {
        --fit: min(1vw, calc((100vh - var(--nav-height) - var(--footer-h)) / 43.1));
        /* dvh is the window as it actually is at the moment, so a chrome bar
           that can be toggled — Vivaldi's status bar, a tablet's URL bar —
           is taken off the budget the moment it appears. vh above for
           anything that does not know dvh; on a desktop they agree. */
        --fit: min(1vw, calc((100dvh - var(--nav-height) - var(--footer-h)) / 43.1));
    }

    /* Three tile columns; the sidebar is taken out of the flow entirely and
       pinned to the page edge, so it spans navbar to footer on its own. */
    .work {
        display: grid;
        grid-template-columns: repeat(3, calc(var(--fit) * 26.04));
        justify-content: start;
        /* min-height would otherwise stretch the two rows to fill it */
        align-content: start;
        column-gap: calc(var(--fit) * 1.26);    /* 23.5px at 1920 */
        row-gap: calc(var(--fit) * 1.67);       /* 32.1px at 1920 */
        /* first tile at x=55, y=166.1 */
        padding: calc(var(--fit) * 4.17) 0 0 calc(var(--fit) * 2.86);
        min-height: calc(var(--fit) * 41);
    }

    /* The corner radius and the drop shadow are a share of the tile, so they
       follow it down rather than staying at their 1920 size. */
    .tile {
        border-radius: calc(var(--fit) * 2.6) calc(var(--fit) * 0.52)
                       calc(var(--fit) * 2.6) calc(var(--fit) * 0.52);
        box-shadow: calc(var(--fit) * 0.31) calc(var(--fit) * 0.31)
                    calc(var(--fit) * 0.63) rgba(0, 0, 0, 0.25);
    }

    .tiles {
        display: contents;          /* tiles join the page grid directly */
    }

    .poison {
        position: absolute;
        inset: 0 0 0 auto;
        width: calc(var(--fit) * 12.86);        /* 246.9px at 1920 */
        display: block;
        margin: 0;
        /* The wave takes 5% of the panel's own width. The bottom is the
           blueprint's own 46px of clear space under the last badge, and it
           is inside the height budget above, so it survives the squeeze
           instead of being the first thing to go. */
        padding: calc(var(--fit) * 1.61) 0 calc(var(--fit) * 2.40)
                 calc(var(--fit) * 0.643);
        background: var(--svg-long-vert-wave) no-repeat left top / 100% 100%;
    }

    .poison__title {
        font-size: calc(var(--fit) * 1.32);     /* ~25.3px at 1920 */
        line-height: 1.05;
    }

    .poison__title br { display: inline; }

    .poison__list {
        display: block;
        margin-top: calc(var(--fit) * 1.58);
    }


    .poison__badge {
        width: var(--badge-w);
        margin-inline: auto;
    }


    /* The blueprint's relative sizes and gaps, taken down 12% together so
       the column clears the footer on a screen the blueprint's own height
       does not fit. */
    .poison__badge:nth-child(1) { --badge-w: calc(var(--fit) * 5.73); margin-bottom: calc(var(--fit) * 1.50); }
    .poison__badge:nth-child(2) { --badge-w: calc(var(--fit) * 5.50); margin-bottom: calc(var(--fit) * 1.48); }
    .poison__badge:nth-child(3) { --badge-w: calc(var(--fit) * 5.81); margin-bottom: calc(var(--fit) * 1.50); }
    .poison__badge:nth-child(4) { --badge-w: calc(var(--fit) * 5.37); margin-bottom: calc(var(--fit) * 1.49); }
    .poison__badge:nth-child(5) { --badge-w: calc(var(--fit) * 5.24); }
}