/*

  Editorial gallery layout — portfolio / brand pages only.

  Pair with .editorial-gallery on #gallery; do not load on client delivery (gallery.html).

  Bordered frames shrink-wrap to each image's natural aspect ratio — never cropped.

*/



.editorial-gallery {
  width: 100%;
  --eg-max-w: 520px;
  --eg-max-w-span: 680px;
  --eg-max-h: clamp(280px, 36vh, 460px);
  --eg-frame-pad: 1rem;
}

.editorial-gallery--size-s {
  --eg-max-w: 400px;
  --eg-max-w-span: 520px;
  --eg-max-h: clamp(220px, 30vh, 340px);
  --eg-frame-pad: 0.75rem;
}

.editorial-gallery--size-l {
  --eg-max-w: 640px;
  --eg-max-w-span: 840px;
  --eg-max-h: clamp(340px, 44vh, 580px);
  --eg-frame-pad: 1.25rem;
}



.editorial-gallery__wrap {

  padding: 1.5rem;

  margin: 0 auto;

  max-width: 1200px;

}



@media (min-width: 640px) {

  .editorial-gallery__wrap {

    padding: 3rem;

  }

}



@media (min-width: 1024px) {

  .editorial-gallery__wrap {

    padding: 5rem;

  }

}



.editorial-gallery__grid {

  display: grid;

  grid-template-columns: minmax(0, 1fr);

  gap: 2.5rem;

  padding: 0;

  column-count: unset;

  align-items: start;

  justify-items: center;

}



@media (min-width: 768px) {

  .editorial-gallery__grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 3.5rem;

  }

}



@media (min-width: 1280px) {

  .editorial-gallery__grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 5rem;

  }

}



.editorial-gallery__cell {

  display: block;

  width: fit-content;

  max-width: min(100%, var(--eg-max-w));

  margin: 0;

  padding: 0;

  border: none;

  background: transparent;

  cursor: pointer;

  text-align: left;

  position: relative;

  overflow: visible;

  transition: none;

  break-inside: unset;

}



.editorial-gallery__cell:focus-visible {

  outline: none;

}



.editorial-gallery__cell:focus-visible .editorial-gallery__frame {

  outline: 2px solid var(--accent);

  outline-offset: 3px;

}



@media (min-width: 768px) {

  .editorial-gallery__cell--span-2 {

    grid-column: span 2;

    max-width: min(100%, var(--eg-max-w-span));

  }

}



.editorial-gallery__frame {
  display: block;
  width: fit-content;
  max-width: 100%;
  line-height: 0;
  position: relative;
  padding: var(--eg-frame-pad);
  box-sizing: border-box;
  border: 1px solid var(--container, rgba(229, 223, 211, 0.14));
  background: rgba(229, 223, 211, 0.04);
  overflow: hidden;
  transition: none;
}



.editorial-gallery__cell:hover .editorial-gallery__frame,

.editorial-gallery__cell:focus-visible .editorial-gallery__frame {

  border-color: var(--accent);

}



.editorial-gallery__frame picture {
  display: block;
  line-height: 0;
}

.editorial-gallery__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, calc(var(--eg-max-w) - (2 * var(--eg-frame-pad))));
  max-height: var(--eg-max-h);

  object-fit: contain;

  object-position: center;

  filter: saturate(0.92) contrast(1.04);

  transition: none;

  -webkit-user-drag: none;

  user-select: none;

  pointer-events: none;

}



.editorial-gallery__cell--span-2 .editorial-gallery__img {
  max-width: min(100%, calc(var(--eg-max-w-span) - (2 * var(--eg-frame-pad))));
}



.editorial-gallery__cell:hover .editorial-gallery__img,

.editorial-gallery__cell:focus-visible .editorial-gallery__img {

  filter: saturate(1.05) contrast(1.07);

}



.editorial-gallery .cell-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(12, 11, 9, 0.72) 0%, transparent 55%);

  opacity: 0;

  transition: none;

  display: flex;

  align-items: flex-end;

  padding: 0.85rem 1rem;

  pointer-events: none;

}



.editorial-gallery__cell:hover .cell-overlay,

.editorial-gallery__cell:focus-visible .cell-overlay {

  opacity: 1;

}



.editorial-gallery #empty {

  grid-column: 1 / -1;

}



/* ── S / M / L density toggle (injected into #filter-bar) ── */

.editorial-gallery__size {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  margin-left: 0.5rem;

}



.editorial-gallery__size-label {

  font-size: 0.85rem;

  letter-spacing: 0.05em;

  color: var(--fg, #E5DFD3);

  opacity: 0.5;

  text-transform: lowercase;

}



.editorial-gallery__size-btn {

  font-family: var(--utility, 'Space Mono', 'Courier New', monospace);

  font-size: 0.72rem;

  letter-spacing: 0.08em;

  line-height: 1;

  min-width: 1.75rem;

  padding: 0.28rem 0.4rem;

  border: 1px solid var(--container, rgba(229, 223, 211, 0.14));

  background: transparent;

  color: var(--fg-muted, var(--fg, #E5DFD3));

  cursor: pointer;

  transition: none;

}



.editorial-gallery__size-btn:hover,

.editorial-gallery__size-btn:focus-visible {

  border-color: var(--accent);

  color: var(--accent);

  outline: none;

}



.editorial-gallery__size-btn[aria-pressed="true"] {

  border-color: var(--accent);

  color: var(--accent);

}



@media (max-width: 580px) {

  .editorial-gallery__size-label {

    display: none;

  }

}