/* === HUB HOME — ported from iawp-hub-proto/styles.css (approved) ===
   Classes: .hero, .section, .posts-hub, .bento-*, .about-*
   ================================================================ */


/* FSE wrappers: hero section is a group — full-bleed, not contentSize */
.hero.wp-block-group,
.hero.alignfull {
  max-width: none;
}
/* .hero-bg must fill the section; never inherit constrained max-width */
.hero .hero-bg {
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0;
  right: 0;
}
/* Conteúdo = .wrap do proto (wideSize).
   Gutter = RPA has-global-padding no section constrained (root = spacing|40 =
   clamp(24px,4vw,48px) = gutter do proto). NÃO zerar padding L/R no section
   (anula o gutter). NÃO width:min(100%-2·gutter) no wrap se o pai já tem
   has-global-padding (dobra o inset). wrap = width 100% + max-width wide.
   add_editor_style já prefixa .editor-styles-wrapper — não repetir. */
.hero .hero__inner.alignwide {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1344px);
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}
.section.wp-block-group,
.section.alignfull {
  max-width: none;
  box-sizing: border-box;
}
.section .wrap.alignwide,
.about-section .wrap.alignwide {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1344px);
  margin-left: auto;
  margin-right: auto;
}

/* Buttons hub — tipografia/padding em theme.json + attrs.
   Hover primary = proto .btn--primary → --primary-dark (#2563eb);
   não usar elements.button:hover no theme.json (atingiria outline).
   Sem !important. */
.hero .wp-block-button,
.about-actions .wp-block-button {
  margin: 0;
}
.hero .wp-block-buttons .wp-block-button__link.wp-element-button,
.about-actions.wp-block-buttons .wp-block-button__link.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 0;
  height: auto;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.hero .wp-block-button:not(.is-style-outline) .wp-block-button__link.wp-element-button,
.about-actions .wp-block-button:not(.is-style-outline) .wp-block-button__link.wp-element-button {
  border: none;
}
.hero .wp-block-button:not(.is-style-outline) .wp-block-button__link.wp-element-button:hover,
.about-actions .wp-block-button:not(.is-style-outline) .wp-block-button__link.wp-element-button:hover {
  background: var(--wp--custom--primary-dark);
  color: #fff;
}
.hero .is-style-outline .wp-block-button__link.wp-element-button,
.about-actions .is-style-outline .wp-block-button__link.wp-element-button {
  background: transparent;
  color: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--outline);
}
.hero .is-style-outline .wp-block-button__link.wp-element-button:hover,
.about-actions .is-style-outline .wp-block-button__link.wp-element-button:hover {
  background: transparent;
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}
/* .text-accent = style.css (não duplicar aqui) */
/* ═══ Hero hub — CSS só o que attrs/Core não expressam ═══
   Nativo: minHeight, flex vertical + verticalAlignment/justifyContent,
   blockGap 0, padding|70/|60, backgroundColor base, stack tipografia/margins.
   Provas (layout.php + block.json heading/paragraph, 2026-09):
   - position/overflow: sem support no Group
   - ::before wash: gradient nativo → `background:…!important` apaga background-color
   - ::after frame inset+cantos: border do Group não é inset
   - hero-bg/device/grid: core/html multi-nó (blocks.md)
   - max-width ch/rem: sem maxWidth no heading/paragraph; constrained +
     has-global-padding quebra align esquerdo do proto
   - meta flex+dots: paragraph className:false, sem layout flex
   - em / motion / mobile: sem support / sem breakpoint nativo
   Removido: width/margin redundantes; flex:none; flex-shrink:0. */
.hero {
  position: relative;
  overflow: hidden;
}
/* Wash sobre base (proto .hero-bg__wash) — ver nota gradient !important */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--wp--custom--fashion-wash);
}
/* Frame + cantos TL/BR (proto .hero-bg__frame + .corner) — não cabe em border nativo */
.hero::after {
  content: "";
  position: absolute;
  inset: clamp(1.25rem, 3vw, 2.5rem);
  z-index: 0;
  pointer-events: none;
  border: 1px solid var(--wp--preset--color--outline);
  opacity: 0.45;
  background:
    linear-gradient(
      color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent),
      color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent)
    ) 0 0 / 1.25rem 1px no-repeat,
    linear-gradient(
      color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent),
      color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent)
    ) 0 0 / 1px 1.25rem no-repeat,
    linear-gradient(
      color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent),
      color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent)
    ) 100% 100% / 1.25rem 1px no-repeat,
    linear-gradient(
      color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent),
      color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent)
    ) 100% 100% / 1px 1.25rem no-repeat;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Editor: chrome do core/html não pode ser containing block do .hero-bg */
