/* ==========================================================================
   Related projects — shared, automated carousel, 2 Oct 2026
   Added to every case study page. One registry of all 6 projects lives in
   related-projects.js; each page just says which project it IS (data-current
   on the carousel root) and the script renders the other 5 automatically —
   add a 7th project to the registry and every page's carousel picks it up
   with no per-page editing.
   Cards are a deliberate copy of the homepage's real .portfolio_card pattern
   (blurred-photo well + floating glass screenshot window + tag + outcome),
   self-contained with its own hardcoded tokens (copied from assets/styles.css)
   rather than each page's own theme — so it reads as "the homepage's work
   grid" consistently, even on pages with a totally different visual system
   (TOKO's dark theme, Amigo Screen's OLED glass).
   ========================================================================== */

.rp-carousel { position: relative; margin-top: 40px; }
.rp-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Vertical room for each card's hover lift and shadow. The sides are set by
     the global carousel component (../assets/carousel.js): it pulls this track
     out to the screen edges and pads it back so the first card still rests on
     the container edge, and adds the trailing space that lets the last card
     reach that edge too. */
  padding-block: 4px;
  /* Fade the trailing card instead of hard-cutting it at the container edge;
     turned off (.is-end) once the last card is fully in view so it never
     looks clipped there either. */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}
.rp-viewport.is-at-end {
  -webkit-mask-image: none;
  mask-image: none;
}
.rp-viewport::-webkit-scrollbar { display: none; }
.rp-track { display: flex; gap: var(--grid-gap); width: 100%; } /* 100% = one container: the viewport is padded to it */

.rp-card {
  /* A whole number of columns wide: 3 of 4 on a phone, 4 of 8 on a tablet, 4 of 12 on desktop. */
  --n: 3;
  --span: calc(var(--n) * (100% - (var(--cols) - 1) * var(--grid-gap)) / var(--cols) + (var(--n) - 1) * var(--grid-gap));
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--span);
  scroll-snap-align: start;
  padding: 8px;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgb(32 33 36 / 0.08), 0 1px 2px rgb(32 33 36 / 0.04), 0 8px 24px -12px rgb(32 33 36 / 0.12);
  font-family: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: none;
  color: inherit;
  transition: transform 600ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 48em) { .rp-card { --n: 4; } }
.rp-card:hover, .rp-card:focus-within {
  box-shadow: 0 0 0 1px rgb(32 33 36 / 0.08), 0 2px 4px rgb(32 33 36 / 0.04), 0 24px 48px -20px rgb(32 33 36 / 0.22);
}

.rp-media {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px;
  background: var(--rp-fallback, #F8F9FA);
}
.rp-blur { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.rp-blur img {
  position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; max-width: none;
  object-fit: cover; filter: blur(5px) saturate(1.25);
  transform: rotate(var(--rp-angle, -14deg)) scale(calc(1.9 * var(--rp-zoom, 1)), calc(1.1 * var(--rp-zoom, 1)));
  transition: transform 1200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.rp-card:hover .rp-blur img, .rp-card:focus-within .rp-blur img { --rp-zoom: 1.1; }
.rp-thumb-frame {
  position: absolute; inset: 9% 8% 0 8%; z-index: 1; padding: 8px;
  background: rgb(255 255 255 / 0.32); border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 10px 10px 0 0; overflow: hidden;
  box-shadow: 0 16px 24px rgb(0 0 0 / 0.22);
  transition: transform 800ms cubic-bezier(0.32, 0.72, 0, 1);
}
.rp-thumb { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px 4px 0 0; }
/* Same hover as the homepage cards: the screenshot zooms a touch inside its window; nothing moves up. */
@media (prefers-reduced-motion: no-preference) {
  .rp-thumb { transform-origin: 50% 0; transition: transform 600ms cubic-bezier(0.32, 0.72, 0, 1); }
  .rp-card:hover .rp-thumb, .rp-card:focus-within .rp-thumb { transform: scale(1.05); }
}

.rp-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; padding: 24px 16px 8px; }
.rp-tag {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 12px;
  border-radius: 999px; background: #F8F9FA; color: #202124;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em;
}
.rp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* the project's years: an outlined pill beside the category, like the homepage cards */
.rp-tag.is-years { background: transparent; box-shadow: inset 0 0 0 1px rgb(32 33 36 / 0.16); color: #5F6368; font-weight: 400; }
/* a project that opens behind a password: an icon-only chip after the years, like the homepage card */
.rp-tag.is-lock { padding: 0 8px; background: transparent; box-shadow: inset 0 0 0 1px rgb(32 33 36 / 0.16); color: #202124; }
.rp-tag.is-lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.rp-title { margin: 8px 0 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: #202124; --lh: 1.25; }
.rp-outcome { margin: 0; font-size: 1rem; --lh: 1.5; color: #5F6368; }
.rp-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto;
  color: #1A73E8; font-size: 1rem; font-weight: 500; text-decoration: none; text-underline-offset: 3px;
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rp-link::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.rp-link-arrow { display: inline-block; transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1); }
.rp-card:hover .rp-link, .rp-card:focus-within .rp-link { color: #1557B0; text-decoration: underline; }
.rp-card:hover .rp-link-arrow, .rp-card:focus-within .rp-link-arrow { transform: translateX(4px); }

.rp-arrow {
  position: absolute; top: 40%; translate: 0 -50%; z-index: 2;
  width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgb(32 33 36 / 0.1);
  background: #FFFFFF; color: #202124; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 2px 4px rgb(32 33 36 / 0.04), 0 8px 24px -12px rgb(32 33 36 / 0.16);
  transition: background-color 200ms, opacity 200ms, transform 200ms;
}
.rp-arrow:hover { background: #F8F9FA; }
.rp-arrow:active { transform: translateY(-50%) scale(0.96); }
.rp-arrow:disabled { opacity: 0.35; cursor: default; }
.rp-arrow-prev { left: -8px; }
.rp-arrow-next { right: -8px; }
@media (min-width: 64em) {
  .rp-arrow-prev { left: -22px; }
  .rp-arrow-next { right: -22px; }
}
.rp-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.rp-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgb(32 33 36 / 0.18);
  transition: background-color 200ms, transform 200ms;
}
.rp-dot.is-active { background: #1A73E8; transform: scale(1.3); }