/* === AUTHOR SECTION ===
   Carregado sob demanda via render_block_core/group
   quando className="author-section" está na página.
   ======================================================== */

.author-section { border-top: 1px solid var(--wp--custom--border-color-subtle); }
.author-cols.wp-block-columns.alignwide {
  align-items: center !important;
  gap: var(--wp--preset--spacing--50) !important;
}
.author-img-col.wp-block-column  { flex-basis: 33.33% !important; }
.author-text-col.wp-block-column {
  flex-basis: 66.66% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--wp--preset--spacing--40) !important;
}

/* --- Foto do autor ---
   Stitch: aspect-square grayscale hover:grayscale-0 transition-all duration-700
           overflow-hidden border border-subtle
   Aplicado via className="author-placeholder" no core/image */
.author-placeholder {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--wp--custom--border-color-subtle) !important;
  overflow: hidden !important;
  filter: grayscale(1);
  transition: filter 0.7s;
  margin: 0 !important;
}
.author-placeholder img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.author-placeholder:hover { filter: grayscale(0); }

/* --- Tipografia --- */
.author-eyebrow {
  font-size: 0.75rem !important; /* Stitch: text-xs Tailwind = 0.75rem; nosso token xs = 0.6875rem */
  font-weight: 600 !important;
  letter-spacing: 0.4em !important; /* Stitch: tracking-[0.4em] — mais largo que o problem (0.2em) */
  text-transform: uppercase !important;
  color: var(--wp--preset--color--primary) !important;
  margin: 0 !important;
}
.author-heading {
  font-size: clamp(1.75rem,4.5vw,3.75rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.9 !important;
  text-transform: uppercase;
  margin: 0 !important;
}
.author-bio {
  font-size: var(--wp--preset--font-size--xl) !important;
  color: var(--wp--preset--color--muted) !important;
  line-height: 1.65 !important;
  max-width: 56ch;
  margin: 0 !important;
}
/* --- Wrapper do bloco social ---
   Stitch: flex gap-8 pt-8 border-t border-subtle */
.author-social {
  padding-top: var(--wp--preset--spacing--40) !important;
  border-top: 1px solid var(--wp--custom--border-color-subtle) !important;
  margin-top: 0 !important;
}

/* --- core/social-links dentro do author-social ---
   Padrão: fill: url(#grad-brand) — mesmo gradiente dos bento-icons.
   #grad-brand injetado globalmente via wp_body_open (functions.php).
   Hover: primary sólido — mesmo comportamento do .icon:hover no site. */
.author-social .wp-block-social-links {
  gap: var(--wp--preset--spacing--40) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.author-social .wp-block-social-links .wp-social-link {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  transition: opacity 0.25s;
}
/* Os SVGs do core/social-links recebem <defs> + fill="url(#grad-brand)"
   injetados via render_block filter (functions.php) — mesma abordagem
   dos bento-icons. Estado padrão: gradiente brand. Hover: primary sólido. */
.author-social .wp-block-social-links.is-style-logos-only .wp-social-link svg {
  width: 24px !important;
  height: 24px !important;
  transition: opacity 0.2s;
}
.author-social .wp-block-social-links.is-style-logos-only .wp-social-link:hover svg {
  opacity: 0.75;
}
/* fill="url(#grad-brand)" é atributo HTML inline — !important necessário para sobrescrever no hover */
.author-social .wp-block-social-links.is-style-logos-only .wp-social-link:hover path {
  fill: var(--wp--preset--color--primary) !important;
  transition: fill 0.2s;
}

@media (max-width: 768px) {
  .author-cols.wp-block-columns.alignwide { flex-direction: column !important; }
  .author-img-col.wp-block-column { flex-basis: 100% !important; max-width: 320px !important; }
}

@media (max-width: 640px) {
  .author-section.wp-block-group {
    padding-top: var(--wp--preset--spacing--60) !important;
    padding-bottom: var(--wp--preset--spacing--60) !important;
  }
  .author-heading.wp-block-heading {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }
  .author-img-col.wp-block-column { display: block !important; margin: 0 auto !important; }
}