.hero .wp-block-html,
.hero [data-type="core/html"] {
  position: static !important;
}
/* Grid mascarado (proto .hero-bg__grid) */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--wp--custom--ornament-line) 0,
      var(--wp--custom--ornament-line) 1px,
      transparent 1px,
      transparent 6.5rem
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent calc(6.5rem - 1px),
      var(--wp--custom--ornament-line) calc(6.5rem - 1px),
      var(--wp--custom--ornament-line) 6.5rem
    );
  -webkit-mask-image: linear-gradient(105deg, transparent 0%, transparent 38%, #000 72%, transparent 100%);
  mask-image: linear-gradient(105deg, transparent 0%, transparent 38%, #000 72%, transparent 100%);
  opacity: 0.7;
}
.hero-bg__device {
  position: absolute;
  right: max(var(--wp--preset--spacing--40), calc((100% - var(--wp--style--global--wide-size, 1344px)) / 2));
  top: 50%;
  transform: translateY(-48%);
  width: min(42vw, 26rem);
  opacity: 0.55;
  z-index: 1;
}
.device {
  border: 1px solid var(--wp--custom--border-color-mid);
  background: color-mix(in srgb, var(--wp--preset--color--base) 35%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
}
.device__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--wp--preset--color--outline);
}
.device__bar span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--wp--preset--color--outline);
}
.device__bar span:first-child {
  background: color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
}
.device__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.25rem 1rem 1.5rem;
  min-height: 11rem;
}
.device__line {
  height: 1px;
  width: 70%;
  background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--secondary));
  opacity: 0.35;
}
.device__line--mute {
  background: var(--wp--preset--color--outline);
  opacity: 1;
}
.device__line--w78 { width: 78%; }
.device__line--w54 { width: 54%; }
.device__line--w66 { width: 66%; }
.device__line--w42 { width: 42%; }
.device__line--w88 { width: 88%; }
.device__line--w36 { width: 36%; }
/* measure do proto — sem maxWidth em heading/paragraph (block.json).
   z-index do .hero__inner já no bloco .alignwide acima. */
.hero__inner > .wp-block-heading.has-hero-headline-font-size {
  max-width: 28ch;
}
.hero__inner > .wp-block-paragraph.has-lg-font-size {
  max-width: 38rem;
}
/* meta: p sem layout flex / className:false */
.hero__inner > .wp-block-paragraph.has-xs-font-size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-bg__device {
    animation: device-drift 18s ease-in-out infinite;
  }
  .hero__inner > * {
    animation: hero-rise 0.7s ease-out both;
  }
  .hero__inner > *:nth-child(1) { animation-delay: 0.05s; }
  .hero__inner > *:nth-child(2) { animation-delay: 0.12s; }
  .hero__inner > *:nth-child(3) { animation-delay: 0.18s; }
  .hero__inner > *:nth-child(4) { animation-delay: 0.24s; }
  .hero__inner > *:nth-child(5) { animation-delay: 0.3s; }
}
@keyframes device-drift {
  0%, 100% { transform: translateY(-48%); }
  50% { transform: translateY(calc(-48% - 0.6rem)); }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: translateY(0); }
}
.hero .wp-block-heading em {
  font-style: italic;
  font-weight: 300;
  color: var(--wp--preset--color--primary);
}
.hero__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  opacity: 0.7;
  flex-shrink: 0;
  display: inline-block;
}
@media (max-width: 799px) {
  .hero::after {
    inset: 1rem;
  }
  .hero-bg::before {
    opacity: 0.4;
  }
  .hero-bg__device {
    right: -8%;
    width: min(70vw, 18rem);
    opacity: 0.28;
    top: 18%;
    transform: none;
    animation: none;
  }
}

/* ═══ Sections ═══
   Full-bleed via alignfull + RPA. Conteúdo em .wrap.alignwide.
   Padding/background: attrs nativos no template (spacing|60, backgroundColor).
   Tipografia de label/heading/lede: attrs nos patterns (não re-declarar aqui).
   Proibido width:100% / margin:0 aqui — trava o CB e desalinha wide vs header/hero. */
.section--rule {
  border-top: 1px solid var(--wp--preset--color--outline);
}
/* .section--surface: background via backgroundColor surface-low no template */

