/* op-gallery.css - presentation for the admin-managed photo galleries.
   These are the <section data-op-photos="..."> blocks fed by op-public.php
   (Dogs, Wildlife, Cats) plus any static fallback images they fall back to.

   Every rule is scoped to [data-op-photos] on purpose: the homepage
   dog-showcase, the hero and every other static gallery on the site keep the
   exact styling they already have, because those selectors are shared.

   Rules for this file:
   - a photograph is never cropped - height is always auto, so portrait and
     landscape each keep their own aspect ratio;
   - a flowing multi-column (masonry) layout, so a mixed set of orientations
     still reads as one tidy photography gallery on desktop;
   - columns collapse automatically as the viewport narrows, so mobile is a
     clean single stack;
   - the existing lightbox, the hover feel and the black/gold chrome are
     preserved, and there is no fixed-height banner treatment anywhere. */

section.gallery[data-op-photos]{
  display:block;              /* the layout comes from the columns, not a grid */
  column-width:300px;         /* ~3 columns at desktop width, 1 on a phone */
  column-gap:16px;
  margin:16px 0 60px;
}

section.gallery[data-op-photos] figure{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  position:relative;
  margin:0 0 16px;
  overflow:hidden;            /* clips the hover zoom to the rounded corners */
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 10px 26px rgba(0,0,0,0.26);
  transition:box-shadow .25s ease;
}

section.gallery[data-op-photos] figure:hover{
  box-shadow:0 14px 34px rgba(0,0,0,0.34);
}

section.gallery[data-op-photos] figure img{
  display:block;
  width:100%;
  height:auto;                /* natural aspect ratio - never a banner crop */
  object-fit:contain;         /* belt and braces: letterbox, never crop */
  border:0;
  border-radius:0;            /* the figure supplies the rounded corners */
  box-shadow:none;
  transition:transform .3s ease;
}

section.gallery[data-op-photos] figure:hover img{
  transform:scale(1.03);
}

/* Admin caption - only rendered when the photo actually has one. */
section.gallery[data-op-photos] figcaption{
  padding:9px 12px 11px;
  font-size:.85rem;
  line-height:1.45;
  color:var(--muted);
  background:rgba(0,0,0,0.42);
  border-top:1px solid rgba(230,195,134,0.22);   /* champagne-gold hairline */
}

section.gallery[data-op-photos] figcaption:empty{
  display:none;
}