/**
 * AC | Hero — estilos frontend.
 * Tokens baseados no Figma: AC Camargo — Website (Copy).
 */

#block-accamargo-shift-page-title,
[id^="block-accamargo-shift-"][id*="page-title"],
[id^="block-accamargo-shift-"][id*="local-tasks"],
[id^="block-accamargo-shift-"][id*="tabs"],
.block-page-title-block,
.block-local-tasks-block,
[data-drupal-nav-primary-tabs],
ul.page-tabs,
ul.primary-tab,
ul.secondary-tab,
nav.tabs,
ul.tabs,
.node__meta,
.submitted {
  display: none !important;
}

.ac-hero {
  --ac-hero-bg: #F0F2F5;
  --ac-color-eyebrow: #774900;
  --ac-color-title: #033936;
  --ac-color-body: #404040;

  position: relative;
  padding-inline: 0;
  background-color: var(--ac-hero-bg);
  overflow: hidden;
}

/* Hero default (half): a mancha da imagem SEMPRE sobressai pra baixo (DS) — não
 * é recortada na base do hero. Recorta topo + laterais na borda do hero (evita
 * vazar por cima do header e scroll lateral) mas deixa a base sangrar por cima
 * da seção seguinte (z-index). text-wide e search têm tratamento próprio. */
.ac-hero--default:not(.ac-hero--text-wide) {
  overflow: visible;
  overflow-x: clip;
  clip-path: inset(0 0 -600px 0);
  /* z-index 4: acima da seção seguinte mesmo quando ela é uma `ac-section` com
   * mancha-overflow (z-index:3) — senão a section subiria por cima e taparia a
   * base da mancha do hero. O hero é o topo da página, sempre ganha do que vem
   * abaixo. */
  z-index: 4;
}

/* Padding top/bottom independentes (tokens DS). Aplicado no `__content` (NÃO no
 * `.ac-hero`): o respiro do hero vem do conteúdo, não da seção externa — assim a
 * imagem/mancha não fica acoplada ao padding da seção. */
.ac-hero--pt-0  .ac-hero__content { padding-top: 0; }
.ac-hero--pt-24 .ac-hero__content { padding-top: 24px; }
.ac-hero--pt-32 .ac-hero__content { padding-top: 32px; }
.ac-hero--pt-40 .ac-hero__content { padding-top: 40px; }
.ac-hero--pt-48 .ac-hero__content { padding-top: 48px; }
.ac-hero--pt-56 .ac-hero__content { padding-top: 56px; }
.ac-hero--pt-80 .ac-hero__content { padding-top: 80px; }
.ac-hero--pb-0  .ac-hero__content { padding-bottom: 0; }
.ac-hero--pb-24 .ac-hero__content { padding-bottom: 24px; }
.ac-hero--pb-32 .ac-hero__content { padding-bottom: 32px; }
.ac-hero--pb-40 .ac-hero__content { padding-bottom: 40px; }
.ac-hero--pb-48 .ac-hero__content { padding-bottom: 48px; }
.ac-hero--pb-56 .ac-hero__content { padding-bottom: 56px; }
.ac-hero--pb-80 .ac-hero__content { padding-bottom: 80px; }

