/* =========================
   UGC — clean performant CSS
   ========================= */

#uv-ugc{
  --uv-gap: 28px;
  --uv-radius: 28px;
  --uv-card-w: 315px;
  --uv-card-h: 416px;

  padding-top: 56px;
}

/* Transparent section */
#uv-ugc,
#uv-ugc .uv-ugc__wrap,
#uv-ugc .uv-ugc__rail,
#uv-ugc .uv-ugc__track{
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* HEADER */
#uv-ugc .uv-ugc__header{
  max-width: calc((var(--uv-card-w) * 4) + (var(--uv-gap) * 3));
  margin: 0 auto 18px;
  padding: 0 16px;
}

#uv-ugc .uv-ugc__title{
  margin: 0;
  font-family: "Satoshi", system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  font-size: clamp(32px, 3vw, 40px);
  color: #1D1D1F;

  /* IMPORTANT: allow wrapping */
  white-space: normal;
  overflow-wrap: anywhere;
}

#uv-ugc .uv-ugc__hint{
  margin: 12px 0 0;
  font-family: "Satoshi", system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  color: rgba(0,0,0,.65);

  white-space: normal;
  overflow-wrap: anywhere;
}

/* WRAP */
#uv-ugc .uv-ugc__wrap{
  position: relative;
  width: calc((var(--uv-card-w) * 4) + (var(--uv-gap) * 3));
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px 40px;
  box-sizing: border-box;
}

/* RAIL (scroll container) */
#uv-ugc .uv-ugc__rail{
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0 10px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  cursor: grab;
  touch-action: pan-x;
}

/* Hide scrollbar */
#uv-ugc .uv-ugc__rail::-webkit-scrollbar{ height: 0; }
#uv-ugc .uv-ugc__rail{ scrollbar-width: none; }
#uv-ugc .uv-ugc__rail:active{ cursor: grabbing; }

/* TRACK */
#uv-ugc .uv-ugc__track{
  display: flex;
  gap: var(--uv-gap);
  align-items: stretch;
  width: max-content;
}

/* CARDS */
#uv-ugc .uv-card{
  flex: 0 0 var(--uv-card-w);
}

#uv-ugc .uv-card__media{
  width: var(--uv-card-w);
  height: var(--uv-card-h);
  border-radius: var(--uv-radius);
  overflow: hidden;
}

/* MEDIA */
#uv-ugc .uv-img,
#uv-ugc .uv-video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: inherit;
}

/* Disable native image drag */
#uv-ugc img{
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: auto;
}

/* RESPONSIVE */
@media (max-width: 1280px){
  #uv-ugc{ --uv-card-w: 290px; --uv-card-h: 386px; }
}

@media (max-width: 1100px){
  #uv-ugc{ --uv-card-w: 270px; --uv-card-h: 360px; }
}

@media (max-width: 900px){
  #uv-ugc .uv-ugc__wrap{ width: 100%; }
}

/* MOBILE TEXT — full visible */
@media (max-width: 640px){
  #uv-ugc .uv-ugc__header{
    max-width: 100%;
    padding: 0 16px;
    margin: 14px auto;
  }

  #uv-ugc .uv-ugc__title{
    font-size: 22px;
    line-height: 1.2;
  }

  #uv-ugc .uv-ugc__hint{
    font-size: 14px;
    line-height: 1.45;
    margin-top: 8px;
  }
}

@media (max-width: 640px){
  #uv-ugc .uv-ugc__title{
    font-size: clamp(16px, 4.5vw, 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}