/* ============================================================
   MIG — render-time watermark (LOCKED Option B) + image protection
   Gallery photos (.mig-photo wrappers) + blog content images.
   No image files are modified; this is a CSS overlay scaled with
   container-query units so it stays proportional from a small
   thumbnail to a full-screen lightbox. Part of the gallery rebuild.
   ============================================================ */

:root {
  --mig-wm-opacity: 0.45;   /* fine-tune at the 6.2 gate */
}

/* Watermark container: wraps a single photo. The gallery template puts this
   on each tile; inc/watermark.php wraps blog content images in it so the mark
   sits on the IMAGE corner, not a caption. */
.mig-photo {
  position: relative;
  display: block;
  container-type: inline-size;   /* enables cqi for the mark */
  line-height: 0;
  max-width: 100%;
}
.mig-photo > img {
  display: block;
  max-width: 100%;
  height: auto;
}

.mig-photo::after {
  content: "myisraeliguide.com";
  position: absolute;
  top: auto; left: auto;
  right: 1.8cqi; bottom: 1.4cqi;        /* offset via right/bottom (reliable on abs elements) */
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;                     /* Inter Light */
  font-size: clamp(9px, 2.4cqi, 22px);  /* never vanishes / never dominates */
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, var(--mig-wm-opacity));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.45);
  pointer-events: none;                 /* never intercepts clicks / focus */
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  z-index: 2;
}

/* On very small tiles the mark would be larger than the photo — hide it. */
@container (max-width: 140px) {
  .mig-photo::after { display: none; }
}

/* ------------------------------------------------------------
   BLOG / PAGE content + archive thumbnails.
   The theme forces content images to width:auto + margin:0 auto +
   max-height, so a block wrapper would be wider/taller than the photo
   and the mark would fall into the gutter. Here the wrapper SHRINK-WRAPS
   the image (display:table) and the mark is sized in vw (no container
   units, since size-containment would break the shrink-to-fit).
   ------------------------------------------------------------ */
.mig-prose .mig-photo,
.entry-content .mig-photo {
  display: block;
  width: fit-content;      /* shrink-wrap to the image so the mark stays on it */
  max-width: 100%;
  margin: 0 auto;          /* match the theme's image centring */
  container-type: normal;  /* no containment → fit-content works */
}
.mig-prose .mig-photo > img,
.entry-content .mig-photo > img {
  margin: 0 !important;    /* the wrapper does the centring now */
}
.mig-prose .mig-photo::after,
.entry-content .mig-photo::after {
  right: 14px; bottom: 10px;
  margin: 0;
  font-size: clamp(10px, 1.4vw, 15px);
}

/* ------------------------------------------------------------
   Download deterrents — IMAGES ONLY (gallery + blog content).
   Never document-wide: right-click on text and links keeps working.
   The JS half (dragstart / contextmenu) lives in mig-watermark.js.
   ------------------------------------------------------------ */
.mig-gallery img,
.mig-prose img,
.entry-content img,
.mig-protect img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Deter-only wrapper for listing/related thumbnails — protected from casual
   download but NOT watermarked (the corner mark there is overkill). display:
   contents = zero layout impact on the cards. */
.mig-protect { display: contents; }