/* honor.css 
	Hall of fame / Honor view styles
	Jun 2026 by CuR
*/

.honor-container {
	display: grid;
	grid-template-columns:
		repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	gap: 1.5rem;

}

/* || Honor Card - base: mobile */

.honor-card {
	--honor-accent: #8E90E5;

	position: relative;
	isolation: isolate;

	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
			"photo player score"
			"meta meta fairplay";
	
	gap: .5rem;
	align-items: center;
	
	padding-block: 1rem;
	padding-inline: .75rem;

	border: 1px solid hsl(from var(--honor-accent) h s l / .52);
	border-radius: var(--border-radius-lg);
	overflow: hidden;

	background: var(--clr-surface-subtle);
	box-shadow: 0 6px 16px hsl(0 0% 0% / 0.08);
	
	color: var(--clr-text);
	font-size: var(--fs-small);


	/*
	background-image:
		radial-gradient(circle at 300% -250%, hsl(from var(--honor-accent) h s l / .5), transparent);
		*/

}

.honor-card .stack {
	--stack-gap: .25rem;
	line-height: 1.2;
}


/* || Rank */
.honor-card__rank {
	position: absolute;
	inset: .25rem 1rem auto auto;

	color: var(--honor-accent);
	font-weight: var(--fw-bolder);
}

/* || Avatar */

.honor-card__photo {
	grid-area: photo;
}

.honor-card__avatar {
	--size: 3.125rem;
	
	margin-inline: auto;
	border: 2px solid transparent;
	background:
		linear-gradient(var(--clr-surface-subtle)) padding-box,
		conic-gradient(from 120deg, #BE32EB, #8E90E5, #BE32EB) border-box;
}

.honor-card__avatar::after {
	content: attr(data-jersey);
	color: red;
	
}


/* || Player */

.honor-card__player {
	grid-area: player;
}

.honor-card__name {
	position: relative;
	font-size: 1em;
	font-weight: var(--fw-bold);
	letter-spacing: var(--font-spacing-dense);
}

.honor-card__team {
	font-size: 0.857em;
	color: var(--clr-text-soft);
}

/* || Jersey */

.honor-card__jersey {
	font-size: .857em;
	color: var(--clr-text-muted);
	margin-left: .75em;
	font-weight: var(--fw-bold);
	font-style: italic;
}


/* || Score */

.honor-card__score {
	grid-area: score;
	text-align: center;
	align-self: end;
}

.honor-card__score strong {
	font-size: clamp(1.75rem, 8vw, 3.25rem);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.05em;
}

.honor-card__score span {
	font-size: 0.714em;
	font-weight: var(--fw-bold);
	color: var(--clr-text-soft);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}



/* || Fairplay  */

.honor-card__fairplay {
	grid-area: fairplay;	
	justify-self: center;
	font-size: 0.857em;
	font-weight: var(--fw-bolder);
	text-align: center;
}

.honor-card__fairplay > span {
	color: var(--honor-accent);
}


.honor-card__fairplayx::before {
	content: "";
	width: 0.5rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--honor-accent);
}


/* || Meta */

.honor-card__meta {
	grid-area: meta;

	font-size: 0.714em;
	font-size: 0.857em;
	color: var(--clr-text-muted);
}

.honor-card__player > *,
.honor-card__meta > * {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;	
}


/* || Honor Aside Section */

.honor-aside {
	--stack-gap: .5rem;
}

.honor-aside__label {
	color: var(--clr-text);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
}

.honor-rules {
	--stack-gap: .5rem;
	font-size: var(--fs-small);
	color: var(--clr-text-muted);
}

@container main (width >= 768px) {
	.honor-card {
		grid-template-columns: 1fr;
		grid-template-areas: "photo" "player" "score" "fairplay" "meta";	
		gap: .875rem;
		
		font-size: var(--fs-base);
		padding-block: 1.5rem 1.25rem;
	}

	.honor-card > * {
		text-align: center;
	}

	.honor-card__avatar {
		--size: 5rem;
	}

	.honor-card__jersey {
		position: absolute;
	}
}