/* PXC Roster – Frontend Styles
 *
 * Signature style font: TuesdayNight Regular (commercial, by Nicky Laatz).
 * Drop tuesdaynight_regular.woff2 / .woff into assets/fonts/ and the
 * @font-face below picks it up automatically. If a theme already registers
 * the family "tuesday_nightregular" (e.g. Qode/arrosa), the stack uses that
 * automatically too. Without either, the style falls back to "Mrs Saint
 * Delafield" (Google Fonts, loaded on demand). See the font stack below.
 *
 * Theming via CSS custom properties on .pxcrst-roster-wrapper:
 *
 *   --pxcrst-primary        Brand/accent color (default: #e91e8c)
 *   --pxcrst-primary-text   Text on primary background (default: #fff)
 *   --pxcrst-card-radius    Card corner radius
 *   --pxcrst-gap            Grid gap
 *   --pxcrst-font           Font family
 *
 * All inner selectors are prefixed with .pxcrst-roster-wrapper to ensure
 * specificity (0,2,0) beats typical theme rules like .entry-content h3 (0,1,1).
 */

/* -------------------------------------------------------------------------
   Signature font face (TuesdayNight, with Mrs Saint Delafield fallback)
------------------------------------------------------------------------- */
@font-face {
	font-family: 'TuesdayNight';
	src: url('../fonts/tuesdaynight_regular.woff2') format('woff2'),
	     url('../fonts/tuesdaynight_regular.woff')  format('woff');
	font-weight: normal;
	font-style:  normal;
	font-display: swap;
}

/* -------------------------------------------------------------------------
   Base / variables
------------------------------------------------------------------------- */
.pxcrst-roster-wrapper {
	--pxcrst-primary:            #e91e8c;
	--pxcrst-primary-text:       #ffffff;
	--pxcrst-text:               #1a1a1a;
	--pxcrst-text-muted:         #777777;
	--pxcrst-bg:                 #ffffff;
	--pxcrst-border:             #e4e4e4;
	--pxcrst-card-radius:        6px;
	--pxcrst-card-bg:            #ffffff;
	--pxcrst-card-shadow:        0 1px 3px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05);
	--pxcrst-card-shadow-hover:  0 1px 3px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05);
	--pxcrst-font:               inherit;
	--pxcrst-gap:                32px;

	font-family: var(--pxcrst-font);
	color: var(--pxcrst-text);
	box-sizing: border-box;
}

.pxcrst-roster-wrapper *,
.pxcrst-roster-wrapper *::before,
.pxcrst-roster-wrapper *::after {
	box-sizing: inherit;
}

/* -------------------------------------------------------------------------
   Filter bar
------------------------------------------------------------------------- */
.pxcrst-roster-wrapper .pxcrst-roster-filters {
	display: flex;
	flex-direction: column;
	/* Generous gap between the department row and the function row so the two
	   filter groups stay visually distinct, especially when either row wraps. */
	gap: 20px;
	margin-bottom: 36px;
}

.pxcrst-roster-wrapper .pxcrst-roster-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Dynamic function filters hide buttons (and the whole row) via the [hidden]
   attribute; the display rules below would otherwise override it. */
.pxcrst-roster-wrapper .pxcrst-roster-filter-btn[hidden],
.pxcrst-roster-wrapper .pxcrst-roster-filter-row[hidden] {
	display: none;
}

