/* ==========================================================================
   Hospital do Ursinho - LAPUPE / UPE
   responsivo.css - breakpoints
   Estrategia: desktop-first, reduzindo em 1024px, 768px e 480px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ate 1024px - tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__conteudo {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    gap: var(--esp-6);
  }

  .hero__texto {
    margin-inline: auto;
  }

  /* O hero centraliza aqui, entao o selo centraliza junto */
  .hero__selo {
    justify-self: center;
  }

  .hero__acoes {
    justify-content: center;
  }

  .hero__ursinho {
    order: -1;
  }

  /* Ate 1024px o hero vira uma coluna e o ursinho passa para cima do texto,
     entao ele encolhe e acompanha a largura da tela: 7,5rem (120px) no
     celular de 320 e 390, crescendo ate 11rem (176px). E o `clamp` que
     substitui os tres tamanhos fixos que existiam antes.

     O seletor e o `picture` pelo mesmo motivo do `componentes.css`: no `img` a
     largura nao seria respeitada por causa do `max-width: 100%` global. */
  .hero__ursinho picture {
    width: clamp(7.5rem, 22vw, 11rem);
  }

  /* 3 fotos por vez em tablet (o desktop mostra 4) */
  .carrossel__item {
    flex-basis: calc((100% - 2 * var(--esp-4) - 0.5rem) / 3);
  }

  .doar {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-6);
  }

  .doar__qr {
    max-width: 420px;
    margin-inline: auto;
  }

  .rodape__interno {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .rodape__marca {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Ate 768px - celular grande
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --esp-9: 3.5rem;
    --altura-cabecalho: 68px;
  }

  .container {
    padding-inline: var(--esp-4);
  }

  /* Menu vira gaveta */
  .menu-botao {
    display: flex;
  }

  .menu {
    position: fixed;
    top: var(--altura-cabecalho);
    left: 0;
    right: 0;
    padding: var(--esp-4) var(--esp-4) var(--esp-5);
    background-color: var(--branco);
    box-shadow: var(--sombra);
    border-top: 1px solid var(--cinza);
    transform: translateY(-130%);
    visibility: hidden;
    transition:
      transform var(--transicao-lenta),
      visibility var(--transicao-lenta);
  }

  .menu.aberto {
    transform: translateY(0);
    visibility: visible;
  }

  .menu__lista {
    flex-direction: column;
    align-items: stretch;
    gap: var(--esp-1);
  }

  .menu__lista a:not(.menu__cta) {
    display: block;
    padding: 0.875rem var(--esp-3);
    border-radius: var(--raio-sm);
  }

  .menu__lista a:not(.menu__cta):hover {
    background-color: var(--cinza-claro);
    text-decoration: none;
  }

  .menu__lista a:not(.menu__cta)::after {
    display: none;
  }

  .menu__cta {
    margin-top: var(--esp-2);
    padding: 0.875rem 1.25rem;
    text-align: center;
  }

  .marca__icone {
    width: 38px;
    height: 38px;
  }

  .marca__icone svg {
    width: 28px;
    height: 28px;
  }

  .marca__texto strong {
    font-size: 1rem;
  }

  .hero {
    min-height: auto;
    padding-block: calc(var(--altura-cabecalho) + var(--esp-7)) var(--esp-7);
  }

  .hero__texto {
    font-size: 1.0625rem;
  }

  /* 2 fotos por vez no celular. E o menor numero usado no site: com 1 foto e
     meia sobraria pedaco cortado da ultima foto no fim da faixa. */
  .carrossel__item {
    flex-basis: calc((100% - var(--esp-4) - 0.5rem) / 2);
  }

  .carrossel__ampliar img {
    height: 14rem;
  }

  .cartao {
    padding: var(--esp-5);
  }

  .passos__lista {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-6);
  }

  .ampliada__conteudo {
    padding-block: var(--esp-8) var(--esp-9);
  }

  .ampliada__img {
    max-height: 70vh;
  }

  .sobre-lapupe__texto {
    padding: var(--esp-5);
  }

  .qr-card {
    padding: var(--esp-5);
  }

  /* 171px = 57 x 3: tambem inteiro, mantem a grade do QR nitida */
  .qr-card__moldura img {
    width: 171px;
    height: 171px;
  }

  .campo__linha {
    flex-direction: column;
  }

  /* A linha virou coluna, entao o eixo principal passou a ser o vertical e o
     flex-basis de 14rem do `.campo__input` virou ALTURA: o campo da chave Pix
     crescia para 224px e o raio de 999px desenhava um ovalo enorme em volta
     dele. Aqui o basis volta a ser automatico e a pilula fica com a mesma
     altura do botao "Copiar". */
  .campo__input {
    flex: 0 0 auto;
    width: 100%;
  }

  /* 6 coordenadores em 2 colunas esticadas: 2+2+2, sem nome quebrando */
  .integrantes__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .botao--copiar {
    width: 100%;
  }

  .rodape__interno {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-5);
    text-align: center;
  }

  .rodape__links ul {
    justify-items: center;
  }

  .rodape__marca p {
    margin-inline: auto;
  }

  .rodape__social {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Ate 480px - celular pequeno
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --esp-9: 2.75rem;
  }

  body {
    font-size: 1rem;
  }

  .hero__acoes {
    flex-direction: column;
  }

  .hero__acoes .botao {
    width: 100%;
  }

  .secao__cabecalho {
    margin-bottom: var(--esp-6);
  }

  .carrossel__item {
    flex-basis: calc((100% - var(--esp-4) - 0.5rem) / 2);
  }

  .carrossel__ampliar img {
    height: 12.5rem;
  }

  .passos {
    margin-top: var(--esp-7);
  }

  .ampliada__conteudo {
    padding-inline: var(--esp-4);
  }

  .doar__outras-botoes {
    flex-direction: column;
  }

  .doar__outras-botoes .botao {
    width: 100%;
  }

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

  .voltar-topo {
    right: var(--esp-4);
    bottom: var(--esp-4);
    width: 44px;
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Paisagem baixa (celular deitado)
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-block: calc(var(--altura-cabecalho) + var(--esp-5)) var(--esp-5);
  }

  /* Tela deitada no celular sobra pouca altura, e o ursinho entra antes do
     texto: ele volta a um tamanho fixo para nao empurrar o titulo para fora. */
  .hero__ursinho picture {
    width: 8rem;
  }
}

/* --------------------------------------------------------------------------
   Impressao
   -------------------------------------------------------------------------- */
@media print {
  .cabecalho,
  .voltar-topo,
  .hero__bolhas,
  .menu,
  .doar__outras-botoes {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  .hero {
    min-height: auto;
    padding-block: var(--esp-5);
    background: none;
  }

  .secao {
    padding-block: var(--esp-5);
    page-break-inside: avoid;
  }

  .cartao,
  .passo,
  .qr-card,
  .sobre-lapupe__texto {
    box-shadow: none;
    border: 1px solid #999;
  }

  .revelar {
    opacity: 1 !important;
    transform: none !important;
  }
}