/* site/css/work.css — the Work chapter (root #work): domain filters and the bento of nine cards (lane L2).
   Tokens only (site/styles.css). Six columns: the four case studies span 3, the short cases span 2, and the
   trailing short cases (.wide, set in work.js) turn wide (plate beside the text) so the last row is full. A filtered grid is a uniform
   auto-fill. 768 px: two columns; 390 px: one column with compact horizontal short cases (the page stays ≤ 14 screens).
   The card is one stretched link (.pc-h a::after); the live / store link sits above it (z-index 2). */
#work .projects{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
#work .pcard{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid transparent;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .3s}
#work .pcard.full{grid-column:span 3}
#work .pcard.lite{grid-column:span 2}
#work .pcard[hidden]{display:none}
/* the trailing wide short cases (.wide) */
#work .pcard.lite.wide{grid-column:span 3;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
#work .pcard.lite.wide .pc-media{aspect-ratio:auto;height:100%;min-height:200px;border-bottom:0;border-inline-end:1px solid var(--line)}
#work .pcard.lite.wide .pc-media .pl{display:none}#work .pcard.lite.wide .pc-media .pp{display:block}
/* filtered: uniform */
#work .projects.filtered{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
#work .projects.filtered .pcard,#work .projects.filtered .pcard.lite.wide{grid-column:auto;display:flex}
#work .projects.filtered .pcard .pc-media{aspect-ratio:16/10;height:auto;min-height:0;border-bottom:1px solid var(--hair2);border-inline-end:0}
#work .projects.filtered .pcard .pc-media .pl{display:block}#work .projects.filtered .pcard .pc-media .pp{display:none}
/* hover, focus */
@media (pointer:fine){
  #work .pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
  #work .pcard:hover .pc-media img{transform:scale(1.035)}
}
#work .pcard:has(.pc-h a:focus-visible){outline:2px solid var(--now);outline-offset:3px}
/* the plate */
#work .pc-media{position:relative;aspect-ratio:16/10;background:#0B0F17;overflow:hidden;border-bottom:1px solid var(--line)}
#work .pc-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
#work .pc-media .pp{display:none}  /* the portrait plate, shown only where the box is tall (below) */
#work .pc-shots{position:absolute;inset-inline-start:12px;bottom:10px;font-size:10.5px;letter-spacing:.06em;padding:3px 9px;border-radius:99px;background:rgba(11,15,23,.72);color:var(--onDarkDim);border:1px solid rgba(255,252,246,.14);backdrop-filter:blur(6px)}
/* the body */
#work .pc-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1;min-width:0}
#work .pc-meta{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:0;font-size:12px;font-weight:500;color:var(--faint)}
#work .pc-k{letter-spacing:.01em}
html[lang="ar"] #work .pc-meta{font-family:var(--f-body);font-size:12.5px}
html[lang="ar"] #work .pc-k{letter-spacing:0;text-transform:none}
#work .pc-h{font-size:21px;font-weight:700;line-height:1.25;margin:2px 0 0;letter-spacing:-.01em}
#work .pcard.full .pc-h{font-size:26px;font-weight:800}
html[lang="ar"] #work .pc-h{letter-spacing:0;line-height:1.4}
#work .pc-h a{text-decoration:none;color:var(--ink)}
#work .pc-h a::after{content:"";position:absolute;inset:0;z-index:1}
#work .pc-h a:focus-visible{outline:none}
#work .pc-s{font-size:14.5px;line-height:1.65;color:var(--dim);margin:0}
#work .pc-kpi{display:flex;flex-wrap:wrap;gap:8px 24px;margin:8px 0 0}
#work .pc-kpi span{display:grid;gap:2px;min-width:0}
#work .pc-kpi b{font-size:22px;line-height:1.1;color:var(--ink);white-space:nowrap}
#work .pc-kpi span:first-child b{color:var(--now-t)}
#work .pcard.full .pc-kpi b{font-size:26px}
#work .pc-kpi small{font-size:11.5px;line-height:1.35;color:var(--faint)}
/* what was built, for a card without numbers */
#work .pc-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0}
#work .pc-tags li{font-size:12px;font-weight:500;line-height:1.35;padding:4px 11px;border-radius:999px;background:var(--sunk);color:var(--dim)}
#work .pc-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#work .pc-go{display:inline-flex;gap:6px;align-items:center;font-size:13.5px;font-weight:600;color:var(--now-t)}
#work .pc-go i{font-style:normal;transition:transform .3s var(--ease)}
@media (pointer:fine){#work .pcard:hover .pc-go i{transform:translateX(3px)}html[dir="rtl"] #work .pcard:hover .pc-go i{transform:translateX(-3px)}}
#work .plink{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:12px;color:var(--dim);font-family:var(--f-mono);transition:border-color .2s,color .2s}
#work .plink:hover{border-color:var(--now);color:var(--ink)}
#work .plink i{font-style:normal;color:var(--now-t)}
#work .pnolink{font-size:12px;color:var(--faint)}
#work .filters button .cnt{font-size:10.5px}

/* ============ 768 — two columns ============ */
@media (max-width:999px){
  #work .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
  #work .pcard.full,#work .pcard.lite,#work .pcard.lite.wide{grid-column:span 1;display:flex}
  #work .pcard.lite.wide .pc-media{aspect-ratio:16/10;height:auto;min-height:0;border-bottom:1px solid var(--hair2);border-inline-end:0}
  #work .pcard.lite.wide .pc-media .pl{display:block}#work .pcard.lite.wide .pc-media .pp{display:none}
  #work .pcard.lite:last-child:nth-child(odd){grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #work .pcard.lite:last-child:nth-child(odd) .pc-media{aspect-ratio:auto;height:100%;min-height:200px;border-bottom:0;border-inline-end:1px solid var(--hair2)}
  #work .pcard.lite:last-child:nth-child(odd) .pc-media .pl{display:none}#work .pcard.lite:last-child:nth-child(odd) .pc-media .pp{display:block}
  #work .pcard.full .pc-h{font-size:24px}
}

/* ============ 390 — one column; short cases compact and horizontal ============ */
@media (max-width:639px){
  #work .projects{grid-template-columns:minmax(0,1fr);gap:14px}
  #work .pcard.lite:last-child:nth-child(odd){grid-column:span 1}
  #work .pcard.lite,#work .pcard.lite:last-child:nth-child(odd),#work .pcard.lite.wide{display:grid;grid-template-columns:38% minmax(0,1fr)}
  #work .pcard.lite .pc-media,#work .pcard.lite:last-child:nth-child(odd) .pc-media{aspect-ratio:auto;height:100%;min-height:112px;border-bottom:0;border-inline-end:1px solid var(--hair2)}
  #work .pcard.lite .pc-media .pl,#work .pcard.lite:last-child:nth-child(odd) .pc-media .pl{display:none}#work .pcard.lite .pc-media .pp,#work .pcard.lite:last-child:nth-child(odd) .pc-media .pp{display:block}
  #work .pcard.lite .pc-media img{object-position:70% 50%}#work .pcard.lite .pc-media .pp{object-position:50% 50%}
  #work .projects:not(.filtered) .pcard.lite.wide .pc-media{aspect-ratio:auto;height:100%;min-height:112px;border-bottom:0;border-inline-end:1px solid var(--hair2)}  /* the trailing wide cards stack like the other lite cards here, so they take the same tall box */
  #work .projects:not(.filtered) .pcard.lite.wide .pc-media .pl{display:none}#work .projects:not(.filtered) .pcard.lite.wide .pc-media .pp{display:block}
  #work .pcard.lite .pc-shots{display:none}
  #work .pcard.lite .pc-body{padding:10px 12px;gap:3px}
  #work .pcard.lite .pc-h{font-size:17px}
  #work .pcard.lite .pc-s{font-size:12.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #work .pcard.lite .pc-kpi,#work .pcard.lite .pc-k,#work .pcard.lite .pc-tags{display:none}
  #work .pcard.lite .pc-foot{padding-top:6px}
  #work .pcard.full .pc-body{padding:14px 16px 16px;gap:6px}
  #work .pcard.full .pc-k{display:none}
  #work .pcard.full .pc-h{font-size:22px}
  #work .pcard.full .pc-s{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px}
  #work .pcard.full .pc-kpi{margin-top:2px;gap:6px 20px}
  #work .pcard.full .pc-kpi b{font-size:20px}
  #work .filters button .cnt{display:none}
}