/* =============================================================
   eteg-case-problems — tokens do design-system.json (ETEG 2023)
   ─────────────────────────────────────────────────────────────
   Figma: "Section — Mid-Page Trap" node 695:463 (1999×792px)
   Página de destino: /cases/{slug} (pontos de melhoria do case)

   colors.brand.primary     → #1662ff  (título dos cards)
   colors.brand.accent      → #cba6ec  (eyebrow, highlight, borda dos cards)
   colors.text.dark         → #1a1a1f  (fundo da seção, texto dos cards)
   colors.background.white  → #ffffff  (fundo dos cards)
   typography.fonts.heading → "Anybody, sans-serif"
   layout.max_width         → 1440px

   Conversões (outer_frame × 0.7204):
   section padding 128px   → 92.2  → DS 96px
   left col gap 22px       → 15.8  → DS 16px
   left col padding-right 24px → 17.3 → DS 16px
   cards col gap 40px      → 28.8  → DS 32px
   card padding 32px       → 23.1  → DS 24px
   card gap interno 8px    → 5.8   → DS 8px
   deco width 412px        → 296.9 → DS ~300px
   row gap (target_container) → 24px — não converter

   Seletores para "CSS Personalizado" no Elementor:
   .eteg-case-problems                    → seção (fundo dark)
   .eteg-case-problems__deco              → deco abs top-right
   .eteg-case-problems__inner             → container flex-row max-width 1440px
   .eteg-case-problems__left              → coluna do cabeçalho (~50%)
   .eteg-case-problems__eyebrow           → pré-título lilás
   .eteg-case-problems__heading           → título italic uppercase
   .eteg-case-problems__heading-highlight → destaque lilás bold
   .eteg-case-problems__description       → parágrafo branco 24px
   .eteg-case-problems__cards             → lista de cards (flex-column)
   .eteg-case-problems__card              → card branco com borda lilás
   .eteg-case-problems__card-title        → título azul do card (28px)
   .eteg-case-problems__card-text         → texto dark do card (16px)
   ─────────────────────────────────────────────────────────────
   colors.brand.primary     → #1563FF
   colors.brand.accent      → #CCA6ED
   ============================================================= */

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

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

  .eteg-case-problems__heading {
    font-size: 1.5rem;
  }

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

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

.eteg-case-problems {
  position: relative;
  overflow: hidden;
  background-color: #1a1a1f;
  padding: 48px 0;
}

/* Deco — abs topo direito, oculta mobile */
.eteg-case-problems__deco {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  /* Figma: 412px × 0.7204 = 297px */
  width: 300px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

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

/* Container principal */
.eteg-case-problems__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-problems__left {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Figma: 22px × 0.7204 = 15.8 → DS 16px */
}

/* ── Eyebrow ─────────────────────────────────────────────────── */
.eteg-case-problems__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;
}

/* ── Heading ─────────────────────────────────────────────────── */
.eteg-case-problems__heading {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: clamp(1.75rem, 4.3vw + 0.74rem, 3.5rem); /* mobile: 1.75rem → desktop: 3.5rem */
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.1;
  color: #ffffff;
}

.eteg-case-problems__heading-highlight {
  font-weight: 700;
  font-style: italic;
  color: #cba6ec;
}

/* ── Descrição ───────────────────────────────────────────────── */
.eteg-case-problems__description {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: var(--eteg-body-size); /* Figma: 24px → padronizado 16px */
  font-weight: 400;
  line-height: 1.6;
  color: #ffffff;
  max-width: 55ch;
}

/* ── Cards de problemas ──────────────────────────────────────── */
.eteg-case-problems__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px; /* mobile reduzido */
}

.eteg-case-problems__card {
  background-color: #ffffff;
  border-left: 8px solid #cba6ec;
  border-bottom: 8px solid #cba6ec;
  border-radius: 20px; /* igual ao eteg-product-features e eteg-case-impact */
  padding: 24px; /* Figma: 32px × 0.7204 = 23 → DS 24px */
  display: flex;
  flex-direction: column;
  gap: 8px; /* Figma: 8px × 0.7204 ≈ 6 → DS 8px */
}

.eteg-case-problems__card-title {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: clamp(1.25rem, 1.2vw + 1.0rem, 1.75rem); /* mobile: 1.25rem → desktop: 1.75rem */
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.3;
  color: #1662ff;
}

