/* ===========================================================
   UNAMIQ - Projects page
   Loaded last, after tokens -> base -> layout -> components.

   Every row is closed at rest and opens on hover (Jelle,
   2026-08-31). Because only one row can be hovered at a time,
   only one panel is ever open - which is the point. The panel
   reveal itself lives in components.css; this file only adds
   the lift and the accent border.

   The rows are still <a> elements, so hovering reveals the
   detail and clicking goes to that project's own page.
=========================================================== */

.project-row{
    padding:38px 22px;
}

@media(max-width:600px){
    .project-row{ padding:26px 16px; }
}

.project-item{
    transition:background-color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
    transform-origin:center;
    position:relative;
    z-index:1;
}

.project-item:hover{
    background-color:rgba(var(--accent-rgb),.06);
    transform:scale(1.018);
    box-shadow:inset 0 0 0 1px var(--accent), var(--glow-strong);
    z-index:2;
}

.project-item.tba:hover{
    background-color:var(--card-bg-hover, rgba(255,255,255,.03));
    transform:scale(1.008);
    box-shadow:none;
}

.project-index{
    color:var(--accent-ink);
}

.project-item.tba .project-index{
    color:var(--text-faint, rgba(255,255,255,.35));
    opacity:1;
}

.project-status::before{
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    margin-right:8px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 6px rgba(var(--accent-rgb),.6);
    vertical-align:middle;
}

.project-item.tba .project-status::before{
    background:var(--border-strong, rgba(255,255,255,.25));
    box-shadow:none;
}

/* ---------- Reach-out CTA, under the projects list ---------- */

.projects-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;

    margin-top:64px;
    padding-top:44px;
    border-top:1px solid var(--border-color, rgba(255,255,255,.1));
}

.projects-cta-text{
    max-width:460px;
}

.projects-cta-label{
    font-family:"Space Mono", monospace;
    font-size:var(--fs-xs);
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--accent-ink);
    margin-bottom:10px;
}

.projects-cta-heading{
    font-size:var(--fs-xl);
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
}

/* The plain .cta-button — see components.css. Neutral hover, to
   match the footer and the Capabilities page. */

@media(max-width:600px){
    .projects-cta{ flex-direction:column; align-items:flex-start; }
}