.pxcrst-roster-wrapper .pxcrst-roster-filter-btn {
	display: inline-flex;
	align-items: center;
	padding: 7px 20px;
	border: 2px solid var(--pxcrst-border);
	border-radius: 100px;
	background: transparent;
	color: var(--pxcrst-text);
	font-family: var(--pxcrst-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	line-height: 1;
}

.pxcrst-roster-wrapper .pxcrst-roster-filter-btn:hover {
	background: rgba(233, 30, 140, 0.07);
	border-color: var(--pxcrst-border);
	color: var(--pxcrst-text);
}

.pxcrst-roster-wrapper .pxcrst-roster-filter-btn.is-active {
	background: var(--pxcrst-primary);
	border-color: var(--pxcrst-primary);
	color: var(--pxcrst-primary-text);
}

.pxcrst-roster-wrapper .pxcrst-roster-filter-btn:focus-visible {
	outline: 3px solid var(--pxcrst-primary);
	outline-offset: 2px;
}

/* Second filter row (Funktionen) – slightly smaller */
.pxcrst-roster-wrapper .pxcrst-roster-filter-row--func .pxcrst-roster-filter-btn {
	padding: 5px 15px;
	font-size: 11px;
}

/* Active function pills use an 80%-opacity accent fill so they read as
   visually distinct from the solid department pills. */
.pxcrst-roster-wrapper .pxcrst-roster-filter-row--func .pxcrst-roster-filter-btn.is-active {
	background:    color-mix(in srgb, var(--pxcrst-primary) 80%, transparent);
	border-color: color-mix(in srgb, var(--pxcrst-primary) 80%, transparent);
}

/* Filter style: Chips — rectangular with small radius */
.pxcrst-roster-wrapper .pxcrst-roster-filters--chips .pxcrst-roster-filter-btn {
	border-radius:   5px;
	border-width:    1.5px;
	padding:         7px 18px;
	letter-spacing:  0.04em;
}

.pxcrst-roster-wrapper .pxcrst-roster-filters--chips .pxcrst-roster-filter-row--func .pxcrst-roster-filter-btn {
	padding: 5px 13px;
}

/* Filter style: Cards — like Chips but larger (taller hit area) */
.pxcrst-roster-wrapper .pxcrst-roster-filters--cards .pxcrst-roster-filter-btn {
	border-radius:   6px;
	border-width:    1.5px;
	min-height:      42px;   /* Unternehmensbereiche */
	padding:         4px 22px;
	font-size:       14px;
	letter-spacing:  0.04em;
}

.pxcrst-roster-wrapper .pxcrst-roster-filters--cards .pxcrst-roster-filter-row--func .pxcrst-roster-filter-btn {
	min-height: 36px;        /* Funktionen */
	padding:    4px 18px;
	font-size:  12px;
}

/* Filter alignment: centered (default is left) */
.pxcrst-roster-wrapper .pxcrst-roster-filters--align-center .pxcrst-roster-filter-row {
	justify-content: center;
}

/* -------------------------------------------------------------------------
   Member count
------------------------------------------------------------------------- */
.pxcrst-roster-wrapper .pxcrst-roster-count {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--pxcrst-text-muted);
	transition: opacity 0.2s;
}

.pxcrst-roster-wrapper .pxcrst-roster-count-num {
	font-weight: 700;
	color: var(--pxcrst-text);
}

/* Count inherits the filter alignment (default is left) */
.pxcrst-roster-wrapper .pxcrst-roster-count--align-center {
	text-align: center;
}

/* -------------------------------------------------------------------------
   Grid  — NOTE: repeat() does not support CSS custom properties as count.
           Each column count must be set explicitly.
------------------------------------------------------------------------- */
.pxcrst-roster-wrapper .pxcrst-roster-grid {
	display: grid;
	gap: var(--pxcrst-gap);
	grid-template-columns: repeat(4, minmax(0, 1fr)); /* default */
}

