/* =============================================================
   eteg-case-featured — tokens do design-system.json (ETEG 2023)
   ─────────────────────────────────────────────────────────────
   Figma: "Section — Casos de Uso" node 695:419 (1999×587px)
   Página de destino: /cases, /sobre, páginas institucionais

   colors.brand.primary     → #1662ff  (nome do cliente, CTA, botão)
   colors.brand.accent      → #cba6ec  (eyebrow)
   colors.text.dark         → #1a1a1a  (descrição)
   colors.background.white  → #ffffff  (fundo da seção)
   typography.fonts.heading → "Anybody, sans-serif"
   layout.max_width         → 1440px

   Conversões (outer_frame × 0.7204):
   section padding 128px     → 92.2  → DS 96px
   left gap (header→button)  → 40×0.7204 = 28.8 → DS 32px
   header text gap           → 24×0.7204 = 17.3 → DS 16px
   metrics gap               → 24×0.7204 = 17.3 → DS 16px
   card padding top/bottom   → 32×0.7204 = 23   → DS 24px
   card padding left/right   → 24×0.7204 = 17.3 → DS 16px
   deco image width          → 969×0.7204 = 698  → ~700px
   row gap (target_container)→ 40px — não converter

   Seletores para "CSS Personalizado" no Elementor:
   .eteg-case-featured                  → seção (fundo branco)
   .eteg-case-featured__deco            → imagem decorativa (abs, top-right)
   .eteg-case-featured__inner           → container flex-row max-width 1440px
   .eteg-case-featured__left            → coluna de informações do cliente
   .eteg-case-featured__eyebrow         → pré-título lilás
   .eteg-case-featured__client-name     → nome do cliente (azul italic bold)
   .eteg-case-featured__description     → parágrafo descritivo dark
   .eteg-case-featured__cta             → botão azul
   .eteg-case-featured__metrics         → container flex dos cards de métricas
   .eteg-case-featured__metric-card     → card individual (bg imagem + overlay)
   .eteg-case-featured__metric-overlay  → overlay escuro sobre imagem
   .eteg-case-featured__metric-content  → conteúdo (value + label) dentro do card
   .eteg-case-featured__metric-value    → número/sigla em destaque (52px, branco)
   .eteg-case-featured__metric-label    → rótulo do valor (16px, branco, uppercase)
   ============================================================= */

/* ── Reset de bloco ──────────────────────────────────────────── */
.eteg-case-featured *,
.eteg-case-featured *::before,
.eteg-case-featured *::after {
  box-sizing: border-box;
}

/* =============================================================
   EXTRA SMALL — max-width: 374px
   ============================================================= */
@media (max-width: 374px) {

  .eteg-case-featured__client-name {
    font-size: 1.75rem;
  }

  .eteg-case-featured__inner {
    padding-inline: 12px;
  }
}

/* ── BASE: mobile-first (375px+) ─────────────────────────────── */

.eteg-case-featured {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  padding: 48px 0;
}

/* Imagem decorativa — abs topo direito, oculta mobile via switcher */
.eteg-case-featured__deco {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  /* Figma: 969px × 0.7204 = 698px */
  width: 700px;
  max-width: 60%;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.85;
}

.eteg-case-featured__deco img {
  display: block;
  width: 100%;
  height: auto;
}

/* Container principal */
.eteg-case-featured__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ── Coluna esquerda ─────────────────────────────────────────── */
.eteg-case-featured__left {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Figma header gap: 24px × 0.7204 = 17 → 16px */
}

/* ── Eyebrow ─────────────────────────────────────────────────── */
.eteg-case-featured__eyebrow {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: 1.0625rem; /* 17px — Figma: 17px */
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4;
  color: #cba6ec;
}

/* ── Nome do cliente ─────────────────────────────────────────── */
.eteg-case-featured__client-name {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: clamp(1.875rem, 3.4vw + 1.1rem, 3.25rem); /* mobile: 1.875rem → desktop: 3.25rem */
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.1;
  color: #1662ff;
}

