/* ============================================
   PROGRESS SECTION
   A reusable section: a subtitle + mini description, then an auto-scrolling,
   swipeable strip of phone screens with a Version 2 / Version 1 compare toggle.

   Pairs with progress-section.js (behavior) and a `progress` block in the
   project data (projects.js).

   Depends on a few shared styles elsewhere:
     • .pd2-block / .pd2-label / .pd2-text — shared text styles (project-description.css)
     • .mode-toggle / .toggle-pill / .toggle-btn — toggle look (project.css)
     • --side-gutter — set on .project-body (project.css)
   ============================================ */
.progress-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 140px 0 0;          /* gap above; the details section below adds the gap under */
  display: flex;
  flex-direction: column;
  gap: 64px;                    /* space between the text and the preview block */
}

/* Empty preview-like panel — uses the Process section's tint (#1e1e1e at 10%) */
.progress-preview {
  background: rgba(30, 30, 30, 0.1);          /* same as the Process section */
  border: 1px solid rgba(0, 0, 0, 0.03);      /* same subtle border as Process */
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  height: calc(100svh - 48px - 70px);
  width: 100%;
}

/* Auto-scrolling strip of screens that drifts right → left and loops forever.
   The strip can run wider than the panel; off-screen screens are clipped. */
.progress-marquee {
  --gap-base: clamp(16px, 2.5vw, 40px);   /* normal gap between screens */
  --gap: var(--gap-base);                 /* JS may widen this so wide captions don't overlap */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* The panel itself scrolls the page normally (pan-y): only the drag band —
     the strip of screens — catches the swipe (see .progress-drag-band). */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* The swipe surface: an invisible strip covering exactly the carousel's
   visual band (captions + screens), positioned by JS. Horizontal drags run
   here, and vertical page scroll is blocked over it (it was mixing with the
   swipe and felt unstable) — only pinch-zoom is left to the browser. The
   empty panel above/below stays out of it, so the page scrolls from there. */
.progress-drag-band {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  cursor: grab;
  touch-action: pinch-zoom;
}
.progress-marquee.is-grabbing .progress-drag-band { cursor: grabbing; }
/* Fits-the-panel mode: nothing to drag → no band (the page just scrolls). */
.progress-marquee--static .progress-drag-band { display: none; }

/* When the content fits the panel, don't scroll: center it, hide the loop copy,
   and use a normal cursor (no dragging). Not draggable → let the page scroll. */
.progress-marquee--static { justify-content: center; cursor: default; touch-action: pan-y; }
.progress-marquee--static .progress-dup { display: none; }

/* Reserve exactly the toggle's zone (24px from bottom + 80px tall) so the
   bottom edge of the image area lines up with the top of the toggle. */
.progress-preview.has-toggle .progress-marquee {
  padding-bottom: 104px;
}

.progress-track {
  display: flex;
  align-items: center;
  height: 100%;                 /* fills the panel so item/image heights can be % of it */
  width: max-content;
  will-change: transform;       /* position driven in JS (auto-drift + drag) */
}

/* Each screen. The image is the fixed anchor; notes are positioned ABSOLUTELY
   above/below, so adding any amount of text never shifts the screens. */
.progress-item {
  position: relative;
  flex: 0 0 auto;
  height: 100%;                /* full panel height; the shot inside is centered */
  display: flex;
  align-items: center;
  margin-right: var(--gap);   /* trailing gap on every item keeps the loop seamless */
  /* Reserve the note height below the image (set in JS) so the image shifts up
     and the gap above the image equals the gap below the note. */
  padding-bottom: var(--note-space, 0px);
}

/* Last screen of each set gets a wider gap, separating the sets */
.progress-item--set-end {
  margin-right: calc(var(--gap) * 3.125);
}

/* The image box: HEIGHT adapts to the panel; WIDTH follows the phone-screen
   aspect ratio. So resizing the panel rescales the screens automatically. */
.progress-shot {
  position: relative;
  height: min(72%, 440px);     /* fraction of the panel height, capped on big screens */
  aspect-ratio: 588 / 1278;    /* phone-screen ratio → width is derived from the height */
  /* Shift the whole group (image + its notes) down by half the note block
     (note text + gap under the image), on top of the symmetric centering. */
  transform: translateY(calc(var(--note-space, 0px) / 2));
}

.progress-screen {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;           /* fill the box without distortion if a ratio differs slightly */
  border-radius: clamp(10px, 1.6vw, 20px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  transition: opacity 0.4s ease;
  -webkit-user-drag: none;
  user-drag: none;
}

/* The v1 image sits exactly over v2; the toggle crossfades between them */
.progress-screen--v1 {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.progress-preview.is-v1 .progress-screen--v2 { opacity: 0; }
.progress-preview.is-v1 .progress-screen--v1 { opacity: 1; }

/* Note slots above/below each screen — fill them from projects.js.
   Absolutely placed, so they grow outward without shifting the image. */
.progress-caption {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--cap-width, 100%);   /* may be wider than the image (set in JS) so text fits in <=2 lines */
  margin: 0;
  font-family: 'ABCDiatype', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #1e1e1e;
  text-align: center;
  white-space: pre-line;     /* honor line breaks typed in the notes */
  /* never more than 2 lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: opacity 0.4s ease;
}

/* Version 1 has no notes for now — empty the slots when it's showing */
.progress-preview.is-v1 .progress-caption { opacity: 0; }

.progress-caption--above { bottom: 100%; margin-bottom: clamp(10px, 1.6vh, 18px); }  /* grows upward */
.progress-caption--below { top: 100%;    margin-top: clamp(10px, 1.6vh, 18px); }     /* grows downward */

@media (max-width: 1400px) {
  .progress-section { padding: 120px 0 0; gap: 64px; }
  /* landscape, like the main Preview block on tablet */
  .progress-preview { height: auto; aspect-ratio: 4 / 3; }
}

@media (max-width: 768px) {
  .progress-section { padding: 100px 16px 0; gap: 40px; }
  .progress-preview { height: calc(100svh - 32px - 72px); aspect-ratio: auto; }
  /* Smaller toggle on phones (64px tall + 24px from bottom) */
  .progress-preview.has-toggle .progress-marquee { padding-bottom: 88px; }
}

/* Adaptive width: shrink to leave the left gutter for the TOC, matching the
   other project sections. Placed after the base max-width so it wins. */
.progress-section {
  max-width: min(1080px, calc(100vw - 2 * var(--side-gutter, 0px)));
}