/* Arbah v3 — Site-photos surface (PhotosV3Surface.js).
   Only the bits the shared v3 primitives can't express: the photo card's
   image fill + gradient caption, the hover-overlay controls (cover /
   visibility / delete), the badges, the day-group header rule, and the
   filter row. EVERY rule is scoped under `.av3` so the legacy + v2 themes
   are byte-unchanged. Tokens are the shipped `--arbah-*` set. */

/* ── Filter toolbar (Projects / Phases / Dates buttons + search) ─────── */
.av3 .av3-photo-filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1; min-width:0; }

/* Each filter button is the anchor for its dropdown menu. */
.av3 .av3-photo-filter { position:relative; flex-shrink:0; }
.av3 .av3-photo-filter .btn-secondary.is-active {
  border-color:var(--arbah-navy-500); color:var(--arbah-navy-700);
  background:var(--arbah-navy-100);
}

/* Dropdown menu (project / date pickers, phases needs-data) */
.av3 .av3-photo-menu {
  position:absolute; inset-block-start:calc(100% + 6px); inset-inline-start:0;
  z-index:30; min-width:200px; max-width:280px; max-height:320px; overflow-y:auto;
  padding:6px; border:1px solid var(--arbah-border-strong); border-radius:var(--r-10);
  background:var(--arbah-surface);
  box-shadow:var(--shadow-card-lg, 0 12px 32px rgba(10,27,46,.16));
}
.av3 .av3-photo-menu-item {
  display:block; width:100%; text-align:start; cursor:pointer;
  padding:8px 11px; border:none; border-radius:var(--r-6); background:transparent;
  font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--arbah-ink);
}
[dir="rtl"] .av3 .av3-photo-menu-item { font-family:var(--font-sans-ar); }
.av3 .av3-photo-menu-item:hover { background:var(--arbah-surface-sunken); }
.av3 .av3-photo-menu-item.on { background:var(--arbah-navy-100); color:var(--arbah-navy-700); font-weight:600; }
html[data-color-scheme="dark"] .av3 .av3-photo-filter .btn-secondary.is-active,
html[data-color-scheme="dark"] .av3 .av3-photo-menu-item.on { color:var(--arbah-ink); }
.av3 .av3-photo-menu-empty { padding:10px 11px; }

/* Free-text search */
.av3 .av3-photo-search {
  flex:1; min-width:200px; min-height:40px; padding:9px 14px;
  border:1px solid var(--arbah-border-strong); border-radius:var(--r-8);
  background:var(--arbah-surface); color:var(--arbah-ink);
  font-family:var(--font-sans); font-size:13px;
}
[dir="rtl"] .av3 .av3-photo-search { font-family:var(--font-sans-ar); }
.av3 .av3-photo-search:focus { outline:none; border-color:var(--arbah-navy-500); }
.av3 .av3-photo-search::placeholder { color:var(--arbah-ink-subtle); }

/* ── Day group header ───────────────────────────────────────────────── */
.av3 .av3-photo-day { display:flex; flex-direction:column; gap:12px; }
.av3 .av3-photo-dayhead { display:flex; align-items:center; gap:12px; }
.av3 .av3-photo-daylabel {
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  font-weight:700; text-transform:uppercase; color:var(--arbah-ink-subtle);
  white-space:nowrap;
}
.av3 .av3-photo-dayrule { flex:1; height:1px; background:var(--arbah-border); }

/* ── Photo card ─────────────────────────────────────────────────────── */
.av3 .av3-photo-card { overflow:hidden; cursor:pointer; transition:box-shadow .15s ease; }
.av3 .av3-photo-card:hover { box-shadow:var(--shadow-card-lg, 0 8px 28px rgba(10,27,46,.14)); }
.av3 .av3-photo-card:focus-visible { outline:2px solid var(--arbah-navy-500); outline-offset:2px; }

.av3 .av3-photo-thumb {
  position:relative; aspect-ratio:4 / 3; background:var(--arbah-surface-sunken);
  overflow:hidden;
}
.av3 .av3-photo-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .25s ease;
}
.av3 .av3-photo-card:hover .av3-photo-thumb img { transform:scale(1.04); }

/* Badges (cover / hidden) — always visible, top-start corner */
.av3 .av3-photo-badges {
  position:absolute; inset-block-start:8px; inset-inline-start:8px;
  display:flex; gap:6px; flex-wrap:wrap; z-index:2;
}
.av3 .av3-photo-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-sans); font-size:10.5px; font-weight:600;
  padding:3px 7px; border-radius:var(--r-6); color:#fff;
  backdrop-filter:saturate(140%) blur(2px);
}
[dir="rtl"] .av3 .av3-photo-badge { font-family:var(--font-sans-ar); }
.av3 .av3-photo-badge.is-cover { background:var(--arbah-bronze-500); }
.av3 .av3-photo-badge.is-hidden { background:rgba(10,27,46,.78); }

/* Unread-comments dot — top-end corner */
.av3 .av3-photo-unread {
  position:absolute; inset-block-start:8px; inset-inline-end:8px; z-index:2;
  width:11px; height:11px; border-radius:50%;
  background:var(--arbah-danger); box-shadow:0 0 0 2px var(--arbah-surface);
  pointer-events:none;
}

/* Hover action overlay (cover / visibility / delete) — bottom-end */
.av3 .av3-photo-actions {
  position:absolute; inset-block-end:8px; inset-inline-end:8px; z-index:2;
  display:flex; gap:6px; opacity:0; transition:opacity .15s ease;
}
.av3 .av3-photo-card:hover .av3-photo-actions,
.av3 .av3-photo-card:focus-within .av3-photo-actions { opacity:1; }
.av3 .av3-photo-act {
  width:28px; height:28px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,27,46,.62); color:#fff; backdrop-filter:blur(2px);
}
.av3 .av3-photo-act:hover { background:rgba(10,27,46,.85); }
.av3 .av3-photo-act.on { background:var(--arbah-bronze-500); }
.av3 .av3-photo-act.on:hover { background:var(--arbah-bronze-700); }
.av3 .av3-photo-act.off { background:rgba(10,27,46,.85); }
.av3 .av3-photo-act.danger:hover { background:var(--arbah-danger); }
/* Touch devices have no hover — keep the controls reachable. */
@media (hover:none) {
  .av3 .av3-photo-actions { opacity:1; }
}

/* Meta footer (caption + project chip + uploader + date) */
.av3 .av3-photo-meta { padding:11px 12px 12px; display:flex; flex-direction:column; gap:9px; }
.av3 .av3-photo-cap {
  font-family:var(--font-sans); font-size:13.5px; font-weight:600;
  color:var(--arbah-ink); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
[dir="rtl"] .av3 .av3-photo-cap { font-family:var(--font-sans-ar); }
.av3 .av3-photo-foot { display:flex; align-items:center; gap:8px; }
.av3 .av3-photo-date { margin-inline-start:auto; color:var(--arbah-ink-subtle); }