/* ==========================================================================
   DaveDoesDesigns — Select Work detail
   Body content only: this layout slots UNDER the real fixed site header.
   Reserve the header with --header-h (one variable, changed in one place).

   Tokens: the spec's light-mode values are the Figma "Desktop - Light"
   frame. Where styles.css already ships a theme-aware token we alias it so
   the page follows the site theme toggle; only the four values styles.css
   has no equivalent for are declared outright (with dark-mode overrides).
   ========================================================================== */
:root {
  --header-h: 96px;
}

.sw-detail {
  /* Aliases onto the global theme-aware tokens (styles.css) */
  --sw-bg: var(--bg-default);
  --sw-rail-bg: var(--bg-surface);
  --sw-fg: var(--fg-default);
  --sw-fg-muted: var(--fg-muted);
  --sw-fg-subtle: var(--fg-subtle);
  --sw-accent: var(--accent);
  --sw-border: var(--neutral-700);

  /* No styles.css equivalent — declared here, light values from Figma */
  --sw-surface-2: #f4f1f8;
  --sw-neutral-400: #a899b9;
  --sw-neutral: #867596;
  --sw-chip-border: #d2d2d2;

  /* Carousel geometry. Figma: 688x560 stage, 258x560 focus slide, the
     flanks at 0.8 scale sitting 85% of a slide width off centre. */
  --sw-stage-w: 688px;
  --sw-slide-w: 258px;
  --sw-slide-h: 560px;
  --sw-flank-scale: 0.8;
  --sw-flank-offset: 85%;

  background: var(--sw-bg);
  color: var(--sw-fg);
  font-family: var(--font-body);
}

:root[data-theme='dark'] .sw-detail {
  --sw-surface-2: var(--bg-surface-2);
  --sw-neutral-400: var(--fg-subtle);
  --sw-neutral: var(--fg-muted);
  --sw-chip-border: var(--divider-strong);
}

/* ==========================================================================
   Two-column shell — gallery scrolls, rail sticks
   ========================================================================== */
.sw-detail__layout {
  display: flex;
  align-items: flex-start;
}

/* Gallery ~69% (Figma: 1320 of 1920); the rail is a fixed 600px */
.sw-gallery {
  flex: 1 1 auto;
  min-width: 0;
}

.sw-rail {
  position: sticky;
  top: var(--header-h);
  flex: 0 0 600px;
  width: 600px;
  /* The rail is often taller than the viewport on laptops. Cap it to the
     space below the real header and scroll inside, so the footer nav can
     always be reached. (The brief said 100vh; that would push the last
     --header-h pixels off-screen and hide the nav it asks to protect.) */
  max-height: calc(100vh - var(--header-h));
  /* Fill that space too, so the white panel runs the full height of the
     viewport and the footer nav sits on the bottom edge (Figma: h-full) */
  min-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 48px 36px;
  background: var(--sw-rail-bg);
}

/* ==========================================================================
   Rail
   ========================================================================== */

/* The JS mount point, so it has to carry the column itself: without this
   the footer nav stops right under the details instead of the bottom */
.sw-rail__content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}

.sw-rail__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 96px;
}

.sw-rail__details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* H5 — client eyebrow */
.sw-rail__client {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sw-fg-subtle);
}

.sw-rail__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* H2 — project name */
.sw-rail__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.8px;
  color: var(--sw-fg);
}

/* Body */
.sw-rail__overview {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  color: var(--sw-fg-muted);
}

/* --- Category chips ------------------------------------------------------ */
.sw-rail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sw-rail__chips li {
  padding: 4px 8px;
  border: 1.5px solid var(--sw-chip-border);
  border-radius: 64px;
  background: var(--sw-rail-bg);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sw-fg-muted);
}

/* --- Scope metadata (real dl / dt / dd) ---------------------------------- */
.sw-rail__scope {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}

.sw-rail__scope dt {
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  color: var(--sw-neutral-400);
}

.sw-rail__scope dd {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sw-fg);
}

/* ==========================================================================
   Rail footer nav — home button + "Select Work Pieces" pill
   ========================================================================== */
