/* ==========================================================================
   work.css — portfolio index cards and project-page touches
   Index thumbnails crop (`cover`) like photographs — they are teasers, and
   the project page shows every image uncropped in a drawing frame.
   ========================================================================== */

.work-card {
  padding: 0;
  overflow: hidden;
}

.work-card__media {
  aspect-ratio: 4 / 3;

  overflow: hidden;

  background-color: var(--surface-sunken);

  border-block-end: var(--border-w) solid var(--border);
}

.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The card's own padding is zero so the image can run flush to its edges;
   the text block gets it back here. */
.work-card .card__title,
.work-card .card__body,
.work-card .card__meta {
  margin-inline: var(--space-6);
}

.work-card .card__title { margin-block-start: var(--space-2); }

.work-card .card__meta { padding-block-end: var(--space-5); }

/* Breadcrumb link inside a project page's eyebrow. */
.work-back {
  color: inherit;
}

/* --- Project overview: start the prose level with the title --------------
   The left column opens with the PROJECT eyebrow, so without this the
   prose starts a line higher than "Overview.". The offset is exactly the
   eyebrow's rendered height plus the stack gap beneath it — recompute it
   if either token changes. Only at the width where the split engages.    */

@media (min-width: 64rem) {
  .work-overview__body {
    padding-block-start: calc(var(--fs-2xs) * var(--lh-h3) + var(--space-5));
  }
}

/* --- Card hover: scrim + label over the image ----------------------------
   The whole card is already one stretched link (card.css .card--link), so
   the overlay is purely visual and must not intercept the click.          */

.work-card__media { position: relative; }

.work-card__media::after {
  content: "";

  position: absolute;
  inset: 0;

  background-color: var(--overlay-soft);
  opacity: 0;

  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}

.work-card__view {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;

  color: var(--text-on-ink);
  opacity: 0;

  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}

.work-card__media img {
  transition: transform var(--dur-slow) var(--ease);
}

.work-card:hover .work-card__media::after,
.work-card:focus-within .work-card__media::after,
.work-card:hover .work-card__view,
.work-card:focus-within .work-card__view {
  opacity: 1;
}

.work-card:hover .work-card__media img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .work-card:hover .work-card__media img { transform: none; }
}

/* --- Lightbox: native <dialog>, images pop to full size ------------------
   Without JS the triggers are plain links to the image file, so the
   behaviour degrades to "opens the image" rather than breaking.           */

.lightbox-link {
  display: block;
}

.lightbox-link:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: var(--space-6);

  border: 0;
  background: transparent;
}

.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox::backdrop {
  background-color: var(--overlay);
}

.lightbox__stage {
  margin: 0;
}

.lightbox__stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, var(--container-wide));
  max-height: 80dvh;
  padding: var(--space-3);

  background-color: var(--surface);

  border-radius: var(--radius-lg);
}

.lightbox__close,
.lightbox__nav {
  position: fixed;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;   /* minimum tap target */
  height: 44px;  /* minimum tap target */

  background-color: transparent;

  color: var(--text-on-ink);
  cursor: pointer;

  border: var(--border-w) solid var(--text-muted-on-ink);
  border-radius: var(--radius-sm);
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background-color: var(--accent-on-ink);
  color: var(--ink);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: var(--focus-w) solid var(--focus-on-ink);
  outline-offset: var(--focus-offset);
}

.lightbox__close {
  inset-block-start: var(--gutter);
  inset-inline-end: var(--gutter);
}

.lightbox__nav--prev { inset-inline-start: var(--gutter); inset-block-start: 50%; }
.lightbox__nav--next { inset-inline-end: var(--gutter); inset-block-start: 50%; }

.lightbox__count {
  position: fixed;
  inset-block-end: var(--gutter);
  inset-inline-start: 50%;
  transform: translateX(-50%);

  margin: 0;

  color: var(--text-muted-on-ink);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}