/* ==========================================================================
   feature-icons.css -- W4 ability & item icons (prefix: fi-)
   Consumes design tokens from css/main.css (:root custom properties).
   ========================================================================== */

/* ---- Ability Reference section ---------------------------------------- */

.fi-abilities {
	background: var(--color-surface-1);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	margin-bottom: var(--space-5);
}

.fi-abilities-title {
	font-family: var(--font-display);
	color: var(--color-gold);
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-4);
}

.fi-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}

.fi-col {
	background: var(--color-surface-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}

.fi-col-a {
	border-left: 3px solid var(--color-hextech);
}

.fi-col-b {
	border-left: 3px solid var(--color-danger);
}

.fi-col-champ {
	font-family: var(--font-display);
	font-size: var(--font-size-lg);
	color: var(--color-gold-200);
	margin-bottom: var(--space-3);
}

.fi-col-a .fi-col-champ {
	color: var(--color-hextech);
}

.fi-col-b .fi-col-champ {
	color: var(--color-danger);
}

.fi-ability-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.fi-ability {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.fi-ability-key {
	flex: 0 0 auto;
	width: 22px;
	text-align: center;
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--color-text-inverse);
	background: var(--color-gold);
	border-radius: var(--radius-sm);
	padding: 1px 0;
}

.fi-ability-name {
	color: var(--color-text);
	font-size: var(--font-size-sm);
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ---- Icon sizing ------------------------------------------------------- */

/* 32px reference icons (Ability Reference section) */
.fi-icon {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 4px;
	border: 1px solid var(--color-gold-700);
	background: var(--color-bg);
	display: inline-block;
	object-fit: cover;
}

/* 20px inline icons (combo strips, item chips) */
.fi-icon-sm {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border-radius: 4px;
	border: 1px solid var(--color-gold-700);
	background: var(--color-bg);
	display: inline-block;
	vertical-align: text-bottom;
	object-fit: cover;
}

/* ---- Combo strip tokens ------------------------------------------------ */

.fi-combo {
	line-height: 1.9;
}

.fi-tok {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	vertical-align: text-bottom;
	background: var(--color-surface-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 1px var(--space-1);
	margin: 0 1px;
	white-space: nowrap;
}

.fi-tok-key {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--color-gold-200);
}

/* Icon-less chips: AA, Flash, TP, Ignite, ... */
.fi-tok-plain {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--color-gold-200);
	padding: 2px var(--space-2);
}

/* ---- Item chips ---------------------------------------------------------- */

.fi-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	vertical-align: text-bottom;
	max-width: 100%;
}

.fi-item-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Unknown item: plain escaped text, no icon, no box */
.fi-item-plain {
	display: inline;
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 768px) {
	.fi-cols {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.fi-abilities {
		padding: var(--space-4);
	}
}