/* Column overrides — modifier classes sit on the wrapper element itself */
.pxcrst-roster-wrapper.pxcrst-roster-cols-3 .pxcrst-roster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pxcrst-roster-wrapper.pxcrst-roster-cols-4 .pxcrst-roster-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pxcrst-roster-wrapper.pxcrst-roster-cols-5 .pxcrst-roster-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Responsive */
@media (max-width: 1100px) {
	.pxcrst-roster-wrapper.pxcrst-roster-cols-5 .pxcrst-roster-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.pxcrst-roster-wrapper .pxcrst-roster-grid,
	.pxcrst-roster-wrapper.pxcrst-roster-cols-3 .pxcrst-roster-grid,
	.pxcrst-roster-wrapper.pxcrst-roster-cols-4 .pxcrst-roster-grid,
	.pxcrst-roster-wrapper.pxcrst-roster-cols-5 .pxcrst-roster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobile column count is driven by the wrapper modifier (.pxcrst-roster-mcols-*),
   set from the team's "Spalten (Mobile)" setting. Default is a single column so
   members stack cleanly underneath each other. */
@media (max-width: 640px) {
	.pxcrst-roster-wrapper .pxcrst-roster-grid,
	.pxcrst-roster-wrapper.pxcrst-roster-cols-3 .pxcrst-roster-grid,
	.pxcrst-roster-wrapper.pxcrst-roster-cols-4 .pxcrst-roster-grid,
	.pxcrst-roster-wrapper.pxcrst-roster-cols-5 .pxcrst-roster-grid { grid-template-columns: minmax(0, 1fr); }

	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2 .pxcrst-roster-grid,
	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2.pxcrst-roster-cols-3 .pxcrst-roster-grid,
	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2.pxcrst-roster-cols-4 .pxcrst-roster-grid,
	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2.pxcrst-roster-cols-5 .pxcrst-roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* On very narrow screens even the 2-column mobile option collapses to one. */
@media (max-width: 400px) {
	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2 .pxcrst-roster-grid,
	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2.pxcrst-roster-cols-3 .pxcrst-roster-grid,
	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2.pxcrst-roster-cols-4 .pxcrst-roster-grid,
	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2.pxcrst-roster-cols-5 .pxcrst-roster-grid { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   Centered grid (filter alignment = center)
   — The `--center` class is toggled by JS only when the visible members don't
     fill a full row (count < columns). In that single-row case we lay the grid
     out as centered flexbox so the members are centered instead of left-aligned.
     As soon as they fill one or more full rows the class is removed and the
     normal grid (left-aligned) applies again. Card widths mirror the column
     counts/breakpoints above; the gap is inherited from `.pxcrst-roster-grid`.
------------------------------------------------------------------------- */
.pxcrst-roster-wrapper .pxcrst-roster-grid--center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.pxcrst-roster-wrapper .pxcrst-roster-grid--center > .pxcrst-roster-card,
.pxcrst-roster-wrapper.pxcrst-roster-cols-4 .pxcrst-roster-grid--center > .pxcrst-roster-card { width: calc((100% - 3 * var(--pxcrst-gap)) / 4); }
.pxcrst-roster-wrapper.pxcrst-roster-cols-3 .pxcrst-roster-grid--center > .pxcrst-roster-card { width: calc((100% - 2 * var(--pxcrst-gap)) / 3); }
.pxcrst-roster-wrapper.pxcrst-roster-cols-5 .pxcrst-roster-grid--center > .pxcrst-roster-card { width: calc((100% - 4 * var(--pxcrst-gap)) / 5); }

@media (max-width: 1100px) {
	.pxcrst-roster-wrapper.pxcrst-roster-cols-5 .pxcrst-roster-grid--center > .pxcrst-roster-card { width: calc((100% - 3 * var(--pxcrst-gap)) / 4); }
}

@media (max-width: 900px) {
	.pxcrst-roster-wrapper .pxcrst-roster-grid--center > .pxcrst-roster-card,
	.pxcrst-roster-wrapper.pxcrst-roster-cols-3 .pxcrst-roster-grid--center > .pxcrst-roster-card,
	.pxcrst-roster-wrapper.pxcrst-roster-cols-4 .pxcrst-roster-grid--center > .pxcrst-roster-card,
	.pxcrst-roster-wrapper.pxcrst-roster-cols-5 .pxcrst-roster-grid--center > .pxcrst-roster-card { width: calc((100% - 2 * var(--pxcrst-gap)) / 3); }
}

@media (max-width: 640px) {
	.pxcrst-roster-wrapper .pxcrst-roster-grid--center > .pxcrst-roster-card,
	.pxcrst-roster-wrapper.pxcrst-roster-cols-3 .pxcrst-roster-grid--center > .pxcrst-roster-card,
	.pxcrst-roster-wrapper.pxcrst-roster-cols-4 .pxcrst-roster-grid--center > .pxcrst-roster-card,
	.pxcrst-roster-wrapper.pxcrst-roster-cols-5 .pxcrst-roster-grid--center > .pxcrst-roster-card { width: 100%; }

	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2 .pxcrst-roster-grid--center > .pxcrst-roster-card,
	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2.pxcrst-roster-cols-3 .pxcrst-roster-grid--center > .pxcrst-roster-card,
	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2.pxcrst-roster-cols-4 .pxcrst-roster-grid--center > .pxcrst-roster-card,
	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2.pxcrst-roster-cols-5 .pxcrst-roster-grid--center > .pxcrst-roster-card { width: calc((100% - 1 * var(--pxcrst-gap)) / 2); }
}

@media (max-width: 400px) {
	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2 .pxcrst-roster-grid--center > .pxcrst-roster-card,
	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2.pxcrst-roster-cols-3 .pxcrst-roster-grid--center > .pxcrst-roster-card,
	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2.pxcrst-roster-cols-4 .pxcrst-roster-grid--center > .pxcrst-roster-card,
	.pxcrst-roster-wrapper.pxcrst-roster-mcols-2.pxcrst-roster-cols-5 .pxcrst-roster-grid--center > .pxcrst-roster-card { width: 100%; }
}

/* -------------------------------------------------------------------------
   Card
------------------------------------------------------------------------- */
.pxcrst-roster-wrapper .pxcrst-roster-card[hidden] {
	display: none;
}

.pxcrst-roster-wrapper .pxcrst-roster-card-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: var(--pxcrst-card-bg);
	border: none;
	border-radius: var(--pxcrst-card-radius);
	box-shadow: var(--pxcrst-card-shadow);
	cursor: pointer;
	padding: 0;
	text-align: center;
	font-family: var(--pxcrst-font);
	overflow: hidden;
	position: relative;
}

.pxcrst-roster-wrapper .pxcrst-roster-card-inner:focus-visible {
	outline: 3px solid var(--pxcrst-primary);
	outline-offset: 2px;
}

/* Focus is restored to the card after closing the modal (for keyboard users),
   but we suppress the accent ring there — otherwise closing via Esc would leave
   a visible outline. Cleared on the next blur, so real Tab focus still shows it. */
.pxcrst-roster-wrapper .pxcrst-roster-card-inner.pxcrst-roster-no-focus-ring:focus-visible {
	outline: none;
}

/* Photo container — forces consistent aspect ratio regardless of image size */
.pxcrst-roster-wrapper .pxcrst-roster-card-photo {
	width: 100%;
	position: relative;
	overflow: hidden;
	background: #ebebeb;
	aspect-ratio: 3 / 4;
	isolation: isolate;
}

.pxcrst-roster-wrapper .pxcrst-roster-card-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: filter 0.25s ease;
}

.pxcrst-roster-wrapper .pxcrst-roster-card-inner:hover .pxcrst-roster-card-photo img {
	filter: saturate(0.5);
}

/* Hover overlay — photo only */
.pxcrst-roster-wrapper .pxcrst-roster-card-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--pxcrst-primary) 8%, transparent);
	opacity: 0;
	transition: opacity 0.25s;
	z-index: 1;
	pointer-events: none;
}