/* section-header: margin-bottom = attr nativo (3rem) nos patterns.
   CSS só: aside max-width / align (sem support nativo de text-align no group). */
.section-header__aside {
  max-width: min(28rem, 100%);
  text-align: right;
}
.section-header__aside .section-lede,
.section-header__aside .section-lede p {
  margin: 0;
  text-align: right;
  max-width: 16rem;
}
@media (max-width: 799px) {
  .section-header__aside {
    text-align: left;
    max-width: none;
  }
  .section-header__aside .section-lede,
  .section-header__aside .section-lede p {
    text-align: left;
    max-width: none;
  }
}
.section-heading .text-accent {
  color: var(--wp--preset--color--primary);
}
/* Lede: sm/muted nativos; caixa max-width = CSS (paragraph sem maxWidth) */
.section-lede {
  max-width: 16rem;
}
@media (max-width: 900px) {
  .section-lede {
    max-width: none;
  }
}

/* ═══ Ícones (Lucide → SVG local / core/icon, stroke 1px) ═══
   core/icon aplica fill:currentColor no SVG — Lucide precisa fill:none + stroke.
   Classe de produto `bento-icon` no wrapper .wp-block-icon. */
svg.icon,
svg.bento-icon,
.wp-block-icon.bento-icon svg {
  display: block;
  flex-shrink: 0;
  fill: none;
  stroke: url(#grad-brand) var(--wp--preset--color--primary);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg.icon {
  width: 1.25em;
  height: 1.25em;
}
svg.bento-icon {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 0 2rem;
}
/* .wp-block-icon.bento-icon: size em style.css; margin = attr nativo do core/icon */
/* Lucide: pontos preenchidos (ex. palette) usam fill, não stroke */
svg.icon [fill]:not([fill="none"]),
svg.bento-icon [fill]:not([fill="none"]),
.wp-block-icon.bento-icon svg [fill]:not([fill="none"]) {
  fill: url(#grad-brand) var(--wp--preset--color--primary);
  stroke: none;
}

/* ═══ Eixos / bento — allowlist (nativo: pad|40, flex vertical, tipografia, bg)
   CSS só: grid 12 + span 8/4, outline (não border — blocks.md),
   ::before spotlight, faixa gradiente, max-width desc, margin-top:auto CTA,
   font-size wide≠narrow (sem preset dual), mobile 1-col, hover seta.
   Sem !important — grid vence layout default do Group sem guerra. */
.spotlight,
.bento-item {
  position: relative;
  isolation: isolate;
}
.spotlight::before,
.bento-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    var(--wp--custom--primary-alpha-09, rgba(59, 130, 246, 0.09)) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: -1;
}
.spotlight:hover::before,
.bento-item:hover::before {
  opacity: 1;
}

.bento-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  background: var(--wp--custom--border-color-subtle);
  border: 1px solid var(--wp--custom--border-color-subtle);
  overflow: hidden;
}
.bento-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--wp--custom--gradient-brand);
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
}
.bento-item {
  /* flex/pad/bg = attrs; outline = bordas internas (blocks.md) */
  outline: 1px solid var(--wp--custom--border-color-subtle);
  outline-offset: 0;
  min-width: 0;
}
.bento-wide {
  grid-column: span 8;
}
.bento-narrow {
  grid-column: span 4;
}
/* Tamanhos distintos wide/narrow — sem fontSize dual no heading */
.bento-wide .bento-title {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
}
.bento-narrow .bento-title {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
}
.bento-desc {
  max-width: 420px;
}
.bento-more {
  margin-top: auto;
}
.bento-more a {
  color: inherit;
  text-decoration: none;
}
.bento-more:hover,
.bento-more a:hover {
  color: var(--wp--preset--color--contrast);
}
.bento-more span {
  display: inline-block;
  transition: transform 0.25s ease;
}
.bento-more:hover span,
.bento-more a:hover span {
  transform: translateX(0.25rem);
}
@media (max-width: 900px) {
  .bento-wide,
  .bento-narrow {
    grid-column: span 12;
  }
}


/* ═══ Listagem hub — allowlist (nativo: tipografia, padding, border, flex, grid cols)
   CSS só: proporção 58/40, cover absoluto, badge overlay, grid mobile,
   hover/motion, ::after seta/dot, line-clamp.
   blog.css escopado fora de .posts-hub — sem guerra de !important. */
