/* App Store screenshots page (from AppStoreScreenshots.json):
   - Left: sticky framed panel filling the viewport — page title block,
     then the index block (active project name + blurb on top, the other
     project names listed under it), CTA pinned to the bottom.
   - Right: one light card per project (1040x840 design, 70px padding),
     each holding a horizontal strip of phone shots that overflows and
     scrolls/drags sideways.
   - The active project follows the page scroll; clicking a name in the
     index jumps to that project. */

.shots {
  padding: 0 0 0 var(--edge);
}

.shots__inner {
  display: flex;
  gap: calc(30 * var(--px));
  align-items: flex-start;
}

/* ---------- Left panel ---------- */
.shots__panel {
  position: relative;
  position: sticky;
  top: 0;
  flex: 0 0 calc(550 * var(--px));
  height: 100vh;
  height: 100dvh;
  padding: calc(100 * var(--px)) 0 calc(30 * var(--px));
  display: flex;
  flex-direction: column;
}

.shots__frame {
  position: absolute;
  top: calc(100 * var(--px));
  left: 0;
  right: 0;
  bottom: calc(30 * var(--px));
  border: 1px solid var(--stroke-10);
  pointer-events: none;
}

/* + markers use the same thin export as the case studies */
.shots .plus {
  width: calc(10 * var(--px));
  height: calc(10 * var(--px));
  -webkit-mask: url("/assets/images/case-study-plus.svg") center / contain no-repeat;
  mask: url("/assets/images/case-study-plus.svg") center / contain no-repeat;
}

/* Title block: 124 design-px tall, title 40 from the top (JSON) */
.shots__head {
  position: relative;
  flex: 0 0 calc(124 * var(--px));
  padding: calc(40 * var(--px)) calc(20 * var(--px)) 0;
  border-bottom: 1px solid var(--stroke-10);
}

.shots__title {
  font-weight: 400;
  font-size: calc(40 * var(--px));
  line-height: calc(44 * var(--px));
}

/* Index block: active project on top, names listed under it (JSON:
   active at 20, first name at 136, then every 44). */
.shots__index {
  position: relative;
  flex: 0 0 auto;
  padding: calc(20 * var(--px)) calc(20 * var(--px)) calc(24 * var(--px));
  border-bottom: 1px solid var(--stroke-10);
}

.shots__list {
  display: flex;
  flex-direction: column;
}

/* ---------- App icon + text rows (ScreenshotsIconAndTextLayout) ----------
   63.46 icon at radius 16, 15 gap, then name (20 semibold) over the
   blurb (14, 50% black) with an 8 gap — straight from the Figma spec.
   Shared by the sidebar entries (desktop) and group headers (mobile). */
.shots__app-icon {
  flex: 0 0 auto;
  width: calc(63.46 * var(--px));
  height: calc(63.46 * var(--px));
  border-radius: calc(16 * var(--px));
  object-fit: cover;
}

.shots__app-txt {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--px));
  text-align: left;
  min-width: 0;
}

.shots__app-name {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--px));
  align-self: flex-start;
  font-weight: 600;
  font-size: calc(20 * var(--px));
  line-height: calc(20 * var(--px));
  color: var(--color-text);
}

/* Subtle App Store cue on live apps */
.shots__app-arrow {
  width: calc(10 * var(--px));
  height: calc(10 * var(--px));
  flex-shrink: 0;
  opacity: 0.35;
  transition: opacity 0.25s, transform 0.25s;
}

a.shots__app-name:hover .shots__app-arrow {
  opacity: 1;
  transform: translate(1px, -1px);
}

.shots__entry-desc,
.shots__app-desc {
  font-size: calc(14 * var(--px));
  line-height: calc(20 * var(--px));
  color: var(--color-black-50);
}

/* The list stays put; the highlight travels down it with the scroll.
   The active row is full strength, the rest sit dimmed. */
.shots__item {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--px));
  width: 100%;
  padding: calc(10 * var(--px)) 0;
  text-align: left;
  opacity: 0.45;
  transition: opacity 0.3s;
}

.shots__entry.is-active .shots__item,
.shots__item:hover {
  opacity: 1;
}

/* Mobile-only elements, hidden on desktop */
.shots__head-cam,
.shots__fab { display: none; }

/* ---------- Bottom CTA ---------- */
.shots__cta {
  position: relative;
  margin-top: auto;
  padding: calc(16 * var(--px)) calc(20 * var(--px));
  font-size: calc(14 * var(--px));
  line-height: calc(24 * var(--px));
}

