/* =============================================================
   eteg-event-featured — tokens do design-system.json (ETEG 2023)
   ─────────────────────────────────────────────────────────────
   Figma: "Section — Próximos" node 35:5033 (1999×956px)
   Página de destino: /eventos, /webinars, /blog (próximos eventos)

   colors.brand.primary     → #1662ff  (highlight título, valores info, CTA)
   colors.brand.accent      → #cba6ec  (eyebrow, painel info bg)
   colors.text.heading      → #000000  (título da seção)
   colors.text.white        → #f2f2f7  (título do evento sobre imagem)
   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
   section gap 48px      → 34.6 → DS 32px
   card padding left 64px → 46.1 → DS 48px
   card padding top/bottom 64px → 46.1 → DS 48px
   card internal gap 80px → 57.6 → DS 56px (left←→info panel)

   Valores não converter:
   card border-radius: 32px (decisão de marca)
   event title: 40px | heading: 48px | info: 16px

   Seletores para "CSS Personalizado" no Elementor:
   .eteg-event-featured                    → seção (fundo branco)
   .eteg-event-featured__inner             → container max-width 1440px
   .eteg-event-featured__eyebrow           → pré-título lilás
   .eteg-event-featured__heading           → título italic uppercase
   .eteg-event-featured__heading-highlight → "em breve" em azul bold
   .eteg-event-featured__card              → card com imagem de fundo
   .eteg-event-featured__card-overlay      → overlay escuro sobre a imagem
   .eteg-event-featured__card-inner        → flex row (left + info panel)
   .eteg-event-featured__card-left         → coluna de conteúdo do evento
   .eteg-event-featured__event-label       → "PRÓXIMO EVENTO" (11px, branco)
   .eteg-event-featured__event-title       → título do evento (40px, bold, claro)
   .eteg-event-featured__event-description → descrição breve (16px, branco)
   .eteg-event-featured__cta               → botão "QUERO PARTICIPAR"
   .eteg-event-featured__info-panel        → painel lilás à direita
   .eteg-event-featured__info-list         → dl de linhas de info
   .eteg-event-featured__info-row          → div dt+dd de cada linha
   .eteg-event-featured__info-label        → rótulo dark uppercase
   .eteg-event-featured__info-value        → valor azul bold uppercase
   ============================================================= */

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

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

  .eteg-event-featured__heading {
    font-size: 1.75rem;
  }

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

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

.eteg-event-featured {
  background-color: #ffffff;
  padding: 48px 0;
}

.eteg-event-featured__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

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

/* ── Heading da seção ────────────────────────────────────────── */
.eteg-event-featured__heading {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: 1.75rem; /* 28px mobile */
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.1;
  color: #000000;
}

.eteg-event-featured__heading-highlight {
  font-weight: 700;
  font-style: italic;
  color: #1662ff;
}

/* ── Card de destaque ────────────────────────────────────────── */
.eteg-event-featured__card {
  position: relative;
  border-radius: 20px; /* mobile — reduzido */
  background-color: #1a1a1f;
  background-image: url('../img/event-featured/card-bg.png'); /* fallback CSS */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.eteg-event-featured__card-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 26, 31, 0.60);
  z-index: 0;
}

.eteg-event-featured__card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Coluna esquerda: conteúdo do evento ─────────────────────── */
.eteg-event-featured__card-left {
  padding: 32px 24px; /* mobile */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eteg-event-featured__event-label {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: 0.6875rem; /* 11px — Figma: 11px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.4;
  color: #ffffff;
}

.eteg-event-featured__event-title {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: 1.75rem; /* 28px mobile */
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  color: #f2f2f7; /* Figma: #f2f2f7 */
}

.eteg-event-featured__event-description {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: var(--eteg-body-size);
  font-weight: 400;
  line-height: 1.6;
  color: #ffffff;
}

/* Botão CTA */
.eteg-event-featured__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 12px 32px; /* Figma: 16px 40px × 0.7204 → DS 12px 32px */
  background-color: #1662ff;
  color: #ffffff;
  border-radius: 12px; /* Figma: 12px — não converter */
  font-family: "Anybody", sans-serif;
  font-size: 1rem; /* 16px — Figma: 16px */
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.4;
  transition: opacity 200ms ease;
}

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

.eteg-event-featured__cta:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* ── Painel de informações (direita) ─────────────────────────── */
.eteg-event-featured__info-panel {
  background-color: #cba6ec;
  padding: 32px 24px; /* mobile */
}

.eteg-event-featured__info-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.eteg-event-featured__info-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eteg-event-featured__info-label {
  font-family: "Anybody", sans-serif;
  font-size: 0.875rem; /* 14px mobile */
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.4;
  color: #1e1e1e;
  margin: 0;
}

