/*
 * MAJIFO Toolkit, module "works-grid": the Works page filter and project grid (approved board prototypes/works-page.html).
 * Named exception to Elementor native styles: only the markup made by this module is styled here; the section and the
 * title are Elementor classes (mj-works, mj-works__title).
 * Tokens: text #F5F5F5, subtle #8F8F8F, grey #6B6B6B, surface #141414; reveal cubic-bezier(.16,1,.3,1), in-out cubic-bezier(.76,0,.24,1).
 */
.mj-wg-count{font:400 clamp(12px,1vw,14px)/1 "JetBrains Mono",monospace;letter-spacing:.04em;color:#8F8F8F;vertical-align:top;margin-left:.15em;position:relative;top:.9em}

/* filter (filter.md option B), centred in the container (Majid) */
.mj-wg-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font-family:"Sora",sans-serif;font-size:24px;letter-spacing:-.01em}
.mj-wg-filter button,.mj-wg-filter button:hover,.mj-wg-filter button:focus{background:none;border:0;border-radius:0;padding:4px 0;margin:0;cursor:pointer;font:inherit;letter-spacing:inherit;color:#6B6B6B;transition:color 200ms cubic-bezier(.2,0,0,1)}   /* beats the theme's button styles */
.mj-wg-filter button:hover,.mj-wg-filter button[aria-pressed="true"]{color:#F5F5F5}
.mj-wg-filter button:focus-visible{outline:1px solid #F5F5F5;outline-offset:6px}
.mj-wg-filter sup{font-family:"JetBrains Mono",monospace;font-size:11px;margin-left:4px;vertical-align:super;line-height:0}

/* grid: two columns, every thumbnail 16:9 */
.mj-wg{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,48px);row-gap:clamp(56px,7vw,112px);transition:opacity 200ms}
.mj-wg.is-out{opacity:0}
.mj-wg__card,.mj-wg__card:visited,.mj-wg__card:hover,.mj-wg__card:active{display:block;min-width:0;color:#F5F5F5;text-decoration:none}   /* beats the theme reset's link colours */
.mj-wg__card[hidden]{display:none}
.mj-wg__frame{display:block;overflow:hidden;aspect-ratio:16/9;background:#141414}
.mj-wg__frame img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 1000ms cubic-bezier(.16,1,.3,1)}
.mj-wg__card:hover .mj-wg__frame img,.mj-wg__card:focus-visible .mj-wg__frame img{transform:scale(1.03)}
.mj-wg__cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:14px}
.mj-wg__name{font-family:"Sora",sans-serif;font-size:20px;line-height:1.25;letter-spacing:-.01em}
.mj-wg__year{font-size:14px;color:#8F8F8F;transition:color 200ms}
.mj-wg__card:hover .mj-wg__year,.mj-wg__card:focus-visible .mj-wg__year{color:#F5F5F5}
.mj-wg__story{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:15px;line-height:1.5;color:#8F8F8F;max-width:60ch}
.mj-wg__card:focus-visible{outline:1px solid #F5F5F5;outline-offset:8px}

/* the name's letters roll one after another on hover, like the menu links */
.mj-wg__ch{display:inline-block;overflow:hidden;height:1.25em;vertical-align:top}
.mj-wg__ch>span{display:block;height:1.25em;transition:transform 500ms cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--i) * 18ms)}
.mj-wg--roll .mj-wg__card:hover .mj-wg__ch>span,.mj-wg--roll .mj-wg__card:focus-visible .mj-wg__ch>span{transform:translateY(-100%)}

/* enter: the thumbnail opens through a horizontal slit (the Next project cut), the caption follows (only with the script) */
.mj-wg--reveal.is-js .mj-wg__frame{clip-path:inset(50% 0 50% 0);transition:clip-path 1000ms cubic-bezier(.76,0,.24,1);transition-delay:var(--d,0ms)}
.mj-wg--reveal.is-js .mj-wg__card.is-in .mj-wg__frame{clip-path:inset(0 0 0 0)}
.mj-wg--reveal.is-js :is(.mj-wg__cap,.mj-wg__story){opacity:0;transform:translateY(8px);transition:opacity 600ms cubic-bezier(.16,1,.3,1),transform 600ms cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d,0ms) + 450ms)}
.mj-wg--reveal.is-js .mj-wg__card.is-in :is(.mj-wg__cap,.mj-wg__story){opacity:1;transform:none}

@media (max-width:767px){
  .mj-wg{grid-template-columns:1fr;row-gap:56px}
  .mj-wg-filter{font-size:20px;gap:6px 20px}
}
@media (prefers-reduced-motion:reduce){
  .mj-wg,.mj-wg__frame,.mj-wg__frame img,.mj-wg__ch>span,.mj-wg__cap,.mj-wg__story{transition:none!important}
  .mj-wg--reveal.is-js .mj-wg__frame{clip-path:none}
  .mj-wg--reveal.is-js :is(.mj-wg__cap,.mj-wg__story){opacity:1;transform:none}
}