/* Static image modal/lightbox for preserved legacy gallery photos. */
.gallery-modal-button { cursor: pointer; }
.gallery-modal-hint { display: block; margin-top: 5px; font: normal 11px Arial, Helvetica, sans-serif; color: #254985; }
.ranch-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.78); box-sizing: border-box; }
.ranch-modal.is-open { display: flex; }
.ranch-modal__dialog { position: relative; max-width: min(92vw, 760px); max-height: 92vh; background: #fff; border: 6px solid #f7f1e8; box-shadow: 0 18px 60px rgba(0,0,0,.45); border-radius: 6px; padding: 14px 14px 50px; box-sizing: border-box; }
.ranch-modal__image { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; margin: 0 auto; }
.ranch-modal__caption { position: absolute; left: 14px; right: 14px; bottom: 12px; min-height: 22px; text-align: center; font: bold 14px Arial, Helvetica, sans-serif; color: #343434; }
.ranch-modal__close, .ranch-modal__prev, .ranch-modal__next { border: 0; cursor: pointer; background: #8A2223; color: #fff; font: bold 24px Arial, Helvetica, sans-serif; line-height: 1; }
.ranch-modal__close { position: absolute; top: -18px; right: -18px; width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.ranch-modal__prev, .ranch-modal__next { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 56px; border-radius: 4px; opacity: .94; }
.ranch-modal__prev { left: -54px; }
.ranch-modal__next { right: -54px; }
.ranch-modal__prev:hover, .ranch-modal__next:hover, .ranch-modal__close:hover { background: #254985; }
@media (max-width: 720px) {
  .ranch-modal { padding: 12px; }
  .ranch-modal__dialog { max-width: 96vw; padding: 10px 10px 48px; border-width: 4px; }
  .ranch-modal__image { max-height: 68vh; }
  .ranch-modal__prev, .ranch-modal__next { top: auto; bottom: 8px; transform: none; width: 40px; height: 36px; font-size: 20px; }
  .ranch-modal__prev { left: 12px; }
  .ranch-modal__next { right: 12px; }
  .ranch-modal__close { top: -12px; right: -10px; }
}