/**
 * src/css/pages/index.css — Projects hub (project selection), premium pass.
 * Owns: index.html only. Consumes tokens from design-system.css.
 * Loaded LAST (after inline <style> and dobo2 links) so it wins equal/low
 * specificity ties. Purely additive classes (.pc-*) + high-specificity card
 * override; nothing JS references is renamed or removed.
 */

/* ── Page header refinement ─────────────────────────────────────────────── */
#projectGrid {
    /* give the grid a touch more air on desktop */
    gap: var(--sp-6);
}

/* ── Project card — the hero element ────────────────────────────────────── */
@keyframes pc-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

#projectGrid > div.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    background: var(--bg-card);
    border: 1px solid var(--surface-200);
    border-radius: var(--r-xl);              /* 16px */
    box-shadow: var(--sh-sm);
    cursor: pointer;
    overflow: hidden;
    animation: pc-in var(--dur-3) var(--ease-out) both;
    transition: box-shadow var(--dur-2) var(--ease-std),
                transform var(--dur-2) var(--ease-std),
                border-color var(--dur-2) var(--ease-std);
}
/* Staggered entrance */
#projectGrid > div.project-card:nth-child(1) { animation-delay: 0ms; }
#projectGrid > div.project-card:nth-child(2) { animation-delay: 45ms; }
#projectGrid > div.project-card:nth-child(3) { animation-delay: 90ms; }
#projectGrid > div.project-card:nth-child(4) { animation-delay: 135ms; }
#projectGrid > div.project-card:nth-child(5) { animation-delay: 180ms; }
#projectGrid > div.project-card:nth-child(6) { animation-delay: 225ms; }

/* Amber accent edge that slides in on hover (left) */
#projectGrid > div.project-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--amber-400), var(--amber-600));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--dur-2) var(--ease-out);
}
#projectGrid > div.project-card:hover {
    box-shadow: 0 4px 6px rgba(15,23,42,0.07), 0 24px 50px rgba(2,36,72,0.16);
    transform: translateY(-4px);
    border-color: var(--navy-200);
}
#projectGrid > div.project-card:hover::before { transform: scaleY(1); }
#projectGrid > div.project-card:active { transform: translateY(-1px) scale(0.99); }
#projectGrid > div.project-card:focus-visible {
    outline: 2px solid var(--amber-500);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    #projectGrid > div.project-card { animation: none; }
}

/* ── Card top row: icon chip + status pill ──────────────────────────────── */
.pc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}
.pc-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--navy-500), var(--navy-400));
    color: #ffffff;
    font-size: var(--fs-18);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--sh-sm);
    transition: transform var(--dur-2) var(--ease-std);
}
#projectGrid > div.project-card:hover .pc-icon { transform: scale(1.05); }

.pc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--r-full);
    font-size: var(--fs-11);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}
.pc-status .status-dot { width: 6px; height: 6px; }
.pc-status.is-tostart  { background: var(--surface-100); color: var(--surface-600); border-color: var(--surface-200); }
.pc-status.is-active   { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.pc-status.is-payment  { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.pc-status.is-completed{ background: #dcfce7; color: #15803d; border-color: #bbf7d0; }

/* ── Project name ───────────────────────────────────────────────────────── */
.pc-name {
    margin: 0;
    font-size: var(--fs-18);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-18);
    color: var(--text-1);
}

/* ── Location row ───────────────────────────────────────────────────────── */
.pc-loc {
    margin-top: auto;
    padding-top: 2px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--text-3);
}
.pc-loc > svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-4); }
.pc-loc .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
/* Integrated hover arrow: slides in at the end of the meta row, on-brand navy */
.pc-loc .pc-arrow {
    width: 17px; height: 17px;
    flex-shrink: 0;
    color: var(--navy-500);
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity var(--dur-2) var(--ease-std), transform var(--dur-2) var(--ease-std);
}
#projectGrid > div.project-card:hover .pc-arrow { opacity: 1; transform: translateX(0); }

/* ── Card menu (⋮) refinement — keep JS structure, just polish ─────────── */
#projectGrid > div.project-card > .absolute.top-4.right-4 > button {
    color: var(--text-4);
    border-radius: var(--r-sm);
    transition: background var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std);
}
#projectGrid > div.project-card > .absolute.top-4.right-4 > button:hover {
    background: var(--surface-100);
    color: var(--text-1);
}

/* ── "New Project" primary CTA — make it the amber brand button ─────────── */
/* Targets the existing button by its onclick → no markup/JS change. */
button[onclick*="new-project.html"] {
    background: var(--amber-500) !important;
    color: var(--on-amber) !important;
    box-shadow: var(--sh-sm) !important;
}
button[onclick*="new-project.html"]:hover {
    background: var(--amber-400) !important;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    #projectGrid { gap: var(--sp-4); }
    #projectGrid > div.project-card { padding: 18px; }
    .pc-icon { width: 42px; height: 42px; }
}