/* =============================================================
   eteg-sectors-bento — tokens do design-system.json (ETEG 2023)
   ─────────────────────────────────────────────────────────────
   colors.brand.primary     → #1563FF  (CTA card bg, ícones, destaque)
   colors.text.heading      → #2D2D2B  (heading, card titles, subtext)
   colors.text.on_primary   → #FFFFFF  (texto no card CTA)
   colors.border.default    → #EAEAE8  (borda sutil dos cards)
   colors.background.default → #FFFFFF  (seção, fundo dos cards)
   typography.fonts.heading → "Anybody, sans-serif"
   layout.section_padding   → 96px desktop / 64px tablet / 48px mobile
   layout.max_width         → 1440px
   spacing.scale.10         → 80px (gap header→cards, conforme Figma)
   spacing.scale.5          → 40px (padding interno dos cards, conforme Figma)

   Figma: "Section - BentoBoxArsenal" — canvas 1999px, inner container 1440px
   Medidas já em escala CSS (dentro do target_container) — sem conversão ×0.7204
   Heading: Anybody 77px fw=400 italic uppercase
   "Indústria": character override fw=700, color=#1663ff → DS #1563FF

   Seletores para "CSS Personalizado" no Elementor (painel > Avançado):
   .eteg-sectors-bento           → wrapper externo (seção completa)
   .eteg-sectors-bento__inner    → container max-width 1440px
   .eteg-sectors-bento__header   → linha flex heading + subtext
   .eteg-sectors-bento__heading  → título principal (h2)
   .eteg-sectors-bento__highlight → palavra em destaque (span)
   .eteg-sectors-bento__subtext  → parágrafo complementar
   .eteg-sectors-bento__cards    → grid de cards (ul)
   .eteg-sectors-bento__card     → card individual (li)
   .eteg-sectors-bento__card--cta → card azul de CTA
   .eteg-sectors-bento__card-icon → wrapper do ícone
   .eteg-sectors-bento__card-body → grupo título + descrição
   .eteg-sectors-bento__cta-btn  → botão "Ver todos"
   ============================================================= */

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

/* =============================================================
   EXTRA SMALL — max-width: 374px
   Galaxy Fold fechado (280px), iPhone SE 1ª gen (320px)
   ============================================================= */
@media (max-width: 374px) {

  .eteg-sectors-bento__heading {
    font-size: 1.75rem;
  }

  .eteg-sectors-bento__card {
    padding: 20px;
  }
}

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

.eteg-sectors-bento {
  background-color: #ffffff; /* colors.background.default */
  padding: 48px 0;           /* layout.section_padding.mobile */
}

.eteg-sectors-bento__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 16px; /* layout.container_padding.mobile */
  display: flex;
  flex-direction: column;
  gap: 40px; /* mobile: reduzido de 80px */
}

/* ── Header: mobile empilhado ───────────────────────────────── */
.eteg-sectors-bento__header {
  display: flex;
  flex-direction: column;
  gap: 24px; /* spacing.scale.3 */
}

.eteg-sectors-bento__heading {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: var(--eteg-section-heading-size);
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #2d2d2b; /* colors.text.heading */
}

.eteg-sectors-bento__highlight {
  color: #1563ff;      /* colors.brand.primary */
  font-weight: 800;    /* Figma: character override fw=700; usando 800 para match visual */
  font-style: inherit;
}

.eteg-sectors-bento__subtext {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: var(--eteg-body-size); /* padronizado 16px */
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.4;
  color: #2d2d2b;
  max-width: 320px;
}

/* ── Cards: mobile 1 coluna ─────────────────────────────────── */
.eteg-sectors-bento__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px; /* mobile */
}

.eteg-sectors-bento__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffffff;
  border: 1px solid #eaeae8; /* colors.border.default */
  border-radius: 20px;        /* Figma: 20px — não converter (decisão de marca) */
  padding: 24px;              /* mobile */
  min-height: 180px;
  transition: background-color 220ms cubic-bezier(0, 0, 0.2, 1),
              border-color 220ms cubic-bezier(0, 0, 0.2, 1),
              transform 220ms cubic-bezier(0, 0, 0.2, 1);
}

/* Hover: fundo azul claro (primary_light #E8EFFF) + borda dashed accent (#CCA6ED) + lift
   Elementor gera: .elementor-20695 .elementor-element.elementor-element-XXXXXX .eteg-sectors-bento__card
   com especificidade (0,4,0) e carrega DEPOIS do nosso CSS.
   Solução: adicionar .eteg-sectors-bento__cards para chegar a (0,5,0) e garantir precedência. */
.eteg-sectors-bento .eteg-sectors-bento__cards .eteg-sectors-bento__card:not(.eteg-sectors-bento__card--cta):hover {
  background-color: #e8efff; /* colors.brand.primary_light */
  transform: translateY(-3px);
}

.eteg-sectors-bento .eteg-sectors-bento__cards .eteg-sectors-bento__card--cta:hover {
  transform: translateY(-3px);
}

