/* Skills section layout */
#skills {
	height: auto;
	/* use the same padding as other sections so titles align consistently */
	padding: 60px 20px;
	box-sizing: border-box;
}

.skill {
	margin-bottom: 20px;
}

.skill p {
	margin-bottom: 10px;
	font-weight: 500;
}

.skill_bg_box {
	width: 100%;
	background-color: #d9d9d9;
	border-radius: 8px;
}

.future_skill_box {
	width: 100%;
	box-sizing: border-box;
	margin: 18px 0 0 0;
	padding: 18px;
	border-radius: 12px;
	background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
	transition:
		transform 160ms ease,
		box-shadow 160ms ease;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.skill_percent_box {
	height: 8px;
	background-color: #2c98f0;
	width: 80%;
	border-radius: 6px;
	position: relative;
	z-index: 1;
}

.skill_percent_box::after {
	content: "";
	position: absolute;
	top: -2px;
	right: 0;
	height: 13px;
	width: 13px;
	background-color: inherit;
	border-radius: 50%;
}

.skill_percent_box > span {
	position: absolute;
	top: -20px;
	right: -16px;
}

/* Future skills grid (logos) - fills remaining space */
.future_skills {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 20px;
	align-items: center;
	justify-items: center;
	width: 100%;
	padding-top: 8px;
}

.future_skill_item {
	/* use a two-row grid so the label is not part of the logo flex area */
	display: grid;
	grid-template-rows: auto auto;
	align-items: center;
	justify-items: center;
	width: 100%;
	max-width: 160px;
}

.future_skill_logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* scale logos responsively; keeps #skills at 100vh on desktop */
	height: clamp(56px, 10vh, 120px);
	background: white;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(15, 23, 36, 0.04);
	padding: 8px;
}

.future_skill_logo i {
	font-size: 3.2rem;
	color: #2c98f0;
	display: block;
}

.future_skill_logo img {
	width: auto;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Inline SVG sizing for Supabase (filled directly in SVG) */
.future_skill_logo.supabase {
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.future_skill_logo.supabase svg {
	width: 72px;
	height: 72px;
	display: block;
}

.future_skill_label {
	margin-top: 8px;
	font-weight: 600;
}

.future_skill_head {
	margin: 0 0 20px 0;
	font-size: 18px;
	font-weight: 700;
	color: #0f1724;
	letter-spacing: 0.4px;
}

@media screen and (min-width: 768px) {
	.all-skills {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	#skills {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* let future_skill_box fill remaining vertical space on wide screens */
	.future_skill_box {
		flex: 1 1 auto;
		justify-content: center;
	}
	.future_skills {
		width: 100%;
	}
	.future_skill_item {
		max-width: 180px;
	}
}

@media screen and (max-width: 767px) {
	.future_skills {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.future_skill_logo i {
		font-size: 2.4rem;
	}
	.future_skill_logo img {
		width: 56px;
		height: 56px;
	}

	.future_skill_logo.supabase {
		width: 56px;
		height: 56px;
	}
}