.eteg-case-problems__card-text {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: var(--eteg-body-size);
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1f;
}

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

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

}

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

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

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

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

  .eteg-case-problems__deco {
    display: block;
  }

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

  .eteg-case-problems__left {
    flex: 0 0 48%;
    gap: 20px;
    padding-right: 16px; /* Figma: 24px × 0.7204 = 17 → DS 16px */
  }

  .eteg-case-problems__cards {
    flex: 1;
    gap: 24px; /* Figma: 40px × 0.7204 = 28.8 → DS 32px; tablet reduzido */
  }

}

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

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

  .eteg-case-problems__inner {
    gap: 24px; /* target_container — não converter */
    padding-inline: 32px;
  }

  .eteg-case-problems__left {
    flex: 0 0 calc(740 / 1440 * 100%); /* Figma: 740/1440 ≈ 51.4% */
    gap: 24px;
    padding-right: 16px;
  }

  .eteg-case-problems__heading {
    font-size: 3.5rem; /* 56px — Figma: 56px */
    line-height: 1.1;
  }

  .eteg-case-problems__cards {
    flex: 1;
    gap: 32px; /* Figma: 40px × 0.7204 = 28.8 → DS 32px */
    justify-content: flex-end;
  }

  .eteg-case-problems__card {
    padding: 24px 32px; /* Figma: 32px × 0.7204 = 23 → DS 24px */
    gap: 8px;
  }

  .eteg-case-problems__card-title {
    font-size: 1.75rem; /* 28px — Figma: 28px */
  }

  /* __card-text já usa var(--eteg-body-size) */
}

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

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

  .eteg-case-problems__inner {
    gap: 20px;            /* era 24px */
    padding-inline: 48px; /* era 32px */
  }

  .eteg-case-problems__left {
    flex: 0 0 calc(740 / 1440 * 100%);
    gap: 18px;          /* era 24px */
    padding-right: 16px;
  }

  .eteg-case-problems__heading {
    font-size: 2.25rem; /* era 3.5rem */
    line-height: 1.1;
  }

  .eteg-case-problems__cards {
    flex: 1;
    gap: 20px; /* era 32px */
    justify-content: flex-end;
  }

  .eteg-case-problems__card {
    padding: 20px 24px; /* era 24px 32px */
    gap: 6px;           /* era 8px */
  }

  .eteg-case-problems__card-title {
    font-size: 1.25rem; /* era 1.75rem */
  }
}

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

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

  .eteg-case-problems__inner {
    gap: 24px;            /* restaura */
    padding-inline: 80px; /* restaura */
  }

  .eteg-case-problems__left {
    flex: 0 0 calc(740 / 1440 * 100%);
    gap: 24px;          /* restaura */
    padding-right: 16px;
  }

  .eteg-case-problems__heading {
    font-size: 3.5rem; /* restaura */
    line-height: 1.1;
  }

  .eteg-case-problems__cards {
    flex: 1;
    gap: 32px; /* restaura */
    justify-content: flex-end;
  }

  .eteg-case-problems__card {
    padding: 24px 32px; /* restaura */
    gap: 8px;           /* restaura */
  }

  .eteg-case-problems__card-title {
    font-size: 1.75rem; /* restaura */
  }
}


/* ── Deco reveal (eteg-scroll-reveal.js) ────────────────────── */
.eteg-case-problems.eteg-reveal .eteg-case-problems__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-problems.is-revealed .eteg-case-problems__deco {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 200ms;
}

/* ── Content stagger entry (eteg-scroll-reveal.js) ──────────── */
.eteg-case-problems.eteg-reveal .eteg-case-problems__heading {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms cubic-bezier(0, 0, 0.2, 1), transform 500ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-case-problems.is-revealed .eteg-case-problems__heading {
  opacity: 1;
  transform: none;
  transition-delay: 60ms;
}
.eteg-case-problems.eteg-reveal .eteg-case-problems__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-problems.is-revealed .eteg-case-problems__card:nth-child(1) { opacity: 1; transform: none; transition-delay: 160ms; }
.eteg-case-problems.is-revealed .eteg-case-problems__card:nth-child(2) { opacity: 1; transform: none; transition-delay: 240ms; }
.eteg-case-problems.is-revealed .eteg-case-problems__card:nth-child(3) { opacity: 1; transform: none; transition-delay: 320ms; }
.eteg-case-problems.is-revealed .eteg-case-problems__card:nth-child(4) { opacity: 1; transform: none; transition-delay: 400ms; }
.eteg-case-problems.is-revealed .eteg-case-problems__card:nth-child(5) { opacity: 1; transform: none; transition-delay: 480ms; }
.eteg-case-problems.is-revealed .eteg-case-problems__card:nth-child(6) { opacity: 1; transform: none; transition-delay: 560ms; }

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

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

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

  .eteg-case-problems.eteg-reveal .eteg-case-problems__heading,
  .eteg-case-problems.eteg-reveal .eteg-case-problems__card {
    opacity: 1; transform: none; transition: none;
  }
}