/* =============================================================================
   artwork-nav.css — ArtworkNavigation component
   Previous / Next artwork navigation. Injected at the very end of every
   artwork detail page's content — after the image, metadata, story blocks,
   and scale-reference link — just before the site footer.

   One responsive layout serves both breakpoints (no separate desktop
   override exists elsewhere in the codebase for this component to match,
   so desktop simply reuses the same left-chevron/name · name/right-chevron
   logic as mobile, per spec).

   Reusable markup — copy-paste per artwork page, swapping four values:
   previous artwork name + href (left side), next artwork name + href
   (right side). See design-system/components.md for full usage notes,
   including the "no previous/next" edge case.
   ============================================================================= */

.artwork-nav {
  display: flex;
  width: 100%;
}

/* Top divider — same pattern as .site-footer__divider / .artwork-story__divider. */
.artwork-nav__divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-gray-300);
  border: none;
  margin: 0;
}

/* Each side — Manrope Regular 14px/20px, Grey 100 — matches the site's
   artwork-metadata typography (.artwork-card__inspiration, .artwork-info__dimensions). */
.artwork-nav__link {
  display: flex;
  align-items: center;               /* icon + text share the same vertical center */
  gap: var(--space-2);               /* 8px icon-text spacing — was 16px, sized back down so more width is left for the label */
  width: 50%;                        /* each side is exactly half the row — the <a> itself, not just its text/icon content */
  height: 100%;                      /* fills its cell's full height (in practice already guaranteed by .artwork-nav's default flex stretch, stated explicitly here too) */
  min-height: var(--space-14);       /* 56px minimum tap height */
  padding-inline: var(--space-6);    /* 24px — was 32px, sized back down so more width is left for the label */
  font-family: var(--font-family-base);
  font-size: 0.875rem;               /* 14px */
  line-height: 20px;
  font-weight: 400;                  /* Regular */
  color: var(--color-gray-100);      /* #B8B8B8 */
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms ease;      /* color only — no transform here; see the hover rule below for why */
}

/* justify-content is explicit below (flex-start / flex-end) even though
   .artwork-nav__name's flex: 1 1 auto already consumes every pixel of
   free space in the row, leaving nothing left over for justify-content
   to actually distribute in practice — it's stated directly so the
   outer edge the icon+text group anchors to is never ambiguous or
   dependent on the name's flex behavior alone. Verified by measurement:
   on both mobile (390px) and desktop (1440px) viewports, each chevron
   sits exactly padding-inline (24px, .artwork-nav__link below) in from
   its half's outer edge — flush with the top divider's own start/end —
   and a long title correctly grows to fill the full remaining width
   before ellipsis triggers, rather than truncating early. */

/* Vertical divider between the two halves — same color/weight as the
   horizontal .artwork-nav__divider above the whole component, just
   rotated. Applied as a border on the left half only (not both, to avoid
   a doubled/misaligned 2px line): it sits exactly on the boundary
   between the two 50%-width flex items, and reset.css's box-sizing:
   border-box keeps that boundary at the true midpoint regardless of the
   border's own width. Full 56px row height, not the row's line-height,
   so it reads as a clean vertical rule rather than a short text-height tick.
   Fixed at 50% always — nothing in this file moves it on hover or as text
   length changes (hover is color-only, see below; the name's flex-grow
   only ever consumes space within its own half, never across it). */
.artwork-nav__link--prev {
  justify-content: flex-start;         /* chevron (first in DOM) anchors left, per spec */
  border-right: 1px solid var(--color-gray-300);
}

.artwork-nav__link--next {
  justify-content: flex-end;           /* chevron (last in DOM) anchors right, per spec */
}

