/* ArtPro Gallery — WordPress-only additions.
 *
 * styles.css is a byte-identical copy of the live site's stylesheet and must
 * stay that way so it can be diffed against the source. Anything the port
 * genuinely needs on top goes here instead — and only things the static site
 * had no need for. This is NOT a place to restyle the design.
 *
 * Loaded after styles.css.
 */

/* ------------------------------------------------------------------
   Filter wrapper on Art by Artists.
   The tiles there are .artwork, but the shared filter script works on
   .card, so each tile is wrapped in one that carries the data hooks.
   The wrapper must not create a box of its own or it would break the
   grid — hence display:contents.

   This has to be a class, not an inline style: the filter toggles
   element.style.display between 'none' and '', and '' would wipe an
   inline declaration and leave the span as display:inline.
   ------------------------------------------------------------------ */
.card--passthrough { display: contents; }

/* ------------------------------------------------------------------
   Long words and pasted URLs in client-edited text.
   The static site's copy was hand-written and always fitted; content
   coming from the admin screen may not, and an overflowing address or
   email is the classic way a phone layout ends up scrolling sideways.
   ------------------------------------------------------------------ */
.loc__addr,
.contact-meta__v,
.artist-block__meta,
.card__title,
.card__artist,
.artwork__title,
.artwork__meta {
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------
   Gallery photo strip — three across.

   Asked for by Louis on 2026-08-11. The original (page-styles.css,
   from gallery.html) used auto-fill at minmax(200px, 1fr), which on a
   wide screen gives five or six small tiles per row. Three larger ones
   suit gallery interiors better.

   This overrides rather than edits page-styles.css, which stays a
   verbatim copy of the static site's blocks.
   ------------------------------------------------------------------ */
.gal-photos { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 860px) { .gal-photos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gal-photos { grid-template-columns: 1fr; } }

/* Deliberately NOT setting overflow-x:hidden on html or body. The site header
 * is position:sticky, and overflow on an ancestor turns it into a scroll
 * container, which silently kills sticky. Anything that overflows should be
 * fixed where it overflows — hiding it just moves the bug somewhere harder
 * to find. */