/* ==========================================================================
   Central de ajuda / Contato — estilos das seções da página (prefixo .ct-)
   Depende de site.css (chrome .lt-: tokens, cabeçalho, botões, rótulos,
   rodapé) e de base.css (.questions do FAQ, motion, cursor, .sr-only).
   Figma: "10 - Suporte" (189:11799).
   ========================================================================== */

/* Seções de largura travada — 1 unidade = 1 px acima de 981 */
@media (min-width: 981px) {
  .ct-hero,
  .ct-paths,
  .ct-contact,
  .ct-faq,
  .lt-footer {
    --lt-u: 1px;
  }
}

/* Título padrão das seções travadas. */
.ct-faq h2 {
  max-width: none;
  font-size: calc(64 * var(--lt-u));
  line-height: 0.92;
}

/* ==========================================================================
   1. Hero — central de ajuda (189:11861)
   ========================================================================== */
/*
 * Hero e caminhos formam um bloco só, em branco, com os cartões em cinza-claro
 * (o menu passou a ser cinza-claro: o topo branco o separa da página). No
 * branco o rótulo fica no cinza padrão do `.lt-label`.
 */
.ct-hero {
  padding: calc(112 * var(--lt-u)) var(--lt-gutter) calc(64 * var(--lt-u));
  background: var(--white);
}

.ct-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28 * var(--lt-u));
  text-align: center;
}

/* H1 de abertura do site (--lt-h1, site.css). */
.ct-hero h1 {
  /* Sempre em duas linhas (fica melhor que numa só): "COMO PODEMOS / TE AJUDAR?": a 1ª linha mede 5,85em, e o teto em em
     acompanha o corpo em qualquer tela. */
  max-width: 6.2em;
  color: var(--black);
  font-size: var(--lt-h1);
  line-height: 0.88;
}

.ct-hero h1 em {
  color: var(--red);
  font-style: normal;
}

/* `pretty` + o "Ou fale" do HTML: nenhuma palavra solta no fim ou começo de linha. */
.ct-hero__lead {
  max-width: calc(620 * var(--lt-u));
  text-wrap: pretty;
  color: var(--gray-600);
  font-size: calc(20 * var(--lt-u));
  line-height: 1.5;
}

/* ==========================================================================
   2. Caminhos — três cartões (189:11886)
   ========================================================================== */
.ct-paths {
  padding: calc(40 * var(--lt-u)) var(--lt-gutter) calc(120 * var(--lt-u));
  background: var(--white);
}

.ct-paths__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cartão cinza-claro sobre o branco; o link desce para o pé e os três ficam da mesma altura. */
.ct-path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(14 * var(--lt-u));
  min-width: 0;
  padding: calc(32 * var(--lt-u));
  background: var(--gray-100);
}

.motion-enabled .ct-path {
  transition-property: opacity, transform, filter, box-shadow;
  transition-duration: var(--lt-entrada-card), var(--lt-entrada-card), var(--lt-entrada-card), 240ms;
  transition-delay: var(--motion-delay, 0ms), var(--motion-delay, 0ms), var(--motion-delay, 0ms), 0ms;
}

.ct-path:hover {
  box-shadow: inset 0 calc(-5 * var(--lt-u)) 0 var(--red);
}

.ct-path__icon {
  display: grid;
  place-items: center;
  width: calc(56 * var(--lt-u));
  height: calc(56 * var(--lt-u));
  margin-bottom: calc(18 * var(--lt-u));
  flex: 0 0 auto;
}

.ct-path__icon img {
  width: calc(24 * var(--lt-u));
  height: calc(24 * var(--lt-u));
}

.ct-path__icon--pink { background: var(--pink-light); }
.ct-path__icon--yellow { background: var(--yellow); }
.ct-path__icon--red { background: var(--red); }

