/* Work page: category chips, then a grid of works, 4 across. Each card turns over under the pointer: the image on the front,
   and on the back the project's name and category on red with an arrow. Touch screens have no pointer, so there the card
   stays on its image and the name shows under it. Built from js/data/projects.js by js/sections/work-page.js. */
.wp-sec{padding-top:24px;padding-bottom:72px}
.wp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1280px;margin-inline:auto}
.wp-card a{display:block;text-decoration:none;color:inherit}
.wp-flip{perspective:1400px;aspect-ratio:4/3}
.wp-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s var(--ease-out)}
.wp-face{position:absolute;inset:0;border-radius:var(--r-20);overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.wp-img{background:var(--mist);border:1px solid var(--line)}
.wp-img img{width:100%;height:100%;object-fit:cover;display:block}
.wp-img.ph1{background:radial-gradient(70% 80% at 70% 30%,var(--ph-video-1),transparent 70%),linear-gradient(140deg,var(--ph-video-2),var(--ph-video-3))}
.wp-img.ph2{background:radial-gradient(70% 80% at 30% 70%,var(--ph-video-1),transparent 70%),linear-gradient(220deg,var(--ph-video-2),var(--ph-video-3))}
.wp-back{transform:rotateY(180deg);background:var(--red);color:var(--white);display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.wp-back small{font-size:var(--fs-15);color:var(--white-a85)}
.wp-back b{margin-top:6px;font-size:var(--fs-26);line-height:1.3;font-weight:var(--fw-bold)}
.wp-go{position:absolute;top:18px;inset-inline-start:18px;width:40px;height:40px;border-radius:var(--r-14);background:var(--white);color:var(--red-press);display:grid;place-items:center}
.wp-cap{display:none}
@media (hover:hover) and (pointer:fine){.wp-card a:hover .wp-in{transform:rotateY(180deg)}}
.wp-card a:focus-visible .wp-in{transform:rotateY(180deg)}
.wp-card a:focus-visible{outline:none}
.wp-card a:focus-visible .wp-back{box-shadow:var(--ring-focus)}

/* no pointer to hover with: no turning, the name sits under the image */
@media (hover:none){
  .wp-in{transform:none!important}.wp-back{display:none}
  .wp-cap{display:block;margin-top:16px}
  .wp-cap h3{font-size:var(--fs-19);font-weight:var(--fw-bold);color:var(--head);line-height:1.35}
  .wp-cap small{display:block;margin-top:4px;font-size:var(--fs-15);color:var(--red-on-dark)}
}
@media (max-width:1200px){.wp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.wp-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}}
@media (max-width:760px){.wp-grid{grid-template-columns:1fr;gap:32px;max-width:420px}}
@media (prefers-reduced-motion:reduce){.wp-in{transition:none}}