/* Ícone decorativo perto do título (target/logo/etc). */
.ac-hero .ac-hero__title-icon {
  display: inline-flex !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 0 8px 0 !important;
  line-height: 0 !important;
}
.ac-hero .ac-hero__title-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.ac-hero__inner {
  position: relative;
  max-width: var(--container-max, 1104px);
  margin-inline: auto;
  padding-inline: var(--space-4, 16px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Variante SEARCH (corpo clínico, Figma 613:6859): texto preenche (~700, ~3
 * linhas) + caixa de imagem fixa 350px à direita; a mancha-img é 430×411 e
 * sangra pra CIMA (~-116, batendo o margin-top), centralizada sobre a caixa. */
.ac-hero--search .ac-hero__inner {
  grid-template-columns: 1fr 350px;
  align-items: end;
}
.ac-hero--search .ac-hero__media .ac-mancha-img {
  width: 430px;
  max-width: none;
  aspect-ratio: 430 / 411;
  /* É flex item de .ac-hero__media (display:flex): sem isto encolhe pra 350. */
  flex: none;
}

.ac-hero--compact .ac-hero__inner {
  grid-template-columns: 1fr;
}

/* Texto largo (sem form): texto ~700px + coluna 350. Espelha EXATAMENTE o DS
 * (node 2472:13617 — "Governança"): a "window" (Mancha-wrapper) é FIXA 350×180 e
 * a Mancha-img 430×411 é ABSOLUTA em `x:-41 / y:-116` relativa à window —
 * INDEPENDENTE da altura do texto/CTA (resolve o bug de o CTA esticar a linha).
 * A imagem vaza ~116px pra CIMA (mostra as cabeças inteiras) e ~115px pra BAIXO
 * (sangra na seção seguinte). **NÃO recorta o topo** — o `clip-path: inset(0 ...)`
 * antigo cortava o topo na borda da window e comia as cabeças (bug do print).
 * Com o hero em `overflow-y: visible` + `z-index:2` a base sangra por cima da
 * seção de baixo; `overflow-x: clip` evita scroll lateral. */
/* Tratamento DESKTOP do text-wide. No mobile NÃO se aplica — o hero empilha e
 * usa a mancha inteira normal (senão a img 430px absoluta cortaria no mobile). */
@media (min-width: 769px) {
  .ac-hero--text-wide {
    overflow: visible;
    overflow-x: clip;
    /* Recorta SÓ o topo na BORDA do hero: a mancha não cruza pra cima do hero
     * (some no breadcrumb → fica "por baixo"), mas a área de padding-top do
     * hero segue mostrando as cabeças. Base livre (-600) pra NÃO cortar o
     * __pattern (fantasma, deslocado +8% pra baixo) com uma linha reta — o
     * sangramento da base é capado pela própria extensão natural da mancha
     * (controlado pelo `top` da img + paddingBottom do hero). Igual default half. */
    clip-path: inset(0 0 -600px 0);
    position: relative;
    /* z-index 4: ganha da `ac-section` com mancha-overflow (z-index:3) abaixo. */
    z-index: 4;
  }
  .ac-hero--text-wide .ac-hero__inner {
    grid-template-columns: 1fr 350px;
    align-items: center;
  }
  /* Window do DS: 350 (coluna do grid) × 180, centrada verticalmente na linha. */
  .ac-hero--text-wide .ac-hero__media {
    position: relative;
    align-self: center;
    height: 180px;
    min-height: 0;
    margin-top: 0;
    overflow: visible;
  }
  /* Mancha-img: offsets exatos do DS (x:-41 / y:-116). */
  .ac-hero--text-wide .ac-hero__media .ac-mancha-img {
    position: absolute;
    top: -148px;
    left: -41px;
    transform: none;
    width: 430px;
    max-width: none;
    height: 411px;
    aspect-ratio: auto;
    flex: none;
  }

  /* Default (half): a mancha-img (604×576) NÃO pode respeitar o padding-y de 56px
   * da seção — ela fura o padding (clipa no topo pelo clip-path do hero) e sangra
   * embaixo, na seção seguinte. O texto mantém os 56px. Posição absoluta ancorada
   * pela base: `bottom` negativo = 56 (padding) + sangramento desejado, então o
   * quanto vaza pra baixo é FIXO, independente da altura do texto. */
  /* O conteúdo (texto + CTAs) ocupa a LARGURA INTEIRA do inner — senão fica
   * preso a 1 coluna (~506px) e CTAs `base` (largos) não cabem e quebram em
   * coluna. A imagem sai do fluxo (abaixo) e deixa de espremer o texto. */
  .ac-hero--default:not(.ac-hero--text-wide):not(.ac-hero--search) .ac-hero__content {
    grid-column: 1 / -1;
    /* Cap de largura do texto: ocupa o fluxo inteiro (pros CTAs caberem) mas o
     * corpo não estica até embaixo da imagem — alinhado à esquerda. */
    max-width: 528px;
    position: relative;
    z-index: 1;
  }
  /* Imagem ABSOLUTA ancorada na grid-area da coluna 2 (`grid-column:2; inset:0`):
   * o containing block vira a célula direita (mesma geometria de quando era
   * `1fr 1fr`), então a mancha-img (left:50% + top:-124/bottom:-80) fica no MESMO
   * tamanho e posição de antes — só não reserva mais espaço no fluxo. */
  .ac-hero--default:not(.ac-hero--text-wide):not(.ac-hero--search) .ac-hero__media {
    position: absolute;
    grid-column: 2;
    grid-row: 1;
    inset: 0;
    margin-top: 0;
    overflow: visible;
  }
  .ac-hero--default:not(.ac-hero--text-wide):not(.ac-hero--search) .ac-hero__media .ac-mancha-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -60px;
    bottom: -40px;
    height: auto;
    width: 604px;
    max-width: none;
    aspect-ratio: auto;
    flex: none;
  }
}


/* Layout vertical do conteúdo. Não usamos `gap` no container porque o
 * espaçamento entre elementos varia (16px padrão, 24px antes dos CTAs).
 * !important porque o tema legado injeta margens em headings/parágrafos. */
.ac-hero .ac-hero__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin: 0 !important;
  /* Só reseta o padding HORIZONTAL do tema legado — o vertical vem dos tokens
   * `.ac-hero--pt-N`/`--pb-N .ac-hero__content` (padding do hero mora aqui). */
  padding-inline: 0 !important;
}
.ac-hero .ac-hero__eyebrow      { margin: 0 !important; }
.ac-hero .ac-hero__title        { margin: 16px 0 0 0 !important; }
.ac-hero .ac-hero__description  { margin: 16px 0 0 0 !important; }

