/* ==========================================================================
   SG Gallery — three layouts and one lightbox.

   Colours come from the theme's --sg-* contract where it exists and fall back
   to values that stand on their own, so the gallery is legible on a site with
   no theme tokens at all.
   ========================================================================== */

.sg-gallery {
  margin-block: clamp(24px, 4vw, 48px);
}

.sg-gallery__title {
  margin: 0 0 clamp(12px, 2vw, 20px);
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  font-weight: 800;
  color: var(--sg-ink, #1E2127);
}

.sg-gallery__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── The tile ────────────────────────────────────────────────────────────── */

.sg-gallery__item {
  position: relative;
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--sg-cream, #F3F0EB);
  overflow: hidden;
  cursor: zoom-in;
  /* The tile is a button; without this it inherits the UA's centred button text
     and the caption sits in the wrong place in RTL. */
  text-align: start;
  color: inherit;
  font: inherit;
}

.sg-gallery__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
}

.sg-gallery__item:hover .sg-gallery__img,
.sg-gallery__item:focus-visible .sg-gallery__img {
  transform: scale(1.04);
}

.sg-gallery__item:focus-visible {
  outline: 3px solid var(--sg-gold-dark, #0A6A6A);
  outline-offset: 3px;
}

/* The caption sits on a gradient rather than a flat bar: a photograph of a
   living room has no predictable corner, and a solid strip crops the picture
   to make room for two words. */
.sg-gallery__meta {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(10, 12, 16, .78), rgba(10, 12, 16, 0));
  color: #FFFFFF;
  pointer-events: none;
}

.sg-gallery__caption {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);   /* 7.4:1 even over a pale photo */
}

.sg-gallery__place {
  font-size: .82rem;
  opacity: .88;
}

.sg-gallery__zoom {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #1E2127;
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 200ms ease;
}

.sg-gallery__item:hover .sg-gallery__zoom,
.sg-gallery__item:focus-visible .sg-gallery__zoom { opacity: 1; }

/* ── 1. equal squares ────────────────────────────────────────────────────── */

.sg-gallery--equal-squares .sg-gallery__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}

.sg-gallery--equal-squares .sg-gallery__item {
  aspect-ratio: 1;
}

/* ── 2. masonry grid ─────────────────────────────────────────────────────── */

/* CSS columns, not a JavaScript masonry: each photograph keeps its own
   proportions, nothing is measured, and nothing reflows after the images load.
   The trade is reading order - columns run down, not across - which is why the
   cells carry no ordinal meaning and the section does not number them. */
.sg-gallery--masonry-grid .sg-gallery__list {
  column-count: 1;
  column-gap: clamp(10px, 1.4vw, 18px);
}

@media (min-width: 560px) { .sg-gallery--masonry-grid .sg-gallery__list { column-count: 2; } }
@media (min-width: 900px) { .sg-gallery--masonry-grid .sg-gallery__list { column-count: 3; } }
@media (min-width: 1400px) { .sg-gallery--masonry-grid .sg-gallery__list { column-count: 4; } }

.sg-gallery--masonry-grid .sg-gallery__cell {
  break-inside: avoid;
  margin-block-end: clamp(10px, 1.4vw, 18px);
}

.sg-gallery--masonry-grid .sg-gallery__img {
  block-size: auto;      /* the whole point: the photograph's own shape */
}

/* ── 3. slider ───────────────────────────────────────────────────────────── */

.sg-gallery--slider .sg-gallery__list {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(10px, 1.4vw, 18px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-block: 4px;
}
.sg-gallery--slider .sg-gallery__list::-webkit-scrollbar { display: none; }

.sg-gallery--slider .sg-gallery__cell {
  flex: 0 0 auto;
  inline-size: clamp(220px, 32vw, 340px);
  scroll-snap-align: start;
}

.sg-gallery--slider .sg-gallery__item {
  aspect-ratio: 4 / 3;
}

/* The theme's slider component wraps the row and injects arrows; when it is
   absent the row is still a native scroller, so nothing here depends on it. */
.sg-gallery--slider .sg-hscroll { padding-inline: 10px; }

/* ── The lightbox ────────────────────────────────────────────────────────── */

.sg-gallery-lbx__panel {
  position: relative;
  inline-size: min(96vw, 1200px);
  max-block-size: 92dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.sg-gallery-lbx__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  max-inline-size: 100%;
}

.sg-gallery-lbx__img {
  max-inline-size: min(92vw, 1100px);
  max-block-size: 78dvh;
  inline-size: auto;
  block-size: auto;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}

/* The caption sits on its own pill rather than straight on the backdrop. The
   backdrop is only as dark as the photograph behind it allows, and the counter
   at 72% white measured 3.9:1 over a pale one - a contrast that depends on
   which picture is open is not a contrast you can promise. */
.sg-gallery-lbx__cap {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(10, 12, 16, .72);
  color: #FFFFFF;          /* 14.6:1 on that pill */
  font-size: .98rem;
  text-align: center;
}

/* 8.9:1 on the same pill: quieter than the caption, still legible. */
.sg-gallery-lbx__count { color: rgba(255, 255, 255, .8); font-size: .88rem; }

.sg-gallery-lbx__close,
.sg-gallery-lbx__nav {
  position: absolute;
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(10, 12, 16, .55);
  color: #FFFFFF;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.sg-gallery-lbx__close {
  inset-block-start: -8px;
  inset-inline-end: -8px;
  font-size: 1rem;
}

.sg-gallery-lbx__nav { inset-block-start: calc(50% - 24px); }
/* Physical placement: "previous" belongs at the edge the eye came from, which
   is the right in RTL. The chevrons are drawn, not flipped, so they cannot end
   up pointing the wrong way when the direction changes. */
.sg-gallery-lbx__nav--prev { inset-inline-start: -4px; }
.sg-gallery-lbx__nav--next { inset-inline-end: -4px; }

.sg-gallery-lbx__close:hover,
.sg-gallery-lbx__nav:hover { background: rgba(10, 12, 16, .8); }

.sg-gallery-lbx__close:focus-visible,
.sg-gallery-lbx__nav:focus-visible {
  outline: 3px solid #E0C071;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .sg-gallery-lbx__nav { inline-size: 44px; block-size: 44px; }
  .sg-gallery-lbx__nav--prev { inset-inline-start: 2px; }
  .sg-gallery-lbx__nav--next { inset-inline-end: 2px; }
  .sg-gallery-lbx__close { inset-block-start: 2px; inset-inline-end: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-gallery__img,
  .sg-gallery__zoom { transition: none; }
  .sg-gallery__item:hover .sg-gallery__img { transform: none; }
}

/* ── Fallback: no SGOverlay on this theme ────────────────────────────────── */

/* The script falls back to a native <dialog>, which needs the shell to behave
   like one. .sg-ov already positions it; these two rules are what a bare theme
   is missing. */
.sg-gallery-lbx:not([hidden]).sg-gallery-lbx--native {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99990;
  background: rgba(10, 12, 16, .88);
}
.sg-gallery-lbx--native .sg-ov__backdrop { background: transparent; }