.eteg-event-featured__info-value {
  font-family: "Anybody", sans-serif;
  font-size: 0.875rem; /* 14px mobile */
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4;
  color: #1662ff;
  margin: 0;
}

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

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

  .eteg-event-featured__heading {
    font-size: 2.25rem;
  }

  /* Painel de info em linha */
  .eteg-event-featured__info-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

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

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

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

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

  .eteg-event-featured__inner {
    padding-inline: 24px;
    gap: 28px;
  }

  .eteg-event-featured__card {
    border-radius: 28px;
  }

  /* Card layout horizontal a partir de tablet */
  .eteg-event-featured__card-inner {
    flex-direction: row;
    align-items: stretch;
  }

  .eteg-event-featured__card-left {
    flex: 1;
    padding: 40px 40px; /* tablet */
    gap: 20px;
    justify-content: center;
  }

  .eteg-event-featured__event-title {
    font-size: 2.25rem;
  }

  .eteg-event-featured__info-panel {
    flex: 0 0 280px;
    padding: 0;        /* rows preenchem o painel, sem padding externo */
    border-radius: 0;
    overflow: hidden;
  }

  .eteg-event-featured__info-list {
    display: flex;     /* override do grid 2-col do 600px breakpoint */
    flex-direction: column;
    height: 100%;
    gap: 0;
  }

  /* Cada linha: rótulo (lilás) + valor (branco) lado a lado */
  .eteg-event-featured__info-row {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    gap: 0;
  }

  .eteg-event-featured__info-row:last-child {
    border-bottom: none;
    border-bottom-left-radius: 24px; /* Figma: 0 0 0 24px na última row */
  }

  .eteg-event-featured__info-row:first-child {
    border-top-left-radius: 24px; /* Figma: 24px 0 0 0 na primeira row */
  }

  /* Rótulo: fundo lilás herdado do painel, padding esquerdo */
  .eteg-event-featured__info-label {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 0 0 24px; /* Figma: row padding-left 32px × 0.7204 ≈ 24px */
    font-size: 1rem;
    color: #1e1e1e;
    margin: 0;
  }

  /* Valor: caixa branca ocupa ~47% da largura do painel */
  .eteg-event-featured__info-value {
    flex: 0 0 47%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background-color: #ffffff;
    color: #1662ff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
  }
}

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

  .eteg-event-featured {
    padding: 96px 0; /* Figma: 128px × 0.7204 */
  }

  .eteg-event-featured__inner {
    padding-inline: 32px;
    gap: 32px; /* Figma: section gap 48px × 0.7204 = 34.6 → DS 32px */
  }

  .eteg-event-featured__heading {
    font-size: 3rem; /* 48px — Figma: 48px */
  }

  .eteg-event-featured__card {
    border-radius: 32px; /* Figma: 32px — não converter */
  }

  .eteg-event-featured__card-left {
    padding: 48px 56px 48px 48px; /* Figma: 64px × 0.7204 = 46 → DS 48px */
    gap: 24px; /* Figma: Left gap 32px × 0.7204 = 23 → DS 24px */
  }

  .eteg-event-featured__event-title {
    font-size: 2.5rem; /* 40px — Figma: 40px */
    line-height: 1.1;
  }

  /* __event-description já usa var(--eteg-body-size) */

  .eteg-event-featured__info-panel {
    flex: 0 0 340px;
    padding: 0; /* rows-based layout mantido do tablet */
  }
}

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

  .eteg-event-featured {
    padding: 56px 0 !important;
  }

  .eteg-event-featured__inner {
    padding-inline: 48px !important;
    gap: 20px !important;
  }

  .eteg-event-featured__eyebrow {
    font-size: 0.8125rem !important;
  }

  .eteg-event-featured__heading {
    font-size: 1.75rem !important;
  }

  .eteg-event-featured__card {
    border-radius: 20px !important;
  }

  .eteg-event-featured__card-left {
    padding: 32px 40px 32px 32px !important;
    gap: 14px !important;
  }

  .eteg-event-featured__event-title {
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
  }

  .eteg-event-featured__event-description {
    font-size: 0.875rem !important;
  }

  .eteg-event-featured__cta {
    padding: 8px 20px !important;
    font-size: 0.875rem !important;
  }

  .eteg-event-featured__info-panel {
    flex: 0 0 240px !important;
  }

  .eteg-event-featured__info-label {
    font-size: 0.8125rem !important;
    padding-left: 16px !important;
  }

  .eteg-event-featured__info-value {
    font-size: 0.8125rem !important;
  }
}

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

  .eteg-event-featured {
    padding: 96px 0 !important;
  }

  .eteg-event-featured__inner {
    padding-inline: 80px !important;
    gap: 32px !important;
  }

  .eteg-event-featured__eyebrow {
    font-size: 1.0625rem !important;
  }

  .eteg-event-featured__heading {
    font-size: 3rem !important;
  }

  .eteg-event-featured__card {
    border-radius: 32px !important;
  }

  .eteg-event-featured__card-left {
    padding: 48px 56px 48px 48px !important;
    gap: 24px !important;
  }

  .eteg-event-featured__event-title {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }

  .eteg-event-featured__event-description {
    font-size: var(--eteg-body-size) !important;
  }

  .eteg-event-featured__cta {
    padding: 12px 32px !important;
    font-size: 1rem !important;
  }

  .eteg-event-featured__info-panel {
    flex: 0 0 340px !important;
  }

  .eteg-event-featured__info-label {
    font-size: 1rem !important;
    padding-left: 24px !important;
  }

  .eteg-event-featured__info-value {
    font-size: 1rem !important;
  }
}

/* ── Content entry (eteg-scroll-reveal.js) ──────────────────── */
.eteg-event-featured.eteg-reveal .eteg-event-featured__eyebrow {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 450ms cubic-bezier(0, 0, 0.2, 1), transform 450ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-event-featured.is-revealed .eteg-event-featured__eyebrow { opacity: 1; transform: none; transition-delay: 60ms; }

.eteg-event-featured.eteg-reveal .eteg-event-featured__heading {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 550ms cubic-bezier(0, 0, 0.2, 1), transform 550ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-event-featured.is-revealed .eteg-event-featured__heading { opacity: 1; transform: none; transition-delay: 160ms; }

.eteg-event-featured.eteg-reveal .eteg-event-featured__card {
  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-event-featured.is-revealed .eteg-event-featured__card { opacity: 1; transform: none; transition-delay: 300ms; }

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

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

  .eteg-event-featured.eteg-reveal .eteg-event-featured__eyebrow,
  .eteg-event-featured.eteg-reveal .eteg-event-featured__heading,
  .eteg-event-featured.eteg-reveal .eteg-event-featured__card {
    opacity: 1; transform: none; transition: none;
  }
}