/*
 * blog-single-author-bio.css — Toro Legal Marketing
 * Figma node: 383:1158 (Avatar label group)
 *
 * End-of-article author surface.
 *   - Avatar LEFT (100px round, cream background placeholder)
 *   - RIGHT column: "Written by" label + name (top row), contact
 *     buttons (right of top row), bio text (below)
 *
 * Mobile: avatar stays left, contact buttons wrap below name on
 * narrow widths (< 480px) to avoid cramping.
 */

.blog-single-author-bio {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;          /* mobile-first: stacked (avatar top, body below) */
  gap: var(--space-md);
  align-items: flex-start;
}

.blog-single-author-bio__media {
  flex-shrink: 0;
}

.blog-single-author-bio__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy-faint);
  overflow: hidden;
}

.blog-single-author-bio__avatar-img {
  /* Zoom in on the face by oversizing the image inside the circle; the
     parent's overflow: hidden crops it. No transform scale (that
     upsamples and blurs) — we feed the larger source size instead. */
  width: 135%;
  height: 135%;
  object-fit: cover;
  object-position: center top;
}

.blog-single-author-bio__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.blog-single-author-bio__identity {
  display: flex;
  flex-direction: column;
}

.blog-single-author-bio__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy-muted);
  margin: 0;
}

.blog-single-author-bio__name {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  /* Author-name standard: 20 mobile → 24 desktop. Matches the
     testimonials + rail author names. Desktop bump in the 1024 block. */
  font-size: var(--text-h5-mobile);    /* 20px Halant */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
  margin: 0;
}

/* Inherits the global hover-underline + 70% navy darken from base.css. */
.blog-single-author-bio__name-link {
  color: inherit;
}

.blog-single-author-bio__contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.blog-single-author-bio__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-navy);
  background: var(--color-navy);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: box-shadow 180ms ease;
}

@media (hover: hover) {
  .blog-single-author-bio__contact:hover {
    box-shadow: var(--shadow-button-hover);
  }
}

.blog-single-author-bio__text {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy-muted);
  margin: 0;
}

/* ============================================
 * Tablet+ (≥640px) — back to row layout
 * Avatar LEFT, body RIGHT. Contacts align inline with the name
 * via absolute positioning of the contacts at the top-right of
 * the body column.
 * ============================================ */

@media (min-width: 640px) {
  .blog-single-author-bio {
    flex-direction: row;
    gap: var(--space-md);
    padding: var(--space-xl);
  }

  .blog-single-author-bio__avatar {
    width: 100px;
    height: 100px;
  }

  .blog-single-author-bio__body {
    /* Two-row layout: identity + contacts share row 1; bio sits row 2.
       Grid (vs flex) so contacts can sit top-right without absolute. */
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "identity contacts"
      "bio bio";
    column-gap: var(--space-md);
    row-gap: var(--space-sm);
  }

  .blog-single-author-bio__identity { grid-area: identity; }
  .blog-single-author-bio__contacts { grid-area: contacts; align-self: center; }
  .blog-single-author-bio__text     { grid-area: bio; }

  .blog-single-author-bio__contacts {
    gap: var(--space-sm);
  }
}

/* ============================================
 * Desktop (>= 1024px) — author name bumps to 24
 * ============================================ */

@media (min-width: 1024px) {
  .blog-single-author-bio__name {
    font-size: var(--text-2xl);          /* 24px — author-name standard */
  }
}