.sw-rail__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.sw-home,
.sw-pieces {
  background: var(--sw-surface-2);
  border-radius: 8px;
}

.sw-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  align-self: stretch;
  padding: 8px 16px;
  border: 0;
  color: var(--sw-accent);
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms var(--ease-out);
}

.sw-home svg {
  display: block;
  width: 20px;
  height: 20px;
}

.sw-pieces {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
}

.sw-pieces__label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sw-fg-subtle);
  white-space: nowrap;
}

.sw-pieces__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sw-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--sw-border);
  border-radius: 36px;
  background: var(--sw-rail-bg);
  color: var(--sw-accent);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease,
    transform 200ms var(--ease-out);
}

.sw-arrow svg {
  display: block;
  width: 14px;
  height: 14px;
}

.sw-home:hover,
.sw-arrow:hover {
  background: var(--sw-accent);
  border-color: var(--sw-accent);
  color: var(--accent-contrast, #fff);
  transform: translateY(-1px);
}

.sw-home:focus-visible,
.sw-arrow:focus-visible,
.sw-carousel__arrow:focus-visible,
.sw-carousel__dot:focus-visible,
.sw-carousel__stage:focus-visible {
  outline: 2px solid var(--sw-accent);
  outline-offset: 3px;
}

/* ==========================================================================
   Gallery feature blocks — one viewport tall, alternating background
   ========================================================================== */
.sw-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  min-height: 100vh;
  padding: 96px 24px;
  overflow: hidden;
  background: var(--sw-bg);
}

.sw-feature:nth-child(even) {
  background: var(--sw-surface-2);
}

.sw-feature__meta {
  width: min(588px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

/* H6 — feature title */
.sw-feature__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sw-fg);
}

/* Body */
.sw-feature__body {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  color: var(--sw-fg-muted);
}

/* ==========================================================================
   Carousel — one slide in focus, neighbours blurred at 50% as a peek
   ========================================================================== */
.sw-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  /* Definite width, so the stage's percentage width has something to
     resolve against instead of collapsing to shrink-to-fit */
  width: 100%;
}

/* Desktop captures: wider, shorter slides. The flanks tuck further under
   the focused slide, so the peek reads the same as the phone carousels. */
.sw-carousel--landscape {
  --sw-slide-w: 480px;
  --sw-slide-h: 270px;
  --sw-flank-offset: 68%;
}

.sw-carousel__viewport {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.sw-carousel__stage {
  position: relative;
  width: var(--sw-stage-w);
  max-width: 100%;
  height: var(--sw-slide-h);
  /* Clips the parked off-stage slides, matching the Figma column clip */
  overflow: hidden;
  /* Let vertical scrolling through the carousel still work on touch */
  touch-action: pan-y;
}

.sw-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  padding: 0;
  border: 1px solid var(--sw-border);
  border-radius: 36px;
  background: var(--sw-rail-bg);
  color: var(--sw-accent);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease,
    color 200ms ease;
}

.sw-carousel__arrow--prev { left: 8px; }
.sw-carousel__arrow--next { right: 8px; }

.sw-carousel__arrow svg {
  display: block;
  width: 16px;
  height: 16px;
}

.sw-carousel__arrow:hover {
  background: var(--sw-accent);
  border-color: var(--sw-accent);
  color: var(--accent-contrast, #fff);
}

/* --- Slides -------------------------------------------------------------- */
.sw-carousel__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sw-slide-w);
  height: var(--sw-slide-h);
  margin-top: calc(var(--sw-slide-h) / -2);
  margin-left: calc(var(--sw-slide-w) / -2);
  /* Parked state: off-stage, invisible. data-pos promotes a slide in. */
  opacity: 0;
  transform: translateX(calc(var(--sw-flank-offset) * 1.7 + var(--sw-drag, 0px)))
    scale(0.7);
  filter: blur(2px);
  pointer-events: none;
  transition: transform 480ms var(--ease-out), opacity 480ms var(--ease-out),
    filter 480ms var(--ease-out);
}

