/* ==========================================================================
   lx-image-guard.css - the stylesheet half of manifest `ux.image_guard`
   (the owner's S12). Linked at the end of a page's <body> only for a site
   that switched the guard on, and only on a page that carries a photograph
   (compat/lx-image-guard.php); lx-image-guard.js is the script half.
   A deterrent for casual saving, not protection (see the script's header).
   Nothing here shows: the overlay is transparent and the rules below only
   change what a pointer can do with a photograph.
   ========================================================================== */

/* 1. A photograph cannot be dragged out of the page, selected, or long-pressed
      into iOS's "save image" callout. */
img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* 2. The transparent layer the templates print above a photograph (the hero's
      tiles and slides, the room photos) and lx-image-guard.js builds above the
      lightbox's photo. It is the topmost thing under the pointer, so a right-
      click, a drag or a long-press lands on it and not on the picture; a click
      or tap still bubbles to the element that opened the lightbox before.
      aria-hidden in the markup, never focusable, no text. */
.lx-image-guard {
    position: absolute;
    inset: 0;
    display: block;
    background: transparent;
    cursor: inherit;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* 3. The boxes the overlay fills have to be positioned. The room photos get a
      block box of their own (it replaces the line the photo sat in, so the
      photo and the caption under it do not move). */
.lx-hero__tile,
.lx-hero__slide,
.lx-image-guard-box {
    position: relative;
}
.lx-image-guard-box {
    display: block;
}

/* 4. The lightbox: the overlay covers its stage (the photo, and the row under it
      that holds the caption), so the caption - text - is lifted above it and
      keeps its menu and its selection. The lightbox's controls are not touched:
      the overlay lies over the stage the photo already fills, and the tests hold
      each control to being at least as reachable as it is with the guard off. */
.lx-lightbox__caption {
    position: relative;
}