/**
 * Gallery mosaic styles (gap-safe)
 *
 * - Uses grid-auto-rows + grid-auto-flow:dense to avoid uneven gaps
 * - Mosaic sizes are math-based and predictable
 * - Keyboard focus states are visible (AODA)
 */

.sgim {
  width: 100%;
  --sgim-white: #ffffff;
  --sgim-gray: #4b5563;
  --sgim-red: #e31937;
  --sgim-black: #0d0d0e;
}

/* =========================
   Filters
   ========================= */

.sgim__filters {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0;
  position: relative;
}

.sgim__filters-label {
  font-weight: 600;
}

.sgim__filters-loader {
  position: absolute;
  top: 105%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #292929;
  backdrop-filter: blur(6px);
  z-index: 99;
  color: var(--sgim-white);

}

.sgim__filters-loader[hidden] {
  display: none;
}

/* Native select is kept in DOM for JS value reads but hidden from view and AT.
   Cannot use display:none — jQuery .trigger("change") won't bubble to delegated
   handlers on display:none elements. Visually-hidden keeps it in the DOM + event flow. */
.sgim__select--hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  top: 0;
  left: 0;
}

/* =========================
   Custom Select Dropdown
   ========================= */

.sgim__select-wrapper {
  position: relative;
  min-width: 220px;
}

body[data-button-style^="rounded"] button.sgim__select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--sgim-black);
  color: var(--sgim-white);
  background: #292929;
  border: 1px solid #424242;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: left;
  border-radius: 6px !important;
  -webkit-border-radius: 6px !important;
  white-space: nowrap;
}

.sgim__select-trigger:hover {
  background: #1a1a0d;
}

.sgim__select-trigger:focus-visible {
  outline: 2px solid var(--sgim-gray);
  outline-offset: 2px;
}

.sgim__select-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sgim__select-trigger--active .sgim__select-value {
  color: var(--sgim-red);
  font-weight: 600;
}

.sgim__select-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: transform 0.15s ease;
}

.sgim__select-trigger[aria-expanded="true"] .sgim__select-arrow {
  transform: rotate(180deg);
}

.sgim__select-listbox {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--sgim-black);
  border: 1px solid var(--sgim-gray);
  border-top: 0;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sgim-gray) var(--sgim-black);
}

.sgim__select-listbox[hidden] {
  display: none;
}

.sgim__select-option {
  padding: 10px 14px;
  color: var(--sgim-white);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  list-style: none;
}

.sgim__select-option[aria-selected="true"] {
  color: var(--sgim-red);
  font-weight: 600;
}

/* Selected + focused: keep gold but slightly lighter */
.sgim__select-option[aria-selected="true"].sgim__select-option--focused {
  color: var(--sgim-red);
}

.sgim__clear {
  height: 44px;
  padding: 0 14px;
  border: none;
  background: transparent;
  color: var(--sgim-white);
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}

.sgim__clear:hover {
  background: var(--sgim-gray);
  color: var(--sgim-black);
}

.sgim__clear:focus-visible {
  outline: 2px solid var(--sgim-gray);
  outline-offset: 2px;
}

.sgim__status {
  min-height: 1.2em;
  margin: 6px 0 10px;
}

.sgim__sr-only {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* =========================
   Mosaic Grid (4 columns desktop)
   ========================= */

.sgim__grid {
  display: grid;
  gap: 14px;
  padding: 14px;

  /* 4 equal columns on desktop */
  grid-template-columns: repeat(4, minmax(0, 1fr));

  /* Each row is a fixed "unit". Items span rows to create heights */
  grid-auto-rows: 40vh;       /* adjust if you want bigger/smaller tiles */
  grid-auto-flow: dense;       /* backfills gaps */
}

/* Base tile */
.sgim__tile {
  position: relative;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  display: block; /* tiles are <a> */
  text-decoration: none;
}

.sgim__tile:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.sgim__img {
  width: 100% !important;
  height: 100% !important;
  max-height: none;
  object-fit: cover;
  display: block;
}

/* =========================
   Mosaic sizing (Desktop)
   1x1, 1x2, 2x1, 2x2
   ========================= */

.sgim__tile--Regular  { grid-column: span 1; grid-row: span 1; }
.sgim__tile--Tall     { grid-column: span 1; grid-row: span 2; }
.sgim__tile--Wide     { grid-column: span 2; grid-row: span 1; }
.sgim__tile--WideTall { grid-column: span 2; grid-row: span 2; }

/* =========================
   Tablet (2 columns)
   ========================= */

@media (max-width: 1024px) {
  .sgim__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 120px;
  }

  .sgim__tile--Regular  { grid-column: span 1; grid-row: span 1; }
  .sgim__tile--Tall     { grid-column: span 1; grid-row: span 2; }
  .sgim__tile--Wide     { grid-column: span 2; grid-row: span 1; }
  .sgim__tile--WideTall { grid-column: span 2; grid-row: span 2; }
}

/* =========================
   Mobile (1 column)
   ========================= */

@media (max-width: 640px) {
  .sgim__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 140px;
  }

  /* In 1-col layout, everything spans full width */
  .sgim__tile--Regular  { grid-column: span 1; grid-row: span 1; }
  .sgim__tile--Tall     { grid-column: span 1; grid-row: span 2; }
  .sgim__tile--Wide     { grid-column: span 1; grid-row: span 1; }
  .sgim__tile--WideTall { grid-column: span 1; grid-row: span 2; }
}
/* =========================
   Empty state
   ========================= */

.sgim__empty {
  padding: 18px;
  border-radius: 12px;
}

/* =========================
   Lightbox (AODA-compliant)
   ========================= */

.sgim__lightbox[hidden] {
  display: none;
}

.sgim__lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  justify-content: center;
  align-items: center;
}


.sgim__lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.sgim__lightbox-dialog {
  position: relative;
  max-width: 1100px;
  width: calc(100% - 28px);
  margin: 6vh auto 0;
  background: #111;
  color: #fff;
  border-radius: 12px;
  padding: 18px;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 12px;
  outline: none;
}

.sgim__lightbox-figure {
  margin: 0;
  display: grid;
  gap: 10px;
}

.sgim__lightbox-img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 12px;
  background: #000;
}

.sgim__lightbox-caption {
  font-size: 14px;
}

.sgim__lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 0;
  background: #e31937;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

.sgim__lightbox-prev,
.sgim__lightbox-next {
  width: 44px;
  height: 44px;
  background: #e31937;
  border: 0;
  color: #fff;
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sgim__lightbox-prev svg,
.sgim__lightbox-next svg {
  display: block;
  line-height: 1;
  height: 14px;

}

.sgim__lightbox-close:focus-visible,
.sgim__lightbox-prev:focus-visible,
.sgim__lightbox-next:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Loading indicator */
.sgim__status {
  min-height: 44px; /* reserves space so layout doesn't jump */
  display: flex;
  align-items: center;
  justify-content: center;
}

.sgim__loader {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
}

.sgim__loader-text {
  font-size: 14px;
  opacity: 0.9;
}

/* Simple spinner */
.sgim__spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.9);
  animation: sgimSpin 0.8s linear infinite;
}

@keyframes sgimSpin {
  to { transform: rotate(360deg); }
}

.sgim__loader[hidden] {
  display: none !important;
}
.sgim__clear {
  transition: opacity 0.15s ease;
}

.sgim__clear[hidden] {
  opacity: 0;
  pointer-events: none;
}