/* ── Work / Portfolio Page — Drag-Reveal (Mobile First) ──── */

/* Hero */
.work-hero {
    padding-top: clamp(110px, 18vw, 200px);
    padding-bottom: clamp(40px, 6vw, 70px);
    border-bottom: 1px solid var(--clr-border);
}
.work-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(34px, 6.4vw, 68px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--clr-text);
    margin: 16px 0 16px;
}
.work-hero__sub {
    font-size: clamp(15px, 1.3vw, 18px);
    color: var(--clr-text-light);
    line-height: 1.7;
    max-width: 480px;
}

/* Work list */
.work-list { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 56px); max-width: 820px; margin-inline: auto; }

/* Drag-reveal card */
.reveal-card {
    position: relative; display: block; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--clr-border-strong); aspect-ratio: 16/10;
    cursor: ew-resize; user-select: none; background: var(--clr-card);
}
.reveal-card__before, .reveal-card__after {
    position: absolute; inset: 0; padding: clamp(20px, 3vw, 32px);
    display: flex; flex-direction: column;
}
.reveal-card__before { background: radial-gradient(circle at 30% 20%, var(--clr-accent-dim), transparent 55%), var(--clr-surface); }
.reveal-card__after  { background: radial-gradient(circle at 70% 30%, var(--clr-accent-dim), transparent 60%), var(--clr-card-hover); clip-path: inset(0 0 0 50%); }
.reveal-card__before.has-img,
.reveal-card__after.has-img { background-size: cover; background-position: center; }
.reveal-card__before.has-img::after,
.reveal-card__after.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,10,8,0.82) 0%, rgba(12,10,8,0.15) 55%, transparent 100%); z-index: 1; }
.reveal-card__before.has-img .reveal-card__tag,
.reveal-card__after.has-img .reveal-card__tag,
.reveal-card__before.has-img h4,
.reveal-card__after.has-img h4 { position: relative; z-index: 2; }
.reveal-card__tag {
    position: absolute; top: 16px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 5px 12px; border-radius: var(--radius-pill); background: rgba(20,16,11,0.75); border: 1px solid var(--clr-border-strong); z-index: 3;
}
.reveal-card__before .reveal-card__tag { left: 16px; color: var(--clr-text-muted); }
.reveal-card__after  .reveal-card__tag { right: 16px; color: var(--clr-accent); }
.reveal-card__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--clr-accent); z-index: 4; transform: translateX(-1px); }
.reveal-card__grip {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 40px; height: 40px; border-radius: 50%; background: var(--clr-accent);
    display: flex; align-items: center; justify-content: center; color: var(--clr-bg);
    font-size: 14px; font-weight: 700; box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.reveal-card h4 {
    font-family: var(--font-heading); font-style: italic; font-weight: 500;
    font-size: clamp(15px, 1.8vw, 19px); color: var(--clr-text-light); margin-top: auto; line-height: 1.4;
}
.reveal-caption { margin-top: 16px; text-align: center; font-size: 13px; color: var(--clr-text-muted); }
.reveal-caption a { transition: color var(--dur-fast) var(--ease-out); }
.reveal-caption a:hover { color: var(--clr-accent); }

/* Empty state */
.portfolio-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: clamp(60px, 8vw, 120px) 24px;
    color: var(--clr-text-muted);
    font-size: 16px;
    line-height: 1.7;
}

/* "More Than Design" diff list */
.diff-list { display: flex; flex-direction: column; max-width: 760px; margin-inline: auto; border-top: 1px solid var(--clr-border); }
.diff-item {
    padding: 20px 0; border-bottom: 1px solid var(--clr-border);
    font-size: 14.5px; color: var(--clr-text-light); display: flex; gap: 12px;
}
.diff-item::before { content: '→'; color: var(--clr-accent); }