/**
 * responsive.css - Media Queries (Mobile-First)
 *
 * Estilos base sao mobile. Breakpoints progressivos:
 * 600px (tablet portrait), 768px (tablet landscape),
 * 1024px (desktop), 1280px (large desktop).
 */

/* ============================================
   MOBILE BASE (< 600px)
   Definido nos estilos base de components e sections.
   Aqui ficam apenas overrides para garantir layout mobile.
   ============================================ */

/* Header mobile: esconde nav, mostra hamburger */
.header__nav {
  display: none;
}

.header__hamburger {
  display: flex;
}

/* Menu mobile aberto (overlay fullscreen) */
.header__nav.open {
  display: flex;
  position: fixed;
  inset: 0;
  top: var(--header-height);
  background-color: var(--bg-dark);
  z-index: var(--z-mobile-menu);
  flex-direction: column;
  padding: var(--space-xl);
  align-items: center;
  justify-content: flex-start;
}

.header__nav.open .header__nav-list {
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

.header__nav.open .header__nav-link {
  font-size: var(--fs-h3);
}

/* Hero split: empilhar em mobile */
.hero__split {
  flex-direction: column-reverse;
}

.hero__text {
  flex: none;
  padding: var(--space-xl) var(--container-padding);
  text-align: center;
  max-width: none;
}

.hero__subtitle {
  margin-inline: auto;
}

.hero .btn-cta {
  align-self: center;
}

.hero__photo {
  flex: none;
  height: 50vh;
  min-height: 300px;
  max-height: 450px;
}

/* Hero metricas: 2x2 em mobile */
.hero__metrics {
  grid-template-columns: repeat(2, 1fr);
}

/* Metodo: 1 coluna mobile */
.metodo__split {
  grid-template-columns: 1fr;
}

/* Testimonials: 1 coluna */
.testimonials__grid {
  grid-template-columns: 1fr;
}

/* About: 1 coluna empilhado */
.about {
  grid-template-columns: 1fr;
  text-align: center;
}

.about__photo {
  order: -1;
}

.about__photo img {
  margin-inline: auto;
}

.about__credentials {
  align-items: center;
}

/* Footer: 2 colunas */
.footer__grid {
  grid-template-columns: repeat(2, 1fr);
}

.footer__bottom {
  flex-direction: column;
  text-align: center;
}

/* Carrossel: cards menores em mobile */
.carousel__card {
  flex: 0 0 260px;
  height: 360px;
}

/* Setas: esconder em mobile (scroll nativo com toque) */
.carousel__arrow {
  display: none;
}

/* Botoes fullwidth */
.btn-cta {
  width: 100%;
  max-width: 400px;
}

/* Speaker: 1 coluna empilhado */
.speaker {
  grid-template-columns: 1fr;
  text-align: center;
}

.speaker__photo img {
  margin-inline: auto;
  width: 220px;
}

.speaker__quote {
  text-align: left;
}

.speaker__credentials {
  justify-content: center;
}

/* Form row: 1 coluna */
.contact-form__row {
  grid-template-columns: 1fr;
}


/* ============================================
   TABLET PORTRAIT (>= 600px)
   ============================================ */

@media (min-width: 600px) {
  .btn-cta {
    width: auto;
  }

  .hero__metrics {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Metricas menores em tablet para caber em 4 colunas */
  .hero__metric-value {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  }

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

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

  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}


/* ============================================
   TABLET LANDSCAPE (>= 768px)
   ============================================ */

@media (min-width: 768px) {
  /* Header: mostrar nav, esconder hamburger */
  .header__nav {
    display: flex;
  }

  .header__hamburger {
    display: none;
  }

  /* Nav mais compacto em tablets */
  .header__nav-list {
    gap: var(--space-md);
  }

  /* Hero: transicao para split horizontal */
  .hero__split {
    flex-direction: row;
  }

  .hero__text {
    flex: 0 0 55%;
    text-align: left;
    padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--container-padding);
  }

  .hero__subtitle {
    margin-inline: initial;
  }

  .hero .btn-cta {
    align-self: flex-start;
  }

  .hero__photo {
    flex: 1;
    height: auto;
    max-height: none;
    min-height: auto;
  }

  /* Setas do carrossel visiveis a partir de tablet landscape */
  .carousel__arrow {
    display: flex;
  }

  /* About: 2 colunas */
  .about {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }

  .about__photo {
    order: 0;
  }

  .about__photo img {
    margin-inline: initial;
  }

  .about__credentials {
    align-items: flex-start;
  }

  /* Testimonials: 3 colunas */
  .testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Speaker: 2 colunas */
  .speaker {
    grid-template-columns: auto 1fr;
    text-align: left;
  }

  .speaker__photo img {
    margin-inline: initial;
    width: 280px;
  }

  .speaker__credentials {
    justify-content: flex-start;
  }
}


/* ============================================
   DESKTOP (>= 1024px)
   ============================================ */

@media (min-width: 1024px) {
  .header__nav-list {
    gap: var(--space-lg);
  }

  /* Hero: 60/40 split no desktop */
  .hero__text {
    flex: 0 0 60%;
    padding: var(--space-3xl) var(--space-3xl) var(--space-3xl) clamp(2rem, 8vw, 8rem);
  }

  .hero__metric-value {
    font-size: var(--fs-counter);
  }

  /* Carrossel: cards maiores no desktop */
  .carousel__card {
    flex: 0 0 340px;
    height: 480px;
  }

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

  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer__bottom {
    flex-direction: row;
    text-align: left;
  }
}


/* ============================================
   LARGE DESKTOP (>= 1280px)
   ============================================ */

@media (min-width: 1280px) {
  .section {
    padding-block: clamp(5rem, 12vw, 9rem);
  }

  .about {
    gap: var(--space-3xl);
  }

  /* Padding lateral mínimo no large desktop */
  .carousel {
    padding-inline: clamp(1rem, 2vw, 1.5rem);
  }
}

/* ============================================
   PALESTRAS - RESPONSIVO
   ============================================ */

/* Mobile: hero centralizado, grid 1 coluna */
@media (max-width: 767px) {
  .hero--palestras .hero__content {
    margin-left: 0;
    text-align: center;
    padding-inline: var(--space-lg);
  }

  .hero--palestras .hero__cta-group {
    justify-content: center;
  }

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

/* Tablet: grid 2 colunas */
@media (min-width: 768px) and (max-width: 1023px) {
  .themes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}