.ct-path h2 {
  max-width: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(22 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
}

.ct-path p {
  color: var(--gray-600);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
}

.ct-path .lt-textlink {
  margin-top: auto;
}

/* ==========================================================================
   3. Falar com a gente — letreiro de fundo e cartão largo (189:11947)
   ========================================================================== */
/*
 * No desenho da candidatura da mentoria: o título vira letreiro sangrado, quase
 * apagado (branco a 10% sobre o preto, cor chapada), colado no topo da seção.
 * Abaixo, o cartão grafite na largura do conteúdo: o texto à esquerda e o
 * formulário num cartão cinza, um nível acima, encostado nas bordas.
 */
.ct-contact {
  position: relative;
  overflow: hidden;
  padding: 0 0 calc(120 * var(--lt-u));
  color: var(--white);
  background: var(--black);
}

/*
 * Colado no topo (as mesmas medidas da mentoria, conferidas no navegador): a
 * tinta da ABC Gravity começa 0,146em abaixo do topo da linha; a fita sobe
 * 0,0882em e a caixa do h2 (0,712em) termina rente à base das letras.
 */
.ct-contact .ct-contact__display {
  display: flow-root;
  height: 0.712em;
  max-width: none;
  margin: 0;
  color: color-mix(in srgb, var(--white) 10%, var(--black));
  font-size: 13.6vw;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  user-select: none;
}

.ct-contact__fita {
  display: flex;
  width: max-content;
  margin-top: -0.0882em;
}

.ct-contact__fila {
  display: flex;
}

/* Espaço no `margin-right` de cada item (não em `gap`), para a emenda fechar. */
.ct-contact__fila i {
  margin-right: 0.28em;
  font-style: normal;
}

.motion-enabled .ct-contact__fita {
  animation: ct-letreiro 50s linear infinite;
}

@keyframes ct-letreiro {
  to {
    transform: translateX(-50%);
  }
}

.ct-contact__inner {
  width: calc(100% - 2 * var(--lt-gutter));
  margin: calc(40 * var(--lt-u)) auto 0;
}

/* Formulário com até 520, e nunca mais da metade do cartão. */
.ct-contact__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(calc(520 * var(--lt-u)), 50%));
  align-items: stretch;
  background: var(--ink);
}

/* Coluna do texto: o topo (40) é o mesmo do primeiro campo do formulário. */
.ct-contact__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: calc(40 * var(--lt-u)) calc(72 * var(--lt-u)) 0 calc(64 * var(--lt-u));
  color: var(--white);
}

.ct-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--lt-u));
  margin: 0 0 calc(28 * var(--lt-u));
  padding: 0;
  list-style: none;
}

.ct-chips li {
  display: inline-flex;
  align-items: center;
  padding: calc(10 * var(--lt-u)) calc(14 * var(--lt-u));
  color: var(--white);
  background: var(--gray-700);
  font-size: calc(12 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ct-chips li:first-child {
  color: var(--black);
  background: var(--yellow);
}

.ct-contact h3 {
  color: var(--white);
  font-family: var(--display);
  font-size: calc(48 * var(--lt-u));
  line-height: 0.95;
}

.ct-contact__text {
  max-width: calc(420 * var(--lt-u));
  margin-top: calc(16 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(16 * var(--lt-u));
  line-height: 1.5;
}

.ct-contact__how {
  margin-top: calc(32 * var(--lt-u));
  color: var(--white);
  font-size: calc(15 * var(--lt-u));
  font-weight: 500;
  line-height: 1.5;
}

.ct-contact__list {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--lt-u));
  margin: calc(16 * var(--lt-u)) 0 0;
  padding: 0;
  list-style: none;
}

.ct-contact__list li {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
}

.ct-contact__list img {
  width: calc(18 * var(--lt-u));
  height: calc(18 * var(--lt-u));
  flex: 0 0 auto;
  margin-top: calc(2 * var(--lt-u));
}

/*
 * Pé da coluna: faixa baixa da malha de quadradinhos da marca (Figma 293:9390),
 * cinza chapado, dentro das margens, presa à base com o mesmo recuo (40).
 */
.ct-contact__padrao {
  align-self: stretch;
  height: calc(40 * var(--lt-u));
  margin: auto 0 calc(40 * var(--lt-u));
  padding-top: calc(40 * var(--lt-u));
  background: url("./assets/pattern-tile-quadradinhos-cinza.svg") 0 0 / calc(10 * var(--lt-u)) calc(10 * var(--lt-u)) repeat;
  background-origin: content-box;
  background-clip: content-box;
  box-sizing: content-box;
}

/* Formulário: cartão cinza (um nível acima do grafite), campos pretos, encostado nas bordas. */
.ct-form {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--lt-u));
  min-width: 0;
  padding: calc(40 * var(--lt-u));
  background: var(--gray-700);
}

.ct-field {
  position: relative;
}

.ct-field img {
  position: absolute;
  top: calc(16 * var(--lt-u));
  left: calc(16 * var(--lt-u));
  width: calc(18 * var(--lt-u));
  height: calc(18 * var(--lt-u));
  pointer-events: none;
}

.ct-field input,
.ct-field textarea {
  display: block;
  width: 100%;
  min-height: calc(50 * var(--lt-u));
  padding: calc(14 * var(--lt-u)) calc(16 * var(--lt-u)) calc(14 * var(--lt-u)) calc(46 * var(--lt-u));
  color: var(--white);
  background: var(--black);
  border: 0;
  border-radius: 0;
  font-family: var(--sans);
  font-size: calc(16 * var(--lt-u));
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}

.ct-field textarea {
  min-height: calc(140 * var(--lt-u));
  resize: vertical;
}

.ct-field input::placeholder,
.ct-field textarea::placeholder {
  color: var(--gray-400);
  opacity: 1;
}

