.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.filters button{
  font-family:var(--display);font-weight:500;font-size:.93rem;
  padding:.62em 1.25em;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;transition:.22s ease;position:relative;
}
.filters button:hover{border-color:var(--blue);color:var(--blue)}
.filters button.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--shadow-sm)}
.filters button .c{opacity:.6;font-weight:600;margin-left:.4em;font-size:.82em}

#gallery{column-count:4;column-gap:16px}
.gitem{
  break-inside:avoid;margin-bottom:16px;border-radius:14px;overflow:hidden;position:relative;
  cursor:pointer;background:var(--mist);box-shadow:var(--shadow-sm);transition:transform .3s ease;
}
.gitem img{width:100%;height:auto;transition:transform .6s ease;background:var(--mist)}
.gitem:hover{transform:translateY(-4px)}
.gitem:hover img{transform:scale(1.06)}
.gitem .cap{
  position:absolute;inset:auto 0 0 0;padding:30px 14px 13px;
  background:linear-gradient(transparent,rgba(10,37,64,.82));
  color:#fff;font-family:var(--display);font-weight:500;font-size:.88rem;
  opacity:0;transform:translateY(10px);transition:.3s ease;
}
.gitem:hover .cap{opacity:1;transform:translateY(0)}
.gitem .cap small{display:block;font-family:var(--body);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--sky);margin-bottom:2px}

/* show-more */
.more-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:30px}
.more-count{font-family:var(--display);font-size:.86rem;color:var(--muted)}
#showMore{align-items:center}
#showMore svg{width:18px;height:18px;transition:transform .25s ease}
#showMore:hover svg{transform:translateY(2px)}
.more-wrap.done #showMore{display:none}

@media (max-width:980px){ #gallery{column-count:3} }
/* on phones keep 2 columns (shorter than 1) + tap shows the caption */
@media (max-width:760px){
  #gallery{column-count:2;column-gap:12px}
  .gitem{margin-bottom:12px}
  .gitem .cap{opacity:1;transform:none;padding:22px 10px 10px;font-size:.78rem}
  .gitem .cap small{font-size:.62rem}
}
@media (max-width:380px){ #gallery{column-count:2;column-gap:10px} }