/* ============================================================
   ALL PROJECTS PAGE
   Replaces projects-page.css, which was written for the old
   photo-background hero and dropdown filter. Uses the same tokens
   as redesign.css so the page reads as part of the system.
   ============================================================ */

/* ------------------------------------------------------------
   1. HERO BAND
   ------------------------------------------------------------ */
body .projects-hero {
    position: relative;
    background: var(--ink);
    padding: 150px 0 66px;
    overflow: hidden;
}

body .projects-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(760px 460px at 78% 8%, rgba(43, 78, 255, .30), transparent 62%),
        radial-gradient(560px 400px at 8% 96%, rgba(255, 159, 74, .12), transparent 60%);
    pointer-events: none;
}

body .projects-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(circle at 60% 20%, #000, transparent 78%);
    mask-image: radial-gradient(circle at 60% 20%, #000, transparent 78%);
    pointer-events: none;
}

body .projects-hero > .container {
    position: relative;
    z-index: 1;
}

body .projects-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 30px;
}

body .projects-breadcrumb a {
    color: rgba(255, 255, 255, .74);
    text-decoration: none;
    transition: color .3s var(--ease);
}

body .projects-breadcrumb a:hover { color: #fff; }
body .projects-breadcrumb .current { color: var(--warm); }

body .projects-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 44px 56px;
    align-items: end;
}

body .projects-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--warm);
    margin-bottom: 18px;
}

body .projects-eyebrow::before {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--warm);
}

body .projects-hero-title {
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 700;
    letter-spacing: -.038em;
    line-height: 1.05;
    color: #fff;
    margin: 0 0 18px;
}

body .projects-hero-desc {
    font-size: 17px;
    line-height: 1.68;
    color: var(--tx-inv-2);
    margin: 0;
    max-width: 56ch;
}

/* Stats rail */
body .projects-stats {
    display: flex;
    gap: 34px;
    margin: 0;
    padding: 0;
}

body .projects-stats > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 16px;
    border-left: 2px solid rgba(255, 255, 255, .16);
}

body .projects-stats dt {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.03em;
    color: #fff;
}

body .projects-stats dd {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin: 0;
}

/* ------------------------------------------------------------
   2. FILTER BAR — chips replace the old dropdown
   ------------------------------------------------------------ */
body .projects-filterbar {
    position: sticky;
    /* The site header is position:fixed at z-index 999 and 67px tall once
       condensed. Sticking this bar at top:0 parked it completely behind
       the header, so the chips became invisible and unclickable as soon
       as you scrolled to them - which read as "the filter is broken". */
    top: 67px;
    z-index: 20;
    background: rgba(250, 250, 248, .88);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--line);
}

body .filterbar-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 16px 0;
}

body .filterbar-label {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tx-3);
}

body .filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0;
}

body .filter-chips::-webkit-scrollbar { display: none; }

body .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /* style.css ships a global `button { width: 100% }`. Without this the
       chips each stretched to the full rail width, so only "All" was on
       screen and the other six sat far off to the side - the filter looked
       like it offered nothing to filter by. */
    width: auto;
    white-space: nowrap;
    padding: 9px 15px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--canvas);
    color: var(--tx-2);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

body .filter-chip svg { width: 15px; height: 15px; stroke-width: 2; }

body .filter-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

body .filter-chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

body .chip-count {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--r-pill);
    background: var(--surface-2, rgba(13, 15, 20, .06));
    color: var(--tx-3);
}

body .filter-chip.is-active .chip-count {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* ------------------------------------------------------------
   3. PROJECT GRID
   ------------------------------------------------------------ */
body .rn-portfolio-area#all-projects {
    padding: 56px 0 96px;
    scroll-margin-top: 130px;
}

body .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

body .project-card {
    display: flex;
    flex-direction: column;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

body .project-card:hover {
    transform: translateY(-6px);
    border-color: rgba(43, 78, 255, .36);
    box-shadow: var(--shadow-md);
}

/* Media is a real button so the card is keyboard reachable */
body .project-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    border: 0;
    background: var(--canvas-alt);
    cursor: pointer;
    overflow: hidden;
}

