/* =========================================================================
   Components — Steps 1.4 to 1.7
   -------------------------------------------------------------------------
   Every interaction state here is measured, not invented. The source of truth
   is reference/interactions.json, where `components` came from dispatching
   real pointer events and reading computed styles.

   Two measured facts that look like bugs but are not:
     - the footer links have NO hover change at all
     - the nav link for the CURRENT page is inert; other nav links hover
   Both were confirmed by ground truth. Don't "fix" them.
   ========================================================================= */

/* =========================================================================
   1.4  Buttons and links
   ========================================================================= */

/* --- nav link: #868686 -> #1A1A1A ---------------------------------------- */
.nav-link {
  font-size: var(--step-small);
  line-height: var(--step-small-lh);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
  transition: color var(--duration) var(--easing);
}
.nav-link:hover { color: var(--ink); }

/* The current page's nav link does not respond to hover. Measured. */
.nav-link[aria-current="page"] { color: var(--text-muted); }
.nav-link[aria-current="page"]:hover { color: var(--text-muted); }

/* --- footer link: no hover change whatsoever. Measured. ------------------ */
.footer-link {
  font-size: var(--step-small);
  line-height: var(--step-small-lh);
  color: var(--text-muted);
}

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 16px inline, measured: "View projects" renders 124px wide on the original
     and 141px at 24px padding. */
  padding: var(--space-xs) var(--space-sm);
  min-height: 40px;
  font-size: var(--step-small);
  line-height: var(--step-small-lh);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: var(--transition-colors);
}

/* Filled — "View projects". Dark fill inverts to white on hover. */
.btn--filled {
  background: var(--surface-inverse);
  color: var(--surface);
  border-color: var(--ink-strong);
}
.btn--filled:hover {
  background: var(--surface);
  color: var(--ink-strong);
}

/* Outlined — the case-study CTAs. Inverts the OPPOSITE way to the filled
   button: light at rest, black on hover, and the border darkens too. */
.btn--outlined {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-subtle);
}
.btn--outlined:hover {
  background: var(--ink-strong);
  color: var(--surface);
  border-color: var(--border-strong);
}

/* --- text link ----------------------------------------------------------- */
.link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--duration) var(--easing);
}
.link:hover { color: var(--ink-strong); }

/* Card titles and project-index rows: no hover change. Measured. */
.link--plain { color: var(--ink); }

/* --- back to top --------------------------------------------------------- */
.to-top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--step-small);
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: var(--space-xs);
  cursor: pointer;
  transition: color var(--duration) var(--easing);
}
.to-top:hover { color: var(--ink); }

/* =========================================================================
   1.5  Layout primitives
   ========================================================================= */

/* Outer gutter: fixed 24px on mobile, 10% from 751px up, capped at 1600px. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The same grid on a narrower gutter, for media that runs wider than the
   copy. Measured on every case study: 90px at 1440 and 56px at 900 against
   the 144 / 90 of .container, and the same 24px on mobile. */
.container--wide { padding-inline: var(--gutter-wide); }

.section {
  padding-block: var(--space-xl);
}
.section--flush { padding-block: 0; }

/* The measured 62.5 / 37.5 split. Stacks below 751px. */
.split {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 751px) {
  .split {
    grid-template-columns: var(--split-media) var(--split-text);
    gap: 0;
    align-items: center;
  }
  /* Text-first variant, for alternating case-study rows. */
  .split--reverse {
    grid-template-columns: var(--split-text) var(--split-media);
  }
  .split--reverse > :first-child { order: 2; }
  .split--reverse > :last-child  { order: 1; }
}

/* -------------------------------------------------------------------------
   Text boxes — the site-wide responsive rule.

   A section's content container is 100% wide and caps at 1600. The top intro
   section is the exception: it is full-bleed, though its copy still sits on
   the same 1600 grid. Inside a section:

     two columns   the box is 60% of its column at desktop and tablet, 100%
                   on mobile, never wider than 500px. Centring it in its
                   column gives the 20 / 60 / 20 the spec asks for — 20% in
                   from the centre line on the right, 20% short of it on the
                   left — and it centres on mobile for free.
     centred       50% of the content container, max 600 at desktop and
                   tablet, max 500 on mobile.
     mobile        24px of gutter either side (--gutter).

   Home does not use these classes: its two text columns are absolutely
   positioned against their row, which the same arithmetic reaches
   (60% of a half-width column == 30% of the grid). They are here for the
   case-study pages from Phase 5 on.
   ------------------------------------------------------------------------- */
.text-box {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}
@media (min-width: 751px) {
  .text-box { width: 60%; }
}

/* Centred: 50% of the section, capped at 600. On mobile it behaves like any
   other text box — the full gutter box, capped at 500 — which is what the
   original measures (327px at 375, not the 187px a literal 50% would give). */
