/* ------------------------------------------------------------
   RECENT WORK SWITCHER
   Tabs on top, a horizontal snap track below. Click a tab, use the
   arrows or keyboard, or swipe. Without JS the track still scrolls
   sideways and the tabs work as plain anchor links.
   ------------------------------------------------------------ */
.work-switch { position: relative; }

.work-tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-strong);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.work-tab {
  position: relative; display: grid; align-content: start; gap: 0.25rem;
  min-height: var(--touch); padding: 1.15rem 1.25rem 1.25rem 0;
  color: var(--text-muted); text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}
.work-tab + .work-tab { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.work-tab::before {
  content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 3px;
  background: var(--purple); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out);
}
.work-tab-n {
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 600;
  color: var(--num); font-variant-numeric: tabular-nums;
}
.work-tab-name {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em;
  font-size: clamp(1.05rem, 0.6vw + 0.85rem, 1.35rem); line-height: 1.25;
  color: var(--text-primary); opacity: 0.6;
  transition: opacity var(--duration-base) var(--ease-out);
}
.work-tab-meta { font-size: 0.86rem; line-height: 1.45; }
.work-tab:hover .work-tab-name { opacity: 0.8; }
.work-tab[aria-selected="true"] { color: var(--text-secondary); }
.work-tab[aria-selected="true"]::before { transform: scaleX(1); }
.work-tab[aria-selected="true"] .work-tab-name { opacity: 1; }
.work-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* The track: one project per "page", snapping */
.work-track {
  display: flex; gap: var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 1.75rem; /* room for the purple offset shadow */
}
.work-track::-webkit-scrollbar { display: none; }
.work-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.work-slide {
  position: relative; /* keeps the sr-only heading clipped inside the track */
  flex: 0 0 100%; min-width: 0;
  scroll-snap-align: start; scroll-snap-stop: always;
  scroll-margin-top: calc(var(--nav-height) + 2rem);
}
.work-switch.is-ready .work-slide:not(.is-active) .work-shot { opacity: 0.45; }
.work-switch.is-ready .work-slide:not(.is-active) .work-info,
.work-switch.is-ready .work-slide:not(.is-active) figcaption { opacity: 0; }
.work-shot, .work-info, .work-shot figcaption { transition: opacity var(--duration-slow) var(--ease-out); }
.work-slide .work-shot figcaption { margin-top: calc(14px + 0.85rem); }
.work-slide .work-layout { padding-right: 18px; } /* keeps the 14px shadow inside the clip */

/* Logos all sit on the same light chip, whatever their colours */
.work-client-logo { max-width: 100%; object-fit: contain; object-position: left center; }

/* Counter + arrows */
.work-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--rule); padding-top: 1.1rem;
}
.work-switch:not(.is-ready) .work-nav { display: none; }
.work-count {
  font-family: var(--font-display); font-size: 0.95rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.work-count strong { color: var(--text-primary); font-weight: 700; }
.work-hint { margin-left: 0.75rem; font-family: var(--font-sans); font-size: 0.85rem; }
.work-arrows { display: flex; gap: 0.6rem; }
.work-arrow {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--text-primary);
  border: 1.5px solid var(--text-primary);
  transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-base) var(--ease-out);
}
.work-arrow svg { width: 20px; height: 20px; }
.work-arrow:hover:not(:disabled) { background: var(--text-primary); color: var(--bg); }
.work-arrow:active:not(:disabled) { transform: scale(0.94); }
.work-arrow:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }


@media (max-width: 767px) {
  .work-tab { padding: 0.9rem 0.6rem 1rem 0; }
  .work-tab + .work-tab { padding-left: 0.75rem; }
  .work-tab-meta { display: none; }
  .work-tab-name { font-size: 0.98rem; }
  /* Show the edge of the next project so it is obvious there is more */
  .work-track { gap: 1rem; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); scroll-padding-left: 0; }
  .work-slide { flex-basis: 88%; }
  .work-slide .work-layout { padding-right: 10px; }
  .work-slide .work-shot figcaption { margin-top: calc(8px + 0.75rem); }
  .work-hint { display: block; margin: 0.15rem 0 0; }
  .work-arrow { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .work-track { scroll-behavior: auto; }
  .work-tab::before, .work-shot, .work-info, .work-shot figcaption, .work-tab-name { transition: none; }
}