/* ==========================================================================
   Caixa de Ferramentas — estilos das seções da página (prefixo .cx-)
   Depende de site.css (chrome .lt-) e de base.css (.faq, motion, cursor).
   ========================================================================== */

/*
 * Camada de cor da Caixa (tokens de site.css): roxo #a500ff (o do logo) como
 * cor forte, laranja #ff7900 como destaque, cinzas. Texto sobre roxo é branco;
 * sobre laranja, preto. Substitui o verde/azul herdado do curso (2026-09-24).
 */
:root {
  --lt-product-line: var(--cx-roxo);   /* filete do logo da Caixa no menu */
  --cx-roxo: #a500ff;           /* roxo da Caixa (logo, Figma 824:363); o --purple de base.css é outro */
  --cx-laranja: var(--orange);  /* laranja da Caixa: destaque (botões, filetes, marcações), texto preto */
  --lt-accent: var(--cx-laranja);
  --lt-strong: var(--cx-roxo);
  --lt-current: var(--cx-roxo);
  --lt-focus: var(--cx-roxo);
  --lt-focus-on-dark: var(--cx-laranja);
  --lt-link-hover: var(--cx-roxo);
  --lt-link-hover-line: currentColor;
  --lt-dark-hover-bg: var(--cx-roxo);
  --lt-dark-hover-ink: var(--white);
  --lt-dark-hover-icon: none;
  --lt-skip-bg: var(--cx-roxo);
}

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

/* ==========================================================================
   1. Hero — hub, no roxo da Caixa com a composição de padrões da marca
   ========================================================================== */
/*
 * Fundo roxo da Caixa, altura pelo conteúdo (texto branco; o destaque do
 * título em preto — o laranja some no roxo). No pé, de borda a borda, a
 * composição de padrões oficial da marca, inteira, em cores chapadas.
 */
.cx-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--white);
  background: var(--cx-roxo);
}

.cx-hero__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(28 * var(--lt-u));
  width: min(100%, calc(1240 * var(--lt-u)));
  margin-inline: auto;
  /*
   * Altura pelo conteúdo (não mais tela cheia). Topo e vão até a malha 20% menores
   * que antes (em 1440x900: 89 → 71 e 76 → 61), proporcionais à altura da tela.
   */
  padding: clamp(40px, 7.9svh, 104px) calc(48 * var(--lt-u)) clamp(32px, 6.8svh, 92px);
  text-align: center;
}

.cx-hero .lt-label {
  background: var(--white);
}

/* H1 de abertura do site (--lt-h1, site.css); 13svh segura tela baixa. */
.cx-hero h1 {
  max-width: none;
  color: var(--white);
  font-size: min(var(--lt-h1), 13svh);
  line-height: 0.88;
}

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

.cx-hero__lead {
  max-width: calc(680 * var(--lt-u));
  color: var(--white);
  font-size: calc(19 * var(--lt-u));
  line-height: 1.5;
}

/*
 * Faixa do pé: a malha de quadradinhos da marca (composição 293:9390: quadrado
 * de 37,98 num passo de 81,38), em preto sobre o próprio roxo do hero, repetida
 * sem fim. Sem JS, a malha é o fundo da faixa. Com JS (caixa.js) ela é desenhada
 * num canvas, quadradinho por quadradinho: na entrada as colunas sobem do chão
 * uma a uma; com o mouse, só os quadradinhos em volta do ponteiro se afastam e
 * crescem, e voltam com mola. --cx-passo é o passo da malha.
 */
.cx-hero__padroes {
  --cx-passo: calc(16 * var(--lt-u));
  position: relative;
  /* 40% mais baixa que antes (em 1440x900: 215 → 129). */
  height: clamp(84px, 14.4svh, 180px);
  overflow: hidden;
  background: var(--cx-roxo) url("./assets/pattern-tile-quadradinhos.svg") 0 0 / var(--cx-passo) var(--cx-passo) repeat;
}

.cx-hero__padroes.is-canvas {
  background-image: none;
}

.cx-hero__padroes canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   2. Catálogo
   ========================================================================== */
.cx-catalog {
  padding-block: calc(96 * var(--lt-u)) calc(120 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  background: var(--white);
}

.cx-catalog__inner {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--lt-u));
}

.cx-catalog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--lt-u));
  padding-bottom: calc(24 * var(--lt-u));
  border-bottom: 1px solid var(--gray-400);
}

.cx-catalog h2 {
  font-size: calc(48 * var(--lt-u));
  line-height: 0.92;
}

/* Filtros: chips quadrados, o ativo em preto. No celular viram fita rolável. */
.cx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--lt-u));
}

