/* ==========================================================================
   RESPONSIVIDADE — mudanças ESTRUTURAIS por faixa de viewport

   Divisão de responsabilidade:
     - a ESCALA dos componentes é fluida e vive nos próprios arquivos de
       componente, via clamp() sobre a viewport (05-components, 06-header,
       07-hero). Assim o tamanho acompanha a tela de forma contínua, sem
       saltos ao cruzar um breakpoint;
     - este arquivo cuida só do que MUDA DE ESTRUTURA: o que aparece, o que
       desaparece e o que muda de posição.

   As quatro decisões estruturais do hero:
     ≤ 1080px  nav e header compactam o espaçamento
     ≤  900px  nav vira hambúrguer; selo sai; botão assume o centro da base
     ≤  760px  header sai de cima do cartão e vira barra própria em fundo claro
     ≤  360px  rótulo do botão encurta para "Saiba Mais"
   ========================================================================== */

/* --------------------------------------------------------------------------
   ATÉ 1080px — laptop pequeno e tablet em paisagem
   Só o espaçamento comprime: os tamanhos já escalam por clamp().
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .main-nav { gap: clamp(14px, 1.9vw, 28px); }
    .main-nav a { letter-spacing: 0.05em; }
    .site-header__end { gap: clamp(10px, 1.4vw, 18px); }
}

/* --------------------------------------------------------------------------
   ATÉ 900px — a navegação horizontal quebraria em duas linhas

   O selo também sai: sozinho na base, um elemento encostado na lateral
   desequilibra a composição, então o botão assume o centro.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .main-nav { display: none; }
    .menu-trigger { display: block; }

    /* Entre 761 e 900px o header segue flutuando sobre o cartão (absolute):
       basta elevá-lo acima do painel para o gatilho continuar clicável. */
    .site-header { z-index: 120; }

    /* O painel desce até a base do header, sem cobrir a marca. */
    .nav-panel,
    .nav-overlay { top: var(--header-h, 96px); }
    .rotating-badge { display: none; }

    /* "Meus Pedidos" sai do header e passa a fechar o painel do menu: no espaço
       que sobra ao lado do logo, o ícone de conta sozinho pesa menos e mantém a
       barra respirando. O botão continua acessível — a um toque, dentro do menu. */
    .site-header__end .btn-solid { display: none; }

    .btn-pill {
      left: 50%;
      right: auto;
      transform: translateX(-50%);
    }
}

/* --------------------------------------------------------------------------
   ATÉ 760px — mobile: o header sai de cima do cartão

   Vira barra própria sobre o fundo off-white da página, o que exige a versão
   escura do logo e texto em --ink.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    /* Estado rolado no mobile: sticky, então não desliza de volta — só compacta
       e fica translúcido. left/right voltam a auto porque o desktop usa fixed. */
    .site-header.is-scrolled {
      position: sticky;
      left: auto; right: auto;
      padding: clamp(9px, 2.4vw, 13px) calc(var(--gutter) + clamp(6px, 2.4vw, 12px));
      min-height: 0;
      background: rgba(245, 241, 236, 0.82);
      animation: none;
    }
    .site-header.is-scrolled .brand-logo__img--horizontal {
      height: clamp(26px, 7vw, 34px);
    }

    .site-header {
      position: sticky;
      background: var(--offwhite);
      transform: none;      /* anula o alinhamento por centro do desktop */
      top: 0;
      color: var(--ink);
      grid-template-columns: 1fr auto 1fr;
      /* header com presença: a referência usa 95px de altura no mobile.
         O padding lateral extra recolhe os elementos para dentro, alinhados
         com a moldura do cartão logo abaixo. */
      padding: clamp(14px, 3.6vw, 20px) calc(var(--gutter) + clamp(6px, 2.4vw, 12px));
      min-height: clamp(76px, 21vw, 96px);
    }

    /* logo cresce para ocupar o header mais alto */
    .brand-logo__img--empilhada { height: clamp(48px, 13vw, 62px); }

    /* O ícone de conta é o único elemento à direita no mobile — cresce para
       equilibrar o logo, que também aumenta nesta faixa, e para dar área de
       toque de dedo. */
    .site-header__end .btn-icon {
      width: clamp(24px, 6.4vw, 30px);
      height: clamp(24px, 6.4vw, 30px);
    }

    /* Gatilho maior, com traços mais longos e espaçados — mais presença e mais
       área de toque, seguindo a proporção da referência. */
    .menu-trigger {
      width: 48px;
      height: 48px;
      margin-left: -9px;   /* alinha o traço ao gutter, não a caixa de toque */
    }
    .menu-trigger__bar {
      width: 34px;
      height: 2.5px;
      margin-left: -17px;
    }
    .menu-trigger__bar:nth-child(1) { top: 15px; }
    .menu-trigger__bar:nth-child(2) { top: 23px; }
    .menu-trigger__bar:nth-child(3) { top: 31px; }
    .menu-trigger[aria-expanded="true"] .menu-trigger__bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }
    .menu-trigger[aria-expanded="true"] .menu-trigger__bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }

    /* header sobre fundo claro pede o logo em verde escuro. Só a empilhada: a
       horizontal já é a versão verde. */
    .brand-logo__img--empilhada { content: url('../images/brand/logo-stacked-forest.png'); }

    .hero {
      margin: 0 var(--margem) var(--margem);
      height: calc(100svh - clamp(92px, 25vw, 116px));
      min-height: min(460px, 82svh);
    }

    /* headline em duas linhas, sujeito abaixo dela */
    .hero__title {
      top: 7%;
      /* duas linhas: proporção maior da largura, ainda fluida */
      font-size: clamp(56px, 26vw, 210px);
      line-height: 0.88;
      white-space: normal;
    }

    .hero__subject { height: 64%; }

    /* CTA com mais presença: é a única ação visível na dobra do celular */
    .btn-pill {
      font-size: clamp(14.5px, 3.8vw, 18px);
      padding: clamp(8px, 2.2vw, 12px);
      padding-left: clamp(22px, 5.8vw, 32px);
      gap: clamp(13px, 3.2vw, 18px);
    }
    .btn-pill .btn-pill__icon {
      width: clamp(42px, 10.6vw, 52px);
      height: clamp(42px, 10.6vw, 52px);
    }
}

