/* ==========================================================================
   SIGNAL — Projects page
   Shares the filter toolbar (.toolbar / .filter-chip) with the credentials
   page; everything below is the project card itself.
   ========================================================================== */

@layer sections {

  .projects-hero {
    position: relative;
    padding-block: clamp(8rem, 18vh, 12rem) clamp(2rem, 5vw, 4rem);
    z-index: var(--z-content);
  }

  .projects-hero__inner { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }

  .projects-hero__title {
    font-size: var(--step-6);
    line-height: 0.88;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    font-variation-settings: "wdth" 92, "opsz" 96;
    max-width: 14ch;
  }

  .projects-hero__title .out {
    color: transparent;
    -webkit-text-stroke: clamp(1px, 0.13vw, 2.2px) var(--ink);
  }

  .projects-hero__lede {
    max-width: 58ch;
    font-size: var(--step-1);
    line-height: 1.45;
    color: var(--ink-2);
  }

  .projects-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: clamp(1rem, 2.5vw, 2rem);
    margin-block-start: clamp(0.5rem, 2vw, 1.5rem);
    padding-block-start: clamp(1.25rem, 2.5vw, 2rem);
    border-block-start: 1px solid var(--line);
  }

  /* ---- Grid -------------------------------------------------------------- */
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
    gap: clamp(0.75rem, 1.4vw, 1.15rem);
    margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
  }

  /* A card grows to match the tallest card in its row; stretch keeps the
     gradient panel running the card's full height instead of stopping at
     its own content. */
  .proj {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    padding: 0;
    align-content: stretch;
  }

  .proj[hidden] { display: none; }

  @media (min-width: 620px) {
    .proj { grid-template-columns: 9rem 1fr; grid-template-rows: 1fr; }
  }

  /* A project arrived at through a deep link gets a one-off ring so you can
     see which card the link meant. */
  .proj.is-linked {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
  }

  /* ---- Gradient face ----------------------------------------------------- */
  /* Number, then the status pill directly beneath it, then the metric
     pinned to the bottom. The pill used to sit in the top-right corner,
     where a long status ("Completed") ran into the number. */
  .proj__face {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr;
    align-content: stretch;
    gap: 0.55rem;
    padding: clamp(1rem, 1.8vw, 1.25rem);
    background: var(--face, linear-gradient(150deg, #333, #666));
    color: #fff;
    min-block-size: 7.5rem;
    overflow: hidden;
    /* The metric below sizes itself against this panel's width. */
    container-type: inline-size;
  }

  .proj__face::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(120% 90% at 20% 0%, rgb(255 255 255 / 0.28), transparent 60%);
    pointer-events: none;
  }

  .proj__face > * { position: relative; z-index: 1; }

  .proj__no {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    color: rgb(255 255 255 / 0.72);
  }

  .proj__status {
    grid-row: 2;
    justify-self: start;
    padding: 0.15rem 0.5rem;
    border-radius: var(--r-pill);
    background: rgb(0 0 0 / 0.28);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
  }

  .proj__metric { grid-row: 3; align-self: end; display: grid; gap: 0.1rem; }

  /* Sized to the panel, never wrapped: a fixed size overflowed the narrow
     panel ("40%" by 22px) and longer figures broke onto two lines. */
  .proj__metric b {
    font-family: var(--font-display);
    font-size: min(var(--step-4), 42cqi);
    white-space: nowrap;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
  }

  .proj__metric span {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    line-height: 1.3;
    color: rgb(255 255 255 / 0.78);
  }

  /* ---- Body -------------------------------------------------------------- */
  .proj__body {
    display: grid;
    gap: 0.55rem;
    align-content: start;
    padding: clamp(1.2rem, 2.2vw, 1.75rem);
    min-inline-size: 0;
  }

  /* Organisation above dates on every card. Side by side, a long
     organisation pushed the dates onto their own line on some cards only. */
  .proj__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .proj__title {
    font-size: var(--step-2);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ink);
    transition: color var(--t-fast);
  }

  .proj:hover .proj__title { color: var(--accent); }

  .proj__role {
    justify-self: start;
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-xs);
    background: color-mix(in oklab, var(--facec, var(--accent)) 18%, transparent);
    border: 1px solid color-mix(in oklab, var(--facec, var(--accent)) 45%, transparent);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
  }

  /* A project with a url gets a visible link, and the link's ::after is
     stretched over the whole card, so a click anywhere on it follows the link
     while the card stays an <article> with ordinary text inside. */
  .proj__link {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-block-start: 0.15rem;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--accent);
  }

  .proj__link svg {
    inline-size: 0.85em;
    block-size: 0.85em;
    transition: transform var(--t-mid) var(--ease-spring);
  }

  .proj__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
  }

  .proj.has-link:hover .proj__link svg { transform: translate(2px, -2px); }

  .proj.has-link:has(.proj__link:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  .proj__link:focus-visible { outline: none; }

  .proj__summary {
    margin-block-start: 0.25rem;
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--ink-2);
  }

  .proj__points { display: grid; gap: 0.45rem; margin-block-start: 0.35rem; }

  .proj__points li {
    position: relative;
    padding-inline-start: 1.1rem;
    font-size: var(--step--1);
    line-height: 1.45;
    color: var(--ink-2);
  }

  .proj__points li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.6em;
    inset-inline-start: 0;
    inline-size: 0.45rem;
    block-size: 1px;
    background: var(--accent);
  }

  .proj__foot {
    display: grid;
    gap: 0.6rem;
    margin-block-start: 0.9rem;
    padding-block-start: 0.9rem;
    border-block-start: 1px solid var(--line);
  }

  .proj__stack { display: flex; flex-wrap: wrap; gap: 0.35rem; }

  .proj__stack span {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--ink-3);
  }

  .proj__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

  .proj__tag {
    padding: 0.15rem 0.55rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    font-size: var(--step--2);
    font-weight: 500;
    color: var(--ink-2);
  }

  .projects-empty {
    padding: clamp(3rem, 8vw, 6rem) 1rem;
    text-align: center;
    color: var(--ink-3);
  }

  .projects-empty h3 { font-size: var(--step-2); color: var(--ink-2); margin-block-end: 0.5rem; }

  /* ---- Legend ------------------------------------------------------------ */
  .legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: clamp(0.75rem, 1.4vw, 1.15rem);
    margin-block-start: 1rem;
  }

  .legend__item { display: grid; gap: 0.3rem; }

  .legend__item h4 {
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--ink);
  }

  .legend__item p { font-size: var(--step--1); color: var(--ink-2); }

  .legend__item b {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
  }
}