/**
 * AC | Text Intro — estilos frontend.
 * Tokens do Figma Frame 76:
 *   - Subheader/lg: Raleway Bold 16px / 120% / upper / tracking 20% / #774900
 *   - Heading/H3:   Raleway Bold 24px / 120% / #033936
 *   - Body/md/400:  Arial 400 16px / 160% / #404040
 *   - Gap: 8px coluna
 */

.ac-text-intro {
  --ac-ti-color-subheader: #774900;
  --ac-ti-color-title: #033936;
  --ac-ti-color-body: #404040;

  position: relative;
}
/* padding top/bottom independentes (tokens DS). */
.ac-text-intro--pt-0  { padding-top: 0; }
.ac-text-intro--pt-24 { padding-top: 24px; }
.ac-text-intro--pt-32 { padding-top: 32px; }
.ac-text-intro--pt-40 { padding-top: 40px; }
.ac-text-intro--pt-48 { padding-top: 48px; }
.ac-text-intro--pt-56 { padding-top: 56px; }
.ac-text-intro--pt-80 { padding-top: 80px; }
.ac-text-intro--pb-0  { padding-bottom: 0; }
.ac-text-intro--pb-24 { padding-bottom: 24px; }
.ac-text-intro--pb-32 { padding-bottom: 32px; }
.ac-text-intro--pb-40 { padding-bottom: 40px; }
.ac-text-intro--pb-48 { padding-bottom: 48px; }
.ac-text-intro--pb-56 { padding-bottom: 56px; }
.ac-text-intro--pb-80 { padding-bottom: 80px; }

.ac-text-intro__inner {
  position: relative;
  max-width: var(--container-max, 1104px);
  margin-inline: auto;
  padding-inline: var(--space-4, 16px);
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

/* Borda superior opcional (1px #B2B2B2), 16px acima do conteúdo. */
.ac-text-intro--top-border .ac-text-intro__inner {
  border-top: 1px solid #B2B2B2;
  padding-top: 16px;
}

/* Ícone opcional no topo (seções de Etapa). 48×48, cor via --ac-ti-color-title
 * só quando recolorido (iconColor → currentColor); senão usa o stroke do SVG. */
.ac-text-intro__icon {
  flex: 0 0 48px;
  display: block;
  width: 48px;
  height: 48px;
  line-height: 0;
}
.ac-text-intro__icon svg { width: 48px; height: 48px; display: block; }

/* Cabeçalho com ícone ao lado: [ícone] [subheader + título]. */
.ac-text-intro__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ac-text-intro__head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ac-text-intro .ac-text-intro__subheader {
  margin: 0 !important;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac-ti-color-subheader);
}

.ac-text-intro .ac-text-intro__subheader--normal {
  font-weight: 400;
}

.ac-text-intro .ac-text-intro__title {
  margin: 0 !important;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ac-ti-color-title);
}

.ac-text-intro .ac-text-intro__title--32 {
  font-size: 32px;
}

@media (max-width: 768px) {
  .ac-text-intro .ac-text-intro__title--32 {
    font-size: 24px;
  }
}

.ac-text-intro .ac-text-intro__text {
  margin: 0 !important;
  max-width: 680px;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ac-ti-color-body);
  /* Corridas longas grudadas por   (ex.: "cirurgia, radioterapia, …")
   * não podem forçar a largura além da coluna no mobile → quebra/clip. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.ac-text-intro .ac-text-intro__text--full {
  max-width: none;
}

/* Espaçamento entre "parágrafos": o corpo é um RichText de 1 campo (<p>), então
 * as quebras viram <br>. Em vez do gap duplo do <br><br> (≈2 linhas, quebrava a
 * altura), cada <br> vira um bloco com margem controlada (~0.8em) — 1 Enter já
 * dá um respiro de parágrafo; 2 Enters não estouram. Front + editor. */
.ac-text-intro .ac-text-intro__text br {
  content: "";
  display: block;
  margin-top: 0.8em;
}

/* Tamanho de fonte do corpo configurável (default 16px). Em em pro espaçamento
 * entre parágrafos acompanhar. Vale pro corpo E pro text-after (mesma classe). */
