/* =============================================================== project list

   The list of projects, shared by the service page (the full record of work under
   one service) and the map page's side panel. A year rail on the left carries the
   scan, so the year is the only thing allowed to be large and the row separators
   are the only lines on the block — the search box and the client select are
   underlines rather than boxes so it reads as one list instead of a form sitting
   on top of one. Nothing declares a font: Poppins comes down from body.

   Every size worth changing is a custom property or lives under one of the
   breakpoints below, which is what lets the map panel run the same design a size
   down without forking it (see .project-list in map_service.css). */

.all-projects {
    /* Three tints of the same navy, palest to darkest, so the year recedes behind
       the title and the client sits between them. */
    --project-year: #b7c6dd;
    --project-client: #8fa5c8;
    --project-meta: #6b7280;
    --project-rule: #e6e9ef;
    --project-year-col: 6.5rem;
    --project-gap: 1.5rem;
    margin: 3.5rem 0 4rem;
}

.all-projects-title {
    /* Colour and weight come from the global h2 rule; only the size is local. */
    font-size: 2.2rem;
    margin-bottom: 2rem;
}

.all-projects-count {
    font-size: 1rem;
    font-weight: 400;
    color: var(--project-year);
    vertical-align: super;
    margin-left: .35rem;
}

/* ---- search */

.all-projects-search {
    position: relative;
    max-width: 34rem;
    margin-bottom: 1.25rem;
}

.all-projects-search .bi-search {
    position: absolute;
    left: .1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--project-client);
    font-size: .95rem;
    pointer-events: none;
}

.all-projects-search input {
    width: 100%;
    padding: .5rem .25rem .6rem 2rem;
    font-size: 1.05rem;
    color: var(--primary-color);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--project-rule);
    transition: border-color var(--dur-fast) var(--ease-standard);
}

.all-projects-search input::placeholder {
    color: var(--project-client);
}

.all-projects-search input:focus {
    outline: none;
    border-bottom-color: var(--primary-color);
}

/* The native clear button and the decoration puck both break the underline look,
   and Escape already clears the field. */
.all-projects-search input::-webkit-search-cancel-button,
.all-projects-search input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* ---- controls */

.all-projects-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
    font-size: .9rem;
}

.all-projects-controls label,
.all-projects-sort-label {
    color: var(--project-meta);
    margin: 0 .35rem 0 0;
}

.all-projects-controls select {
    min-width: 14rem;
    padding: .3rem 1.5rem .35rem .35rem;
    color: var(--primary-color);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--project-rule);
    transition: border-color var(--dur-fast) var(--ease-standard);
}

.all-projects-controls select:focus {
    outline: none;
    border-bottom-color: var(--primary-color);
}

/* Country names are short and there are only a handful, so this one does not need
   the width the client names ask for. */
.all-projects-controls select[data-projects-country] {
    min-width: 10rem;
}

.all-projects-divider {
    width: 1px;
    height: 1.1rem;
    margin: 0 .9rem;
    background: var(--project-rule);
}

/* State rides on aria-pressed rather than a class, so the button cannot look
   active while announcing itself as inactive. */
.all-projects-sort {
    padding: .15rem 0;
    color: var(--project-meta);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}

.all-projects-sort + .all-projects-sort {
    margin-left: .9rem;
}

.all-projects-sort:hover {
    color: var(--primary-color);
}

.all-projects-sort[aria-pressed="true"] {
    color: var(--primary-color);
    font-weight: 600;
    border-bottom-color: var(--primary-color);
}

.all-projects-sort:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.all-projects-arrow {
    font-size: .7rem;
}

/* ---- rows */

.all-projects-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--project-rule);
}

.project-row {
    display: flex;
    align-items: baseline;
    gap: var(--project-gap);
    padding: 1.1rem .5rem;
    border-bottom: 1px solid var(--project-rule);
    transition: background-color var(--dur-fast) var(--ease-standard);
}

/* display: flex above beats the UA [hidden] rule, so filtered-out rows need this
   or they stay on screen. */
.project-row[hidden] {
    display: none;
}

.project-row:hover {
    background-color: #f7f9fc;
}

.project-row-year {
    flex: 0 0 var(--project-year-col);
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1;
    color: var(--project-year);
}

/* "No year" is a label rather than a number, so it drops out of the year type scale
   instead of forcing the rail wide enough for seven characters at 1.75rem. The rows
   are baseline aligned, so the smaller text still lines up with the title. */
.project-row-year.is-undated {
    font-size: .95rem;
    font-weight: 400;
}

.project-row-body {
    min-width: 0;
}

.project-row-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-color);
}

.project-row-meta {
    margin: .3rem 0 0;
    font-size: .85rem;
    color: var(--project-meta);
}

.project-row-client {
    color: var(--project-client);
}

.project-row-sep {
    margin: 0 .4rem;
    color: var(--project-year);
}

.all-projects-empty {
    padding: 2rem .5rem;
    color: var(--project-meta);
}

/* ---- responsive */

@media (max-width: 991px) {
    .all-projects {
        --project-year-col: 5rem;
        --project-gap: 1rem;
    }

    .all-projects-title {
        font-size: 1.8rem;
    }

    .project-row-year {
        font-size: 1.5rem;
    }
}

/* The year rail costs too much width here, so it becomes a line above the title
   instead of a column beside it. */
@media (max-width: 560px) {
    .project-row {
        flex-direction: column;
        gap: .35rem;
    }

    .project-row-year {
        flex: 0 0 auto;
        font-size: 1.25rem;
    }

    .all-projects-controls select {
        min-width: 0;
        flex: 1 1 10rem;
    }

    .all-projects-divider {
        display: none;
    }
}