/* A group's page (root/group/show): the group's header, then its posts as the app's feed draws
   them. Uses faxo.css's tokens and top/join bars, and thread.css's faces and ▲ score ▼. */

.fx-group-page main { padding-bottom: 120px; } /* room above the join bar */

/* ---------- header: photo or initials, name, members, about, Join / Share ---------- */
.fx-ghead { padding: 24px 0 20px; border-bottom: .5px solid var(--separator); }
.fx-ghead-top { display: flex; align-items: center; gap: 16px; }
.fx-gphoto {
  flex: none; width: 76px; height: 76px; border-radius: 18px; object-fit: cover;
  background: var(--fill); box-shadow: 0 0 0 .5px var(--separator) inset;
}
.fx-gphoto.fx-ginitials {
  display: grid; place-items: center; color: #fff; font-size: 30px; font-weight: 700; letter-spacing: -.5px;
  background: linear-gradient(180deg, hsl(var(--hue) 62% 60%), hsl(var(--hue) 58% 46%));
  box-shadow: none;
}
.fx-gname { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; overflow-wrap: anywhere; }
.fx-gmeta { margin-top: 4px; font-size: 15px; color: var(--secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fx-gmeta svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.fx-gabout { margin: 14px 0 0; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.fx-gabout a { color: var(--accent); }
.fx-gactions { display: flex; gap: 10px; margin-top: 16px; }
.fx-gactions .fx-btn { flex: 1; height: 44px; font-size: 16px; border-radius: 22px; }
.fx-gshare {
  flex: none; height: 44px; padding: 0 18px; border: 0; border-radius: 22px;
  background: var(--fill); color: var(--label); font: inherit; font-size: 16px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.fx-gshare svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-gshare:hover { background: var(--fill-pressed); }

/* ---------- a person's header (root/profile/show): cover, photo, name, about, counts ---------- */
.fx-phead { padding-bottom: 18px; border-bottom: .5px solid var(--separator); }
.fx-cover {
  position: relative; margin: 0 -16px; aspect-ratio: 3 / 1; min-height: 120px; max-height: 240px;
  background: linear-gradient(135deg, hsl(var(--hue) 55% 72%), hsl(calc(var(--hue) + 40) 50% 58%)) center / cover;
}
.fx-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.12), transparent 40%); }
@media (min-width: 700px) { .fx-cover { margin: 12px 0 0; border-radius: 16px; overflow: hidden; } }
.fx-phead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -44px; position: relative; z-index: 1; }
.fx-phead .fx-avatar { width: 96px; height: 96px; font-size: 36px; box-shadow: 0 0 0 4px var(--bg); }
.fx-phead img.fx-avatar { background: var(--fill); }
.fx-pname { margin: 12px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; overflow-wrap: anywhere; }
.fx-phandle { margin-top: 2px; font-size: 15px; color: var(--secondary); overflow-wrap: anywhere; }
.fx-pfacts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; color: var(--secondary); }
.fx-pfacts span { display: inline-flex; align-items: center; gap: 5px; }
.fx-pfacts svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-pfacts b { color: var(--label); font-weight: 600; }
.fx-icon-btn {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--fill); color: var(--label);
  display: grid; place-items: center; cursor: pointer;
}
.fx-icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-icon-btn:hover { background: var(--fill-pressed); }
.fx-gactions .fx-btn.fill { background: var(--fill); color: var(--label); }
.fx-gactions .fx-btn.fill:hover { background: var(--fill-pressed); }

/* ---------- the posts ---------- */
.fx-feed { list-style: none; margin: 0; padding: 0; }
.fx-card { position: relative; padding: 14px 0 4px; border-bottom: .5px solid var(--separator); }
.fx-card-link { position: absolute; inset: 0; z-index: 0; } /* the whole card opens the post */
.fx-card .fx-author { position: relative; z-index: 1; pointer-events: none; }
.fx-card .fx-author a { pointer-events: auto; }
.fx-card-title { margin: 10px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -.2px; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fx-card-text { margin: 6px 0 0; font-size: 16px; line-height: 1.42; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.fx-card-media { position: relative; margin: 10px -16px 0; background: var(--fill); overflow: hidden; }
.fx-card-media img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; }
.fx-card-media.yt img { aspect-ratio: 16 / 9; height: auto; }
@media (min-width: 700px) { .fx-card-media { margin: 10px 0 0; border-radius: 14px; } }
.fx-card-media .fx-play { width: 56px; height: 56px; pointer-events: none; }
.fx-card-media .fx-play svg { width: 24px; height: 24px; }
.fx-card .fx-post-actions { position: relative; z-index: 1; margin-top: 4px; height: 40px; pointer-events: none; }
.fx-card .fx-post-actions a { pointer-events: auto; }
.fx-card:hover .fx-card-title, .fx-card:hover .fx-card-text { color: color-mix(in srgb, var(--label) 82%, transparent); }

.fx-gempty { padding: 56px 16px; text-align: center; color: var(--secondary); }
.fx-gempty strong { display: block; margin-bottom: 6px; font-size: 20px; color: var(--label); }
.fx-gmore { display: flex; justify-content: center; padding: 22px 0 8px; }
.fx-gmore a { height: 40px; padding: 0 22px; border-radius: 20px; background: var(--fill); color: var(--accent);
  font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; }
.fx-gmore a:hover { background: var(--fill-pressed); }