/* Visual Suspect — homepage gallery LONG-HOVER fact card.
   Scoped to the homepage grid (#ut-masonry-79246 / .ut-portfolio-79246).

   Hold the pointer on a tile (~650ms) and a white card unfolds beside it on
   the SAME row, spanning exactly two tile-widths — the thumbnail + card read
   as one object: thumbnail left (or right), project facts on glass-white.
   Side is chosen by available space in the row (prefer right). The card is a
   link to the project.

   Look: modern / minimal / high-tech / luxury — pure white plane against the
   black grid, hairline rules, micro uppercase labels (Poppins), heavyweight
   values (Montserrat), a faint centre seam echoing the two tiles it covers,
   staggered fade-up rows, soft long shadow. SVG arrow only (no glyph icons).

   The card node (.vs-facts-card) is injected into the grid container by
   vs-gallery-facts.js; Isotope ignores it (it only lays out
   .ut-portfolio-article items). Additive + re-export safe via
   inject_gallery_facts.py. */

/* Choreography: hover-hold -> the white card SLIDES OUT from under the
   thumbnail (a card being dealt from the tile seam) -> THEN the text fades
   in. The outer .vs-facts-card is a transparent clipping window at the final
   geometry; the inner <a> is the white card itself, tucked fully toward the
   thumbnail (translateX ±101%, set by JS via --vs-facts-tuck for left/right
   placement) and sliding to rest. Mouseout reverses: text drops instantly,
   card slides back under the thumbnail. */
.vs-facts-card{
  position:absolute;
  z-index:40;
  border-radius:2px;
  overflow:hidden;
  box-shadow:none;
  transition:box-shadow 420ms ease;
  pointer-events:auto;
}
.vs-facts-card.vs-on{
  box-shadow:0 30px 70px -28px rgba(0,0,0,.65);
}

/* The card plane = the link itself: white, full size, tucked toward the tile */
.vs-facts-card > a{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  /* vertical padding deliberately lighter than horizontal: the card is only
     one tile tall and the bottom row needs room for two-line values */
  padding:clamp(10px, 3.4%, 14px) clamp(14px, 8.5%, 26px);
  background:#ffffff;
  text-decoration:none;
  color:#111;
  transform:translateX(var(--vs-facts-tuck,-101%));
  transition:transform 420ms cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.vs-facts-card.vs-on > a{
  transform:translateX(0);
}

/* Faint seam at the midpoint — the card spans two tile slots and quietly
   admits it. Rides on the sliding plane. */
.vs-facts-card > a::after{
  content:"";
  position:absolute;
  top:10%;
  bottom:10%;
  left:50%;
  width:1px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.07) 30%,
                             rgba(0,0,0,.07) 70%, rgba(0,0,0,0));
  pointer-events:none;
}

/* Kicker row — fades in once the card has slid out */
.vs-facts-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Poppins",-apple-system,sans-serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#9a9a9a;
  opacity:0;
  transition:opacity 280ms ease;
}
.vs-facts-card.vs-on .vs-facts-kicker{
  opacity:1;
  transition-delay:300ms;
}
.vs-facts-kicker::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(0,0,0,.08);
}

/* Facts — 2-up grid, echoing the two covered tiles. flex:1 + centred content
   splits the leftover height evenly above and below the items, so the block
   sits balanced between the kicker and the card's bottom edge. */
.vs-facts-grid{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 24px;
  align-content:center;
  margin:6px 0;
}
.vs-facts-item{
  opacity:0;
  transform:translateY(7px);
  transition:opacity 280ms cubic-bezier(.22,1,.36,1),
             transform 280ms cubic-bezier(.22,1,.36,1);
}
.vs-facts-card.vs-on .vs-facts-item{opacity:1;transform:translateY(0);}
.vs-facts-card.vs-on .vs-facts-item:nth-child(1){transition-delay:340ms;}
.vs-facts-card.vs-on .vs-facts-item:nth-child(2){transition-delay:395ms;}
.vs-facts-card.vs-on .vs-facts-item:nth-child(3){transition-delay:450ms;}
.vs-facts-card.vs-on .vs-facts-item:nth-child(4){transition-delay:505ms;}

.vs-facts-label{
  font-family:"Poppins",-apple-system,sans-serif;
  font-size:8.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#8d8d8d;
  margin-bottom:2px;
}
/* Slightly smaller + tighter than v1 (12.5px/1.4): two-line values in the
   bottom row must fit inside the one-tile-tall card with even spacing.
   Hard-capped at 2 lines — a runaway value ellipsizes instead of clipping
   mid-line at the card's bottom edge (source data is kept <=50 chars by
   kb/gallery-facts.json, so the cap is a guard, not the normal path). */
.vs-facts-value{
  font-family:"Montserrat",-apple-system,sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.3;
  color:#111;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Tighter laptops -> tighter tiles (the card is tile-height): shave the bold
   values a touch so two lines + even spacing still fit. */
@media (max-width:1760px){
  .vs-facts-value{font-size:11px;}
}

/* While the card is open, keep the paired thumbnail's glass layer lit even if
   the pointer is over the card (the theme's mouseleave sets inline opacity:0). */
.ut-portfolio-79246 .vs-facts-holding .ut-hover-layer{
  opacity:1 !important;
}

@media (prefers-reduced-motion:reduce){
  .vs-facts-card,
  .vs-facts-card > a,
  .vs-facts-kicker,
  .vs-facts-item{transition-duration:1ms !important;}
  .vs-facts-card.vs-on .vs-facts-kicker,
  .vs-facts-card.vs-on .vs-facts-item{transition-delay:0ms !important;}
}