/*
 * Aperina blog «مجله» — an author's page (/blog/author/<slug>/).
 * Loaded only there (inc/blog-authors.php), after blog.css.
 *
 * A profile read like a masthead: the name large on the start side, the biography beside it at a
 * reading measure, then a record of label / value lines running down the start column next to a
 * dated index of the writing. On a phone the same parts simply follow each other.
 *
 * Type, space and hairlines only: no boxes, no counters in tiles, no pills. Role and scale tokens,
 * logical properties, mobile first.
 */

/* =========================================================
   The page grid
   ========================================================= */
.author-page { display: grid; grid-template-columns: minmax(0, 1fr); }

.author-page__crumbs .breadcrumb { padding-block: var(--space-2); }

/* =========================================================
   Who: portrait, name, role
   ========================================================= */
.author-page__id {
  display: grid; justify-items: start; align-content: end; gap: var(--space-2);
  padding-block: var(--space-4) var(--space-6);
}
.author-page__id .blog-photo { margin-block-end: var(--space-3); }
.author-page__name {
  margin: 0; font-size: var(--text-h1); font-weight: 200; line-height: var(--lh-h1);
  letter-spacing: 0; text-wrap: balance;
}
.author-page__role { margin: 0; font-size: var(--text-body-lg); line-height: var(--lh-body-lg); color: var(--text-muted); }

/* =========================================================
   The biography — at a reading measure, one size up
   ========================================================= */
.author-page__bio { padding-block-end: var(--space-8); }
.author-page__bio p {
  margin: 0; max-inline-size: var(--measure);
  font-size: var(--text-body-lg); line-height: var(--lh-body-lg); color: var(--text);
}

/* =========================================================
   The record: label / value on hairlines
   ========================================================= */
.author-facts { display: grid; padding-block-end: var(--space-12); }
.author-facts__list { margin: 0; }
.author-facts__row {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--space-4);
  padding-block: var(--space-4); border-block-end: 1px solid var(--divider);
}
.author-facts__row dt {
  font-size: var(--text-caption); line-height: var(--lh-small); color: var(--text-muted);
  padding-block-start: 0.15em;
}
.author-facts__row dd { margin: 0; min-width: 0; font-size: var(--text-small); line-height: var(--lh-small); }

.author-facts__creds { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }

/* A short run of links, held apart by the blog's hairline rather than by a character. */
.author-facts__items { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); }
.author-facts__items > *:not(:last-child)::after {
  content: ""; display: inline-block; width: 1px; height: 0.9em;
  margin-inline-start: var(--space-3); background: var(--border-strong); vertical-align: -0.1em;
}
.author-facts a, .author-facts__policy a {
  color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px; text-underline-offset: 0.35em;
}
.author-facts a:hover { text-decoration-color: currentColor; }
/* A thumb needs more than a line of caption text to aim at. */
.author-facts__items a, .author-facts__policy a { display: inline-block; padding-block: var(--space-2); margin-block: calc(var(--space-2) * -1); }
.author-facts__policy { margin: var(--space-5) 0 0; font-size: var(--text-small); line-height: var(--lh-small); }

/* =========================================================
   The work: a dated index
   ========================================================= */
.author-work + .author-work { margin-block-start: var(--space-16); }
/* The two section heads of the page — «کارنامه» and «نوشته‌ها» — sit on one heavy rule. */
.author-facts__title,
.author-work__title {
  margin: 0; padding-block-end: var(--space-3); border-block-end: 1px solid var(--text);
  font-size: var(--text-title); line-height: var(--lh-title); font-weight: 500;
}

.author-list { list-style: none; margin: 0; padding: 0; }

.author-post {
  display: grid; grid-template-columns: minmax(0, 1fr) 6rem; column-gap: var(--space-4); row-gap: var(--space-1);
  grid-template-areas: "date media" "body media";
  align-items: start;
  padding-block: var(--space-5); border-block-end: 1px solid var(--divider);
}
.author-post--text { grid-template-columns: minmax(0, 1fr); grid-template-areas: "date" "body"; }

.author-post__date { grid-area: date; margin: 0; }
.author-post__date time { color: inherit; }
.author-post__body { grid-area: body; display: grid; gap: var(--space-2); min-width: 0; }