/* Card ícone */
.eteg-sectors-bento__card-icon {
  color: #1563ff;
  display: flex;
  align-items: center;
}

.eteg-sectors-bento__card-icon i,
.eteg-sectors-bento__card-icon svg {
  font-size: 32px;
  width: 32px;
  height: 32px;
  display: block;
}

/* Card corpo (título + descrição) */
.eteg-sectors-bento__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px; /* spacing.scale.1 */
}

.eteg-sectors-bento__card-title {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: var(--eteg-section-subheading-size);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  color: #2d2d2b;
}

.eteg-sectors-bento__card-desc {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: var(--eteg-body-size); /* padronizado 16px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* Figma: 1.4px @ 14px = 0.1em */
  line-height: 1.4;
  color: #2d2d2b;
}

/* Card clicável — link que preenche o card */
.eteg-sectors-bento__card-link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: inherit;
}

.eteg-sectors-bento__card-link:focus-visible {
  outline: 2px solid #1563ff;
  outline-offset: 4px;
  border-radius: 20px;
}

/* ── Card CTA ─────────────────────────────────────────────────── */
.eteg-sectors-bento__card--cta {
  background-color: #1563ff;
  border-color: transparent;
}

.eteg-sectors-bento__cta-top {
  display: flex;
  justify-content: flex-end;
}

.eteg-sectors-bento__cta-arrow {
  font-family: "Anybody", sans-serif;
  font-size: 1.5rem;
  color: #ffffff;
  line-height: 1;
}

.eteg-sectors-bento__cta-body {
  display: flex;
  flex-direction: column;
  gap: 16px; /* spacing.scale.2 */
}

.eteg-sectors-bento__cta-label {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: 1rem; /* 16px mobile */
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  color: #ffffff;
}

.eteg-sectors-bento__cta-btn {
  display: block;
  width: 100%;
  background-color: #ffffff;
  color: #1563ff;
  padding: 12px;
  font-family: "Anybody", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border-radius: 8px; /* colors.border_radius.md */
  transition: opacity 200ms cubic-bezier(0, 0, 0.2, 1);
}

.eteg-sectors-bento__cta-btn:hover,
.eteg-sectors-bento__cta-btn:focus-visible {
  opacity: 0.9;
}

