/* =============================================================================
   Alabama Signature Homes — blog/author
   =============================================================================

   One author's page, app/views/blog/author.html.php: the profile, then what
   they have written. The breadcrumbs, chips and section heading are in
   blog/_blog.css; the name is main.css's .rule-title.

   Same house rules as main.css — no nesting, flat selectors, media queries
   inside the layer that owns them. Everything is wrapped in @layer: an
   unlayered rule would outrank even the utilities layer.
   ========================================================================== */

@layer pages {
  .author-page {
    max-width: var(--measure-lg);
  }

  .author-card {
    display: grid;
    gap: var(--space-sm);
    padding-block-end: var(--space-md);
    border-block-end: 1px solid var(--clr-neutral-700);
  }

  .author-card__photo {
    width: 10rem;
    height: 10rem;
    border-radius: var(--radius-full);
    object-fit: cover;
  }

  .author-card__name {
    margin-block-end: var(--space-xs);
  }

  .author-card__line {
    font-size: var(--fs-lg);
    color: var(--clr-text-muted);
  }

  .author-card__facts {
    display: grid;
    gap: var(--space-3xs);
    margin-block-start: var(--space-xs);
    font-size: var(--fs-sm);
  }

  .author-card__facts > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .author-card__facts dt {
    min-width: 7rem;
    color: var(--clr-text-faint);
  }

  .author-card__facts a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .author-section {
    margin-block-start: var(--space-lg);
  }

  .author-bio > p {
    margin-block-start: var(--space-xs);
  }

  .author-posts {
    display: grid;
    gap: var(--space-xs);
    margin-block-start: var(--space-sm);
  }

  .author-posts__link {
    display: grid;
    gap: var(--space-3xs);
    padding: var(--space-xs);
    background-color: var(--clr-surface-card);
    border-radius: var(--radius-sm);
    text-decoration: none;
  }

  .author-posts__date {
    font-size: var(--fs-sm);
    color: var(--clr-text-muted);
  }

  .author-posts__title {
    font-family: var(--ff-heading);
    font-size: var(--fs-xl);
  }

  .author-posts__question {
    color: var(--clr-text-muted);
  }

  @media (min-width: 768px) {
    .author-card {
      grid-template-columns: auto 1fr;
      align-items: center;
    }
  }
}