/* mahís — WORK · gallery grid
   Three per row, generous gap between cards, soft rounded corners on the
   thumbnail. Title + subtitle overlaid on the video (bottom), category
   chip top-left. Skill tags live below the thumbnail, on the cream
   background, always visible. Click thumbnail → detail. */

.gj{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(34px,4.4vw,64px) clamp(26px,3vw,46px);
  margin-top:clamp(14px,2.2vh,26px);}

.gj-card{display:flex;flex-direction:column;}

.gj-tile{container-type:inline-size;position:relative;overflow:hidden;background:var(--wash);
  aspect-ratio:16/9;cursor:pointer;border-radius:10px;}
.gj-tile .vthumb-mount iframe{transition:transform .7s cubic-bezier(.16,1,.3,1);}
.gj-tile:hover .vthumb-mount iframe{transform:translate(-50%,-50%) scale(1.045);}
.gj-grad{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(12,7,4,.82) 0%,rgba(12,7,4,.42) 30%,rgba(12,7,4,0) 60%);}
.gj-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;
  padding:clamp(12px,3.4cqi,22px);pointer-events:none;
  transform:translate(var(--tx,0),var(--ty,0));transition:transform .35s cubic-bezier(.16,1,.3,1);}
.gj-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;letter-spacing:-.03em;
  line-height:1.0;color:var(--gj-titlecolor,#FBF7F3);text-shadow:0 1px 14px rgba(0,0,0,.34);
  font-size:clamp(16px,4.6cqi,28px);}
html[data-gj-titlestyle="sans"]    .gj-title{font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:-.012em;}
html[data-gj-titlestyle="mono"]    .gj-title{font-family:'IBM Plex Mono',monospace;font-weight:500;text-transform:uppercase;letter-spacing:.4px;font-size:clamp(13px,3.4cqi,22px);}
html[data-gj-titlestyle="serif"]   .gj-title{font-family:'Lora',serif;font-style:italic;font-weight:400;}
.gj-sub{margin-top:4px;line-height:1.18;color:var(--gj-subcolor,#F2E6DA);
  text-shadow:0 1px 10px rgba(0,0,0,.4);font-size:clamp(11px,1.9cqi,14px);
  font-family:'DM Sans',sans-serif;font-weight:400;font-style:normal;letter-spacing:.005em;}
html[data-gj-substyle="mono"]    .gj-sub{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:1.3px;font-size:clamp(9px,1.5cqi,11.5px);}
html[data-gj-substyle="serif"]   .gj-sub{font-family:'Lora',serif;font-style:italic;}
html[data-gj-substyle="display"] .gj-sub{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.01em;}

.gj-cat-chip{position:absolute;top:11px;left:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:#F2E6DA;
  background:rgba(20,11,6,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  padding:4px 9px;border-radius:30px;}
.gj-cat-chip .d{width:5px;height:5px;border-radius:50%;background:var(--slash);}
.gj-play{position:absolute;top:11px;right:12px;z-index:3;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:8px;color:#FBF7F3;
  background:rgba(20,11,6,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  padding-left:2px;opacity:.9;transition:opacity .3s;}
.gj-tile:hover .gj-play{opacity:0;}

/* ── skill tags: below the thumbnail, on the cream ground, always visible ── */
.gj-skills-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;}
.gj-skills-row .wk-skill{color:var(--earth);opacity:.72;}

@media (max-width:980px){
  .gj{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .gj{grid-template-columns:1fr;gap:28px;}
}