/* =============================================================
   eteg-case-study-hero — tokens do design-system.json (ETEG 2023)
   ─────────────────────────────────────────────────────────────
   Figma: "HeroSection" node 695:403 (1999×760px)
   Página de destino: /cases/{slug} (single case study)

   colors.brand.primary     → #1662ff  (fundo azul)
   colors.text.dark         → #1a1a1f  (heading resultado, descrição)
   colors.background.white  → #ffffff  (eyebrow, nome do cliente)
   typography.fonts.heading → "Anybody, sans-serif"
   layout.max_width         → 1440px

   Conversões (outer_frame × 0.7204):
   section padding top 190px  → 136.9 → DS 128px
   section padding bottom 80px → 57.6 → DS 64px
   content frame 960px        → 691.6px → DS ~700px
   content gap 16px           → 11.5 → DS 12px
   deco image 560px           → 403.4 → DS ~400px

   Seletores para "CSS Personalizado" no Elementor:
   .eteg-case-study-hero                    → seção (fundo azul)
   .eteg-case-study-hero__deco              → imagem decorativa (abs, bottom-right)
   .eteg-case-study-hero__inner             → container max-width 1440px
   .eteg-case-study-hero__content           → coluna de conteúdo (~700px)
   .eteg-case-study-hero__eyebrow           → pré-título branco
   .eteg-case-study-hero__heading           → título italic uppercase
   .eteg-case-study-hero__heading-highlight → nome do cliente (branco bold)
   .eteg-case-study-hero__description       → parágrafo descritivo
   .eteg-case-study-hero__logos             → linha de logos dos parceiros
   .eteg-case-study-hero__logo              → logo individual
   ============================================================= */

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

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

  .eteg-case-study-hero__heading {
    font-size: 2rem;
  }

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

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

.eteg-case-study-hero {
  position: relative;
  background-color: #1662ff;
  padding: 48px 0 40px;
  min-height: 55vh;
}

/* Imagem decorativa — oculta mobile via switcher */
.eteg-case-study-hero__deco {
  display: none;
  position: absolute;
  top: 128px;  /* espelha o padding-top da seção no desktop → alinha com o início do conteúdo */
  bottom: 0;
  right: 32px;
  width: 40%;
  max-width: 480px;
  height: auto; /* definido por top+bottom */
  object-fit: cover;
  object-position: top right;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  animation: eteg-csh-slide-right 640ms cubic-bezier(0.34, 1.56, 0.64, 1) 80ms both;
}

/* Container */
.eteg-case-study-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* Coluna de conteúdo */
.eteg-case-study-hero__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 100%;
}

/* ── Eyebrow ─────────────────────────────────────────────────── */
.eteg-case-study-hero__eyebrow {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: 0.8125rem; /* 13px — Figma: 13px */
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4;
  color: #ffffff;
  animation: eteg-csh-fadein-up-sm 380ms cubic-bezier(0, 0, 0.2, 1) 60ms both;
}

/* ── Heading ─────────────────────────────────────────────────── */
.eteg-case-study-hero__heading {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: clamp(2rem, 5.9vw + 0.6rem, 4.5rem); /* mobile: 2rem → desktop: 4.5rem (72px) */
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.1;
  color: #1a1a1f;
  animation: eteg-csh-fadein-up 500ms cubic-bezier(0, 0, 0.2, 1) 0ms both;
}

/* Nome do cliente — branco bold */
.eteg-case-study-hero__heading-highlight {
  font-weight: 700;
  font-style: italic;
  color: #ffffff;
}

/* ── Descrição ───────────────────────────────────────────────── */
.eteg-case-study-hero__description {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: var(--eteg-body-size); /* Figma: 20-24px → padronizado 16px */
  font-weight: 400;
  line-height: 1.6;
  color: #1a1a1f;
  max-width: 55ch;
  animation: eteg-csh-fadein-up-sm 400ms cubic-bezier(0, 0, 0.2, 1) 180ms both;
}

/* ── Linha de logos ──────────────────────────────────────────── */
.eteg-case-study-hero__logos {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  align-self: flex-start; /* encolhe à largura do conteúdo no flex-column pai */
  width: fit-content;
  gap: 20px;
  background-color: #ffffff; /* Figma: fundo branco no container dos logos */
  border-radius: 12px;
  padding: 16px 24px;
  animation: eteg-csh-fadein 320ms cubic-bezier(0, 0, 0.2, 1) 320ms both;
}

.eteg-case-study-hero__logo {
  display: block;
  /* altura e largura definidas por inline style via controle do Elementor */
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
}

