/* ==========================================================================
   Meridian — Work section components (Milestone: /work/ portfolio)
   Consumes SEMANTIC tokens exclusively (spec A1) — no raw hex.
   Logical properties only (spec A5). Focus comes from the global
   :focus-visible rule (spec A7); nothing here restyles focus.
   ========================================================================== */

/* ------------------------------------------------------------------
   Section-current nav state — entry pages sit *under* /work/, so the
   Work link is marked aria-current="true" (section), not "page".
   Same treatment as [aria-current="page"] in components.css.
   ------------------------------------------------------------------ */

.nav__link[aria-current="true"] {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------------
   Honesty label — standalone variant of the work-card label anatomy
   (components.css .card--work .card__label) for use beside a page
   title. The label is anatomy, not an option.
   ------------------------------------------------------------------ */

.work-label {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  padding: var(--space-1) var(--space-3);
  margin-block-end: var(--space-6);
}

/* ------------------------------------------------------------------
   Entry-page header — breadcrumb, label, title, dek.
   ------------------------------------------------------------------ */

.work-crumb {
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin-block-end: var(--space-8);
}
.work-crumb a {
  color: var(--text-secondary);
  text-decoration: none;
}
@media (hover: hover) {
  .work-crumb a:hover {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
}
.work-crumb [aria-hidden="true"] { padding-inline: var(--space-2); }

.work-dek {
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
  max-inline-size: 52ch;
  margin-block-start: var(--space-8);
}

/* ------------------------------------------------------------------
   Figures — the device-frame component (.work-figure / --frame) is now a
   SHARED component in components.css (promoted 2026-07-12 so the homepage
   hero can reuse it — the homepage does not load work.css). Only the
   work-page GALLERY LAYOUT stays here.
   ------------------------------------------------------------------ */

/* Craft-evidence gallery — one column on mobile, two up from 768px. */
.work-gallery {
  display: grid;
  gap: var(--gutter);
  margin-block-start: var(--space-8);
}
@media (min-width: 768px) {
  .work-gallery { grid-template-columns: repeat(2, 1fr); }
  .work-gallery > .work-figure--wide { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------
   Long-form article rhythm — scope-of-work lists and the honest
   "what's measured next" note.
   ------------------------------------------------------------------ */

.work-list {
  padding-inline-start: 1.25em;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.work-list li { max-inline-size: 70ch; }
.work-list li::marker { color: var(--accent); }

/* Honest placeholder for future results — quiet, bronze-ruled, kin to
   the statement block but set in the functional sans. */
.work-note {
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: var(--space-6);
}

/* ------------------------------------------------------------------
   Evidence viewer — progressive enhancement for verified captures.
   The source figure remains visible and readable without JavaScript;
   evidence-viewer.js adds the button and native dialog only when supported.
   ------------------------------------------------------------------ */

.evidence-trigger {
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: inherit;
  cursor: zoom-in;
}
.evidence-trigger picture,
.evidence-trigger img { display: block; inline-size: 100%; }
@media (hover: hover) {
  .evidence-trigger img {
    transition: transform var(--duration-standard) var(--ease-state),
                filter var(--duration-standard) var(--ease-state);
  }
  .evidence-trigger:hover img { transform: scale(1.012); filter: brightness(1.04); }
}

.evidence-viewer {
  inline-size: min(94vw, 1440px);
  max-inline-size: none;
  max-block-size: 92dvh;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.evidence-viewer::backdrop {
  background: color-mix(in srgb, var(--charcoal) 88%, transparent);
  backdrop-filter: blur(6px);
}
.evidence-viewer__stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  max-block-size: 92dvh;
}
.evidence-viewer__media {
  display: grid;
  place-items: center;
  min-block-size: 0;
  padding: clamp(var(--space-4), 3vw, var(--space-10));
  background: var(--surface-secondary);
  overflow: auto;
}
.evidence-viewer__image {
  display: block;
  max-inline-size: 100%;
  max-block-size: 72dvh;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}
.evidence-viewer__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--border-subtle);
}
.evidence-viewer__caption {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-small);
  text-align: center;
}
.evidence-viewer__controls { display: flex; gap: var(--space-2); }
.evidence-viewer__control {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-body-lg);
  cursor: pointer;
}
.evidence-viewer__control:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 599.98px) {
  .evidence-viewer { inline-size: 100vw; max-block-size: 100dvh; border: 0; border-radius: 0; }
  .evidence-viewer__stage { max-block-size: 100dvh; min-block-size: 100dvh; }
  .evidence-viewer__image { max-block-size: 68dvh; }
  .evidence-viewer__bar { grid-template-columns: 1fr auto; }
  .evidence-viewer__caption { grid-column: 1 / -1; grid-row: 1; text-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .evidence-trigger img { transition: none; }
  .evidence-trigger:hover img { transform: none; }
}