.pxcrst-roster-wrapper .pxcrst-roster-card-inner:hover .pxcrst-roster-card-photo::after {
	opacity: 1;
}

/* Accent border ring on hover */
.pxcrst-roster-wrapper .pxcrst-roster-card-inner:hover {
	box-shadow: 0 4px 14px rgba(0,0,0,.10), 0 0 0 2px var(--pxcrst-primary);
}

.pxcrst-roster-wrapper .pxcrst-roster-card-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.25s;
	z-index: 2;
	color: #fff;
	pointer-events: none;
}

.pxcrst-roster-wrapper .pxcrst-roster-card-overlay svg {
	width: 36px;
	height: 36px;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,.3));
}

.pxcrst-roster-wrapper .pxcrst-roster-card-inner:hover .pxcrst-roster-card-overlay {
	opacity: 1;
}

/* Placeholder when no photo */
.pxcrst-roster-wrapper .pxcrst-roster-card-photo-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e4e4e4;
}

.pxcrst-roster-wrapper .pxcrst-roster-card-photo-placeholder svg {
	width: 40%;
	max-width: 56px;
	color: #b0b0b0;
}

/* Card text */
.pxcrst-roster-wrapper .pxcrst-roster-card-info {
	padding: 12px 12px 14px;
	position: relative;
	background: var(--pxcrst-card-bg);
}

.pxcrst-roster-wrapper .pxcrst-roster-card-name {
	margin: 0 0 3px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pxcrst-text);
}

.pxcrst-roster-wrapper .pxcrst-roster-card-title {
	margin: 0;
	font-size: 12px;
	color: var(--pxcrst-text-muted);
	line-height: 1.4;
}

/* Static card (modal disabled) — no pointer, no hover effects */
.pxcrst-roster-wrapper .pxcrst-roster-card-inner--static {
	cursor: default;
}

.pxcrst-roster-wrapper .pxcrst-roster-card-inner--static:hover {
	box-shadow: var(--pxcrst-card-shadow);
}

.pxcrst-roster-wrapper .pxcrst-roster-card-inner--static:hover .pxcrst-roster-card-photo img {
	filter: none;
}

.pxcrst-roster-wrapper .pxcrst-roster-card-inner--static:hover .pxcrst-roster-card-photo::after {
	opacity: 0;
}

/* -------------------------------------------------------------------------
   List layout variant
------------------------------------------------------------------------- */
.pxcrst-roster-wrapper.pxcrst-roster-layout-list .pxcrst-roster-grid {
	grid-template-columns: 1fr !important;
	gap: 10px;
}

.pxcrst-roster-wrapper.pxcrst-roster-layout-list .pxcrst-roster-card-inner {
	flex-direction: row;
	text-align: left;
}

.pxcrst-roster-wrapper.pxcrst-roster-layout-list .pxcrst-roster-card-photo {
	width: 72px;
	flex-shrink: 0;
	aspect-ratio: auto;
	height: 72px;
}

.pxcrst-roster-wrapper.pxcrst-roster-layout-list .pxcrst-roster-card-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 12px 16px;
}

/* -------------------------------------------------------------------------
   Empty state
------------------------------------------------------------------------- */
.pxcrst-roster-wrapper .pxcrst-roster-empty {
	color: var(--pxcrst-text-muted);
	font-style: italic;
}

/* -------------------------------------------------------------------------
   Modal
------------------------------------------------------------------------- */
.pxcrst-roster-wrapper .pxcrst-roster-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pxcrst-roster-wrapper .pxcrst-roster-modal[hidden] {
	display: none;
}

body.pxcrst-roster-modal-open {
	overflow: hidden;
}

