/**
 * PFOA Gallery Lightbox - close-phase click-through (0.1.11).
 *
 * Allows real-pointer clicks to reach underlying gallery anchors during
 * Photobox close (pbHide ~400-500ms).
 */
#pbOverlay.pbHide, #pbOverlay.pbHide * { pointer-events: none !important; }

/* PFOA Gallery Lightbox: owns `.pfoa-cat-gallery` public gallery presentation (ordinary+profile). Transferred from PFOA Cat Profiles; single authoritative copy lives here. */

/* 0.1.22: uniform square thumbs per Marilyn requirement — scoped ONLY to
   `.pfoa-cat-gallery` (Cat Profile galleries). Anchor reserves 1/1, img
   fills with `object-fit: cover` (crops, never stretches). Lightbox
   `<a href=full>` order, `<dd>` captions, Photobox binding, and column
   widths (5-col desktop / 3-col <=600px / 2-col <=480px) unchanged.
   Sponsored Animals (page 4159 table td img), Adopted 2026, Recently
   Adopted, cards, and theme style.css are deliberately untouched.

   0.1.20: the PHP rendition adapter now selects uncropped sources before
   WordPress builds width/height and responsive candidates.

   Why explicit `aspect-ratio: 1/1` (not `auto`, not none): 0.1.18 set
   `aspect-ratio: auto !important`, which discarded the width/height
   attribute ratio; unloaded `loading="lazy" sizes="auto"` images then
   fell back to core's `contain-intrinsic-size: 3000px 1500px`
   placeholder (~1500px-tall empty boxes on Bowman/Sable/Picasso).
   An explicit 1/1 reserves a square placeholder before load, so no
   1500px blowout and no layout shift — the box is square whether the
   image is loaded or not. 0.1.19's `width:100% + height:auto` preserved
   natural ratios but produced ragged heights (Bowman 224/268/176,
   Sable 105..245); cover-crop squares fix that without distortion. */

/* Native WordPress gallery markup; Photobox binds to the descendant links. */
.pfoa-cat-gallery {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 12px 0;
}

/* Legacy WP gallery emits <br style="clear:both"> inside the container;
   as a flex item it would consume a row slot — neutralize it. */
.pfoa-cat-gallery > br {
  display: none;
}

.pfoa-cat-gallery .gallery-item {
  width: 20%;
  margin: 0;
  padding: 0.25rem;
  box-sizing: border-box;
}

.pfoa-cat-gallery .gallery-icon {
  margin: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 3px;
  box-sizing: border-box;
  height: auto !important;
}

.pfoa-cat-gallery .gallery-icon a {
  display: block;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  height: auto !important;
}

.pfoa-cat-gallery .gallery-icon img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  max-width: 100% !important;
  margin: 0;
}

/* PFOA Gallery Lightbox 0.1.27: static-metadata caption aligns to shared
   theme conventions (pfoa-theme/style.css:238-245 `.wp-caption-text,
   .gallery-caption` + 711-721 `.entry-content figcaption/.wp-caption-text/
   .gallery-caption`): --pfoa-text-muted #525873, 0.875rem (=14px),
   --pfoa-font-body system-ui stack, line-height 1.5, 8px image-to-caption
   gap (--pfoa-space-1 0.5rem). Text-align stays center: the theme `left`
   is scoped to `.entry-content` editorial captions, while cat-gallery
   captions center by contract (Role 4 default) and existing presentation.
   Not blue/semibold; no links invented. Layout, columns, thumbs,
   Photobox binding unchanged. */
