/* Camada responsiva.
 *
 * Vive FORA de ui_kits/ e components/ de proposito: aqueles arquivos sao
 * reescritos por um re-export do Claude Design, este nao. Por isso quase
 * tudo que e responsivo mora aqui, e so o hamburguer/gaveta ficou no
 * Shell.jsx — DOM que CSS nao consegue criar.
 *
 * Os seletores atacam style="" porque o design system inteiro usa estilo
 * inline; regra de folha de estilo perde para inline, dai o !important.
 * Nao e forca bruta, e a unica especificidade que alcanca inline.
 *
 * Os cortes saem de medida, nao de numero redondo:
 *   980px — marca (191px) + nav de 8 itens (663px) + respiro pedem ~950px
 *   860px — abaixo disso 5 colunas viram cartoes de menos de 150px
 *   768px — tratamento de celular
 */

/* ------------------------------------------------------------------ */
/* Chrome do cabecalho: gaveta e hamburguer so existem no mobile       */
/* ------------------------------------------------------------------ */

.site-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
}

.site-drawer {
  display: none;
}

/* ================================================================== */
/* <= 980px — o nav de 8 itens nao cabe mais em uma linha             */
/* ================================================================== */

@media (max-width: 980px) {
  .site-nav {
    display: none !important;
  }

  .site-burger {
    display: flex;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .site-drawer {
    position: fixed;
    top: var(--header-h, 60px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 19;
    display: flex;
    flex-direction: column;
    padding: 8px var(--space-5) var(--space-5);
    background: var(--surface-page);
    overflow-y: auto;
  }

  .site-drawer button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* piso de alvo de toque */
    min-height: 52px;
    padding: 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
}

/* ================================================================== */
/* <= 860px — tablet: grades largas apertam demais                    */
/* ================================================================== */

@media (max-width: 860px) {
  /* minmax(0, ...) e nao 1fr puro: "1fr" e atalho de "minmax(auto, 1fr)",
   * e o minimo auto impede a trilha de encolher abaixo do min-content.
   * Na pagina de artigo isso deixava uma trilha de 450px dentro de uma
   * secao de 375px. O zero e o que autoriza a trilha a espremer. */
  [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ================================================================== */
/* <= 768px — celular                                                 */
/* ================================================================== */

@media (max-width: 768px) {
  /* ---------------------------------------------------------------- */
  /* Ritmo da pagina                                                  */
  /* ---------------------------------------------------------------- */

  /* --space-7 (48px) come 25% de uma tela de 390 */
  header,
  footer,
  section {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
  }

  section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* ---------------------------------------------------------------- */
  /* Layout                                                           */
  /* ---------------------------------------------------------------- */

  [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* mesmo motivo do minmax, um nivel abaixo: item de flex/grid tem
   * min-width auto e se recusa a encolher abaixo do proprio conteudo */
  [style*="grid-template-columns"] > *,
  section[style*="display: flex"] > *,
  section[style*="display:flex"] > * {
    min-width: 0;
  }

  /* Secoes em linha (hero, faixas com aparte lateral) empilham.
   *
   * As duas grafias sao necessarias: o React serializa estilo inline com
   * espaco depois do dois-pontos ("display: flex"), mas HTML escrito a
   * mao nos .card.html vem sem. Casar so uma das formas falha calado. */
  section[style*="display: flex"],
  section[style*="display:flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* o circulo de 280px do hero: centraliza em vez de vazar a direita */
  section[style*="display: flex"] > [style*="border-radius: 50%"],
  section[style*="display:flex"] > [style*="border-radius:50%"] {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }

  /* Utilitario para linha flex que NAO e uma <section> — os seletores por
   * style="" acima so alcancam a secao. Marque a div no .jsx com esta
   * classe quando ela for uma linha que precisa empilhar no celular. */
  .stack-on-mobile {
    flex-direction: column !important;
    align-items: flex-start !important;
    /* sem !important de proposito: linha que ja traz gap inline mantem o
     * dela; este valor so cobre quem espacava por justify-content, que
     * deixa de separar qualquer coisa depois de empilhar */
    gap: var(--space-4);
  }

  .stack-on-mobile > * {
    min-width: 0;
    max-width: 100%;
  }

  /* rodape empilha e respira */
  footer {
    flex-direction: column !important;
    gap: var(--space-4);
    align-items: flex-start !important;
  }

  /* ---------------------------------------------------------------- */
  /* Tipografia                                                       */
  /* ---------------------------------------------------------------- */

  /* --text-4xl (60px) daria ~6 linhas em 342px de medida */
  h1 {
    font-size: 36px !important;
    line-height: var(--leading-tight) !important;
  }

  h2 {
    font-size: 26px !important;
  }

  /* ---------------------------------------------------------------- */
  /* Alvos de toque                                                   */
  /* ---------------------------------------------------------------- */

  section button {
    min-height: 46px;
  }

  /* Link so-de-icone renderiza com a altura do proprio svg — 16px, longe
   * do alcance confortavel do dedo. Cresce a area clicavel sem mexer no
   * desenho do icone. */
  a:has(> svg) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ================================================================== */
/* <= 380px — so o gutter aperta mais                                 */
/* ================================================================== */

@media (max-width: 380px) {
  header,
  footer,
  section {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }

  h1 {
    font-size: 32px !important;
  }
}