.eteg-sectors-bento__cta-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

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

  .eteg-sectors-bento__inner {
    padding-inline: 20px; /* layout.container_padding.tablet */
  }

  .eteg-sectors-bento__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .eteg-sectors-bento__card {
    min-height: 220px;
  }
}

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

  .eteg-sectors-bento__inner {
    gap: 24px;
  }
}

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

  .eteg-sectors-bento {
    padding: 64px 0; /* layout.section_padding.tablet */
  }

  .eteg-sectors-bento__inner {
    padding-inline: 20px; /* layout.container_padding.tablet — alinha com demais widgets */
    gap: 48px;
  }

  /* Header: 2 colunas — heading esquerda, subtext direita */
  .eteg-sectors-bento__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
  }

  .eteg-sectors-bento__heading-wrap {
    flex: 1 1 auto;
    max-width: 60%;
  }

  .eteg-sectors-bento__subtext-wrap {
    flex: 0 0 auto;
    max-width: 300px;
    align-self: center;
  }

  .eteg-sectors-bento__subtext {
    max-width: none;
  }

  /* Cards: grid 2+3 — linha 1: 2 cards iguais; linha 2: 2 regulares + CTA menor.
     14 colunas: linha1 = 7+7, linha2 = 5+5+4 (ratio CTA/regular ≈ 0.8). */
  .eteg-sectors-bento__cards {
    grid-template-columns: repeat(14, 1fr);
    gap: 16px;
  }

  /* Linha 1: 2 cards, cada um = 50% */
  .eteg-sectors-bento__cards .eteg-sectors-bento__card:nth-child(1),
  .eteg-sectors-bento__cards .eteg-sectors-bento__card:nth-child(2) {
    grid-column: span 7;
  }

  /* Linha 2: cards regulares */
  .eteg-sectors-bento__cards .eteg-sectors-bento__card:nth-child(3),
  .eteg-sectors-bento__cards .eteg-sectors-bento__card:nth-child(4) {
    grid-column: span 5;
  }

  /* Linha 2: card CTA — menor que os regulares (mesmo ratio do desktop) */
  .eteg-sectors-bento__cards .eteg-sectors-bento__card--cta {
    grid-column: span 4;
  }

  .eteg-sectors-bento__card {
    padding: 32px;
    min-height: 260px;
  }

  .eteg-sectors-bento__cta-label {
    font-size: 1.125rem; /* 18px tablet */
  }
}

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

  .eteg-sectors-bento {
    padding: 96px 0; /* layout.section_padding.desktop */
  }

  .eteg-sectors-bento__heading {
    font-size: var(--eteg-section-heading-size);
  }

  .eteg-sectors-bento__inner {
    padding-inline: 24px; /* layout.container_padding.desktop */
    gap: 80px;            /* Figma: gap header→cards = 80px (spacing.scale.10) */
  }

  /* Header: proporções Figma — heading ~46% + espaço + subtext 320px */
  .eteg-sectors-bento__heading-wrap {
    max-width: 672px; /* Figma: heading frame 672px (dentro do container 1440px) */
  }

  .eteg-sectors-bento__subtext-wrap {
    max-width: 320px; /* Figma: subtext frame 320px */
  }

  /* Cards: 5 colunas — Figma: sector=288px × 4, CTA=208px × 1, gap=20px × 4 = 1440px */
  .eteg-sectors-bento__cards {
    grid-template-columns: repeat(4, 1fr) 0.72fr; /* 208/288 ≈ 0.72 */
    gap: 20px; /* Figma: gap=20px entre cards */
  }

  /* Reset dos spans do tablet (14-col) — mesma especificidade que :nth-child(1),
     vem depois no arquivo → ganha pelo cascade */
  .eteg-sectors-bento__cards .eteg-sectors-bento__card:nth-child(n),
  .eteg-sectors-bento__cards .eteg-sectors-bento__card--cta {
    grid-column: auto;
  }

  .eteg-sectors-bento__card {
    padding: 40px; /* Figma: 40px em todos os lados */
    min-height: 293px; /* Figma: altura dos cards = 293px */
  }

  .eteg-sectors-bento__card-title {
    font-size: var(--eteg-section-subheading-size);
  }

  .eteg-sectors-bento__card-desc {
    min-height: calc(3 * 1.4em); /* 3 linhas × line-height — nivela body heights p/ alinhar titles */
  }

  .eteg-sectors-bento__cta-label {
    font-size: 1.375rem; /* 22px desktop */
  }
}

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

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

  .eteg-sectors-bento__inner {
    padding-inline: 48px; /* era 24px */
    gap: 48px;            /* era 80px */
  }

  .eteg-sectors-bento__heading-wrap {
    max-width: 520px; /* era 672px */
  }

  .eteg-sectors-bento__subtext-wrap {
    max-width: 260px; /* era 320px */
  }

  .eteg-sectors-bento__cards {
    grid-template-columns: repeat(4, 1fr) 0.72fr; /* mantém estrutura */
    gap: 14px; /* era 20px */
  }

  .eteg-sectors-bento__card {
    padding: 24px;     /* era 40px */
    min-height: 220px; /* era 293px */
  }

  .eteg-sectors-bento__card-title {
    font-size: var(--eteg-section-subheading-size); /* mantém var */
  }

  .eteg-sectors-bento__card-desc {
    min-height: calc(3 * 1.4em); /* mantém proporção de alinhamento */
  }

  .eteg-sectors-bento__cta-label {
    font-size: 1.125rem; /* era 1.375rem */
  }
}

/* =============================================================
   WIDE — min-width: 1440px
   Alinha com eteg-footer__container (80px) em viewports > 1440px.
   ============================================================= */
@media (min-width: 1440px) {

  .eteg-sectors-bento {
    padding: 96px 0 !important; /* restaura — !important para sobrescrever 1280px */
  }

  .eteg-sectors-bento__inner {
    padding-inline: 80px; /* restaura */
    gap: 80px;            /* restaura */
  }

  .eteg-sectors-bento__heading-wrap {
    max-width: 672px; /* restaura */
  }

  .eteg-sectors-bento__subtext-wrap {
    max-width: 320px; /* restaura */
  }

  .eteg-sectors-bento__cards {
    grid-template-columns: repeat(4, 1fr) 0.72fr; /* restaura */
    gap: 20px; /* restaura */
  }

  .eteg-sectors-bento__card {
    padding: 40px;      /* restaura */
    min-height: 293px;  /* restaura */
  }

  .eteg-sectors-bento__card-title {
    font-size: var(--eteg-section-subheading-size); /* restaura */
  }

  .eteg-sectors-bento__card-desc {
    min-height: calc(3 * 1.4em); /* restaura */
  }

  .eteg-sectors-bento__cta-label {
    font-size: 1.375rem; /* restaura */
  }
}

/* ── Content stagger entry (eteg-scroll-reveal.js) ──────────── */
.eteg-sectors-bento.eteg-reveal .eteg-sectors-bento__header {
  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-sectors-bento.is-revealed .eteg-sectors-bento__header {
  opacity: 1;
  transform: none;
  transition-delay: 60ms;
}

/* =============================================================
   ACESSIBILIDADE — prefers-reduced-motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .eteg-sectors-bento__cta-btn,
  .eteg-sectors-bento__card {
    transition: none;
  }

  .eteg-sectors-bento__card:not(.eteg-sectors-bento__card--cta):hover {
    transform: none;
  }

  .eteg-sectors-bento.eteg-reveal .eteg-sectors-bento__header {
    opacity: 1; transform: none; transition: none;
  }

  .eteg-sectors-bento__card-link:focus-visible {
    outline-offset: 2px;
  }
}