.pxcrst-roster-wrapper .pxcrst-roster-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.pxcrst-roster-wrapper .pxcrst-roster-modal-dialog {
	position: relative;
	z-index: 1;
	background: var(--pxcrst-bg);
	border-radius: 12px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
	max-width: 1140px;
	width: calc(100% - 32px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
}

/* Close button */
.pxcrst-roster-wrapper .pxcrst-roster-modal-close {
	position: sticky;
	top: 12px;
	float: right;
	margin: 12px 12px -44px auto;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: #eeeeee;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s;
	flex-shrink: 0;
}

.pxcrst-roster-wrapper .pxcrst-roster-modal-close svg {
	width: 16px;
	height: 16px;
	stroke: #555555;
}

.pxcrst-roster-wrapper .pxcrst-roster-modal-close:hover {
	background: #d8d8d8;
}

/* Prev / next */
.pxcrst-roster-wrapper .pxcrst-roster-modal-nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(6px);
	cursor: pointer;
	padding: 0;
	transition: background 0.15s;
}

.pxcrst-roster-wrapper .pxcrst-roster-modal-nav svg {
	width: 20px;
	height: 20px;
	stroke: #fff;
}

.pxcrst-roster-wrapper .pxcrst-roster-modal-prev { left: 12px; }
.pxcrst-roster-wrapper .pxcrst-roster-modal-next { right: 12px; }

.pxcrst-roster-wrapper .pxcrst-roster-modal-nav:hover  { background: rgba(0, 0, 0, 0.5); }
.pxcrst-roster-wrapper .pxcrst-roster-modal-nav:disabled { opacity: 0.2; cursor: default; }

.pxcrst-roster-wrapper .pxcrst-roster-modal-nav:focus,
.pxcrst-roster-wrapper .pxcrst-roster-modal-nav:focus-visible,
.pxcrst-roster-wrapper .pxcrst-roster-modal-close:focus,
.pxcrst-roster-wrapper .pxcrst-roster-modal-close:focus-visible {
	outline: none;
}

/* Modal content */
.pxcrst-roster-wrapper .pxcrst-roster-modal-content {
	padding: 28px 32px 36px;
	clear: both;
}

.pxcrst-roster-wrapper .pxcrst-modal-layout {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 40px;
	align-items: stretch;
}

/* Photo */
.pxcrst-roster-wrapper .pxcrst-modal-col-media {
	position: sticky;
	top: 16px;
}

.pxcrst-roster-wrapper .pxcrst-modal-photo,
.pxcrst-roster-wrapper .pxcrst-modal-photo-main {
	width: 100%;
	aspect-ratio: 3 / 4;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: #ebebeb;
}

.pxcrst-roster-wrapper .pxcrst-modal-photo img,
.pxcrst-roster-wrapper .pxcrst-modal-photo-main img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	border-radius: 8px;
	transition: opacity 0.2s;
}

/* Gallery with prev/next navigation */
.pxcrst-roster-wrapper .pxcrst-modal-photo-gallery {
	position: relative;
}

.pxcrst-roster-wrapper .pxcrst-modal-gallery-prev,
.pxcrst-roster-wrapper .pxcrst-modal-gallery-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(4px);
	cursor: pointer;
	padding: 0;
	opacity: 0;
	transition: background 0.15s, opacity 0.15s;
}

.pxcrst-roster-wrapper .pxcrst-modal-photo-gallery:hover .pxcrst-modal-gallery-prev,
.pxcrst-roster-wrapper .pxcrst-modal-photo-gallery:hover .pxcrst-modal-gallery-next {
	opacity: 1;
}

.pxcrst-roster-wrapper .pxcrst-modal-gallery-prev { left: 8px; }
.pxcrst-roster-wrapper .pxcrst-modal-gallery-next { right: 8px; }

.pxcrst-roster-wrapper .pxcrst-modal-gallery-prev svg,
.pxcrst-roster-wrapper .pxcrst-modal-gallery-next svg {
	width: 16px;
	height: 16px;
	stroke: #fff;
}

.pxcrst-roster-wrapper .pxcrst-modal-gallery-prev:hover,
.pxcrst-roster-wrapper .pxcrst-modal-gallery-next:hover { background: rgba(0, 0, 0, 0.65); }

.pxcrst-roster-wrapper .pxcrst-modal-gallery-prev:disabled,
.pxcrst-roster-wrapper .pxcrst-modal-gallery-next:disabled { opacity: 0.2; cursor: default; }

/* Dot indicators */
.pxcrst-roster-wrapper .pxcrst-modal-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
}

.pxcrst-roster-wrapper .pxcrst-modal-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pxcrst-border);
	transition: background 0.15s, transform 0.15s;
}

.pxcrst-roster-wrapper .pxcrst-modal-dot.is-active {
	background: var(--pxcrst-primary);
	transform: scale(1.25);
}