/* ── Descrição ───────────────────────────────────────────────── */
.eteg-case-featured__description {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: 1rem; /* 16px */
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 55ch;
}

/* ── Botão CTA ───────────────────────────────────────────────── */
.eteg-case-featured__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 16px 32px; /* Figma: 24px top/bottom × 0.7204 → 16px; 32px lateral (Figma: 32px) */
  background-color: #1662ff;
  color: #ffffff;
  border-radius: 12px; /* Figma: 12px — não converter */
  font-family: "Anybody", sans-serif;
  font-size: 1.125rem; /* 18px mobile — Figma: 20px */
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.4;
  transition: opacity 200ms ease;
  margin-top: 8px;
}

.eteg-case-featured__cta:hover {
  opacity: 0.85;
}

.eteg-case-featured__cta:focus-visible {
  outline: 2px solid #1662ff;
  outline-offset: 3px;
}

/* ── Coluna direita: métricas ────────────────────────────────── */
.eteg-case-featured__metrics {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
}

/* Card individual */
.eteg-case-featured__metric-card {
  position: relative;
  flex: 1 1 calc(33% - 8px); /* 3 cards por linha desktop */
  min-width: 120px;
  border-radius: 16px; /* Figma: 16px — não converter */
  background-color: #1662ff; /* fallback sem imagem */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  aspect-ratio: 211 / 331;
}

/* Overlay escuro sobre imagem */
.eteg-case-featured__metric-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 26, 31, 0.60);
  z-index: 0;
}

/* Conteúdo: valor + rótulo (ancorados no rodapé do card) */
.eteg-case-featured__metric-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 24px; /* Figma: 8px — ampliado para 24px por solicitação */
  padding: 20px 12px; /* mobile reduzido */
  height: 100%;
  text-align: center;
}

/* Valor principal (+240, PET, CX) */
.eteg-case-featured__metric-value {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: clamp(2.25rem, 2.5vw + 1.7rem, 3.25rem); /* mobile: 2.25rem → desktop: 3.25rem */
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  color: #ffffff;
}

/* Rótulo — min-height reserva espaço para 3 linhas de texto,
   garantindo que os valores (+240, PET, CX) fiquem na mesma
   linha horizontal em todos os cards independente do wrap. */