.pfoa-cat-gallery .gallery-caption {
  margin: 8px 0 0;
  width: 100%;
  color: #525873;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

/* PFOA Cat Profiles 0.1.113: responsive classic-gallery columns.
   Desktop keeps five columns (width:20% above). At narrow widths five
   20% thumbnails become tiny with severely wrapped captions, so collapse
   gallery-columns-5 to three columns (<=600px) then two columns
   (<=480px). Scoped strictly to the plugin-owned .pfoa-cat-gallery
   classic markup so Adoptable cards, Adopted2026 event cards, WordPress
   core galleries and theme gallery styles are untouched. Selector
   (0,3,0) outranks the base .pfoa-cat-gallery .gallery-item (0,2,0)
   rule. Applies identically on direct Cat Profile pages and inside
   Popup Maker dialogs (same markup, no page-container scoping). Image
   aspect ratios, captions, links, Photobox binding and markup unchanged. */
@media (max-width: 600px) {
  .pfoa-cat-gallery.gallery-columns-5 .gallery-item {
    width: 33.3333%;
  }
}

@media (max-width: 480px) {
  .pfoa-cat-gallery.gallery-columns-5 .gallery-item {
    width: 50%;
  }
}

/* PFOA Gallery Lightbox 0.1.17: nullify Photobox 1.9.9 false whitespace
   compensation (.pbWrapper:after margin-right:-.25em). Vendor assumes an
   HTML whitespace text node that does not exist (DOM built via JS append
   with zero text nodes), so -.25em shrinks the centered line and the
   leftover +0.25em splits equally -> +0.125em (~2px at 16px) right-edge
   clip under #pbOverlay{overflow:hidden}. Setting margin-right:0 removes
   the strut regardless of font-size; specificity (1,1,1) beats vendor
   (0,1,1) and this stylesheet enqueues after vendor. Animations,
   captions, nav, close, and thumbs untouched. */
#pbOverlay .pbWrapper:after { margin-right: 0; }

/* PFOA Gallery Lightbox 0.1.21: automatic reduced-motion respect
   (contract section 8). Near-zero durations — NOT zero — so the
   transitionend events the vendor open/close completion and the
   plugin close-state machinery depend on still fire; the overlay
   simply snaps instead of animating. No visual change otherwise. */
@media (prefers-reduced-motion: reduce) {
  #pbOverlay, #pbOverlay * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* PFOA Gallery Lightbox 0.1.24: inset-visible keyboard focus rings.
   Defect: vendor parks controls flush to the overlay/viewport edges
   (.on #pbCloseBtn top:-2px right:-2px, .on #pbAutoplayBtn top:0 left:0,
   .show #pbPrevBtn left:0, .show #pbNextBtn right:0, thumbs strip along
   the bottom edge) inside #pbOverlay{overflow:hidden}. A conventional
   outward ring (positive outline-offset or outset box-shadow) paints
   outside the control's border box, so the top/right/bottom rows of the
   ring are cut by overflow:hidden and by the viewport edge — worst at
   390px mobile where controls already span the full width.
   Fix: draw the ring INSIDE the border box. outline with a negative
   offset and an inset box-shadow never leave the element's own box, so
   there is nothing for overflow:hidden or the viewport edge to clip, no
   layout shift, and no position/size change. Resting appearance is
   untouched — only :focus-visible (keyboard Tab) shows the ring; mouse
   click/hover is unaffected. Dual-ring (white inner + black outer)
   follows the accepted 0.1.245 carousel precedent: white stays visible
   on the dark overlay, black stays visible over light image regions.
   No JS change: controls stay natively focusable, Enter/Space
   activation, Escape-to-close, slide nav, and focus restoration are
   vendor behavior and are not altered here. */
#pbOverlay #pbCloseBtn:focus-visible,
#pbOverlay #pbPrevBtn:focus-visible,
#pbOverlay #pbNextBtn:focus-visible,
#pbOverlay #pbAutoplayBtn:focus-visible,
#pbOverlay .pbThumbs a:focus-visible,
#pbOverlay #pbCaption label:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: -3px !important;
  box-shadow: inset 0 0 0 6px #000 !important;
}

/* PFOA Gallery Lightbox 0.1.25: B5 focus-visibility + edge-safe Close.
   (1) Vendor leaves `#pbOverlay .prevNext` at `opacity:0` except on mouse
   hover (`.on .prevNext:hover` -> .5, `:active` -> 1), so keyboard Tab to
   Prev/Next kept them invisible -- including their inset focus rings,
   which inherit the element opacity. Render them on `:focus-visible` at
   the established hover opacity (.5). Resting (unfocused) stays 0;
   hover/active behavior, navigation, and positioning are untouched.
   (2) Vendor parks `.on #pbCloseBtn` at `top:-2px right:-2px` (~2px
   outside the overlay/viewport), so even the inset 0.1.24 ring sits
   2px off-viewport. Nudge Close fully inside (`top:0 right:0`) ONLY on
   `:focus-visible` so the inset indicator is never clipped. Resting
   position, appearance, and close behavior are unchanged. */
#pbOverlay.on #pbPrevBtn:focus-visible,
#pbOverlay.on #pbNextBtn:focus-visible {
  opacity: .5 !important;
}
#pbOverlay.on #pbCloseBtn:focus-visible {
  top: 0 !important;
  right: 0 !important;
}

/* PFOA Gallery Lightbox 0.1.26: compact arrow-level Prev/Next focus.
   Defect: 0.1.24 drew its inset ring on the full-size .prevNext hit areas
   (35% width x 100% height), so Tab painted a half-screen rectangle across
   the photo. Fix: strip outline/box-shadow from the Prev/Next containers
   and draw a compact dual-ring around the visible arrow <b> instead, keyed
   off the parent's :focus-visible (b itself is never focusable; no markup,
   JS, or restructuring). Parent renders at full opacity on :focus-visible
   (supersedes 0.1.25 .5) so the child indicator inherits full contrast;
   resting stays 0, hover (.5) / active (1) untouched, hit areas unchanged.
   Positive offset is safe here: arrows sit well inside the viewport, unlike
   edge-parked Close which keeps its 0.1.24 inset ring. Hover-parity
   transform reveals the arrow at full size on keyboard focus (vendor only
   does so on :hover). */
#pbOverlay #pbPrevBtn:focus-visible,
#pbOverlay #pbNextBtn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
#pbOverlay.on #pbPrevBtn:focus-visible,
#pbOverlay.on #pbNextBtn:focus-visible {
  opacity: 1 !important;
}
#pbOverlay.on #pbPrevBtn:focus-visible b,
#pbOverlay.on #pbNextBtn:focus-visible b {
  outline: 3px solid #fff !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 6px #000 !important;
  border-radius: 4px !important;
}
#pbOverlay.on #pbPrevBtn:focus-visible b {
  transform: scale(1) translateX(20px) !important;
  -webkit-transform: scale(1) translateX(20px) !important;
}
#pbOverlay.on #pbNextBtn:focus-visible b {
  transform: scale(1) translateX(-20px) !important;
  -webkit-transform: scale(1) translateX(-20px) !important;
}