/* ============================================================
   Work page — layout only
   Fonts (Nohemi / Instrument Serif), header, footer, container and
   colors are all inherited from styles.css — same setup as the home
   page, so the type renders identically.
   ============================================================ */

/* Links read as plain text — no hover / interaction effects per brief */
a {
    color: inherit;
    text-decoration: none;
}

/* ---- Intro --------------------------------------------------- */
.work-intro {
    display: grid;
    grid-template-columns: 928fr 832fr;   /* match the Studio page's label/intro split */
    margin-top: 12.5rem;
    margin-bottom: 11.25rem;
}

.work-intro-title {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2rem;
}

.work-intro-text {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2rem;
    max-width: 43.0625rem;
}

/* ---- Projects ------------------------------------------------ */
.projects {
    display: flex;
    flex-direction: column;
    gap: 8.75rem;
    margin-bottom: 12.5rem;
}

/* Meta label row above each project */
.project-meta {
    position: relative;       /* anchors the hover-peek flank images */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: var(--border-style);
    padding-top: 1rem;
    margin-bottom: 2.5rem;
    font-family: var(--font-sans);
    font-size: 1.75rem;
}
/* The meta row is short — smaller peeks so they float over the layout
   like a card, not a billboard */
.project-meta .peek { width: 11rem; height: 7.5rem; z-index: 3; }
/* Size each meta label to its own text (not the full 1/3 grid cell) so the hover
   scramble only fires over the word itself. justify-self keeps the same alignment
   that text-align used to give. */
.project-name { justify-self: start; font-size: inherit; font-weight: 400; }  /* <h2> for structure; match the meta row */
.project-type { justify-self: center; }
.project-location { justify-self: end; }

/* Project body: thumbnail | featured image | (spacer) | detail */
.project-body {
    display: grid;
    grid-template-columns: 1fr 4.2fr 0.8fr 3.4fr;
    column-gap: 1.75rem;
}

/* Left column — thumbnail + service tags */
.project-thumb {
    width: 100%;
    height: auto;            /* override the HTML height attr so aspect-ratio controls height */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.project-tags {
    list-style: none;
    margin-top: 1rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.45;
}

/* Center column — featured composite */
.project-figure { grid-column: 2; }
.project-figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* Pixelate-on-scroll wrapper (pixelate.js wraps each featured image in <span.pix> + canvas).
   Base styles mirror the case pages; Work images only de-pixelate — no parallax (no GSAP here). */
.pix { position: relative; display: block; overflow: hidden; line-height: 0; }
.pix > img { display: block; width: 100%; height: auto; }
.pix__canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}

/* Right column — description + action links */
.project-detail {
    grid-column: 4;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project-desc {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.25;
    margin-top: auto;          /* float to vertical middle */
    margin-bottom: 2rem;
}

.project-links {
    margin-top: auto;          /* pin to bottom of the figure height */
}

.project-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border-top: var(--border-style);
    padding: 1rem 0;
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 400;
}

.project-link svg {
    width: 2.125rem;
    height: 2.125rem;
    flex-shrink: 0;
    stroke: var(--color-text);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Hover micro-motion — desktop fine pointers only ----------
   The arrow PATH swaps through its own 24×24 viewBox (exit one side, re-enter
   from the other). The <svg> box itself never moves, so the motion stays
   clipped inside the icon — nothing pokes past the rule's right edge and the
   row's geometry never changes. (27 user units > viewBox 24 = fully out,
   stroke included, before the jump-cut back in.) */
@media (hover: hover) and (pointer: fine) {
    .project-link:hover svg path { animation: fl-arrow-swap 0.45s cubic-bezier(0.65, 0, 0.35, 1); }
    .project-link[target="_blank"]:hover svg path { animation-name: fl-arrow-swap-ext; }
}
@keyframes fl-arrow-swap {           /* → exits right, re-enters from the left */
    0%    { transform: translateX(0); }
    50%   { transform: translateX(27px); }
    50.1% { transform: translateX(-27px); }
    100%  { transform: translateX(0); }
}
@keyframes fl-arrow-swap-ext {       /* ↗ exits top-right, re-enters from bottom-left */
    0%    { transform: translate(0, 0); }
    50%   { transform: translate(27px, -27px); }
    50.1% { transform: translate(-27px, 27px); }
    100%  { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .project-link:hover svg path,
    .project-link[target="_blank"]:hover svg path { animation: none; }
}

/* Hover video preview (work-hover.js) — sits between the still and the pixel
   canvas; invisible until the sequence hard-cuts to the sharp playing clip */
.pix__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
}
.pix__video--on { opacity: 1; }