.eteg-case-featured__metric-label {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: 0.75rem; /* 12px mobile — Figma: 16px desktop */
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.4;
  color: #ffffff;
  min-height: 4.2em; /* 3 linhas × 1.4 line-height — alinha os valores */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* =============================================================
   LARGE PHONE / SMALL TABLET — min-width: 600px
   ============================================================= */
@media (min-width: 600px) {

  .eteg-case-featured__inner {
    padding-inline: 20px;
  }

  .eteg-case-featured__metrics {
    gap: 16px;
    flex-wrap: nowrap;
  }

  .eteg-case-featured__metric-card {
    flex: 1 1 0;
  }

  .eteg-case-featured__metric-label {
    font-size: 0.875rem;
  }
}

/* =============================================================
   LANDSCAPE PHONE — orientation: landscape, max-height: 500px
   ============================================================= */
@media (orientation: landscape) and (max-height: 500px) {

  .eteg-case-featured {
    padding: 32px 0;
  }

  .eteg-case-featured__metric-card {
    aspect-ratio: auto;
    min-height: 180px;
  }
}

/* =============================================================
   TABLET — min-width: 768px
   ============================================================= */
@media (min-width: 768px) {

  .eteg-case-featured {
    padding: 64px 0;
  }

  /* tablet: ainda coluna única — 2 colunas só a 1024px onde há espaço suficiente para as métricas */
  .eteg-case-featured__inner {
    padding-inline: 24px;
  }

  /* métricas: wrap com 2 por linha no tablet */
  .eteg-case-featured__metrics {
    gap: 16px;
    flex-wrap: nowrap; /* 3 cards em linha */
  }

  .eteg-case-featured__metric-card {
    flex: 1 1 0; /* distribuição igual, sem overflow */
    max-width: none;
    aspect-ratio: 211 / 331;
  }

  .eteg-case-featured__metric-content {
    padding: 24px 16px;
    gap: 24px;
  }

  .eteg-case-featured__metric-label { font-size: 1rem; }
}

/* =============================================================
   DESKTOP — min-width: 1024px
   ============================================================= */
@media (min-width: 1024px) {

  .eteg-case-featured {
    padding: 96px 0; /* Figma: 128px × 0.7204 = 92.2 → DS 96px */
  }

  .eteg-case-featured__inner {
    flex-direction: row;
    align-items: center;
    gap: 40px; /* target_container — não converter */
    padding-inline: 32px;
  }

  .eteg-case-featured__left {
    flex: 0 0 calc(724 / 1444 * 100%); /* Figma: 724/1444 ≈ 50% */
    gap: 32px; /* Figma: 40px × 0.7204 = 28.8 → DS 32px */
  }

  .eteg-case-featured__client-name {
    font-size: 3.25rem; /* 52px — Figma: 52px */
  }

  .eteg-case-featured__cta {
    font-size: 1.25rem; /* 20px — Figma: 20px */
    padding: 17px 32px; /* vertical: 24px × 0.7204; horizontal: 32px fixo */
  }

  .eteg-case-featured__metrics {
    flex: 1;
    gap: 16px;
  }

  .eteg-case-featured__metric-content {
    gap: 24px;
  }

  .eteg-case-featured__metric-value {
    font-size: 3.25rem; /* 52px — Figma: 52px */
  }
}

/* ── NOTEBOOK: min-width 1280px ─────────────────────────────── */
@media (min-width: 1280px) {

  .eteg-case-featured {
    padding: 64px 0 !important; /* era 96px */
  }

  .eteg-case-featured__inner {
    flex-direction: row;
    align-items: center;
    gap: 28px;          /* era 40px */
    padding-inline: 48px; /* era 32px */
  }

  .eteg-case-featured__left {
    flex: 0 0 calc(724 / 1444 * 100%);
    gap: 20px; /* era 32px */
  }

  .eteg-case-featured__client-name {
    font-size: 2.5rem; /* era 3.25rem */
  }

  .eteg-case-featured__cta {
    font-size: 1rem;      /* era 1.25rem */
    padding: 14px 24px;   /* era 17px 32px */
  }

  .eteg-case-featured__metrics {
    flex: 1;
    gap: 12px; /* era 16px */
  }

  .eteg-case-featured__metric-content {
    gap: 16px; /* era 24px */
  }

  .eteg-case-featured__metric-value {
    font-size: 2.5rem; /* era 3.25rem */
  }
}

/* =============================================================
   WIDE — min-width: 1440px
   ============================================================= */
@media (min-width: 1440px) {

  .eteg-case-featured {
    padding: 96px 0 !important; /* restaura */
  }

  .eteg-case-featured__inner {
    flex-direction: row;
    align-items: center;
    gap: 40px;            /* restaura */
    padding-inline: 80px; /* restaura */
  }

  .eteg-case-featured__left {
    flex: 0 0 calc(724 / 1444 * 100%);
    gap: 32px; /* restaura */
  }

  .eteg-case-featured__client-name {
    font-size: 3.25rem; /* restaura */
  }

  .eteg-case-featured__cta {
    font-size: 1.25rem;  /* restaura */
    padding: 17px 32px;  /* restaura */
  }

  .eteg-case-featured__metrics {
    flex: 1;
    gap: 16px; /* restaura */
  }

  .eteg-case-featured__metric-content {
    gap: 24px; /* restaura */
  }

  .eteg-case-featured__metric-value {
    font-size: 3.25rem; /* restaura */
  }
}


/* ── PRESET: compact — texto médio (2-3 palavras) ───────────── */
.eteg-case-featured__metrics--compact .eteg-case-featured__metric-value {
  font-size: clamp(1.25rem, 1.8vw + 0.65rem, 1.875rem);
  overflow-wrap: break-word;
  word-break: break-word;
}

.eteg-case-featured__metrics--compact .eteg-case-featured__metric-label {
  font-size: 0.75rem;
}

@media (min-width: 768px) {
  .eteg-case-featured__metrics--compact .eteg-case-featured__metric-label {
    font-size: 0.875rem;
  }
}

@media (min-width: 1024px) {
  .eteg-case-featured__metrics--compact .eteg-case-featured__metric-value {
    font-size: 1.875rem !important; /* 30px */
  }
}

@media (min-width: 1280px) {
  .eteg-case-featured__metrics--compact .eteg-case-featured__metric-value {
    font-size: 1.625rem !important; /* 26px — 1280px reduz junto com o sweep */
  }
}

@media (min-width: 1440px) {
  .eteg-case-featured__metrics--compact .eteg-case-featured__metric-value {
    font-size: 1.875rem !important; /* 30px — restaura */
  }
}

/* ── PRESET: micro — texto longo (frases completas) ─────────── */
.eteg-case-featured__metrics--micro .eteg-case-featured__metric-value {
  font-size: clamp(0.875rem, 1vw + 0.65rem, 1.25rem);
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.25;
}

.eteg-case-featured__metrics--micro .eteg-case-featured__metric-label {
  font-size: 0.6875rem; /* 11px */
}

@media (min-width: 768px) {
  .eteg-case-featured__metrics--micro .eteg-case-featured__metric-label {
    font-size: 0.75rem;
  }
}

@media (min-width: 1024px) {
  .eteg-case-featured__metrics--micro .eteg-case-featured__metric-value {
    font-size: 1.25rem !important; /* 20px */
  }
}

@media (min-width: 1280px) {
  .eteg-case-featured__metrics--micro .eteg-case-featured__metric-value {
    font-size: 1.0625rem !important; /* 17px */
  }
}

@media (min-width: 1440px) {
  .eteg-case-featured__metrics--micro .eteg-case-featured__metric-value {
    font-size: 1.25rem !important; /* 20px — restaura */
  }
}

/* ── Deco reveal (eteg-scroll-reveal.js) ────────────────────── */
.eteg-case-featured.eteg-reveal .eteg-case-featured__deco {
  opacity: 0;
  transform: translateX(64px);
  transition: opacity 640ms cubic-bezier(0, 0, 0.2, 1),
              transform 640ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-case-featured.is-revealed .eteg-case-featured__deco {
  opacity: 0.85;
  transform: translateX(0);
  transition-delay: 200ms;
}

/* ── Content stagger entry (eteg-scroll-reveal.js) ──────────── */
.eteg-case-featured.eteg-reveal .eteg-case-featured__left {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 480ms cubic-bezier(0, 0, 0.2, 1), transform 480ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-case-featured.is-revealed .eteg-case-featured__left {
  opacity: 1;
  transform: none;
  transition-delay: 40ms;
}
.eteg-case-featured.eteg-reveal .eteg-case-featured__metric-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 480ms cubic-bezier(0, 0, 0.2, 1), transform 480ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-case-featured.is-revealed .eteg-case-featured__metric-card:nth-child(1) { opacity: 1; transform: none; transition-delay: 160ms; }
.eteg-case-featured.is-revealed .eteg-case-featured__metric-card:nth-child(2) { opacity: 1; transform: none; transition-delay: 240ms; }
.eteg-case-featured.is-revealed .eteg-case-featured__metric-card:nth-child(3) { opacity: 1; transform: none; transition-delay: 320ms; }
.eteg-case-featured.is-revealed .eteg-case-featured__metric-card:nth-child(4) { opacity: 1; transform: none; transition-delay: 400ms; }

/* =============================================================
   ACESSIBILIDADE — prefers-reduced-motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {

  .eteg-case-featured__cta {
    transition: none;
  }

  .eteg-case-featured.eteg-reveal .eteg-case-featured__deco {
    opacity: 1; transform: translateX(0); transition: none;
  }

  .eteg-case-featured.eteg-reveal .eteg-case-featured__left,
  .eteg-case-featured.eteg-reveal .eteg-case-featured__metric-card {
    opacity: 1; transform: none; transition: none;
  }
}