/* ============================================================
   CV.CSS
   ============================================================ */

#particles-canvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:0.15; }

.exp-list { display:flex; flex-direction:column; gap:1.25rem; margin-bottom:4rem; }

.exp-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2rem 2rem 2rem 2.5rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s;
}

.exp-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:transparent; transition:background 0.3s; }
.exp-card:hover { border-color: var(--gold-border); transform: translateX(4px); }
.exp-card:hover::before { background: var(--gold); }
.exp-card.type-edu:hover::before { background: rgba(201,168,76,0.4); }

.exp-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:0.75rem; flex-wrap:wrap; }
.exp-title { font-family:var(--font-display); font-size:1.05rem; font-weight:600; }
.exp-company { font-size:0.85rem; color:var(--muted-light); margin-top:0.2rem; }

.exp-date {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--gold);
    letter-spacing: 0.08em;
    white-space: nowrap;
    padding: 4px 10px;
    background: var(--gold-dim);
    border-radius: 2px;
    border: 1px solid var(--gold-border);
}

.exp-desc { font-size:0.87rem; color:var(--muted-light); line-height:1.8; margin-top:0.75rem; }
.exp-desc strong { color:var(--text); font-weight:500; }

.exp-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:1rem; }
.exp-tag { font-family:var(--font-mono); font-size:0.63rem; padding:3px 8px; border-radius:2px; border:1px solid var(--border); color:var(--muted-light); }

.exp-badge { display:inline-block; font-family:var(--font-mono); font-size:0.6rem; padding:2px 8px; border-radius:10px; margin-left:10px; vertical-align:middle; }
.badge-work   { background:var(--gold-dim); color:var(--gold); border:1px solid var(--gold-border); }
.badge-edu    { background:rgba(201,168,76,0.08); color:var(--gold-light); border:1px solid rgba(201,168,76,0.2); }
.badge-active { background:rgba(0,200,100,0.08); color:#00c864; border:1px solid rgba(0,200,100,0.2); }

.projects-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.25rem; margin-bottom:4rem; }

.proj-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1.75rem;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.proj-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,var(--gold),transparent); transform:scaleX(0); transform-origin:left; transition:transform 0.35s ease; }
.proj-card:hover { border-color:var(--gold-border); transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,0.4); }
.proj-card:hover::after { transform:scaleX(1); }

.proj-icon { font-size:1.7rem; margin-bottom:1rem; }
.proj-title { font-family:var(--font-display); font-size:0.98rem; font-weight:600; margin-bottom:0.4rem; }
.proj-client { font-family:var(--font-mono); font-size:0.65rem; color:var(--gold); letter-spacing:0.08em; margin-bottom:0.75rem; }
.proj-desc { font-size:0.83rem; color:var(--muted-light); line-height:1.75; }
.proj-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:1rem; }
.proj-tag { font-family:var(--font-mono); font-size:0.6rem; padding:2px 7px; border-radius:2px; background:var(--bg3); border:1px solid var(--border); color:var(--muted-light); }

.section-block { margin-bottom:0.5rem; }

@media (max-width:768px) {
    .exp-header { flex-direction:column; }
    .exp-date   { align-self:flex-start; }
}