/* ------------------------------------------------------------------
   Project pages. Shared styles (variables, header, footer) are in base.css.
   Values follow the "Beacon Artist Union" frame in Figma:
   1280 content width, 40px gutters, rows of 785 + 455 or 620 + 620, images 420 tall.
   ------------------------------------------------------------------ */

.project{
    padding: 20px var(--margin) 100px;
}

/* ← Previous / Next → */
.project-nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding: 20px 0;
}

.project-nav a{
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* The same links repeated after the last row */
.project-nav--bottom{
    margin-top: 40px;
    padding-bottom: 0;
}

.project-nav a:hover{
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

/* ---------- Rows ---------- */

.project-sections{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.row{
    display: grid;
    gap: 40px;
    align-items: start;
}

.row--wide-left{  grid-template-columns: 785fr 455fr; }   /* image | text */
.row--wide-right{ grid-template-columns: 455fr 785fr; }   /* text  | image */
.row--pair{       grid-template-columns: 1fr 1fr; }       /* image | image */
.row--trio{       grid-template-columns: 1fr 1fr 1fr; }   /* three portrait images (social posts, carousels) */
.row--single{     grid-template-columns: 1fr; }           /* one full-width image (a whole accordion, a long spread) */

.row img,
.row video{
    display: block;
    width: 100%;
    aspect-ratio: 785 / 420;
    object-fit: cover;
    border-radius: var(--radius);
    background-color: #e9e9e9;
}

.row--pair img,
.row--pair video{
    aspect-ratio: 620 / 420;
}

/* When a slot crops an image, choose which edge stays in frame (default is centre) */
.fit-top{    object-position: top; }
.fit-bottom{ object-position: bottom; }
.fit-upper{  object-position: center 25%; }
.fit-middle{ object-position: center 60%; }
.fit-lower-middle{ object-position: center 55%; }
.fit-right{ object-position: right; }

.row--trio img,
.row--trio video{
    aspect-ratio: 4 / 5;
}

/* Three Instagram reels at their native 9:16 */
.row--reels{
    grid-template-columns: 1fr 1fr 1fr;
}

.row--reels video{
    aspect-ratio: 9 / 16;
}

.row--single img{
    aspect-ratio: 1280 / 560;
}

/* Design boards and flow charts are laid out edge to edge, so cropping them to a
   slot cuts off labels. These keep their own proportions instead. Qualified with
   .row so it outranks the row-type aspect-ratio rules above (and their mobile
   overrides), which a bare .fit-whole class would lose to. */
.row img.fit-whole,
.row video.fit-whole{
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
}

/* ---------- Flipbook (a PDF rendered to pages, flipped with ← →) ---------- */

.row--flipbook{
    grid-template-columns: 1fr;
}

/* Sized so the whole page and its controls fit in the window together */
.flipbook{
    justify-self: center;
    width: 100%;
    max-width: min(1040px, calc((100svh - 160px) * 16 / 9));
    margin: 0;
    outline: none;
}

.flipbook:focus-visible .flipbook-page{
    outline: var(--rule-weight) solid var(--ink);
    outline-offset: 4px;
}

.flipbook-page{
    aspect-ratio: 16 / 9;
    object-fit: contain;
    cursor: zoom-in;
}

.flipbook-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 16px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}

.flipbook-controls{
    display: flex;
    align-items: center;
    gap: 20px;
}

.flipbook-bar button{
    /* 8x20 glyph, but padding makes the tap target 44x44 for touch;
       the negative margin keeps it looking the same as before */
    margin: -12px -18px;
    padding: 12px 18px;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
}

.flipbook-bar button:hover,
.flipbook-link:hover{
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.flipbook-count{
    color: var(--gray);
}

.flipbook-current{
    color: var(--ink);
}

.flipbook-link{
    color: var(--gray);
    transition: color 0.2s ease;
}

.flipbook-link:hover{
    color: var(--ink);
}

/* A video sits in any image slot and is cropped to fit it, like an image.
   For a full-width video at its own proportions, use row--video instead. */
.row--video{
    grid-template-columns: 1fr;
}

.row--video video{
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
}

/* ---------- Text columns ---------- */

.project-copy{
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #000000;
}

.project-copy p{
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: 0.02em;
}

/* Links inside project copy (e.g. a photo credit) */
.project-copy a{
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.project-copy a:hover{
    color: var(--gray);
}

.project-copy .project-credit{
    color: var(--gray);
}

.project-copy .project-credit a{
    color: var(--ink);
}

.project-copy .project-credit a:hover{
    color: var(--gray);
}

/* Title block: title + meta (5px apart), then the tool pills (10px below) */
.project-heading{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-title-group{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.project-title{
    margin: 0;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ink);
}

.project-meta{
    margin: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: var(--ink);
}

.project-type{
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.project-star{
    font-size: 20px;
    line-height: 1;
}

.project-year{
    letter-spacing: 0.02em;
    color: var(--gray);
}

.project-tools{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.project-tools li{
    padding: 5px 10px;
    border: var(--rule-weight) solid var(--rule);
    border-radius: 80px;
    font-size: 15px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.06em;
    color: var(--ink);
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px){
    .project-title{
        font-size: 32px;
    }

    .project-copy p{
        font-size: 17px;
    }
}

@media (max-width: 820px){
    .project{
        padding-bottom: 64px;
    }

    .row--wide-left,
    .row--wide-right,
    .row--pair{
        grid-template-columns: minmax(0, 1fr);
    }

    /* Rows of three stay three across, just smaller */
    .row.row--trio,
    .row.row--reels{
        gap: 10px;
    }

    .row--trio img,
    .row--trio video,
    .row--reels video{
        border-radius: 10px;
    }

    .row--single img{
        aspect-ratio: 620 / 420;
    }

    /* A cropped video is unreadable at phone width — show the whole frame */
    .row--wide-left video,
    .row--wide-right video{
        aspect-ratio: auto;
        height: auto;
        object-fit: contain;
    }

    .row{
        gap: 24px;
    }

    .project-sections{
        gap: 40px;
    }

    .project-title{
        font-size: 28px;
    }

    .project-copy p{
        font-size: 16px;
    }
}

@media (max-width: 480px){
    .project-nav a,
    .project-meta,
    .section-label,
    .flipbook-bar{
        font-size: 12px;
    }

    .flipbook-label{
        display: none;   /* keeps the controls and the PDF link on one line */
    }

    .project-meta{
        gap: 12px;
    }

    .project-star{
        font-size: 16px;
    }

    .project-tools li{
        font-size: 13px;
        letter-spacing: 0.04em;
    }

    .project-title{
        font-size: 24px;
    }
}