/* Live website thumbnail, shared by the founder pages that list websites (site-preview.js).
   The iframe is a real 1280x800 desktop render scaled down by JS, so the founder sees the site as a
   laptop sees it rather than its phone layout crushed into a thumbnail. */
/* THE BOX IS THE SHAPE OF THE PICTURE (founder 2026-11-02: "The websites thumbnails are cutoff... Resize the
   thumbnails to fit perfectly"). It was 16/10 while every screenshot this component shows is 1200x630, and
   .sp-img below used object-fit: cover with object-position: top center - so the bottom of every website was
   cut off, on every page that lists websites. The box now carries the screenshot's own ratio, and the picture
   is CONTAINed rather than cropped, so an odd-sized one is letterboxed instead of trimmed. */
.sp-shot { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; background: #070d1c; }
.sp-shot iframe {
  position: absolute; inset: 0; width: 1280px; height: 672px; border: 0;   /* 1280 / (1200/630) = 672: the frame fills the box exactly */
  transform-origin: 0 0; pointer-events: none;          /* a picture, not a tiny browser */
  opacity: 0; transition: opacity .45s ease; background: #fff;
}
.sp-shot.is-ready iframe { opacity: 1; }

/* Sits under the frame until it paints, so a slow website is never a white flash. */
.sp-skel {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(56,182,255,.08) 20%, rgba(56,182,255,.16) 38%, rgba(56,182,255,.08) 56%);
  background-size: 220% 100%; animation: spShimmer 1.6s linear infinite;
}
.sp-shot.is-ready .sp-skel { display: none; }
@keyframes spShimmer { to { background-position: -220% 0; } }

/* The whole thumbnail is one link. */
.sp-open {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 10px; text-decoration: none;
  background: linear-gradient(180deg, rgba(4,8,18,0) 55%, rgba(4,8,18,.72));
  opacity: 0; transition: opacity .2s ease;
}
.sp-open:hover, .sp-open:focus-visible { opacity: 1; }
.sp-open:focus-visible { outline: 2px solid #38b6ff; outline-offset: -3px; }
.sp-pill { padding: 6px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; color: #06121f; background: #38b6ff; }

@media (prefers-reduced-motion: reduce) {
  .sp-skel { animation: none; }
  .sp-shot iframe { transition: none; }
}

/* Slotted inside a card that already has padding, rather than bled to its border. */
.sp-inset { border-radius: 11px; margin: 0 0 12px; border: 1px solid rgba(255,255,255,.08); }
/* A website that is known to be down gets a label, not an empty frame: loading it would spend one of
   the three slots to render nothing. */
.sp-down { display: flex; align-items: center; justify-content: center; aspect-ratio: 1200 / 630;
  border-radius: 11px; margin: 0 0 12px; border: 1px dashed rgba(245,66,66,.35);
  background: rgba(245,66,66,.06); color: #ffb4a8; font-size: .82rem; font-weight: 600; }

/* Row layouts: the thumbnail is a fixed-width cell, not a full-width banner. */
.fc-row > .sp-shot { flex: 0 0 148px; margin: 0; border-radius: 9px; border: 1px solid rgba(255,255,255,.08); }
.uh-row > .sp-shot { width: 100%; margin: 0 0 2px; border-radius: 9px; border: 1px solid rgba(255,255,255,.08); }
@media (max-width: 640px) { .fc-row > .sp-shot { flex-basis: 108px; } }

/* The screenshot. Shown instead of loading the website, so opening a list never visits anybody's site. */
.sp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center;
  display: block; opacity: 0; transition: opacity .35s ease; }
.sp-shot.is-img .sp-img { opacity: 1; }
.sp-shot.is-img iframe { display: none; }        /* never both */
@media (prefers-reduced-motion: reduce) { .sp-img { transition: none; } }