.author-post__title { margin: 0; font-size: var(--text-title); font-weight: 500; line-height: var(--lh-title); text-wrap: pretty; }
.author-post__title a { color: inherit; text-decoration: none; }
.author-post__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }

.author-post__excerpt {
  display: none; margin: 0; max-inline-size: var(--measure);
  color: var(--text-muted); font-size: var(--text-small); line-height: var(--lh-small);
}
.author-post__meta a { color: inherit; text-decoration: none; }
.author-post__meta a:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; }

.author-post__media {
  grid-area: media; display: block; overflow: hidden; aspect-ratio: 1;
  border-radius: var(--radius-field); background: var(--bg-sunken);
}
.author-post__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: opacity var(--dur-base) var(--ease-out); }
.author-post:hover .author-post__media img { opacity: 0.88; }

.author-work__empty { display: grid; justify-items: start; gap: var(--space-3); padding-block: var(--space-6); }
.author-work__empty p { margin: 0; max-inline-size: var(--measure); color: var(--text-muted); }
.author-work__empty .link { display: inline-block; padding-block: var(--space-2); }

.author-work .page-nav ul.page-numbers { justify-content: flex-start; }

@media (min-width: 640px) {
  .author-post__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .author-post { grid-template-columns: minmax(0, 1fr) 8rem; }
  .author-post__media { aspect-ratio: 4 / 3; }
}

/* The date takes a column of its own: the index reads down the dates like a contents page. */
@media (min-width: 768px) {
  .author-page__id { padding-block: var(--space-6) var(--space-8); }
  .author-page__bio { padding-block-end: var(--space-10); }
  .author-post {
    grid-template-columns: 8rem minmax(0, 1fr) 10rem; column-gap: var(--space-6);
    grid-template-areas: "date body media";
    padding-block: var(--space-6);
  }
  .author-post--text { grid-template-columns: 8rem minmax(0, 1fr); grid-template-areas: "date body"; }
  .author-post__date { padding-block-start: 0.3em; }
}

/* =========================================================
   Desktop: masthead above, record beside the work
   -----------------------------------------------------------------
   Start column (right): who, then the record.
   End column: the biography, then the writing. Both columns start
   the second row on the same heavy hairline.
   ========================================================= */
@media (min-width: 1024px) {
  .author-page {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-areas:
      "crumbs crumbs"
      "id     bio"
      "facts  work";
    column-gap: var(--space-16);
  }
  .author-page__crumbs { grid-area: crumbs; }
  .author-page__id { grid-area: id; padding-block: var(--space-8) var(--space-10); }
  /* The biography starts on the portrait's top line, so the masthead reads as one row that begins
     at one height; the ragged end of a text column is where white space belongs, not above it.
     The small pull takes out the half-leading above the first line. */
  .author-page__bio { grid-area: bio; align-self: start; padding-block: var(--space-8) var(--space-10); }
  .author-page__bio p { margin-block-start: calc((1em - var(--lh-body-lg) * 1em) / 2); }
  .author-page__facts { grid-area: facts; align-self: start; }
  .author-page__work { grid-area: work; min-width: 0; }

  /* The end column is too narrow here for a date column as well: the date goes back on top. */
  .author-post, .author-post--text { grid-template-columns: minmax(0, 1fr) 9rem; grid-template-areas: "date media" "body media"; column-gap: var(--space-5); }
  .author-post--text { grid-template-columns: minmax(0, 1fr); grid-template-areas: "date" "body"; }
  .author-post__date { padding-block-start: 0; }

  /* Nobody's record to stand beside: the writing takes the whole width under the masthead. */
  .author-page:not(:has(.author-page__facts)) { grid-template-areas: "crumbs crumbs" "id bio" "work work"; }
}

@media (min-width: 1280px) {
  .author-post { grid-template-columns: 8rem minmax(0, 1fr) 10rem; grid-template-areas: "date body media"; column-gap: var(--space-6); }
  .author-post--text { grid-template-columns: 8rem minmax(0, 1fr); grid-template-areas: "date body"; }
  .author-post__date { padding-block-start: 0.3em; }
}