/*
 * Archive & category galleries (/gallery/ and /work-category/…)
 *
 * Justified rows: every card keeps the real aspect ratio of its cover (--r is
 * set inline by template-project-card.php), so nothing is cropped and rows
 * line up without gaps. This file replaces the editorial/pomelli layer on
 * archive pages only (functions.php does not load editorial-layout.css there).
 *
 * Optional tuning from Additional CSS:
 *   :root { --sh-gallery-row-h-user: 300px; --sh-gallery-gap-user: 24px; }
 */
body .archive-grid {
  --sh-gap: var(--sh-gallery-gap-user, clamp(14px, 2vw, 28px));
  --sh-row-h: var(--sh-gallery-row-h-user, 260px);
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: var(--sh-gap);
  width: 100%;
  padding: clamp(30px, 5vw, 50px) 0;
}

body .archive-grid > .archive-card {
  --r: 1.5;
  display: flex;
  flex-direction: column;
  flex: var(--r) 1 calc(var(--r) * var(--sh-row-h));
  min-width: min(100%, calc(var(--r) * 120px));
  max-width: calc(var(--r) * var(--sh-row-h) * 1.6);
  height: auto;
  color: inherit;
}

body .archive-grid .archive-card-frame {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: var(--r);
  margin: 0 0 12px;
  overflow: hidden;
  background: var(--surface-2, #1b1b1b);
  border: 0;
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: outline-color .3s ease;
}

body .archive-grid .archive-card-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: none;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* One accent for hover/focus: the site's gold (same as active filters and nav). */
@media (hover: hover) and (pointer: fine) {
  body .archive-grid .archive-card:hover .archive-card-frame { outline-color: var(--sh-brand-gold, #c9a35f); }
  body .archive-grid .archive-card:hover .archive-card-frame img { transform: scale(1.025); }
}
body .archive-grid .archive-card:focus-visible .archive-card-frame {
  outline: 2px solid var(--sh-brand-gold, #c9a35f);
}

@media (max-width: 700px) {
  body .archive-grid { --sh-row-h: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  body .archive-grid .archive-card-frame,
  body .archive-grid .archive-card-frame img { transition: none; }
  body .archive-grid .archive-card:hover .archive-card-frame img { transform: none; }
}

/* A single responsive rule for every gallery/archive layout, including
   editorial and Pomelli overrides defined above. */
@media (max-width: 1024px) {
  body.archive .archive-grid,
  body.tax-sh_portfolio_category .archive-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: var(--sh-gallery-gap-responsive, clamp(14px, 3vw, 24px)) !important;
  }
  body.archive .archive-grid > .archive-card,
  body.tax-sh_portfolio_category .archive-grid > .archive-card {
    flex: none !important;
    grid-area: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  body.archive .archive-card-frame,
  body.tax-sh_portfolio_category .archive-card-frame {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
  }
  body.archive .archive-card-frame img,
  body.tax-sh_portfolio_category .archive-card-frame img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* The archive and category pages use server-rendered cards, so define their
   selected arrangements here instead of relying on the photo-wall script. */
body.sh-wall-layout-cover .archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  grid-auto-rows: auto;
  gap: var(--sh-gallery-gap-user, clamp(12px, 2vw, 24px));
}
body.sh-wall-layout-cover .archive-grid > .archive-card {
  min-width: 0;
  max-width: none;
}
body.sh-wall-layout-cover .archive-grid .archive-card-frame {
  aspect-ratio: var(--sh-gallery-card-ratio-user, 4 / 5);
  background: var(--surface-2, #1b1b1b);
}

body.sh-wall-layout-framed .archive-grid .archive-card-frame {
  aspect-ratio: var(--r);
  background: transparent;
}
body.sh-wall-layout-framed .archive-grid .archive-card-frame img {
  object-fit: contain;
}

body.sh-wall-layout-editorial .archive-grid,
body.sh-wall-layout-editorial-natural .archive-grid,
body.sh-wall-layout-pomelli .archive-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(20px, 3.5vw, 42px);
  grid-auto-flow: row dense;
  gap: var(--sh-gallery-gap-user, clamp(12px, 1.6vw, 24px));
}
body.sh-wall-layout-editorial .archive-grid > .archive-card,
body.sh-wall-layout-editorial-natural .archive-grid > .archive-card,
body.sh-wall-layout-pomelli .archive-grid > .archive-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: none;
  height: auto;
}
body.sh-wall-layout-editorial .archive-grid .archive-card-frame,
body.sh-wall-layout-editorial-natural .archive-grid .archive-card-frame,
body.sh-wall-layout-pomelli .archive-grid .archive-card-frame {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
}
body.sh-wall-layout-editorial .archive-grid .archive-card-meta,
body.sh-wall-layout-editorial-natural .archive-grid .archive-card-meta,
body.sh-wall-layout-pomelli .archive-grid .archive-card-meta {
  flex: 0 0 auto;
  padding-top: 10px;
}
body.sh-wall-layout-editorial-natural .archive-grid .archive-card-frame img {
  object-fit: contain;
  background: #111;
}

body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 1),
body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 1) { grid-area: span 8 / span 7; }
body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 2),
body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 2) { grid-area: span 6 / span 5; }
body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 3),
body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 3) { grid-area: span 6 / span 4; }
body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 4),
body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 4) { grid-area: span 7 / span 5; }
body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 5),
body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 5) { grid-area: span 8 / span 7; }
body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n),
body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n) { grid-area: span 6 / span 5; }

