/* ==========================================================================
   community.css — marquee tiles, captions, scrim
   Split out of the original components.css; load order is preserved
   exactly, because several rules here depend on source order.
   ========================================================================== */

/* ---- Community ---- */
.community-title { color: var(--white); }
.hashtag { font-family: var(--font-mono); font-size: 20px; }

.tile {
  position: relative;
  flex: 0 0 412px;
  height: clamp(380px, calc(100vh - 280px), 512px);   /* design height */
  border-radius: var(--radius-md);
  overflow: hidden;
  scroll-snap-align: start;
}
/* The video IS the tile artwork — it holds on its poster frame until played
   (hover on desktop, in-view autoplay on touch). */
.tile img,
.tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Subtle lift so it's clear the card is interactive */
.tile video { transition: transform 0.6s var(--ease); }
.tile:hover video { transform: scale(1.04); }

/* Full-bleed scrim across the bottom of every tile (Figma 698:628) — spans the
   whole card width, independent of whether the tile has a caption.
   ::before = blur (masked by the ramp), ::after = the gradient itself. */
.tile::before,
.tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 132px;
  z-index: 1;
  pointer-events: none;
}
.tile::before {
  backdrop-filter: var(--scrim-blur);
  -webkit-backdrop-filter: var(--scrim-blur);
  mask-image: var(--scrim-mask);
  -webkit-mask-image: var(--scrim-mask);
}
.tile::after { background: var(--scrim); }

.tile figcaption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
/* Design: Ubuntu Mono Regular 20 / 28 */
.handle {
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.5);
}
/* Design: Aeonik Medium 24 / 28 */
.tile-caption { font-size: 24px; line-height: 28px; font-weight: var(--w-medium); }