/* Info column */
.pxcrst-roster-wrapper .pxcrst-modal-col-info {
	display: flex;
	flex-direction: column;
	padding-top: 4px;
}

.pxcrst-roster-wrapper .pxcrst-modal-name {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--pxcrst-text);
}

.pxcrst-roster-wrapper .pxcrst-modal-job-title {
	margin: 0 0 18px;
	font-size: 15px;
	color: var(--pxcrst-text-muted);
}

/* Separator */
.pxcrst-roster-wrapper .pxcrst-modal-sep {
	border: none;
	border-top: 1px solid var(--pxcrst-border);
	margin: 18px 0;
}

/* Memberships */
.pxcrst-roster-wrapper .pxcrst-modal-memberships {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: auto;
}

.pxcrst-roster-wrapper .pxcrst-modal-membership {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}

.pxcrst-roster-wrapper .pxcrst-modal-dept { font-weight: 700; color: var(--pxcrst-text); }

.pxcrst-roster-wrapper .pxcrst-modal-funcs { color: var(--pxcrst-primary); }

.pxcrst-roster-wrapper .pxcrst-modal-funcs::before {
	content: '–';
	margin-right: 4px;
	color: var(--pxcrst-border);
}

/* Contact */
.pxcrst-roster-wrapper .pxcrst-modal-contact {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.pxcrst-roster-wrapper .pxcrst-modal-contact-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.pxcrst-roster-wrapper .pxcrst-modal-contact-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--pxcrst-text);
	text-decoration: none !important;
	transition: color 0.15s;
}

.pxcrst-roster-wrapper .pxcrst-modal-contact-link span {
	font-weight: 700;
	text-decoration: none !important;
}

.pxcrst-roster-wrapper .pxcrst-modal-contact-link:hover { color: var(--pxcrst-primary); text-decoration: none !important; }
.pxcrst-roster-wrapper .pxcrst-modal-contact-link:hover span { text-decoration: none !important; }

.pxcrst-roster-wrapper .pxcrst-modal-contact-link svg {
	color: var(--pxcrst-primary);
	flex-shrink: 0;
}

.pxcrst-roster-wrapper .pxcrst-modal-copy-btn {
	display: inline-flex;
	align-items: center;
	padding: 4px;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--pxcrst-text-muted);
	opacity: 0.45;
	transition: opacity 0.15s, color 0.15s;
	flex-shrink: 0;
	border-radius: 4px;
}

.pxcrst-roster-wrapper .pxcrst-modal-copy-btn:hover {
	opacity: 0.2;
}

.pxcrst-roster-wrapper .pxcrst-modal-copy-btn.is-copied {
	background: rgba(233, 30, 140, 0.12);
	color: var(--pxcrst-primary);
	opacity: 1;
}

/* Entry date */
.pxcrst-roster-wrapper .pxcrst-modal-entry-date {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--pxcrst-text-muted);
}

/* Quote */
.pxcrst-roster-wrapper .pxcrst-modal-quote {
	margin: 16px 0;
	padding: 12px 16px 12px 20px;
	/* Force the accent bar: many themes style `blockquote` with their own
	   border-left (often via .entry-content blockquote, which out-specifies us),
	   so we pin colour + width + style with !important to the team accent token. */
	border-left: 3px solid var(--pxcrst-primary) !important;
	background: #fafafa;
	border-radius: 0 4px 4px 0;
	font-style: italic;
	color: var(--pxcrst-text-muted);
	font-size: 14px;
	line-height: 1.6;
	position: relative;
}

.pxcrst-roster-wrapper .pxcrst-modal-quote::before {
	content: '\201C';
	position: absolute;
	top: -18px;
	right: 10px;
	font-size: 100px;
	line-height: 1;
	font-family: Georgia, 'Times New Roman', serif;
	color: color-mix(in srgb, var(--pxcrst-primary) 7%, transparent);
	pointer-events: none;
}

/* Description */
.pxcrst-roster-wrapper .pxcrst-modal-description {
	font-size: 14px;
	line-height: 1.7;
	color: var(--pxcrst-text);
}

.pxcrst-roster-wrapper .pxcrst-modal-description p:first-child { margin-top: 0; }
.pxcrst-roster-wrapper .pxcrst-modal-description p:last-child  { margin-bottom: 0; }

