/**
 * editorial-imagery.css — Overrides + utilities para integração das imagens
 * editoriais (Gemini/Nano Banana placeholders) nos componentes existentes.
 *
 * Estratégia: usar :has(img) para detectar quando um componente recebeu uma
 * imagem. O fallback monograma/tipográfico é preservado quando a imagem não
 * existe, de modo que admins possam editar via WP Admin sem quebrar o layout.
 *
 * Todas as imagens vivem em /wp-content/themes/sp/assets/images/placeholders/
 */

/* ═══ UTILITY: object-fit para qualquer <img> editorial ════════════════ */
.editorial-img,
.founder-hero__avatar img,
.founder-grid__avatar img,
.spsf-manifesto__avatar img,
.spsf-about__visual img,
.solution-block__visual img,
.course-item__thumb img,
.problem-inset__image img,
.candid-inset__image img,
.ambient-image img,
.image-bridge img,
.contact-portrait img,
.spsf-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* wp:image sempre envolve <img> em <figure class="wp-block-image">.
 * Por padrão figure tem margin e não preenche o container.
 * Este bloco garante que a figure se comporte como block-fill. */
.problem-inset__image figure,
.candid-inset__image figure,
.spsf-about__visual figure,
.solution-block__visual figure,
.contact-portrait figure,
.course-item__thumb figure,
.spsf-split__media figure {
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ═══ AVATAR MONOGRAM → IMAGEM ════════════════════════════════════════ */
/* .spsf-manifesto__avatar: 48px, homepage + sobre */
.spsf-manifesto__avatar:has(img) {
  padding: 0;
  background: transparent;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.spsf-manifesto__avatar img {
  border-radius: 50%;
}

/* .manifesto-quote__avatar: usado em sobre-raoni */
.manifesto-quote__avatar:has(img) {
  padding: 0;
  background: transparent;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  width: 56px;
  height: 56px;
}
.manifesto-quote__avatar img {
  border-radius: 50%;
}

/* .founder-grid__avatar: 80px, o-conceito */
.founder-grid__avatar:has(img) {
  padding: 0;
  background: transparent;
  overflow: hidden;
  border: 2px solid rgba(15, 82, 186, 0.24);
}
.founder-grid__avatar img {
  border-radius: 50%;
}

/* .founder-hero__avatar: 120px, sobre-raoni */
.founder-hero__avatar:has(img) {
  padding: 0;
  background: transparent;
  overflow: hidden;
  border-width: 3px;
  border-color: rgba(26, 106, 232, 0.35);
}
.founder-hero__avatar img {
  border-radius: 50%;
}

/* ═══ SPSF-ABOUT__VISUAL (O Espaço — home) ════════════════════════════ */
.spsf-about__visual:has(img) {
  padding: 0;
  /* Sobrescreve display:flex do original para que a figure/img preencha */
  display: block !important;
}
.spsf-about__visual:has(img) .spsf-about__visual-num,
.spsf-about__visual:has(img) .spsf-about__visual-label {
  display: none;
}
.spsf-about__visual img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══ SOLUTION-BLOCK__VISUAL (Soluções) ═══════════════════════════════ */
.solution-block__visual:has(img) {
  padding: 0;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  /* A imagem ocupa o topo; o includes-list vai abaixo — precisa de flex-col */
  display: flex !important;
  flex-direction: column;
  gap: 0;
}
/* A figure fica no topo ocupando ~60% da altura do card */
.solution-block__visual figure {
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}
.solution-block__visual figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* A lista de includes (se houver) fica abaixo da imagem com padding */
.solution-block__visual:has(img) .solution-block__includes-title,
.solution-block__visual:has(img) .solution-block__includes {
  padding: var(--sp-5) var(--sp-6);
}
.solution-block__visual:has(img) .solution-block__includes-title {
  padding-bottom: 0;
}
/* Overlay sutil para manter legibilidade quando houver captions dentro */
.solution-block__visual--with-overlay:has(img)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0) 40%,
    rgba(13, 13, 13, 0.55) 100%
  );
  pointer-events: none;
}

