/* ==========================================================================
   Image lightbox — shared by product cards and the shop gallery.

   Sizing rule: the dialog is a flex column capped to the viewport, only the
   image area is allowed to shrink, and the close button sits INSIDE the
   frame. Together that means the dialog always fits, however short the
   screen, and the close button can never land off-canvas.
   ========================================================================== */

.mg-modal {
  /* dvh so mobile browser chrome cannot push the dialog off-screen */
  --mg-modal-max-h: 92dvh;

  border: 0;
  padding: 0;
  margin: auto;
  width: min(92vw, 960px);
  max-width: 92vw;
  max-height: var(--mg-modal-max-h);
  background: var(--mg-bg);
  border-radius: var(--mg-radius-lg);
  box-shadow: var(--mg-shadow-lg);
  overflow: hidden;
  z-index: var(--mg-z-modal);
}
.mg-modal::backdrop {
  background: color-mix(in srgb, var(--mg-color-primary) 78%, transparent);
  backdrop-filter: blur(5px);
}

/* Only laid out when open, so the dialog stays hidden while closed */
.mg-modal[open] {
  display: flex;
  flex-direction: column;
}

.mg-modal__figure {
  position: relative;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0; /* lets the image area shrink below its content size */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mg-color-surface);
}

.mg-modal__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Close sits over the image, inside the frame */
.mg-modal__close {
  position: absolute;
  top: var(--mg-space-3);
  right: var(--mg-space-3);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mg-radius-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--mg-color-primary);
  box-shadow: var(--mg-shadow-md);
  z-index: 2;
  transition: background var(--mg-transition);
}
.mg-modal__close:hover { background: var(--mg-color-gold); }

/* === Gallery navigation — only shown when the trigger belonged to a set === */
.mg-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--mg-radius-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--mg-color-primary);
  box-shadow: var(--mg-shadow-md);
  z-index: 2;
  transition: background var(--mg-transition);
}
.mg-modal__nav:hover { background: var(--mg-color-gold); }
.mg-modal__nav--prev { left: var(--mg-space-3); }
.mg-modal__nav--next { right: var(--mg-space-3); }

.mg-modal.is-gallery .mg-modal__nav { display: inline-flex; }

/* === Caption bar === */
.mg-modal__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--mg-space-4);
  padding: var(--mg-space-4) var(--mg-space-5);
  border-top: 1px solid var(--mg-color-border);
  background: var(--mg-bg);
}
/* Nothing to show: drop the bar so the image owns the whole dialog */
.mg-modal__bar[hidden] { display: none; }

.mg-modal__caption {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--mg-font-heading);
  font-weight: var(--mg-weight-semibold);
  font-size: var(--mg-text-xs);
  color: var(--mg-color-primary);
}

.mg-modal__count {
  flex: none;
  font-family: var(--mg-font-heading);
  font-weight: var(--mg-weight-semibold);
  font-size: var(--mg-text-xs);
  letter-spacing: var(--mg-tracking-eyebrow);
  color: var(--mg-color-gold);
}

@keyframes mg-modal-in    { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes mg-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.mg-modal[open]           { animation: mg-modal-in    200ms var(--mg-ease); }
.mg-modal[open]::backdrop { animation: mg-backdrop-in 200ms var(--mg-ease); }

/* Short screens — give the image every pixel going */
@media (max-height: 560px) {
  .mg-modal { --mg-modal-max-h: 96dvh; }
  .mg-modal__bar { padding: var(--mg-space-2) var(--mg-space-4); }
  .mg-modal__close { width: 32px; height: 32px; }
  .mg-modal__nav { width: 34px; height: 34px; }
}

@media (max-width: 540px) {
  .mg-modal {
    --mg-modal-max-h: 94dvh;
    width: 94vw;
  }
  .mg-modal__nav { width: 36px; height: 36px; }
  .mg-modal__nav--prev { left: var(--mg-space-2); }
  .mg-modal__nav--next { right: var(--mg-space-2); }
  .mg-modal__close { top: var(--mg-space-2); right: var(--mg-space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .mg-modal[open], .mg-modal[open]::backdrop { animation: none; }
}