/* Visual Archives — filter tabs, tile chips, hover frame (loaded after css/style.css) */

.arc-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.arc-tab{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;border:1px solid var(--border);border-radius:2px;background:transparent;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--muted);
  cursor:pointer;transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.arc-tab:hover{color:var(--text);border-color:var(--red)}
.arc-tab.is-active{color:#fff;background:var(--red);border-color:var(--red)}
.arc-tab__n{font-size:10px;letter-spacing:.08em;opacity:.7;font-weight:500}
.arc-tab.is-active .arc-tab__n{opacity:.9}
.arc-meta{margin-bottom:26px}

/* tiles */
.arc{cursor:zoom-in;transition:border-color .35s var(--ease),box-shadow .35s var(--ease),opacity .35s var(--ease)}
.arc::after{ /* red accent bar that grows on hover */
  content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--red);z-index:3;
  transition:width .5s var(--ease);
}
.arc:hover,.arc:focus-visible{border-color:var(--red);box-shadow:0 18px 40px -22px rgba(227,27,35,.55)}
.arc:hover::after,.arc:focus-visible::after{width:100%}
.arc img{background:#0B0D0F}
.arc .gal__ov{background:linear-gradient(180deg,rgba(8,10,12,.1) 0%,rgba(8,10,12,.72) 45%,rgba(8,10,12,.96) 100%)}
.arc .gal__cap{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}

.arc__chip{
  position:absolute;left:12px;top:12px;z-index:2;max-width:calc(100% - 24px);
  padding:6px 10px;border-radius:2px;background:rgba(8,10,12,.78);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-left:2px solid var(--red);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .3s var(--ease);
}
.arc__dot{color:var(--red-bright);margin:0 2px}
.arc:hover .arc__chip{opacity:0}

.arc.is-hidden{display:none}
.arc.is-enter{animation:arcIn .45s var(--ease) both}
@keyframes arcIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (max-width:720px){
  .arc-tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px 4px;scrollbar-width:none}
  .arc-tabs::-webkit-scrollbar{display:none}
  .arc-tab{flex:none;padding:10px 14px}
  /* no hover on touch: show a short caption strip under the chip */
  .arc .gal__ov{opacity:1;background:linear-gradient(180deg,rgba(8,10,12,0) 55%,rgba(8,10,12,.92) 100%);padding:14px}
  .arc .gal__cap{-webkit-line-clamp:2;font-size:12px}
  .arc .gal__view{display:none}
  .arc:hover .arc__chip{opacity:1}
}
@media (prefers-reduced-motion:reduce){.arc.is-enter{animation:none}}