/* Home layout and the profile card.
   The card used to be a holographic pane: a conic neon ring, a white filament
   inside it, frosted glass, corner pools, a drifting glint and a five-layer
   coloured halo. All of that is gone. What is left is a panel with a border,
   the same one the archive cards use, because the content — a photo, a name, a
   role, three counts and three links — never needed a light show to be read. */

.home {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin-inline: auto;
  padding: 112px clamp(20px, 5vw, 48px) 60px;
  /* With only the intro and the card on it, the page needs a floor or it reads
     as a stub — but the footer has to fit inside the same screen, or the whole
     view scrolls by one empty band. 156px is the footer's own box. */
  min-height: calc(100svh - 156px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.home__main { min-width: 0; }

.gstage {
  position: sticky;
  top: 112px;
}

.gcard {
  position: relative;
  display: block;
  padding: 28px 24px 26px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}

/* The glass and rim spans are decoration the old card needed to build its
   layers. Nothing draws them now, but they stay in the markup so index.html
   and the backup stay diffable — hidden rather than deleted. */
.gcard__glass,
.gcard__rim { display: none; }

.gcard__avatar {
  display: block;
  width: 116px;
  aspect-ratio: 1;
  margin: 4px auto 18px;
  border-radius: 50%;
  /* A single hairline ring instead of a conic gradient in four neon stops. */
  border: 1px solid var(--line);
  overflow: hidden;
}
.gcard__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel-2);
}

.gcard__name {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 4px;
  text-align: center;
  color: var(--ink);
}
.gcard__role {
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
  margin: 0 0 6px;
}
.gcard__handle {
  margin: 0 0 22px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--accent);
}

.gcard__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line-soft);
}
.gcard__stats li { padding: 0 2px; }
/* The counts were three different neon colours with brackets around them. They
   are three counts; they read as one set now. */
.gcard__stats b {
  display: block;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.gcard__stats span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}

.gcard__socials {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
}
.gcard__social {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  transition: color .18s, border-color .18s, background .18s;
}
.gcard__social svg { width: 18px; height: 18px; }
/* The other two marks are inline SVG drawn in currentColor; this one ships as
   a white PNG, which is why it used to sit at full brightness next to two
   muted icons. Painting it as a mask puts it back under the same colour: the
   artwork only shapes the fill, and it dims and lights with its neighbours.
   It is wider than tall, hence its own box. */
.gcard__mark {
  width: 26px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("../assets/tryhackme.png") center / contain no-repeat;
  mask: url("../assets/tryhackme.png") center / contain no-repeat;
}
.gcard__social:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: var(--panel-2);
}

@media (max-width: 900px) {
  .home {
    grid-template-columns: 1fr;
    padding-top: 96px;
  }
  .gstage {
    position: relative;
    top: auto;
    order: -1;
    width: min(340px, 100%);
    justify-self: center;
  }
}