/* ---------------- RESET ---------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; background: #fafafa; }

/* ---------------- INDEX ---------------- */
.title-header { text-align: center; margin-top: 10vh; }
.start-folders { display: flex; justify-content: center; gap: 5rem; margin-top: 10vh; }
.folder-link { text-decoration: none; color: inherit; }
.folder img { width: 120px; transition: transform 0.3s; user-select: none; -webkit-user-drag: none; }
.folder:hover img { transform: scale(1.1); }
.folder span { display: block; text-align: center; margin-top: 0.5rem; font-weight: bold; }

/* ---------------- WORK PAGE ---------------- */
.breadcrumb {
  background: #e0e0e0;
  padding: 1rem 1.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
}
.hamburger { display: none; font-size: 2rem; cursor: pointer; }

.workspace { display: flex; flex:1; height: calc(100vh - 52px); overflow: hidden; }
.sidebar {
  width: 220px; background: #e0e0e0; padding: 1rem;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1); position: relative;
}
.side-nav .main-link { font-size: 1.2rem; font-weight: bold; margin-bottom:1rem; display:block; color:#222; text-decoration:none; }
.side-nav .sub-links { padding-left: 1rem; display:flex; flex-direction:column; }
.side-nav .sub-links a { display:block; margin-bottom:0.8rem; color:#222; text-decoration:none; }
.side-nav a:hover { text-decoration: underline; }

.trash { display:flex; flex-direction:column; align-items:center; margin-top:auto; position:relative; }
.trash img.trash-closed { width:40px; margin-bottom:0.5rem; display:block; }
.trash img.trash-open { width:40px; margin-bottom:0.5rem; display:none; }
.trash:hover img.trash-closed { display:none; }
.trash:hover img.trash-open { display:block; }

.projects {
  flex:1; display:flex; flex-wrap:wrap; gap:2rem; padding:2rem;
  justify-content:flex-start; align-items:flex-start; background:#fafafa; overflow-y:auto;
}
.project { display:flex; flex-direction:column; align-items:center; width:120px; cursor:pointer; transition: transform 0.3s ease; }
.project img { width:100px; height:auto; margin-bottom:0.5rem; }
.project span { font-size:1rem; font-weight:bold; text-align:center; }
.project:hover { transform: scale(1.1); }

/* ---------------- Info Overlay ---------------- */
.project-info {
  position: fixed; top:0; right:0; width:66%; max-width:800px; height:100%;
  background:#f0f0f0; box-shadow:-2px 0 15px rgba(0,0,0,0.25);
  transform:translateX(100%) scale(0.95); opacity:0;
  transition: transform 0.4s ease, opacity 0.4s ease; z-index:20;
  overflow-y:auto; padding:2rem;
}
.project-info.active { transform:translateX(0) scale(1); opacity:1; }
.info-content .close-btn { position:absolute; top:1rem; right:1rem; font-size:2rem; cursor:pointer; }
.info-content h2 { margin-top:2rem; margin-bottom:1rem; }
.info-content p { line-height:1.5; margin-bottom:1rem; }
.info-images img { width:100%; max-width:400px; margin-bottom:1rem; user-select:none; -webkit-user-drag:none; }

/* ---------------- MOBILE ---------------- */
@media (max-width:768px){
  .start-folders { flex-direction:column; gap:3rem; align-items:center; }
  .project img { width:80px; }
  .hamburger { display:block; }
  .workspace { flex-direction:column; height:auto; }
  .sidebar { position:fixed; top:52px; left:-250px; height:calc(100%-52px); transition:left 0.3s ease; z-index:25; }
  .sidebar.active { left:0; }
  .sidebar-overlay { position:fixed; top:52px; left:0; width:100%; height:calc(100%-52px); background:rgba(0,0,0,0.4); display:none; z-index:20; }
  .sidebar-overlay.active { display:block; }
  .projects { padding:1rem; }
}