.union-member-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 1rem;
}

.union-member-card {
	position: relative; /* anchors .position-info-widget in its top-right corner */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.35rem;
	flex: 0 1 10rem;
	padding: 1rem;
	background-color: var(--color-card-bg);
	border-radius: 12px;
	box-shadow: 0 4px 12px var(--color-shadow);
}

/* Open Positions cards carry more text (description shown inline, not
   behind an icon -- see union_position_card.html), so they get more room
   than a plain Sitting Members card. Wider still than the original 16rem --
   responsibilities can run long, and a narrower card just wraps that text
   onto more lines, making the card taller instead of easier to read. */
.union-member-card--open {
	flex-basis: 18rem;
	text-align: left;
	align-items: flex-start;
}

.union-member-card h3 {
	margin: 0.25rem 0 0;
	font-size: 1rem;
}

.union-member-picture,
.union-member-picture--placeholder {
	width: 8rem;
	height: 8rem;
	object-fit: cover;
	border-radius: 999px;
	border: 2px solid var(--color-border);
	margin: 0.5rem 1rem;
}

.union-member-picture--placeholder {
	background-color: var(--color-bg-dark, var(--color-text-muted));
	opacity: 0.15;
}

.union-member-role {
	color: var(--accent-color, var(--color-border));
}

.union-member-role .role {
	font-size: 0.9rem;
	font-weight: 550;
}

.union-member-role .role-main {
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--accent-color, var(--color-border));
}

.union-position-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: bold;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	color: var(--color-on-accent);
}

.union-position-badge--open {
	background-color: var(--color-success);
}

.union-position-badge--opening_soon {
	background-color: var(--color-cta);
}

.union-position-note {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.union-member-email {
	font-size: 0.85rem;
	color: var(--color-text);
	word-break: break-word;
}

/* One <li> per member.responsibilities item (union_position_card.html) --
richtext (bold/italic only, see article/unions.py), so {{ item }} renders
as a <p> inside each <li>. Shared by both the inline Open Positions card
and the Sitting Members info popover. */
.union-position-responsibilities {
	margin-top: 0.25rem;
	width: 100%;
}

/* the global `p { font-size: 1.05rem; }` rule (elements.css) sets that
directly on the tag itself, which always wins over inheriting this <li>'s
own font-size regardless of specificity (a property set directly on an
element is never overridden by inheritance) -- same fix as .prose p in
article_alignment.css. margin:0 too, since a bare <p> otherwise carries
the browser's own default paragraph margin, which here would just add
uneven space inside the <li> on top of the li+li divider/gap below.
display:inline on top of both -- list-style-position:inside (elements.css)
puts the bullet as the first inline box of the li's content, but a <p> is
block-level by default, so the marker was rendering on its own line above
it instead of in front of the text. Safe to force inline here specifically
(unlike a general <p>) since this richtext only allows bold/italic, so a
<p> in this one context never wraps more than a single line of inline
content anyway. */
.union-position-responsibilities p {
	font-size: inherit;
	margin: 0;
	display: inline;
}

/* h3 on the Open Positions card, h4 in the Sitting Members info popup --
same visual treatment either way, just whichever heading level is
correct for that context's own hierarchy (see union_position_card.html's
own comment on the h3/h4 split). No font-size here -- h3 only ever
appears under .union-member-card--open, h4 only ever under
.position-info-panel, and both of those contexts always set their own
more-specific font-size override below (this file) / in union_position_
info.css, so a size set here would never actually render. */
.union-position-responsibilities h3,
.union-position-responsibilities h4 {
	margin: 0;
	font-weight: bold;
}

/* list-style-position:inside comes from the sitewide ul/ol reset
(elements.css) -- no extra padding-left needed, the marker already sits
flush with the text instead of hanging outside the box. No font-size here,
same reasoning as the heading rule above -- this ul only ever renders
inside .union-member-card--open or .position-info-panel, both of which
always override it. */
.union-position-responsibilities ul {
	margin: 0.3rem 0 0;
	padding-left: 0;
	list-style-position: inside;
}

.union-position-responsibilities li + li {
	margin-top: 0.2rem;
	padding-left: 0;
	margin-left: 0;
	list-style-position: inside;
}

/* Same bigger-text/more-breathing-room/divider-line treatment as the
Sitting Members info popover (union_position_info.css's own
.position-info-panel .union-position-responsibilities overrides) --
mirrored here for the Open Positions card's own reading context. */
.union-member-card--open .union-position-responsibilities h3 {
	font-size: 1rem;
}

.union-member-card--open .union-position-responsibilities ul {
	font-size: 1.05rem;
	line-height: 1.3;
}

.union-member-card--open .union-position-responsibilities li + li {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--color-border);
}

.union-position-held-by {
  /* .union-member-grid's flex row stretches every card in it to the
	 tallest one, and .union-member-card--open is itself a column flex
	 box -- margin-top:auto pushes this to the bottom of that stretched
	 height instead of sitting wherever the content above happens to end. */
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.union-position-held-by--vacant {
	align-self: center;
	color: var(--color-text-muted);
	font-style: italic;
	font-weight: normal;
}