body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 1) { grid-area: span 12 / span 5; }
body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 2) { grid-area: span 12 / span 7; }
body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 3) { grid-area: span 10 / span 7; }
body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 4) { grid-area: span 10 / span 5; }
body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 5) { grid-area: span 12 / span 5; }
body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n) { grid-area: span 12 / span 7; }

@media (max-width: 900px) {
  body.sh-wall-layout-editorial .archive-grid,
  body.sh-wall-layout-editorial-natural .archive-grid,
  body.sh-wall-layout-pomelli .archive-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(22px, 5vw, 38px); }
  body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 1),
  body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 1),
  body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 1) { grid-area: span 7 / span 4; }
  body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 2),
  body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 2),
  body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 2) { grid-area: span 5 / span 2; }
  body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 3),
  body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 3),
  body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 3) { grid-area: span 5 / span 2; }
  body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 4),
  body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 4),
  body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 4) { grid-area: span 6 / span 4; }
  body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 5),
  body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 5),
  body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 5) { grid-area: span 5 / span 3; }
  body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n),
  body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n),
  body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n) { grid-area: span 5 / span 3; }
}

@media (max-width: 560px) {
  body.sh-wall-layout-editorial .archive-grid,
  body.sh-wall-layout-editorial-natural .archive-grid,
  body.sh-wall-layout-pomelli .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(28px, 10vw, 48px); gap: clamp(8px, 2vw, 12px); }
  body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 1),
  body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 1),
  body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 1),
  body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 4),
  body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 4),
  body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 4) { grid-area: span 6 / span 2; }
  body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 2),
  body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 2),
  body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 2),
  body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 3),
  body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 3),
  body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 3),
  body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n + 5),
  body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n + 5),
  body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n + 5),
  body.sh-wall-layout-editorial .archive-grid > .archive-card:nth-child(6n),
  body.sh-wall-layout-editorial-natural .archive-grid > .archive-card:nth-child(6n),
  body.sh-wall-layout-pomelli .archive-grid > .archive-card:nth-child(6n) { grid-area: span 5 / span 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.sh-wall-layout-editorial .archive-card-frame,
  body.sh-wall-layout-editorial-natural .archive-card-frame,
  body.sh-wall-layout-pomelli .archive-card-frame,
  body.sh-wall-layout-editorial .archive-card-frame img,
  body.sh-wall-layout-editorial-natural .archive-card-frame img,
  body.sh-wall-layout-pomelli .archive-card-frame img { transition: none !important; }
}
@media (max-width: 1024px) {
  body.archive .archive-grid,
  body.tax-sh_portfolio_category .archive-grid { display:flex !important; flex-direction:column !important; align-items:stretch !important; width:100% !important; max-width:100% !important; gap:var(--sh-gallery-gap-responsive,clamp(14px,3vw,24px)) !important; }
  body.archive .archive-grid > .archive-card,
  body.tax-sh_portfolio_category .archive-grid > .archive-card { flex:none !important; grid-area:auto !important; width:100% !important; max-width:100% !important; height:auto !important; margin:0 !important; }
  body.archive .archive-card-frame,
  body.tax-sh_portfolio_category .archive-card-frame { width:100% !important; max-width:100% !important; height:auto !important; aspect-ratio:auto !important; }
  body.archive .archive-card-frame img,
  body.tax-sh_portfolio_category .archive-card-frame img { position:static !important; display:block !important; width:100% !important; height:auto !important; max-height:none !important; object-fit:contain !important; object-position:center !important; }
}