/* ============================================================
   Roster
   Composition follows the club's card reference: an oversized
   Tiller number anchored left, the headshot filling the right
   two thirds, name and stat line across the base.
   ============================================================ */

.osw-roster { padding-block: 0; }

/* The masthead texture itself now lives at the page level (#main::before in
   base.css), applied behind every template's top content -- not just the
   roster's. This used to draw its own copy of the same image again here,
   which meant two overlapping copies stacked on the roster page specifically.
   .osw-roster__head just keeps its spacing now; no background of its own. */
.osw-roster__head {
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
	padding: clamp(1rem, 3vw, 2.25rem) 0 clamp(0.625rem, 1.5vw, 1rem);
}
/*.osw-roster__head {
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
	padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(1.25rem, 3vw, 2rem);
}*/

.osw-roster__head-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--osw-gap);
	margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}

.osw-roster__title {
	font-family: var(--osw-brand);
	/* --osw-step-5 (clamp(2.25rem, 5vw, 3.75rem)) + ~10px at each end. */
	font-size: clamp(2.875rem, 5vw, 4.375rem);
	text-transform: uppercase;
	letter-spacing: 0.005em;
	display: block;
}
/* The season sits on its own line below the team name, in red, pulled up
   close to it. */
.osw-roster__title span {
	display: block;
	margin-top: 0.1rem;
	font-family: var(--osw-display);
	/* --osw-step-2 (1.125rem) + ~10px. */
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--osw-red);
	text-transform: none;
}

/* ---------- Filters and controls ---------- */

.osw-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--osw-gap);
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--osw-line);
}

/* Position filter -- All is the default and stays first. */
.osw-filters {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(1rem, 2.5vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.osw-filter {
	font-family: var(--osw-condensed);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--osw-step-2);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--osw-ink-dim);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 0.2rem 0;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}
.osw-filter abbr { text-decoration: none; border: 0; cursor: inherit; }
.osw-filter:hover { color: var(--osw-ink); }
.osw-filter[aria-pressed="true"] {
	color: var(--osw-ink);
	border-bottom-color: var(--osw-red);
}
.osw-filter[hidden] { display: none; }

.osw-toolbar__spacer { flex: 1 1 auto; }

.osw-tools {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.osw-select {
	font-family: var(--osw-display);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--osw-step-0);
	font-weight: 600;
	color: var(--osw-ink);
	background: transparent;
	border: 1px solid var(--osw-line);
	border-radius: 6px;
	padding: 0.3rem 2.2rem 0.3rem 0.85rem;
	line-height: 1;
	cursor: pointer;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
	                  linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	transition: border-color 0.15s;
}
.osw-select:hover { border-color: var(--osw-ink-mute); }

/* Icon buttons */
.osw-icon-btn {
	display: grid;
	place-items: center;
	width: 2.35rem;
	height: 2.35rem;
	background: transparent;
	border: 1px solid var(--osw-line);
	border-radius: 6px;
	color: var(--osw-ink-mute);
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.osw-icon-btn:hover { color: var(--osw-ink); border-color: var(--osw-ink-mute); }
.osw-icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.osw-icon-btn[aria-pressed="true"] {
	background: var(--osw-red);
	border-color: var(--osw-red);
	color: #fff;
}
/* Direction arrow flips with the sort order */
.osw-icon-btn[data-dir="desc"] svg { transform: rotate(180deg); }

/* Cards fade in when a filter changes */
@keyframes osw-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
.osw-card--enter { animation: osw-fade-in 0.28s ease both; }

/* Commitment badge -- the school a player has committed to. */
.osw-card__commit {
	position: absolute;
	top: 0.55rem;
	left: 0.55rem;
	z-index: 6;
	width: 2.9rem;
	height: 2.9rem;
	display: grid;
	place-items: center;
}
.osw-card__commit img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
}
/* Text fallback when no logo file has been added yet. */
.osw-card__commit span {
	font-family: var(--osw-display);
	font-weight: 700;
	font-size: var(--osw-step-min);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--osw-ink);
	background: var(--osw-red);
	padding: 0.2rem 0.4rem;
	border-radius: 3px;
	white-space: nowrap;
}
.osw-grid--list .osw-card__commit { display: none; }

/* ---------- Mobile ---------- */

@media (max-width: 480px) {
	/* Smaller floor so "U15AA ROSTER" is less likely to wrap to two lines,
	   and if it still does, the lines sit tighter. The season line loses its
	   own top margin so it sits right under the title instead of floating. */
	.osw-roster__title {
		font-size: clamp(2.25rem, 10vw, 2.875rem);
		line-height: 1.05;
	}
	.osw-roster__title span {
		margin-top: 0;
		font-size: 1.375rem;
	}

	/* Tighter gap and slightly smaller label so ALL/FORWARDS/DEFENCE/GOALIES
	   fit within the viewport instead of overflowing past the edge. */
	.osw-filters { gap: clamp(0.6rem, 4vw, 1.25rem); }
	.osw-filter { font-size: var(--osw-step-1); }
}

/* ---------- Print header ---------- */

.osw-print-head { display: none; }