/* ============================================================
   Art Inventory — website gallery export
   Light, minimal "gallery wall" aesthetic: generous whitespace, neutral warm background,
   understated single accent, image-first layout — built as a placeholder default that
   approximates michaeltangen.com's clean/minimal/light-themed feel (no exact palette/typeface
   was available to pull from the live site itself; every value below is a CSS custom property,
   so swapping in exact colors/fonts later is a one-file edit, same pattern as the app's own
   carbon theme).
   ============================================================ */

:root {
  --gallery-bg: #faf9f6;
  --gallery-surface: #ffffff;
  --gallery-border: #e6e3dc;
  --gallery-text: #262420;
  --gallery-text-dim: #6f6b62;
  --gallery-accent: #8a7458;
  --gallery-accent-text: #ffffff;
  --gallery-focus: #262420;
  --gallery-scrim: rgba(20, 18, 15, 0.94);
  --gallery-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --gallery-radius: 2px;
}

.art-gallery, .art-gallery * { box-sizing: border-box; }

.art-gallery {
  font-family: var(--gallery-font-sans);
  color: var(--gallery-text);
  background: var(--gallery-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.art-gallery a { color: inherit; }

.art-gallery :focus-visible {
  outline: 2px solid var(--gallery-focus);
  outline-offset: 2px;
}

/* ── Toolbar: filter trigger + result count ── */
.ag-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--gallery-border);
}

.ag-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--gallery-border);
  color: var(--gallery-text);
  padding: 8px 14px;
  border-radius: var(--gallery-radius);
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.ag-filters-toggle:hover { border-color: var(--gallery-accent); }

.ag-filters-toggle[aria-expanded="true"] {
  background: var(--gallery-text);
  border-color: var(--gallery-text);
  color: var(--gallery-surface);
}

.ag-filters-toggle svg { width: 15px; height: 15px; flex-shrink: 0; }

.ag-active-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gallery-accent);
  color: var(--gallery-accent-text);
  font-size: 0.65rem;
  line-height: 1;
}

.ag-active-count[hidden] { display: none; }

.ag-result-count {
  font-size: 0.8rem;
  color: var(--gallery-text-dim);
}

/* ── Off-canvas filter drawer ── */
.ag-filters-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 40;
}

.ag-filters-scrim.is-open { opacity: 1; pointer-events: auto; }

.ag-filters-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  background: var(--gallery-surface);
  border-left: 1px solid var(--gallery-border);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  z-index: 41;
  display: flex;
  flex-direction: column;
}

.ag-filters-drawer.is-open { transform: translateX(0); }

.ag-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--gallery-border);
}

.ag-filters-header h2 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.02em;
}

.ag-filters-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--gallery-text-dim);
  padding: 4px 6px;
}

.ag-filters-close:hover { color: var(--gallery-text); }

.ag-filters-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 20px 20px;
}

.ag-filter-group { margin-top: 18px; }

.ag-filter-group h3 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gallery-text-dim);
  margin: 0 0 8px;
  font-weight: 600;
}

.ag-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.88rem;
  cursor: pointer;
}

.ag-filter-option input { accent-color: var(--gallery-accent); cursor: pointer; }

.ag-filters-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--gallery-border);
}

.ag-clear-filters {
  width: 100%;
  background: none;
  border: 1px solid var(--gallery-border);
  color: var(--gallery-text);
  padding: 9px;
  border-radius: var(--gallery-radius);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.ag-clear-filters:hover { border-color: var(--gallery-accent); }

/* ── Grid ── */
.ag-grid-wrap { padding: 8px clamp(16px, 4vw, 48px) 60px; }

.ag-genre-group { margin-top: 40px; }

.ag-genre-heading {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gallery-text-dim);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gallery-border);
}

.ag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(10px, 2vw, 24px);
}

.ag-tile {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  background: var(--gallery-surface);
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--gallery-radius);
}

.ag-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s, transform 0.3s ease;
}

.ag-tile:hover img, .ag-tile:focus-visible img {
  opacity: 0.92;
  transform: scale(1.015);
}

.ag-empty-state {
  padding: 60px 0;
  text-align: center;
  color: var(--gallery-text-dim);
  font-size: 0.9rem;
}