.posts-hub,
.posts-hub__grid,
.posts-hub .wp-block-query,
.posts-hub__grid .wp-block-query,
.posts-hub__grid .wp-block-post-template {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.posts-hub__grid {
  display: block;
  border: none;
  background: transparent;
}
.posts-hub__grid > * {
  min-width: 0;
  width: 100%;
}
.posts-hub > .wp-block-query > .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
.posts-hub__grid .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Proto <800px = 1 col; columnCount:2 nativo não quebra sozinho */
@media (max-width: 799px) {
  .posts-hub__grid .wp-block-post-template {
    grid-template-columns: 1fr;
  }
}
.posts-hub .wp-block-post {
  margin: 0;
  width: 100%;
  min-width: 0;
}

.posts-hub .post-featured {
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.posts-hub .post-featured:hover {
  border-color: var(--wp--preset--color--primary);
  transform: translateY(-4px);
}
.posts-hub .post-featured__img {
  width: 58%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  min-height: 20rem;
  align-self: stretch;
}
/* Coluna stretch: figure preenche via absolute+inset (attrs já dão width/height/scale no img) */
.posts-hub .post-featured__img .wp-block-post-featured-image {
  position: absolute;
  inset: 0;
}
.posts-hub .post-featured__img img {
  filter: grayscale(1);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.posts-hub .post-featured:hover .post-featured__img img {
  transform: scale(1.05);
  filter: grayscale(0);
}
/* Badge: tipografia/cor/padding nativos; position absolute = CSS (sem support). */
.posts-hub .post-featured__cat {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 3;
  width: max-content;
  max-width: 20rem;
  box-sizing: border-box;
  white-space: nowrap;
}
.posts-hub .post-featured__cat a {
  color: inherit;
  text-decoration: none;
}
.posts-hub .post-featured__cat .wp-block-post-terms__separator {
  display: none;
}
.posts-hub .post-featured__body {
  width: 40%;
  box-sizing: border-box;
}
.posts-hub .post-featured__date::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: var(--wp--preset--spacing--20);
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  vertical-align: middle;
}
.posts-hub .post-featured__title a {
  color: inherit;
  text-decoration: none;
}
.posts-hub .post-featured:hover .post-featured__title,
.posts-hub .post-featured:hover .post-featured__title a {
  color: var(--wp--preset--color--primary);
}
.posts-hub .post-featured__excerpt p {
  margin: 0;
}
.posts-hub .post-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.posts-hub .post-featured__cta::after {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 5l-1.41 1.41L18.17 11H2v2h16.17l-4.59 4.59L15 19l7-7z'/></svg>")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 5l-1.41 1.41L18.17 11H2v2h16.17l-4.59 4.59L15 19l7-7z'/></svg>")
    center / contain no-repeat;
  transition: transform 0.3s;
}
.posts-hub .post-featured:hover .post-featured__cta::after {
  transform: translateX(6px);
}

.posts-hub .post-card {
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.posts-hub .post-card:hover {
  border-color: var(--wp--preset--color--primary);
  transform: translateY(-4px);
}
/* width/margin/aspect/scale = attrs nativos no post-featured-image */
.posts-hub .post-card__img.wp-block-post-featured-image,
.posts-hub .wp-block-post-featured-image.post-card__img {
  flex-shrink: 0;
  overflow: hidden;
  background: var(--wp--preset--color--surface-mid);
}
.posts-hub .post-card__img img {
  filter: grayscale(1);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.posts-hub .post-card:hover .post-card__img img {
  transform: scale(1.05);
  filter: grayscale(0);
}
.posts-hub .post-card__body {
  flex: 1 1 auto;
  box-sizing: border-box;
}
.posts-hub .post-card__cat a {
  color: inherit;
  text-decoration: none;
}
.posts-hub .post-card__cat .wp-block-post-terms__separator {
  display: none;
}
.posts-hub .post-card__title a {
  color: inherit;
  text-decoration: none;
}
.posts-hub .post-card:hover .post-card__title,
.posts-hub .post-card:hover .post-card__title a {
  color: var(--wp--preset--color--primary);
}
.posts-hub .post-card__excerpt {
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.posts-hub .post-card__excerpt p {
  margin: 0;
}
.posts-hub .post-card__footer {
  border-top: 1px solid var(--wp--custom--border-color-subtle);
  margin-top: auto;
  width: 100%;
}
.posts-hub .post-card__arrow {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: var(--wp--preset--color--primary);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 5l-1.41 1.41L18.17 11H2v2h16.17l-4.59 4.59L15 19l7-7z'/></svg>")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15 5l-1.41 1.41L18.17 11H2v2h16.17l-4.59 4.59L15 19l7-7z'/></svg>")
    center / contain no-repeat;
  transition: transform 0.2s;
}
.posts-hub .post-card:hover .post-card__arrow {
  transform: translateX(4px);
}

@media (max-width: 799px) {
  .posts-hub .post-featured {
    flex-direction: column;
  }
  .posts-hub .post-featured__img {
    width: 100%;
    aspect-ratio: 21 / 9;
    min-height: 0;
  }
  .posts-hub .post-featured__body {
    width: 100%;
    /* padding mobile: style.@mobile no pattern (1.5rem) — inline 3rem vence CSS sem !important */
  }
  /* post-card__body mobile pad: style.@mobile no pattern (1.5rem) — espelha featured */
}

/* ═══ Sobre teaser — allowlist (nativo: bg base, pad|60, tipografia, image
   aspectRatio/scale/width + margin 0, copy flex stretch + blockGap|40,
   buttons gap|15+pad-top|40, visual border+bg surface-mid)
   CSS só: grid 1fr/2fr, cantos ::before/::after, grayscale/hover img,
   max-width visual/bio, em wordmark.
   Sem !important. Fill figure/img = attrs nativos (não CSS). */
.about-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--50);
  align-items: center;
}
@media (min-width: 800px) {
  .about-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  }
}
.about-visual {
  position: relative;
  max-width: 22rem;
  width: 100%;
  overflow: visible;
}
/* figure margin = default do UA; attrs margin no image invalidam se width for no figure.
   margin:0 fino aqui (nativo só se serializar igual ao save — ver probe). */
.about-visual .wp-block-image {
  margin: 0;
}
.about-visual::before,
.about-visual::after {
  content: "";
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border-color: var(--wp--preset--color--primary);
  border-style: solid;
  z-index: 2;
  pointer-events: none;
}
.about-visual::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}
.about-visual::after {
  right: -1px;
  bottom: -1px;
  border-width: 0 1px 1px 0;
}
.about-visual img {
  filter: grayscale(1);
  transition: filter 0.7s;
}
.about-visual:hover img {
  filter: grayscale(0);
}
/* Tipografia/cores = attrs; só em (rich-text) + max-width bio */
.about-heading em {
  font-style: italic;
  font-weight: 300;
  color: var(--wp--preset--color--primary);
  text-transform: none;
}
.about-bio {
  max-width: 56ch;
}

/* Sociais do autor — Lucide stroke (proto .author-social__icon).
   Gap/size = attrs nativos (blockGap / has-small-icon-size).
   Core logos-only já zera bg/padding do anchor; aqui só o que o core não cobre:
   - border-radius (core = pill 9999px)
   - cor brand do logos-only (#0d66c2 etc.) → primary / grad-brand
   - fill:currentColor do core → fill:none + stroke Lucide
   Sem !important. */
.author-social.wp-block-social-links.is-style-logos-only .wp-social-link {
  border-radius: 0;
  color: var(--wp--preset--color--primary);
}
.author-social.wp-block-social-links.is-style-logos-only .wp-social-link svg {
  width: 22px;
  height: 22px;
  fill: none;
  /* Fallback sólido se #grad-brand ausente (canvas sem wp_body_open). */
  stroke: url(#grad-brand) var(--wp--preset--color--primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Core força fill:currentColor no svg/anchor — anular shapes Lucide. */
.author-social.wp-block-social-links.is-style-logos-only .wp-social-link svg path,
.author-social.wp-block-social-links.is-style-logos-only .wp-social-link svg rect,
.author-social.wp-block-social-links.is-style-logos-only .wp-social-link svg circle {
  fill: none;
  stroke: inherit;
}

/* Página Sobre — pilares (grid/outline; tipografia/padding = attrs no pattern).
   Sem !important. Outline = preset outline (= border-color-subtle). */
.sobre-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--wp--preset--color--outline);
  background: var(--wp--preset--color--outline);
}
@media (min-width: 800px) {
  .sobre-pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}
.sobre-pillar {
  outline: 1px solid var(--wp--preset--color--outline);
}
.sobre-pillar__body {
  max-width: 36ch;
}
@media (max-width: 799px) {
  .about-visual {
    max-width: 20rem;
    margin-inline: auto;
  }
}