/* Works page, on top of ../services/service.css */
.intro{padding:clamp(120px,13vw,170px) 0 28px}
.intro h1{font-size:clamp(34px,4.6vw,64px);font-weight:700;line-height:1.3;margin:0 0 12px}

.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.filters button{font:inherit;font-size:14.5px;font-weight:600;color:var(--dim);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-btn);padding:10px 16px;cursor:pointer;transition:transform .12s ease,background .2s,color .2s}
.filters button:hover{color:var(--txt)}
.filters button:active{transform:scale(.98)}
.filters button[aria-pressed="true"]{background:var(--p);border-color:var(--p);color:#fff}
.filters button:focus-visible,.card:focus-visible,.dlg button:focus-visible{outline:2px solid var(--pl);outline-offset:3px}

/* a repeating 2 + 3 rhythm; filtering rebuilds the DOM so the rhythm holds */
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:26px 16px;padding:18px 0 clamp(64px,8vw,112px)}
.card{grid-column:span 4;display:block;width:100%;padding:0;background:none;border:0;color:inherit;font:inherit;text-align:start;cursor:pointer}
.card:nth-child(5n+1){grid-column:span 7}
.card:nth-child(5n+2){grid-column:span 5}
.card .ph{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--card);height:clamp(190px,20vw,270px)}
.card:nth-child(5n+1) .ph,.card:nth-child(5n+2) .ph{height:clamp(240px,28vw,400px)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.03)}
.card:active .ph{transform:scale(.99)}
.card .ph.empty{display:grid;place-items:center;background:linear-gradient(150deg,var(--p),var(--pd) 70%,var(--card))}
.card .ph.empty svg{width:min(46%,220px);height:auto;opacity:.5}
.card .t{display:block;font-size:17px;font-weight:600;line-height:1.65;margin:12px 0 2px}
.card .ny{white-space:nowrap}
.card .m{display:block;color:var(--dim);font-size:14px;line-height:1.7}

/* detail dialog */
.dlg{width:min(1040px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg2);color:var(--txt);overflow:auto;overscroll-behavior:contain}
.dlg::backdrop{background:rgba(6,5,10,.8)}
html:has(.dlg[open]){overflow:hidden}
.dlg .x{position:sticky;top:12px;float:left;margin:12px 12px -66px;z-index:3;width:42px;height:42px;border-radius:var(--r-btn);border:1px solid var(--line);background:rgba(13,12,17,.8);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.strip-w{position:relative}
.strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--card)}
.strip::-webkit-scrollbar{display:none}
.strip img{flex:0 0 100%;width:100%;height:clamp(240px,52vh,540px);object-fit:cover;scroll-snap-align:start}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:var(--r-btn);border:1px solid var(--line);background:rgba(13,12,17,.75);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.nav:active{transform:translateY(-50%) scale(.98)}
.nav.next{left:12px}.nav.prev{right:12px}
.nav:disabled{opacity:.3;cursor:default}
.body{padding:clamp(22px,3vw,38px)}
.body h2{font-size:clamp(23px,2.4vw,32px);font-weight:700;line-height:1.5;margin:0 0 4px;padding-inline-end:56px}
.body .m{color:var(--pl);font-size:15px;margin:0 0 16px}
.body .b{margin:0 0 22px;max-width:65ch}
.nums{display:flex;flex-wrap:wrap;gap:12px 36px;margin:0 0 24px}
.nums div{min-width:110px}
.nums dt{color:var(--dim);font-size:13.5px}
.nums dd{margin:0;font-size:20px;font-weight:700;line-height:1.5}
.body h3{font-size:16px;font-weight:600;margin:0 0 8px}
.body ul{margin:0;padding-inline-start:20px;color:var(--dim);font-size:15px}

/* close the rhythm when a filtered list ends mid-row */
@media (min-width:761px){
  .card:last-child:nth-child(5n+1){grid-column:span 12}
  .card:nth-last-child(2):nth-child(5n+3),.card:last-child:nth-child(5n+4){grid-column:span 6}
}

@media (max-width:760px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .card,.card:nth-child(5n+1),.card:nth-child(5n+2){grid-column:span 1}
  .card:nth-child(5n+1){grid-column:span 2}
  .card .ph,.card:nth-child(5n+2) .ph{height:34vw;min-height:120px}
  .card:nth-child(5n+1) .ph{height:58vw}
  .card:last-child:nth-child(5n+4){grid-column:span 2}
  .card .t{font-size:15.5px}
  .card .m{font-size:13.5px}
  .filters button{padding:9px 13px;font-size:14px}
  .strip img{height:58vw;min-height:220px}
}