/*
 * Click-to-load social profile previews.
 * Loaded after site.css only on routes that render a preview.
 */

.social-live-card__preview {
  background: var(--surface);
}

.social-embed {
  width: 100%;
  min-width: 0;
  outline: none;
}

.social-embed:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.social-embed__consent {
  display: grid;
  min-height: clamp(220px, 42cqw, 320px);
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: clamp(1.5rem, 4cqw, 2.5rem);
  color: var(--ink);
  text-align: center;
}

.social-embed__mark {
  display: grid;
  width: 56px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-raised);
}

.social-embed__mark .social-icon {
  width: 24px;
  height: 24px;
}

.social-embed__notice {
  max-width: 44ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.social-embed__load[hidden] {
  display: none;
}

/* Loaded state: providers draw on their own light surface. */
.social-embed[data-social-embed-state] {
  background: #fff;
}

.social-embed[data-social-embed="youtube"][data-social-embed-state] {
  background: #090909;
}

/* The provider script sizes TikTok itself; no reserved empty block. */
.social-embed .social-live-embed--tiktok {
  display: flex;
  min-height: 0;
  justify-content: center;
  padding: 0.75rem;
}

.social-embed[data-social-embed-state="loading"] .social-live-embed--tiktok {
  min-height: 160px;
}

.social-embed .social-live-embed--tiktok .tiktok-embed {
  width: 100%;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.social-embed .social-live-embed--instagram iframe {
  background: #fff;
}

@media (max-width: 560px) {
  .social-embed .social-live-embed--tiktok {
    min-height: 0;
    padding: 0;
  }
}

/* Avatar in the card header (embed cards with channel data). */
.social-live-card__icon--avatar {
  position: relative;
  overflow: visible;
  background: var(--surface-raised, var(--surface));
}

.social-live-card__icon--avatar > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.social-live-card__badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 22px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
}

.social-live-card__badge .social-icon {
  width: 11px;
  height: 11px;
}

/*
 * First-party profile preview (Threads, X, LinkedIn…): these platforms have no
 * profile embed, so the card draws editor-selected media instead of a blank box.
 */
.social-live-card--first-party .social-live-card__preview {
  display: block;
  place-items: initial;
  background: var(--surface);
}

.social-profile-preview {
  display: grid;
  gap: 1rem;
  padding: 0 0 1.1rem;
  color: var(--ink);
}

.social-profile-preview__cover {
  position: relative;
  height: clamp(96px, 26cqw, 150px);
  margin-bottom: 30px;
  background:
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 88%, var(--accent)), var(--ink));
}

.social-profile-preview__banner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-profile-preview__avatar {
  position: absolute;
  bottom: -30px;
  left: 1.1rem;
  display: grid;
  width: 76px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
}

.social-profile-preview__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-profile-preview__avatar .social-icon {
  width: 30px;
  height: 30px;
}

.social-profile-preview__identity {
  display: grid;
  gap: 0.5rem;
  padding: 0 1.1rem;
}

.social-profile-preview__counts,
.social-profile-preview__description {
  margin: 0;
}

.social-profile-preview__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.social-profile-preview__counts strong {
  color: var(--ink);
  font-weight: 800;
}

.social-profile-preview__description {
  max-width: 48ch;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.social-profile-preview__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 0 1.1rem;
  overflow: hidden;
  border-radius: 14px;
  outline-offset: 3px;
}

.social-profile-preview__tile {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--line);
}

.social-profile-preview__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.social-profile-preview__grid:hover .social-profile-preview__tile img,
.social-profile-preview__grid:focus-visible .social-profile-preview__tile img {
  opacity: 0.88;
  transform: scale(1.03);
}

.social-profile-preview__cta {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.55rem;
  margin: 0 1.1rem;
}

.social-profile-preview__cta .social-icon {
  width: 16px;
  height: 16px;
}

/* Identity-only variant fills the space an embed would take. */
.social-profile-preview--identity {
  min-height: clamp(280px, 60cqw, 380px);
  align-content: start;
}

.social-profile-preview--identity .social-profile-preview__cta {
  margin-top: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .social-profile-preview__tile img {
    transition: none;
  }
}

@media (max-width: 560px) {
  .social-profile-preview__identity,
  .social-profile-preview__grid,
  .social-profile-preview__cta {
    margin-inline: 0.9rem;
  }

  .social-profile-preview__identity {
    padding: 0;
  }

  .social-profile-preview__avatar {
    left: 0.9rem;
    width: 64px;
  }

  .social-profile-preview__cta {
    justify-self: stretch;
    justify-content: center;
  }
}