/*
 * Agency888 Roster — front-end styles.
 * All classes are prefixed .a888- to avoid clashing with the host theme.
 * Colours stay neutral; the accent (featured badge, pagination) comes from the
 * --a888-accent custom property set inline by the shortcode.
 */

.a888-roster {
	--a888-accent: #ed1e24;
	--a888-cols: 4;
}

.a888-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 16px;
}

@media (min-width: 640px) {
	.a888-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.a888-grid {
		grid-template-columns: repeat(var(--a888-cols), minmax(0, 1fr));
	}
}

/*
 * v1.3.0 — FEATURED STRIP.
 *
 * The ordinary roster is 2 across on a phone, 3 from 640px and --a888-cols
 * from 1024px. That is right for a long browsable grid and wrong for a short
 * highlighted strip of three: two-up leaves a lone card orphaned on the second
 * row. Bruno asked for "three columns, or under each other for mobile", so the
 * featured strip stacks below 640px and follows --a888-cols from there up —
 * which the `number` attribute has already set to match the card count.
 */
.a888-featured .a888-grid {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.a888-featured .a888-grid {
		grid-template-columns: repeat(var(--a888-cols), minmax(0, 1fr));
	}
}

/*
 * v1.3.0 — flag filter (Passport Ready). A single tick inside the stacked
 * first column, under Gender. No legend: a one-line control does not need a
 * heading repeating its own label, and the fieldset is there for grouping
 * consistency with its siblings, not for a caption.
 */
.a888-filter-flag {
	border: 0;
	margin: 0;
	padding: 0;
}

.a888-flag-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
}

.a888-flag-label input {
	margin: 0;
	flex: 0 0 auto;
}

/*
 * ⚠️ EVERY link state must be pinned, not just the default.
 *
 * This widget renders inside someone else's theme. `.a888-card { color: inherit }`
 * is specificity (0,1,0), but a theme's `a:visited { color: … }` is (0,1,1) —
 * HIGHER — so it wins. The visible symptom was two talent names showing red on
 * the live roster while the rest were black: those were simply the two profiles
 * that had been clicked, taking the theme's visited colour. It read as though
 * those talent were flagged as special.
 *
 * Naming the class alongside each state lifts us to (0,2,0) and beats any bare
 * element-level theme rule. The same applies to every other anchor this plugin
 * renders — see the pill and pagination rules.
 */
.a888-card,
.a888-card:link,
.a888-card:visited,
.a888-card:hover,
.a888-card:active,
.a888-card:focus {
	display: block;
	text-decoration: none;
	color: inherit;
}

.a888-photo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	margin-bottom: 10px;
	background: #f3f4f6;
	border-radius: 12px;
	overflow: hidden;
}

.a888-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.a888-card:hover .a888-photo img {
	transform: scale(1.05);
}

.a888-initials {
	font-size: 1.875rem;
	font-weight: 600;
	color: #d1d5db;
}

.a888-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 2px 8px;
	background: var(--a888-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 9999px;
}

.a888-name {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.3;
}

.a888-type {
	display: block;
	margin-top: 1px;
	font-size: 0.75rem;
	color: #6b7280;
}

.a888-loc {
	display: block;
	margin-top: 1px;
	font-size: 0.75rem;
	color: #9ca3af;
}

.a888-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
	font-size: 0.875rem;
}

/* Same visited-colour protection as the cards and pills (see the .a888-card
   note): a bare theme `a:visited` rule would otherwise recolour whichever page
   number the visitor had already been to. */
.a888-page-link,
.a888-page-link:link,
.a888-page-link:visited,
.a888-page-link:hover,
.a888-page-link:active,
.a888-page-link:focus {
	padding: 8px 16px;
	background: var(--a888-accent);
	/* WHITE, not inherit — these sit ON the accent. An earlier draft pinned
	   them to inherit like the cards and pills, which would have turned a
	   visited page button into dark text on a red chip. */
	color: #fff;
	text-decoration: none;
	border-radius: 8px;
}

.a888-page-link:hover {
	opacity: 0.9;
}

.a888-page-info {
	color: #6b7280;
}

.a888-notice,
.a888-empty {
	padding: 16px;
	font-size: 0.875rem;
	color: #6b7280;
}

/*
 * ── Filters (v1.1.0) ──────────────────────────────────────────────────────
 * Type pills + an attribute panel. Deliberately quiet: the talent photos are
 * the page, so the controls stay neutral and only the ACTIVE pill and the
 * apply button carry the agency accent. Everything inherits the host theme's
 * font rather than imposing one, because this renders inside someone else's
 * site and a second typeface would read as a bolted-on widget.
 */

.a888-filters {
	margin-bottom: 24px;
}

.a888-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.a888-pill,
.a888-pill:link,
.a888-pill:visited,
.a888-pill:active {
	color: inherit;
}

.a888-pill {
	display: inline-block;
	padding: 7px 16px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	color: inherit;
	background: transparent;
	transition: border-color .15s ease, background-color .15s ease;
}

.a888-pill:hover,
.a888-pill:focus-visible {
	border-color: var(--a888-accent);
}

.a888-pill.is-active,
.a888-pill.is-active:link,
.a888-pill.is-active:visited,
.a888-pill.is-active:hover,
.a888-pill.is-active:focus {
	background: var(--a888-accent);
	border-color: var(--a888-accent);
	color: #fff;
}

