/* Ajustes para telas pequenas */

@media (max-width: 820px) {
  :root {
    --gutter: 14px;
  }
  .wrap {
    grid-template-columns: minmax(0, 1fr); /* minmax(0, ...) evita a coluna passar da largura da tela */
    gap: 22px;
    margin-top: 18px;
  }
  .grid {
    gap: 14px;
  }
  .art {
    --pad: 24px;
  }
  .art > h1 {
    font-size: 30px;
    margin-bottom: 24px;
    padding-bottom: 22px;
  }
  .art .body {
    font-size: 17.5px;
  }
  .art .cover--lg {
    margin-bottom: 26px;
  }
  .cover--lg {
    height: 180px;
  }

  /* Cabeçalho centralizado: título, menu e botão de tema, um embaixo do outro */
  .bar {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
  }
  .bar-actions {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  /* Logo centralizada: símbolo rente ao nome e a frase centralizada embaixo de tudo */
  .logo {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-template-areas:
      'mark name'
      'tag tag';
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
  }
  .logo-text {
    display: contents; /* o nome e a frase passam a ser itens da grade do .logo */
  }
  .logo-mark {
    grid-area: mark;
    height: 46px;
  }
  .logo-name {
    grid-area: name;
  }
  .logo small {
    grid-area: tag;
    justify-self: stretch;
    margin-inline: -32px; /* a frase não alarga a coluna do símbolo e do nome */
    text-align: center;
  }
  nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
  }
  #nav a,
  #nav button {
    margin: 0;
  }

  /* Destaques: setas sobre a imagem (sem cobrir o texto), então o texto usa a largura toda */
  .hero {
    --k: 1.2;
    --side: 20px;
    --hero-cover: 150px;
  }
  .hero .cover-cat {
    font-size: 22px;
  }
  .hero .cover .cover-cat--more {
    font-size: 15px;
  }
  .hero .cb {
    padding: 22px var(--side) 20px;
  }
  .hero .cb h2 {
    font-size: 25px;
  }
  .hero .meta {
    font-size: 13.5px;
  }
  .hero .cb p {
    font-size: 16.5px;
    margin: 12px 0 18px;
  }
  .hero-nav {
    width: 38px;
    height: 38px;
    top: calc(var(--hero-cover) / 2); /* no meio da faixa colorida, sem cobrir o texto */
  }
}

@media (max-width: 520px) {
  :root {
    --gutter: 8px; /* use 0 para os cards encostarem nas bordas da tela */
  }
  .grid {
    gap: 10px;
  }
  .box {
    padding: 14px;
  }
  .art {
    --pad: 18px;
  }
  /* informações do artigo em duas linhas arrumadas: autor; data · leituras */
  .art > .meta .byline {
    flex-basis: 100%;
  }
  .art > .meta .byline + span::before {
    content: none;
  }
}