/* ============================================================
   CASE — Alquimias da Jandira
   Overrides do template base (case-hexon.css) com paleta da marca
   ============================================================ */

html.ds .case-jandira {
  /* Paleta da marca */
  --jd-black: #000000;
  --jd-verde-terroso: #3F463D;
  --jd-verde-louro: #8C9A7B;
  --jd-vermelho-urucum: #B7473C;
  --jd-terracota: #C96F4A;
  --jd-laranja-queimado: #DA8F60;
  --jd-areia: #F3EEE9;
  --jd-branco: #FFFFFF;

  /* Bg da página alinhado ao fundo do site (mesmo da home) */
  background: #E3E3E9 !important;
}


/* ============================================================
   01. HERO — imagem vertical cobrindo 100vh (crop nas bordas)
   ============================================================ */
html.ds .case-jandira .hx-hero-image {
  position: relative;
  height: 100vh;
  min-height: 600px;
  width: 100%;
  overflow: hidden;
  background: var(--jd-verde-terroso);
}
html.ds .case-jandira .hx-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 767px) {
  html.ds .case-jandira .hx-hero-image {
    height: 100vh;
    min-height: 500px;
  }
}

/* Botão voltar sobre o hero — garante contraste sobre o verde */
html.ds .case-jandira .hx-back {
  color: var(--jd-areia);
}

/* ============================================================
   02-03. INTRO — badge e pergunta com paleta Jandira
   ============================================================ */
html.ds .case-jandira .hx-pill-dark {
  border: 1px solid var(--jd-verde-terroso);
  color: var(--jd-verde-terroso);
  background: transparent;
}

/* ============================================================
   06. NAMING/MARCA — painel vermelho urucum como destaque
   Aproveita o card de imagem com bg do urucum
   ============================================================ */

/* ============================================================
   X FINAL — badge da Jandira centralizado em tela areia
   ============================================================ */
html.ds .case-jandira .hx-x-frame {
  background: var(--jd-areia);
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
}
html.ds .case-jandira .hx-jd-badge {
  width: 280px;
  height: auto;
  display: block;
}
@media (max-width: 767px) {
  html.ds .case-jandira .hx-x-frame { min-height: 70vh; padding: 60px 16px; }
  html.ds .case-jandira .hx-jd-badge { width: 200px; }
}

/* ============================================================
   PAIR — ajustes pra alguns pares de imagem da Jandira
   (a maioria já herda do case-hexon.css)
   ============================================================ */

/* Logotipo urucum standalone — quadrado centralizado, não estica full-width */
html.ds .case-jandira .hx-jd-square-panel {
  max-width: 720px;
  margin: 0 auto;
}

/* Símbolo final — imagem com padding interno, centralizada no card areia */
html.ds .case-jandira .hx-x-frame .hx-jd-symbol {
  width: 1200px;
  max-width: 90%;
  height: auto;
  display: block;
}
@media (max-width: 767px) {
  html.ds .case-jandira .hx-x-frame .hx-jd-symbol { width: 90%; max-width: 90%; }
}

/* Naming mosaic — monstera (tall, left) + QUIMIAS (top right) + ALQUIMIAS DA JANDIRA (bottom right) */
html.ds .case-jandira .hx-jd-naming-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  aspect-ratio: 9 / 5;
  width: 100%;
}
html.ds .case-jandira .hx-jd-naming-mosaic > figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--hx-radius);
}
html.ds .case-jandira .hx-jd-naming-mosaic > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html.ds .case-jandira .hx-jd-naming-left {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: var(--jd-areia);
}
html.ds .case-jandira .hx-jd-naming-top {
  grid-column: 2;
  grid-row: 1;
}
html.ds .case-jandira .hx-jd-naming-bottom {
  grid-column: 2;
  grid-row: 2;
}
@media (max-width: 767px) {
  html.ds .case-jandira .hx-jd-naming-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 8px;
    aspect-ratio: auto;
  }
  html.ds .case-jandira .hx-jd-naming-left,
  html.ds .case-jandira .hx-jd-naming-top,
  html.ds .case-jandira .hx-jd-naming-bottom {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Selos redondos (par square) — fundo areia + padding pra destacar */
html.ds .case-jandira .hx-pair--square > figure {
  background: var(--jd-areia);
  padding: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
html.ds .case-jandira .hx-pair--square > figure img {
  width: 100%;
  height: auto;
  max-width: 480px;
  object-fit: contain;
}
@media (max-width: 767px) {
  html.ds .case-jandira .hx-pair--square > figure { padding: 32px; }
  html.ds .case-jandira .hx-pair--square > figure img { max-width: 240px; }
}

/* ============================================================
   TRIO — 3 imagens lado a lado (selos + logo urucum)
   ============================================================ */
html.ds .case-jandira .hx-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
html.ds .case-jandira .hx-trio > figure {
  overflow: hidden;
  border-radius: var(--hx-radius);
  margin: 0;
}
html.ds .case-jandira .hx-trio--square > figure {
  aspect-ratio: 1 / 1;
}
html.ds .case-jandira .hx-trio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html.ds .case-jandira .hx-trio--square > figure:nth-child(2) {
  background: var(--jd-vermelho-urucum);
}
html.ds .case-jandira .hx-trio--square > figure:nth-child(2) img {
  object-fit: contain;
}
@media (max-width: 767px) {
  html.ds .case-jandira .hx-trio {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ============================================================
   MOSAIC 1+2 — imagem grande à esquerda + 2 empilhadas à direita
   ============================================================ */
html.ds .case-jandira .hx-jd-mosaic-1-2 {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  aspect-ratio: 16 / 9;
  width: 100%;
}
html.ds .case-jandira .hx-jd-mosaic-1-2 > figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--hx-radius);
}
html.ds .case-jandira .hx-jd-mosaic-1-2 > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html.ds .case-jandira .hx-jd-mosaic-left {
  grid-column: 1;
  grid-row: 1 / span 2;
}
html.ds .case-jandira .hx-jd-mosaic-top-right {
  grid-column: 2;
  grid-row: 1;
}
html.ds .case-jandira .hx-jd-mosaic-bottom-right {
  grid-column: 2;
  grid-row: 2;
}
@media (max-width: 767px) {
  html.ds .case-jandira .hx-jd-mosaic-1-2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    aspect-ratio: auto;
    gap: 8px;
  }
  html.ds .case-jandira .hx-jd-mosaic-left,
  html.ds .case-jandira .hx-jd-mosaic-top-right,
  html.ds .case-jandira .hx-jd-mosaic-bottom-right {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ============================================================
   FACHADA / FOTO VERTICAL — moldura centralizada com bastante respiro
   ============================================================ */
html.ds .case-jandira .hx-jd-portrait-frame {
  max-width: 840px;
  margin: 80px auto;
  border-radius: var(--hx-radius);
  overflow: hidden;
  background: transparent;
}
html.ds .case-jandira .hx-jd-portrait-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--hx-radius);
}
@media (max-width: 767px) {
  html.ds .case-jandira .hx-jd-portrait-frame {
    max-width: 88%;
    margin: 40px auto;
  }
}

/* ============================================================
   OUTROS CASES — thumbnail do Hexon (link de volta)
   Reaproveita os estilos existentes do hx-case-card
   ============================================================ */
html.ds .case-jandira .hx-case-hexon-link {
  background: #0a0a0a;
}
html.ds .case-jandira .hx-case-hexon-link .hx-case-thumb {
  background: #0a0a0a;
}
html.ds .case-jandira .hx-case-hexon-link .hx-case-cta {
  color: #f5c842;
}