.ac-text-intro--text-12 .ac-text-intro__text { font-size: 12px; }
.ac-text-intro--text-14 .ac-text-intro__text { font-size: 14px; }
.ac-text-intro--text-18 .ac-text-intro__text { font-size: 18px; }
.ac-text-intro--text-20 .ac-text-intro__text { font-size: 20px; }

/* Link inline dentro do corpo (core/link) — sublinhado, herda a cor do texto. */
.ac-text-intro .ac-text-intro__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ac-text-intro .ac-text-intro__text a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* Lista com marcadores (showList). */
.ac-text-intro .ac-text-intro__list {
  margin: 0 !important;
  padding-left: 20px;
  max-width: 680px;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ac-ti-color-body);
}
.ac-text-intro .ac-text-intro__list li { margin-bottom: 8px; }

.ac-text-intro__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* 16 + o gap de 8px do __inner = 24px de respiro do texto acima. */
  margin-top: 16px;
}

/* Zona de conteúdo extra (parágrafo / lista / CTA via InnerBlocks). Block-flow
 * vertical pra os blocos empilharem; o CTA segue com a pílula hug. */
.ac-text-intro__content-blocks {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.ac-text-intro__content-blocks > * { margin: 0; }
.ac-text-intro__content-blocks p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #404040;
}
.ac-text-intro__content-blocks ul { list-style: disc; }
.ac-text-intro__content-blocks ol { list-style: decimal; }
.ac-text-intro__content-blocks ul,
.ac-text-intro__content-blocks ol {
  padding-left: 20px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #404040;
}
.ac-text-intro__content-blocks li { margin-bottom: 8px; }

/* Lista de estatísticas inline (stat-list embutido no text-intro). */
.ac-text-intro__stat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 3px solid #F6A71C;
  padding-left: 16px;
  margin-top: 8px;
}

.ac-text-intro__stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ac-text-intro__stat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid #d9d9d9;
  border-radius: 9999px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.2;
  color: #404040;
  white-space: nowrap;
  flex-shrink: 0;
}

.ac-text-intro__stat-label {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #242424;
}

/* Thumbnail opcional (organograma, diagrama, imagem de apoio). */
.ac-text-intro__thumb-wrap {
  margin-top: 24px;
}

.ac-text-intro__thumb {
  position: relative;
  display: inline-block;
  width: 340px;
  max-width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  box-shadow: 0 12px 16px -2px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  cursor: pointer;
}

/* Thumb-link (abre o diagrama interativo em nova aba): sem estilo de link do tema legado. */
.ac-text-intro__thumb--link,
.ac-text-intro__thumb--link:hover,
.ac-text-intro__thumb--link:focus {
  text-decoration: none;
  color: inherit;
}

.ac-text-intro__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: #f6f7f9;
  cursor: default;
}

.ac-text-intro__thumb-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

/* Zoom: visível por padrão, sem hover no botão em si (o clique é na thumb inteira). */
.ac-text-intro__thumb-zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 36px;
  color: #ffffff;
  pointer-events: none;
  transition: background 0.2s;
}

.ac-text-intro__thumb:hover .ac-text-intro__thumb-zoom {
  background: rgba(0, 0, 0, 0.55);
}

/* Lightbox */
.ac-ti-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
}

.ac-ti-lightbox.is-open {
  display: flex;
}

.ac-ti-lightbox__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 92vh;
}

.ac-ti-lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

/* Botão fechar: círculo branco fixo no canto superior direito do overlay */
.ac-ti-lightbox__close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #242424;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: background 0.2s, transform 0.15s;
  z-index: 10000;
}

.ac-ti-lightbox__close:hover {
  background: #f0f2f5;
  transform: scale(1.1);
}

/* Quando dentro de ac-section, neutraliza só o gutter/largura — a section.inner
 * já constrange ao grid (1104px) e provê o padding-inline. O padding-y PRÓPRIO
 * é PRESERVADO: a section é apenas um wrapper visual (bg + largura), e quem dita
 * o ritmo vertical são os blocos filhos. Assim uma section única pode envolver
 * vários blocos mantendo o respiro entre eles. */
.ac-section .ac-text-intro__inner {
  padding-inline: 0 !important;
  max-width: none !important;
  margin-inline: 0 !important;
}