/* Separador vertical entre logos */
.eteg-case-study-hero__logo-sep {
  display: block;
  width: 1px;
  height: 48px;
  background-color: #e5e7eb; /* cinza claro sobre fundo branco */
  flex-shrink: 0;
}

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

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

}

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

  .eteg-case-study-hero {
    padding: 32px 0 24px;
  }

  .eteg-case-study-hero__heading {
    font-size: 2rem;
  }
}

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

  .eteg-case-study-hero {
    padding: 80px 0 48px;
  }

  /* deco oculta no tablet — só aparece a 1024px onde há espaço suficiente */

  .eteg-case-study-hero__inner {
    padding-inline: 24px;
  }

  .eteg-case-study-hero__content {
    gap: 20px;
    max-width: 100%; /* tablet: coluna única, sem limitação de largura */
  }

  .eteg-case-study-hero__logo {
    max-height: 48px;
    max-width: 140px;
  }

  .eteg-case-study-hero__logo-sep {
    height: 64px;
  }
}

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

  .eteg-case-study-hero {
    padding: 128px 0 64px; /* Figma: 190px/80px × 0.7204 */
  }

  .eteg-case-study-hero__deco {
    width: 38%; /* Figma: 560px / 1440px ≈ 39% */
    max-width: 540px;
    right: 80px;
  }

  .eteg-case-study-hero__inner {
    padding-inline: 32px;
  }

  .eteg-case-study-hero__content {
    gap: 24px;
    max-width: 700px; /* Figma: 960px × 0.7204 = 691.6px → DS 700px */
  }

  .eteg-case-study-hero__heading {
    font-size: 4.375rem; /* 70px — Figma: 70px */
    line-height: 1.1; /* Figma: 77px/70px */
  }

  .eteg-case-study-hero__logo {
    max-height: 52px;
    max-width: 160px;
  }

  .eteg-case-study-hero__logo-sep {
    height: 64px;
  }
}

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

  .eteg-case-study-hero {
    padding: 96px 0 48px !important; /* era 128px 0 64px */
    min-height: 70vh;                /* era 80vh */
  }

  .eteg-case-study-hero__deco {
    top: 96px; /* espelha padding-top: 96px do 1280px */
    width: 35%;
    max-width: 420px;
  }

  .eteg-case-study-hero__inner {
    padding-inline: 48px;
  }

  .eteg-case-study-hero__heading {
    font-size: 3.5rem; /* era 4.375rem */
  }
}

/* =============================================================
   WIDE — min-width: 1440px
   ============================================================= */

@media (min-width: 1440px) {

  .eteg-case-study-hero {
    padding: 128px 0 64px !important; /* restaura desktop — 96px do 1280px não dá folga suficiente para o breadcrumb */
  }

  .eteg-case-study-hero__deco {
    top: 128px; /* restaura: padding-top volta a 128px no 1440px */
    width: 36%;
    max-width: 420px;
  }

  .eteg-case-study-hero__inner {
    padding-inline: 80px;
  }
}

/* ── ULTRA WIDE: min-width 1600px ─────────────────────────────── */
@media (min-width: 1600px) {

  .eteg-case-study-hero__deco {
    width: 28%;       /* mantém proporção visual ~400/1440 = 27.8% */
    max-width: 360px; /* cap absoluto para viewports ≥ 1920px */
  }
}


/* ── Animação de entrada no carregamento da página ─────────────
   A hero está sempre acima do fold — usa @keyframes no load,
   sem depender do eteg-scroll-reveal (que só atua abaixo do fold).
   Só opacity + transform (GPU-composited, sem layout reflow).
   Heading sem delay — LCP element deve ficar visível o mais rápido
   possível para não prejudicar o PageSpeed.                       */

@keyframes eteg-csh-fadein-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes eteg-csh-fadein-up-sm {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes eteg-csh-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Deco: slide da direita com leve overshoot (curva spring) */
@keyframes eteg-csh-slide-right {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}


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

/* ── Entry sequencial (eteg-scroll-reveal.js) ──────────────── */
.eteg-case-study-hero.eteg-reveal .eteg-case-study-hero__heading {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms cubic-bezier(0, 0, 0.2, 1), transform 500ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-case-study-hero.is-revealed .eteg-case-study-hero__heading {
  opacity: 1;
  transform: none;
  transition-delay: 100ms;
}
.eteg-case-study-hero.eteg-reveal .eteg-case-study-hero__logos {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-case-study-hero.is-revealed .eteg-case-study-hero__logos {
  opacity: 1;
  transition-delay: 260ms;
}

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

  .eteg-case-study-hero__eyebrow,
  .eteg-case-study-hero__heading,
  .eteg-case-study-hero__description,
  .eteg-case-study-hero__logos,
  .eteg-case-study-hero__deco {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .eteg-case-study-hero.eteg-reveal .eteg-case-study-hero__deco {
    opacity: 1; transform: translateX(0); transition: none;
  }

  .eteg-case-study-hero.eteg-reveal .eteg-case-study-hero__heading,
  .eteg-case-study-hero.eteg-reveal .eteg-case-study-hero__logos {
    opacity: 1; transform: none; transition: none;
  }
}