/* ============================================================
   Mobile — work page (scoped to html.page-work; the fluid root in styles.css
   makes 1rem = figma-px/16 at any phone width). Reproduces the Figma "Work
   Section" mobile frame 1:1. Desktop rules above are untouched.
   ============================================================ */
@media (max-width: 819px) {
    /* ---- Intro: "All work" | paragraph, 50/50 like the Figma ---- */
    .page-work .work-intro {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin-top: 21.5625rem;          /* 21.5625rem from the top, clearing the header */
        margin-bottom: 0;
    }
    .page-work .work-intro-title,
    .page-work .work-intro-text {
        font-size: 3.25rem;              /* 3.25rem */
        line-height: 1.3;
        max-width: none;
    }

    /* ---- Projects: big editorial gaps between blocks ---- */
    .page-work .projects {
        gap: 33rem;                      /* ~33.375rem between projects */
        margin-top: 21.5rem;             /* ~21.5rem after the intro */
        margin-bottom: 25rem;            /* ~25rem before the footer */
    }

    /* Flatten the nested body/detail wrappers so their children join the
       .project grid, then place everything by named area. */
    .page-work .project {
        display: grid;
        grid-template-columns: 580fr 637fr;   /* title col | thumb col */
        column-gap: 3.0625rem;                /* 3.0625rem */
        row-gap: 0;
        grid-template-areas:
            "meta   aside"
            "desc   desc"
            ".      links"
            "figure figure";
    }
    .page-work .project-body,
    .page-work .project-detail { display: contents; }

    /* Left column — name up top, type dropped down near the thumb's foot,
       with the divider rule sitting above the name. */
    .page-work .project-meta {
        grid-area: meta;
        display: flex;
        flex-direction: column;
        gap: 17rem;                      /* 17rem name → type */
        border-top: var(--border-style);
        padding-top: 0.9375rem;          /* 0.9375rem rule → name */
        margin-bottom: 0;
        font-family: var(--font-sans);
        font-size: 3.25rem;              /* 3.25rem */
        line-height: 1.3;
    }
    .page-work .project-type { justify-self: start; }
    .page-work .project-location { display: none; }   /* not shown on mobile */

    /* Right column — thumbnail + service tags */
    .page-work .project-aside { grid-area: aside; }
    .page-work .project-thumb {
        aspect-ratio: 618 / 348;         /* Figma thumb ratio */
    }
    .page-work .project-tags {
        margin-top: 1.5rem;
        font-size: 3.25rem;              /* 3.25rem, matches the body */
        line-height: 1.3;
    }

    /* Full-width description with generous air above */
    .page-work .project-desc {
        grid-area: desc;
        margin: 19rem 0 0;               /* ~19.125rem gap above */
        font-size: 3.25rem;              /* 3.25rem */
        line-height: 1.3;
        max-width: none;
    }

    /* Right-column action links — text + rule + arrow (same as desktop) */
    .page-work .project-links {
        grid-area: links;
        margin-top: 7rem;                /* ~6.9375rem below the description */
    }
    .page-work .project-link {
        gap: 1.5rem;
        padding: 0.9375rem 0;            /* 0.9375rem rule → text */
        font-size: 3.25rem;              /* 3.25rem */
    }
    .page-work .project-link svg {
        width: 3.25rem;                  /* arrow rides at text height */
        height: 3.25rem;
    }

    /* Full-width featured image */
    .page-work .project-figure {
        grid-area: figure;
        margin-top: 3rem;                /* ~3.0625rem */
    }
}