/* ==========================================================================
   RESPONSIVE.CSS — Media queries do projeto Clube da Costura
   Breakpoints:
   - Tablet:  até 1024px (mantém duas colunas com espaçamentos reduzidos)
   - Mobile:  até 768px  (uma coluna, ordem dos elementos reorganizada)
   - Small:   até 420px  (ajustes finos de tipografia e botões)
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET — até 1024px
   Mantém o layout em duas colunas, reduzindo espaçamentos.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --section-spacing: 80px;
  }

  .hero {
    padding: 48px 0;
  }

  .hero__grid {
    gap: 32px;
  }

  .about__grid {
    grid-template-columns: 50% 50%;
    gap: 32px;
  }

  .card {
    padding: 28px 30px;
  }
}

/* --------------------------------------------------------------------------
   MOBILE — até 768px
   Layout em coluna única com reordenação dos elementos.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --section-spacing: 64px;
  }

  /* ------------------------------------------------------------------
     HERO — ordem no mobile: Texto → Imagem → Botão → Nota
     `display: contents` promove os filhos das colunas a itens diretos
     do grid, permitindo posicionar o CTA e a nota após a imagem.
     ------------------------------------------------------------------ */
  .hero {
    min-height: auto;
    padding: 56px 0 32px;
  }

  .hero__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }

  .hero__content,
  .hero__media {
    display: contents;
  }

  .hero__overline { order: 1; }
  .hero__title    { order: 2; }

  .hero__description {
    order: 3;
    margin-bottom: 32px;
  }

  .hero__phone {
    order: 4;
    max-width: 400px;
    margin-bottom: 36px;
  }

  .hero .btn--green {
    order: 5;
  }

  .hero__note {
    order: 6;
  }

  /* No mobile o texto flui naturalmente, sem quebras fixas de desktop */
  .br-desktop {
    display: none;
  }

  /* ------------------------------------------------------------------
     ABOUT — ordem no mobile: Título → Imagem → Texto → Card → Botão
     `display: contents` promove os filhos das colunas a itens diretos
     do grid, permitindo reordenar título, imagem, texto, card e botão.
     ------------------------------------------------------------------ */
  .about__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .about__content,
  .about__media {
    display: contents;
  }

  .about__title {
    order: 1;
    text-align: center;
    margin-bottom: 32px;
  }

  .about__photo {
    order: 2;
    margin: 0 auto 32px;
    max-width: 420px;
  }

  .about__text {
    order: 3;
  }

  .about .card {
    order: 4;
    margin: 32px 0;
  }

  .about .btn--purple {
    order: 5;
    align-self: center;
  }
}

/* --------------------------------------------------------------------------
   SMALL MOBILE — até 420px
   Ajustes finos para telas muito estreitas.
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .btn {
    width: 100%;
    padding: 16px 24px;
  }

  .card {
    padding: 24px 22px;
  }
}