.cx-filter {
  padding: calc(10 * var(--lt-u)) calc(16 * var(--lt-u));
  color: var(--black);
  background: var(--white);
  font-family: var(--sans);
  font-size: calc(12 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--gray-400);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.cx-filter:hover {
  border-color: var(--black);
}

.cx-filter[aria-pressed="true"] {
  color: var(--white);
  background: var(--black);
  border-color: var(--black);
}

.cx-filter:focus-visible {
  outline: 3px solid var(--cx-roxo);
  outline-offset: 3px;
}

.cx-catalog__count {
  margin-top: calc(-16 * var(--lt-u));
  color: var(--gray-600);
  font-size: calc(13 * var(--lt-u));
}

/* Até três cartões por linha (dois no tablet, um no celular). */
.cx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.cx-catalog__empty {
  padding: calc(48 * var(--lt-u)) 0;
  color: var(--gray-600);
  font-size: calc(16 * var(--lt-u));
  text-align: center;
}

/* ==========================================================================
   3. FAQ — o bloco do base.css, nas medidas da página do curso
   ========================================================================== */
.cx-page .faq {
  width: 100%;
  min-height: 0;
  padding-block: calc(120 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  background: var(--gray-100);
}

.cx-page .faq > .content-wide {
  width: 100%;
  max-width: none;
}

.cx-page .faq-heading {
  height: calc(64 * var(--lt-u));
  padding-bottom: 0;
  box-shadow: inset 0 -1px var(--gray-400);
}

.cx-page .faq-heading h2 {
  font-size: calc(48 * var(--lt-u));
}

.cx-page .faq-heading > span {
  width: calc(44 * var(--lt-u));
  height: calc(44 * var(--lt-u));
}

.cx-page .faq-heading > span img {
  width: calc(24 * var(--lt-u));
  height: calc(24 * var(--lt-u));
}

.cx-page .faq-layout {
  grid-template-columns: minmax(0, 1fr) calc(368 * var(--lt-u));
  gap: calc(48 * var(--lt-u));
  margin-top: calc(56 * var(--lt-u));
}

.cx-page .questions summary {
  height: auto;
  min-height: calc(70 * var(--lt-u));
  gap: calc(24 * var(--lt-u));
  padding: calc(20 * var(--lt-u)) 0;
  font-size: calc(18 * var(--lt-u));
}

.cx-page .questions summary::after {
  width: calc(20 * var(--lt-u));
  height: calc(20 * var(--lt-u));
  flex-basis: auto;
  background-image: url("./assets/icon-chevron.svg");
  background-size: contain;
}

.cx-page .questions details > p {
  max-width: none;
  padding: 0 calc(40 * var(--lt-u)) calc(20 * var(--lt-u)) 0;
  font-size: calc(15 * var(--lt-u));
  line-height: 1.6;
}

.cx-page .support-card {
  min-height: calc(420 * var(--lt-u));
  justify-content: space-between;
  gap: calc(32 * var(--lt-u));
  padding: calc(32 * var(--lt-u));
  background: var(--white);
}

.cx-page .support-icon,
.cx-page .support-icon img {
  width: calc(44 * var(--lt-u));
  height: calc(44 * var(--lt-u));
  background: none;
}

.cx-page .support-body {
  gap: calc(32 * var(--lt-u));
}

.cx-page .support-copy {
  gap: calc(12 * var(--lt-u));
}

.cx-page .support-card h3 {
  font-size: calc(26 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
}

.cx-page .support-card p {
  color: var(--gray-600);
  font-size: calc(16 * var(--lt-u));
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 980px) {
  .cx-hero__inner {
    padding: 52px 32px;
  }

  .cx-hero__lead {
    font-size: 17px;
  }

  .cx-catalog {
    padding-block: 64px 80px;
  }

  .cx-catalog h2 {
    font-size: clamp(36px, 6vw, 48px);
  }

  .cx-catalog__head {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Fita rolável, sangrando a margem, como no wireframe. */
  .cx-filters {
    flex-wrap: nowrap;
    width: calc(100% + 96px);
    margin-inline: -48px;
    padding-inline: 48px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cx-filters::-webkit-scrollbar {
    display: none;
  }

  .cx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .cx-page .faq {
    padding-block: 80px;
  }

  .cx-page .faq-heading h2 {
    font-size: 40px;
  }

  .cx-page .faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .cx-page .support-card {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .cx-hero__inner {
    padding: 38px 24px;
  }

  .cx-hero__lead {
    font-size: 15px;
  }

  .cx-catalog {
    padding-block: 48px 64px;
  }

  .cx-filters {
    width: calc(100% + 48px);
    margin-inline: -24px;
    padding-inline: 24px;
  }

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

  .cx-page .faq {
    padding-block: 64px;
  }

  .cx-page .faq-heading {
    height: auto;
    padding-bottom: 16px;
  }

  .cx-page .faq-heading h2 {
    font-size: 32px;
    transform: none;
  }

  .cx-page .questions summary {
    font-size: 16px;
  }

  .cx-page .support-card {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .lt-toolcard__media img {
    transition: none;
  }
}