.ac-hero__eyebrow {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  color: var(--ac-color-eyebrow);
  text-transform: uppercase;
}

.ac-hero__title {
  font-family: 'Raleway', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ac-color-title);
  margin: 0;
}

.ac-hero__description {
  font-family: 'Arial', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ac-color-body);
  margin: 0;
}

.ac-hero__description--md { font-size: 16px; }
.ac-hero__description--sm { font-size: 14px; }

/* IconButton Filled / base / Color=Secondary — design system AC.Camargo.
 * !important usado de propósito: o tema legado (mahi_facelift) aplica cores
 * de marca em <a> dentro de .field/.body e sobrescreve nossas regras. */
.ac-hero .ac-hero__social {
  display: flex !important;
  gap: 8px !important;
  margin: 24px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.ac-hero .ac-hero__social-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background-color: #E2E5E9 !important;
  background-image: none !important;
  color: #242424 !important;
  border: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s, color 0.2s;
}

.ac-hero .ac-hero__social-btn svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  stroke: #242424 !important;
  color: #242424 !important;
  fill: none;
}

/* WhatsApp usa fill, não stroke. */
.ac-hero .ac-hero__social-btn[aria-label*="WhatsApp"] svg {
  fill: #242424 !important;
  stroke: none !important;
}

/* Botão de copiar link (button, não <a>): mantém aparência do social-btn. */
.ac-hero .ac-hero__social-btn--copy {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
}
/* Tooltip "Link copiado!" — aparece quando .is-copied é adicionado via JS. */
.ac-hero .ac-hero__social-btn--copy::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #242424;
  color: #FFFFFF;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}