.ct-field input:focus,
.ct-field textarea:focus {
  outline: 3px solid var(--lt-focus-on-dark);
  outline-offset: 0;
}

.ct-form__submit {
  margin-top: calc(8 * var(--lt-u));
}

/* Sobre o cinza o hover preto sumiria: o destaque vira branco. */
.ct-form .lt-btn--accent:hover {
  color: var(--black);
  background-color: var(--white);
}

.ct-form .lt-btn:focus-visible {
  outline-color: var(--lt-focus-on-dark);
}

/* Aviso de dados: o padrão de todos os formulários do site (o da lista de espera do curso). */
.ct-form__note {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--lt-u));
  margin-top: calc(4 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.5;
}

.ct-form__note img {
  width: calc(14 * var(--lt-u));
  height: calc(14 * var(--lt-u));
  flex: 0 0 auto;
  margin-top: calc(3 * var(--lt-u));
}

.ct-form__note strong {
  color: var(--white);
  font-weight: 500;
}

.ct-form__note a {
  color: var(--gray-200);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ct-form__status:empty {
  display: none;
}

.ct-form__status {
  padding: calc(12 * var(--lt-u)) calc(16 * var(--lt-u));
  color: var(--black);
  background: var(--yellow);
  font-size: calc(14 * var(--lt-u));
  font-weight: 500;
  line-height: 1.5;
}

/* ==========================================================================
   4. Perguntas frequentes — central de ajuda por temas (189:12045)
   O <details>/<summary> é o .questions do base.css, nas medidas da caixa.
   ========================================================================== */
.ct-faq {
  padding: calc(120 * var(--lt-u)) var(--lt-gutter);
  background: var(--gray-100);
}

.ct-faq__inner {
  display: flex;
  flex-direction: column;
  gap: calc(56 * var(--lt-u));
}

.ct-faq__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--lt-u));
}

/* Seção cinza: o chip é branco. */
.ct-faq .lt-label {
  background: var(--white);
}

.ct-faq h2 {
  color: var(--black);
}

/*
 * Central de ajuda: os temas são abas de pasta no alto do painel, como as de
 * um arquivo físico. A aba escolhida tem a cor do painel (branco) e se funde
 * com ele; as outras ficam em cinza, atrás. Cantos retos, com o corte em
 * diagonal à direita (o mesmo da etiqueta do mockup da Caixa). Sem JS (sem
 * .is-abas), os grupos aparecem em sequência.
 */
.ct-help {
  display: flex;
  flex-direction: column;
}

.ct-help__temas {
  display: flex;
  align-items: flex-end;
  gap: calc(4 * var(--lt-u));
}

.ct-help__temas[hidden] {
  display: none;
}

.ct-tema {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--lt-u));
  min-width: 0;
  /* Mesmo respiro em cima e do lado (14); os 44 da direita abrem espaço para o corte. */
  padding: calc(14 * var(--lt-u)) calc(44 * var(--lt-u)) calc(14 * var(--lt-u)) calc(14 * var(--lt-u));
  color: var(--gray-700);
  background: var(--gray-200);
  border: 0;
  border-radius: 0;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 28 * var(--lt-u)) 0, 100% 100%, 0 100%);
  transition: background-color 160ms ease, color 160ms ease, padding 200ms ease;
}

.ct-tema:hover {
  color: var(--black);
  background: var(--gray-400);
}

/*
 * A aba escolhida é mais alta e tem a cor do painel: parece estar na frente. A
 * altura a mais vai para baixo (funde com o painel), então o respiro de cima
 * continua igual ao do lado.
 */
.ct-tema[aria-selected="true"] {
  padding-bottom: calc(20 * var(--lt-u));
  color: var(--black);
  background: var(--white);
}

.ct-tema:focus-visible {
  outline: 3px solid var(--lt-focus);
  outline-offset: -3px;
}

.ct-tema__icone {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: calc(36 * var(--lt-u));
  height: calc(36 * var(--lt-u));
}

.ct-tema__icone img {
  width: calc(20 * var(--lt-u));
  height: calc(20 * var(--lt-u));
}

/* Abas fechadas: quadrado preto neutro, traço branco. A cor do tema só aparece na aba aberta. */
.ct-tema__icone {
  background: var(--black);
  transition: background-color 160ms ease;
}

.ct-tema__icone img {
  filter: invert(1);
}

/*
 * Na aba aberta, a cor da área: azul do curso, roxo da Caixa (o #a500ff do
 * caixa.css, não o --purple do base.css), vermelho da mentoria e rosa dos
 * conteúdos gratuitos (institucional).
 */
