/* Profile and Community pages: the header beside the video grid on wide
   screens, above it on phones. Composes system.css; only page arrangement
   lives here. */
@layer pages {
  .feed-page { padding-block: var(--space-5) var(--space-7); }
  .feed { display: grid; gap: var(--space-6); min-width: 0; }

  /* Profile: the creator's colors on a panel, the page around it in the
     chrome derived from them. Phones run the panel edge to edge under a
     header in the same color, as the app's profile header. */
  .profile-panel {
    --color-bg: var(--profile-bg);
    --color-text: var(--profile-text);
    background: var(--color-bg);
    color: var(--color-text);
    padding: var(--space-5);
  }
  @media (max-width: 51.99rem) {
    body:has(.profile-panel) .site-header { --color-bg: var(--profile-bg); --color-text: var(--profile-text); background: var(--color-bg); color: var(--color-text); }
    .profile-panel { margin: calc(var(--space-5) * -1) calc(var(--gutter) * -1) 0; padding: var(--space-2) var(--gutter) var(--space-5); }
    /* Header blocks meet the grid with the grid's own 2px gutter. */
    .feed-page:has(> :is(.profile-panel, .community-header)) { row-gap: 2px; }
  }

  /* On phones the grid runs edge to edge, like the app. */
  @media (max-width: 51.99rem) {
    .feed-page { gap: var(--space-5); }
    .feed-page > .feed { margin-inline: calc(var(--gutter) * -1); }
    .feed-page > .feed .notice { margin-inline: var(--gutter); }
  }
}

/* Community: square artwork with the name, description and counts over its
   foot, as CommunityHeroHeader.swift. */
@layer pages {
  /* Square, like the grid beside it. */
  .community-hero {
    position: relative;
    display: grid;
    align-items: end;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--community-accent);
    color: var(--orbyt-white);
    isolation: isolate;
  }
  /* No artwork: a band of the accent, just tall enough for the text. */
  .community-hero--plain { aspect-ratio: auto; min-height: 14rem; }
  .community-hero__art { position: absolute; inset: 0; z-index: -1; }
  .community-hero__art :is(img, video, picture) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* The app's CommunityHeroScrim: Byte's shim_Normal curve as an ellipse from
     the top centre, reaching the far corners (radius 112%), so the shade
     deepens toward the bottom and arrives sooner at the edges. */
  .community-hero__art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 112% 112% at 50% 0%,
      rgb(0 0 0 / 0.000) 0%,
      rgb(0 0 0 / 0.000) 43%,
      rgb(0 0 0 / 0.007) 46%,
      rgb(0 0 0 / 0.017) 48%,
      rgb(0 0 0 / 0.031) 50%,
      rgb(0 0 0 / 0.055) 52%,
      rgb(0 0 0 / 0.087) 54%,
      rgb(0 0 0 / 0.130) 56%,
      rgb(0 0 0 / 0.179) 58%,
      rgb(0 0 0 / 0.245) 60%,
      rgb(0 0 0 / 0.313) 62%,
      rgb(0 0 0 / 0.394) 64%,
      rgb(0 0 0 / 0.478) 66%,
      rgb(0 0 0 / 0.558) 68%,
      rgb(0 0 0 / 0.640) 70%,
      rgb(0 0 0 / 0.707) 72%,
      rgb(0 0 0 / 0.772) 74%,
      rgb(0 0 0 / 0.828) 76%,
      rgb(0 0 0 / 0.868) 78%,
      rgb(0 0 0 / 0.904) 80%,
      rgb(0 0 0 / 0.928) 82%,
      rgb(0 0 0 / 0.948) 84%,
      rgb(0 0 0 / 0.962) 86%,
      rgb(0 0 0 / 0.972) 88%,
      rgb(0 0 0 / 0.978) 90%,
      rgb(0 0 0 / 0.984) 93%,
      rgb(0 0 0 / 0.988) 96%,
      rgb(0 0 0 / 0.991) 100%);
  }
  .community-hero__foreground { --color-text-muted: rgb(255 255 255 / 0.74); gap: var(--space-3); padding: var(--space-4); }
  .community-hero__description {
    color: var(--color-text-muted);
    font-weight: var(--weight-regular);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  .community-hero .stat-list dd { color: var(--orbyt-white); }
  @media (prefers-reduced-motion: reduce) { .community-hero video { display: none; } }

  @media (max-width: 51.99rem) {
    .community-header { margin: calc(var(--space-5) * -1) calc(var(--gutter) * -1) 0; }
  }
}