/* Gallery archive filter bar + role badge — see gallery-filters.js for
   the behavior this styles. Deliberately plain/functional for V1: no
   transition polish, matching the "don't overdo it" scope this first
   pass was built to. */

.jrh-gallery-filter-bar {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0 0 40px;
	/* Anchors .jrh-gallery-filter-indicator below, which positions itself
	   with numbers relative to this element. */
	position: relative;
}

.jrh-gallery-filter-btn {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #999;
	background: none;
	border: none;
	padding: 0 0 6px;
	margin: 0;
	cursor: pointer;
	/* Underline sits under every button whether active or not, so the
	   row's own height never shifts when the active one changes. The gold
	   itself is no longer drawn here — see .jrh-gallery-filter-indicator
	   below — this stays transparent purely to reserve the same 2px of
	   height every button already had. */
	border-bottom: 2px solid transparent;
}

.jrh-gallery-filter-btn:hover {
	color: #444;
}

.jrh-gallery-filter-btn.is-active {
	color: #111;
}

/* The one shared gold underline every button's own border-bottom used to
   draw individually — gallery-filters.js measures the clicked button's
   real position/size (via getBoundingClientRect, since a wrapped filter
   bar can put the active button on either row) and moves this to match,
   letting the transition below slide and resize it there instead of the
   old per-button instant color swap. Same idea as the homepage's own
   Directing-section spotlight that tracks between show titles — Joshua:
   "can the gold line animate over to what you selected, not jump. Like
   the spotlight moves?" JS sets this element's initial position inline
   before it's ever appended to the page, specifically so that first
   placement doesn't itself animate in from a 0/0 corner. */
.jrh-gallery-filter-indicator {
	position: absolute;
	height: 2px;
	/* Same gold used for the homepage's spotlight/double-rule accents —
	   a light touch of continuity with that page, not a copy of its
	   whole dark treatment (this page is white/light). */
	background: rgba(212, 175, 55, 0.85);
	pointer-events: none;
	transition: top 300ms ease, left 300ms ease, width 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.jrh-gallery-filter-indicator {
		transition-duration: 0.01ms;
	}
}

.jrh-gallery-hidden {
	display: none !important;
}

/* Takes over layout of the tile grid itself, replacing the theme's own
   float + :nth-child(4n) row-ending system — that system assumes every
   tile is always present and in its original order, so it breaks in
   two ways once tiles can be filtered/reordered: hidden tiles are still
   counted by :nth-child (floats can't tell a hidden tile isn't there),
   so the "zero out this tile's margin, it ends the row" logic lands on
   the wrong tile — and floated elements never center a partial row
   regardless, they just hug the left edge. Joshua: "the pictures are
   running into each other... on some of the other pages they are not
   centered." Flexbox with a real `gap` sidesteps both: spacing no
   longer depends on counting position at all, and a wrapped partial
   row centers on its own. Deliberately leaves each tile's own
   width/height untouched (the theme's own script sizes them to an
   exact square, unrelated to float vs flex) — only how they're spaced
   and aligned changes. */
#portfolio_filter_wrapper {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	/* 30px measured out to exactly the container's width with 4 tiles
	   per row (4 x 288.75px + 3 x 30px = 1245px, matching the
	   container's own 1245px) — right at that exact boundary, flexbox's
	   own sub-pixel rounding tipped it into wrapping to 3 per row
	   instead of 4. 20px leaves enough slack to fit 4 reliably. */
	gap: 20px;
}

#portfolio_filter_wrapper > .element.grid.classic4_cols {
	float: none !important;
	margin: 0 !important;
}

/* The theme also puts a classic float-era clearfix (content:" ";
   display:table;) on this wrapper's ::before AND ::after — meaningless
   once it's flex (nothing here still floats to clear), but not
   harmless: under flex, a pseudo-element with real content still
   generates as an actual (invisible, near-zero-width) flex item. The
   ::before one lands as the very FIRST item in the flex line — and
   since pseudo-elements don't repeat on every wrapped line, only ONE
   line is ever affected: line 1. Its own width plus the gap next to it
   still counts toward centering line 1's total content, so the REAL
   tiles on that line alone end up shifted right by half that phantom
   footprint — Joshua: "Spacing is still off. Its seems to always be the
   first row." Confirmed by moving the real first-row tiles to the end
   of the grid: whatever tiles landed in the row-1 SLOT kept the same
   offset regardless of which tiles they were, proving it was
   positional, not tied to specific tiles — and from there, to this
   pseudo-element specifically. */
#portfolio_filter_wrapper::before,
#portfolio_filter_wrapper::after {
	content: none !important;
	display: none !important;
}

/* The role badge sits in .post_detail, an empty slot the theme already
   renders under every grid item's title — reused rather than adding a
   new element to the theme's own markup. */
.jrh-gallery-badge {
	display: inline-block;
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}