/* ── projects 03–06 Category row (one reusable module) — projects/sections/03…06/brief.md ──
   Text column @ x 96: number 80 #fc898a · title 42 · coral rule 61×7 · tagline 26/37.5 · link 26.
   Photos: absolutely placed at their Figma coordinates via --x / --y / --w (design px, relative to the row).
   Per-row vertical rhythm differs slightly in Figma → set by the modifier classes below.
   Agreed normalisations: row 02 text 26px + coral rule + "view town houses"; "04" at 80px like 01–03; arrows grey. */

.pj-cat {
    --n: 72; --t: 27; --r: 30; --g: 35; --l: 24;   /* number top, then gaps: title, rule, tagline, link */
    min-height: calc(var(--h) * var(--u));
    padding: calc(var(--n) * var(--u)) 0 calc(60 * var(--u));
    background: var(--skin-canvas);
}
.pj-cat--apartments { --h: 525; --n: 72;  --t: 27; --r: 30; --g: 35; --l: 24; }
.pj-cat--townhouse  { --h: 530; --n: 63;  --t: 27; --r: 30; --g: 20; --l: 38; }
.pj-cat--aged       { --h: 477; --n: 51;  --t: 28; --r: 28; --g: 20; --l: 38; }
.pj-cat--houses     { --h: 833; --n: 225; --t: 27; --r: 23; --g: 35; --l: 22.5;
                      background: linear-gradient(rgba(153, 153, 153, .13), rgba(153, 153, 153, .13)), var(--skin-canvas); }

.pj-cat__num { font-size: var(--fs-display); line-height: 1; color: var(--pj-coral); }
.pj-cat__title { margin-top: calc(var(--t) * var(--u)); font-size: var(--fs-sub); font-weight: 400; line-height: 1; text-transform: lowercase; }
.pj-cat .pj-rule { margin-top: calc(var(--r) * var(--u)); }
.pj-cat__tagline { margin-top: calc(var(--g) * var(--u)); font-size: var(--fs-body); line-height: calc(37.5 / 26); text-transform: lowercase; }
.pj-cat__link {
    display: inline-block;
    margin-top: calc(var(--l) * var(--u));
    font-size: var(--fs-body);
    line-height: 1;
    text-transform: lowercase;
    transition: color .2s ease;
}
.pj-cat__link:hover { color: var(--pj-coral); }
.pj-cat--apartments .pj-cat__tagline, .pj-cat--apartments .pj-cat__link { color: var(--pj-text); }

.pj-cat__photos li {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
}
.pj-cat__photos img { position: static; display: block; width: 100%; height: auto; }

.pj-cat__arrow {
    position: absolute;
    z-index: 2;
    right: calc(47 * var(--u));
    top: calc(var(--y) * var(--u));
    font-size: clamp(32px, 3.255vw, 62.5px);
    line-height: 1;
    color: rgba(0, 0, 0, .46);
    transition: color .2s ease, translate .2s ease;
}
.pj-cat__arrow:hover { color: var(--pj-coral); translate: 6px 0; }

@media (max-width: 991.98px) {
    .pj-cat, .pj-cat--houses { min-height: 0; padding: 56px 0; }
    .pj-cat__title { margin-top: 12px; font-size: 30px; }
    .pj-cat .pj-rule { width: 48px; margin-top: 16px; }
    .pj-cat__tagline { margin-top: 18px; font-size: 18px; line-height: 1.45; }
    .pj-cat__link { margin-top: 14px; font-size: 17px; }
    .pj-cat__num { font-size: 56px; }
    .pj-cat__photos {
        position: relative;
        left: auto;
        translate: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: calc(100% - 2 * var(--skin-gutter));
        margin: 28px auto 0;
    }
    .pj-cat__photos li { position: static; width: auto; }
    .pj-cat__photos img { aspect-ratio: 4 / 3; object-fit: cover; }
    .pj-cat__arrow { top: 56px; right: var(--skin-gutter); font-size: 40px; }
}
@media (max-width: 575.98px) {
    .pj-cat__photos { grid-template-columns: 1fr; }
}