/* ==========================================================================
   Influent Academy - author identity
   Loaded on a single post and on an author archive only. Carries three things:
   the shared avatar component, the article byline, and the author page.

   Tokens, .wrap, .eyebrow and the type scale come from influent.css. The
   article grid on an author page comes from blog.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Avatar
   -------------------------------------------------------------------------- */
/* One component for the 48px byline and the 160px portrait. Size is passed in
   as a custom property so the initials scale with it. */
.ia-avatar {
  --ia-avatar-size: 48px;

  display: block;
  flex: none;
  width: var(--ia-avatar-size);
  height: var(--ia-avatar-size);
  border-radius: 50%;
  overflow: hidden;
  background: var(--fill);
}

.ia-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* The last fallback. Not a placeholder for a missing image: a real, deliberate
   avatar, so a byline can never render as a broken picture. */
.ia-avatar--initials {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: calc(var(--ia-avatar-size) * 0.36);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--text-faint);
  background: var(--fill);
}

/* --------------------------------------------------------------------------
   2. Article byline
   -------------------------------------------------------------------------- */
.ia-byline {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: var(--s5) 0 0;
  padding: var(--s3) 0 0;
  border-top: 1px solid var(--line);
}

/* The same short orange segment the hero meta used, kept so the hero still
   reads as one composition. */
.ia-byline::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--accent);
}

.ia-byline__avatar {
  display: block;
  flex: none;
  border-radius: 50%;
}

.ia-byline__text {
  min-width: 0;
}

.ia-byline__by {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.ia-article .ia-byline__name,
.ia-article .ia-byline__name:link,
.ia-article .ia-byline__name:visited {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.ia-article .ia-byline__name:hover,
.ia-article .ia-byline__name:focus-visible {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Date and reading time sit together on the quiet second line, so the byline
   never competes with the headline above it. */
.ia-byline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 3px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-faint);
}

.ia-byline__dot {
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-strong);
}

/* --------------------------------------------------------------------------
   3. Author page
   -------------------------------------------------------------------------- */
.ia-author {
  background: var(--paper);
}

.ia-author__intro {
  padding-block: clamp(44px, 5vw, 76px) clamp(24px, 3vw, 36px);
}

.ia-author__grid {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
}

.ia-author__portrait .ia-avatar {
  box-shadow: var(--shadow);
}

.ia-author__name {
  margin: 0 0 8px;
}

.ia-author__role {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--accent-text);
}

.ia-author__bio {
  margin-top: var(--s3);
  max-width: 62ch;
  color: var(--text-muted);
}

.ia-author__bio p {
  margin: 0 0 var(--s2);
}

.ia-author__bio p:last-child {
  margin-bottom: 0;
}

.ia-author__block {
  margin-top: var(--s4);
}

/* A heading for the document outline, styled as a label so it does not read as
   a section break inside a compact profile. */
.ia-author__subhead {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ia-author__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ia-author__tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--text-muted);
}

/* The author's links, drawn in the same language as the article share rail so
   the two rows read as one system. The list wraps rather than being capped: a
   link the author took the trouble to enter should not silently disappear. */
.ia-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}

.ia-social__item {
  margin: 0;
}

.ia-author .ia-social__link,
.ia-author .ia-social__link:link,
.ia-author .ia-social__link:visited {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.ia-author .ia-social__link:hover,
.ia-author .ia-social__link:focus-visible {
  color: var(--accent-text);
  border-color: var(--accent);
  background: var(--accent-wash);
}

.ia-social__icon {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .ia-author .ia-social__link {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ia-author__grid {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--s4);
  }
}

@media (max-width: 680px) {
  .ia-author__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
  }

  .ia-byline {
    gap: 12px;
  }

  .ia-byline__by {
    font-size: 0.9rem;
  }
}