.sw-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sw-carousel__slide[data-pos='far-prev'] {
  transform: translateX(calc(var(--sw-flank-offset) * -1.7 + var(--sw-drag, 0px)))
    scale(0.7);
}

.sw-carousel__slide[data-pos='prev'],
.sw-carousel__slide[data-pos='next'] {
  z-index: 1;
  opacity: 0.5;
  filter: blur(2px);
}

.sw-carousel__slide[data-pos='prev'] {
  transform: translateX(calc(var(--sw-flank-offset) * -1 + var(--sw-drag, 0px)))
    scale(var(--sw-flank-scale));
}

.sw-carousel__slide[data-pos='next'] {
  transform: translateX(calc(var(--sw-flank-offset) + var(--sw-drag, 0px)))
    scale(var(--sw-flank-scale));
}

.sw-carousel__slide[data-pos='current'] {
  z-index: 2;
  opacity: 1;
  filter: blur(0);
  transform: translateX(var(--sw-drag, 0px)) scale(1);
  pointer-events: auto;
}

/* While dragging, slides track the finger with no easing */
.sw-carousel__stage.is-dragging {
  cursor: grabbing;
}

.sw-carousel__stage.is-dragging .sw-carousel__slide {
  transition: none;
}

/* --- Numbered caption ---------------------------------------------------- */
.sw-carousel__caption {
  margin: 0;
  max-width: 254px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--sw-fg-subtle);
}

/* --- Dot indicators (Figma: the 56x8 mark, 5 dots on a 12px pitch) ------- */
.sw-carousel__dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sw-carousel__dot {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  /* The visible 8px dot sits inside a 16px hit area so the row still
     measures 56px across five dots while staying tappable */
  display: flex;
  align-items: center;
  justify-content: center;
}

.sw-carousel__dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral-200, #ded7e6);
  transition: background-color 240ms ease, transform 240ms var(--ease-out);
}

.sw-carousel__dot[aria-selected='true']::before {
  background: var(--sw-accent);
  transform: scale(1.15);
}

.sw-carousel__dot:hover::before {
  background: var(--sw-neutral-400);
}

.sw-carousel__dot[aria-selected='true']:hover::before {
  background: var(--sw-accent);
}

/* ==========================================================================
   Entrance reveal — one-time fade up, no loops. Reuses the site's
   [data-cascade] convention from styles.css; .in-view is applied by
   select-work.js so it re-arms when a piece is swapped.
   ========================================================================== */
.sw-detail [data-cascade] {
  will-change: opacity, transform;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .sw-detail__layout {
    flex-direction: column;
  }

  /* Rail first, above the gallery, and no longer sticky */
  .sw-rail {
    position: static;
    order: -1;
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
    overflow-y: visible;
    padding: 48px 24px;
  }

  .sw-rail__inner {
    gap: 48px;
  }

  .sw-gallery {
    width: 100%;
  }

  .sw-feature {
    min-height: auto;
    padding: 72px 24px;
  }
}

@media (max-width: 520px) {
  .sw-detail {
    --sw-stage-w: 100%;
    --sw-slide-w: 168px;
    --sw-slide-h: 364px;
    --sw-flank-offset: 78%;
  }

  .sw-carousel--landscape {
    --sw-slide-w: 232px;
    --sw-slide-h: 131px;
    --sw-flank-offset: 62%;
  }

  .sw-rail__title {
    font-size: 34px;
  }

  .sw-rail {
    padding: 32px 20px;
  }

  .sw-feature {
    gap: 32px;
    padding: 56px 16px;
  }

  .sw-carousel__arrow {
    width: 32px;
    height: 32px;
    margin-top: -16px;
  }

  .sw-carousel__arrow--prev { left: 0; }
  .sw-carousel__arrow--next { right: 0; }

  .sw-pieces__label {
    display: none;
  }
}

/* ==========================================================================
   Reduced motion — reveals and slide changes become instant
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sw-carousel__slide,
  .sw-carousel__dot::before,
  .sw-home,
  .sw-arrow,
  .sw-carousel__arrow {
    transition: none;
  }

  .sw-detail [data-cascade] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}