/* =========================================================
   Tracy Boyd — Artwork page (uniform grid)
   Light theme, layered on top of styles.css + horizontal.css
   (the shared photo-strip + bar header lives in horizontal.css
   and is reused here via <SiteHeader>).
   ========================================================= */

html, body { background: var(--tb-bg); color: var(--tb-fg); }
a { color: inherit; }
a:hover { color: #2f6df0; }
.hg__brand:hover .hg__eyebrow,
.hg__brand:hover .hg__title { color: var(--tb-fg); }

.ig { position: relative; min-height: 100vh; }

/* sort-by pill, sits to the left of the All Art / For Sale toggle */
.ig__sort { display: flex; align-items: center; }

/* ---------- active category filter banner (Similar Art ingress) ---------- */
.ig__catbar {
  padding: 14px clamp(14px, 2vw, 22px) 0;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.ig__catbar strong { color: var(--tb-fg); font-weight: 700; }
.ig__catbar a { margin-left: 8px; color: #2f6df0; font-weight: 700; }
.ig__catbar a:hover { color: #1b4fc0; }

/* ---------- grouped, independently-scrolling rows ---------- */
.ig__groups {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0 88px;
}
.ig__group-title {
  margin: 0 0 16px;
  padding: 0 clamp(14px, 2vw, 22px);
  font-size: 20px;
  font-weight: 700;
}
.ig__row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0 clamp(14px, 2vw, 22px) 8px;
  align-items: flex-start;
}
.ig-tile { display: block; flex: 0 0 auto; scroll-snap-align: start; }
.ig-tile__media {
  display: block;
  height: 260px;
  width: auto;
  max-width: none;
  transition: filter 220ms cubic-bezier(0.2,0.6,0.2,1);
}
.ig-tile:hover .ig-tile__media { filter: brightness(1.04); }

/* "For Sale" view: bigger paintings, matching the home page's enlarged treatment */
.ig--forsale .ig-tile__media { height: 520px; }
.ig-tile__cap {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--tb-fg);
}
.ig-tile__cap .name { font-weight: 700; }
.ig-tile__cap .meta { color: rgba(255,255,255,0.6); }
.ig-tile__cap .sep { color: rgba(255,255,255,0.3); }

/* ---------- empty state ---------- */
.ig__empty {
  padding: 80px clamp(14px, 2vw, 22px) 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  color: rgba(255,255,255,0.6);
  font-size: 15px;
}
.ig__clear {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--tb-fg);
  transition: background 160ms cubic-bezier(0.2,0.6,0.2,1);
}
.ig__clear:hover { background: rgba(255,255,255,0.07); }

/* ---------- dark band behind the (dark-styled) shared footer ---------- */
.ig__footer-band { background: var(--tb-bg); }

@media (max-width: 640px) {
  .ig-tile__media { height: 170px; }
  .ig--forsale .ig-tile__media { height: 320px; }
}