/* Chevron icons — inline SVG, not CSS mask-image.
   Two earlier attempts kept the icon as an empty <span> painted via
   mask-image: url("...chevron....svg") (the .icon-mask pattern used
   elsewhere in this codebase, e.g. the footer Instagram icon). Both
   rendered as an invisible/dark box rather than a visible chevron. This
   project has no build step or dev server — pages are opened directly via
   file://, and the referenced icon filenames contain literal spaces
   ("icon chevron left.svg"). CSS mask-image fetching an external file
   through file:// with an unescaped space in the path is the most likely
   point of silent failure: when the mask image fails to load, there is
   nothing for the background-color to reveal, so the box shows through to
   the page's near-black background — exactly the "black/invisible icon"
   symptom reported, and unaffected by the background-color/mask-property
   fixes attempted so far, since the failure happens at the image-fetch
   step, before any of those properties come into play.

   The fix removes the external file dependency entirely: the same path
   data from assets/icons/icon chevron left.svg / icon chevron right.svg
   (the existing icon system — nothing new drawn) is now inlined directly
   in the page markup, with fill="currentColor" swapped in for the
   original hardcoded fill="white". An inline <svg> has no separate
   resource to fetch, so there is no load step left to fail.

   fill is also set explicitly below (not left to inherit via
   currentColor alone) so the icon's color doesn't depend on inheritance
   working correctly either — belt and suspenders.

   width: 7.1px (not 16px, not square) — the chevron glyph itself is much
   narrower than its original 24×24 design grid (the source icon file
   builds it inside a square frame with several px of empty space on
   each side, same as most icon systems). Squaring the rendered box to
   16×16 re-centered the glyph inside that square and reintroduced the
   same whitespace as padding, which measured out to ~4–5px of invisible
   space beyond the intended 24px cell padding — exactly the "~28px
   instead of 24px" gap reported. The viewBox on the <svg> itself (in the
   page markup) is now cropped tightly to the glyph's actual horizontal
   bounds (6.68–17.33 of the original 0–24 grid), so at a 16px height the
   glyph's own natural width is 7.1px with zero built-in side padding —
   this box's edges now ARE the visible ink's edges. */
.artwork-nav__icon {
  width: 7.1px;                      /* was 16px (square) — matches the cropped glyph's own aspect ratio at 16px height, no internal whitespace */
  height: var(--space-4);            /* 16px */
  flex: 0 0 auto;                    /* never grows, never shrinks — fixed size regardless of label length */
  fill: var(--color-gray-100);       /* explicit default paint — matches the nav text color */
}

/* Moves to white together with the text on hover/focus — mirrors
   .artwork-nav__link's own color change, applied directly to the icon
   rather than relied on via inheritance. */
.artwork-nav__link:hover .artwork-nav__icon,
.artwork-nav__link:focus-visible .artwork-nav__icon {
  fill: var(--color-white);
}

/* Name — grows to fill whatever space the (fixed-size) icon doesn't use,
   so each half reads as one continuous interactive block rather than a
   small icon+text cluster floating at one edge. text-align (below, per
   direction) then keeps the visible text hugging its neighboring
   chevron inside that expanded box. min-width: 0 lets it shrink below
   its content width when needed, so text-overflow can still truncate a
   future long artwork title instead of breaking the row. */
.artwork-nav__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Previous: icon first, then name — name text sits left-aligned, i.e.
   immediately after the icon, at the start of its expanded box. */
.artwork-nav__link--prev .artwork-nav__name {
  text-align: left;
}

/* Next: name first, then icon — name text sits right-aligned, i.e.
   immediately before the icon, at the end of its expanded box. */
.artwork-nav__link--next .artwork-nav__name {
  text-align: right;
}

/* ── Hover / focus ───────────────────────────────────────────────────────
   Color only — no transform/translateX, no margin or padding shift. An
   earlier version nudged the link translateX(±2px) on hover, but that
   moved the .artwork-nav__link--prev box itself, and the vertical divider
   is a border-right ON that same box (see above) — so the divider visibly
   shifted sideways along with the hover text, reading as unstable/jittery
   rather than a fixed rule. Color-only feedback (text + icon fill both
   follow this same `color` change) keeps the divider, both cells' widths,
   and the chevrons' positions completely static at all times, matching
   the site's existing understated hover language elsewhere (footer
   contact links, CTA links) with no layout movement at all. */

.artwork-nav__link:hover {
  color: var(--color-white);
}

.artwork-nav__link:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* ── Edge case: no previous / no next artwork ───────────────────────────
   When an artwork is first or last in the sequence, replace that side's
   <a> with a non-interactive element (e.g. <span>) carrying this class
   instead — never an <a> with no href. Keeps the 50/50 split intact so
   the remaining side stays anchored to its own edge, with the missing
   side simply left blank. */
.artwork-nav__link--empty {
  visibility: hidden;
  pointer-events: none;
}