.ac-hero .ac-hero__social-btn--copy.is-copied::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ac-hero .ac-hero__social-btn:hover {
  background-color: #606060 !important;
  color: #ffffff !important;
}
.ac-hero .ac-hero__social-btn:hover svg { stroke: #ffffff !important; color: #ffffff !important; }
.ac-hero .ac-hero__social-btn[aria-label*="WhatsApp"]:hover svg { fill: #ffffff !important; }

.ac-hero .ac-hero__ctas {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 24px 0 0 0 !important;
  padding: 0 !important;
}

.ac-hero__media {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: -120px;
  align-self: stretch;
}

.ac-hero__image {
  width: 100%;
  max-width: 604px;
  aspect-ratio: 604 / 576;
  height: auto;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* NOTA: os estilos .ac-mancha-img* foram movidos pra css/ac-mancha-img.css
 * (compartilhado entre hero e big-img). A library ac_hero inclui aquele arquivo. */

.ac-hero__media-placeholder {
  width: 100%;
  max-width: 604px;
  aspect-ratio: 604 / 576;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F6F7F9;
  color: #808080;
  font-size: 14px;
  text-align: center;
  padding: 16px;
  border-radius: 8px;
}

/* --- Mancha decorativa (background blob) ---
 * Posicionada absolutamente atrás do conteúdo, sem capturar cliques. */
/* Mancha decorativa de fundo (Decoração): shape 1–10 + posição livre.
 * left/top/width vêm inline (RangeControl); altura via aspect-ratio da mancha. */
.ac-hero { position: relative; }
.ac-hero__bg-mancha {
  position: absolute;
  z-index: 0;
  aspect-ratio: 320 / 420;
  pointer-events: none;
}
.ac-hero__bg-mancha-fill {
  position: absolute;
  inset: 0;
  background-color: var(--ac-hero-blob-fill, #FFD16C);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.ac-hero__bg-mancha-stroke {
  position: absolute;
  inset: 0;
  line-height: 0;
  color: var(--ac-hero-blob-stroke, #F6A71C);
}
.ac-hero__bg-mancha-stroke svg { width: 100%; height: 100%; display: block; }
.ac-hero__bg-mancha-stroke svg path { fill: none; }
.ac-hero__bg-mancha--verde { --ac-hero-blob-fill: #D7F9D3; --ac-hero-blob-stroke: rgba(14, 82, 54, 0.5); }
.ac-hero--blob .ac-hero__inner { position: relative; z-index: 1; }

/* --- Variação search (form de busca) ---
 * Estrutura: 2 linhas
 *   row 1: 2 selects lado a lado (flex: 1 cada)
 *   row 2: input ocupa o espaço restante + botão 103×40 pill à direita
 */
.ac-hero--search .ac-hero__search {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 24px 0 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 680px !important;
}
.ac-hero--search .ac-hero__search-row {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}
.ac-hero--search .ac-hero__search-row--selects > .ac-hero__search-field {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.ac-hero--search .ac-hero__search-row--submit > .ac-hero__search-field--text {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Campo (wrapper de input/select) — visual idêntico nos 2 layouts. */
.ac-hero--search .ac-hero__search-field {
  display: flex !important;
  align-items: center !important;
  background: #FFFFFF !important;
  border: 1px solid #D5D7DA !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  height: 40px !important;
  font-family: 'Arial', sans-serif !important;
  font-size: 14px !important;
  color: #606060 !important;
  position: relative !important;
}

/* Select nativo: removemos o caret do browser e desenhamos um custom via background-image.
 * Apenas UMA seta visível (sem duplicação). */
.ac-hero--search .ac-hero__search-field select {
  flex: 1 !important;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  font: inherit !important;
  color: inherit !important;
  padding: 0 24px 0 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23606060' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
}
.ac-hero--search .ac-hero__search-field input {
  flex: 1 !important;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  font: inherit !important;
  color: inherit !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.ac-hero--search .ac-hero__search-field input::placeholder {
  color: #606060 !important;
  opacity: 1 !important;
}

/* Botão pill 103x40 — bem alinhado com a altura do input. */
.ac-hero--search .ac-hero__search-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 103px !important;
  width: 103px !important;
  height: 40px !important;
  background: #0E5236 !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 36px !important;
  padding: 0 !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.ac-hero--search .ac-hero__search-btn:hover {
  background: #0a3e29 !important;
}

/* Acessibilidade: label visualmente escondida, mas acessível a leitores de tela. */
.ac-hero--search .visually-hidden {
  position: absolute !important;
  clip: rect(0 0 0 0) !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --- Responsivo ---
 * Breakpoint mobile no Figma é ~430px (frame 393), mas a transição
 * de grid para stack pode acontecer cedo (1024px) por causa do volume de texto. */

/* Tablet: reduz gap horizontal entre texto e imagem. */
@media (max-width: 1024px) {
  .ac-hero__inner {
    gap: 32px;
  }
}

/* Mobile (Figma frame 393px). */
@media (max-width: 768px) {
  /* Padding vertical via tokens pt/pb (fixos, igual aos outros blocos). */
  .ac-hero__inner {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    position: relative !important;
  }
  /* Remover padding top/bottom no mobile (toggles paddingTopMobileNone /
   * paddingBottomMobileNone). */
  .ac-hero--pt-mobile-0 .ac-hero__content { padding-top: 0 !important; }
  .ac-hero--pb-mobile-0 .ac-hero__content { padding-bottom: 0 !important; }
  /* Mancha decorativa de fundo: opção de esconder no mobile (Decoração). */
  .ac-hero__bg-mancha--hide-mobile { display: none !important; }
  .ac-hero .ac-hero__content { position: relative !important; z-index: 2 !important; }
  .ac-hero .ac-hero__title { font-size: 28px !important; line-height: 1.2 !important; }
  .ac-hero .ac-hero__eyebrow { font-size: 14px !important; }
  .ac-hero .ac-hero__description--md { font-size: 14px !important; }
  .ac-hero .ac-hero__title-icon { width: 32px !important; height: 32px !important; }

  /* Mobile: imagem vai FULL-BLEED (100vw — estoura padding do bloco,
   * do tema legado, do wrapper Gutenberg, qualquer container) e sobrepõe
   * o CTA/share-icons. Truque clássico: width: 100vw + margin lateral
   * calc(50% - 50vw) ignora qualquer constraint de largura do ancestral. */
  .ac-hero__media {
    min-height: auto !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    position: relative !important;
    z-index: 1 !important;
    transform: none !important;
  }
  .ac-hero__image, .ac-hero__media-placeholder {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* Mancha mobile: extrapola lateralmente ~15% pra cada lado (proporção
   * 534x458 do Figma — maior que a viewport, mantendo aspect-ratio). */
  .ac-hero__media .ac-mancha-img {
    width: 130vw !important;
    max-width: 130vw !important;
    margin-left: -15vw !important;
    margin-right: -15vw !important;
  }

  /* Imagem ABAIXO do texto: sobe ~110px para passar por trás do CTA e
   * tocar a linha dos share-icons (mais próximo do Figma frame 393). */
  .ac-hero--media-mobile-bottom .ac-hero__media {
    order: 1 !important;
    margin-top: var(--ac-hero-media-mobile-offset, -103px) !important;
  }
  /* Imagem ACIMA do texto: extrapola pra cima (margin-top fixo) e o offset
   * controla o margin-BOTTOM = espaçamento pro texto abaixo (negativo = sobrepõe,
   * positivo = afasta). Assim o slider controla o gap imagem↔texto nas 2 posições. */
  .ac-hero--media-mobile-top .ac-hero__media {
    order: -1 !important;
    margin-top: -80px !important;
    margin-bottom: var(--ac-hero-media-mobile-offset, -40px) !important;
  }

  /* text-wide no mobile (Figma): a mancha quase ENCOSTA nas bordas (~100vw,
   * IGNORA o padding do inner) e tem o TOPO cortado (igual desktop), preservando
   * as cabeças. NÃO usa o 130vw (cortava as laterais) nem contém no inner
   * (ficava pequena). `clip-path: inset(0 0 -600px 0)` no __media recorta só o
   * topo (puxado pela margin negativa da img) e deixa a base LIVRE pra não cortar
   * o __pattern fantasma. O `margin-top` negativo controla quanto do topo corta. */
  .ac-hero--text-wide .ac-hero__media {
    clip-path: inset(0 0 -600px 0) !important;
  }
  .ac-hero--text-wide .ac-hero__media .ac-mancha-img {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-top: -48px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .ac-hero--text-wide.ac-hero--media-mobile-top .ac-hero__media {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }
  .ac-hero--text-wide.ac-hero--media-mobile-bottom .ac-hero__media {
    margin-top: 24px !important;
  }


  /* Search variant (mock do editor): só os 2 selects empilham; o input de nome
     + botão Buscar ficam na MESMA linha (igual ao front). */
  .ac-hero--search .ac-hero__search { max-width: 100% !important; }
  .ac-hero--search .ac-hero__search-row--selects {
    flex-direction: column !important;
    align-items: stretch !important;
  }

}