/* ==========================================================================
   page-work.css: Projects page only. Linked after site.css.
   Uses site.css tokens only; no new colours, sizes, durations or breakpoints.
   1. Index   2. Project entry   3. Gallery details   4. Project bar (page-work.js)
   ========================================================================== */

@layer components {

  /* --- 1. Index of the twelve, under the page head --- */
  .work-index { margin-top: var(--s-7); }
  .work-index .index__list { border-top: var(--hair) solid var(--ink); padding-top: 0; }
  .work-index .index__list a { padding-block: 0.65rem; }

  .projects { margin-top: var(--s-9); }
  @media (max-width: 47.99em) { .projects { margin-top: var(--s-8); } }

  /* --- 2. Project entry: number and title, pictures, then the text ---
     Desktop: title and text on columns 1 to 4, the gallery on columns 5 to 12 and sticky.
     Tablet and phone: title, then the pictures, then the text. */
  .projects > .project:first-child { border-top-color: var(--ink); }
  .project__head { display: grid; gap: 0.4rem; align-content: start; }
  .project__meta { display: flex; justify-content: space-between; gap: var(--s-4); }
  .project__title { margin-top: 0; }
  .project__body { display: grid; gap: var(--s-5); align-content: start; max-width: var(--measure); }
  .project__desc { font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
  .project__scope { display: grid; gap: 0.85em; padding-top: var(--s-4); border-top: var(--hair) solid var(--line); }
  .project__scope p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.65; }
  .project__label { margin-bottom: -0.35em; }

  @media (min-width: 68.75em) {
    .project { grid-template-rows: auto 1fr; row-gap: var(--s-6); }
    .project__head { grid-column: 1 / span 4; grid-row: 1; }
    .project__body { grid-column: 1 / span 4; grid-row: 2; }
    .project__media { grid-row: 1 / span 2; top: calc(var(--header-h) + 3rem + var(--s-5)); }
  }
  @media (max-width: 68.74em) {
    .project { row-gap: var(--s-5); }
    .project__body { order: 3; }
  }

  /* --- 3. Gallery details --- */
  .thumbs__btn--plate { background: var(--surface); }
  .thumbs__btn--plate img { padding: 3px; mix-blend-mode: multiply; }
  .thumbs__btn--blank { display: inline-grid; place-items: center; background: var(--surface); }
  .thumbs__btn--blank .mono { color: var(--ink); }
  .thumbs__play { position: absolute; inset: 0; margin: auto; width: 0.875rem; height: 0.875rem; background: var(--paper); mask: var(--icon-play) center / contain no-repeat; -webkit-mask: var(--icon-play) center / contain no-repeat; }
  .thumbs__btn:focus-visible { outline-offset: 2px; }

  /* --- 4. Project bar: a slim line under the header naming the project in view --- */
  .pbar {
    position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 40;
    background: var(--paper); border-bottom: var(--hair) solid var(--line);
    visibility: hidden; opacity: 0; translate: 0 -0.5rem;
    transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  }
  .pbar.is-on { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
  .pbar__in { display: flex; align-items: center; gap: var(--s-3); height: 3rem; }
  .pbar__all {
    display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; padding-right: var(--s-4);
    border-right: var(--hair) solid var(--line); color: var(--ink); text-decoration: none; border-radius: var(--radius);
  }
  .pbar__all .mono { color: var(--ink); }
  .pbar__all:hover .mono { text-decoration: underline; text-underline-offset: 0.25em; }
  .pbar__now { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--s-3); white-space: nowrap; }
  .pbar__now .mono { flex: none; }
  .pbar__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-small); font-weight: var(--w-strong); }
  .pbar__step { flex: none; width: 2.5rem; height: 2.5rem; }
  .no-js .pbar { display: none; }

  @media (max-width: 47.99em) {
    .pbar__in { gap: var(--s-2); }
    .pbar__all { width: 2.75rem; justify-content: center; padding-right: 0; }
    .pbar__all-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .pbar__now { gap: var(--s-2); }
    .pbar__step { width: 2.75rem; height: 2.75rem; }
  }
}

@media print { .pbar { display: none !important; } }