/* The projects as a grid of pictures (layout/parts/project-grid.php): the list at /projects/
   (archive-project.php) and a service's page (taxonomy-project_service.php). Full width, with
   the page's side margins; two staggered columns from a tablet up (every picture in its own
   shape), one on a phone. Each card is a picture
   with the project's service and name over the bottom of it, on a dark fade so the white text
   reads on any picture. The card is one link. */

/* The page: its title, then the grid. The menu pill is fixed over the top (--pill-clear,
   nav-pill.css) and takes no room, so the page starts a little under it; WordPress' toolbar,
   when logged in, already pushes the page down by its own height, so that is taken off. */
.projects-page {
    flex: 1 0 auto;
    width: 100%;
    padding-block: calc(var(--pill-clear, 0px) - var(--admin-bar-offset, 0px) + 3vh) var(--desktop-fixed-content-vertical-padding);
    padding-inline: var(--desktop-fixed-content-inline-padding);
}
@media only screen and (max-width: 768px) {
    .projects-page {
        padding-block: calc(var(--pill-clear, 0px) - var(--admin-bar-offset, 0px) + 1.5rem) var(--mobile-fixed-content-vertical-padding);
        padding-inline: var(--mobile-fixed-content-inline-padding);
    }
}

/* The title (and a service's description under it) sits above the grid, in the same margins */
.projects-page > .title-block {
    margin-bottom: 0.75em;
    text-align: center;
}
.projects-intro {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
}
.projects-intro > :last-child {
    margin-bottom: 0;
}

/* Phones (and any browser too old for the wall below): one column, each card its picture's own
   shape (--ar), in order */
.project-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-top: clamp(1.5rem, 3vw, 3rem);
}

/* From a tablet up: two columns, a wall of photos of different heights. Where each card goes is
   worked out by layout/parts/project-grid.php (--col, --row, --span); here the rows are made
   1/--units of a column's width tall, so a card spanning --span of them is exactly as tall as
   its picture. The wrap is measured (100cqw is its width) to size them. The gap between the
   columns is the same --gap-units as the space under each card. */
@supports (width: 1cqw) {
    @media only screen and (min-width: 769px) {
        .project-grid-wrap {
            container-type: inline-size;
            margin-top: clamp(1.5rem, 3vw, 3rem);
        }
        .project-grid {
            --unit: calc(100cqw / (2 * var(--units) + var(--gap-units)));
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: var(--unit);
            row-gap: 0;
            column-gap: calc(var(--unit) * var(--gap-units));
            margin-top: 0;
        }
        .project-card {
            grid-column: var(--col);
            grid-row: var(--row) / span var(--span);
        }
        /* The card is the size of its rows; the picture fills it (the rows are rounded to whole
           ones, so this trims at most a sliver, too small to see) */
        .project-grid .project-card .project-card__img {
            position: absolute;
            inset: 0;
            height: 100%;
            aspect-ratio: auto;
        }
    }
}

.project-grid__empty {
    margin-top: clamp(1.5rem, 3vw, 3rem);
    font-size: var(--text-size);
    text-align: center;
    color: var(--text-color);
}

.project-card {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden; /* the picture's hover zoom stays inside the rounded corners */
    border-radius: var(--image-border-radius);
    box-shadow: var(--shadow-soft);
    color: #fff;
}
.project-card:focus-visible {
    outline: 3px solid var(--text-color);
    outline-offset: 4px;
}

/* The picture. (The theme's pictures get a margin below, a shadow and rounded corners of their
   own, style.css: the card has those, so the picture takes none.) */
.project-card .project-card__img {
    display: block;
    width: 100%;
    height: auto;
    /* Its own shape (only a panorama or a very tall picture is trimmed to fit: project-grid.php) */
    aspect-ratio: var(--ar, 3 / 2);
    object-fit: cover;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The service and the name, at the bottom left */
.project-card__text {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(1rem, 2.5vw, 1.75rem);
}

/* A dark fade behind the text, so it reads: as tall as the text (and its padding), fading out
   over the 3rem above it. Sized by the text, not the card, so a tall card isn't darkened far
   above its words. */
.project-card__text::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -3rem 0 0;
    background: linear-gradient(to top,
        rgba(20, 25, 31, 0.8) 0%,
        rgba(20, 25, 31, 0.5) calc(100% - 3rem),
        rgba(20, 25, 31, 0.18) calc(100% - 1.5rem),
        rgba(20, 25, 31, 0) 100%);
    pointer-events: none;
}
.project-card__type {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.85);
}
/* (Size: 15% smaller than the clamp() inside. Letter spacing: was 0.03em, now 10% more space
   between the letters than that gave, at the smaller size.) */
.project-card .project-card__title {
    margin-top: 0.3em;
    font-size: calc(clamp(1.15rem, 0.8rem + 1.2vw, 1.9rem) * 0.85);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.039em;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    text-wrap: balance;
    /* A very long word breaks inside the card instead of running out of it */
    overflow-wrap: anywhere;
}

/* The picture eases in a little under the mouse, but only where there is a mouse to hover with,
   and not for anyone who asked their device for less motion */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .project-card .project-card__img {
        transition: transform 0.5s ease;
    }
    .project-card:hover .project-card__img {
        transform: scale(1.04);
    }
}

/* High contrast colours: the user's colours replace the card's, so it keeps an outline */
@media (forced-colors: active) {
    .project-card {
        border: 1px solid CanvasText;
    }
}

/* Paper: backgrounds don't print, so the fade and the white text would be lost. The service and
   name go under the picture in dark text instead, and a card is never split across two pages. */
@media print {
    .project-card {
        break-inside: avoid;
        color: #000;
    }
    .project-card__text::before {
        display: none;
    }
    .project-card__text {
        position: static;
        padding: 0.1in 0 0;
    }
    .project-card__type,
    .project-card .project-card__title {
        color: #000;
        text-shadow: none;
    }
    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}