.ct-tema[aria-selected="true"] .ct-tema__icone--azul { background: var(--blue); }
.ct-tema[aria-selected="true"] .ct-tema__icone--roxo { background: #a500ff; }
.ct-tema[aria-selected="true"] .ct-tema__icone--vermelho { background: var(--red); }
.ct-tema[aria-selected="true"] .ct-tema__icone--rosa { background: var(--pink-light); }

/* No rosa o traço volta a ser preto; no azul, no roxo e no vermelho segue branco. */
.ct-tema[aria-selected="true"] .ct-tema__icone--rosa img {
  filter: none;
}

.ct-tema__texto {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--lt-u));
  min-width: 0;
}

.ct-tema__texto strong {
  font-size: calc(15 * var(--lt-u));
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.ct-tema__texto small {
  color: var(--gray-600);
  font-size: calc(12 * var(--lt-u));
  line-height: 1.25;
  white-space: nowrap;
}

/* Painel: cartão branco com o nome do tema em destaque e as perguntas. */
.ct-help__painel {
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--lt-u));
  min-width: 0;
  /* Mesmo respiro nos quatro lados (48). */
  padding: calc(48 * var(--lt-u));
  background: var(--white);
}

.ct-faq__group[hidden],
.ct-faq .questions details[hidden] {
  display: none;
}

.ct-faq__group:focus {
  outline: none;
}

.ct-faq__group h3 {
  margin-bottom: calc(16 * var(--lt-u));
  color: var(--black);
  font-family: var(--display);
  font-size: calc(40 * var(--lt-u));
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}

/* O fio de cima fica no contêiner das perguntas. */
.ct-faq .questions {
  border-top: 1px solid var(--gray-400);
}

.ct-faq .questions details:first-child {
  border-top: 0;
}

.ct-faq .questions summary {
  height: auto;
  min-height: calc(72 * var(--lt-u));
  gap: calc(24 * var(--lt-u));
  padding: calc(20 * var(--lt-u)) 0;
  color: var(--black);
  font-size: calc(18 * var(--lt-u));
  line-height: 1.45;
}

.ct-faq .questions summary::after {
  width: calc(22 * var(--lt-u));
  height: calc(22 * var(--lt-u));
  flex-basis: auto;
  background-size: contain;
}

.ct-faq .questions summary:focus-visible {
  outline: 3px solid var(--lt-focus);
  outline-offset: 2px;
}

.ct-faq .questions details > p {
  max-width: none;
  padding: 0 calc(40 * var(--lt-u)) calc(24 * var(--lt-u)) 0;
  font-size: calc(16 * var(--lt-u));
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1279px) {
  /* Quatro abas não cabem com a contagem: fica só o nome. */
  .ct-tema__texto small {
    display: none;
  }
}

@media (max-width: 980px) {
  .ct-hero {
    padding-block: 80px 48px;
  }

  .ct-paths {
    padding-block: 24px 80px;
  }

  .ct-paths__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .ct-path__icon {
    margin-bottom: 8px;
  }

  .ct-faq {
    padding-block: 80px;
  }

  .ct-contact {
    padding-bottom: 80px;
  }

  .ct-faq h2 {
    font-size: clamp(40px, 8.4vw, 64px);
  }

  .ct-contact__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-contact__info {
    padding: 40px 32px 0;
  }

  .ct-contact__padrao {
    height: 30px;
    margin-bottom: 32px;
  }

  .ct-faq__inner {
    gap: 40px;
  }

  /* Tablet e celular: as abas rolam para o lado, sangrando a margem. */
  .ct-help__temas {
    margin-right: calc(-1 * var(--lt-gutter));
    padding-right: var(--lt-gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ct-help__temas::-webkit-scrollbar {
    display: none;
  }

  .ct-tema {
    flex: 0 0 auto;
  }

  .ct-help__painel {
    padding: 24px;
  }

  .ct-faq__group h3 {
    font-size: 32px;
  }
}

@media (max-width: 620px) {
  .ct-hero {
    padding-block: 56px 32px;
  }

  .ct-hero__inner {
    gap: 20px;
  }

  .ct-hero__lead {
    font-size: 16px;
  }

  .ct-paths {
    padding-block: 16px 64px;
  }

  .ct-path {
    padding: 24px;
  }

  .ct-faq {
    padding-block: 64px;
  }

  .ct-contact {
    padding-bottom: 64px;
  }

  .ct-faq h2 {
    font-size: clamp(36px, 11.5vw, 48px);
  }

  .ct-contact__info {
    padding: 32px 16px 0;
  }

  .ct-form {
    padding: 24px 16px;
  }

  .ct-contact h3 {
    font-size: 36px;
  }

  .ct-contact__text,
  .ct-contact__list li {
    font-size: 15px;
  }

  .ct-contact__how {
    margin-top: 28px;
  }

  .ct-faq .questions summary {
    font-size: 16px;
  }

  .ct-faq .questions details > p {
    padding-right: 0;
    font-size: 15px;
  }
}