/* ==========================================================================
   SELECTED WORK
   Desktop and tablet: the section pins to the screen; as you scroll, the images
   on the right slide up and the titles on the left move up with them.
   Mobile: one card per project, with title, text, and image together.
   Everything reads from tokens.css.
   ========================================================================== */

.work {
  --h: min(60vh, 680px);            /* height of the image window when pinned */
  background: var(--color-bg);
  color: var(--color-ink);
}

.work__stage { padding-block: var(--space-section); }

.work__title {
  margin-bottom: var(--space-7);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1;
}

.work__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}

/* ---------- Project list ---------- */
.work__list { list-style: none; margin: 0; padding: 0; }

.work__row {
  --a: 1;                            /* how open this row is (0 to 1); the script animates it */
  --o: 1;                            /* how strong this row is (0 to 1) */
  display: block;
  padding: var(--space-7) 0;
  border-top: 1px solid var(--color-line);
  color: inherit;
  text-decoration: none;
  opacity: var(--o);
}
.work__row:hover { text-decoration: none; }
.work__row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.work__head { display: flex; align-items: center; gap: var(--space-4); }
.work__num {
  min-width: 2rem;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}
.work__name {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--track-display);
}
.work__arrow { font-size: var(--step-2); color: var(--color-accent); opacity: var(--a); }

.work__desc {
  display: block;
  max-width: 46ch;
  margin: var(--space-3) 0 0 3rem;
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--color-muted);
  opacity: var(--a);
}
.work__cta {
  display: inline-block;
  margin: var(--space-3) 0 0 3rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
  opacity: var(--a);
}

/* ---------- Images (stacked normally until the pinned mode switches on) ---------- */
.work__track { display: grid; gap: var(--space-4); }
.work__slide {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--color-accent-soft);
}
.work__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Placeholder colors. Replace each with a real <img> (see index.html) */
.work__slide--1 { background: linear-gradient(135deg, var(--color-accent-soft), #bcd3c5); }
.work__slide--2 { background: linear-gradient(135deg, #f6e3dd, #ecc0b4); }
.work__slide--3 { background: linear-gradient(135deg, #e6ece8, #c9d4cd); }
.work__slide--4 { background: linear-gradient(135deg, #f3ede2, #e0d3bd); }

/* ---------- Pinned, scroll-synced mode (desktop and tablet; switched on by js/work.js) ---------- */
.work.is-pinned .work__scroll {
  height: calc(100vh - var(--header-h) + (var(--n) - 1) * 80vh);
  height: calc(100svh - var(--header-h) + (var(--n) - 1) * 80vh);
}
.work.is-pinned .work__stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  padding-block: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.work.is-pinned .work__title { margin-bottom: var(--space-6); }
.work.is-pinned .work__listwin { height: var(--h); overflow: hidden; }
.work.is-pinned .work__row { height: var(--row-h, 260px); overflow: hidden; padding: var(--space-4) 0; }
.work.is-pinned .work__name { transform: translateX(calc(var(--a) * 8px)); }
.work.is-pinned .work__preview { height: var(--h); overflow: hidden; border-radius: var(--radius-s); }
.work.is-pinned .work__track { gap: 0; will-change: transform; }
.work.is-pinned .work__slide { height: var(--h); aspect-ratio: auto; border-radius: 0; }

/* ---------- Cards (mobile, short screens, and reduced motion) ---------- */
.work__mob { display: none; }
.work.is-cards .work__grid { display: none; }
.work.is-cards .work__mob { display: grid; grid-template-columns: 1fr; gap: var(--space-7) var(--space-6); }
.work__card { position: relative; padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.work__card .work__row { padding: 0; border: 0; }
.work__card .work__row:focus-visible { outline: none; }
.work__card .work__row::after { content: ""; position: absolute; inset: 0; }   /* makes the whole card a link */
.work__card .work__row:focus-visible::after { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.work__card .work__slide { margin-top: var(--space-5); }

@media (max-width: 1199px) {
  .work { --h: min(52vh, 520px); }
  .work__grid { gap: var(--space-6); }
}
@media (max-width: 809px) {
  .work__grid { grid-template-columns: 1fr; }
  .work__desc, .work__cta { margin-left: 3rem; }
}
@media (min-width: 640px) {
  .work.is-cards .work__mob { grid-template-columns: 1fr 1fr; }
}