/**
 * RDPW: Tour-page inline image overlay styles.
 *
 * Companion to assets/js/tour-image-overlay.js. Self-contained -- we
 * intentionally do NOT rely on Goodlayers' theme CSS for
 * .gdlr-core-image-overlay because their selectors typically scope
 * the overlay rules under `.gdlr-core-media-image` (their Path A
 * image-element wrapper), which inline `<figure class="wp-caption">`
 * images don't have. We re-establish the overlay positioning, fade
 * transition, and icon centering here so the hover affordance shows
 * up regardless of how strictly the theme's selectors are scoped.
 *
 * Class naming:
 *   - .rdpw-il-overlay-host        Marker added by the JS to the <a>
 *                                  wrapper. Establishes positioning
 *                                  context and shrink-wraps to the
 *                                  image's natural dimensions.
 *   - .gdlr-core-image-overlay     Canonical Goodlayers overlay span.
 *                                  We use the same class so if
 *                                  Goodlayers ever extends their CSS
 *                                  to broader selectors, our markup
 *                                  is already a match.
 *   - .gdlr-core-image-overlay-icon  Same logic for the icon.
 */

/* The host <a> for the overlay. We MUST use !important on the layout
 * primitives here because Goodlayers' theme CSS sets rules on the
 * lightbox anchor (`a.gdlr-core-ilightbox`, `a.gdlr-core-lightgallery`)
 * with higher specificity than our selector, including in many
 * builds:
 *
 *   - `display: block` (which would make the <a> stretch to its
 *     containing column instead of shrink-wrapping the image), and
 *   - implicitly `position: static` (no `position: relative`).
 *
 * If the <a> is static, our overlay's absolute positioning resolves
 * against the *next* positioned ancestor -- typically
 * `.gdlr-core-toggle-box-item-tab`, which encloses both the section
 * heading h4 AND the content. That's the symptom of the gray
 * hover-tint bleeding upward over the day heading. Forcing
 * `position: relative` on the anchor pins the overlay to the image
 * bounds. */
a.rdpw-il-overlay-host {
  position: relative !important;
  display: inline-block !important;
  /* Kill the baseline whitespace gap below an inline <img>: without
   * line-height:0 the parent <a> ends up taller than the image, and
   * the absolute overlay would extend below it. */
  line-height: 0 !important;
  /* Don't let the <a> grow past the image's intrinsic size. Some
   * themes set `width: 100%` on lightbox anchors. */
  max-width: 100%;
  /* Defensive resets for theme rules that pad/border the anchor. */
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
}

a.rdpw-il-overlay-host > img {
  /* The image determines the host's box. Make sure no theme rule
   * floats it or breaks the inline-block sizing chain. */
  display: block;
  max-width: 100%;
  height: auto;
}

a.rdpw-il-overlay-host > .gdlr-core-image-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: rgba(20, 20, 20, 0.45);
  opacity: 0;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
  /* The lightbox library binds its click handler on the <a>; the
   * overlay must not swallow the click, so make it transparent to
   * pointer events. The hover state still triggers because :hover
   * on the parent doesn't require pointer-events on the child. */
  pointer-events: none;
}

a.rdpw-il-overlay-host:hover > .gdlr-core-image-overlay,
a.rdpw-il-overlay-host:focus > .gdlr-core-image-overlay {
  opacity: 1;
}

a.rdpw-il-overlay-host > .gdlr-core-image-overlay > .gdlr-core-image-overlay-icon {
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
}

/* Suppress the global page-builder image hover effect for our overlay-
 * decorated images.
 *
 * rdpw.css ships a site-wide rule:
 *
 *   .gdlr-core-page-builder-body img:hover {
 *     transform: scale(1.05);
 *     filter: brightness(70%);
 *   }
 *
 * For inline itinerary images, the magnifier overlay is the hover
 * affordance and a simultaneous zoom + darken competes with it
 * visually. We override here with high specificity (`a.rdpw-il-
 * overlay-host > img`) and `!important` because the rdpw.css rule
 * uses element + descendant selectors with equal weight; without
 * !important the cascade order would still pick whichever loaded
 * later, which is fragile.
 *
 * We also flatten the transition so the image doesn't briefly tween
 * back to scale(1) when the cursor leaves -- the overlay's opacity
 * transition (0.25s ease above) handles the "lift". */
a.rdpw-il-overlay-host > img,
a.rdpw-il-overlay-host:hover > img,
a.rdpw-il-overlay-host:focus > img {
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
  -webkit-filter: none !important;
  filter: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}