/* ==========================================================================
   LEARN WITH — PROJECTS SHOWCASE ([lw_projects])
   Cards are filled automatically from WP Admin → Projects.
   ========================================================================== */

.lw-projx { width: 100%; margin-top: 8px; }

/* ---- Filter -------------------------------------------------------------- */
.lw-projx .lw-proj-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 28px; }
.lw-projx .lw-proj-filter button {
	appearance: none;
	min-height: 40px;
	padding: 8px 18px;
	border: 1px solid #1F3A2D;
	border-radius: 999px;
	background: transparent;
	color: #D3E2D8;
	font: 500 14px/1.2 'Inter', system-ui, sans-serif;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.lw-projx .lw-proj-filter button:hover { border-color: #C8F135; color: #F2F1EC; }
.lw-projx .lw-proj-filter button.is-active { background: #C8F135; border-color: #C8F135; color: #0A0A0A; font-weight: 600; }
.lw-projx .lw-proj-filter button:focus-visible { outline: 3px solid rgba(200, 241, 53, 0.55); outline-offset: 3px; }

/* ---- Grid + card --------------------------------------------------------- */
.lw-projx .lw-proj-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lw-projx .lw-proj[hidden] { display: none; }
.lw-projx .lw-proj {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #08260f;
	border: 1px solid #1F3A2D;
	border-radius: 20px;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.lw-projx .lw-proj:hover { border-color: #C8F135; transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4); }

.lw-projx .lw-proj__media { position: relative; aspect-ratio: 16 / 10; background: #011f01; overflow: hidden; }
.lw-projx .lw-proj__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.lw-projx .lw-proj:hover .lw-proj__img { transform: scale(1.04); }
.lw-projx .lw-proj__ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 30% 20%, #1f3a09, #011f01 70%);
	font: 700 3.5rem/1 'Bricolage Grotesque', 'Inter', sans-serif;
	color: #C8F135;
}
.lw-projx .lw-proj__tag {
	position: absolute;
	left: 14px;
	top: 14px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(1, 31, 1, 0.85);
	border: 1px solid #2E5440;
	color: #C8F135;
	font-size: 12px;
	font-weight: 600;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.lw-projx .lw-proj__body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 22px 22px 24px; }
.lw-projx .lw-proj__body h3 { margin: 0; font: 700 1.25rem/1.2 'Bricolage Grotesque', 'Inter', sans-serif; letter-spacing: -0.01em; color: #F2F1EC; }
.lw-projx .lw-proj__body p { margin: 0; color: #9DB3A6; font-size: 0.95rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lw-projx .lw-proj__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lw-projx .lw-proj__tools li { padding: 3px 10px; border: 1px solid #1F3A2D; border-radius: 999px; font-size: 12px; color: #D3E2D8; }
.lw-projx .lw-proj__btn { align-self: flex-start; margin-top: auto; }

/* ---- Empty state ---------------------------------------------------------- */
.lw-projx .lw-proj-empty {
	display: grid;
	justify-items: center;
	gap: 8px;
	max-width: 760px;
	margin-inline: auto;
	padding: 48px 24px;
	text-align: center;
	background: #08260f;
	border: 1.5px dashed #2E5440;
	border-radius: 20px;
}
.lw-projx .lw-proj-empty__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #153A24; color: #C8F135; font-size: 28px; line-height: 1; }
.lw-projx .lw-proj-empty h3 { margin: 8px 0 0; font: 700 1.25rem/1.2 'Bricolage Grotesque', 'Inter', sans-serif; color: #F2F1EC; }
.lw-projx .lw-proj-empty p { margin: 0; max-width: 440px; color: #9DB3A6; }
.lw-projx .lw-proj-empty .lw-proj-empty__admin { margin-top: 10px; padding: 8px 14px; border-radius: 10px; background: #0A2412; color: #D3E2D8; font-size: 13px; }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) { .lw-projx .lw-proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.lw-projx .lw-proj-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.lw-projx .lw-proj__body { padding: 18px 18px 20px; }
	.lw-projx .lw-proj__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.lw-projx .lw-proj, .lw-projx .lw-proj__img { transition: none; }
	.lw-projx .lw-proj:hover, .lw-projx .lw-proj:hover .lw-proj__img { transform: none; }
}