/*
  Breakpoints reais do projeto Framer, confirmados por bisseção ao vivo em
  ejlsystem.framer.website (o valor 809px estimado na auditoria original
  estava impreciso — o corte real é 768px, não 809px):
  Desktop >= 1200px · Tablet 768–1199px · Phone <= 767px
*/

/* ================= >=768px: navbar inline, hero full-bleed ================= */
@media (min-width: 768px) {
  .nav-links,
  .nav-cta {
    display: inline-flex;
  }

  .nav-divider {
    display: block;
  }

  .menu-toggle {
    display: none;
  }

  /* a foto precisa de uma altura explícita para preencher a seção, já que
     .hero__content (position:relative, em fluxo normal) é quem define a
     altura do .hero — o aspect-ratio replica a proporção real medida
     (1200x776) para a imagem sempre cobrir a seção inteira.
     width:100% é obrigatório aqui: sem uma largura explícita, aspect-ratio
     + uma altura mínima inverte o cálculo e faz a seção ficar mais larga
     que a viewport (bug encontrado e corrigido durante o QA). */
  .hero {
    width: 100%;
    aspect-ratio: 1200 / 776;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* no tablet a foto real é mais estreita que o texto por padrão (aspect-ratio
     puro deixaria a seção baixa demais); um piso de altura evita que o Hero
     fique espremido antes do conteúdo caber */
  .hero {
    min-height: 620px;
  }
}

/* ================= Tablet (768–1199px) ================= */
@media (max-width: 1199px) {
  .container,
  .section__container {
    padding-inline: var(--section-padding-x-tablet);
  }

  .nav-links {
    gap: 20px;
  }

  .hero__title {
    font-size: 43px; /* confirmado ao vivo em ejlsystem.framer.website (viewport 768–1199px) */
  }

  .hero__content {
    padding: 56px 32px;
    gap: 56px;
  }

  .section { padding-block: 56px; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid rgb(31, 31, 31); padding-bottom: 24px; }
  .stat:nth-child(3), .stat:nth-child(4) { padding-top: 24px; }

  .pain-point__grid { grid-template-columns: 1fr; }
  .pain-card { border-left: none; border-top: 1px solid rgb(31, 31, 31); padding: 32px 0; }
  .pain-card:first-child { border-top: none; padding-top: 0; }

  .solution__grid,
  .about__grid,
  .how-it-works__layout {
    grid-template-columns: 1fr;
  }

  /* imagem empilha abaixo do texto em largura cheia (confirmado ao vivo:
     ambas as colunas ficam com a mesma largura no tablet, não é ocultada) */
  .solution__media { min-height: 280px; margin-top: 40px; }

  .about__content { padding-left: 0; margin-top: 40px; max-width: none; }

  .how-it-works__content { max-width: none; }
  .how-it-works__steps { margin-top: 40px; }

  .service__layout { grid-template-columns: 1fr; gap: 40px; }
  .service__index { position: static; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
  .service__index-list { flex-direction: row; flex-wrap: wrap; gap: 12px 20px; }

  .team__grid { grid-template-columns: repeat(2, 1fr); }

  .pricing__grid { grid-template-columns: 1fr; gap: 24px; }
  .pricing-card + .pricing-card { border-left: 1px solid var(--color-border-subtle); }
}

/* ================= Phone (<= 767px) ================= */
@media (max-width: 767px) {
  .container {
    padding-inline: var(--section-padding-x-mobile);
  }

  .header__inner {
    height: 52px;
    padding-top: 12px;
  }

  .site-logo {
    height: 24px;
  }

  .menu-list a {
    font-size: 26px;
  }

  /* estrutura muda (não é só escala): no site original, abaixo de 768px a
     foto deixa de ser fundo full-bleed atrás do texto e passa a ficar em
     fluxo normal, empilhada ABAIXO do conteúdo, dentro de uma caixa contida
     — confirmado ao vivo (texto termina em y~354, foto começa em y~631) */
  .hero {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .hero__bg {
    position: static;
    order: 2;
    aspect-ratio: 366 / 198; /* proporção real medida em ejlsystem.framer.website a 390px */
    margin-inline: var(--section-padding-x-mobile);
    margin-bottom: 24px;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .hero__content {
    order: 1;
    max-width: none;
    width: 100%;
    padding: var(--hero-content-padding-mobile);
    gap: 40px;
  }

  .hero__title {
    font-size: var(--h1-size-mobile);
  }

  .hero__lead {
    max-width: none;
  }

  .hero__actions {
    width: 100%;
  }

  .btn--primary {
    width: 100%;
    justify-content: space-between;
  }

  .section { padding-block: 48px; }

  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-right: none !important; border-bottom: 1px solid rgb(31, 31, 31); padding: 24px 0; }
  .stat:last-child { border-bottom: none; }

  .team__grid { grid-template-columns: 1fr; }

  .mini-stats { grid-template-columns: repeat(2, 1fr); }

  .about__media { padding: 24px; }

  .pricing-card { padding: 32px 24px; }

  .pricing-cta { flex-direction: column; align-items: flex-start; padding: 32px 24px; }

  .faq-item__question { font-size: 16px; padding-block: 20px; }

  .team-modal__card { grid-template-columns: 1fr; max-height: 100%; }
  .team-modal__photo { aspect-ratio: 4 / 3; }
}

@media (max-width: 375px) {
  .hero__content {
    padding-inline: var(--section-padding-x-mobile);
  }
}