/* =============================================================================
   sc-gallery.css
   Spaccanapoli Gallery Shortcode Styles
   Palette: #080706 bg | #c8a84b gold | #f0ebe0 cream
   ============================================================================= */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.sc-gallery {
  --sc-gap: clamp(6px, 1vw, 12px);
  --sc-cols: 3;
  --sc-radius: 2px;
  --sc-overlay: rgba(8, 7, 6, 0.65);
  --sc-gold: #e2a36b;

  width: 100%;
}

/* ── Column modifiers ────────────────────────────────────────────────────── */

.sc-gallery--cols-2 {
  --sc-cols: 2;
}
.sc-gallery--cols-3 {
  --sc-cols: 3;
}
.sc-gallery--cols-4 {
  --sc-cols: 4;
}

/* ── GRID layout ─────────────────────────────────────────────────────────── */

.sc-gallery--grid {
  display: grid;
  grid-template-columns: repeat(var(--sc-cols), 1fr);
  gap: var(--sc-gap);
}

.sc-gallery--grid .sc-gallery__item {
  display: block;
  overflow: hidden;
  border-radius: var(--sc-radius);
  position: relative;
  aspect-ratio: 1 / 1; /* square cells */
  background-color: #1a1916;
}

.sc-gallery--grid .sc-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* ── MASONRY layout ──────────────────────────────────────────────────────── */

.sc-gallery--masonry {
  columns: var(--sc-cols);
  column-gap: var(--sc-gap);
}

.sc-gallery--masonry .sc-gallery__item {
  display: block;
  break-inside: avoid;
  overflow: hidden;
  border-radius: var(--sc-radius);
  position: relative;
  margin-bottom: var(--sc-gap);
  background-color: #1a1916;
}

.sc-gallery--masonry .sc-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */

.sc-gallery__overlay {
  position: absolute;
  inset: 0;
  background: var(--sc-overlay);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Gold "zoom" icon via pseudo */
.sc-gallery__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23c8a84b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px 32px;
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.3s ease 0.05s,
    transform 0.3s ease 0.05s;
}

/* ── Hover states ────────────────────────────────────────────────────────── */

.sc-gallery__item:hover img,
.sc-gallery__item:focus-visible img {
  transform: scale(1.05);
}

.sc-gallery__item:hover .sc-gallery__overlay,
.sc-gallery__item:focus-visible .sc-gallery__overlay {
  opacity: 1;
}

.sc-gallery__item:hover .sc-gallery__overlay::after,
.sc-gallery__item:focus-visible .sc-gallery__overlay::after {
  opacity: 1;
  transform: scale(1);
}

/* ── Focus ring ──────────────────────────────────────────────────────────── */

.sc-gallery__item:focus-visible {
  outline: 2px solid var(--sc-gold);
  outline-offset: 2px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .sc-gallery--cols-4 {
    --sc-cols: 3;
  }
}

@media (max-width: 640px) {
  .sc-gallery--cols-3,
  .sc-gallery--cols-4 {
    --sc-cols: 2;
  }
}

@media (max-width: 400px) {
  .sc-gallery--cols-2,
  .sc-gallery--cols-3,
  .sc-gallery--cols-4 {
    --sc-cols: 1;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sc-gallery__item img,
  .sc-gallery__overlay,
  .sc-gallery__overlay::after {
    transition: none;
  }
}

/* ── GLightbox overrides ─────────────────────────────────────────────────── */

.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background-color: rgba(8, 7, 6, 0.7);
}

.glightbox-clean .gclose svg path,
.glightbox-clean .gnext svg path,
.glightbox-clean .gprev svg path {
  stroke: #c8a84b;
}

.glightbox-clean .gdesc-inner {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  color: #f0ebe0;
  letter-spacing: 0.03em;
}