/* Shared layout hardening and homepage background treatment.
 *
 * IMPORTANT: this file must be linked AFTER styles.css in every page
 * (<link rel="stylesheet" href="styles.css">
 *  <link rel="stylesheet" href="layout-fixes.css">).
 * It used to be pulled in with @import at the top of styles.css, which placed
 * every rule below *before* the page-specific rules it is meant to override.
 * Because the selectors here have the same specificity as the ones in
 * styles.css, the later declarations won, the overrides never applied, and the
 * absolutely positioned / translated hero cards collided with the cards
 * underneath them on the Beacon, 0xFFshell, Superivar and E-VDV-HU pages.
 */

/* Prevent grid children from forcing their tracks wider than the viewport. */
.profile-hero > *,
.detail-grid > *,
.project-grid > *,
.people-grid > *,
.capability-grid > *,
.module-grid > *,
.release-grid > *,
.activity-grid > *,
.install-panel > *,
.project-info-grid > *,
.project-feature-grid > * {
  min-width: 0;
}

/* Keep normal page cards inside their allocated space. */
.profile-intro,
.profile-sidebar,
.detail-panel,
.project-card,
.person-card,
.capability-card,
.module-card,
.release-card,
.activity-card,
.install-panel,
.project-info-grid > article,
.project-feature {
  min-width: 0;
}

/* Beacon uses a cinematic hero, but the sidebar should not overlap the hero card. */
body[data-project="beacon"] .profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-height: 0;
  padding-bottom: 0;
}

body[data-project="beacon"] .profile-sidebar {
  position: relative;
  inset: auto;
  width: auto;
  margin-top: 0;
  transform: none;
}

body[data-project="beacon"] .detail-grid {
  margin-top: 1rem;
}

/* The Beacon fact rail was styled as a narrow column. Now that it sits in the
   flow at full width, lay the facts out in a responsive row instead of one
   very tall stack. */
body[data-project="beacon"] .profile-sidebar .fact-list {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* Docked member stat decks are moved back into document flow. */
body[data-member="0xffshell"] .profile-hero,
body[data-member="superivar"] .profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-height: 0;
  padding-bottom: 0;
}

body[data-member="0xffshell"] .profile-sidebar,
body[data-member="superivar"] .profile-sidebar {
  position: relative;
  inset: auto;
  width: auto;
  margin-top: 0;
  transform: none;
}

body[data-member="0xffshell"] .detail-grid,
body[data-member="superivar"] .detail-grid {
  margin-top: 1rem;
}

body[data-member="superivar"] .detail-grid > :first-child {
  transform: none;
}

/* Do not let the notebook/detail rail visually intrude into the hero. */
body[data-member="e-vdv-hu"] .profile-sidebar {
  margin-top: 0;
}

body[data-member="e-vdv-hu"] .detail-grid {
  width: 100%;
  margin-top: 1.5rem;
}

/* The gold cards are intentionally angled, but the rotation should not make
   their boxes collide with adjacent content. */
body[data-member="midas735"] .profile-intro,
body[data-member="midas735"] .profile-sidebar {
  transform: none;
}

/* Pinned hero marks (0xFFshell's avatar, Beacon's project mark) are taken out
   of flow with position:absolute, so the bottom-aligned hero copy underneath
   was free to rise up behind them — on 0xFFshell the eyebrow and the account
   status banner ran straight through the profile picture. Reserve the height
   of the pinned mark as top padding so the copy always starts below it.
   Below 760px both marks return to static flow and need no reservation. */
@media (min-width: 761px) {
  body[data-member="0xffshell"] .profile-intro {
    /* top offset + avatar height + breathing room */
    padding-top: calc(2rem + 138px + 1.5rem);
  }

  body[data-project="beacon"] .profile-intro {
    padding-top: calc(2rem + 98px + 1.5rem);
  }
}

/* Long text should wrap instead of expanding cards into neighbouring tracks. */
.profile-intro h1,
.profile-sidebar h2,
.detail-panel h2,
.detail-panel h3,
.project-card h3,
.person-card h3,
.module-card h3,
.release-card h3,
.activity-card h3,
.project-feature h3,
.project-info-grid h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Homepage: keep the member collage behind the UI and blur only that layer. */
body[data-page="organization"] {
  position: relative;
  isolation: isolate;
  background: #05090b;
}

body[data-page="organization"]::before {
  content: "";
  position: fixed;
  inset: -32px;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,8,11,.42), rgba(4,8,11,.7) 58%, #05090b 100%),
    url("assets/homepage-community-background-v4.jpg") center top / cover no-repeat;
  filter: blur(6px);
  transform: scale(1.04);
}