body .project-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--ease);
}

body .project-card:hover .project-media img { transform: scale(1.05); }

body .project-cat {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    background: rgba(13, 15, 20, .72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
}

body .project-hover {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: rgba(13, 15, 20, .62);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .35s var(--ease);
}

body .project-card:hover .project-hover,
body .project-media:focus-visible .project-hover { opacity: 1; }

body .project-hover svg { width: 17px; height: 17px; }

body .project-body {
    flex: 1;
    padding: 20px 22px 8px;
}

body .project-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.34;
    color: var(--tx);
    margin: 0 0 9px;
    cursor: pointer;
    transition: color .25s var(--ease);
}

body .project-title:hover { color: var(--accent); }

body .project-desc {
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--tx-2);
    margin: 0;
}

body .project-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px 18px;
    margin-top: 6px;
    border-top: 1px solid var(--line);
}

body .project-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--tx-2);
}

body .project-rating svg {
    width: 14px;
    height: 14px;
    color: var(--warm);
    fill: var(--warm);
}

body .project-visit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    transition: gap .25s var(--ease);
}

body .project-visit:hover { gap: 10px; }
body .project-visit svg { width: 14px; height: 14px; }

/* Demo + live links share the right side of the card footer */
body .project-links {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

body .project-demo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-2);
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}

/* No demo URL configured yet: present but visibly inactive, so the row
   stays consistent across all cards without implying a working link. */
body .project-demo.is-pending {
    cursor: not-allowed;
    opacity: .5;
    border-style: dashed;
    color: var(--tx-3);
}

body .project-demo.is-pending:hover {
    border-color: var(--line-strong);
    color: var(--tx-3);
    background: transparent;
}

body .project-demo:not(.is-pending):hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

body .project-demo svg { width: 13px; height: 13px; }

@media (max-width: 400px) {
    body .project-foot { flex-wrap: wrap; row-gap: 10px; }
    body .project-links { gap: 10px; }
}

/* Empty state when a filter matches nothing */
body .projects-empty {
    text-align: center;
    font-size: 16px;
    color: var(--tx-3);
    padding: 60px 0;
    margin: 0;
}

/* ------------------------------------------------------------
   4. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1199px) {
    body .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    body .projects-hero { padding: 130px 0 52px; }

    body .projects-hero-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: start;
    }

    body .projects-stats { gap: 24px; }
    body .projects-stats dt { font-size: 26px; }
}

@media (max-width: 767px) {
    body .projects-grid { grid-template-columns: 1fr; gap: 20px; }

    body .filterbar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    body .projects-filterbar { top: 60px; }

    body .filter-chips {
        width: 100%;
        /* let the rail bleed to the screen edges while scrolling */
        margin: 0 -20px;
        padding: 2px 20px;
    }

    body .projects-stats {
        flex-wrap: wrap;
        gap: 18px 26px;
    }
}

/* ------------------------------------------------------------
   5. RTL
   ------------------------------------------------------------ */
[dir="rtl"] .projects-hero-copy,
[dir="rtl"] .project-body,
[dir="rtl"] .projects-empty { text-align: right; }

[dir="rtl"] .projects-hero::before {
    background:
        radial-gradient(760px 460px at 22% 8%, rgba(43, 78, 255, .30), transparent 62%),
        radial-gradient(560px 400px at 92% 96%, rgba(255, 159, 74, .12), transparent 60%);
}

[dir="rtl"] .projects-stats > div {
    padding-left: 0;
    padding-right: 16px;
    border-left: 0;
    border-right: 2px solid rgba(255, 255, 255, .16);
}

[dir="rtl"] .project-visit svg,
[dir="rtl"] .projects-breadcrumb { transform: none; }

[dir="rtl"] .project-visit svg { transform: scaleX(-1); }

/* Ratings stay in Western digits like the rest of the site */
[dir="rtl"] .project-rating,
[dir="rtl"] .chip-count,
[dir="rtl"] .projects-stats dt { unicode-bidi: plaintext; }