.shots__cta-link {
  position: relative;
  white-space: nowrap;
  padding-bottom: calc(2 * var(--px));
}

.shots__cta-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}

.shots__cta-link:hover::after {
  animation: uline-sweep 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

@keyframes uline-sweep {
  0%   { transform: scaleX(1); transform-origin: right; }
  49%  { transform: scaleX(0); transform-origin: right; }
  50%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* ---------- Right: project cards ---------- */
.shots__stream {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--px));
  /* Cards start level with the panel's top rule (JSON: y=100) */
  padding-top: calc(100 * var(--px));
  padding-bottom: calc(30 * var(--px));
}

/* 1040x840 card, light wash background (JSON color-5). Vertical padding
   lives on the card; the horizontal inset lives INSIDE the scroller, so
   the shots run the card's full width and the next phone peeks in at
   the edge instead of being clipped at the padding box. */
.shots__group {
  background: var(--color-black-3);
  padding: calc(10 * var(--px)) 0;
}

/* Per-group icon + text header: mobile-only (desktop has the sidebar) */
.shots__ghead { display: none; }

/* Horizontal strip: 700-tall shots, 14px gutter, drags sideways.
   The strip is a scroll container, so it clips anything outside its
   box — the vertical inset lives INSIDE it (60 + the group's 10 = the
   design's 70) so the phones' drop shadows have room to render. */
.shots__strip {
  display: flex;
  gap: calc(14 * var(--px));
  padding: calc(60 * var(--px)) calc(70 * var(--px));
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

.shots__strip::-webkit-scrollbar { display: none; }

.shots__strip.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.shots__strip picture {
  flex: 0 0 auto;
  display: block;
}

.shots__strip img {
  flex: 0 0 auto;
  height: calc(700 * var(--px));
  width: auto;
  border-radius: calc(50 * var(--px));
  /* Subtle lift off the card wash (JSON: elevation on each phone) */
  box-shadow: 0 calc(14 * var(--px)) calc(40 * var(--px)) rgba(0, 0, 0, 0.10);
  user-select: none;
  -webkit-user-drag: none;
}

/* Recor's shots blend into their own backgrounds — no lift needed */
#shots-recor .shots__strip img { box-shadow: none; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  /* The page must never pan sideways — strips scroll inside themselves */
  html, body { overflow-x: clip; }

  .shots { padding: 0; }

  .shots__inner {
    flex-direction: column;
    gap: 32px;
  }

  .shots__panel {
    /* stays a positioned box so the absolute .shots__frame (and its +
       markers) anchors to the panel, not the page edges */
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    flex: none;
    width: auto;
    margin: 0 16px;
    padding: 70px 0 0;
  }

  .shots__frame { top: 70px; bottom: 0; border-bottom: 0; }
  .shots__frame .plus { display: none; }

  .shots__head .plus--bl,
  .shots__head .plus--br { display: block; }
  .shots .plus { width: 10px; height: 10px; }

  /* Title in display type on two lines, camera sitting to its right */
  .shots__head {
    flex: none;
    position: relative;
    padding: 20px 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .shots__title {
    font-size: calc(40 * (100vw / 440));
    line-height: calc(48 * (100vw / 440));
    max-width: 6.2em; /* forces the App Store / Screenshots break */
  }

  .shots__head-cam {
    display: block;
    width: calc(110 * (100vw / 440));
    height: auto;
    flex-shrink: 0;
    pointer-events: none;
  }

  /* The text index is replaced by the icon+text header above each strip */
  .shots__index { display: none; }

  /* Text CTA replaced by the floating button below */
  .shots__cta { display: none; }

  /* Subtle floating CTA pinned to the bottom of the screen.
     Removed for now — flip display back to block to restore. */
  .shots__fab {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 20px;
    z-index: 60;
    padding: 9px 16px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--color-text);
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }

  .shots__stream { gap: 8px; padding-top: 0; }
  .shots__group { padding: 20px 0 6px; }

  /* Icon + text directly above the screenshots it covers (30px below) */
  .shots__ghead {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 16px;
    margin-bottom: 30px;
  }

  .shots__app-icon { width: 63.46px; height: 63.46px; border-radius: 16px; }
  .shots__app-txt { gap: 8px; }
  .shots__app-name { font-size: 20px; line-height: 20px; }
  .shots__app-desc { font-size: 14px; line-height: 20px; }

  .shots__strip { padding: 0 16px 18px; }
  .shots__strip { gap: 8px; }
  .shots__strip img { height: 420px; border-radius: 24px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); }
}