.ag-load-sentinel { height: 1px; }

.ag-load-more-wrap { text-align: center; padding: 24px 0 0; }

.ag-load-more-btn {
  background: none;
  border: 1px solid var(--gallery-border);
  color: var(--gallery-text);
  padding: 10px 22px;
  border-radius: var(--gallery-radius);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.ag-load-more-btn:hover { border-color: var(--gallery-accent); }

/* ── Lightbox ── */
.ag-lightbox {
  position: fixed;
  inset: 0;
  background: var(--gallery-scrim);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.ag-lightbox.is-open { opacity: 1; pointer-events: auto; }

.ag-lightbox-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

/* Artwork + info card, laid out side by side and centered together as one unit. Both share the
   row's own height (set below) so the card is never taller than the art and never overlaps or
   covers it — it simply sits beside it, scrolling internally if its content runs long. */
.ag-lightbox-body {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(16px, 3vw, 32px);
  width: min(92vw, 1400px);
  height: 78vh;
}

.ag-lightbox-img-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ag-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.ag-lightbox-close,
.ag-lightbox-prev,
.ag-lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.ag-lightbox-close:hover,
.ag-lightbox-prev:hover,
.ag-lightbox-next:hover { background: rgba(255, 255, 255, 0.18); }

.ag-lightbox-close { top: 18px; right: 18px; width: 40px; height: 40px; font-size: 1.2rem; }
.ag-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 1.4rem; }
.ag-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 1.4rem; }

@media (max-width: 640px) {
  .ag-lightbox-prev, .ag-lightbox-next { width: 38px; height: 38px; }
}

/* Info card — right-adjacent to the artwork, matching its height, scrolling internally when its
   own content (long description, many tags, component thumbnails) runs past that height. No
   longer an overlay, so it never covers the art. */
.ag-lightbox-info {
  flex: 0 0 clamp(260px, 30vw, 360px);
  background: var(--gallery-surface);
  color: var(--gallery-text);
  border-radius: var(--gallery-radius);
  padding: 20px clamp(16px, 2vw, 28px);
  overflow-y: auto;
}

.ag-info-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 10px;
}

.ag-info-year { color: var(--gallery-text-dim); font-weight: 400; }

.ag-info-description {
  margin: 0;
  font-size: 0.9rem;
}

.ag-info-description p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ag-info-description.is-expanded p {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.ag-read-more {
  background: none;
  border: none;
  color: var(--gallery-accent);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 6px 0 0;
  cursor: pointer;
  text-decoration: underline;
}

/* Metadata block — one fact per line, per the confirmed order (medium/surface, genre, size,
   orientation, location, id). Set apart from the description above it and the price below it. */
.ag-info-meta-list {
  margin-top: 14px;
}

.ag-info-meta {
  font-size: 0.7rem;
  color: var(--gallery-text-dim);
  margin: 0 0 4px;
}

.ag-info-price {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 16px 0 0;
}

/* Reserved for the Phase 3 "Buy Now" button — stays empty/hidden until then. */
.ag-buy-now {
  margin-top: 12px;
}

.ag-info-status {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gallery-text-dim);
  border: 1px solid var(--gallery-border);
  border-radius: 999px;
  padding: 2px 10px;
  margin-top: 8px;
}

/* Component sub-gallery, shown within a multi-part piece's detail info */
.ag-components {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.ag-component-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--gallery-radius);
  overflow: hidden;
  border: 1px solid var(--gallery-border);
  cursor: pointer;
  background: none;
  padding: 0;
}

.ag-component-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ag-component-thumb[aria-current="true"] { border-color: var(--gallery-accent); border-width: 2px; }

/* Below this width there isn't room for the art and the info card side by side, so stack them
   instead — art on top, card below, each keeping its own scroll/fit behavior. */
@media (max-width: 720px) {
  .ag-lightbox-body {
    flex-direction: column;
    width: min(92vw, 480px);
    height: min(86vh, 720px);
    gap: 14px;
  }
  .ag-lightbox-img-wrap { flex: 1 1 55%; min-height: 0; }
  .ag-lightbox-info { flex: 1 1 45%; width: 100%; min-height: 0; }
}