/* ═══ COURSE-ITEM → slot opcional de thumbnail ════════════════════════ */
.course-item__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.course-item__thumb img {
  transition: transform 900ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.course-item:hover .course-item__thumb img {
  transform: scale(1.03);
}

/* ═══ INSET EDITORIAL (problema duotone / candid) ═════════════════════ */
/* !important necessário para sobrescrever display do wp-block-group quando
 * Gutenberg injecta estilos de layout via classes dinâmicas. */
.problem-inset,
.candid-inset {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-10);
  align-items: center;
  margin-top: var(--sp-8);
}
@media (max-width: 768px) {
  .problem-inset,
  .candid-inset {
    grid-template-columns: 1fr !important;
    gap: var(--sp-6);
  }
}
.problem-inset--reverse,
.candid-inset--reverse {
  direction: rtl;
}
.problem-inset--reverse > *,
.candid-inset--reverse > * {
  direction: ltr;
}
.problem-inset__image,
.candid-inset__image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--color-surface-dark);
}
.candid-inset__image {
  background: var(--color-secondary);
}

/* ═══ SPLIT-SCREEN: texto + media lado a lado ═════════════════════════ */
.spsf-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}
@media (max-width: 900px) {
  .spsf-split {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}
.spsf-split__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.spsf-split__media--wide {
  aspect-ratio: 16 / 9;
}

/* ═══ IMAGE BRIDGE: strip cinematográfica entre seções ════════════════ */
/* Altura explícita (não aspect-ratio): mais confiável quando o único filho
 * é position:absolute e não contribui ao flow do container. */
.image-bridge {
  position: relative;
  overflow: hidden;
  height: clamp(200px, 35vw, 480px);
  background: var(--color-surface-dark);
}
.image-bridge figure {
  position: absolute;
  inset: 0;
  margin: 0;
  display: block;
}
.image-bridge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9);
}
.image-bridge::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0.4) 0%,
    rgba(13, 13, 13, 0) 30%,
    rgba(13, 13, 13, 0) 70%,
    rgba(13, 13, 13, 0.6) 100%
  );
  pointer-events: none;
}
@media (max-width: 768px) {
  .image-bridge {
    height: clamp(160px, 50vw, 300px);
  }
}

/* ═══ AMBIENT IMAGE (underlay, opacity baixa) ═════════════════════════ */
.ambient-image {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.ambient-image img {
  opacity: 0.15;
  mix-blend-mode: luminosity;
  filter: saturate(0.7);
}
.has-ambient {
  position: relative;
}
.has-ambient > *:not(.ambient-image) {
  position: relative;
  z-index: 1;
}

/* ═══ PAGE-HERO com background image (sobre/cursos/solucoes/contato) ══
 * Abordagem: imagem absolutamente posicionada como filho DOM real (<img>),
 * não via ::before + CSS custom property. Isso evita conflito com o
 * background sólido de .page-hero e funciona independente do kses do WP.
 * ════════════════════════════════════════════════════════════════════════ */
.page-hero--with-bg {
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding-top: var(--sp-20) !important;
  padding-bottom: var(--sp-20) !important;
}

/* Div absolutamente posicionada que contém a imagem de fundo */
.page-hero__bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none;
  margin: 0 !important;
  padding: 0 !important;
}
.page-hero__bg figure {
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Filtro: imagem visível com contraste suficiente para texto */
  filter: brightness(0.65) saturate(0.85);
}

/* Overlay de gradiente sobre a imagem, abaixo do texto */
.page-hero--with-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0.30) 0%,
    rgba(13, 13, 13, 0.50) 55%,
    rgba(13, 13, 13, 0.75) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Conteúdo do hero fica acima da imagem e do overlay */
.page-hero--with-bg .spsf-container {
  position: relative;
  z-index: 2;
}

/* ═══ CONTACT PORTRAIT (coluna direita da página /contato) ════════════ */
.contact-portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: var(--sp-6);
}

/* ═══ SR-ONLY: quando substituímos monograma por imagem mas mantemos
 * o texto para leitores de tela ═══════════════════════════════════════ */
.spsf-manifesto__avatar:has(img) .sr-only,
.manifesto-quote__avatar:has(img) .sr-only,
.founder-grid__avatar:has(img) .sr-only,
.founder-hero__avatar:has(img) .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}