/* Adaptação para tablet e celular.
   As páginas usam estilo inline, então os alvos são marcados no HTML com
   data-r="..." (o runtime reescreve o atributo style, mas não o data-r). */

/* ───────── até 900px: tablet e celular ───────── */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }

  /* menu de topo vira sanduíche (mobile-nav.js injeta o botão e o painel) */
  header nav { display: none !important; }
  #om-nav-toggle { display: flex !important; }

  /* respiro lateral */
  [data-r~="pad"] { padding-left: 40px !important; padding-right: 40px !important; }

  /* grids de 3 e 4 colunas → 2 */
  [data-r~="grid4"], [data-r~="grid3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* carrossel de logos: 3 por tela */
  [data-r~="railitem"] { flex: 0 0 calc((100% - 80px) / 3) !important; }

  /* tipografia */
  [data-r~="fs66"] { font-size: clamp(32px, 7.6vw, 66px) !important; }
  [data-r~="fs52"] { font-size: clamp(28px, 6.4vw, 52px) !important; }
  [data-r~="fs48"] { font-size: clamp(27px, 6vw, 48px) !important; }
  [data-r~="fs46"] { font-size: clamp(29px, 5.8vw, 46px) !important; }
  [data-r~="fs44"] { font-size: clamp(26px, 5.6vw, 44px) !important; }
  [data-r~="fs40"] { font-size: clamp(25px, 5.2vw, 40px) !important; }
  [data-r~="fs38"] { font-size: clamp(24px, 5vw, 38px) !important; }
  [data-r~="fs34"] { font-size: clamp(20px, 4.2vw, 34px) !important; }
  [data-r~="fs32"] { font-size: clamp(20px, 4vw, 32px) !important; }
  [data-r~="fs30"] { font-size: clamp(19px, 3.8vw, 30px) !important; }

  /* linhas de botão quebram em vez de comprimir */
  [data-r~="btnrow"] { flex-wrap: wrap !important; }
}

/* ───────── até 820px: blocos de duas colunas viram uma ───────── */
@media (max-width: 820px) {
  [data-r~="grid2"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ───────── até 620px: celular ───────── */
@media (max-width: 620px) {
  [data-r~="pad"] { padding-left: 22px !important; padding-right: 22px !important; }

  /* qualquer grid restante empilha */
  [data-r~="grid4"], [data-r~="grid3"], [data-r~="grid2"], [data-r~="grid1"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* carrossel de logos: 2 por tela */
  [data-r~="railitem"] { flex: 0 0 calc((100% - 40px) / 2) !important; }

  /* galerias de projeto: 1 foto por tela, mais baixa */
  [data-r~="galitem"] { flex: 0 0 100% !important; }
  [data-r~="h340"] { height: 230px !important; }

  /* hero não precisa de tela cheia no celular */
  [data-r~="hero"] { min-height: 88svh !important; }

  /* cartões com respiro interno grande */
  [data-r~="padbox"] { padding: 22px !important; }

  /* imagem ampliada em tela cheia */
  [data-r~="lightbox"] { padding: 12px !important; }

  /* botão flutuante do WhatsApp um pouco menor */
  [data-r~="wa"] {
    width: 54px !important; height: 54px !important;
    right: 16px !important; bottom: 16px !important;
  }
}