/*
  Page-local styles for the "Visual codes" page.
  Everything site-wide (colors, fonts, spacing) comes from /assets/css/tokens.css —
  this file only adds what is unique to this page: the step cards in the
  how-to section, the code cards, and the before/after comparison slider.

  Kept in this folder rather than in the shared pages.css because no other page
  uses them — the same pattern as /guides/claude/styles.css.
*/

/* ───── How-to steps ─────
   A responsive row of four numbered cards. auto-fit + minmax means the
   browser decides how many fit per row — 4 on desktop, 2 on tablet, 1 on phone. */
.vc-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-4);
  margin-block: var(--space-5) var(--space-6);
}
.vc-step {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.vc-step__number {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-highlight);
  display: block;
  margin-bottom: var(--space-2);
}
.vc-step h3 {
  font-size: var(--fs-body);
  margin-bottom: var(--space-2);
}
.vc-step p {
  font-size: var(--fs-small);
  color: var(--color-text-soft);
  margin: 0;
  max-width: none;
}
/* Example codeword inside a step ("/cutaway") */
.vc-step code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

/* ───── Category sections ───── */
.vc-category { margin-top: var(--space-8); }
/* max-width: none overrides the global 40rem prose width from base.css,
   so the intro spans the full grid width like every other text on this page. */
.vc-category > p {
  color: var(--color-text-soft);
  margin-bottom: var(--space-5);
  max-width: none;
}

/* ───── Code cards ─────
   Two per row on desktop (each card holds a wide slider, so they need room),
   one per row on narrow screens. min(100%, 400px) prevents overflow on phones. */
.vc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
  gap: var(--space-5);
}
.vc-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Card header: the codeword (which is also the copy button) + a hint.
   position:relative so the "Copied!" toast can center itself over it. */
.vc-card__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.vc-card__code {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-dark-text);
  background: var(--color-copy);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.vc-card__code:hover { background: var(--color-copy-hover); }
.vc-card__code:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.vc-card__hint {
  font-size: var(--fs-caption);
  color: var(--color-text-soft);
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
}
.vc-card__desc {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text);
  max-width: none;
  /* Reserve two lines so sliders line up between neighbouring cards */
  min-height: calc(2 * 1.6em);
}
/* Note under the slider (optional per-card caption) */
.vc-card__note {
  margin: 0;
  font-size: var(--fs-caption);
  font-style: italic;
  color: var(--color-text-soft);
  max-width: none;
}

/* "Add …" line — only on the few codes that need more than the codeword.
   Terracotta accent so it reads as an instruction, not as body text. */
.vc-card__addition {
  margin: calc(-1 * var(--space-1)) 0 0;
  font-size: var(--fs-small);
  font-family: var(--font-mono);
  color: var(--color-text);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-highlight);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  max-width: none;
}
.vc-card__addition-label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--color-highlight);
  margin-right: var(--space-2);
}

/* Explanatory note under the how-to steps.
   max-width: none overrides the global 40rem prose width from base.css,
   so the note spans the same width as the step cards above it. */
.vc-note {
  color: var(--color-text-soft);
  margin-bottom: var(--space-5);
  max-width: none;
}

/* ───── Hero examples ─────
   Two finished pairs above everything else, as a hook. Side by side on
   desktop, stacked on narrow screens. */
.vc-hero {
  padding-top: var(--space-6);
}
.vc-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--space-4);
}
.vc-hero__caption {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-small);
  color: var(--color-text-soft);
  max-width: none;
}

/* ───── Before/after comparison slider ─────
   Two stacked images inside a fixed 4:3 frame. The "before" layer sits on
   top and is clipped from the right with clip-path, so dragging the handle
   reveals more or less of it. --pos (0–100%) is the single source of truth;
   JS only ever updates that custom property. */
.vc-compare {
  --pos: 50%;                      /* start at 50/50 as requested */
  position: relative;
  aspect-ratio: 4 / 3;             /* all image pairs are 1448×1086 */
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  user-select: none;
  -webkit-user-select: none;
  /* pan-y (not none): the slider claims horizontal drags, but the browser keeps
     vertical ones — so a finger landing on an image can still scroll the page.
     With `none` the page would freeze wherever a touch started on a slider. */
  touch-action: pan-y;
  cursor: ew-resize;
}
.vc-compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;            /* clicks go to the container, not the image */
}
/* The clipped "before" layer. Its own <img> is full-width inside, so the
   photo never squashes — only the visible window changes. */
.vc-compare__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
/* Corner chips naming each side. The "Original" chip lives inside the clipped
   layer, so it disappears together with the before image. */
.vc-compare__chip {
  position: absolute;
  top: var(--space-2);
  font-size: var(--fs-caption);
  font-family: var(--font-mono);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgba(26, 26, 24, 0.65);
  color: var(--color-dark-text);
  pointer-events: none;
}
.vc-compare__chip--before { left: var(--space-2); }
.vc-compare__chip--after  { right: var(--space-2); }
/* The draggable handle: a 44px-wide invisible hit area (easy to grab on
   touch) with a visible line + round grip drawn inside it. */
.vc-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  transform: translateX(-50%);
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  background: none;
  border: none;
  padding: 0;
}
/* Vertical divider line */
.vc-compare__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 0 4px rgba(26, 26, 24, 0.4);
}
/* Round grip with ‹ › arrows */
.vc-compare__grip {
  position: relative;              /* above the ::before line */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  font-size: var(--fs-caption);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  letter-spacing: -1px;
}
.vc-compare__handle:focus-visible { outline: none; }
.vc-compare__handle:focus-visible .vc-compare__grip { box-shadow: var(--shadow-focus); }


/* ───── Vertical rhythm ─────
   The site's shared section paddings are tuned for pages with one text block
   per section. This page stacks four short blocks in a row (hero, answer
   capsule, how-to), and there the paddings add up: 96px below the sliders and
   another 96px between each block — three blank lines of body text.

   These rules halve that to a steady 48px. They are scoped to the body class
   so /assets/css/ stays untouched and no other page changes. */
.page-visual-codes .page-hero  { padding-block: var(--space-7) var(--space-5); }
.page-visual-codes .seo-answer { padding-block: var(--space-5); }
.page-visual-codes #how-to     { padding-top: var(--space-5); }