/* ============================================================
   ICZ home-only layer (loaded by index.html alone)
   - Member logo marquee rail
   - Count-up stat figures
   - Route CTAs under the FAQ band
   The shared foundation (styles.css) is frozen; this file only adds.
   ============================================================ */

/* catalog: logo-marquee (orix-proven)
   Auto-scrolling, hand-draggable member logo rail. Grab cursor,
   touch-action pan-y so vertical page scroll stays native while a
   horizontal pull drives the rail 1:1. Edge fade via mask. */
.logo-rail {
  margin-top: 2.4rem;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-rail.dragging { cursor: grabbing; }
.logo-rail.static { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } /* reduced-motion: plain scrollable row */
.logo-track {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  width: max-content;
  will-change: transform;
}
.logo-item {
  flex: none;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: var(--r-card, 12px);
  padding: 1rem 1.5rem;
  min-width: 10.5rem;
  min-height: 4.75rem;
}
.logo-item img {
  max-height: 44px;
  width: auto;
  max-width: 8.5rem;
  object-fit: contain;
  -webkit-user-drag: none;
}
@media (max-width: 540px) {
  .logo-item { min-width: 8.5rem; padding: .85rem 1.1rem; min-height: 4.1rem; }
  .logo-item img { max-height: 36px; max-width: 6.5rem; }
}

/* catalog: 016 AnimatedNumber support: fixed-width digits during the count */
.stat__fig [data-countup] { font-variant-numeric: tabular-nums; }

/* FAQ band route CTA (dark band, btn--light carries it) */
.faq__cta { margin-top: 1.8rem; }

/* ============================================================
   catalog: 015 Bento Gallery
   CSR showcase (design/components/bento-gallery): asymmetric
   bento grid, hover zoom scale(1.03) at .3s ease-in-out (token
   exact from the export), click-to-lightbox (built in home.js)
   with Esc close, backdrop close and a focus trap. Replaces the
   old horizontal .rail scroller for the CSR images; the frozen
   .rail rules in styles.css are simply no longer referenced.
   ============================================================ */
.csr-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(10rem, 17vw, 14rem);
  gap: .5rem; /* catalog token: 8px */
  margin-top: clamp(2.5rem, 5vw, 4rem);
  text-align: left;
}
.csr-bento__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card, 12px);
  background: var(--canvas-royal-2, rgba(255,255,255,.06));
  margin: 0;
}
.csr-bento__tile--wide { grid-column: span 2; }
.csr-bento__tile--tall { grid-row: span 2; }
.csr-bento__zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.csr-bento__zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.csr-bento__zoom:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
  border-radius: var(--r-card, 12px);
}
.csr-bento__tile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem 1.1rem .9rem;
  background: linear-gradient(transparent, rgba(10,22,34,.85));
  color: #fff;
  font-size: .9rem;
  font-weight: 500;
  pointer-events: none; /* clicks fall through to the zoom button */
}
@media (prefers-reduced-motion: no-preference) {
  .csr-bento__zoom img { transition: transform .3s ease-in-out; } /* catalog token: 0.3s ease-in-out */
  .csr-bento__tile:hover .csr-bento__zoom img,
  .csr-bento__zoom:focus-visible img { transform: scale(1.03); } /* catalog token: 1.03 */
}

/* Lightbox (markup built by home.js; catalog 015 tokens: #000
   backdrop at .9, fadeIn backdrop + scaleIn image, 40px round
   close button). Reduced motion: no animation, still functional. */
.csr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .9);
  padding: 1.25rem;
}
.csr-lightbox figure {
  margin: 0;
  max-width: min(92vw, 58rem);
}
.csr-lightbox img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--r-card, 12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.csr-lightbox figcaption {
  margin-top: .8rem;
  color: #fff;
  font-size: .95rem;
  text-align: center;
}
.csr-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .9);
  color: #000;
  cursor: pointer;
}
.csr-lightbox__close svg { display: block; }
.csr-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .csr-lightbox { animation: csrFadeIn .3s ease-in-out; }
  .csr-lightbox img { animation: csrScaleIn .3s ease-in-out; }
  .csr-lightbox__close { transition: transform .3s ease-in-out, background-color .3s ease-in-out; }
  .csr-lightbox__close:hover { transform: scale(1.1); background: #fff; }
}
@keyframes csrFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes csrScaleIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }

/* Mobile: tiles stack in one column, spans reset, no overflow */
@media (max-width: 700px) {
  .csr-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .csr-bento__tile--wide { grid-column: auto; }
  .csr-bento__tile--tall { grid-row: auto; }
  .csr-bento__tile { aspect-ratio: 4 / 3; }
}