/* Host themes routinely put margins/padding on bare <form> elements, which
   would push the panel away from the pills and reopen the spacing gap this
   layout is trying to control. Neutralise it rather than hope. */
.a888-filter-form {
	margin: 0;
	padding: 0;
}

.a888-filter-panel {
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 10px;
}

.a888-filter-toggle {
	padding: 11px 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.a888-filter-toggle::-webkit-details-marker {
	display: none;
}

/* A rotating caret, so open/closed is legible without relying on the native
   marker that varies between browsers. */
.a888-filter-toggle::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 9px;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transform: translateY(-1px);
	transition: transform .15s ease;
}

.a888-filter-panel[open] > .a888-filter-toggle::before {
	transform: rotate(90deg) translateX(-1px);
}

/* Active-filter count on the collapsed toggle. The panel stays shut after an
   apply (see the note in render_filters), so this is the only signal that
   filters are on — it has to read at a glance. */
.a888-filter-count {
	display: inline-block;
	min-width: 18px;
	padding: 1px 6px;
	margin-left: 2px;
	border-radius: 999px;
	background: var(--a888-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	vertical-align: 1px;
}

/* v1.2.2 — more room. 18px between a column of fifteen checkboxes and the next
   one reads as a single wall of text; Bruno: "you tend to make everything so
   close". The row gap is larger than the column gap on purpose, because rows are
   what run together when a tall category sits beside a short one. */
.a888-filter-groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	column-gap: 28px;
	row-gap: 34px;
	padding: 8px 20px 22px;
}

.a888-filter-group {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.a888-filter-group legend {
	padding: 0;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .6;
}

.a888-filter-opt {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}

.a888-filter-opt input {
	flex: none;
	margin: 0;
}

.a888-filter-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 16px 16px;
}

.a888-filter-apply {
	padding: 9px 20px;
	border: 0;
	border-radius: 8px;
	background: var(--a888-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.a888-filter-apply:hover {
	opacity: .9;
}

.a888-filter-clear,
.a888-filter-clear:link,
.a888-filter-clear:visited,
.a888-filter-clear:hover,
.a888-filter-clear:focus {
	font-size: 14px;
	color: inherit;
	opacity: .65;
}

.a888-filter-clear:hover {
	opacity: 1;
}

/* Keyboard users must be able to see where they are — the host theme cannot be
   relied on to provide a visible focus ring inside the widget. */
.a888-pill:focus-visible,
.a888-filter-toggle:focus-visible,
.a888-filter-apply:focus-visible,
.a888-filter-clear:focus-visible,
.a888-filter-opt input:focus-visible {
	outline: 2px solid var(--a888-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.a888-pill,
	.a888-filter-toggle::before {
		transition: none;
	}
}

/* ── v1.2.2 — range filters, and the stacked first column ──────────────────
   Age, height and gender share one grid cell, stacked. 1.2.0 gave each range
   its own cell, which left two columns mostly empty and pushed the last
   category onto a row by itself.

   The GAP is deliberate and generous. Three separate controls in one column
   need to read as three things, not one dense block. */
.a888-filter-stack {
	display: flex;
	flex-direction: column;
	gap: 26px;
	min-width: 0;
}

.a888-filter-range {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.a888-range-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* The input selector is specific enough to beat a theme's bare `input` rules,
   which is what left these looking like unstyled boxes: the stylesheet that
   styled them was cached at 1.1.3 and never loaded. */
.a888-roster .a888-range-row input[type="number"] {
	flex: 1 1 0;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 10px;
	font: inherit;
	font-size: 13px;
	line-height: 1.35;
	color: #111827;
	background-color: #fff;
	background-image: none;
	border: 1px solid #d8dbe0;
	border-radius: 8px;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.a888-roster .a888-range-row input[type="number"]::placeholder {
	color: #9ca3af;
	opacity: 1;
}

.a888-roster .a888-range-row input[type="number"]:hover {
	border-color: #c3c7cd;
}

.a888-roster .a888-range-row input[type="number"]:focus {
	border-color: var(--a888-accent, #ed1e24);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}

/* Spinners add visual noise at this size and the labels already say Min/Max. */
.a888-roster .a888-range-row input[type="number"]::-webkit-outer-spin-button,
.a888-roster .a888-range-row input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.a888-roster .a888-range-row input[type="number"] {
	-moz-appearance: textfield;
}

/*
 * v1.4.0 — COUNTRY dropdown.
 *
 * Styled to MATCH the range inputs above, property for property, because a
 * theme's bare `select` rule would otherwise render it with the browser
 * default border while the number inputs beside it looked designed - which is
 * exactly the complaint the range inputs drew in 1.2.2 ("What are those
 * fields??? They look so bad!"). Same prefix (.a888-roster) so it beats a
 * theme's own select styling on specificity.
 *
 * appearance:none removes the platform chrome; the arrow is drawn as an inline
 * SVG background so it looks the same on every OS. padding-right leaves room
 * for it.
 */
.a888-roster .a888-filter-select select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 30px 8px 10px;
	font: inherit;
	font-size: 13px;
	line-height: 1.35;
	color: #111827;
	background-color: #fff;
	border: 1px solid #d8dbe0;
	border-radius: 8px;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 16px 16px;
}

.a888-roster .a888-filter-select select:hover {
	border-color: #c3c7cd;
}

.a888-roster .a888-filter-select select:focus {
	border-color: var(--a888-accent, #ed1e24);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}