/* Folder component styles */
.folder-wrap { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-user-select: none; user-select: none; }
.folder { position: relative; width: calc(140px * var(--scale)); height: calc(100px * var(--scale)); perspective: 1000px; }
.folder-body { position: absolute; inset: 0; background: var(--folder-bg, #5227FF); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08); transform-origin: bottom; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.folder-tab { position: absolute; top: calc(-18px * var(--scale)); left: calc(12px * var(--scale)); width: calc(56px * var(--scale)); height: calc(18px * var(--scale)); background: var(--folder-bg, #5227FF); border-top-left-radius: 8px; border-top-right-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08); }
.folder-content { position: absolute; left: 0; right: 0; bottom: calc(-10px * var(--scale)); background: #0b0b0c; border: 1px solid #1e1e22; border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.5); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; overflow: hidden; }
.folder.open .folder-body { transform: rotateX(-40deg); }
.folder.open + .folder-content { opacity: 1; transform: translateY(0); }
.folder-title { margin: 8px 0 10px; font-weight: 700; color: #fff; text-align: center; }
.folder-tech { color: #9aa0a6; }

/* scale custom property convenience */
.folder { --scale: 1; }

/* Grid alignment within existing .cards container */
#projects-root.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.project-folder-item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, rgba(18,18,20,1), rgba(12,12,14,1)); box-shadow: var(--shadow); }
.project-folder-item .folder-wrap { margin: 8px 0; }

@media (max-width: 960px) {
	#projects-root.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	#projects-root.cards { grid-template-columns: 1fr; }
}