/* --------------------------------------------------------------------------
   ATÉ 900px — a barra de mídia não cabe em linha única

   Vira grade. Os divisores saem: com itens em mais de uma linha eles deixam de
   separar e viram grade de traços.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* A barra única vira uma caixa por logo: em linha quebrada o divisor deixa
       de separar, e o cartão individual dá a mesma leitura sem virar grade de
       traços. */
    .midia__logos {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* Altura única para todos os cartões. Os logos rodam em tamanho natural e
         variam de 20 a 39px de altura, o que deixava as linhas desencontradas.
         A linha precisa caber o mais alto (iG, 39px) somado ao padding, que aqui
         vai a 24px de cada lado — daí o teto de 90. */
      grid-auto-rows: clamp(74px, 18vw, 90px);
      gap: clamp(10px, 2vw, 18px);
      padding: 0;
      background: none;
      box-shadow: none;
      border-radius: 0;
    }
    .midia__logos li {
      padding: clamp(16px, 3.4vw, 24px) clamp(12px, 3vw, 22px);
      background: var(--branco);
      border-radius: clamp(14px, 3vw, 22px);
      box-shadow: 0 10px 26px rgba(46, 50, 39, 0.06);
    }
    .midia__logos li + li { border-left: 0; }
}

@media (max-width: 560px) {
    .midia__logos { grid-template-columns: repeat(2, 1fr); }
    /* o quinto item sobraria sozinho: ocupa a linha inteira */
    .midia__logos li:last-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   DEPOIMENTOS — quatro colunas de texto não sobrevivem a tela estreita
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .depoimentos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .depoimentos__grade {
      grid-template-columns: 1fr;
      max-width: 380px;
    }
    /* os pontos viram lista em coluna: centralizados e quebrados eles perdiam
       o alinhamento entre o check e a frase */
    .depoimentos__pontos {
      justify-content: start;
      max-width: 380px;
      row-gap: 12px;
    }
    .depoimentos__pontos li { flex: 0 0 100%; }
}

/* --------------------------------------------------------------------------
   MEUS PRODUTOS — dois cartões lado a lado deixam a embalagem pequena demais
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .produtos__grade {
      grid-template-columns: 1fr;
      /* em coluna única o cartão viraria um bloco largo demais para a
         embalagem, que é vertical */
      max-width: 380px;
    }
    /* Em coluna única sobra largura: a embalagem pode crescer sem que o cartão
       deixe de caber, e é o mobile que pedia mais destaque para o mockup. */
    .produto__figura img { height: 250px; }
}

/* --------------------------------------------------------------------------
   RODAPÉ — a grade de 4 colunas não cabe antes do desktop
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .rodape__grid {
      grid-template-columns: 1fr 1fr;
    }
    /* marca ocupa a linha inteira: o bloco de endereço é o mais longo */
    .rodape__marca { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .rodape__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   ATÉ 360px — o rótulo longo faria o botão dominar a base do cartão
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
    /* Em teste: mantendo o rótulo longo abaixo de 380px para avaliar como o
       botão se comporta. Se dominar a base do cartão, reativar a troca:
         .btn-pill .btn-pill__label-full  { display: none; }
         .btn-pill .btn-pill__label-short { display: inline; }
       O seletor duplo é obrigatório — em 05-components.css o rótulo curto é
       escondido por .btn-pill .btn-pill__label-short, que vence uma classe só. */
}