.pxcrst-roster-wrapper .pxcrst-modal-description a {
	color: var(--pxcrst-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pxcrst-roster-wrapper .pxcrst-modal-description a:hover {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Extra card fields (dept, email, phone, note) — all styles
------------------------------------------------------------------------- */
.pxcrst-roster-wrapper .pxcrst-roster-card-dept {
	margin:         0 0 3px;
	font-size:      11px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:          var(--pxcrst-primary);
	line-height:    1.3;
}

.pxcrst-roster-wrapper .pxcrst-roster-card-email,
.pxcrst-roster-wrapper .pxcrst-roster-card-phone {
	margin:    0 0 2px;
	font-size: 12px;
	color:     var(--pxcrst-text-muted);
	line-height: 1.4;
}

.pxcrst-roster-wrapper .pxcrst-roster-card-note {
	margin:      4px 0 0;
	font-size:   12px;
	color:       var(--pxcrst-text-muted);
	font-style:  italic;
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
   Style: Signature
   – Circular photo, name first, role in accent color below,
     handwritten first-name signature overlapping from below.
------------------------------------------------------------------------- */

/* More vertical breathing room between rows of signature cards (~30px on top
   of the base grid gap). Only the row gap grows; column spacing is unchanged. */
.pxcrst-roster-style-signature .pxcrst-roster-grid {
	row-gap: calc(var(--pxcrst-gap) + 30px);
}

/* Remove card shell. overflow:visible is essential here: the base card-inner
   clips with overflow:hidden, which would cut off the tall handwritten
   signature font (large ascenders/descenders) at the card's bottom edge. */
.pxcrst-roster-style-signature .pxcrst-roster-card-inner,
.pxcrst-roster-style-signature .pxcrst-roster-card-inner:hover {
	background: transparent;
	box-shadow: none;
	border:     none;
	text-align: center;
	overflow:   visible;
}

/* Circular photo – centered, square crop */
.pxcrst-roster-style-signature .pxcrst-roster-card-photo {
	width:         74%;
	margin:        16px auto 0;
	border-radius: 50%;
	aspect-ratio:  1 / 1;
}

.pxcrst-roster-style-signature .pxcrst-roster-card-photo::after {
	border-radius: 50%;
}

/* Suppress desaturation on hover */
.pxcrst-roster-style-signature .pxcrst-roster-card-inner:hover .pxcrst-roster-card-photo img {
	filter: none;
}

/* Text area – centred flex column, stacking context for z-index */
.pxcrst-roster-style-signature .pxcrst-roster-card-info {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	padding:        14px 12px 24px;   /* bottom room for the signature glyphs */
	position:       relative;
}

/* All text fields sit above the signature layer */
.pxcrst-roster-style-signature .pxcrst-roster-card-name,
.pxcrst-roster-style-signature .pxcrst-roster-card-title,
.pxcrst-roster-style-signature .pxcrst-roster-card-dept,
.pxcrst-roster-style-signature .pxcrst-roster-card-email,
.pxcrst-roster-style-signature .pxcrst-roster-card-phone,
.pxcrst-roster-style-signature .pxcrst-roster-card-note {
	position: relative;
	z-index:  1;
}

.pxcrst-roster-style-signature .pxcrst-roster-card-name {
	margin:      0 0 3px;
	font-size:   18px;
	font-weight: 700;
	line-height: 1.3;
}

/* Role – accent color, below name. Extra bottom margin spaces it from the
   email line that follows. */
.pxcrst-roster-style-signature .pxcrst-roster-card-title {
	margin:         0 0 14px;
	font-size:      11px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:          var(--pxcrst-primary);
}

/* Handwritten first-name signature – overlaps content above.
   Starts hidden (opacity:0) and is revealed once the signature web font has
   loaded: the frontend JS adds .pxcrst-fonts-ready on <html>, so all
   signatures fade in together instead of flashing a fallback font first. */
.pxcrst-roster-style-signature .pxcrst-roster-card-signature {
	margin-top:  0;   /* sits just below the email line */
	position:    relative;
	z-index:     0;       /* rendered behind the text elements */
	/* Font stack, in order of preference:
	   1. 'TuesdayNight'        – plugin-bundled file (assets/fonts/, if dropped in)
	   2. tuesday_nightregular  – theme-provided face (e.g. Qode/arrosa registers
	                              this family globally); used automatically if present
	   3. 'Mrs Saint Delafield' – Google Fonts fallback, loaded on demand
	   4. cursive               – generic last resort
	   Faces that are absent or 404 simply fall through to the next entry. */
	font-family: 'TuesdayNight', tuesday_nightregular, 'Mrs Saint Delafield', cursive;
	font-size:   52px;
	/* generous line-height so tall script glyphs (e.g. tuesday_nightregular,
	   which needs far more vertical room than the Google fallback) stay fully
	   visible and are never clipped at the bottom. */
	line-height: 1.5;
	color:       rgba(0, 0, 0, 0.10);
	opacity:        0;    /* revealed by .pxcrst-fonts-ready (see below) */
	pointer-events: none;
	user-select:    none;
	/* opacity is transitioned too, otherwise hovering out snaps opacity to
	   full while color is still magenta → a magenta flicker. */
	transition:     color 0.25s ease, opacity 0.4s ease;
}

/* Reveal: once the font is ready, fade all signatures in together */
.pxcrst-fonts-ready .pxcrst-roster-style-signature .pxcrst-roster-card-signature {
	opacity: 1;
}

/* Hover: signature lights up in accent color */
.pxcrst-fonts-ready .pxcrst-roster-style-signature .pxcrst-roster-card-inner:hover .pxcrst-roster-card-signature {
	color:   var(--pxcrst-primary);
	opacity: 0.30;
}

/* -------------------------------------------------------------------------
   Style: Released + Framed (shared card appearance)
   – No card frame. Photo with rounded corners only.
     Subtle overlay on hover + expand icon.
   Framed adds a subtle background behind the whole team grid.
------------------------------------------------------------------------- */

/* Strip card shell */
.pxcrst-roster-style-released .pxcrst-roster-card-inner,
.pxcrst-roster-style-framed   .pxcrst-roster-card-inner {
	background: transparent;
	box-shadow: none;
	border:     none;
}

.pxcrst-roster-style-released .pxcrst-roster-card-inner:hover,
.pxcrst-roster-style-framed   .pxcrst-roster-card-inner:hover {
	box-shadow: none;
}

/* Rounded photo corners */
.pxcrst-roster-style-released .pxcrst-roster-card-photo,
.pxcrst-roster-style-framed   .pxcrst-roster-card-photo {
	border-radius: 10px;
}

.pxcrst-roster-style-released .pxcrst-roster-card-photo::after,
.pxcrst-roster-style-framed   .pxcrst-roster-card-photo::after {
	border-radius: 10px;
	background:    rgba(0, 0, 0, 0.14);
}

/* Suppress desaturation on hover */
.pxcrst-roster-style-released .pxcrst-roster-card-inner:hover .pxcrst-roster-card-photo img,
.pxcrst-roster-style-framed   .pxcrst-roster-card-inner:hover .pxcrst-roster-card-photo img {
	filter: none;
}

/* Tighten text area, transparent background */
.pxcrst-roster-style-released .pxcrst-roster-card-info,
.pxcrst-roster-style-framed   .pxcrst-roster-card-info {
	padding:    10px 2px;
	text-align: center;
	background: transparent;
}

/* Framed: subtle background card around the team grid */
.pxcrst-roster-style-framed .pxcrst-roster-grid {
	background:    rgba(0, 0, 0, 0.03);
	border:        1px solid rgba(0, 0, 0, 0.07);
	border-radius: 14px;
	padding:       28px;
}

/* -------------------------------------------------------------------------
   Mobile modal — sheet from bottom
------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.pxcrst-roster-wrapper .pxcrst-roster-modal { align-items: flex-end; }

	.pxcrst-roster-wrapper .pxcrst-roster-modal-dialog {
		width: 100%;
		max-width: 100%;
		border-radius: 16px 16px 0 0;
		max-height: 90dvh;
	}

	.pxcrst-roster-wrapper .pxcrst-modal-layout { grid-template-columns: 1fr; }

	.pxcrst-roster-wrapper .pxcrst-modal-col-media { position: static; }

	.pxcrst-roster-wrapper .pxcrst-modal-photo,
	.pxcrst-roster-wrapper .pxcrst-modal-photo-main { aspect-ratio: 4 / 3; }

	.pxcrst-roster-wrapper .pxcrst-roster-modal-nav { display: none; }

	.pxcrst-roster-wrapper .pxcrst-roster-modal-content { padding: 16px 20px 32px; }

	/* --- Compact filter bar on mobile -----------------------------------
	   Smaller pills, tighter gaps and less bottom margin so the filters
	   read as a neat cluster instead of a tall wrapped block. */
	.pxcrst-roster-wrapper .pxcrst-roster-filters { gap: 16px; margin-bottom: 24px; }

	.pxcrst-roster-wrapper .pxcrst-roster-filter-row { gap: 6px; }

	.pxcrst-roster-wrapper .pxcrst-roster-filter-btn {
		padding:        6px 14px;
		font-size:      12px;
		letter-spacing: 0.03em;
	}

	.pxcrst-roster-wrapper .pxcrst-roster-filter-row--func .pxcrst-roster-filter-btn {
		padding:   4px 11px;
		font-size: 11px;
	}

	/* Keep the larger filter styles from blowing up the mobile layout. */
	.pxcrst-roster-wrapper .pxcrst-roster-filters--cards .pxcrst-roster-filter-btn {
		min-height: 36px;
		padding:    4px 14px;
		font-size:  12px;
	}

	.pxcrst-roster-wrapper .pxcrst-roster-filters--cards .pxcrst-roster-filter-row--func .pxcrst-roster-filter-btn {
		min-height: 32px;
		padding:    4px 11px;
		font-size:  11px;
	}
}