/*
 * Projects block.
 *
 * CSS Grid: 1 column when narrow, 2 columns once the block's own container is
 * wide enough (≥720px). The breakpoint is a CONTAINER query, not a viewport
 * media query, so the grid reacts to the width of the column it is dropped into
 * — full width → 2 columns, a narrow col-6 → 1 column — instead of only the
 * screen size. The container is .projects-block (the block's outer wrapper,
 * container-type: inline-size). The right column (even items) is pushed down by
 * a fixed vh offset (--projects-offset) for a staggered look; align-items:start
 * keeps each card at its natural height so the card mirrors the image's aspect
 * ratio (square stays square, landscape stays landscape — the featured image is
 * served uncropped).
 * Cards with a square featured image (.projects-item--square, set in
 * template.php) are narrowed within their column to a col-4 footprint instead
 * of the full col-6, so square images don't dominate; the card stays in its
 * column and the freed space is left empty (the stagger is unaffected).
 * Each card is the project's featured image with rounded corners; the title
 * sits below it. On hover the image zooms to 150% and decorative squares plus
 * a circular arrow fade in, all in the project's chosen accent color
 * (--projects-accent, injected inline per card). The arrow circle uses the
 * same masked arrow icon as the button system, on a Lime/50 background.
 */

/* Outer wrapper is the query container the grid sizes against. */
.projects-block {
    container-type: inline-size;
}

.projects-grid {
    --projects-gap: 48px;
    --projects-offset: 10vh;
    --projects-square: 4rem;
    --projects-radius: 24px;

    align-items: start;
    display: grid;
    gap: var(--projects-gap);
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
}

.projects-item {
    display: block;
    margin: 0;
}

.projects-card {
    border-radius: var(--projects-radius);
    color: var(--color-navy-80);
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}

.projects-card:focus-visible {
    outline: 2px solid var(--color-blue-50);
    outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────
 * Media — image wrapper that clips the zoom.
 * ───────────────────────────────────────────────────────── */

.projects-media {
    border-radius: var(--projects-radius);
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.projects-image {
    display: block;
    height: auto;
    transform: scale(1);
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
}

.projects-image--placeholder {
    aspect-ratio: 4 / 3;
    background-color: var(--color-quartz-60);
}

.projects-card:hover .projects-image,
.projects-card:focus-visible .projects-image {
    transform: scale(1.5);
}

/* ─────────────────────────────────────────────────────────
 * Decorative squares — 4rem, project accent color. Hidden by
 * default, fade in on hover (opacity only, no scale). One square
 * top-right, three bottom-left forming an L-shaped corner.
 * ───────────────────────────────────────────────────────── */

.projects-square {
    background-color: var(--projects-accent);
    display: block;
    height: var(--projects-square);
    opacity: 0;
    position: absolute;
    transition: opacity 350ms ease;
    width: var(--projects-square);
    z-index: 2;
}

.projects-square--tr {
    right: 0;
    top: 0;
}

.projects-square--bl1 {
    bottom: 0;
    left: 0;
}

.projects-square--bl2 {
    bottom: var(--projects-square);
    left: 0;
}

.projects-square--bl3 {
    bottom: 0;
    left: var(--projects-square);
}

.projects-card:hover .projects-square,
.projects-card:focus-visible .projects-square {
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────
 * Arrow circle — 5rem, Lime/50 background, Navy/80 arrow.
 * Same masked icon as .btn-arrow. Centered and permanently rotated
 * -45deg (the .btn hover angle); only fades in on hover.
 * ───────────────────────────────────────────────────────── */

.projects-arrow {
    --projects-arrow-size: 1.5rem;
    --projects-arrow-circle: 5rem;

    align-items: center;
    background-color: var(--color-lime-50);
    border-radius: 50%;
    color: var(--color-navy-80);
    display: inline-flex;
    height: var(--projects-arrow-circle);
    justify-content: center;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: opacity 350ms ease;
    width: var(--projects-arrow-circle);
    z-index: 3;
}

.projects-arrow::before {
    background-color: currentColor;
    content: "";
    height: var(--projects-arrow-size);
    mask-image: url("../icons/arrow.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("../icons/arrow.svg");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    transform: translateX(1px);
    width: var(--projects-arrow-size);
}

.projects-card:hover .projects-arrow,
.projects-card:focus-visible .projects-arrow {
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────
 * Title — below the card.
 * ───────────────────────────────────────────────────────── */

.projects-title {
    color: var(--projects-title-color, var(--color-navy-80));
    font-family: var(--font-primary);
    font-weight: 500;
    margin: 1rem 0 0;
}

/* ─────────────────────────────────────────────────────────
 * Responsive: 2 columns once the block's container is ≥720px.
 * Container query (not viewport) so a narrow column stays 1 column.
 * The threshold sits just above a boxed col-6 on desktop (~692px:
 * 1400px boxed / 12-col grid, gap-4 gutters, no desktop col padding),
 * so the projects list inside a half-width column stays 1 column,
 * while a full-width block or a wider column flips to 2.
 * ───────────────────────────────────────────────────────── */

@container (min-width: 720px) {
    .projects-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Right column (even items) sits lower by a fixed vh offset. */
    .projects-item:nth-child(even) {
        margin-top: var(--projects-offset);
    }

    /* Square images: narrow the whole item (card + title) to a col-4 footprint
     * inside its col-6 column (4/6 = 66.666%) and center it in the track. The
     * grid cell still occupies its track, so the right-column stagger is
     * unaffected; the freed width is split evenly on both sides. */
    .projects-item--square {
        justify-self: center;
        max-width: 66.6666%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .projects-image,
    .projects-square,
    .projects-arrow {
        transition-duration: 1ms;
    }

    .projects-card:hover .projects-image,
    .projects-card:focus-visible .projects-image {
        transform: none;
    }
}