/* The page already has a subtle grid overlay; keep it above the blurred photo. */
body[data-page="organization"]::after {
  z-index: -1;
}

/* Group multiple inline links (e.g. GitLab Releases and CurseForge) in one wrap-safe row. */
.inline-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

/* ---- Easter egg: hidden background video ---- */
.egg-video {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  filter: brightness(.5) saturate(.9);
  transition: opacity .9s ease;
}

body.egg-ready .egg-video {
  opacity: 1;
}

/* When the egg is live, retire the homepage photo-collage layer. */
body.egg-bg[data-page="organization"]::before {
  display: none;
}

/* Quiet sound toggle, wakes up on hover/focus. */
.egg-sound {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 110;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(255, 255, 255, .16));
  background: rgba(10, 14, 20, .55);
  cursor: pointer;
  opacity: .4;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity .2s ease, transform .2s ease;
}

.egg-sound:hover,
.egg-sound:focus-visible {
  opacity: 1;
  transform: scale(1.06);
}

.egg-sound[aria-pressed="true"] {
  opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
  .egg-video {
    transition: none;
  }
}
/* ---- /Easter egg ---- */

/* ---- Activity page: platform badges, repo rows, member cards ---- */
.platform-badge {
  font-style: normal;
  font-family: var(--mono);
  font-size: .5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: .18rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.platform-badge.gitlab { color: #ffb38a; background: rgba(252, 109, 38, .13); border: 1px solid rgba(252, 109, 38, .28); }
.platform-badge.github { color: #c9ccd8; background: rgba(140, 148, 165, .12); border: 1px solid rgba(160, 170, 190, .22); }

.platform-inline { font-weight: 700; }
.platform-inline.gitlab { color: #ffb38a; }
.platform-inline.github { color: #c9ccd8; }

.platform-chip { gap: .45rem; }
.platform-chip svg { width: .75rem; height: .75rem; }
.platform-chip.gitlab svg { color: #fc6d26; }
.platform-chip.github svg { color: #c9ccd8; }
.platform-chip i { background: var(--green); }

.activity-card > header em.platform-badge { margin-left: .15rem; }

/* Repo rows reuse the commit-list look: dot · label · trailing code. */
.repo-list > a {
  display: flex;
  min-height: 56px;
  padding: .75rem .1rem;
  gap: .75rem;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
}
.repo-list > a:last-child { border: 0; }
.repo-list i { width: 6px; height: 6px; flex: 0 0 auto; background: var(--green); border-radius: 50%; box-shadow: 0 0 9px rgba(140, 247, 122, .3); }
.repo-list span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .3rem; }
.repo-list b { overflow: hidden; font-size: .68rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.repo-list small { color: #626c65; font-size: .54rem; }
.repo-list code { color: #68726b; font-family: var(--mono); font-size: .52rem; }

/* Feed rows carry an extra platform badge before the hash. */
.feed-list > a { display: flex; min-height: 72px; padding: .9rem .1rem; gap: .75rem; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .045); }
.feed-list > a:last-child { border: 0; }
.feed-list i { width: 6px; height: 6px; flex: 0 0 auto; background: var(--green); border-radius: 50%; box-shadow: 0 0 9px rgba(140, 247, 122, .3); }
.feed-list span:not(.platform-badge) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .3rem; }
.feed-list b { overflow: hidden; font-size: .68rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.feed-list small { color: #626c65; font-size: .54rem; }
.feed-list code { color: #68726b; font-family: var(--mono); font-size: .52rem; }
.feed-list em.platform-badge { flex: 0 0 auto; }

.member-activity-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .8rem;
}

.member-activity-cards .person-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.member-activity-summary {
  margin-top: .9rem;
  color: #79837c;
  font-size: .6rem;
}

.activity-note {
  margin-top: 1rem;
  max-width: 62ch;
  color: #79837c;
  font-size: .62rem;
  line-height: 1.6;
}

.activity-section-block { margin-top: 2.6rem; }
.activity-orgs { margin-top: 1.4rem; }

@media (max-width: 460px) {
  .feed-list em.platform-badge { display: none; }
  .repo-list code { display: none; }
}
/* ---- /Activity page ---- */

/* Amber status-pill variant, used for pending/under-review states
   (e.g. a storefront listing that has not cleared moderation yet). */
.status-pill.amber i { background: #f2c45a; }
.status-pill.amber { color: #d8b368; border-color: rgba(242, 196, 90, .35); }