/*
 * MAJIFO Toolkit, module "work-index": Home Selected work (pattern 2 "Work as an index", approved board
 * prototypes/selected-work-index.html). Named exception to Elementor native styles: only the list is styled here;
 * the section, title and link are Elementor classes (mj-work, mj-title--outline).
 * Tokens 2.0.1: text #F5F5F5, muted #B3B3B3, subtle #8F8F8F, grey #6B6B6B, border #2E2E2E, surface #141414, in-out cubic-bezier(.76,0,.24,1).
 */
.mj-wi{--wi-ease:cubic-bezier(.76,0,.24,1);--wi-reveal:cubic-bezier(.16,1,.3,1)}
.mj-wi a,.mj-wi a:visited,.mj-wi a:hover,.mj-wi a:active{text-decoration:none;color:#F5F5F5}   /* beats the theme reset's link colours (a:hover / a:active #336) */

/* index (desktop with a mouse, 768 px and wider) */
.mj-wi__index{display:none;position:relative;z-index:1;border-top:1px solid #2E2E2E}
.mj-wi__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 32px;align-items:baseline;padding:clamp(18px,2.2vw,28px) 0;border-bottom:1px solid #2E2E2E;transition:color 400ms var(--wi-ease)}
.mj-wi__index:hover .mj-wi__row{color:#6B6B6B}
.mj-wi__index .mj-wi__row:hover,.mj-wi__index .mj-wi__row:focus-visible{color:#F5F5F5;outline:none}
.mj-wi__name{font-family:"Sora",sans-serif;font-weight:400;font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.02em;transition:transform 400ms var(--wi-ease)}
.mj-wi__row:hover .mj-wi__name,.mj-wi__row:focus-visible .mj-wi__name{transform:translateX(16px)}
.mj-wi__svc{font:400 12px/1.6 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:inherit}
.mj-wi__index .mj-wi__svc{grid-column:2;grid-row:1 / span 2;align-self:start;padding-top:.6em;max-width:24ch;text-align:right}
.mj-wi__descw{grid-column:1;display:grid;grid-template-rows:1fr}
.mj-wi__desc{min-height:0;overflow:hidden;padding-top:8px;font-size:16px;line-height:1.5;color:#8F8F8F;max-width:52ch}
/* descriptions open on hover (setting): closed they take no space */
.mj-wi--hover-desc .mj-wi__descw{grid-template-rows:0fr;transition:grid-template-rows 400ms var(--wi-ease)}
.mj-wi--hover-desc .mj-wi__desc{opacity:0;transform:translateY(6px);transition:opacity 400ms var(--wi-ease),transform 400ms var(--wi-ease)}
.mj-wi--hover-desc .mj-wi__row:hover .mj-wi__descw,.mj-wi--hover-desc .mj-wi__row:focus-visible .mj-wi__descw{grid-template-rows:1fr}
.mj-wi--hover-desc .mj-wi__row:hover .mj-wi__desc,.mj-wi--hover-desc .mj-wi__row:focus-visible .mj-wi__desc{opacity:1;transform:translate(16px,0);color:#B3B3B3}

/* the preview opens through a horizontal cut, above the row lines, in the lane beside the text */
.mj-wi__peek{position:fixed;left:0;top:0;width:clamp(300px,28vw,480px);aspect-ratio:16/10;pointer-events:none;z-index:2;background:#141414 center/cover no-repeat;clip-path:inset(50% 0 50% 0);transition:clip-path 400ms cubic-bezier(.76,0,.24,1);will-change:transform}
.mj-wi--medium + .mj-wi__peek{width:clamp(260px,24vw,380px)}
.mj-wi--xlarge + .mj-wi__peek{width:clamp(340px,32vw,560px)}
.mj-wi__peek.on{clip-path:inset(0 0 0 0)}

/* grid (touch screens and narrow windows): asymmetric 7 / 5, then 5 / 7 */
.mj-wi__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,40px) 24px;border-top:1px solid #2E2E2E;padding-top:40px}
.mj-wi__card{display:flex;flex-direction:column;gap:12px}
.mj-wi__card:nth-child(4n+1),.mj-wi__card:nth-child(4n+4){grid-column:span 7}
.mj-wi__card:nth-child(4n+2),.mj-wi__card:nth-child(4n+3){grid-column:span 5;margin-top:clamp(0px,6vw,96px)}
.mj-wi__img{display:block;aspect-ratio:16/10;overflow:hidden;background:#141414}
.mj-wi__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 800ms var(--wi-reveal)}
.mj-wi__card:hover .mj-wi__img img{transform:scale(1.03)}
.mj-wi__t{font-family:"Sora",sans-serif;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.015em;line-height:1.2}
.mj-wi__d{font-size:15px;line-height:1.5;color:#B3B3B3;max-width:52ch}
.mj-wi__card .mj-wi__svc{color:#8F8F8F}
@media (max-width:767px){.mj-wi__grid{row-gap:64px}.mj-wi__card:nth-child(n){grid-column:1 / -1;margin-top:0}.mj-wi__grid .mj-wi__more{margin-top:-24px}}   /* phones: clear space between projects */

/* "All projects": a slightly grey last row / tile, so it reads as the way out, not as another project */
/* like the other rows; grey text until hovered, then white on a grey band inside the container (no image preview).
   On hover the name moves 16 px right and the count 16 px left, so both clear the band's edges */
.mj-wi__index .mj-wi__more,.mj-wi__index:hover .mj-wi__more{color:#6B6B6B;transition:background 400ms var(--wi-ease),color 400ms var(--wi-ease)}
.mj-wi__index .mj-wi__more:hover,.mj-wi__index .mj-wi__more:focus-visible{color:#F5F5F5;background:#141414}
.mj-wi__index .mj-wi__more .mj-wi__svc{transition:transform 400ms var(--wi-ease)}
/* at hover the side space equals the row's top and bottom padding */
.mj-wi__index .mj-wi__more{--wi-pad:clamp(18px,2.2vw,28px)}
.mj-wi__index .mj-wi__more:hover .mj-wi__name,.mj-wi__index .mj-wi__more:focus-visible .mj-wi__name{transform:translateX(var(--wi-pad))}
.mj-wi__index .mj-wi__more:hover .mj-wi__svc,.mj-wi__index .mj-wi__more:focus-visible .mj-wi__svc{transform:translateX(calc(var(--wi-pad) * -1))}
.mj-wi__more .mj-wi__name{display:inline-flex;align-items:baseline;gap:.35em}
.mj-wi__arrow{display:inline-block;transition:transform 400ms var(--wi-ease)}
.mj-wi__more:hover .mj-wi__arrow{transform:translateX(8px)}
.mj-wi__index .mj-wi__more .mj-wi__svc{grid-row:1}
.mj-wi__grid .mj-wi__more{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:baseline;gap:16px;padding:28px 0;border-top:1px solid #2E2E2E;border-bottom:1px solid #2E2E2E;margin-top:0}
.mj-wi .mj-wi__grid .mj-wi__more,.mj-wi .mj-wi__grid .mj-wi__more .mj-wi__svc{color:#8F8F8F}
.mj-wi .mj-wi__grid .mj-wi__more:active{color:#F5F5F5;background:#141414}
.mj-wi__grid .mj-wi__more .mj-wi__t{font-size:clamp(26px,6vw,32px)}

/* one view per device */
@media (hover:hover) and (pointer:fine) and (min-width:768px){.mj-wi__index{display:block}.mj-wi__grid{display:none}}
@media (prefers-reduced-motion:reduce){.mj-wi__peek,.mj-wi__name,.mj-wi__img img,.mj-wi__descw,.mj-wi__desc{transition:none}}