/* ===== PAGINA DE AUTOR =====
 * Ficha del autor, tira de sus entradas y llamada a la accion.
 *
 * La prosa de la biografia no esta aqui: la comparte con la entrada y la
 * pagina en assets/css/prose.css. Las tarjetas de la tira tampoco: son las del
 * listado y viven en assets/css/cards.css. */

body.page .fz-author {
  padding: var(--fz-single-page-space) var(--fz-single-mobile-gutter);
  background: var(--fz-surface-alt);
}

.fz-author__inner {
  width: 100%;
  max-width: var(--fz-single-container);
  margin-inline: auto;
}

/* Astra pone padding, fondo y borde a .ast-article-single; la ficha trae su
   propia tarjeta, asi que se apagan. */
body.page .fz-author article.fz-author__post {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ===== FICHA ===== */

.fz-author__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--fz-radius-2xl);
  background: var(--fz-surface);
  box-shadow: var(--fz-shadow-dropdown);
}

.fz-author__banner {
  height: var(--fz-author-banner-height);
  background: var(--fz-blue);
}

/* La foto monta sobre el banner: el margen negativo la sube justo su mitad. */
.fz-author__portrait {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--fz-author-photo-size) / -2);
}

.fz-author__photo {
  display: block;
  width: var(--fz-author-photo-size);
  height: var(--fz-author-photo-size);
  border: var(--fz-author-photo-ring) solid var(--fz-surface);
  border-radius: var(--fz-radius-pill);
  background: var(--fz-surface);
  object-fit: cover;
}

.fz-author__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fz-author-stack-gap);
  padding: var(--fz-author-card-padding);
  text-align: center;
}

body.page .fz-author .fz-author__name {
  margin: 0;
  color: var(--fz-blue);
  font-family: var(--fz-font);
  font-size: var(--fz-single-title-size);
  font-weight: var(--fz-font-weight-bold);
  line-height: 1.3;
}

body.page .fz-author .fz-author__role {
  margin: 0;
  color: var(--fz-blue);
  font-family: var(--fz-font);
  font-size: var(--fz-font-size-lg);
  font-weight: var(--fz-font-weight-semibold);
  letter-spacing: var(--fz-author-role-tracking);
  text-transform: uppercase;
}

/* La biografia es mas estrecha que la tarjeta para que la linea no se alargue
   mas de lo legible. */
.fz-author__bio {
  width: 100%;
  max-width: var(--fz-author-bio-width);
  text-align: center;
}

body.page .fz-author .fz-author__links-title {
  margin: 0;
  color: var(--fz-heading);
  font-family: var(--fz-font);
  font-size: var(--fz-font-size-sm);
  font-weight: var(--fz-font-weight-semibold);
}

.fz-author__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fz-control-column-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fz-author__links-item {
  margin: 0;
}

/* Circulos oscuros con el glifo en blanco: los SVG de redes ya traen el trazo
   en blanco fijo, asi que el color de cada red iria contra el glifo. */
.fz-author__link {
  display: inline-flex;
  width: var(--fz-author-link-size);
  height: var(--fz-author-link-size);
  align-items: center;
  justify-content: center;
  border-radius: var(--fz-radius-pill);
  background: var(--fz-heading);
  transition: background-color var(--fz-transition);
}

.fz-author__link:hover,
.fz-author__link:focus-visible {
  background: var(--fz-blue);
}

.fz-author__link:focus-visible {
  outline: var(--fz-focus-ring) solid var(--fz-blue);
  outline-offset: var(--fz-focus-offset);
}

.fz-author__link svg {
  width: 55%;
  height: 55%;
}

/* ===== TIRA DE ENTRADAS ===== */

.fz-author__posts {
  display: flex;
  flex-direction: column;
  gap: var(--fz-author-section-gap);
  margin-block-start: var(--fz-author-section-top);
}

body.page .fz-author .fz-author__posts-title {
  margin: 0;
  color: var(--fz-heading);
  font-family: var(--fz-font);
  font-size: var(--fz-font-size-2xl);
  font-weight: var(--fz-font-weight-bold);
  line-height: 1.3;
  text-align: center;
}

/* Rejilla y no tira desplazable: la tira sacaba dos barras de scroll, porque
   overflow-x:auto convierte el overflow-y visible en auto y cualquier pixel de
   mas saca tambien la vertical. Una rejilla no tiene ese problema, no necesita
   tabindex para el teclado y es la misma forma que los relacionados de la
   entrada. Cuantas entradas se muestran lo decide postsCount en la config. */
.fz-author__grid {
  display: grid;
  grid-template-columns: repeat(var(--fz-author-grid-columns), minmax(0, 1fr));
  gap: var(--fz-grid-gap);
}

body.page .fz-author .fz-author__posts-empty {
  margin: 0;
  color: var(--fz-text-muted);
  font-family: var(--fz-font-body);
  text-align: center;
}

/* ===== LLAMADA A LA ACCION ===== */

.fz-author__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fz-author-stack-gap);
  margin-block-start: var(--fz-author-section-top);
  padding: var(--fz-author-cta-padding);
  border-radius: var(--fz-radius-3xl);
  background: var(--fz-blue-soft);
  text-align: center;
}

body.page .fz-author .fz-author__cta-title {
  margin: 0;
  color: var(--fz-heading);
  font-family: var(--fz-font);
  font-size: var(--fz-font-size-2xl);
  font-weight: var(--fz-font-weight-bold);
  line-height: 1.3;
}

body.page .fz-author .fz-author__cta-text {
  max-width: var(--fz-author-bio-width);
  margin: 0;
  color: var(--fz-text);
  font-family: var(--fz-font-body);
  font-size: var(--fz-font-size);
}

body.page .fz-author .fz-author__cta-action {
  padding: var(--fz-single-button-padding);
  font-size: var(--fz-single-copy-size);
  line-height: var(--fz-single-copy-line);
}

body.page .fz-author .fz-author__cta-note {
  margin: 0;
  color: var(--fz-text-muted);
  font-family: var(--fz-font-body);
  font-size: var(--fz-font-size-sm);
}

@media (max-width: 1024px) {
  body.page .fz-author {
    padding-top: var(--fz-single-page-space-mobile);
    padding-bottom: var(--fz-single-page-space-mobile);
  }

  body.page .fz-author .fz-author__name {
    font-size: var(--fz-single-title-size-mobile);
    line-height: var(--fz-single-title-line-mobile);
  }

  .fz-author__grid {
    --fz-author-grid-columns: 1;
  }
}