/* ============================================================
   Case individual — identidade roxo vibrante (mesmo modo da home)
   ============================================================ */

/* .case-hero herda o mesmo fundo/glow de .hero (cases/style.css) —
   mantém a página individual e a galeria com a identidade idêntica. */

/* Mockup dentro do hero pra qualquer device_type (mobile/tablet/desktop) --
   evita repetir uma secao "showcase" separada abaixo do hero. Desktop e
   tablet ganham uma coluna mais larga (grid--desktop/--tablet) já que o
   frame precisa de mais espaço pra ficar legível. */
.case-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.case-hero-grid--desktop,
.case-hero-grid--tablet {
  grid-template-columns: .85fr 1.15fr;
}

/* Coluna mais estreita (metade do hero) precisa de um titulo menor que
   o clamp padrao (pensado pra hero de largura total) -- senao quebra
   em muitas linhas e fica pesado. */
.case-hero-grid .hero-title {
  font-size: clamp(26px, 3.4vw, 40px);
}

.case-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
}

.case-hero-visual::before {
  content: '';
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(105,65,198,.4) 0%, rgba(220,252,23,.06) 45%, transparent 72%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}

/* Tamanho real (nao transform:scale) -- ampliar um bitmap ja
   renderizado via CSS transform sempre borra o texto miudo da
   screenshot, porque o navegador amplia o raster ja composto em vez
   de desenhar mais nitido desde o inicio. Aqui aumentamos a largura
   de verdade do frame (herda de .device-frame--mobile, base 140px). */
.case-hero-mockup {
  position: relative;
  z-index: 1;
  width: 200px;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  transition: transform .35s ease, box-shadow .35s ease;
}

.case-hero-visual--tablet .case-hero-mockup {
  width: 320px;
}

.case-hero-visual--desktop .case-hero-mockup {
  width: 100%;
  max-width: 480px;
}

/* Screenshot desktop costuma ser mais larga que a proporcao fixa do
   frame (16:10) -- contain evita cortar as laterais (deixa uma folga
   de cor de fundo do frame em vez de perder conteudo da tela).
   Especificidade igual/maior que .device-frame--desktop .device-screen img
   (cases/style.css) pra garantir que este contain vença o cover base. */
.device-frame--desktop .device-screen--contain img,
.device-screen--contain img {
  object-fit: contain;
}

.case-hero-mockup:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 90px rgba(0,0,0,.5);
}

@media (max-width: 900px) {
  .case-hero-grid,
  .case-hero-grid--desktop,
  .case-hero-grid--tablet {
    grid-template-columns: 1fr;
  }
  .case-hero-visual {
    order: -1;
    min-height: 340px;
    margin-bottom: 8px;
  }
  .case-hero-mockup {
    width: 160px;
  }
  .case-hero-visual--tablet .case-hero-mockup {
    width: 240px;
  }
  .case-hero-visual--desktop .case-hero-mockup {
    max-width: 320px;
  }
  .case-hero-mockup:hover {
    transform: translateY(-4px);
  }
}

.case-breadcrumb {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  margin-bottom: 24px;
  transition: color .2s ease;
}
.case-breadcrumb:hover { color: var(--lime); }

.case-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.case-hero-client {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.case-hero-client-logo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.case-hero-badge {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #0d0921;
  background: var(--lime);
  padding: 6px 14px;
  border-radius: 999px;
}
.case-hero-badge--outline {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
}

.case-hero-links {
  margin-top: 32px;
}

/* ── CONTENT CARDS (mesmo modo claro da galeria) ─────────────────── */
.case-body {
  background: var(--bg-light);
  padding: 72px 0 88px;
}

.case-body-grid {
  display: grid;
  gap: 24px;
  margin-bottom: 32px;
}

.case-content-card {
  background: var(--card-light);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 14px rgba(16,24,40,.04);
}

.case-content-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 14px;
  letter-spacing: -.01em;
}
.case-content-card h2 i {
  font-size: 16px;
  color: var(--purple-600);
  background: var(--purple-100);
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.case-rich-text {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.75;
}
.case-rich-text p { margin-bottom: 14px; }
.case-rich-text p:last-child { margin-bottom: 0; }
.case-rich-text strong {
  color: var(--purple-600);
  background: var(--purple-100);
  padding: 1px 7px;
  border-radius: 5px;
  font-weight: 700;
  white-space: normal;
}
.case-rich-text ul,
.case-rich-text ol { margin: 0 0 14px 20px; }
.case-rich-text a {
  color: var(--purple-600);
  text-decoration: underline;
  text-decoration-color: rgba(105,65,198,.35);
}
.case-rich-text a:hover { text-decoration-color: var(--purple-600); }

.case-tags--body {
  margin-bottom: 48px;
}

.case-gallery-heading {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.case-gallery-wrap {
  position: relative;
}

.case-gallery-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.case-gallery-grid::-webkit-scrollbar { display: none; }

.case-gallery-img {
  flex: 0 0 auto;
  height: 260px;
  width: auto;
  max-width: 90vw;
  border-radius: 14px;
  border: 1px solid var(--border-light);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.case-gallery-img:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(16,24,40,.12);
}

/* ── LIGHTBOX ─────────────────────────────────────────────────────── */
.case-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13,9,33,.94);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.case-lightbox.open { display: flex; }

.case-lightbox-img {
  max-width: 88vw;
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}

.case-lightbox-close,
.case-lightbox-nav {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.case-lightbox-close:hover,
.case-lightbox-nav:hover { background: rgba(255,255,255,.18); }

.case-lightbox-close {
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.case-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 20px;
}
.case-lightbox-nav--prev { left: 24px; }
.case-lightbox-nav--next { right: 24px; }

@media (max-width: 640px) {
  .case-lightbox-nav { width: 42px; height: 42px; font-size: 16px; }
  .case-lightbox-nav--prev { left: 10px; }
  .case-lightbox-nav--next { right: 10px; }
  .case-lightbox-close { top: 12px; right: 12px; }
}

.case-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  box-shadow: 0 4px 14px rgba(16,24,40,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.case-gallery-nav:hover { background: var(--purple-100); color: var(--purple-600); }
.case-gallery-nav--prev { left: -8px; }
.case-gallery-nav--next { right: -8px; }

@media (max-width: 640px) {
  .case-gallery-nav { display: none; }
}

@media (min-width: 860px) {
  .case-body-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-content-card:first-child {
    grid-column: 1 / -1;
  }
  /* Se o total de cards for par, o ultimo fica sozinho na linha --
     estica ele pra largura toda em vez de deixar buraco do lado. */
  .case-content-card:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }
}