/* REST IN LOVE — Photo lightbox & captions v1.0 / TEST, 28 Oct 2026.
   All selectors are scoped; existing thumbnail crop and gold frame remain intact.
   Desktop viewer geometry can be tuned by changing --ril-viewer-desktop-height. */
:root {
  --ril-viewer-desktop-height: 560px;
  --ril-viewer-background: #10171e;
}
/* Form captions: kept outside the upload frame and never over its crop editor. */
.create-memorial-form-container .image-input-container .file-upload-wrapper {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.create-memorial-form-container .image-input-container .file-upload-wrapper .file-upload-block { order: 0; }
.create-memorial-form-container .image-input-container .file-upload-wrapper .remove-image { order: 1; }
.create-memorial-form-container .image-input-container .file-upload-wrapper .ril-edit-position { order: 2; }
.create-memorial-form-container .image-input-container .file-upload-wrapper .ril-caption-field { order: 3; }
.ril-caption-field { margin-top: 12px; width: 100%; text-align: left; }
.ril-caption-field label { display: block; margin: 0 0 5px; font-size: 14px; line-height: 20px; font-weight: 500; }
.ril-caption-field input[type="text"] {
  display: block; width: 100%; min-width: 0; box-sizing: border-box;
  border: 1px solid #b9b9b9; border-radius: 4px;
  padding: 10px 11px; background: #fff; font-size: 14px; line-height: 20px;
}
.ril-caption-field input[type="text"]:disabled { background: #f1f1f1; opacity: .65; cursor: not-allowed; }
.ril-caption-counter { display: block; margin-top: 4px; color: #555; font-size: 12px; line-height: 18px; text-align: right; }

/* Same exact thumbnails remain, now clickable via an unstyled button. */
.memorail-detail-section .person-image-container { position: relative; }
.memorail-detail-section .ril-lightbox-trigger {
  display: block; width: 100%; max-width: 340px;
  padding: 0; margin: 0; border: 0; background: none;
  text-align: inherit; line-height: inherit; appearance: none;
  cursor: zoom-in; border-radius: 0;
}
.memorail-detail-section .ril-lightbox-trigger:focus-visible { outline: 3px solid #8d681c; outline-offset: 5px; }

/* Desktop: overlay occupies photo-grid inner width, never reaches outer gold border. */
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-open { min-height: var(--ril-viewer-desktop-height); }
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox[hidden],
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-caption[hidden],
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-prev[hidden],
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-next[hidden] { display: none !important; }
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox {
  box-sizing: border-box; position: absolute; inset: 0;
  width: 100%; height: 100%; z-index: 15;
  display: flex; align-items: stretch; justify-content: center;
  overflow: hidden; background: var(--ril-viewer-background); color: #fff;
  border: 1px solid #977b35; border-radius: 4px;
}
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-content {
  min-height: 0; min-width: 0; width: 100%; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 52px 58px 20px; box-sizing: border-box;
}
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-image-area {
  min-height: 0; flex: 0 1 auto; width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-image {
  display: block; width: auto !important; height: auto !important;
  max-width: 100% !important; max-height: calc(var(--ril-viewer-desktop-height) - 135px) !important;
  min-width: 0; min-height: 0; object-fit: contain !important;
  aspect-ratio: auto !important; border: 0 !important;
  transform: none !important; animation: none !important;
}
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-caption {
  color: #fff; font-size: 15px; font-weight: 400;
  line-height: 1.45; text-align: center; max-width: 100%;
  flex: 0 0 auto; overflow-wrap: anywhere;
  margin: 12px 0 0; padding: 0;
}
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-close,
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-prev,
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-next {
  appearance: none; border: 0; color: #fff; cursor: pointer;
  background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
  padding: 0; z-index: 2;
}
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-close {
  position: absolute; top: 10px; right: 12px;
  width: 39px; height: 39px; font-size: 34px; line-height: 1;
}
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-prev,
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 52px; font-size: 29px;
}
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-prev { left: 7px; }
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-next { right: 7px; }
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox button:focus-visible { outline: 3px solid #e1b83e; outline-offset: 3px; }
/* A pointer-opened lightbox programmatically focuses Close for safe keyboard/AT
   navigation. Safari can paint that as focus-visible even after a mouse click.
   Hide only that initial pointer focus ring; keyboard use restores it. */
:is(.memorail-detail-section, #preview-content-inner) .ril-lightbox.ril-lightbox-pointer-open .ril-lightbox-close:focus-visible {
  outline: none;
}


/* Phones: full visible viewport, safe-area controls, source image always contained. */
@media (max-width: 767px) {
  :is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-open { min-height: 0; }
  :is(.memorail-detail-section, #preview-content-inner) .ril-lightbox {
    position: fixed; inset: 0; width: 100vw; height: 100vh;
    height: 100dvh; border-radius: 0; border: 0;
    z-index: 999999;
  }
  :is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-content {
    padding: max(64px, calc(env(safe-area-inset-top) + 58px)) 48px
      max(20px, calc(env(safe-area-inset-bottom) + 16px));
  }
  :is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-close {
    top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
    width: 44px; height: 44px;
  }
  :is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-prev,
  :is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-next { width: 38px; height: 49px; }
  :is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-prev { left: max(2px, env(safe-area-inset-left)); }
  :is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-next { right: max(2px, env(safe-area-inset-right)); }
  :is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-image { max-height: calc(100dvh - 190px) !important; }
  :is(.memorail-detail-section, #preview-content-inner) .ril-lightbox-caption { font-size: 14px; line-height: 1.4; }
}

/* Preview-only: maintain the original thumbnail's layout, including saved crops.
   The viewer is inside the same gold memorial border and above Bootstrap's preview grid. */
#preview-content-inner [data-ril-preview-gallery] { position: relative; }
#preview-content-inner .person-image-container .image-col .ril-lightbox-trigger { cursor: zoom-in; }
#preview-content-inner .person-image-container .image-col .ril-lightbox-trigger:focus-visible {
  outline: 3px solid #977b35; outline-offset: 3px;
}
#preview-content-inner .person-image-container .ril-preview-position-frame > .ril-lightbox-trigger {
  cursor: zoom-in;
}