.text-box--centred {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}
@media (min-width: 751px) {
  .text-box--centred { width: 50%; max-width: 600px; }
}

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--stack-gap, var(--space-sm)); }
.stack--sm  { --stack-gap: var(--space-xs); }
.stack--lg  { --stack-gap: var(--space-lg); }
.stack--xl  { --stack-gap: var(--space-xl); }

.grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 751px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1001px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

/* =========================================================================
   1.6  Content components
   ========================================================================= */

/* --- eyebrow: the small grey label above a title ------------------------- */
.eyebrow {
  font-size: var(--step-small);
  line-height: var(--step-small-lh);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-none);
}
.eyebrow--plain { text-transform: none; letter-spacing: normal; }

/* --- case study meta row: Product & Platform / Timeline / Impact --------- */
.meta {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 751px) {
  .meta { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}
.meta__label {
  font-size: var(--step-body);
  line-height: var(--step-body-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.meta__value {
  font-size: var(--step-body);
  line-height: var(--step-body-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

/* --- prose: a run of body copy ------------------------------------------ */
.prose > * + * { margin-top: var(--space-md); }
.prose p {
  font-size: var(--step-body);
  line-height: var(--step-body-lh);
  letter-spacing: var(--tracking-tight);
  max-width: 70ch;
}
.prose strong { font-weight: var(--weight-bold); }

/* --- disclaimer: the italic "full case study on request" line -----------
   Measured 16px italic #868686 on a 28px line — NOT 14px. It is the only
   italic text anywhere on the site, and matches Wix's "Paragraph 2" style. */
.disclaimer {
  font-size: var(--step-body);
  line-height: var(--step-body-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--text-muted);
  font-style: italic;
}

/* --- figure with caption ------------------------------------------------ */
.figure { margin: 0; }
.figure__caption {
  margin-top: var(--space-xs);
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--text-muted);
}

/* --- before / after image pair ------------------------------------------ */
.compare {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 751px) {
  .compare { grid-template-columns: 1fr 1fr; }
}
.compare__label {
  margin-bottom: var(--space-xs);
  font-size: var(--step-small);
  color: var(--text-muted);
}

/* --- project card ------------------------------------------------------- */
.card { display: block; }
.card__media { margin-bottom: var(--space-md); }
.card__eyebrow { margin-bottom: var(--space-xs); }
.card__title {
  font-size: var(--step-section);
  line-height: var(--step-section-lh);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-section);
  margin-bottom: var(--space-sm);
}
.card__body {
  font-size: var(--step-body);
  line-height: var(--step-body-lh);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-md);
  max-width: 46ch;
}

/* --- project index: the company / role list on Home --------------------- */
.index-row { display: block; }
.index-row__title {
  font-size: var(--step-lead);
  line-height: var(--step-lead-lh);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.index-row__meta {
  font-size: var(--step-small);
  line-height: var(--step-small-lh);
  color: var(--ink);
}

/* =========================================================================
   1.7  Responsive image
   -------------------------------------------------------------------------
   Every image ships width and height so the page never shifts as it loads
   (CLS = 0, per the Step 3.3 budget). Use .media--fluid when the intrinsic
   ratio should drive the box, .media--ratio when the slot is fixed.
   ========================================================================= */
.media {
  display: block;
  width: 100%;
  height: auto;
}
.media--ratio {
  aspect-ratio: var(--ratio, 1 / 1);
  object-fit: cover;
}
.media--contain { object-fit: contain; }

/* Placeholder tint while a large image decodes; harmless once it paints. */
.media[data-loading] { background: var(--surface-alt); }

/* =========================================================================
   Forced states — for the styleguide only
   -------------------------------------------------------------------------
   A hover state is invisible in a screenshot, which makes it the easiest kind
   of detail to get wrong and never notice. These classes pin a component into
   its hover state so styleguide.html can show rest and hover side by side, and
   so a reviewer can check both at a glance.

   They are declared alongside the real :hover rule in every case, so the two
   cannot drift apart. Not used by the site itself.
   ========================================================================= */
.nav-link.is-hover { color: var(--ink); }
.nav-link[aria-current="page"].is-hover { color: var(--text-muted); }

.btn--filled.is-hover {
  background: var(--surface);
  color: var(--ink-strong);
}
.btn--outlined.is-hover {
  background: var(--ink-strong);
  color: var(--surface);
  border-color: var(--border-strong);
}
.link.is-hover { color: var(--ink-strong); }
.to-top.is-hover { color: var(--ink); }

/* Mirrors :focus-visible exactly — and like it, sets no border-radius, so a
   pill button stays a pill while focused. */
.is-focus {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}